Merge pull request #1 from matt-sanders/new-schema

Version 1.0

Author: matt-sanders

dist/vue-formly.js

@@ -1,12 +1,52 @@
 <template>
-  <component :is="field.type" :model.sync="model" :field="field"></component>
+  <component :is="type" :form.sync="form" :key="key"></component>
 </template>
 
 <script>
  const Vue = require('vue');
- import Util, {getTypes} from '../util';
+ import Util, {getTypes, setError} from '../util';
  export default {
-     props: ['field', 'model'],
-     components: getTypes()
+     props: ['form', 'key'],
+     computed: {
+         type:function(){
+             return 'formly_'+this.form[this.key].type;
+         }
+     },
+     methods: {
+         validate:function(){
+             let field = this.form[this.key];
+
+             //first check if we need to create a field
+             if ( !this.form.$errors[this.key] ) this.$set('form.$errors.'+this.key, {});
+
+             //check for required fields. This whole setting,unsetting thing seems kind of wrong though..
+             //there might be a more 'vue-ey' way to do this...
+             if ( field.required ){
+                 if ( !this.form.$errors[this.key].required ) this.$set('form.$errors.'+this.key+'.required', true);
+                 setError(this.form, this.key, 'required', !field.value) ;
+             }
+
+             //if we've got nothing left then return
+             if ( !field.validators ) return;
+
+             Object.keys(field.validators).forEach((validKey) => {
+                 if ( !this.form.$errors[this.key][validKey] ) this.$set('form.$errors.'+this.key+'.'+validKey, false);
+                 if ( !field.required && !field.value ) return;
+
+                 let validator = field.validators[validKey];
+
+                 let valid = typeof validator == 'function' ? !validator(field) : !eval(validator);
+                 setError(this.form, this.key, validKey, valid);
+                 
+             });
+         }
+     },
+     components: getTypes(),
+     created(){
+         this.validate();
+         this.$watch('form.'+this.key+'.value', (val) =>{
+             let valid = this.validate();
+         });
+     }
   }
 </script>

dist/vue-formly.min.js

@@ -1,11 +1,37 @@
 <template>
   <fieldset>
-      <formly-field v-for="field in fields" :field="field" :model.sync="model[field.key]" ></formly-field>
+    <template v-if="!customLayout">
+      <formly-field v-for="field in form | formlyFields" :form.sync="form" :key="field" ></formly-field>
+    </template>
+    <slot></slot>
   </fieldset>
 </template>
 
 <script>
  export default {
-     props: ['fields', 'model']
+     props: ['form', 'customLayout'],
+     created(){
+         //make sure that the 'value' is always set
+         Object.keys(this.form).forEach((key) => {
+             if ( typeof this.form[key].value == 'undefined' ) this.$set('form.'+key+'.value', '');
+         });
+         
+         //set our validation options
+         this.$set('form.$errors', {});
+         this.$set('form.$valid', true);
+
+         this.$watch('form.$errors', function(val){
+             let valid = true;
+             Object.keys(this.form.$errors).forEach((key)=>{
+                 let errField = this.form.$errors[key];
+                 Object.keys(errField).forEach((errKey) => {
+                     if ( errField[errKey] ) valid = false;
+                 })
+             });
+             this.form.$valid = valid;
+         }, {
+             deep: true
+         });
+     }
  }
 </script>

src/components/FormlyField.vue

@@ -0,0 +1,11 @@
+export default function(Vue){
+    //filter valid formly fields.
+    //this shouldn't pass any $ fields. eg $errors or $valid
+    Vue.filter('formlyFields', (fields) => {
+        let re = /^\$/;
+        let valid = Object.keys(fields).filter( (key) => {
+            return !re.test(key);
+        });
+        return valid;
+    });
+}

src/components/FormlyForm.vue

@@ -1,18 +1,18 @@
 import Components from './components/index';
+import Filters from './filters/index';
 import Util,{getTypes, addType} from './util';
 
 
 let Formly = {
-    
+    getTypes,
+    addType,
     install(Vue, options){
-
-        if ( Formly.installed ){
-            return;
-        }
 
         //install our components
         Components(Vue);
-        
+        Filters(Vue);
+
+        Vue.$formly = {getTypes, addType};
     }
 };
 

src/filters/index.js

@@ -5,13 +5,27 @@ export default exports;
 
 /**
  * Allow additional templates to be added
+ * When they're created they should be prefixed so they don't conflict with native components
+ * eg. addType('input', {}) will be available as <formly_input></formly_input>
  * @param {String} id
  * @param {Object} options
  */
 export function addType(id, options){
-    exports.formlyFields[id] = options;
+    exports.formlyFields['formly_'+id] = options;
 }
 
 export function getTypes(){
     return exports.formlyFields;
 }
+
+/**
+ * Allows a field to add/remove errors to the form
+ * @param {Object} form
+ * @param {String} key
+ * @param {String} err
+ * @param {Bool} isError
+ */
+export function setError(form, key, err, isError){
+    if ( !form.$errors[key] ) form.$errors[key] = {};
+    form.$errors[key][err] = isError;
+}

src/index.js

@@ -23,53 +23,178 @@ describe('FormlyField', () => {
 
     it('should take on the type of another component', () => {
 
-        Vue.component('test', {
-            props: ['field'],
-            template: '<div id="testComponent">{{field.type}}</div>'
+        Vue.component('formly_test', {
+            props: ['form', 'key'],
+            template: '<div id="testComponent">{{form[key].type}}</div>'
         });
 
         let data = {
-            schema:{
-                type: 'test'
+            form:{
+                $errors: {},
+                $valid: {},
+                test: {
+                    type: 'test'
+                }
             }
         };
 
-        createForm('<formly-field :field="schema"></formly-field>', data);
+        createForm('<formly-field :form="form" key="test"></formly-field>', data);
 
         let innerElem = vm.$el.querySelector('#testComponent');
 
-        expect(innerElem.textContent).to.contain(data.schema.type);
+        expect(innerElem.textContent).to.contain(data.form.test.type);
 
     });
 
     it('should mimic the model of the parent', (done) => {
 
-        Vue.component('test', {
-            props: ['model'],
-            template: '<input type="text" id="testInput" v-model="model">'
+        Vue.component('formly_test', {
+            props: ['form', 'key'],
+            template: '<input type="text" id="testInput" v-model="form[key].value">'
         });
 
         let data = {
-            schema: {
-                type: 'test'
-            },
-            testModel: 'foo'
+            form: {
+                $errors: {},
+                $valid: {},
+                search: {
+                    type: 'test',
+                    value: 'foo'
+                }
+            }
         };
 
-        createForm('<formly-field :field="schema" :model.sync="testModel"></formly-field>', data);
+        createForm('<formly-field :form.sync="form" key="search"></formly-field>', data);
 
         let input = vm.$el.querySelector('#testInput');
 
         expect(input.value).to.contain('foo');
 
         //change the value and expect a change
-        vm.testModel = 'bar';
+        vm.form.search.value = 'bar';
 
         setTimeout(() => {
             expect(input.value).to.equal('bar');
             done();
         }, 0);
 
     });
+
+    describe('Validation', ()=>{
+
+        before(()=>{
+            Vue.component('formly_test', {
+                props: ['form', 'key'],
+                template: '<div></div>'
+            });
+        });
+
+        function createValidField(data){
+            return createForm('<formly-field :form.sync="form" key="search"></formly-field>', data);
+        };
+
+        it('should handle required values', (done) => {
+
+            let data = {
+                form: {
+                    $valid: true,
+                    $errors: {},
+                    search: {
+                        type: 'test',
+                        value: '',
+                        required: true
+                    }
+                }
+            };
+            
+            createValidField(data);
+            expect(vm.form.$errors.search.required).to.be.true;
+
+            vm.$set('form.search.value','testing');
+            setTimeout(()=>{
+                expect(vm.form.$errors.search.required).to.be.false;
+                done();
+            },0);
+            
+        });
+
+        it('should take an expression', (done) => {
+            let data = {
+                form: {
+                    $valid: true,
+                    $errors: {},
+                    search: {
+                        type: 'test',
+                        value: 'testing',
+                        validators: {
+                            expression: 'field.value == "test"'
+                        }
+                    }
+                }
+            };
+
+            createValidField(data);
+            expect(vm.form.$errors.search.expression).to.be.true;
+
+            vm.$set('form.search.value', 'test');
+            setTimeout(()=>{
+                expect(vm.form.$errors.search.expression).to.be.false;
+                done();
+            },0);
+        });
+
+        it('should not require non-required values', (done) => {
+            let data = {
+                form: {
+                    $valid: true,
+                    $errors: {},
+                    search: {
+                        type: 'test',
+                        value: '',
+                        validators: {
+                            expression: 'field.value == "test"'
+                        }
+                    }
+                }
+            };
+
+            createValidField(data);
+            expect(vm.form.$errors.search.expression).to.be.false;
+
+            vm.$set('form.search.value', 'testing');
+            setTimeout(()=>{
+                expect(vm.form.$errors.search.expression).to.be.true;
+                done();
+            },0);
+        });
+
+        it('should take a function', (done) => {
+            let data = {
+                form: {
+                    $valid: true,
+                    $errors: {},
+                    search: {
+                        type: 'test',
+                        value: 'testing',
+                        validators: {
+                            expression: function(field){
+                                return field.value == 'test';
+                            }
+                        }
+                    }
+                }
+            };
+
+            createValidField(data);
+            expect(vm.form.$errors.search.expression).to.be.true;
+
+            vm.$set('form.search.value', 'test');
+            setTimeout(()=>{
+                expect(vm.form.$errors.search.expression).to.be.false;
+                done();
+            },0);
+        });
+        
+    });
 
 });