{"id":18841615,"url":"https://github.com/alphasights/ember-cli-paint","last_synced_at":"2025-04-14T07:31:02.087Z","repository":{"id":23080377,"uuid":"26434133","full_name":"alphasights/ember-cli-paint","owner":"alphasights","description":"Ember-cli wrapper for paint","archived":false,"fork":false,"pushed_at":"2017-03-22T12:20:50.000Z","size":246,"stargazers_count":7,"open_issues_count":3,"forks_count":1,"subscribers_count":47,"default_branch":"develop","last_synced_at":"2024-10-29T11:40:06.906Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alphasights.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-11-10T11:44:04.000Z","updated_at":"2019-11-15T18:53:57.000Z","dependencies_parsed_at":"2022-08-05T20:30:11.834Z","dependency_job_id":null,"html_url":"https://github.com/alphasights/ember-cli-paint","commit_stats":null,"previous_names":[],"tags_count":85,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alphasights%2Fember-cli-paint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alphasights%2Fember-cli-paint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alphasights%2Fember-cli-paint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alphasights%2Fember-cli-paint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alphasights","download_url":"https://codeload.github.com/alphasights/ember-cli-paint/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248530551,"owners_count":21119590,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-08T02:51:52.299Z","updated_at":"2025-04-14T07:31:01.769Z","avatar_url":"https://github.com/alphasights.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ember-cli-paint\n\n[![Ember Observer Score](http://emberobserver.com/badges/ember-cli-paint.svg)](http://emberobserver.com/addons/ember-cli-paint)\n\n`ember-cli-paint` is an Ember addon that adds [Paint](https://github.com/alphasights/paint) components to your application.\n\nMore specifically it does two things:\n\n- Add core libraries to your project dependencies\n\n```\napp.import(path.join(app.bowerDirectory, 'paint/paint.scss'));\napp.import(path.join(app.bowerDirectory, 'modernizr/modernizr.js'));\napp.import(path.join(app.bowerDirectory, 'foundation/js/foundation/foundation.js'));\n```\n\nThis means that after installing ember-cli-paint you'll be able to use paint css straight away.\n\n- Expose Ember components\n\n### Example: Tooltip Component\n\n![](http://cl.ly/image/2h1A2l1K0Y35/download/Image%202015-01-08%20at%2011.16.12%20am.png)\n\n```\nexport default Ember.Component.extend({\n  classNameBindings: [':has-tip', 'tooltipPositionClass'],\n  attributeBindings: ['ariaHaspopup:aria-haspopup', 'dataTooltip:data-tooltip', 'title'],\n\n  ariaHaspopup: 'true',\n  dataTooltip: '',\n  tooltipPosition: 'bottom',\n\n  tooltipPositionClass: function() {\n    return `tip-${this.get('tooltipPosition')}`;\n  }.property('tooltipPosition'),\n\n  onDidInsertElement: function() {\n    Ember.$(document).foundation({ tooltip: {} });\n  }.on('didInsertElement')\n});\n```\n\nYou can extend the component in your project like so:\n\n```\nimport Ember from 'ember';\nimport AsTooltip from 'ember-cli-paint/components/as-tooltip';\n\nexport default AsTooltip.extend({\n  classNameBindings: [':avatar'],\n  attributeBindings: ['src', 'alt', 'title'],\n  tagName: 'img',\n  tooltipPosition: 'top',\n\n  user: null,\n  alt: Ember.computed.alias('user.initials'),\n  src: Ember.computed.alias('user.avatarUrl'),\n  title: Ember.computed.alias('user.name')\n});\n```\n\nAnd use it in templates\n\n```\n...\n{{as-avatar user=lead class=\"lead\"}}\n...\n```\n\nYou can also use it directly\n\n```\n{{#as-tooltip title=\"This will be in the tooltip\"}}\n  \u003cimg src=\"blabla\"\u003e\u003c/img\u003e\n{{/as-tooltip}}\n```\n\n## Creating your own component\n\nCheck out the documentation regarding addons at http://ember-cli.com.\n[This blog post](http://hashrocket.com/blog/posts/a-compendium-of-hooks-in-embercli) documents some of the hooks you can leverage in ember addons.\n\nIf you have added a new Paint component remember to bump its version in bower.json and in blueprints index.js\n\n## Installation\n\n* `git clone` this repository\n* `npm install`\n* `bower install`\n\n## Running\n\n* `ember server`\n* Visit your app at http://localhost:4200.\n\n## Running Tests\n\n* `ember test`\n* `ember test --server`\n\n## Building\n\n* `ember build`\n\n## Publishing the package\n\n- Merge your PR on GitHub\n- `git checkout master`\n- `git pull`\n- Bump package version (e.g. `npm version patch`)\n- `npm publish`\n- `git push --tags`\n\nFor more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falphasights%2Fember-cli-paint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falphasights%2Fember-cli-paint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falphasights%2Fember-cli-paint/lists"}