added select input

Author: matt-sanders

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-formly-bootstrap",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "A bootstrap based form input bundle for Vue Formly",
   "main": "dist/vue-formly-bootstrap.js",
   "scripts": {

src/fields/fieldInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="form-group">
     <label v-if="form[key].label" :for="form[key].id ? form[key].id : null">{{form[key].label}}</label>
-    <input class="form-control" :class="form[key].classes" :id="form[key].id ? form[key].id : null" :type="form[key].inputType" v-model="form[key].value" :placeholder="form[key].placeholder" @blur="onBlur" @focus="onFocus" @click="onClick" @change="onChange" @keyup="onKeyup" @keydown="onKeydown" v-formly-atts="form[key].atts">
+    <input class="form-control" :class="form[key].classes" :id="form[key].id ? form[key].id : null" :type="form[key].inputType" v-model="form[key].value" @blur="onBlur" @focus="onFocus" @click="onClick" @change="onChange" @keyup="onKeyup" @keydown="onKeydown" v-formly-atts="form[key].atts">
   </div>
 </template>
 

src/fields/fieldSelect.vue

@@ -2,6 +2,7 @@
   <div class="form-group">
     <label v-if="form[key].label" :for="form[key].id ? form[key].id : null">{{form[key].label}}</label>
     <select class="form-control" :class="form[key].classes" :id="form[key].id ? form[key].id : null" v-model="form[key].value" @blur="onBlur" @focus="onFocus" @click="onClick" @change="onChange" @keyup="onKeyup" @keydown="onKeydown" v-formly-atts="form[key].atts">
+      <option v-for="option in form[key].options" :value="option.value || option">{{option.label || option}}</option>
     </select>
   </div>
 </template>

test/unit/specs/index.spec.js

@@ -95,26 +95,26 @@ function describeFunctions(inputElement){
     });
 };
 
-function describeAttributes(inputElement, exclude = []){
+function describeAttributes(inputElement, testPlaceholder = true){
     beforeEach(()=>{
         data.form.test.type = inputElement;
         data.form.test.inputType = 'text';
     });
 
     it('attributes', () => {
-        if ( exclude.indexOf('attributes') >= 0 ) return true;
         data.form.test.atts = {
             'data-foo': 'bar',
-            'data-bar': 'foo'
+            'data-bar': 'foo',
+            'placeholder': 'holding'
         };
         createForm();
         let input = vm.$el.querySelectorAll(inputElement)[0];
         expect(input.dataset.foo).to.equal('bar');
         expect(input.dataset.bar).to.equal('foo');
+        if ( testPlaceholder ) expect(input.placeholder).to.equal('holding');
     });
 
     it('classes', () => {
-        if ( exclude.indexOf('classes') >= 0 ) return true;
         data.form.test.classes = {
             'class-a': true,
             'class-b': false
@@ -124,18 +124,7 @@ function describeAttributes(inputElement, exclude = []){
         expect(input.className).to.equal('form-control class-a');
     });
 
-
-
-    it('placeholder', () => {
-        if ( exclude.indexOf('placeholder') >= 0 ) return;
-        data.form.test.placeholder = 'holding';
-        createForm();
-        let input = vm.$el.querySelectorAll(inputElement)[0];
-        expect(input.placeholder).to.equal('holding');
-    });
-
     it('id', () => {
-        if ( exclude.indexOf('id') >= 0 ) return true;
         data.form.test.id = 'someId';
         createForm();
         let input = vm.$el.querySelectorAll(inputElement)[0];
@@ -219,7 +208,7 @@ describe('Bootstrap Field Inputs', () => {
             describeFunctions('select');
         });
         describe('classes & attributes', () => {
-            describeAttributes('select', ['placeholder']);
+            describeAttributes('select', false);
         });
         describe('conditional elements', ()=>{
             describeConditional('select');
@@ -234,6 +223,31 @@ describe('Bootstrap Field Inputs', () => {
 
             expect(inputs).to.be.length(1);
         });
+
+        it('array options', () => {
+            data.form.test.type = 'select';
+            data.form.test.options = ['one', 'two', 'three'];
+            createForm();
+            let options = vm.$el.querySelectorAll('option');
+            let option = options[0];
+            expect(options).to.be.length(3);
+            expect(option.value).to.equal('one');
+            expect(option.innerHTML).to.equal('one');
+        });
+
+        it('object options', () => {
+            data.form.test.type = 'select';
+            data.form.test.options = [
+                { label: 'Foo', value: 'bar' },
+                { label: 'Bar', value: 'foo' }
+            ];
+            createForm();
+            let options = vm.$el.querySelectorAll('option');
+            let option = options[0];
+            expect(options).to.be.length(2);
+            expect(option.value).to.equal('bar');
+            expect(option.innerHTML).to.equal('Foo');
+        });
 
     });