@dimailn/vuetify 2.7.2-alpha3 → 2.7.2-alpha31

package/src/components/VSnackbar/VSnackbar.ts

@@ -54,7 +54,7 @@ export default mixins(
     },
     vertical: Boolean,
   },
-
+  emits: ['update:modelValue'],
   data: () => ({
     activeTimeout: -1,
   }),

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,8 +20,6 @@ import { getSlot } from '../../util/helpers'
 export default mixins(Positionable, Toggleable, Transitionable).extend({
   name: 'v-speed-dial',
 
-  directives: { ClickOutside },
-
   props: {
     direction: {
       type: String as Prop<'top' | 'right' | 'bottom' | 'left'>,
@@ -37,6 +35,8 @@ export default mixins(Positionable, Toggleable, Transitionable).extend({
     },
   },
 
+  emits: ['update:modelValue'],
+
   computed: {
     classes (): object {
       return {
@@ -57,24 +57,19 @@ 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),
-      },
+      onClick: () => (this.isActive = !this.isActive),
     }
 
     if (this.openOnHover) {
-      data.on!.mouseenter = () => (this.isActive = true)
-      data.on!.mouseleave = () => (this.isActive = false)
+      data.onMouseenter = () => (this.isActive = true)
+      data.onMouseleave = () => (this.isActive = false)
     }
 
     if (this.isActive) {
       let btnCount = 0
       children = (getSlot(this) || []).map((b, i) => {
-        if (b.tag && typeof b.componentOptions !== 'undefined' && (b.componentOptions.Ctor.name === 'v-btn' || b.componentOptions.Ctor.name === 'v-tooltip')) {
+        const componentName = b.type && typeof b.type === 'object' && 'name' in b.type ? b.type.name : null
+        if (b.tag && (componentName === 'v-btn' || componentName === 'v-tooltip')) {
           btnCount++
           return h('div', {
             style: {
@@ -97,6 +92,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/VSpeedDial/__tests__/VSpeedDial.spec.ts

@@ -7,13 +7,16 @@ import VTooltip from '../../VTooltip/VTooltip'
 import {
   mount,
   Wrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
-import { compileToFunctions } from 'vue-template-compiler'
+import { h } from 'vue'
 
 describe('VSpeedDial.ts', () => {
   type Instance = InstanceType<typeof VSpeedDial>
   let mountFunction: (options?: object) => Wrapper<Instance>
 
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VSpeedDial, {
@@ -31,7 +34,7 @@ describe('VSpeedDial.ts', () => {
   it('should render active component and match snapshot', () => {
     const wrapper = mountFunction({
       slots: {
-        default: [compileToFunctions('<span>test</span>')],
+        default: () => h('span', 'test'),
       },
       data: () => ({ isActive: true }),
     })
@@ -41,7 +44,7 @@ describe('VSpeedDial.ts', () => {
 
   it('should render component with custom direction and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         direction: 'right',
       },
     })
@@ -49,37 +52,42 @@ describe('VSpeedDial.ts', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should activate on click', () => {
+  it('should activate on click', async () => {
     const wrapper = mountFunction()
 
     expect(wrapper.vm.isActive).toBe(false)
-    wrapper.trigger('click')
+    await wrapper.trigger('click')
     expect(wrapper.vm.isActive).toBe(true)
   })
 
-  it('should activate on hover', () => {
+  it('should activate on hover', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         openOnHover: true,
       },
     })
 
     expect(wrapper.vm.isActive).toBe(false)
-    wrapper.trigger('mouseenter')
+    await wrapper.trigger('mouseenter')
     expect(wrapper.vm.isActive).toBe(true)
-    wrapper.trigger('mouseleave')
+    await wrapper.trigger('mouseleave')
     expect(wrapper.vm.isActive).toBe(false)
   })
 
-  it('should wrap v-btn or v-tooltip component with div tag', () => {
+  it('should render v-btn and v-tooltip components when active', () => {
     const wrapper = mount(VSpeedDial, {
       slots: {
-        default: [VBtn, VTooltip],
+        default: () => [h(VBtn, { key: 'btn' }), h(VTooltip, { key: 'tooltip' })],
       },
       data: () => ({ isActive: true }),
     })
 
-    expect(wrapper.findAll('.v-speed-dial__list div button')).toHaveLength(1)
-    expect(wrapper.findAll('.v-speed-dial__list div .v-tooltip')).toHaveLength(1)
+    expect(wrapper.findComponent(VBtn).exists()).toBe(true)
+    expect(wrapper.findComponent(VTooltip).exists()).toBe(true)
+
+    const speedDialList = wrapper.find('.v-speed-dial__list')
+    expect(speedDialList.exists()).toBe(true)
+    expect(speedDialList.findComponent(VBtn).exists()).toBe(true)
+    expect(speedDialList.findComponent(VTooltip).exists()).toBe(true)
   })
 })

package/src/components/VSpeedDial/__tests__/__snapshots__/VSpeedDial.spec.ts.snap

@@ -2,24 +2,24 @@
 
 exports[`VSpeedDial.ts should render active component and match snapshot 1`] = `
 <div class="v-speed-dial v-speed-dial--direction-top v-speed-dial--is-active">
-  <span class="v-speed-dial__list">
+  <div class="v-speed-dial__list">
     <span>
       test
     </span>
-  </span>
+  </div>
 </div>
 `;
 
 exports[`VSpeedDial.ts should render component and match snapshot 1`] = `
 <div class="v-speed-dial v-speed-dial--direction-top">
-  <span class="v-speed-dial__list">
-  </span>
+  <div class="v-speed-dial__list">
+  </div>
 </div>
 `;
 
 exports[`VSpeedDial.ts should render component with custom direction and match snapshot 1`] = `
 <div class="v-speed-dial v-speed-dial--direction-right">
-  <span class="v-speed-dial__list">
-  </span>
+  <div class="v-speed-dial__list">
+  </div>
 </div>
 `;