refactor(VInput): convert to typescript (#5852)

* refactor(VInput): convert to typescript * style(VInput): remove unnecessary type declaration * style: removed empty lines * style(VInput): move type declaration * style(VInput): improve typings * style(VInput): reorder genDefaultSlot children * style: revert changes made to genControl style
vuetifyjs · Dec 14, 2018 · 2a81ad0 · 2a81ad0
1 parent 16afd16
commit 2a81ad0
Show file tree

Hide file tree

Showing 14 changed files with 99 additions and 72 deletions.
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.js b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.js
@@ -278,7 +278,7 @@ export default {
       VSelect.methods.clearableCallback.call(this)
     },
     genInput () {
-      const input = VTextField.methods.genInput.call(this)
+      const input = VTextField.options.methods.genInput.call(this)
 
       input.data.attrs.role = 'combobox'
       input.data.domProps.value = this.internalSearch

diff --git a/...s/vuetify/src/components/VInput/VInput.js → ...s/vuetify/src/components/VInput/VInput.ts b/...s/vuetify/src/components/VInput/VInput.js → ...s/vuetify/src/components/VInput/VInput.ts
@@ -17,16 +17,30 @@ import {
   kebabCase
 } from '../../util/helpers'
 import { deprecate } from '../../util/console'
+import mixins, { ExtractVue } from '../../util/mixins'
 
-/* @vue/component */
-export default {
-  name: 'v-input',
+// Types
+import Vue, { VNode, VNodeData } from 'vue'
+interface options extends Vue {
+  /* eslint-disable-next-line camelcase */
+  $_modelEvent: string
+}
 
-  mixins: [
-    Colorable,
-    Themeable,
-    Validatable
-  ],
+export default mixins<options &
+/* eslint-disable indent */
+  ExtractVue<[
+    typeof Colorable,
+    typeof Themeable,
+    typeof Validatable
+  ]>
+/* eslint-enable indent */
+>(
+  Colorable,
+  Themeable,
+  Validatable
+  /* @vue/component */
+).extend({
+  name: 'v-input',
 
   props: {
     appendIcon: String,
@@ -40,18 +54,25 @@ export default {
     hideDetails: Boolean,
     hint: String,
     label: String,
+    loading: Boolean,
     persistentHint: Boolean,
     prependIcon: String,
     /** @deprecated */
-    prependIconCb: Function
+    prependIconCb: Function,
+    value: { required: false }
   },
 
-  data: vm => ({
-    hasMouseDown: false
-  }),
+  data () {
+    return {
+      attrsInput: {},
+      lazyValue: this.value as any,
+      hasMouseDown: false
+    }
+  },
 
   computed: {
-    classesInput () {
+    classes: () => ({}),
+    classesInput (): object {
       return {
         ...this.classes,
         'v-input--has-state': this.hasState,
@@ -84,7 +105,7 @@ export default {
       get () {
         return this.lazyValue
       },
-      set (val) {
+      set (val: any) {
         this.lazyValue = val
         this.$emit(this.$_modelEvent, val)
       }
@@ -100,6 +121,12 @@ export default {
     }
   },
 
+  watch: {
+    value (val) {
+      this.lazyValue = val
+    }
+  },
+
   beforeCreate () {
     // v-radio-group needs to emit a different event
     // https://github.com/vuetifyjs/vuetify/issues/4752
@@ -129,26 +156,30 @@ export default {
       ]
     },
     // TODO: remove shouldDeprecate (2.0), used for clearIcon
-    genIcon (type, cb, shouldDeprecate = true) {
-      const icon = this[`${type}Icon`]
+    genIcon (
+      type: string,
+      cb?: (e: Event) => void,
+      shouldDeprecate = true
+    ) {
+      const icon = (this as any)[`${type}Icon`]
       const eventName = `click:${kebabCase(type)}`
-      cb = cb || this[`${type}IconCb`]
+      cb = cb || (this as any)[`${type}IconCb`]
 
       if (shouldDeprecate && type && cb) {
         deprecate(`:${type}-icon-cb`, `@${eventName}`, this)
       }
 
-      const data = {
+      const data: VNodeData = {
         props: {
           color: this.validationState,
           dark: this.dark,
           disabled: this.disabled,
           light: this.light
         },
         on: !(this.$listeners[eventName] || cb)
-          ? null
+          ? undefined
           : {
-            click: e => {
+            click: (e: Event) => {
               e.preventDefault()
               e.stopPropagation()
 
@@ -157,7 +188,7 @@ export default {
             },
             // Container has mouseup event that will
             // trigger menu open if enclosed
-            mouseup: e => {
+            mouseup: (e: Event) => {
               e.preventDefault()
               e.stopPropagation()
             }
@@ -217,7 +248,11 @@ export default {
         }
       })
     },
-    genSlot (type, location, slot) {
+    genSlot (
+      type: string,
+      location: string,
+      slot: (VNode | VNode[])[]
+    ) {
       if (!slot.length) return null
 
       const ref = `${type}-${location}`
@@ -230,8 +265,8 @@ export default {
     genPrependSlot () {
       const slot = []
 
-      if (this.$slots['prepend']) {
-        slot.push(this.$slots['prepend'])
+      if (this.$slots.prepend) {
+        slot.push(this.$slots.prepend)
       } else if (this.prependIcon) {
         slot.push(this.genIcon('prepend'))
       }
@@ -245,32 +280,32 @@ export default {
       // an appended inner icon, v-text-field
       // will overwrite this method in order to obtain
       // backwards compat
-      if (this.$slots['append']) {
-        slot.push(this.$slots['append'])
+      if (this.$slots.append) {
+        slot.push(this.$slots.append)
       } else if (this.appendIcon) {
         slot.push(this.genIcon('append'))
       }
 
       return this.genSlot('append', 'outer', slot)
     },
-    onClick (e) {
+    onClick (e: Event) {
       this.$emit('click', e)
     },
-    onMouseDown (e) {
+    onMouseDown (e: Event) {
       this.hasMouseDown = true
       this.$emit('mousedown', e)
     },
-    onMouseUp (e) {
+    onMouseUp (e: Event) {
       this.hasMouseDown = false
       this.$emit('mouseup', e)
     }
   },
 
-  render (h) {
+  render (h): VNode {
     return h('div', this.setTextColor(this.validationState, {
       staticClass: 'v-input',
       attrs: this.attrsInput,
       'class': this.classesInput
     }), this.genContent())
   }
-}
+})
diff --git a/...es/vuetify/src/components/VInput/index.js → ...es/vuetify/src/components/VInput/index.ts b/...es/vuetify/src/components/VInput/index.js → ...es/vuetify/src/components/VInput/index.ts
diff --git a/packages/vuetify/src/components/VOverflowBtn/VOverflowBtn.js b/packages/vuetify/src/components/VOverflowBtn/VOverflowBtn.js
@@ -59,7 +59,7 @@ export default {
         : VSelect.methods.genCommaSelection.call(this, item, index, last)
     },
     genInput () {
-      const input = VTextField.methods.genInput.call(this)
+      const input = VTextField.options.methods.genInput.call(this)
 
       input.data.domProps.value = this.editable ? this.internalSearch : ''
       input.data.attrs.readonly = !this.isAnyValueAllowed
@@ -69,7 +69,7 @@ export default {
     genLabel () {
       if (this.editable && this.isFocused) return null
 
-      const label = VTextField.methods.genLabel.call(this)
+      const label = VTextField.options.methods.genLabel.call(this)
 
       if (!label) return label
 

diff --git a/packages/vuetify/src/components/VRadioGroup/VRadio.js b/packages/vuetify/src/components/VRadioGroup/VRadio.js
@@ -95,7 +95,7 @@ export default {
       // We can't actually use the mixin directly because
       // it's made for standalone components, but its
       // genInput method is exactly what we need
-      return Selectable.methods.genInput.call(this, ...args)
+      return Selectable.options.methods.genInput.call(this, ...args)
     },
     genLabel () {
       return this.$createElement(VLabel, {

diff --git a/packages/vuetify/src/components/VRadioGroup/VRadioGroup.js b/packages/vuetify/src/components/VRadioGroup/VRadioGroup.js
@@ -12,11 +12,9 @@ import {
 } from '../../mixins/registrable'
 
 /* @vue/component */
-export default {
+export default VInput.extend({
   name: 'v-radio-group',
 
-  extends: VInput,
-
   mixins: [
     Comparable,
     RegistrableProvide('radio')
@@ -88,7 +86,7 @@ export default {
         attrs: {
           role: 'radiogroup'
         }
-      }, VInput.methods.genDefaultSlot.call(this))
+      }, VInput.options.methods.genDefaultSlot.call(this))
     },
     onRadioChange (value) {
       if (this.disabled) return
@@ -131,4 +129,4 @@ export default {
       if (index > -1) this.radios.splice(index, 1)
     }
   }
-}
+})
diff --git a/packages/vuetify/src/components/VRangeSlider/VRangeSlider.js b/packages/vuetify/src/components/VRangeSlider/VRangeSlider.js
@@ -33,7 +33,7 @@ export default {
     classes () {
       return Object.assign({}, {
         'v-input--range-slider': true
-      }, VSlider.computed.classes.call(this))
+      }, VSlider.options.computed.classes.call(this))
     },
     internalValue: {
       get () {
@@ -67,7 +67,7 @@ export default {
       return this.internalValue.some(v => v !== this.min) || this.alwaysDirty
     },
     trackFillStyles () {
-      const styles = VSlider.computed.trackFillStyles.call(this)
+      const styles = VSlider.options.computed.trackFillStyles.call(this)
       const fillPercent = Math.abs(this.inputWidth[0] - this.inputWidth[1])
 
       styles.width = `calc(${fillPercent}% - ${this.trackPadding}px)`
@@ -80,7 +80,7 @@ export default {
         this.internalValue[0]
       ) return 0
 
-      return VSlider.computed.trackPadding.call(this)
+      return VSlider.options.computed.trackPadding.call(this)
     }
   },
 
@@ -91,13 +91,13 @@ export default {
     },
     genInput () {
       return createRange(2).map(i => {
-        const input = VSlider.methods.genInput.call(this)
+        const input = VSlider.options.methods.genInput.call(this)
 
         input.data.attrs.value = this.internalValue[i]
 
         input.data.on.focus = e => {
           this.activeThumb = i
-          VSlider.methods.onFocus.call(this, e)
+          VSlider.options.methods.onFocus.call(this, e)
         }
 
         return input

diff --git a/packages/vuetify/src/components/VSelect/VSelect.js b/packages/vuetify/src/components/VSelect/VSelect.js
@@ -119,7 +119,7 @@ export default {
       return this.filterDuplicates(this.cachedItems.concat(this.items))
     },
     classes () {
-      return Object.assign({}, VTextField.computed.classes.call(this), {
+      return Object.assign({}, VTextField.options.computed.classes.call(this), {
         'v-select': true,
         'v-select--chips': this.hasChips,
         'v-select--chips--small': this.smallChips,
@@ -384,7 +384,7 @@ export default {
       ]
     },
     genInput () {
-      const input = VTextField.methods.genInput.call(this)
+      const input = VTextField.options.methods.genInput.call(this)
 
       input.data.domProps.value = null
       input.data.attrs.readonly = true
@@ -607,7 +607,7 @@ export default {
         }
       }
 
-      VTextField.methods.onMouseUp.call(this, e)
+      VTextField.options.methods.onMouseUp.call(this, e)
     },
     onScroll () {
       if (!this.isMenuActive) {

diff --git a/packages/vuetify/src/components/VSlider/VSlider.js b/packages/vuetify/src/components/VSlider/VSlider.js
@@ -22,13 +22,11 @@ import { consoleWarn } from '../../util/console'
 import Loadable from '../../mixins/loadable'
 
 /* @vue/component */
-export default {
+export default VInput.extend({
   name: 'v-slider',
 
   directives: { ClickOutside },
 
-  extends: VInput,
-
   mixins: [Loadable],
 
   props: {
@@ -520,4 +518,4 @@ export default {
       this.internalValue = value
     }
   }
-}
+})