feat: add focus/blur events to inputs

closes #181

components/base/index.js

@@ -4,3 +4,4 @@ export * from './custom-element.js'
 export * from './custom-link.js'
 export * from './custom-event.js'
 export * from './event-dispatcher.js'
+export * from './input-dispatcher.js'

components/base/input-dispatcher.js

@@ -0,0 +1,41 @@
+export const DispatchFocusMixin = {
+  data () {
+    return  {hasFocus: false}
+  },
+  methods: {
+    onMouseDown() {
+      this._active = true
+    },
+    onMouseUp () {
+      this._active = false
+    },
+    onFocusEvent () {
+      // dispatch async to let time to other focus event to propagate
+      setTimeout(() => this.dispatchFocusEvent(),0)
+    },
+    onBlurEvent () {
+      // dispatch async to let time to other focus event to propagate
+      // also filtur blur if mousedown
+      this._active || setTimeout(() => this.dispatchFocusEvent(),0)
+    },
+    dispatchFocusEvent() {
+      let hasFocus = this.$el === document.activeElement || this.$el.contains(document.activeElement);
+      if (hasFocus != this.hasFocus) {
+        this.$emit(hasFocus ? 'focus' : 'blur')
+        this.hasFocus = hasFocus
+      }
+    }
+  },
+  mounted () {
+    this.$el.addEventListener('focusin', this.onFocusEvent)
+    this.$el.addEventListener('focusout', this.onBlurEvent)
+    this.$el.addEventListener('mousedown', this.onMouseDown)
+    this.$el.addEventListener('mouseup', this.onMouseUp)
+  },
+  beforeDestroy () {
+    this.$el.removeEventListener('focusin', this.onFocusEvent)
+    this.$el.removeEventListener('focusout', this.onBlurEvent)
+    this.$el.removeEventListener('mousedown', this.onMouseDown)
+    this.$el.removeEventListener('mouseup', this.onMouseUp)
+  }
+}

components/checkbox/README.md

@@ -42,6 +42,12 @@ var vm = new Vue({
 |`align-end`| Boolean|| whether to align the checkbox after the label |
 |`value`|String| `'on'`| checkbox value |
 
+### events
+
+| event | args | Description |
+|-------|------|-------------|
+|`@focus`| - |emitted on focus gained |
+|`@blur`| - |emitted on focus lost |
 
 ### Reference
 - <https://material.io/components/web/catalog/input-controls/checkboxes>

components/checkbox/mdc-checkbox.vue

@@ -27,11 +27,12 @@
 /* global HTMLElement */
 import MDCCheckboxFoundation from '@material/checkbox/foundation'
 import {getCorrectEventName} from '@material/animation'
-
+import {DispatchFocusMixin} from '../base'
 import {RippleBase} from '../ripple'
 
 export default {
   name: 'mdc-checkbox',
+  mixins: [DispatchFocusMixin],
   model: {
     prop: 'checked',
     event: 'change'

components/radio/README.md

@@ -28,6 +28,14 @@ var vm = new Vue({
 |`:disabled`| Boolean|| whether the radio is disabled |
 |`v-model`| String || tracks selected radio's value |
 
+### events
+
+| event | args | Description |
+|-------|------|-------------|
+|`@focus`| - |emitted on focus gained |
+|`@blur`| - |emitted on focus lost |
+
+
 ### Reference
 - <https://material.io/components/web/catalog/input-controls/radio-buttons>
 

components/radio/mdc-radio.vue

@@ -16,10 +16,13 @@
 
 <script>
 import MDCRadioFoundation from '@material/radio/foundation'
+import {DispatchFocusMixin} from '../base'
 import {RippleBase} from '../ripple'
 
+
 export default {
   name: 'mdc-radio',
+  mixins: [DispatchFocusMixin],
   model: {
     prop: 'picked',
     event: 'change'

components/select/README.md

@@ -41,6 +41,16 @@ var vm = new Vue({
 |`disabled`|Boolean| false | whether this option is disabled |
 |`value`|String| | option value |
 
+### events
+
+#### mdc-select
+
+| event | args | Description |
+|-------|------|-------------|
+|`@focus`| - |emitted on focus gained |
+|`@blur`| - |emitted on focus lost |
+
+
 ### Multiple select
 
 ```html

components/select/mdc-select.vue

@@ -11,7 +11,8 @@
 import MDCNativeSelect from './mdc-native-select.vue'
 import MDCMenuSelect from './mdc-menu-select.vue'
 import MDCMultiSelect from './mdc-multi-select.vue'
-
+import { DispatchFocusMixin } from '../base'
+ 
 const media = new class {
   get mobile () {
     return this._mobile || (this._mobile =
@@ -21,6 +22,7 @@ const media = new class {
 
 export default {
   name: 'mdc-select',
+  mixins: [DispatchFocusMixin],
   model: {
     prop: 'value',
     event: 'change'

components/slider/README.md

@@ -43,8 +43,14 @@ var vm = new Vue({
 
 ### events
 
-- `input` event is emitted whenever the slider value is changed by way of a user event, e.g. when a user is dragging the slider or changing the value using the arrow keys. 
-- `change` event is emitted whenever the slider value is changed and committed by way of a user event, e.g. when a user stops dragging the slider or changes the value using the arrow keys.
+
+| event | args | Description |
+|-------|------|-------------|
+|`@input`| - |emitted whenever the slider value is changed by way of a user event, e.g. when a user is dragging the slider or changing the value using the arrow keys |
+|`@change`| - |emitted whenever the slider value is changed and committed by way of a user event, e.g. when a user stops dragging the slider or changes the value using the arrow keys |
+|`@focus`| - |emitted on focus gained |
+|`@blur`| - |emitted on focus lost |
+
 
 ### model
 

components/slider/mdc-slider.vue

@@ -24,9 +24,11 @@
 
 <script>
 import MDCSliderFoundation from '@material/slider/foundation'
+import {DispatchFocusMixin} from '../base'
 
 export default {
   name: 'mdc-slider',
+  mixins: [DispatchFocusMixin],
   model: {
     prop: 'value',
     event: 'change'

components/switch/README.md

@@ -25,6 +25,12 @@ var vm = new Vue({
 |`align-end`| Boolean|| align the checkbox after the label |
 |`value`|String| `'on'`| checkbox value |
 
+### events
+
+| event | args | Description |
+|-------|------|-------------|
+|`@focus`| - |emitted on focus gained |
+|`@blur`| - |emitted on focus lost |
 
 
 ### Reference

components/switch/mdc-switch.vue

@@ -14,9 +14,11 @@
 </template>
 
 <script>
+import {DispatchFocusMixin} from '../base'
 
 export default {
   name: 'mdc-switch',
+  mixins: [DispatchFocusMixin],
   model: {
     prop: 'checked',
     event: 'change'

components/textfield/README.md

@@ -40,12 +40,6 @@ var vm = new Vue({
   v-model="password" />
 ```
 
-### events
-
-| event | args | Description |
-|-------|------|-------------|
-|`@blur`||emitted on input or textarea blur (focus lost) |
-
 ### props
 
 | props | Type | default | Description |
@@ -66,6 +60,12 @@ var vm = new Vue({
 |`cols`| [Number, String] | 40 |multiline: number of columns  |
 |`disabled`| [Number, String] | | binds to disabled state  |
 
+### events
+
+| event | args | Description |
+|-------|------|-------------|
+|`@focus`| - |emitted on focus gained |
+|`@blur`| - |emitted on focus lost |
 
 ### Reference
 - <https://material.io/components/web/catalog/input-controls/text-fields>

components/textfield/mdc-textfield.vue

@@ -9,7 +9,7 @@
         :aria-controls="'help-'+_uid"
         :placeholder="label"
         :aria-label="label"
-        @blur="emitBlurEvent"></textarea>
+        ></textarea>
     </div>
 
     <!--multiline case-->
@@ -19,7 +19,7 @@
         :rows="rows" :cols="cols"
         :minlength="minlength" :maxlength="maxlength"
         :aria-controls="'help-'+_uid"
-        @blur="emitBlurEvent"></textarea>
+        ></textarea>
       <label ref="label" :class="labelClassesUpgraded" :for="_uid"  v-if="label">
         {{ label }}
       </label>
@@ -34,7 +34,7 @@
         :aria-controls="'help-'+_uid"
         :placeholder="label"
         :aria-label="label"
-        @blur="emitBlurEvent">
+        >
     </div>
 
     <!--default case -->
@@ -44,7 +44,7 @@
         :required="required" :size="size"
         :minlength="minlength" :maxlength="maxlength"
         :aria-controls="'help-'+_uid"
-        @blur="emitBlurEvent">
+        >
       <label ref="label" :class="labelClassesUpgraded" :for="_uid"  v-if="label">
         {{ label }}
       </label>
@@ -64,11 +64,12 @@
 import MDCTextfieldFoundation from '@material/textfield/foundation'
 import MDCTextFieldBottomLineFoundation from '@material/textfield/bottom-line/foundation'
 import MDCTextFieldHelperTextFoundation from '@material/textfield/helper-text/foundation'
-import {emitCustomEvent} from '../base'
+import {emitCustomEvent, DispatchFocusMixin} from '../base'
 import {RippleBase} from '../ripple'
 
 export default {
   name: 'mdc-textfield',
+  mixins: [DispatchFocusMixin],
   props: {
     'value': String,
     'type': {
@@ -130,9 +131,6 @@ export default {
   methods: {
     updateValue (value) {
       this.$emit('input', value)
-    },
-    emitBlurEvent (eventData) {
-      this.$emit('blur', eventData)
     }
   },
   computed: {