Support v-model, add :dispatch property

Fix #8

Author: bartkozal

README.md

@@ -99,7 +99,7 @@ Wrap input, textarea or select with `<float-label>`:
   <textarea placeholder="Comment"></textarea>
 </float-label>
 
-<float-label>
+<float-label :dispatch="false">
   <select>
     <option disabled selected>Framework</option>
     <option>Vue</option>
@@ -211,6 +211,32 @@ export default {
 </script>
 ```
 
+Set `:dispatch` to `false` to disable triggering `input` event
+once the component is mounted:
+
+_By default it's set to true to activate label when form element has value._
+
+```vue
+<template>
+  <float-label :dispatch="false">
+    <input type="email" placeholder="Email" v-model="email">
+  </float-label>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      email: '[email protected]'
+    }
+  },
+  components: {
+    FloatLabel
+  }
+}
+</script>
+```
+
 ## Development
 
 1. Clone the repository:

components/FloatLabel.vue

@@ -18,6 +18,10 @@ export default {
     label: {
       type: String,
       default: ''
+    },
+    dispatch: {
+      type: Boolean,
+      default: true
     }
   },
   data () {
@@ -33,6 +37,7 @@ export default {
     this.formEl.addEventListener('input', this.updateIsFocused)
     this.formEl.addEventListener('blur', this.updateIsFocused)
     this.formEl.addEventListener('focus', this.updateIsFocused)
+    this.dispatchInput()
   },
   beforeDestroy () {
     this.formEl.removeEventListener('input', this.updateIsActive)
@@ -41,6 +46,13 @@ export default {
     this.formEl.removeEventListener('focus', this.updateIsFocused)
   },
   methods: {
+    dispatchInput () {
+      if (this.dispatch) {
+        const event = document.createEvent('HTMLEvents')
+        event.initEvent('input', true, false)
+        this.formEl.dispatchEvent(event)
+      }
+    },
     focusFormEl () {
       this.formEl.focus()
     },

demo/Demo.vue

@@ -6,7 +6,7 @@
       </float-label>
 
       <float-label>
-        <input type="email" placeholder="Email">
+        <input type="email" placeholder="Email" v-model="email">
       </float-label>
 
       <float-label label="Overridden label">
@@ -21,7 +21,7 @@
         <textarea placeholder="Comment"></textarea>
       </float-label>
 
-      <float-label>
+      <float-label :dispatch="false">
         <select>
           <option disabled selected>Framework</option>
           <option>Vue</option>
@@ -53,6 +53,7 @@ export default {
   name: 'demo',
   data () {
     return {
+      email: '[email protected]',
       version: 'beta',
       options: [
         { value: 'alpha', text: 'Alpha' },
@@ -89,10 +90,6 @@ select {
   width: 100%;
 }
 
-.example {
-  margin-top: 2em;
-}
-
 .example .vfl-label {
   text-transform: uppercase;
 }

test/components/FloatLabel.test.js

@@ -25,11 +25,6 @@ describe('classObject', () => {
     expect(classObjectKeys).toContain('vfl-label-on-input')
     expect(classObjectKeys).toContain('vfl-label-on-focus')
   })
-
-  test('onInput to be false when on prop is false', () => {
-    const vm = ctorInput({ on: false })
-    expect(vm.classObject['vfl-label-on-input']).toBe(false)
-  })
 })
 
 test('focusFormEl', () => {
@@ -89,3 +84,6 @@ describe('updateIsFocused', () => {
 test(':label', () => {
   expect(ctorInput({ label: 'Foobar' }).floatLabel).toEqual('Foobar')
 })
+
+xtest(':on')
+xtest(':dispatch')