@dimailn/vuetify 2.7.2-alpha26 → 2.7.2-alpha28

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/VSparkline/__tests__/VSparkline.spec.ts

@@ -4,24 +4,22 @@ import VSparkline from '../VSparkline'
 // Utilities
 import {
   mount,
-  Wrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
+import { nextTick } from 'vue'
 
 describe('VSparkline.ts', () => {
-  type Instance = InstanceType<typeof VSparkline>
-  let mountFunction: (options?: object) => Wrapper<Instance>
-
-  beforeEach(() => {
-    mountFunction = (options = {}) => {
-      return mount(VSparkline, {
-        ...options,
-      })
-    }
-  })
+  enableAutoUnmount(afterEach)
+
+  const mountFunction = (options = {}) => {
+    return mount(VSparkline, {
+      ...options,
+    })
+  }
 
   it('should render component and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
       },
     })
@@ -31,7 +29,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with padding and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         padding: 20,
       },
@@ -42,7 +40,7 @@ describe('VSparkline.ts', () => {
 
   it('should render smooth component and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         smooth: 20,
       },
@@ -53,7 +51,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with line width and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         lineWidth: 42,
       },
@@ -64,7 +62,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with gradient and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         gradient: ['#000', 'red', 'rgba(80, 160, 240, 0.5)'],
       },
@@ -75,7 +73,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with string labels and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         showLabels: true,
         value: [1, 7, 42],
       },
@@ -83,7 +81,7 @@ describe('VSparkline.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       value: [
         {
           value: 2,
@@ -99,7 +97,7 @@ describe('VSparkline.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       labels: ['foo', 'bar', 'baz'],
     })
 
@@ -108,7 +106,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with bars and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         type: 'bar',
       },
@@ -119,7 +117,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with bars and negative and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [-1, 1, 7, 42],
         type: 'bar',
       },
@@ -130,7 +128,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with bars and gradient and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         gradient: ['#000', 'red', 'rgba(80, 160, 240, 0.5)'],
         type: 'bar',
@@ -142,7 +140,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with bars and labels and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         labels: ['Value 1', 'Value 2', 'Value 3'],
         type: 'bar',
@@ -154,7 +152,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with bars and auto-line-width and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         type: 'bar',
         autoLineWidth: true,
@@ -166,7 +164,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with bars and line width and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         type: 'bar',
         lineWidth: 8,
@@ -178,7 +176,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with bars and custom padding and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         type: 'bar',
         padding: 12,
@@ -190,7 +188,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with bars and auto-line-width with custom padding and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         type: 'bar',
         autoLineWidth: true,
@@ -203,7 +201,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with bars and custom label size and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         labels: ['Value 1', 'Value 2', 'Value 3'],
         labelSize: 15,
@@ -216,7 +214,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with trend and equal values and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 1, 1],
         type: 'trend',
       },
@@ -227,7 +225,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with label size and match a snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         showLabels: true,
         labelSize: 14,
@@ -239,7 +237,7 @@ describe('VSparkline.ts', () => {
 
   it('should position labels correctly', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 7, 42],
         showLabels: true,
         lineWidth: 20,
@@ -251,7 +249,7 @@ describe('VSparkline.ts', () => {
 
   it('should render component with bars and correct bar lengths', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [1, 2],
         type: 'bar',
       },
@@ -259,17 +257,17 @@ describe('VSparkline.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       value: [-1, -2],
     })
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should render bar component with all values 0', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         value: [0, 0, 0],
         type: 'bar',
       },

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/VStepper/__tests__/VStepper.spec.ts

@@ -6,12 +6,15 @@ import {
   mount,
   MountOptions,
   Wrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 describe('VStepper.ts', () => {
   type Instance = InstanceType<typeof VStepper>
   let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
 
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VStepper, {
@@ -23,7 +26,7 @@ describe('VStepper.ts', () => {
   // https://github.com/vuetifyjs/vuetify/issues/10096
   it('should accept 0 as a step value', () => {
     const wrapper = mountFunction({
-      propsData: { value: 0 },
+      props: { modelValue: 0 },
     })
 
     expect(wrapper.vm.internalValue).toBe(0)