Merge branch 'pr/6'

Fix #3
Fix #6

Author: bartkozal

README.md

@@ -88,15 +88,25 @@ Load script and stylesheet files from CDN:
 
 ## Usage
 
-Wrap text/email/password input or textarea with `<float-label>`:
+Wrap input, textarea or select with `<float-label>`:
 
 ```html
 <float-label>
   <input type="email" placeholder="E-mail">
 </float-label>
 
 <float-label>
-  <textarea placeholder="comment"></textarea>
+  <textarea placeholder="Comment"></textarea>
+</float-label>
+
+<float-label>
+  <select>
+    <option disabled selected>Framework</option>
+    <option>Vue</option>
+    <option>React</option>
+    <option>Angular</option>
+    <option>Ember</option>
+  </select>
 </float-label>
 ```
 
@@ -141,7 +151,13 @@ to meet your design requirements:
     $ git clone [email protected]:bkzl/vue-float-label.git
     ```
 
-2. Start development:
+2. Install dependencies:
+
+    ```sh
+    $ yarn install
+    ```
+
+3. Start development:
 
     ```sh
     $ npm start

components/FloatLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vfl-has-label">
-    <div class="vfl-label" :class="classObject" :style="{ width }" @click="focusInput">
+    <div class="vfl-label" :class="classObject" :style="{ width }" @click="focusFormEl">
       {{ label }}
     </div>
     <slot></slot>
@@ -12,25 +12,27 @@ export default {
   name: 'float-label',
   data () {
     return {
-      input: undefined,
+      formEl: undefined,
       hasValue: false,
-      isActive: false,
-      label: '',
-      width: 'auto'
+      isActive: false
     }
   },
   mounted () {
-    this.input = this.$el.querySelector('input, textarea')
-    this.width = `${this.input.clientWidth}px`
-    this.label = this.input.placeholder
-    this.input.addEventListener('input', this.updateHasValue)
-    this.input.addEventListener('input', this.updateIsActive)
-    this.input.addEventListener('blur', this.updateIsActive)
-    this.input.addEventListener('focus', this.updateIsActive)
+    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)
+  },
+  beforyDestroy () {
+    this.formEl.removeEventListener('input', this.updateHasValue)
+    this.formEl.removeEventListener('input', this.updateIsActive)
+    this.formEl.removeEventListener('blur', this.updateIsActive)
+    this.formEl.removeEventListener('focus', this.updateIsActive)
   },
   methods: {
-    focusInput () {
-      this.input.focus()
+    focusFormEl () {
+      this.formEl.focus()
     },
     updateHasValue (e) {
       this.hasValue = e.target.value.length > 0
@@ -45,6 +47,23 @@ export default {
         'vfl-label-on-input': this.hasValue,
         'vfl-label-on-focus': this.isActive
       }
+    },
+    formElType () {
+      return this.formEl ? this.formEl.tagName.toLowerCase() : ''
+    },
+    width () {
+      return this.formEl ? `${this.formEl.clientWidth}px` : 'auto'
+    },
+    label () {
+      switch (this.formElType) {
+        case 'input':
+        case 'textarea':
+          return this.formEl.placeholder
+        case 'select':
+          return this.formEl.querySelector('option[disabled][selected]').innerHTML
+        default:
+          return ''
+      }
     }
   }
 }
@@ -65,12 +84,14 @@ export default {
   color: #aaa;
   text-overflow: ellipsis;
   white-space: nowrap;
+  pointer-events: none;
   opacity: 0;
   transition: all 0.2s ease-out;
 }
 
 .vfl-label-on-input {
   top: -1.3em;
+  pointer-events: all;
   opacity: 1;
 }
 
@@ -79,7 +100,8 @@ export default {
 }
 
 .vfl-has-label input:focus,
-.vfl-has-label textarea:focus {
+.vfl-has-label textarea:focus,
+.vfl-has-label select:focus {
   outline: 0;
 }
 </style>

demo/Demo.vue

@@ -17,6 +17,16 @@
         <textarea placeholder="Comment"></textarea>
       </float-label>
 
+      <float-label>
+        <select>
+          <option disabled selected>Framework</option>
+          <option>Vue</option>
+          <option>React</option>
+          <option>Angular</option>
+          <option>Ember</option>
+        </select>
+      </float-label>
+
       <div class="example">
         <float-label>
           <input type="text" placeholder="Website">

test/components/FloatLabel.test.js

@@ -1,83 +1,78 @@
-import Vue from 'vue'
-import FloatLabel from 'components/FloatLabel'
+import { ctorInput, ctorTextArea, ctorSelect } from '../helpers'
 
-const getFloatLabel = () => {
-  return new Vue({
-    components: { FloatLabel },
-    render: h => {
-      return h('float-label', [
-        h('input', {
-          attrs: {
-            type: 'text',
-            placeholder: 'Name'
-          }
-        })
-      ])
-    }
-  }).$mount().$children[0]
-}
+test('label', () => {
+  expect(ctorInput().label).toEqual('Name')
+  expect(ctorTextArea().label).toEqual('Comment')
+  expect(ctorSelect().label).toEqual('Framework')
+})
+
+test('formEl', () => {
+  expect(ctorInput().formEl).toBeInstanceOf(HTMLInputElement)
+  expect(ctorTextArea().formEl).toBeInstanceOf(HTMLTextAreaElement)
+  expect(ctorSelect().formEl).toBeInstanceOf(HTMLSelectElement)
+})
 
-test('setup on mount', () => {
-  const vm = getFloatLabel()
-  expect(vm.input).toBeInstanceOf(HTMLInputElement)
-  expect(vm.label).toEqual('Name')
+test('formElType', () => {
+  expect(ctorInput().formElType).toEqual('input')
+  expect(ctorTextArea().formElType).toEqual('textarea')
+  expect(ctorSelect().formElType).toEqual('select')
 })
 
 test('classObject', () => {
-  const vm = getFloatLabel()
+  const vm = ctorInput()
   const classObjectKeys = Object.keys(vm.classObject)
   expect(classObjectKeys).toContain('vfl-label-on-input')
   expect(classObjectKeys).toContain('vfl-label-on-focus')
 })
 
-test('focusInput', () => {
-  const vm = getFloatLabel()
-  vm.input.focus = jest.fn()
-  vm.focusInput()
-  expect(vm.input.focus).toHaveBeenCalledTimes(1)
+test('focusFormEl', () => {
+  const vm = ctorInput()
+  vm.formEl.focus = jest.fn()
+  vm.focusFormEl()
+  expect(vm.formEl.focus).toHaveBeenCalledTimes(1)
 })
 
 describe('updateHasValue', () => {
   test('hasValue is true when element value isnt empty', () => {
-    const vm = getFloatLabel()
-    const event = { target: vm.input }
-    vm.input.value = 'Foo'
+    const vm = ctorInput()
+    const event = { target: vm.formEl }
+    vm.formEl.value = 'Foo'
     vm.updateHasValue(event)
     expect(vm.hasValue).toEqual(true)
   })
 
   test('hasValue is false when element value is empty', () => {
-    const vm = getFloatLabel()
-    const event = { target: vm.input }
-    vm.input.value = ''
+    const vm = ctorInput()
+    const event = { target: vm.formEl }
+    vm.formEl.value = ''
     vm.updateHasValue(event)
     expect(vm.hasValue).toEqual(false)
   })
 })
 
 describe('updateIsActive', () => {
   test('isActive is true when element is focused and has content', () => {
-    const vm = getFloatLabel()
-    const event = { target: vm.input }
+    const vm = ctorInput()
+    const event = { target: vm.formEl }
     vm.hasValue = true
-    vm.input.focus()
+    vm.formEl.focus()
     vm.updateIsActive(event)
 
     expect(vm.isActive).toEqual(true)
   })
 
   test('isActive is false when element isnt focused and has content', () => {
-    const vm = getFloatLabel()
-    const event = { target: vm.input }
+    const vm = ctorInput()
+    const event = { target: vm.formEl }
     vm.hasValue = true
     vm.updateIsActive(event)
 
     expect(vm.isActive).toEqual(false)
   })
 
   test('isActive is false when element isnt focused and doesnt have content', () => {
-    const vm = getFloatLabel()
-    const event = { target: vm.input }
+    const vm = ctorInput()
+    const event = { target: vm.formEl }
     vm.updateIsActive(event)
 
     expect(vm.isActive).toEqual(false)

test/helpers.js

@@ -0,0 +1,51 @@
+import Vue from 'vue'
+import FloatLabel from 'components/FloatLabel'
+
+export const ctorInput = () => {
+  return new Vue({
+    components: { FloatLabel },
+    render: h => {
+      return h('float-label', [
+        h('input', {
+          attrs: {
+            type: 'text',
+            placeholder: 'Name'
+          }
+        })
+      ])
+    }
+  }).$mount().$children[0]
+}
+
+export const ctorTextArea = () => {
+  return new Vue({
+    components: { FloatLabel },
+    render: h => {
+      return h('float-label', [
+        h('textarea', {
+          attrs: {
+            placeholder: 'Comment'
+          }
+        })
+      ])
+    }
+  }).$mount().$children[0]
+}
+
+export const ctorSelect = () => {
+  return new Vue({
+    components: { FloatLabel },
+    render: h => {
+      return h('float-label', [
+        h('select', [
+          h('option', {
+            attrs: {
+              disabled: 'disabled',
+              selected: 'selected'
+            }
+          }, 'Framework')
+        ])
+      ])
+    }
+  }).$mount().$children[0]
+}