https://github.com/alphasights/ember-cli-paint
Ember-cli wrapper for paint
https://github.com/alphasights/ember-cli-paint
Last synced: about 1 year ago
JSON representation
Ember-cli wrapper for paint
- Host: GitHub
- URL: https://github.com/alphasights/ember-cli-paint
- Owner: alphasights
- License: mit
- Created: 2014-11-10T11:44:04.000Z (over 11 years ago)
- Default Branch: develop
- Last Pushed: 2017-03-22T12:20:50.000Z (about 9 years ago)
- Last Synced: 2024-10-29T11:40:06.906Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 240 KB
- Stars: 7
- Watchers: 47
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Ember-cli-paint
[](http://emberobserver.com/addons/ember-cli-paint)
`ember-cli-paint` is an Ember addon that adds [Paint](https://github.com/alphasights/paint) components to your application.
More specifically it does two things:
- Add core libraries to your project dependencies
```
app.import(path.join(app.bowerDirectory, 'paint/paint.scss'));
app.import(path.join(app.bowerDirectory, 'modernizr/modernizr.js'));
app.import(path.join(app.bowerDirectory, 'foundation/js/foundation/foundation.js'));
```
This means that after installing ember-cli-paint you'll be able to use paint css straight away.
- Expose Ember components
### Example: Tooltip Component
```
export default Ember.Component.extend({
classNameBindings: [':has-tip', 'tooltipPositionClass'],
attributeBindings: ['ariaHaspopup:aria-haspopup', 'dataTooltip:data-tooltip', 'title'],
ariaHaspopup: 'true',
dataTooltip: '',
tooltipPosition: 'bottom',
tooltipPositionClass: function() {
return `tip-${this.get('tooltipPosition')}`;
}.property('tooltipPosition'),
onDidInsertElement: function() {
Ember.$(document).foundation({ tooltip: {} });
}.on('didInsertElement')
});
```
You can extend the component in your project like so:
```
import Ember from 'ember';
import AsTooltip from 'ember-cli-paint/components/as-tooltip';
export default AsTooltip.extend({
classNameBindings: [':avatar'],
attributeBindings: ['src', 'alt', 'title'],
tagName: 'img',
tooltipPosition: 'top',
user: null,
alt: Ember.computed.alias('user.initials'),
src: Ember.computed.alias('user.avatarUrl'),
title: Ember.computed.alias('user.name')
});
```
And use it in templates
```
...
{{as-avatar user=lead class="lead"}}
...
```
You can also use it directly
```
{{#as-tooltip title="This will be in the tooltip"}}
{{/as-tooltip}}
```
## Creating your own component
Check out the documentation regarding addons at http://ember-cli.com.
[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.
If you have added a new Paint component remember to bump its version in bower.json and in blueprints index.js
## Installation
* `git clone` this repository
* `npm install`
* `bower install`
## Running
* `ember server`
* Visit your app at http://localhost:4200.
## Running Tests
* `ember test`
* `ember test --server`
## Building
* `ember build`
## Publishing the package
- Merge your PR on GitHub
- `git checkout master`
- `git pull`
- Bump package version (e.g. `npm version patch`)
- `npm publish`
- `git push --tags`
For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/).