@dimailn/vuetify 2.7.2-alpha32 → 2.7.2-alpha34

package/src/components/VExpansionPanel/__tests__/VExpansionPanelHeader.spec.ts

@@ -14,10 +14,12 @@ describe('VExpansionPanelHeader', () => {
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VExpansionPanelHeader, {
-        provide: {
-          expansionPanel: {
-            registerHeader: () => {},
-            unregisterHeader: () => {},
+        global: {
+          provide: {
+            expansionPanel: {
+              registerHeader: () => {},
+              unregisterHeader: () => {},
+            },
           },
         },
         ...options,

package/src/components/VExpansionPanel/__tests__/VExpansionPanels.spec.ts

@@ -4,12 +4,16 @@ import VExpansionPanels from '../VExpansionPanels'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 describe('VExpansionPanels.ts', () => {
   type Instance = InstanceType<typeof VExpansionPanels>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
@@ -19,9 +23,9 @@ describe('VExpansionPanels.ts', () => {
     }
   })
 
-  it('should work', () => {
+  it('should work', async () => {
     const wrapper = mountFunction({
-      propsData: { value: 0 },
+      props: { modelValue: 0 },
     })
 
     const item = {
@@ -35,7 +39,7 @@ describe('VExpansionPanels.ts', () => {
     expect(item.isActive).toBe(true)
     expect(item.nextIsActive).toBe(false)
 
-    wrapper.setProps({ value: 1 })
+    await wrapper.setProps({ modelValue: 1 })
     wrapper.vm.updateItem(item, 0)
 
     expect(item.isActive).toBe(false)

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

@@ -10,8 +10,8 @@ exports[`VExpansionPanel should hide actions and match snapshot 1`] = `
           props="[object Object]"
   >
     <div class="v-expansion-panel-header__icon">
-      <i aria-hidden="true"
-         class="v-icon notranslate mdi mdi-chevron-down theme--light"
+      <i class="v-icon notranslate theme--light mdi mdi-chevron-down"
+         aria-hidden="true"
       >
       </i>
     </div>
@@ -28,8 +28,8 @@ exports[`VExpansionPanel should hide actions and match snapshot 2`] = `
           aria-expanded="false"
   >
     <div class="v-expansion-panel-header__icon">
-      <i aria-hidden="true"
-         class="v-icon notranslate mdi mdi-chevron-down theme--light"
+      <i class="v-icon notranslate theme--light mdi mdi-chevron-down"
+         aria-hidden="true"
       >
       </i>
     </div>

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

@@ -4,8 +4,8 @@ exports[`VFileInput.ts should be unclearable 1`] = `
 <div class="v-input theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate mdi mdi-paperclip theme--light"
+      <button class="v-icon--link v-icon notranslate theme--light mdi mdi-paperclip"
+              aria-hidden="false"
               type="button"
               aria-label="File input prepended action"
       >
@@ -43,8 +43,8 @@ exports[`VFileInput.ts should display file size 1`] = `
 <div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate mdi mdi-paperclip theme--light"
+      <button class="v-icon--link v-icon notranslate theme--light mdi mdi-paperclip"
+              aria-hidden="false"
               type="button"
               aria-label="File input prepended action"
       >
@@ -70,8 +70,8 @@ exports[`VFileInput.ts should display file size 1`] = `
       </div>
       <div class="v-input__append-inner">
         <div class="v-input__icon v-input__icon--clear">
-          <button aria-hidden="false"
-                  class="v-icon--link v-icon notranslate mdi mdi-close theme--light"
+          <button class="v-icon--link v-icon notranslate theme--light mdi mdi-close"
+                  aria-hidden="false"
                   type="button"
                   aria-label="Clear File input"
                   tabindex="-1"
@@ -94,8 +94,8 @@ exports[`VFileInput.ts should display file size 2`] = `
 <div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate mdi mdi-paperclip theme--light"
+      <button class="v-icon--link v-icon notranslate theme--light mdi mdi-paperclip"
+              aria-hidden="false"
               type="button"
               aria-label="File input prepended action"
       >
@@ -121,8 +121,8 @@ exports[`VFileInput.ts should display file size 2`] = `
       </div>
       <div class="v-input__append-inner">
         <div class="v-input__icon v-input__icon--clear">
-          <button aria-hidden="false"
-                  class="v-icon--link v-icon notranslate mdi mdi-close theme--light"
+          <button class="v-icon--link v-icon notranslate theme--light mdi mdi-close"
+                  aria-hidden="false"
                   type="button"
                   aria-label="Clear File input"
                   tabindex="-1"
@@ -145,8 +145,8 @@ exports[`VFileInput.ts should display total size in counter 1`] = `
 <div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate mdi mdi-paperclip theme--light"
+      <button class="v-icon--link v-icon notranslate theme--light mdi mdi-paperclip"
+              aria-hidden="false"
               type="button"
               aria-label="File input prepended action"
       >
@@ -172,8 +172,8 @@ exports[`VFileInput.ts should display total size in counter 1`] = `
       </div>
       <div class="v-input__append-inner">
         <div class="v-input__icon v-input__icon--clear">
-          <button aria-hidden="false"
-                  class="v-icon--link v-icon notranslate mdi mdi-close theme--light"
+          <button class="v-icon--link v-icon notranslate theme--light mdi mdi-close"
+                  aria-hidden="false"
                   type="button"
                   aria-label="Clear File input"
                   tabindex="-1"
@@ -199,8 +199,8 @@ exports[`VFileInput.ts should display total size in counter 2`] = `
 <div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate mdi mdi-paperclip theme--light"
+      <button class="v-icon--link v-icon notranslate theme--light mdi mdi-paperclip"
+              aria-hidden="false"
               type="button"
               aria-label="File input prepended action"
       >
@@ -226,8 +226,8 @@ exports[`VFileInput.ts should display total size in counter 2`] = `
       </div>
       <div class="v-input__append-inner">
         <div class="v-input__icon v-input__icon--clear">
-          <button aria-hidden="false"
-                  class="v-icon--link v-icon notranslate mdi mdi-close theme--light"
+          <button class="v-icon--link v-icon notranslate theme--light mdi mdi-close"
+                  aria-hidden="false"
                   type="button"
                   aria-label="Clear File input"
                   tabindex="-1"
@@ -253,8 +253,8 @@ exports[`VFileInput.ts should render 1`] = `
 <div class="v-input theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate mdi mdi-paperclip theme--light"
+      <button class="v-icon--link v-icon notranslate theme--light mdi mdi-paperclip"
+              aria-hidden="false"
               type="button"
               aria-label="File input prepended action"
       >
@@ -296,8 +296,8 @@ exports[`VFileInput.ts should render chips 1`] = `
 <div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate mdi mdi-paperclip theme--light"
+      <button class="v-icon--link v-icon notranslate theme--light mdi mdi-paperclip"
+              aria-hidden="false"
               type="button"
               aria-label="File input prepended action"
       >
@@ -327,8 +327,8 @@ exports[`VFileInput.ts should render chips 1`] = `
       </div>
       <div class="v-input__append-inner">
         <div class="v-input__icon v-input__icon--clear">
-          <button aria-hidden="false"
-                  class="v-icon--link v-icon notranslate mdi mdi-close theme--light"
+          <button class="v-icon--link v-icon notranslate theme--light mdi mdi-close"
+                  aria-hidden="false"
                   type="button"
                   aria-label="Clear File input"
                   tabindex="-1"
@@ -351,8 +351,8 @@ exports[`VFileInput.ts should render counter 1`] = `
 <div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate mdi mdi-paperclip theme--light"
+      <button class="v-icon--link v-icon notranslate theme--light mdi mdi-paperclip"
+              aria-hidden="false"
               type="button"
               aria-label="File input prepended action"
       >
@@ -378,8 +378,8 @@ exports[`VFileInput.ts should render counter 1`] = `
       </div>
       <div class="v-input__append-inner">
         <div class="v-input__icon v-input__icon--clear">
-          <button aria-hidden="false"
-                  class="v-icon--link v-icon notranslate mdi mdi-close theme--light"
+          <button class="v-icon--link v-icon notranslate theme--light mdi mdi-close"
+                  aria-hidden="false"
                   type="button"
                   aria-label="Clear File input"
                   tabindex="-1"
@@ -405,8 +405,8 @@ exports[`VFileInput.ts should render multiple 1`] = `
 <div class="v-input theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate mdi mdi-paperclip theme--light"
+      <button class="v-icon--link v-icon notranslate theme--light mdi mdi-paperclip"
+              aria-hidden="false"
               type="button"
               aria-label="File input prepended action"
       >
@@ -449,8 +449,8 @@ exports[`VFileInput.ts should render small chips 1`] = `
 <div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate mdi mdi-paperclip theme--light"
+      <button class="v-icon--link v-icon notranslate theme--light mdi mdi-paperclip"
+              aria-hidden="false"
               type="button"
               aria-label="File input prepended action"
       >
@@ -480,8 +480,8 @@ exports[`VFileInput.ts should render small chips 1`] = `
       </div>
       <div class="v-input__append-inner">
         <div class="v-input__icon v-input__icon--clear">
-          <button aria-hidden="false"
-                  class="v-icon--link v-icon notranslate mdi mdi-close theme--light"
+          <button class="v-icon--link v-icon notranslate theme--light mdi mdi-close"
+                  aria-hidden="false"
                   type="button"
                   aria-label="Clear File input"
                   tabindex="-1"
@@ -506,8 +506,8 @@ exports[`VFileInput.ts should render with hideInput prop like original Vuetify 1
 >
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate mdi mdi-paperclip theme--light"
+      <button class="v-icon--link v-icon notranslate theme--light mdi mdi-paperclip"
+              aria-hidden="false"
               type="button"
               aria-label="File input prepended action"
       >
@@ -585,8 +585,8 @@ exports[`VFileInput.ts should set display none if hide-input prop is set 1`] = `
 <div class="v-input theme--light v-text-field v-file-input">
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
-      <button aria-hidden="false"
-              class="v-icon--link v-icon notranslate mdi mdi-paperclip theme--light"
+      <button class="v-icon--link v-icon notranslate theme--light mdi mdi-paperclip"
+              aria-hidden="false"
               type="button"
               aria-label="File input prepended action"
       >

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

@@ -4,21 +4,26 @@ import VFooter from '../VFooter'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 
 describe('VFooter.ts', () => {
   type Instance = InstanceType<typeof VFooter>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VFooter, {
-        mocks: {
-          $vuetify: {
-            application: {
-              register: () => {},
-              unregister: () => {},
+        global: {
+          mocks: {
+            $vuetify: {
+              application: {
+                register: () => {},
+                unregister: () => {},
+              },
             },
           },
         },
@@ -27,30 +32,32 @@ describe('VFooter.ts', () => {
     }
   })
 
-  it('should return insetFooter', () => {
+  it('should return insetFooter', async () => {
     const wrapper = mountFunction()
 
     expect(wrapper.vm.applicationProperty).toBe('footer')
 
-    wrapper.setProps({ inset: true })
+    await wrapper.setProps({ inset: true })
 
     expect(wrapper.vm.applicationProperty).toBe('insetFooter')
   })
 
   it('should return computed values when using app', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         app: true,
       },
-      mocks: {
-        $vuetify: {
-          application: {
-            footer: 0,
-            bottom: 64,
-            left: 300,
-            right: 200,
-            register: () => {},
-            unregister: () => {},
+      global: {
+        mocks: {
+          $vuetify: {
+            application: {
+              footer: 0,
+              bottom: 64,
+              left: 300,
+              right: 200,
+              register: () => {},
+              unregister: () => {},
+            },
           },
         },
       },
@@ -60,10 +67,10 @@ describe('VFooter.ts', () => {
     expect(wrapper.vm.computedLeft).toBe(0)
     expect(wrapper.vm.computedRight).toBe(0)
 
-    wrapper.setProps({ inset: true })
+    await wrapper.setProps({ inset: true })
     expect(wrapper.vm.computedLeft).toBe(300)
     expect(wrapper.vm.computedRight).toBe(200)
 
-    wrapper.setProps({ height: 48 })
+    await wrapper.setProps({ height: 48 })
   })
 })

package/src/components/VGrid/VCol.ts

@@ -98,7 +98,7 @@ export default defineComponent({
   render (): VNode {
     const props = this.$props
     const data = this.$attrs
-    const children = this.$slots.default()
+    const children = this.$slots.default?.() || []
     // const {parent} = getCurrentInstance()
 
     // Super-fast memoization based on props, 5x faster than JSON.stringify

package/src/components/VGrid/VContainer.ts

@@ -10,7 +10,6 @@ import { defineComponent, h } from 'vue'
 export default defineComponent({
   name: 'v-container',
   extends: Grid('container'),
-  functional: true,
   props: {
     id: String,
     tag: {
@@ -48,18 +47,21 @@ export default defineComponent({
       })
     }
 
-    // if (props.id) {
-    //   data.domProps = data.domProps || {}
-    //   data.domProps.id = props.id
-    // }
+    const data = mergeData(this.$attrs, {
+      class: [
+        'container',
+        { 'container--fluid': this.fluid },
+        ...(classes || []),
+      ],
+    })
+
+    if (this.id) {
+      data.id = this.id
+    }
 
     return h(
       this.tag,
-      mergeData(this.$attrs, {
-        class: Array<any>({
-          'container--fluid': this.fluid,
-        }).concat(classes || []).concat('container'),
-      }),
+      data,
       this.$slots.default?.()
     )
   },

package/src/components/VGrid/__tests__/VCol.spec.ts

@@ -1,7 +1,9 @@
-import { mount } from '@vue/test-utils'
+import { mount, enableAutoUnmount } from '@vue/test-utils'
 import VCol from '../VCol'
 
 describe('layout > col', () => {
+  enableAutoUnmount(afterEach)
+
   it('should have default expected structure', async () => {
     const wrapper = mount(VCol)
 
@@ -143,7 +145,7 @@ describe('layout > col', () => {
     const wrapper = mount(VCol)
     const wrapper2 = mount(VCol)
 
-    // В Vue 3 структура vnode изменилась, поэтому проверяем по-другому
     expect(wrapper.classes()).toEqual(wrapper2.classes())
+    expect(wrapper.classes()).toContain('col')
   })
 })

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

@@ -40,13 +40,12 @@ describe('VGrid.ts', () => {
 
   it('should pass the id attr', () => {
     const wrapper = mountFunction({
-      attrs: {
+      props: {
         id: 'test',
       },
     })
 
-    // ID должен быть установлен через domProps, но в текущей реализации это не работает
-    expect(wrapper.attributes('id')).toBeUndefined()
+    expect(wrapper.attributes('id')).toBe('test')
   })
 
   it('should not pass data-* attrs as classes', () => {

package/src/components/VGrid/grid.ts

@@ -6,8 +6,6 @@ export default function VGrid (name: string) {
   return defineComponent({
     name: `v-${name}`,
 
-    functional: true,
-
     props: {
       id: String,
       tag: {
@@ -16,23 +14,23 @@ export default function VGrid (name: string) {
       },
     },
 
-    render (): VNode {
-      const data = this.$attrs
-      const children = this.$slots.default()
-      const props = this.$props
+    render() {
+      const data: any = { ...this.$attrs }
+      const children = this.$slots?.default?.() || []
+      const componentProps = this.$props
 
-      data.staticClass = (`${name} ${data.staticClass || ''}`).trim()
+      data.class = [name, data.class].filter(Boolean)
 
-      const { attrs } = data
-      if (attrs) {
+      const { attrs: dataAttrs } = data
+      if (dataAttrs) {
         // reset attrs to extract utility clases like pa-3
         data.attrs = {}
-        const classes = Object.keys(attrs).filter(key => {
+        const classes = Object.keys(dataAttrs).filter(key => {
           // TODO: Remove once resolved
           // https://github.com/vuejs/vue/issues/7841
           if (key === 'slot') return false
 
-          const value = attrs[key]
+          const value = dataAttrs[key]
 
           // add back data attributes like data-test="foo" but do not
           // add them as classes
@@ -44,15 +42,14 @@ export default function VGrid (name: string) {
           return value || typeof value === 'string'
         })
 
-        if (classes.length) data.staticClass += ` ${classes.join(' ')}`
+        if (classes.length) data.class = [...data.class, ...classes]
       }
 
-      if (props.id) {
-        data.domProps = data.domProps || {}
-        data.domProps.id = props.id
+      if (componentProps?.id) {
+        data.id = componentProps.id
       }
 
-      return h(props.tag, data, children)
-    },
+      return h(componentProps?.tag || 'div', data, children)
+    }
   })
 }

package/src/components/VHover/VHover.ts

@@ -7,7 +7,8 @@ import mixins from '../../util/mixins'
 import { consoleWarn } from '../../util/console'
 
 // Types
-import { VNode, ScopedSlotChildren } from 'vue/types/vnode'
+import { VNode, mergeProps } from 'vue'
+import { ScopedSlotChildren } from 'vue/types/vnode'
 
 export default mixins(
   Delayable,
@@ -21,7 +22,7 @@ export default mixins(
       type: Boolean,
       default: false,
     },
-    value: {
+    modelValue: {
       type: Boolean,
       default: undefined,
     },
@@ -31,42 +32,45 @@ export default mixins(
 
   methods: {
     onMouseEnter () {
+      if (this.disabled) return
       this.runDelay('open')
     },
     onMouseLeave () {
+      if (this.disabled) return
       this.runDelay('close')
     },
   },
 
   render (): VNode {
-    if (!this.$slots.default && this.value === undefined) {
+    if (!this.$slots.default && this.modelValue === undefined) {
       consoleWarn('v-hover is missing a default scopedSlot or bound value', this)
-
       return null as any
     }
 
-    let element: VNode | ScopedSlotChildren
+    if (!this.$slots.default) return null as any
 
-    /* istanbul ignore else */
-    if (this.$slots.default) {
-      element = this.$slots.default({ hover: this.isActive })
-    }
+    const slotContent = this.$slots.default({ hover: this.isActive })
 
-    if (Array.isArray(element) && element.length === 1) {
-      element = element[0]
+    if (!slotContent?.length) {
+      consoleWarn('v-hover slot returned empty content', this)
+      return null as any
     }
 
-    if (!element || Array.isArray(element) || !element.tag) {
-      consoleWarn('v-hover should only contain a single element', this)
+    const element = slotContent[0]
 
+    if (!element?.type) {
+      consoleWarn('v-hover should only contain valid VNode elements', this)
       return element as any
     }
 
+    if (slotContent.length > 1) {
+      consoleWarn('v-hover should only contain a single element', this)
+    }
+
     if (!this.disabled) {
-      element.data = element.data || {}
-      this._g(element.data, {
-        mouseenter: this.onMouseEnter,
-        mouseleave: this.onMouseLeave,
+      element.props = mergeProps(element.props || {}, {
+        onMouseenter: this.onMouseEnter,
+        onMouseleave: this.onMouseLeave,
       })
     }