Merge pull request #10 from formly-js/ssr

SSR & Boolean values

Author: matt-sanders

.gitignore

@@ -1,5 +1,6 @@
 *~
 \#*\#
+\.\#*
 /.emacs.desktop
 /.emacs.desktop.lock
 

package.json

@@ -31,6 +31,7 @@
     "babel-preset-es2015": "6.9.0",
     "babel-preset-es2015-loose-rollup": "^7.0.0",
     "babel-preset-stage-0": "6.5.0",
+    "babel-runtime": "^6.23.0",
     "chai": "3.5.0",
     "conventional-changelog-cli": "1.2.0",
     "conventional-github-releaser": "1.1.3",
@@ -74,8 +75,8 @@
     "sinon-chai": "2.8.0",
     "style-loader": "0.13.1",
     "uglify-js": "^2.6.4",
-    "vue": "~2.0.0",
-    "vue-formly": "^2.3.9",
+    "vue": "^2.2.6",
+    "vue-formly": "^2.5.0",
     "vue-hot-reload-api": "1.3.2",
     "vue-html-loader": "1.2.3",
     "vue-loader": "8.5.3",

src/components/errorDisplay.js

@@ -0,0 +1,22 @@
+export default {
+  render(h){
+    if ( this.message ) return h('span', {
+      'class': 'help-block form-text text-danger'
+    }, this.message);
+  },
+  props: ['field', 'form'],
+  computed: {
+    message(){
+      let message = false;
+      if ( !( this.field in this.form.$errors ) || !( this.field in this.form ) || this.form[ this.field ].$active || !this.form[this.field].$dirty ) return message;
+      let errors = this.form.$errors[ this.field ];
+      Object.keys( errors ).some( errorKey => {
+        if ( typeof errors[ errorKey ] != 'boolean' ){
+          message = errors[ errorKey ];
+          return true;
+        }
+      });
+      return message;
+    }
+  }
+}

src/components/errorDisplay.vue

@@ -1,4 +1,4 @@
-import errorDisplay from '../components/errorDisplay.vue';
+import errorDisplay from '../components/errorDisplay';
 export default
 {
   props: [
@@ -16,6 +16,9 @@ export default
     this.$set(this.form, this.field.key, state);
   },
   methods: {
+    booleanValue(value){
+      return ( value === 'true' || value === 'false' ) ? value === 'true' : value;
+    },
     runFunction: function(action, e){
       if ( typeof this.to[action] == 'function' ) this.to[action].call(this, e);
     },

src/fields/baseField.js

@@ -0,0 +1,80 @@
+import baseField from './baseField';
+export default {
+  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 )
+    );
+
+    // add the input
+    children.push(
+      h('input', {
+	attrs: {
+	  id: this.to.id,
+	  type: this.to.inputType || 'text',
+	  ...this.to.atts
+	},
+	'class': {
+	  'form-control': true,
+	  ...this.to.classes
+	},
+	domProps: {
+	  value: this.model[ this.field.key ]
+	},
+	on: {
+	  input(event){
+	    self.model[ self.field.key ] = event.target.value;
+	    self.$emit('input', event.target.value);
+	  },
+	  blur: this.onBlur,
+	  focus: this.onFocus,
+	  click: this.onClick,
+	  change: this.onChange,
+	  keyup: this.onKeyup,
+	  keydown: this.onKeydown
+	}
+      })
+    );
+
+    // add the error element
+    children.push(
+      h('error-display', {
+	props: {
+	  form: this.form,
+	  field: this.field.key
+	}
+      })
+    );
+    return h('div', {
+      'class': [
+	'form-group formly-input', 
+	this.to.inputType,
+	this.to.wrapperClasses,
+	{
+	  'formly-has-value': this.model[ this.field.key ],
+	  'formly-has-focus': this.form[ this.field.key ].$active,
+	  'has-error has-danger': this.hasError
+	}
+      ]
+    }, children);
+  },
+  mixins: [baseField],
+  methods: {
+    onChange: function(e){
+      
+      this.$set(this.form[this.field.key], '$dirty', true);
+      this.runFunction('onChange', e);
+      if ( this.to.inputType == 'file' ){
+        this.$set(this.model, this.field.key, this.$el.querySelector('input').files);
+      }
+      
+    }
+  }
+}

src/fields/fieldInput.js

@@ -0,0 +1,103 @@
+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;
+		  const val = self.booleanValue( event.target.value );
+		  // 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( val );
+		    } else {
+		      // otherwise remove it
+		      const valueIdx = self.model[ self.field.key ].indexOf( val );
+		      if ( valueIdx > -1 ) self.model[ self.field.key ].splice( valueIdx, 1 );
+		    }
+		  } else {
+		    self.model[ self.field.key ] = isChecked ? val : null;
+		  }
+		  self.$emit('change', val);
+		  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);
+  }
+}