all files / addon/components/ el-row.js

0% Statements 0/12
0% Branches 0/8
0% Functions 0/2
0% Lines 0/12
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45                                                                                         
import Component from '@ember/component';
import layout from '../templates/components/el-row';
import {computed, get} from "@ember/object";
import {htmlSafe} from '@ember/template';
 
export default Component.extend({
  layout,
  gutter: null, // todo: Add dynamic gutter classes
  justify: 'start',
  align: 'top',
  type: null,
 
  classNames: ['el-row'],
  classNameBindings: ['getClassName'],
  attributeBindings: ['style'],
 
  style: computed('gutter', function () {
    if (get(this, 'gutter')) {
      let gutter = (get(this, 'gutter') / 2) + 'px';
      return htmlSafe(`margin-left: -${gutter}; margin-right: -${gutter}`);
    }
    return htmlSafe("");
  }),
 
  getClassName: computed('justify', 'align', function () {
 
    let classNames = '';
 
    if (get(this, 'justify') !== 'start') {
      classNames += ` is-justify-${get(this, 'justify')}`;
    }
 
    if (get(this, 'align') !== 'top') {
      classNames += ` is-align-${get(this, 'align')}`;
    }
 
    if (get(this, 'type') === 'flex') {
      classNames += ` el-row--flex`;
    }
 
    return classNames;
  }),
});