added events

Author: matt-sanders

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-formly-bootstrap",
-  "version": "0.0.0",
+  "version": "0.1.1",
   "description": "A bootstrap based form input bundle for Vue Formly",
   "main": "dist/vue-formly-bootstrap.js",
   "scripts": {

src/fields/baseField.js

@@ -6,11 +6,33 @@ export default
     ],
     created: function(){
         this.$set('form.'+this.key+'.$dirty', false);
+        this.$set('form.'+this.key+'.$active', false);
     },
     methods: {
-        onBlur: function(event){
-            console.log('hit');
+        runFunction: function(action, e){
+            if ( typeof this.form[this.key][action] == 'function' ) this.form[this.key][action].call(this, e);
+        },
+        onFocus: function(e){
+            this.$set('form.'+this.key+'.$active', true);
+            this.runFunction('onFocus', e);
+        },
+        onBlur: function(e){
             this.$set('form.'+this.key+'.$dirty', true);
-        }
+            this.$set('form.'+this.key+'.$active', false);
+            this.runFunction('onBlur', e);
+        },
+        onClick: function(e){
+            this.runFunction('onClick', e);
+        },
+        onChange: function(e){
+            this.$set('form.'+this.key+'.$dirty', true);
+            this.runFunction('onChange', e);
+        },
+        onKeyup: function(e){
+            this.runFunction('onKeyup', e);
+        },
+        onKeydown: function(e){
+            this.runFunction('onKeydown', e);
+        }        
     }
 };

src/fields/fieldInput.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="form-group">
     <label v-if="form[key].label" :for="form[key].id ? form[key].id : null">{{form[key].label}}</label>
-    <input class="form-control" :id="form[key].id ? form[key].id : null" :type="form[key].inputType" v-model="form[key].value" :placeholder="form[key].placeholder" @blur="onBlur">
+    <input class="form-control" :id="form[key].id ? form[key].id : null" :type="form[key].inputType" v-model="form[key].value" :placeholder="form[key].placeholder" @blur="onBlur" @focus="onFocus" @click="onClick" @change="onChange" @keyup="onKeyup" @keydown="onKeydown">
   </div>
 </template>
 

test/unit/specs/index.spec.js

@@ -1,11 +1,15 @@
+import chai from 'chai';
 import {expect} from 'chai';
+import sinonChai from 'sinon-chai';
+import sinon from 'sinon';
 import Vue from 'vue';
 import VueFormly from 'vue-formly';
 import FormlyBootstrap from 'src/index';
 Vue.use(VueFormly);
 Vue.use(FormlyBootstrap);
+chai.use(sinonChai);
 
-let el, vm, data;
+let el, vm, data, spy;
 
 function createForm(){
     el = document.createElement('div');
@@ -19,10 +23,10 @@ function createForm(){
 }
 
 function trigger (target, event, process) {
-    var e = document.createEvent('HTMLEvents')
-    e.initEvent(event, true, true)
-    if (process) process(e)
-    target.dispatchEvent(e)
+    var e = document.createEvent('HTMLEvents');
+    e.initEvent(event, true, true);
+    if (process) process(e);
+    target.dispatchEvent(e);
 }
 
 describe('components', () => {
@@ -42,17 +46,64 @@ describe('components', () => {
         beforeEach(() => {
             data.form.test.type = 'input';
             data.form.test.inputType = 'text';
+            spy = sinon.spy();
         });
 
-        it('dirty', () => {
+        it('dirty/active', () => {
             createForm();
             expect(vm.form.test.$dirty).to.be.false;
+            expect(vm.form.test.$active).to.be.false;
         });
 
         it('blur', () => {
+            let copy = {};
+            data.form.test.onBlur = function(e){
+                copy = this.form;
+            };
             createForm();
             trigger(vm.$el.querySelectorAll('input')[0], 'blur');
+            expect(vm.form.test.$active).to.be.false;
             expect(vm.form.test.$dirty).to.be.true;
+            //check that "this" is the same
+            //the deep equal of "this" seemed to time out
+            expect(copy).to.deep.equal(vm.form);
+        });
+        
+        it('focus', () => {
+            data.form.test.onFocus = spy;
+            createForm();
+            trigger(vm.$el.querySelectorAll('input')[0], 'focus');
+            expect(spy.called).to.be.true;
+            expect(vm.form.test.$active).to.be.true;
+        });
+
+        it('click', () => {
+            data.form.test.onClick = spy;
+            createForm();
+            trigger(vm.$el.querySelectorAll('input')[0], 'click');
+            expect(spy.called).to.be.true;
+        });
+
+        it('change', () => {
+            data.form.test.onChange = spy;
+            createForm();
+            trigger(vm.$el.querySelectorAll('input')[0], 'change');
+            expect(spy.called).to.be.true;
+            expect(vm.form.test.$dirty).to.be.true;           
+        });
+
+        it('keyup', () => {
+            data.form.test.onKeyup = spy;
+            createForm();
+            trigger(vm.$el.querySelectorAll('input')[0], 'keyup');
+            expect(spy.called).to.be.true;
+        });
+
+        it('keydown', () => {
+            data.form.test.onKeydown = spy;
+            createForm();
+            trigger(vm.$el.querySelectorAll('input')[0], 'keydown');
+            expect(spy.called).to.be.true;
         });
 
     });