Narnia's Poofy Meatcleaver

    ember-computed-style

    0.3.0 • Public • Published

    ember-computed-style Build Status Ember Observer Score

    Ember Computed Style

    Provides a simple computed property mixin for Ember Components to compute styles from objects similar how it can be done in React.

    Usage

    Take this example code:

    import computedStyle from 'ember-computed-style';
     
    export default Ember.Component.extend({
      style: computedStyle('styleProperties'),
     
      styleProperties: {
        position: 'absolute',
        top: 10,
        left: 50
      },
     
      attributeBindings: ['style'],
     
    });

    This will set style to a CSS style string computed from the returned object from the handler function. The value of this will be correctly encoded as:

      position: absolute; top: 10px; left: 50px;

    Properties which are not designated to have a unit value will be left as is, otherwise px unit will be added if they're a Number.

    You can also compute it from multiple property bindings, if each of them return an object keyed on the CSS property name:

    import computedStyle from 'ember-computed-style';
     
    export default Ember.Component.extend({
      style: computedStyle('horizontalPosition', 'verticalPosition', 'positionType'),
     
      positionType: {
        position: 'absolute'
      },
      
      verticalPosition: computed('targetRect', function() {
        const targetRect = this.get('targetRect');
     
        return {top: targetRect.top + 10};
      }),
     
      horizontalPosition: computed(function() {
        return {left: 50};
      }),
     
      attributeBindings: ['style'],
    });

    Installation

    • ember install ember-computed-style

    Linting

    • npm run lint:js
    • npm run lint:js -- --fix

    Running tests

    • ember test – Runs the test suite on the current Ember version

    • ember test --server – Runs the test suite in "watch mode"

    • ember try:each – Runs the test suite against multiple Ember versions

    • npm test (Runs ember try:testall to test your addon against multiple Ember versions)

    • ember test

    • ember test --server

    Running the dummy application

    For more information on using ember-cli, visit https://ember-cli.com/.

    License

    This project is licensed under the MIT License.

    Install

    npm i ember-computed-style

    DownloadsWeekly Downloads

    201

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    28.5 kB

    Total Files

    10

    Last publish

    Collaborators

    • ivanvanderbyl