feat(project): add select

src/aurelia-form.js

@@ -24,7 +24,8 @@ export function configure(aurelia, config) {
   let defaultElements = [
     'input',
     'checkbox',
-    'radio'
+    'radio',
+    'select'
   ];
 
   aurelia.globalResources(
@@ -52,7 +53,8 @@ export const config = {
       float  : 'input',
       bool   : 'checkbox',
       boolean: 'checkbox',
-      text   : 'input'
+      text   : 'input',
+      select : 'select'
     }
   }
 };

src/component/form-element.js

@@ -26,8 +26,14 @@ export class FormElement {
 
   @bindable disabled = false;
 
+  @bindable multiple = false;
+
   @bindable options = {};
 
+  @bindable selectOptions = [];
+
+  @bindable optionLabel;
+
   proxyAttributes = [
     'value',
     'name',
@@ -36,7 +42,10 @@ export class FormElement {
     'readonly',
     'disabled',
     'options',
-    'type'
+    'type',
+    'multiple',
+    'selectOptions',
+    'optionLabel'
   ];
 
   constructor(config, DOMElement, templatingEngine) {
@@ -54,7 +63,11 @@ export class FormElement {
   }
 
   setAttributes(DOMElement) {
-    this.proxyAttributes.forEach(attribute => DOMElement.setAttribute(`${attribute}.bind`, attribute));
+    this.proxyAttributes.forEach(attribute => {
+      let formattedAttribute = styleHyphenFormat(attribute);
+
+      DOMElement.setAttribute(`${formattedAttribute}.bind`, attribute)
+    });
   }
 
   getElementName() {
@@ -71,3 +84,10 @@ export class FormElement {
     return elementName;
   }
 }
+
+function styleHyphenFormat(propertyName) {
+  function upperToHyphenLower(match, offset) {
+    return (offset ? '-' : '') + match.toLowerCase();
+  }
+  return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
+}

src/component/form-group.js

@@ -24,6 +24,16 @@ export class FormGroup {
 
   @bindable behavior;
 
+  @bindable readonly = false;
+
+  @bindable disabled = false;
+
+  @bindable multiple = false;
+
+  @bindable selectOptions = [];
+
+  @bindable optionLabel;
+
   is(oneOf, then, source) {
     if (typeof oneOf === 'string') {
       oneOf = oneOf.split(',').map(one => one.trim());

src/component/form-select.js

@@ -0,0 +1,32 @@
+import {bindable, customElement, bindingMode} 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';
+
+  getOptionLabel(option) {
+    if (typeof option === 'object' && this.optionLabel) {
+      return option[this.optionLabel] || option;
+    }
+
+    return option;
+  }
+}

src/component/view/bootstrap/form-group.html

@@ -48,6 +48,11 @@
             element.bind="element"
             type.bind="type"
             value.bind="value"
+            readonly.bind="readonly"
+            disabled.bind="disabled"
+            multiple.bind="multiple"
+            select-options.bind="selectOptions"
+            option-label.bind="optionLabel"
           ></form-element>
         </slot>
 

src/component/view/bootstrap/form-select.html

@@ -0,0 +1,13 @@
+<template>
+  <select
+    value.bind="value"
+    class="form-control ${classes}"
+    name.bind="name"
+    readonly.bind="readonly !== false"
+    prefixed="options.bind: options; prefix: input-"
+    disabled.bind="disabled !== false"
+    multiple.bind="multiple !== false"
+  >
+    <option repeat.for="option of selectOptions" model.bind="option" t="${getOptionLabel(option)}">${getOptionLabel(option)}</option>
+  </select>
+</template>