@dimailn/vuetify 2.7.2-alpha20 → 2.7.2-alpha22

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/VTabs.ts

@@ -204,7 +204,7 @@ export default baseMixins.extend({
         nextIcon: this.nextIcon,
         prevIcon: this.prevIcon,
         showArrows: this.showArrows,
-        value: this.internalValue,
+        modelValue: this.internalValue,
         'onCall:slider': this.callSlider,
         'onUpdate:modelValue': (val: any) => {
           this.internalValue = val

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

@@ -5,15 +5,12 @@ import VTab from '../VTab'
 import {
   mount,
   RouterLinkStub,
-  Wrapper,
+  VueWrapper,
 } from '@vue/test-utils'
 
-// Types
-import { ExtractVue } from './../../../util/mixins'
-
 describe('VTab.ts', () => {
-  type Instance = ExtractVue<typeof VTab>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  type Instance = InstanceType<typeof VTab>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
@@ -23,28 +20,33 @@ describe('VTab.ts', () => {
     }
   })
 
-  it('should have the correct value', () => {
+  it('should have the correct value', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         href: '#foo',
       },
-      mocks: {
-        $route: { path: '/' },
-        $router: {
-          resolve: to => {
-            let href
-            if (to.path) href = to.path
-
-            return { href }
+      global: {
+        mocks: {
+          $route: { path: '/' },
+          $router: {
+            resolve: (to: any) => {
+              let href
+              if (to.path) href = to.path
+
+              return { href }
+            },
           },
         },
+        stubs: {
+          'router-link': RouterLinkStub,
+        },
       },
     })
 
     expect(wrapper.vm.value).toBe('foo')
-    wrapper.setProps({ href: null, to: '/foo' })
+    await wrapper.setProps({ href: null, to: '/foo' })
     expect(wrapper.vm.value).toBe('/foo')
-    wrapper.setProps({ to: { path: 'bar' } })
+    await wrapper.setProps({ to: { path: 'bar' } })
     expect(wrapper.vm.value).toBe('bar')
   })
 
@@ -52,19 +54,23 @@ describe('VTab.ts', () => {
   it('should react to route change', async () => {
     const toggle = jest.fn()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         activeClass: 'bar',
         to: 'foo',
       },
-      methods: { toggle },
-      mocks: {
-        $route: { path: '/' },
-      },
-      stubs: {
-        RouterLink: RouterLinkStub,
+      global: {
+        mocks: {
+          $route: { path: '/' },
+        },
+        stubs: {
+          'router-link': RouterLinkStub,
+        },
       },
     })
 
+    // Mock the toggle method
+    wrapper.vm.toggle = toggle
+
     // Mock route change being called
     wrapper.vm.onRouteChange()
     await wrapper.vm.$nextTick()
@@ -73,15 +79,19 @@ describe('VTab.ts', () => {
 
     // explicitly mock class added
     // by vue router
-    ;(wrapper.vm.$refs.link as any)._vnode.data = {
-      class: { 'bar v-tab--active': true },
+    if (wrapper.vm.$refs.link) {
+      ;(wrapper.vm.$refs.link as any)._vnode = {
+        data: {
+          class: { 'bar v-tab--active': true },
+        }
+      }
     }
     ;(wrapper.vm as any).$route.path = '/foo'
 
     wrapper.vm.onRouteChange()
     await wrapper.vm.$nextTick()
 
-    wrapper.setProps({ to: undefined })
+    await wrapper.setProps({ to: undefined })
 
     wrapper.vm.onRouteChange()
     await wrapper.vm.$nextTick()
@@ -89,26 +99,27 @@ describe('VTab.ts', () => {
     expect(toggle).toHaveBeenCalledTimes(1)
   })
 
-  it('should respond to clicks and mousedown.enter', () => {
+  it('should respond to clicks and mousedown.enter', async () => {
     const event = { preventDefault: jest.fn() }
     const toggle = jest.fn()
-    const wrapper = mountFunction({
-      methods: { toggle },
-    })
+    const wrapper = mountFunction()
+
+    // Mock the toggle method
+    wrapper.vm.toggle = toggle
 
-    wrapper.trigger('click', event)
+    await wrapper.trigger('click', event)
 
     expect(event.preventDefault).not.toHaveBeenCalled()
     expect(toggle).toHaveBeenCalled()
 
-    wrapper.setProps({ href: '#foo' })
+    await wrapper.setProps({ href: '#foo' })
 
-    wrapper.trigger('click', event)
+    await wrapper.trigger('click', event)
 
     expect(event.preventDefault).toHaveBeenCalled()
 
-    wrapper.trigger('keydown.enter', event)
-    wrapper.trigger('keydown.space', event)
+    await wrapper.trigger('keydown.enter', event)
+    await wrapper.trigger('keydown.space', event)
 
     expect(event.preventDefault).toHaveBeenCalledTimes(2)
     expect(toggle).toHaveBeenCalledTimes(3)