adding components

Author: matt-sanders

src/components.js

@@ -0,0 +1,9 @@
+<template>
+  <component :is="schema.type" :model="model"></component>
+</template>
+
+<script>
+ export default {
+     props: ['schema', 'model']
+ }
+</script>

src/components/FormlyField.vue

@@ -0,0 +1,11 @@
+<template>
+  <fieldset>
+
+  </fieldset>
+</template>
+
+<script>
+ export default{
+
+ }
+</script>

src/components/FormlyForm.vue

@@ -0,0 +1,7 @@
+import FormlyForm from './FormlyForm.vue';
+import FormlyField from './FormlyField.vue';
+
+export default function(Vue){
+    Vue.component('FormlyForm', FormlyForm);
+    Vue.component('FormlyField', FormlyField);
+}

src/components/index.js

@@ -9,6 +9,8 @@ Formly.install = function(Vue, options){
         return;
     }
 
+    Components(Vue);
+
     Vue.$formly = {
 
         fields: {},

src/index.js

@@ -0,0 +1,75 @@
+import chai from 'chai';
+const expect = chai.expect;
+import sinonChai from 'sinon-chai';
+import sinon from 'sinon';
+import Vue from 'vue';
+import VueFormly from 'src/index';
+Vue.use(VueFormly);
+chai.use(sinonChai);
+
+let el, vm;
+
+function createForm(template, data){
+    el = document.createElement('div');
+    el.innerHTML = template;
+    vm = new Vue({
+        el: el,
+        data: data
+    });
+
+    return [el, vm];
+}
+
+describe('FormlyField', () => {
+
+    it('should take on the type of another component', () => {
+
+        Vue.component('test', {
+            template: '<div id="testComponent">Hello World</div>'
+        });
+
+        let data = {
+            schema:{
+                type: 'test'
+            }
+        };
+        
+        createForm('<formly-field :schema="schema"></formly-field>', data);
+
+        let innerElem = vm.$el.querySelector('#testComponent');
+
+        expect(innerElem.textContent).to.contain('Hello World');
+        
+    });
+
+    it('should mimic the model of the parent', (done) => {
+
+        Vue.component('test', {
+            props: ['model'],
+            template: '<input type="text" id="testInput" v-model="model">'
+        });
+
+        let data = {
+            schema: {
+                type: 'test'
+            },
+            testModel: 'foo'
+        };
+
+        createForm('<formly-field :schema="schema" :model.sync="testModel"></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';
+
+        setTimeout(() => {
+            expect(input.value).to.equal('bar');
+            done();
+        }, 0);
+        
+    });
+    
+});