added input field

Author: matt-sanders

src/fields/baseField.js

@@ -0,0 +1,7 @@
+export default
+{
+    props: [
+        'form',
+        'key'
+    ]
+};

src/fields/fieldInput.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="form-group">
+    <label v-if="form[key].label">{{form[key].label}}</label>
+    <input class="form-control" :type="form[key].inputType" v-model="form[key].value" :placeholder="form[key].placeholder">
+  </div>
+</template>
+
+<script>
+ import baseField from './baseField';
+ export default {
+     mixins: [baseField]
+ }
+</script>

src/index.js

@@ -0,0 +1,26 @@
+import VueFormly from 'vue-formly';
+
+let Fields = require.context("./fields/", false, /^\.\/field([\w-_]+)\.vue$/);
+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);
+
+            Vue.$formly.addType(component, Fields(key));
+        });
+    }
+};
+
+//auto install
+if (typeof window !== 'undefined' && window.Vue) {
+    window.Vue.use(FormlyBootstrap);
+}
+
+export default FormlyBootstrap;

test/unit/specs/index.spec.js

@@ -1,9 +1,74 @@
 import {expect} from 'chai';
+import Vue from 'vue';
+import VueFormly from 'vue-formly';
+import FormlyBootstrap from 'src/index';
+Vue.use(VueFormly);
+Vue.use(FormlyBootstrap);
 
+let el, vm;
 
-describe('module', () => {
+function createForm(){
+    el = document.createElement('div');
+    el.innerHTML = '<formly-form :form="form"></formly-form>';
+    vm = new Vue({
+        el: el,
+        data: data
+    });
+
+    return [el, vm];
+}
+
+let data;
+
+
+describe('components', () => {
+
+    beforeEach(() => {
+        data = {
+            form: {
+                test: {
+                    label: 'Test'
+                }
+            }
+        };
+    });
+
+    describe('input', () => {
+
+        it('basic functions', (done) => {
+            data.form.test.type = 'input';
+            data.form.test.inputType = 'text';
+            data.form.test.placeholder = 'holding';
+            createForm(data);
+
+            let inputs = vm.$el.querySelectorAll('input');
+            let input = inputs[0];
+
+            expect(inputs).to.be.length(1);
+            expect(input.type).to.equal('text');
+            expect(vm.$el.querySelectorAll('label')).to.be.length(1);
+            expect(vm.$el.querySelectorAll('label')[0].textContent).to.equal(data.form.test.label);
+            expect(vm.$el.querySelectorAll('input.form-control')).to.be.length(1);
+            expect(input.placeholder).to.equal('holding');
+
+            vm.form.test.value = 'testing';
+
+            setTimeout(() => {
+                expect(vm.$el.querySelectorAll('input')[0].value).to.equal('testing');
+                done();
+            }, 0);
+            
+        });
+
+        it('conditional elements', () => {
+            data.form.test.type = 'input';
+            data.form.test.inputType = 'text';
+            data.form.test.label = '';
+            delete data.form.test.placeholder;
+            createForm(data);
 
-    it('', () => {
+            expect(vm.$el.querySelectorAll('label')).to.be.length(0);
+        });
     });
 
 });