adding select

Author: matt-sanders

src/fields/fieldSelect.js

@@ -0,0 +1,82 @@
+import baseField from './baseField';
+export default {
+  mixins: [baseField],
+  render(h){
+    const children = [];
+    const self = this;
+
+    // add the label if it needs it
+    if ( this.to.label ) children.push(
+      h('label', {
+	attrs: {
+	  'for': this.to.id
+	}
+      }, this.to.label )
+    );
+
+    // create each option
+    const options = [];
+    if ( 'options' in this.field ){
+      this.field.options.forEach( option => {
+	const optionVal = option.hasOwnProperty('value') ? option.value : option;
+	options.push(
+	  h('option', {
+	    domProps: {
+	      value:  optionVal
+	    }
+	  }, option.label || option)
+	);
+      });
+    }
+
+    // add the element
+    children.push(
+      h('select', {
+	attrs: {
+	  id: this.to.id,
+	  ...this.to.atts
+	},
+	'class': {
+	  'form-control': true,
+	  ...this.to.classes
+	},
+	domProps: {
+	  value: this.model[this.field.key]
+	},
+	on: {
+	  click: this.onClick,
+	  blur: this.onBlur,
+	  focus: this.onFocus,
+	  keyup: this.onKeyup,
+	  keydown: this.onKeydown,
+	  change(event){
+	    self.model[ self.field.key ] = event.target.value;
+	    self.$emit('change', event.target.value);
+	    if ( typeof self.onChange === 'function' ) self.onChange(event);
+	  }
+	}
+      }, options)
+    );
+
+    // add the error element
+    children.push(
+      h('error-display', {
+	props: {
+	  form: this.form,
+	  field: this.field.key
+	}
+      })
+    );
+
+    // create the wrapper element
+    return h('div', {
+      'class': [
+	'form-group formly-select', 
+	this.to.wrapperClasses,
+	{
+	  'has-error has-danger': this.hasError
+	}
+      ]
+    }, children);
+  }
+}

test/unit/specs/index.spec.js

@@ -300,8 +300,6 @@ describe('Bootstrap Field Inputs', () => {
     });
 
   });
-
-  return;
 
   describe('Select', () => {
     describe('functions', ()=>{
@@ -348,9 +346,28 @@ describe('Bootstrap Field Inputs', () => {
       expect(option.value).to.equal('bar');
       expect(option.innerHTML).to.equal('Foo');
     });
+
+    it('boolean options', done => {
+      data.model.test = false;
+      data.fields[0].type = 'select';
+      data.fields[0].options = [
+	{ label: 'Foo', value: true },
+	{ label: 'Foo', value: false }
+      ];
+      createForm();
+      const select = vm.$el.querySelectorAll('select');
+      expect(select[0].selectedIndex).to.equal(1);
+      vm.model.test = true;
+      setTimeout(() => {
+	expect(select[0].selectedIndex).to.equal(0);
+	done();
+      });
+    });
 
   });
 
+  return;
+  
   describe('Textarea', () => {
     describe('functions', ()=>{
       describeFunctions('textarea', 'textarea');