Ember-computed-style NPM

ember-computed-style

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