addon/mixins/ui-select-base.js

import Mixin from '@ember/object/mixin'; 
import EmberObject from '@ember/object'; 
import { observer } from '@ember/object'; 
import { A } from '@ember/array'; 


/**
ui-select-base mixin

@module mixins
@namespace mixins
@class UiSelectBase
@constructor
*/
export default Mixin.create({
    tagName: 'div',

    /**
     * value  for the select 
     *
     * @property {String} value
     */
    value: '',
    /**
     *  label for the select radio group component
     *
     * @property {String} label
     */
    label: '',

    /**
     * name key for option, by default name
     *
     * @property {String} namePath
     * @default 'value'
     */
    labelPath: 'name',

    /**
     * value key for option, by default value
     *
     * @property {String} valuePath
     * @default 'value'
     */
    valuePath: 'value',
    /**
     * placeholder for blank option
     *
     * @property {String} placeholder
     */
    placeholder: '',

    /**
     * the select theme
     *
     * @property {String} theme
     */
    theme: '',

    /**
     * the select theme
     *
     * @property {String} class
     */
    class: '',

    /**
     * options for the select component
     *
     * @property {Array} options
     */
    options: null,

    /**
     * options for the select component
     * @private
     * @property {Array} _options
     */
    _options: null,

    classNameBindings: ['_uiClass', 'search:search:', '_multiple:multiple:', 'class', 'theme', '_theme', '_componentClass'],
    _uiClass: 'ui',
    _theme: 'selection',
    _componentClass: 'dropdown',
    _multiple: false,
    /**
     * allow select to search or not , by default false
     *
     * @property {Boolean} search
     * @default false
     */
    search: false,

    /**
     * inner value state just for outer value change
     *
     * @private
     * @property {String} _value
     */
    _value: null,

    /**
     * selected items to 
     *
     * @property {String} _selectedOptions
     */
    _selectedOptions: null,

    didInsertElement() {
        this.renderDropDown();
    },
    /**
     * @method setupOptions 
     * @observes "options" property
     * @returns  {void}
     */
    setupOptions() {
        if (this.options) {
            this._options.clear();
            for (var i = 0; i < this.options.length; i++) {
                let item = this.options[i];
                let label = item[this.get('labelPath')];
                let value = item[this.get('valuePath')];
                let checked = this.isOptionChecked(value);
                let obj = EmberObject.create({
                    'label': label,
                    'value': String(value),
                    'selected': checked
                });
                if (checked) {
                    this._selectedOptions.pushObject(obj);
                }
                this._options.pushObject(obj);
            }
        }
    },
    optionsChange: observer('options', function(){
        this.setupOptions();
    }),
    init() {
        this._super(...arguments);
        this.set('_selectedOptions', A());
        this.set('_options', A());
        this.setupOptions();
    }
});