@dimailn/vuetify 2.7.2-alpha26 → 2.7.2-alpha27

package/src/components/VSparkline/VSparkline.ts

@@ -1,16 +1,11 @@
-import {h} from 'vue'
+import { h, defineComponent, PropType, VNode, getCurrentInstance } from 'vue'
 // Mixins
 import Colorable from '../../mixins/colorable'
 
 // Utilities
-import mixins, { ExtractVue } from '../../util/mixins'
 import { genPoints, genBars } from './helpers/core'
 import { genPath } from './helpers/path'
 
-// Types
-import Vue, { VNode } from 'vue'
-import { Prop, PropValidator } from 'vue/types/options'
-
 export type SparklineItem = number | { value: number }
 
 export type SparklineText = {
@@ -38,22 +33,9 @@ export interface Bar {
   value: number
 }
 
-interface options extends Vue {
-  $refs: {
-    path: SVGPathElement
-  }
-}
-
-export default mixins<options &
-/* eslint-disable indent */
-  ExtractVue<[
-    typeof Colorable
-  ]>
-/* eslint-enable indent */
->(
-  Colorable
-).extend({
-  name: 'VSparkline',
+export default defineComponent({
+  name: 'v-sparkline',
+  mixins: [Colorable],
 
   inheritAttrs: false,
 
@@ -80,11 +62,11 @@ export default mixins<options &
       default: false,
     },
     gradient: {
-      type: Array,
+      type: Array as PropType<string[]>,
       default: () => ([]),
-    } as PropValidator<string[]>,
+    },
     gradientDirection: {
-      type: String as Prop<'top' | 'bottom' | 'left' | 'right'>,
+      type: String as PropType<'top' | 'bottom' | 'left' | 'right'>,
       validator: (val: string) => ['top', 'bottom', 'left', 'right'].includes(val),
       default: 'top',
     },
@@ -93,9 +75,9 @@ export default mixins<options &
       default: 75,
     },
     labels: {
-      type: Array,
+      type: Array as PropType<SparklineItem[]>,
       default: () => ([]),
-    } as PropValidator<SparklineItem[]>,
+    },
     labelSize: {
       type: [Number, String],
       default: 7,
@@ -114,14 +96,14 @@ export default mixins<options &
       default: false,
     },
     type: {
-      type: String as Prop<'trend' | 'bar'>,
+      type: String as PropType<'trend' | 'bar'>,
       default: 'trend',
       validator: (val: string) => ['trend', 'bar'].includes(val),
     },
     value: {
-      type: Array,
+      type: Array as PropType<SparklineItem[]>,
       default: () => ([]),
-    } as PropValidator<SparklineItem[]>,
+    },
     width: {
       type: [Number, String],
       default: 300,
@@ -274,23 +256,20 @@ export default mixins<options &
       const len = Math.max(gradient.length - 1, 1)
       const stops = gradient.reverse().map((color, index) =>
         h('stop', {
-          attrs: {
-            offset: index / len,
-            'stop-color': color || 'currentColor',
-          },
+          offset: index / len,
+          'stop-color': color || 'currentColor',
         })
       )
 
+      const instance = getCurrentInstance()
       return h('defs', [
         h('linearGradient', {
-          attrs: {
-            id: this.$.uid,
-            gradientUnits: 'userSpaceOnUse',
-            x1: gradientDirection === 'left' ? '100%' : '0',
-            y1: gradientDirection === 'top' ? '100%' : '0',
-            x2: gradientDirection === 'right' ? '100%' : '0',
-            y2: gradientDirection === 'bottom' ? '100%' : '0',
-          },
+          id: instance?.uid,
+          gradientUnits: 'userSpaceOnUse',
+          x1: gradientDirection === 'left' ? '100%' : '0',
+          y1: gradientDirection === 'top' ? '100%' : '0',
+          x2: gradientDirection === 'right' ? '100%' : '0',
+          y2: gradientDirection === 'bottom' ? '100%' : '0',
         }, stops),
       ])
     },
@@ -301,29 +280,26 @@ export default mixins<options &
           textAnchor: 'middle',
           dominantBaseline: 'mathematical',
           fill: 'currentColor',
-        } as object, // TODO: TS 3.5 is too eager with the array type here
+        },
       }, children)
     },
     genPath () {
       const points = genPoints(this.normalizedValues, this.boundary)
+      const instance = getCurrentInstance()
 
       return h('path', {
-        attrs: {
-          d: genPath(points, this._radius, this.fill, this.parsedHeight),
-          fill: this.fill ? `url(#${this.$.uid})` : 'none',
-          stroke: this.fill ? 'none' : `url(#${this.$.uid})`,
-        },
+        d: genPath(points, this._radius, this.fill, this.parsedHeight),
+        fill: this.fill ? `url(#${instance?.uid})` : 'none',
+        stroke: this.fill ? 'none' : `url(#${instance?.uid})`,
         ref: 'path',
       })
     },
     genLabels (offsetX: number) {
       const children = this.parsedLabels.map((item, i) => (
         h('text', {
-          attrs: {
-            x: item.x + offsetX + this._lineWidth / 2,
-            y: this.textY + (this.parsedLabelSize * 0.75),
-            'font-size': Number(this.labelSize) || 7,
-          },
+          x: item.x + offsetX + this._lineWidth / 2,
+          y: this.textY + (this.parsedLabelSize * 0.75),
+          'font-size': Number(this.labelSize) || 7,
         }, [this.genLabel(item, i)])
       ))
 
@@ -341,27 +317,21 @@ export default mixins<options &
       const offsetX = (Math.abs(bars[0].x - bars[1].x) - this._lineWidth) / 2
 
       return h('svg', {
-        attrs: {
-          display: 'block',
-          viewBox: `0 0 ${this.totalWidth} ${this.totalHeight}`,
-        },
+        display: 'block',
+        viewBox: `0 0 ${this.totalWidth} ${this.totalHeight}`,
       }, [
         this.genGradient(),
-        this.genClipPath(bars, offsetX, this._lineWidth, 'sparkline-bar-' + this.$.uid),
+        this.genClipPath(bars, offsetX, this._lineWidth, 'sparkline-bar-' + getCurrentInstance()?.uid),
         this.hasLabels ? this.genLabels(offsetX) : undefined as never,
         h('g', {
-          attrs: {
-            'clip-path': `url(#sparkline-bar-${this.$.uid}-clip)`,
-            fill: `url(#${this.$.uid})`,
-          },
+          'clip-path': `url(#sparkline-bar-${getCurrentInstance()?.uid}-clip)`,
+          fill: `url(#${getCurrentInstance()?.uid})`,
         }, [
           h('rect', {
-            attrs: {
-              x: 0,
-              y: 0,
-              width: this.totalWidth,
-              height: this.height,
-            },
+            x: 0,
+            y: 0,
+            width: this.totalWidth,
+            height: this.height,
           }),
         ]),
       ])
@@ -372,40 +342,32 @@ export default mixins<options &
         : this.smooth ? 2 : 0
 
       return h('clipPath', {
-        attrs: {
-          id: `${id}-clip`,
-        },
+        id: `${id}-clip`,
       }, bars.map(item => {
         return h('rect', {
-          attrs: {
-            x: item.x + offsetX,
-            y: item.y,
-            width: lineWidth,
-            height: item.height,
-            rx: rounding,
-            ry: rounding,
-          },
+          x: item.x + offsetX,
+          y: item.y,
+          width: lineWidth,
+          height: item.height,
+          rx: rounding,
+          ry: rounding,
         }, [
           this.autoDraw ? h('animate', {
-            attrs: {
-              attributeName: 'height',
-              from: 0,
-              to: item.height,
-              dur: `${this.autoDrawDuration}ms`,
-              fill: 'freeze',
-            },
+            attributeName: 'height',
+            from: 0,
+            to: item.height,
+            dur: `${this.autoDrawDuration}ms`,
+            fill: 'freeze',
           }) : undefined as never,
         ])
       }))
     },
     genTrend () {
       return h('svg', this.setTextColor(this.color, {
-        attrs: {
-          ...this.$attrs,
-          display: 'block',
-          'stroke-width': this._lineWidth || 1,
-          viewBox: `0 0 ${this.width} ${this.totalHeight}`,
-        },
+        ...this.$attrs,
+        display: 'block',
+        'stroke-width': this._lineWidth || 1,
+        viewBox: `0 0 ${this.width} ${this.totalHeight}`,
       }), [
         this.genGradient(),
         this.hasLabels && this.genLabels(-(this._lineWidth / 2)),

package/src/components/VSpeedDial/VSpeedDial.ts

@@ -1,4 +1,4 @@
-import {TransitionGroup, h} from 'vue'
+import { TransitionGroup, h, VNode, VNodeData, withDirectives } from 'vue'
 // Styles
 import './VSpeedDial.sass'
 
@@ -12,7 +12,7 @@ import ClickOutside from '../../directives/click-outside'
 
 // Types
 import mixins from '../../util/mixins'
-import { VNode, VNodeData } from 'vue'
+
 import { Prop } from 'vue/types/options'
 import { getSlot } from '../../util/helpers'
 
@@ -20,7 +20,7 @@ import { getSlot } from '../../util/helpers'
 export default mixins(Positionable, Toggleable, Transitionable).extend({
   name: 'v-speed-dial',
 
-  directives: { ClickOutside },
+  emits: ['update:modelValue'],
 
   props: {
     direction: {
@@ -57,10 +57,6 @@ export default mixins(Positionable, Toggleable, Transitionable).extend({
     let children: VNode[] = []
     const data: VNodeData = {
       class: this.classes,
-      directives: [{
-        name: 'click-outside',
-        value: () => (this.isActive = false),
-      }],
       on: {
         click: () => (this.isActive = !this.isActive),
       },
@@ -97,6 +93,8 @@ export default mixins(Positionable, Toggleable, Transitionable).extend({
       tag: 'div',
     }, children)
 
-    return h('div', data, [getSlot(this, 'activator'), list])
+    return withDirectives(h('div', data, [getSlot(this, 'activator'), list]), [
+      [ClickOutside, () => (this.isActive = false)],
+    ])
   },
 })

package/src/components/VStepper/VStepper.ts

@@ -1,4 +1,4 @@
-import {h} from 'vue'
+import { h } from 'vue'
 // Styles
 import './VStepper.sass'
 
@@ -48,6 +48,8 @@ export default baseMixins.extend({
     vertical: Boolean,
   },
 
+  emits: ['change'],
+
   data () {
     const data: Dictionary<any> = {
       isBooted: false,

package/src/components/VStepper/VStepperStep.ts

@@ -1,4 +1,4 @@
-import {h} from 'vue'
+import {h, withDirectives} from 'vue'
 // Components
 import VIcon from '../VIcon'
 
@@ -31,7 +31,6 @@ interface options extends InstanceType<typeof baseMixins> {
 export default baseMixins.extend({
   name: 'v-stepper-step',
 
-  directives: { ripple },
 
   inject: ['stepClick'],
 
@@ -71,6 +70,7 @@ export default baseMixins.extend({
   computed: {
     classes (): object {
       return {
+        'v-stepper__step': true,
         'v-stepper__step--active': this.isActive,
         'v-stepper__step--editable': this.editable,
         'v-stepper__step--inactive': this.isInactive,
@@ -145,23 +145,16 @@ export default baseMixins.extend({
   },
 
   render (): VNode {
-    return h('div', {
-      attrs: {
-        tabindex: this.editable ? 0 : -1,
-      },
-      class: 'v-stepper__step',
+    return withDirectives(h('div', {
+      tabindex: this.editable ? 0 : -1,
       class: this.classes,
-      directives: [{
-        name: 'ripple',
-        value: this.editable,
-      }],
-      on: {
-        click: this.click,
-        keydown: this.keyboardClick,
-      },
+      onClick: this.click,
+      onKeydown: this.keyboardClick,
     }, [
       this.genStep(),
       this.genLabel(),
+    ]), [
+      [ripple, this.editable]
     ])
   },
 })

package/src/components/VSwitch/VSwitch.ts

@@ -24,7 +24,6 @@ import mergeData from '../../util/mergeData'
 export default defineComponent({
   name: 'v-switch',
 
-  directives: { Touch },
 
   extends: Selectable,
 
@@ -40,6 +39,8 @@ export default defineComponent({
     },
   },
 
+  emits: ['click', 'focus', 'blur'],
+
   computed: {
     classes (): object {
       return {
@@ -99,12 +100,10 @@ export default defineComponent({
           ]],
         })),
 
-        h('div', mergeData({
-          class: 'v-input--switch__track' },
+        h('div', mergeData({ class: 'v-input--switch__track' },
           this.switchData,
         )),
-        h('div', mergeData({
-          class: 'v-input--switch__thumb'},
+        h('div', mergeData({ class: 'v-input--switch__thumb' },
           this.switchData,
         ), [this.genProgress()]),
       ])

package/src/components/VTabs/VTab.ts

@@ -33,6 +33,8 @@ interface options extends ExtractVue<typeof baseMixins> {
 export default baseMixins.extend({
   name: 'v-tab',
 
+  emits: ['change', 'click', 'keydown'],
+
   props: {
     ripple: {
       type: [Boolean, Object],

package/src/components/VTabs/VTabs.ts

@@ -1,4 +1,4 @@
-import {h, withDirectives} from 'vue'
+import { h, withDirectives } from 'vue'
 // Styles
 import './VTabs.sass'
 
@@ -38,10 +38,6 @@ interface options extends ExtractVue<typeof baseMixins> {
 export default baseMixins.extend({
   name: 'v-tabs',
 
-  directives: {
-    Resize,
-  },
-
   props: {
     activeClass: {
       type: String,
@@ -139,9 +135,14 @@ export default baseMixins.extend({
     '$vuetify.application.left': 'onResize',
     '$vuetify.application.right': 'onResize',
     '$vuetify.rtl': 'onResize',
+    modelValue (val: any) {
+      this.validateModelValue(val)
+    },
   },
 
   mounted () {
+    this.validateModelValue(this.modelValue)
+
     if (typeof ResizeObserver !== 'undefined') {
       const obs = new ResizeObserver(() => {
         this.onResize()
@@ -158,6 +159,11 @@ export default baseMixins.extend({
   },
 
   methods: {
+    validateModelValue (val: any) {
+      if (typeof val === 'number' && val < 0) {
+        this.internalValue = 0
+      }
+    },
     callSlider () {
       if (
         this.hideSlider ||
@@ -233,7 +239,7 @@ export default baseMixins.extend({
         modelValue: this.internalValue,
         'onUpdate:modelValue': (val: any) => {
           this.internalValue = val
-        }
+        },
       }, () => item)
     },
     genSlider (slider: VNode | null) {
@@ -241,7 +247,7 @@ export default baseMixins.extend({
 
       if (!slider) {
         slider = h(VTabsSlider, {
-          color: this.sliderColor
+          color: this.sliderColor,
         })
       }
 
@@ -297,7 +303,7 @@ export default baseMixins.extend({
     const { tab, slider, items, item } = this.parseNodes()
 
     return withDirectives(h('div', {
-      class: ['v-tabs', this.classes]
+      class: ['v-tabs', this.classes],
     }, [
       this.genBar(tab, slider),
       this.genItems(items, item),
@@ -306,8 +312,8 @@ export default baseMixins.extend({
         Resize,
         this.onResize,
         '',
-        { quiet: true }
-      ]
+        { quiet: true },
+      ],
     ])
   },
 })

package/src/components/VTabs/VTabsItems.ts

@@ -17,6 +17,8 @@ export default defineComponent({
     },
   },
 
+  emits: ['change'],
+
   computed: {
     classes (): object {
       return {

package/src/components/VTextField/VTextField.ts

@@ -53,11 +53,6 @@ const dirtyTypes = ['color', 'file', 'time', 'date', 'datetime-local', 'week', '
 export default baseMixins.extend({
   name: 'v-text-field',
 
-  directives: {
-    resize,
-    ripple,
-  },
-
   props: {
     appendOuterIcon: String,
     autofocus: Boolean,
@@ -90,6 +85,8 @@ export default baseMixins.extend({
     },
   },
 
+  emits: ['update:modelValue', 'blur', 'focus', 'keydown'],
+
   data: () => ({
     badInput: false,
     labelWidth: 0,
@@ -211,15 +208,15 @@ export default baseMixins.extend({
   },
 
   created () {
-    /* istanbul ignore next */
-    if (this.$attrs.hasOwnProperty('box')) {
-      breaking('box', 'filled', this)
-    }
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
 
     /* istanbul ignore next */
-    if (this.$attrs.hasOwnProperty('browser-autocomplete')) {
-      breaking('browser-autocomplete', 'autocomplete', this)
-    }
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
 
     /* istanbul ignore if */
     if (this.shaped && !(this.filled || this.outlined || this.isSolo)) {