working on input

Author: matt-sanders

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/fields/fieldInput.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: self.value
+	},
+	on: {
+	  input(event){
+	    self.value = 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/index.js

@@ -1,24 +1,23 @@
-let Fields = require.context("./fields/", false, /^\.\/field([\w-_]+)\.vue$/);
+let Fields = require.context("./fields/", false, /^\.\/field([\w-_]+)\.js$/);
 let FormlyBootstrap = {
-    install(Vue, options){        
-        Fields.keys().forEach((key) => {
-            //remove all the .vue crap
-            let component = key
-                    .replace(/^\.\//, "")
-                    .replace(/\.vue/, "")
-                    .replace(/^field/, "");
-            
-            //convert the first letter to lc
-            component = component.charAt(0).toLowerCase() + component.slice(1);
+  install(Vue, options){        
+    Fields.keys().forEach((key) => {
+      //remove all the .vue crap
+      let component = key
+        .replace(/^\.\//, "")
+        .replace(/\.js/, "")
+        .replace(/^field/, "");
+      //convert the first letter to lc
+      component = component.charAt(0).toLowerCase() + component.slice(1);
 
-            Vue.$formly.addType(component, Fields(key));
-        });
-    }
+      Vue.$formly.addType(component, Fields(key).default);
+    });
+  }
 };
 
 //auto install
 if (typeof window !== 'undefined' && window.Vue) {
-    window.Vue.use(FormlyBootstrap);
+  window.Vue.use(FormlyBootstrap);
 }
 
 export default FormlyBootstrap;

test/unit/specs/index.spec.js

@@ -17,7 +17,15 @@ function createForm(){
   //el.innerHTML = '<formly-form :form="form" :model="model" :fields="fields"></formly-form>';
   vm = new Vue({
     data: data,
-    template: '<formly-form :form="form" :model="model" :fields="fields"></formly-form>'
+    render(h){
+      return h('formly-form', {
+	props: {
+	  form: this.form,
+	  fields: this.fields,
+	  model: this.model
+	}
+      });
+    }
   }).$mount(el);
 
   return [el, vm];
@@ -226,7 +234,6 @@ describe('Bootstrap Field Inputs', () => {
       });
     });
 
-    
     describe('conditional elements', ()=>{
       describeConditional('input');
     });
@@ -293,6 +300,8 @@ describe('Bootstrap Field Inputs', () => {
     });
 
   });
+
+  return;
 
   describe('Select', () => {
     describe('functions', ()=>{