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

0% Statements 0/10
0% Branches 0/10
0% Functions 0/3
0% Lines 0/8
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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61                                                                                                                         
import Component from '@ember/component';
import layout from '../templates/components/el-button';
import {computed, get} from "@ember/object";
 
export default Component.extend({
  layout,
  tagName: 'button',
 
 
  classNames: ['el-button'],
  classNameBindings: ['getClassName',
    'loading:is-loading',
    'plain:is-plain',
    'round:is-round',
    'circle:is-circle',
  ],
 
  attributeBindings: ['disabled', 'autofocus', 'type', 'style'],
 
 
  disabled: false,
  autofocus: false,
 
  color: 'default',
  size: false, // false, medium, small, mini
  icon:  false,
  loading: false,
  plain: false,
  round: false,
  circle: false,
 
 
  getClassName: computed('color', 'size', 'disabled', 'autofocus', function () {
 
    let classNames = '';
 
    classNames += 'el-button--' + get(this, 'color');
 
    if(get(this, 'size')){classNames += ` el-button--${get(this, 'size')}`;}
 
    if(get(this, 'loading') || get(this, 'disabled') ){classNames += ` is-disabled`;}
 
    return classNames;
  }),
 
 
  showIcon: computed('icon', 'loading', function(){
    return !!(get(this, 'icon') && !get(this, 'loading'));
  }),
 
 
  click(){
    if(this.get('action')){
      this.get('action')();
    }
  }
 
 
});