Add prop for additional condition to show label

Fix #4

Author: bartkozal

README.md

@@ -143,6 +143,29 @@ to meet your design requirements:
 }
 ```
 
+Set `:on` prop if you need additional condition for label activation:
+
+```vue
+<template>
+  <float-label :on="isActive">
+    <input type="text" placeholder="Inactive">
+  </float-label>
+</template>
+
+<script>
+export default {
+  computed: {
+    isActive () {
+      return false
+    }
+  },
+  components: {
+    FloatLabel
+  }
+}
+</script>
+```
+
 ## Development
 
 1. Clone the repository:

components/FloatLabel.vue

@@ -10,42 +10,48 @@
 <script>
 export default {
   name: 'float-label',
+  props: {
+    on: {
+      type: Boolean,
+      default: true
+    }
+  },
   data () {
     return {
       formEl: undefined,
-      hasValue: false,
-      isActive: false
+      isActive: false,
+      isFocused: false
     }
   },
   mounted () {
     this.formEl = this.$el.querySelector('input, textarea, select')
-    this.formEl.addEventListener('input', this.updateHasValue)
     this.formEl.addEventListener('input', this.updateIsActive)
-    this.formEl.addEventListener('blur', this.updateIsActive)
-    this.formEl.addEventListener('focus', this.updateIsActive)
+    this.formEl.addEventListener('input', this.updateIsFocused)
+    this.formEl.addEventListener('blur', this.updateIsFocused)
+    this.formEl.addEventListener('focus', this.updateIsFocused)
   },
-  beforyDestroy () {
-    this.formEl.removeEventListener('input', this.updateHasValue)
+  beforeDestroy () {
     this.formEl.removeEventListener('input', this.updateIsActive)
-    this.formEl.removeEventListener('blur', this.updateIsActive)
-    this.formEl.removeEventListener('focus', this.updateIsActive)
+    this.formEl.removeEventListener('input', this.updateIsFocused)
+    this.formEl.removeEventListener('blur', this.updateIsFocused)
+    this.formEl.removeEventListener('focus', this.updateIsFocused)
   },
   methods: {
     focusFormEl () {
       this.formEl.focus()
     },
-    updateHasValue (e) {
-      this.hasValue = e.target.value.length > 0
-    },
     updateIsActive (e) {
-      this.isActive = e.target === document.activeElement && this.hasValue
+      this.isActive = e.target.value.length > 0
+    },
+    updateIsFocused (e) {
+      this.isFocused = e.target === document.activeElement && this.isActive
     }
   },
   computed: {
     classObject () {
       return {
-        'vfl-label-on-input': this.hasValue,
-        'vfl-label-on-focus': this.isActive
+        'vfl-label-on-input': this.on && this.isActive,
+        'vfl-label-on-focus': this.isFocused
       }
     },
     formElType () {

demo/Demo.vue

@@ -13,6 +13,10 @@
         <input type="password" placeholder="Password">
       </float-label>
 
+      <float-label :on="isActive">
+        <input type="text" placeholder="Inactive">
+      </float-label>
+
       <float-label>
         <textarea placeholder="Comment"></textarea>
       </float-label>
@@ -36,6 +40,17 @@
   </div>
 </template>
 
+<script>
+export default {
+  name: 'demo',
+  computed: {
+    isActive () {
+      return false
+    }
+  }
+}
+</script>
+
 <style>
 .container {
   width: 150px;

test/components/FloatLabel.test.js

@@ -18,11 +18,18 @@ test('formElType', () => {
   expect(ctorSelect().formElType).toEqual('select')
 })
 
-test('classObject', () => {
-  const vm = ctorInput()
-  const classObjectKeys = Object.keys(vm.classObject)
-  expect(classObjectKeys).toContain('vfl-label-on-input')
-  expect(classObjectKeys).toContain('vfl-label-on-focus')
+describe('classObject', () => {
+  test('contain onInput and onFocus classes', () => {
+    const vm = ctorInput()
+    const classObjectKeys = Object.keys(vm.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', () => {
@@ -32,49 +39,49 @@ test('focusFormEl', () => {
   expect(vm.formEl.focus).toHaveBeenCalledTimes(1)
 })
 
-describe('updateHasValue', () => {
-  test('hasValue is true when element value isnt empty', () => {
+describe('updateIsActive', () => {
+  test('isActive is true when element value isnt empty', () => {
     const vm = ctorInput()
     const event = { target: vm.formEl }
     vm.formEl.value = 'Foo'
-    vm.updateHasValue(event)
-    expect(vm.hasValue).toEqual(true)
+    vm.updateIsActive(event)
+    expect(vm.isActive).toEqual(true)
   })
 
-  test('hasValue is false when element value is empty', () => {
+  test('isActive is false when element value is empty', () => {
     const vm = ctorInput()
     const event = { target: vm.formEl }
     vm.formEl.value = ''
-    vm.updateHasValue(event)
-    expect(vm.hasValue).toEqual(false)
+    vm.updateIsActive(event)
+    expect(vm.isActive).toEqual(false)
   })
 })
 
-describe('updateIsActive', () => {
-  test('isActive is true when element is focused and has content', () => {
+describe('updateIsFocused', () => {
+  test('isFocused is true when element is focused and is active', () => {
     const vm = ctorInput()
     const event = { target: vm.formEl }
-    vm.hasValue = true
+    vm.isActive = true
     vm.formEl.focus()
-    vm.updateIsActive(event)
+    vm.updateIsFocused(event)
 
-    expect(vm.isActive).toEqual(true)
+    expect(vm.isFocused).toEqual(true)
   })
 
-  test('isActive is false when element isnt focused and has content', () => {
+  test('isFocused is false when element isnt focused and is active', () => {
     const vm = ctorInput()
     const event = { target: vm.formEl }
-    vm.hasValue = true
-    vm.updateIsActive(event)
+    vm.isActive = true
+    vm.updateIsFocused(event)
 
-    expect(vm.isActive).toEqual(false)
+    expect(vm.isFocused).toEqual(false)
   })
 
-  test('isActive is false when element isnt focused and doesnt have content', () => {
+  test('isFocused is false when element isnt focused and isnt active', () => {
     const vm = ctorInput()
     const event = { target: vm.formEl }
-    vm.updateIsActive(event)
+    vm.updateIsFocused(event)
 
-    expect(vm.isActive).toEqual(false)
+    expect(vm.isFocused).toEqual(false)
   })
 })

test/helpers.js

@@ -1,9 +1,10 @@
 import Vue from 'vue'
 import FloatLabel from 'components/FloatLabel'
 
-export const ctorInput = () => {
+export const ctorInput = (propsData={}) => {
   return new Vue({
     components: { FloatLabel },
+    propsData,
     render: h => {
       return h('float-label', [
         h('input', {