aurelia-form/src/component/form-select.js

Makes working with forms just a tad more pleasant.

import {bindable, customElement, bindingMode, computedFrom} from 'aurelia-framework';
import {resolvedView} from 'aurelia-view-manager';

@resolvedView('spoonx/form', 'form-select')
@customElement('form-select')
export class FormSelect {
  @bindable({defaultBindingMode: bindingMode.twoWay}) value;

  @bindable name = '';

  @bindable classes = '';

  @bindable readonly = false;

  @bindable disabled = false;

  @bindable multiple = false;

  @bindable selectOptions = [];

  @bindable options = {};

  @bindable optionLabel = 'name';

  @bindable autofocus;

  @bindable required;

  @bindable translate = true;

  @computedFrom('selectOptions', 'optionLabel')
  get optionLabels() {
    return this.selectOptions.map(option => {
      if (typeof option !== 'object') {
        return {value: option, label: option};
      }

      if (this.optionLabel) {
        option.label = option[this.optionLabel] || '';
      }

      return option;
    });
  }

  getOptionLabel(option) {
    if (typeof option === 'object' && this.optionLabel) {
      return option[this.optionLabel] || option;
    }

    return option;
  }
}