addon/components/ui-select.js

import { computed } from '@ember/object';
import Component from '@ember/component';
import { A } from '@ember/array';
import EmberObject from '@ember/object';
import layout from '../templates/components/ui-select';

/**
ui-select component

@module components
@namespace components 
@class UiSelect
@constructor
*/
export default Component.extend({
    layout: layout,
    defaultValue: null,
    tagName: 'select',
    didRender() {
        let that = this;
        this.$().dropdown({
            forceSelection: false,
            onChange(value){
                if(that.attrs.value){
                    that.attrs.value.update(value);
                }
            }
        });
        if(!this.get('value')){
            this.$().dropdown('restore placeholder text');
        }
    },
    /**
     * 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: computed('options', {
        get(){
            const _options = A();
            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
                });
                _options.pushObject(obj);
            }
            return _options;
        }
    }),

    classNameBindings: ['_uiClass', 'search:search:', 'class', 'theme', 'selection', '_componentClass'],
    _uiClass: 'ui',
    _componentClass: 'dropdown',
    /**
     * allow select to search or not , by default false
     *
     * @property {Boolean} search
     * @default false
     */
    search: false,
    /**
     * @method setupOptions 
     * @observes "options" property
     * @returns  {void}
     */
    isOptionChecked(optionValue) {
        return String(this.value) === optionValue;
    },
    init() {
        this._super(...arguments);
    }
});