added has-focus and has-value classes to input

Author: matt-sanders

package.json

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

src/fields/fieldInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="form-group">
+  <div class="form-group formly-input" :class="{'formly-has-value': form[key].value, 'formly-has-focus': form[key].$active}">
     <label v-if="form[key].label" :for="form[key].id ? form[key].id : null">{{form[key].label}}</label>
     <input class="form-control" :class="form[key].classes" :id="form[key].id ? form[key].id : null" :type="form[key].inputType || text" v-model="form[key].value" @blur="onBlur" @focus="onFocus" @click="onClick" @change="onChange" @keyup="onKeyup" @keydown="onKeydown" v-formly-atts="form[key].atts">
   </div>

test/unit/specs/index.spec.js

@@ -201,6 +201,23 @@ describe('Bootstrap Field Inputs', () => {
 
         });
 
+        it('adds active and focus classes', (done) => {
+            data.form.test.type = 'input';
+            data.form.test.inputType = 'text';
+            createForm(data);
+
+            expect(vm.$el.querySelectorAll('.formly-has-focus')).to.be.length(0);
+            expect(vm.$el.querySelectorAll('.formly-has-value')).to.be.length(0);
+
+            trigger(vm.$el.querySelectorAll('input')[0], 'focus');
+            data.form.test.value = 'test';
+            setTimeout(()=>{
+                expect(vm.$el.querySelectorAll('.formly-has-focus')).to.be.length(1);
+                expect(vm.$el.querySelectorAll('.formly-has-value')).to.be.length(1);
+                done();
+            },0);
+        });
+
         it('defaults to text', () => {
             data.form.test.type = 'input';
             data.form.test.inputType = '';