added lists

Author: matt-sanders

src/fields/fieldList.js

@@ -0,0 +1,102 @@
+import baseField from './baseField';
+export default {
+  computed: {
+    inputType(){
+      return this.to.inputType || 'checkbox';
+    }
+  },
+  created(){
+    // set the default value to array
+    if ( this.inputType === 'checkbox' && ( this.model[ this.field.key ].constructor !== Array || !this.model[ this.field.key ].constructor) ) this.$set( this.model, this.field.key, [] );
+  },
+  mixins: [baseField],
+  render(h){
+    const children = [];
+    const self = this;
+    const isArray = this.inputType === 'checkbox';
+
+    // add the label if it needs it
+    if ( this.to.label ) children.push(
+      h('label', this.to.label )
+    );
+
+    // create each option
+    if ( 'options' in this.field ){
+      this.field.options.forEach( option => {
+	const optionLabel = option.hasOwnProperty('label') ? option.label : option;
+	const optionVal = option.hasOwnProperty('value') ? option.value : option;
+	const optionChecked = isArray ? this.model[ this.field.key ].indexOf( optionVal ) > -1 : this.model[ this.field.key ] === optionVal;
+
+	children.push(
+	  // wrap each option in a label
+	  h('label', {
+	    'class': this.to.labelClasses
+	  }, [
+	    // create an input 
+	    h('input', {
+	      attrs: {
+		type: this.inputType,
+		...this.to.atts
+	      },
+	      'class': {
+		...this.to.classes
+	      },
+	      domProps: {
+		value: optionVal,
+		checked: optionChecked
+	      },
+	      on: {
+		click: this.onClick,
+		blur: this.onBlur,
+		focus: this.onFocus,
+		keyup: this.onKeyup,
+		keydown: this.onKeydown,
+		change(event){
+		  const isChecked = event.target.checked;
+		  // we need to add/remove differently depending on the type of input we're using
+		  if ( isArray ){
+		    if ( isChecked ){
+		      // if it's a checkbox, and hence an array, push it
+		      self.model[ self.field.key ].push( event.target.value );
+		    } else {
+		      // otherwise remove it
+		      const valueIdx = self.model[ self.field.key ].indexOf( event.target.value );
+		      if ( valueIdx > -1 ) self.model[ self.field.key ].splice( valueIdx, 1 );
+		    }
+		  } else {
+		    self.model[ self.field.key ] = isChecked ? event.target.value : null;
+		  }
+		  self.$emit('change', event.target.value);
+		  if ( typeof self.onChange === 'function' ) self.onChange(event);
+		}
+	      }
+	    }),
+	    // display the label
+	    optionLabel
+	  ])
+	);
+      });
+    }
+
+    // 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-list', 
+	this.to.wrapperClasses,
+	{
+	  'has-error has-danger': this.hasError
+	}
+      ]
+    }, children);
+  }
+}

test/unit/specs/index.spec.js

@@ -387,8 +387,6 @@ describe('Bootstrap Field Inputs', () => {
       expect(inputs).to.be.length(1);
     });
   });
-
-  return;
 
   describe("List", () => {
     describe('checkbox functions', ()=>{
@@ -453,6 +451,23 @@ describe('Bootstrap Field Inputs', () => {
       expect(labels[2].textContent).to.contain('Bar');            
     });
 
+    it('boolean options', done => {
+      data.fields[0].type = 'list';
+      data.fields[0].options = [
+	{ label: 'Foo', value: true },
+	{ label: 'Bar', value: false }
+      ];
+      data.model.test = [false];
+      createForm();
+      expect(vm.$el.querySelectorAll('input')[1].checked).to.be.true;
+      data.model.test.push(true);
+      setTimeout(()=>{
+	expect(vm.$el.querySelectorAll('input')[0].checked).to.be.true;
+	expect(vm.$el.querySelectorAll('input')[1].checked).to.be.true;
+	done();
+      });
+    });
+
     it('sets defaults', () => {
       data.fields[0].type = 'list';
       data.fields[0].options = ['one', 'two'];