added async components

Author: matt-sanders

src/components/FormlyField.vue

@@ -3,7 +3,9 @@
 </template>
 
 <script>
+ import Vue from 'vue';
  export default {
-     props: ['field', 'model']
+     props: ['field', 'model'],
+     components: Vue.$formlyFields
  }
 </script>

src/components/FormlyForm.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
- export default{
+ export default {
      props: ['fields', 'model']
  }
 </script>

src/components/index.js

@@ -1,7 +1,12 @@
 import FormlyForm from './FormlyForm.vue';
-import FormlyField from './FormlyField.vue';
 
 export default function(Vue){
-    Vue.component('FormlyForm', FormlyForm);
-    Vue.component('FormlyField', FormlyField);
+    Vue.component('formly-form', FormlyForm);
+    Vue.component('formly-field', (resolve) => {
+        /**
+         * FormlyField must be loaded asyncronously so that any fields added in 
+         * via Formly.addType are available
+         */
+        require(['./FormlyField.vue'], resolve);
+    });
 }

src/index.js

@@ -1,37 +1,27 @@
-import Components from './components';
-
-
-let Formly = {};
-
-Formly.install = function(Vue, options){
+import Components from './components/index';
+
+
+let Formly = {
+    /**
+     * Allow additional templates to be added
+     * @param {String} id
+     * @param {Object} options
+     */
+    addType(id, options){
+        Vue.$formlyFields[id] = options;
+    },
+    
+    install(Vue, options){
 
-    if ( Formly.installed ){
-        return;
-    }
+        if ( Formly.installed ){
+            return;
+        }
 
-    Components(Vue);
+        Components(Vue);
 
-    Vue.$formly = {
+        Vue.$formlyFields = {};
 
-        fields: {},
-
-        /**
-         * Allow additional templates to be added
-         * @param {String} id
-         * @param {Object} options
-         */
-        addType(id, options){
-            //our base component
-            let base = {
-                props: ['model', 'schema']
-            };
-            
-            //merge 
-            Object.assign(options, base);
-            Vue.$formly.fields[id] = Vue.extend(options);
-        }
-    };
-    
+    }
 };
 
 //auto install

test/unit/specs/FormlyField.spec.js

@@ -1,10 +1,7 @@
 import chai from 'chai';
 const expect = chai.expect;
-import sinonChai from 'sinon-chai';
-import sinon from 'sinon';
 import Vue from 'vue';
 import FormlyField from 'src/components/FormlyField.vue';
-chai.use(sinonChai);
 
 let el, vm;
 

test/unit/specs/FormlyForm.spec.js

@@ -4,6 +4,7 @@ import sinonChai from 'sinon-chai';
 import sinon from 'sinon';
 import Vue from 'vue';
 import FormlyForm from 'src/components/FormlyForm.vue';
+Vue.component('formly-form', FormlyForm);
 chai.use(sinonChai);
 
 //mock our formly-field component
@@ -12,17 +13,25 @@ let FormlyField = Vue.extend({
     props: ['field', 'model']
 });
 
+//our formly specific field
+let FormlyRestrictedField = Vue.extend({
+    template: '<div class="restricted-field"></div>',
+    props: ['field', 'model']
+});
+
+Vue.$formlyFields = {
+    'restricted': FormlyRestrictedField
+};
+
+
 let el, vm;
 
 function createForm(template, data){
     el = document.createElement('div');
     el.innerHTML = template;
     vm = new Vue({
         el: el,
-        data: data,
-        components: {
-            'formly-form': FormlyForm
-        }
+        data: data
     });
 
     return [el, vm];
@@ -65,5 +74,36 @@ describe('FormlyForm', () => {
         expect(JSON.parse(vm.$el.querySelector('#lname_field').textContent)).to.deep.equal(data.schema[1]);
 
     });
+
+    it('should restrict some components to formly itself', () => {
+        sinon.spy(console, 'error');
+
+        //re-create the formly field
+        Vue.component('formly-field', (resolve) =>{
+            resolve({
+                props: ['field', 'model'],
+                template: '<component :is="field.type"></component>',
+                components: Vue.$formlyFields
+            });
+        });
+
+        let data = {
+            schema: [
+                {
+                    key: 'fname',
+                    type: 'restricted'
+                }
+            ],
+            model: {
+                fname: ''
+            }
+        };
+        createForm('<formly-form :fields="schema" :model="model"></formly-form><restricted></restricted>', data);
+
+        expect(console.error).to.be.called.once;
+        expect(vm.$el.querySelectorAll('.restricted-field')).to.be.length(1);
+        expect(vm.$el.querySelectorAll('fieldset .restricted-field')).to.be.length(1);
+        
+    });
 
 });

test/unit/specs/index.spec.js

@@ -7,7 +7,24 @@ describe('module', () => {
 
     it('module props', () => {
         expect(VueFormly).to.exist;
-        expect(VueFormly.install).to.be.a('function');        
+        expect(VueFormly.install).to.be.a('function');
+        expect(VueFormly.addType).to.be.a('function');
+    });
+
+    it('should add fields to Vue', () => {
+
+        //mock vue
+        window.Vue = {
+            component(){}                
+        };
+        VueFormly.install(Vue);
+        expect(Vue.$formlyFields).to.be.a('object');
+
+        let newField = {
+            foo: 'bar'
+        };
+        VueFormly.addType('test', newField);
+        expect(Vue.$formlyFields.test).to.deep.equal(newField);
     });
 
 });