addon/components/ui-select.js

  1. import { computed } from '@ember/object';
  2. import Component from '@ember/component';
  3. import { A } from '@ember/array';
  4. import EmberObject from '@ember/object';
  5. import layout from '../templates/components/ui-select';
  6.  
  7. /**
  8. ui-select component
  9.  
  10. @module components
  11. @namespace components 
  12. @class UiSelect
  13. @constructor
  14. */
  15. export default Component.extend({
  16.     layout: layout,
  17.     defaultValue: null,
  18.     tagName: 'select',
  19.     didRender() {
  20.         let that = this;
  21.         this.$().dropdown({
  22.             forceSelection: false,
  23.             onChange(value){
  24.                 if(that.attrs.value){
  25.                     that.attrs.value.update(value);
  26.                 }
  27.             }
  28.         });
  29.         if(!this.get('value')){
  30.             this.$().dropdown('restore placeholder text');
  31.         }
  32.     },
  33.     /**
  34.      * value  for the select 
  35.      *
  36.      * @property {String} value
  37.      */
  38.     value: '',
  39.     /**
  40.      *  label for the select radio group component
  41.      *
  42.      * @property {String} label
  43.      */
  44.     label: '',
  45.  
  46.     /**
  47.      * name key for option, by default name
  48.      *
  49.      * @property {String} namePath
  50.      * @default 'value'
  51.      */
  52.     labelPath: 'name',
  53.  
  54.     /**
  55.      * value key for option, by default value
  56.      *
  57.      * @property {String} valuePath
  58.      * @default 'value'
  59.      */
  60.     valuePath: 'value',
  61.     /**
  62.      * placeholder for blank option
  63.      *
  64.      * @property {String} placeholder
  65.      */
  66.     placeholder: '',
  67.  
  68.     /**
  69.      * the select theme
  70.      *
  71.      * @property {String} theme
  72.      */
  73.     theme: '',
  74.  
  75.     /**
  76.      * the select theme
  77.      *
  78.      * @property {String} class
  79.      */
  80.     class: '',
  81.  
  82.     /**
  83.      * options for the select component
  84.      *
  85.      * @property {Array} options
  86.      */
  87.     options: null,
  88.  
  89.     /**
  90.      * options for the select component
  91.      * @private
  92.      * @property {Array} _options
  93.      */
  94.     _options: computed('options', {
  95.         get(){
  96.             const _options = A();
  97.             for (var i = 0; i < this.options.length; i++) {
  98.                 let item = this.options[i];
  99.                 let label = item[this.get('labelPath')];
  100.                 let value = item[this.get('valuePath')];
  101.                 let checked = this.isOptionChecked(value);
  102.                 let obj = EmberObject.create({
  103.                     'label': label,
  104.                     'value': String(value),
  105.                     'selected': checked
  106.                 });
  107.                 _options.pushObject(obj);
  108.             }
  109.             return _options;
  110.         }
  111.     }),
  112.  
  113.     classNameBindings: ['_uiClass', 'search:search:', 'class', 'theme', 'selection', '_componentClass'],
  114.     _uiClass: 'ui',
  115.     _componentClass: 'dropdown',
  116.     /**
  117.      * allow select to search or not , by default false
  118.      *
  119.      * @property {Boolean} search
  120.      * @default false
  121.      */
  122.     search: false,
  123.     /**
  124.      * @method setupOptions 
  125.      * @observes "options" property
  126.      * @returns  {void}
  127.      */
  128.     isOptionChecked(optionValue) {
  129.         return String(this.value) === optionValue;
  130.     },
  131.     init() {
  132.         this._super(...arguments);
  133.     }
  134. });