@dimailn/vuetify 2.7.2-alpha21 → 2.7.2-alpha23

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

@@ -1,13 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`VProgressLinear.ts should render component and match snapshot 1`] = `
-<div role="progressbar"
+exports[`VProgressLinear.ts should render a stream component 1`] = `
+<div class="v-progress-linear theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-linear theme--light"
      style="height: 4px;"
 >
+  <div class="v-progress-linear__stream primary--text"
+       style="width: 0%;"
+  >
+  </div>
   <div class="v-progress-linear__background primary"
        style="opacity: 0.3; left: 33%; width: 67%;"
   >
@@ -21,16 +25,16 @@ exports[`VProgressLinear.ts should render component and match snapshot 1`] = `
 </div>
 `;
 
-exports[`VProgressLinear.ts should render component in RTL mode 1`] = `
-<div role="progressbar"
+exports[`VProgressLinear.ts should render component and match snapshot 1`] = `
+<div class="v-progress-linear theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-linear v-progress-linear--reverse theme--light"
      style="height: 4px;"
 >
   <div class="v-progress-linear__background primary"
-       style="opacity: 0.3; right: 33%; width: 67%;"
+       style="opacity: 0.3; left: 33%; width: 67%;"
   >
   </div>
   <div class="v-progress-linear__buffer">
@@ -42,21 +46,19 @@ exports[`VProgressLinear.ts should render component in RTL mode 1`] = `
 </div>
 `;
 
-exports[`VProgressLinear.ts should render component with buffer value and match snapshot 1`] = `
-<div role="progressbar"
+exports[`VProgressLinear.ts should render component in RTL mode 1`] = `
+<div class="v-progress-linear v-progress-linear--reverse theme--light"
+     role="progressbar"
      aria-valuemin="0"
-     aria-valuemax="80"
+     aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-linear theme--light"
      style="height: 4px;"
 >
   <div class="v-progress-linear__background primary"
-       style="opacity: 0.3; left: 33%; width: 47%;"
+       style="opacity: 0.3; right: 33%; width: 67%;"
   >
   </div>
-  <div class="v-progress-linear__buffer"
-       style="width: 80%;"
-  >
+  <div class="v-progress-linear__buffer">
   </div>
   <div class="v-progress-linear__determinate primary"
        style="width: 33%;"
@@ -65,20 +67,20 @@ exports[`VProgressLinear.ts should render component with buffer value and match
 </div>
 `;
 
-exports[`VProgressLinear.ts should render component with buffer value and match snapshot 2`] = `
-<div role="progressbar"
+exports[`VProgressLinear.ts should render component with buffer value and match snapshot 1`] = `
+<div class="v-progress-linear theme--light"
+     role="progressbar"
      aria-valuemin="0"
-     aria-valuemax="0"
+     aria-valuemax="80"
      aria-valuenow="33"
-     class="v-progress-linear theme--light"
      style="height: 4px;"
 >
   <div class="v-progress-linear__background primary"
-       style="opacity: 0.3; left: 33%; width: 0%;"
+       style="opacity: 0.3; left: 33%; width: 47%;"
   >
   </div>
   <div class="v-progress-linear__buffer"
-       style="width: 0%;"
+       style="width: 80%;"
   >
   </div>
   <div class="v-progress-linear__determinate primary"
@@ -89,11 +91,11 @@ exports[`VProgressLinear.ts should render component with buffer value and match
 `;
 
 exports[`VProgressLinear.ts should render component with buffer value and value > buffer value and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-linear theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="80"
      aria-valuenow="90"
-     class="v-progress-linear theme--light"
      style="height: 4px;"
 >
   <div class="v-progress-linear__background primary"
@@ -112,11 +114,11 @@ exports[`VProgressLinear.ts should render component with buffer value and value
 `;
 
 exports[`VProgressLinear.ts should render component with color and background color and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-linear theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-linear theme--light"
      style="height: 4px;"
 >
   <div class="v-progress-linear__background blue"
@@ -125,7 +127,7 @@ exports[`VProgressLinear.ts should render component with color and background co
   </div>
   <div class="v-progress-linear__buffer">
   </div>
-  <div class="v-progress-linear__determinate orange"
+  <div class="v-progress-linear__determinate red"
        style="width: 33%;"
   >
   </div>
@@ -133,11 +135,11 @@ exports[`VProgressLinear.ts should render component with color and background co
 `;
 
 exports[`VProgressLinear.ts should render component with color and background color and opacity and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-linear theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-linear theme--light"
      style="height: 4px;"
 >
   <div class="v-progress-linear__background blue"
@@ -146,7 +148,7 @@ exports[`VProgressLinear.ts should render component with color and background co
   </div>
   <div class="v-progress-linear__buffer">
   </div>
-  <div class="v-progress-linear__determinate orange"
+  <div class="v-progress-linear__determinate red"
        style="width: 33%;"
   >
   </div>
@@ -154,20 +156,20 @@ exports[`VProgressLinear.ts should render component with color and background co
 `;
 
 exports[`VProgressLinear.ts should render component with color and background opacity and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-linear theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-linear theme--light"
      style="height: 4px;"
 >
-  <div class="v-progress-linear__background orange"
+  <div class="v-progress-linear__background red"
        style="opacity: 0.5; left: 33%; width: 67%;"
   >
   </div>
   <div class="v-progress-linear__buffer">
   </div>
-  <div class="v-progress-linear__determinate orange"
+  <div class="v-progress-linear__determinate red"
        style="width: 33%;"
   >
   </div>
@@ -175,20 +177,20 @@ exports[`VProgressLinear.ts should render component with color and background op
 `;
 
 exports[`VProgressLinear.ts should render component with color and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-linear theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-linear theme--light"
      style="height: 4px;"
 >
-  <div class="v-progress-linear__background orange"
+  <div class="v-progress-linear__background red"
        style="opacity: 0.3; left: 33%; width: 67%;"
   >
   </div>
   <div class="v-progress-linear__buffer">
   </div>
-  <div class="v-progress-linear__determinate orange"
+  <div class="v-progress-linear__determinate red"
        style="width: 33%;"
   >
   </div>
@@ -196,60 +198,32 @@ exports[`VProgressLinear.ts should render component with color and match snapsho
 `;
 
 exports[`VProgressLinear.ts should render component with css color and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-linear theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-linear theme--light"
      style="height: 4px;"
 >
   <div class="v-progress-linear__background"
-       style="opacity: 0.3; left: 33%; width: 67%; background-color: rgb(51, 102, 153); border-color: #336699;"
+       style="opacity: 0.3; left: 33%; width: 67%; background-color: rgb(255, 0, 0); border-color: #ff0000;"
   >
   </div>
   <div class="v-progress-linear__buffer">
   </div>
   <div class="v-progress-linear__determinate"
-       style="width: 33%; background-color: rgb(51, 102, 153); border-color: #336699;"
+       style="width: 33%; background-color: rgb(255, 0, 0); border-color: #ff0000;"
   >
   </div>
 </div>
 `;
 
-exports[`VProgressLinear.ts should render default slot content 1`] = `
-<div role="progressbar"
-     aria-valuemin="0"
-     aria-valuemax="80"
-     aria-valuenow="90"
-     class="v-progress-linear theme--light"
-     style="height: 4px;"
->
-  <div class="v-progress-linear__background primary"
-       style="opacity: 0.3; left: 90%; width: 0%;"
-  >
-  </div>
-  <div class="v-progress-linear__buffer"
-       style="width: 80%;"
-  >
-  </div>
-  <div class="v-progress-linear__determinate primary"
-       style="width: 90%;"
-  >
-  </div>
-  <div class="v-progress-linear__content">
-    <div class="foobar">
-      content
-    </div>
-  </div>
-</div>
-`;
-
 exports[`VProgressLinear.ts should render inactive component and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-linear theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-linear theme--light"
      style="height: 0px;"
 >
   <div class="v-progress-linear__background primary"
@@ -268,10 +242,10 @@ exports[`VProgressLinear.ts should render inactive component and match snapshot
 `;
 
 exports[`VProgressLinear.ts should render indeterminate progress and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-linear theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
-     class="v-progress-linear theme--light"
      style="height: 4px;"
 >
   <div class="v-progress-linear__background primary"
@@ -290,10 +264,10 @@ exports[`VProgressLinear.ts should render indeterminate progress and match snaps
 `;
 
 exports[`VProgressLinear.ts should render indeterminate progress with query prop and match snapshot 1`] = `
-<div role="progressbar"
+<div class="v-progress-linear v-progress-linear--query theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
-     class="v-progress-linear v-progress-linear--query theme--light"
      style="height: 4px;"
 >
   <div class="v-progress-linear__background primary"
@@ -312,11 +286,11 @@ exports[`VProgressLinear.ts should render indeterminate progress with query prop
 `;
 
 exports[`VProgressLinear.ts should render reverse component in RTL mode 1`] = `
-<div role="progressbar"
+<div class="v-progress-linear theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-linear theme--light"
      style="height: 4px;"
 >
   <div class="v-progress-linear__background primary"
@@ -333,11 +307,11 @@ exports[`VProgressLinear.ts should render reverse component in RTL mode 1`] = `
 `;
 
 exports[`VProgressLinear.ts should render reversed component 1`] = `
-<div role="progressbar"
+<div class="v-progress-linear v-progress-linear--reverse theme--light"
+     role="progressbar"
      aria-valuemin="0"
      aria-valuemax="100"
      aria-valuenow="33"
-     class="v-progress-linear v-progress-linear--reverse theme--light"
      style="height: 4px;"
 >
   <div class="v-progress-linear__background primary"

package/src/components/VSheet/__tests__/VSheet.spec.ts

@@ -1,5 +1,5 @@
 // Libraries
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 
 // Components
 import VSheet from '../VSheet'
@@ -7,11 +7,11 @@ import VSheet from '../VSheet'
 // Utilities
 import {
   shallowMount,
-  Wrapper,
+  VueWrapper,
 } from '@vue/test-utils'
 
 describe('VSheet.ts', () => {
-  let mountFunction: (options?: object) => Wrapper<Vue>
+  let mountFunction: (options?: Record<string, any>) => VueWrapper<any>
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
@@ -27,7 +27,7 @@ describe('VSheet.ts', () => {
 
   it('should render a colored paper', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         color: 'blue lighten-1',
       },
     })
@@ -38,7 +38,7 @@ describe('VSheet.ts', () => {
 
   it('should render a tile paper', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         tile: true,
       },
     })

package/src/components/VTabs/VTabsBar.ts

@@ -1,4 +1,4 @@
-import {h} from 'vue'
+import { h, VNode } from 'vue'
 // Extensions
 import { BaseSlideGroup } from '../VSlideGroup/VSlideGroup'
 
@@ -13,8 +13,7 @@ import SSRBootable from '../../mixins/ssr-bootable'
 import mixins from '../../util/mixins'
 
 // Types
-import { Route } from 'vue-router'
-import { VNode } from 'vue'
+import { RouteLocationNormalized } from 'vue-router'
 
 type VTabInstance = InstanceType<typeof VTab>
 
@@ -64,11 +63,14 @@ export default mixins(
 
       return render
     },
-    onRouteChange (val: Route, oldVal: Route) {
+    onRouteChange (
+      val: RouteLocationNormalized,
+      oldVal: RouteLocationNormalized
+    ) {
       /* istanbul ignore next */
       if (this.mandatory) return
 
-      const items = this.items as unknown as VTabInstance[]
+      const items = (this.items as unknown) as VTabInstance[]
       const newPath = val.path
       const oldPath = oldVal.path
 

package/src/components/VVirtualScroll/VVirtualScroll.ts

@@ -1,4 +1,4 @@
-import {h} from 'vue'
+import {h, withDirectives} from 'vue'
 // Styles
 import './VVirtualScroll.sass'
 
@@ -16,7 +16,6 @@ import {
 
 // Types
 import { VNode, defineComponent } from 'vue'
-import { PropValidator } from 'vue/types/options'
 
 export default defineComponent({
   name: 'v-virtual-scroll',
@@ -37,7 +36,7 @@ export default defineComponent({
     items: {
       type: Array,
       default: () => [],
-    } as PropValidator<any[]>,
+    },
   },
 
   data: () => ({
@@ -111,15 +110,17 @@ export default defineComponent({
       },
     }, this.getChildren())
 
-    return h('div', {
-      class: 'v-virtual-scroll',
-      style: this.measurableStyles,
-      directives: [{
-        name: 'scroll',
-        modifiers: { self: true },
-        value: this.onScroll,
-      }],
-      on: this.$listeners,
-    }, [content])
+    return withDirectives(
+      h('div', {
+        class: 'v-virtual-scroll',
+        style: this.measurableStyles,
+        ...(this as any).$listeners,
+      }, {
+        default: () => [content]
+      }),
+      [
+        [Scroll, this.onScroll, '', { self: true }]
+      ]
+    )
   },
 })

package/src/components/VVirtualScroll/__tests__/VVirtualScroll.spec.ts

@@ -3,25 +3,27 @@ import VVirtualScroll from '../VVirtualScroll'
 
 // Utilities
 import {
-  shallowMount,
-  Wrapper,
+  mount,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
+import { h } from 'vue'
 
 describe('VVirtualScroll.ts', () => {
   type Instance = InstanceType<typeof VVirtualScroll>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
   let propsData: Object
   let mock: jest.SpyInstance
   const elementHeight = 100
 
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
     mountFunction = (options = {}) => {
-      return shallowMount(VVirtualScroll, {
+      return mount(VVirtualScroll, {
         ...options,
-        scopedSlots: {
-          default ({ item }) {
-            return h('div', { class: 'item' }, item)
-          },
+        slots: {
+          default: ({ item }: { item: any }) => h('div', { class: 'item' }, item),
         },
       })
     }
@@ -41,7 +43,7 @@ describe('VVirtualScroll.ts', () => {
 
   it('should render component with scopedSlot and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData,
+      props: propsData,
     })
 
     await wrapper.vm.$nextTick()
@@ -50,28 +52,29 @@ describe('VVirtualScroll.ts', () => {
 
   it('should set height of scrollable element', () => {
     const wrapper = mountFunction({
-      propsData,
+      props: propsData,
     })
 
     const scrollable = wrapper.find('.v-virtual-scroll__container')
-    expect(scrollable.element.style.height).toEqual('150px')
+    expect((scrollable.element as HTMLElement).style.height).toEqual('150px')
   })
 
-  it('should render not more than 5 hidden items and match snapshot', () => {
+  it('should render not more than 5 hidden items and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         height: elementHeight,
         items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
         itemHeight: 50,
       },
     })
 
+    await wrapper.vm.$nextTick()
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should render right items on scroll and match snapshot', () => {
+  it('should render right items on scroll and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         height: elementHeight,
         items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
         itemHeight: 50,
@@ -79,7 +82,7 @@ describe('VVirtualScroll.ts', () => {
     })
 
     wrapper.vm.scrollTop = 500
-    wrapper.trigger('scroll')
+    await wrapper.trigger('scroll')
 
     expect(wrapper.html()).toMatchSnapshot()
   })
@@ -88,11 +91,15 @@ describe('VVirtualScroll.ts', () => {
     const helpers = require('../../../util/helpers')
     const spy = jest.spyOn(helpers, 'getSlot')
     const wrapper = mountFunction({
-      propsData,
-      computed: { firstToRender: () => 2 },
+      props: propsData,
+      global: {
+        mocks: {
+          firstToRender: 2,
+        },
+      },
     })
 
-    wrapper.setData({ first: 2 })
+    wrapper.vm.first = 2
 
     wrapper.vm.genChild(0, 1)
 

package/src/components/VWindow/VWindow.ts

@@ -158,11 +158,15 @@ export default defineComponent({
       }) ?? [h(VBtn, {
         icon: true,
         ...attrs,
-      }, [
-        h(VIcon, {
-          large: true,
-        }, icon),
-      ])]
+      }, {
+        default: () => [
+          h(VIcon, {
+            large: true,
+          }, {
+            default: () => icon
+          }),
+        ]
+      })]
 
       return h('div', {
         class: `v-window__${direction}`,

package/src/components/VWindow/VWindowItem.ts

@@ -151,6 +151,8 @@ export default baseMixins.extend({
 
       // Enter handler for height transition.
       onEnter: this.onEnter,
-    }, this.showLazyContent(() => [this.genWindowItem()]))
+    }, {
+      default: () => this.showLazyContent(() => [this.genWindowItem()])
+    })
   },
 })