@dimailn/vuetify 2.7.2-alpha24 → 2.7.2-alpha26

package/src/components/VStepper/VStepperContent.ts

@@ -168,6 +168,6 @@ export default baseMixins.extend({
 
     return h(this.computedTransition, {
       ...this.$listeners,
-    }, [content])
+    }, () => [content])
   },
 })

package/src/components/VSwitch/VSwitch.ts

@@ -110,7 +110,7 @@ export default defineComponent({
       ])
     },
     genProgress (): VNode {
-      return h(VFabTransition, {}, [
+      return h(VFabTransition, {}, () => [
         this.loading === false
           ? null
           : getSlot(this, 'progress') || h(VProgressCircular, {

package/src/components/VTabs/VTabs.ts

@@ -215,7 +215,7 @@ export default baseMixins.extend({
       this.setTextColor(this.computedColor, data)
       this.setBackgroundColor(this.backgroundColor, data)
 
-      return h(VTabsBar, data, [
+      return h(VTabsBar, data, () => [
         this.genSlider(slider),
         items,
       ])
@@ -234,7 +234,7 @@ export default baseMixins.extend({
         'onUpdate:modelValue': (val: any) => {
           this.internalValue = val
         }
-      }, item)
+      }, () => item)
     },
     genSlider (slider: VNode | null) {
       if (this.hideSlider) return null

package/src/components/VTabs/__tests__/VTab.spec.ts

@@ -4,9 +4,9 @@ import VTab from '../VTab'
 // Utilities
 import {
   mount,
-  RouterLinkStub,
   VueWrapper,
 } from '@vue/test-utils'
+import { Vue3RouterLinkStub } from '../../../../test/util/stubs'
 
 describe('VTab.ts', () => {
   type Instance = InstanceType<typeof VTab>
@@ -38,7 +38,7 @@ describe('VTab.ts', () => {
           },
         },
         stubs: {
-          'router-link': RouterLinkStub,
+          'router-link': Vue3RouterLinkStub,
         },
       },
     })
@@ -63,7 +63,7 @@ describe('VTab.ts', () => {
           $route: { path: '/' },
         },
         stubs: {
-          'router-link': RouterLinkStub,
+          'router-link': Vue3RouterLinkStub,
         },
       },
     })

package/src/components/VTabs/__tests__/VTabsBar.spec.ts

@@ -5,9 +5,9 @@ import VTabsBar from '../VTabsBar'
 // Utilities
 import {
   mount,
-  RouterLinkStub,
   VueWrapper,
 } from '@vue/test-utils'
+import { Vue3RouterLinkStub } from '../../../../test/util/stubs'
 import { h, nextTick } from 'vue'
 
 describe('VTabsBar.ts', () => {
@@ -21,7 +21,7 @@ describe('VTabsBar.ts', () => {
             warnHandler: () => {}, // Подавляем предупреждения Vue
           },
           stubs: {
-            RouterLink: RouterLinkStub,
+            RouterLink: Vue3RouterLinkStub,
           },
           mocks: {
             $vuetify: {

package/src/components/VTextField/VTextField.ts

@@ -368,7 +368,7 @@ export default baseMixins.extend({
         value: this.labelValue
       }
 
-      return h(VLabel, data, getSlot(this, 'label') || this.label)
+      return h(VLabel, data, () => getSlot(this, 'label') || this.label)
     },
     genLegend () {
       const width = !this.singleLine && (this.labelValue || this.isDirty) ? this.labelWidth : 0

package/src/components/VTooltip/VTooltip.ts

@@ -1,4 +1,4 @@
-import {h, Transition} from 'vue'
+import { h, Transition, vShow, withDirectives, VNode } from 'vue'
 import './VTooltip.sass'
 
 // Mixins
@@ -13,7 +13,6 @@ import { convertToUnit, keyCodes, getSlotType } from '../../util/helpers'
 import { consoleError } from '../../util/console'
 
 // Types
-import { VNode } from 'vue'
 import mixins from '../../util/mixins'
 
 /* @vue/component */
@@ -137,7 +136,7 @@ export default mixins(Colorable, Delayable, Dependent, Menuable).extend({
 
   beforeMount () {
     this.$nextTick(() => {
-      this.value && this.callActivate()
+      this.modelValue && this.callActivate()
     })
   },
 
@@ -194,26 +193,27 @@ export default mixins(Colorable, Delayable, Dependent, Menuable).extend({
 
       return h(Transition, {
         name: this.computedTransition,
-      }, [content])
+      }, () => [content])
     },
     genContent () {
-      return h(
-        'div',
-        this.setBackgroundColor(this.color, {
-          class: ['v-tooltip__content', {
-            [this.contentClass]: true,
-            menuable__content__active: this.isActive,
-            'v-tooltip__content--fixed': this.activatorFixed,
-          }],
-          style: this.styles,
-          attrs: this.getScopeIdAttrs(),
-          directives: [{
-            name: 'show',
-            value: this.isContentActive,
-          }],
-          ref: 'content',
-        }),
-        this.getContentSlot()
+      return withDirectives(
+        h(
+          'div',
+          this.setBackgroundColor(this.color, {
+            class: ['v-tooltip__content', {
+              [this.contentClass]: true,
+              menuable__content__active: this.isActive,
+              'v-tooltip__content--fixed': this.activatorFixed,
+            }],
+            style: this.styles,
+            attrs: this.getScopeIdAttrs(),
+            ref: 'content',
+          }),
+          this.getContentSlot()
+        ),
+        [
+          [vShow, this.isContentActive]
+        ]
       )
     },
   },

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

@@ -1,13 +1,16 @@
 import VTooltip from '../VTooltip'
 import {
   mount,
-  MountOptions,
-  Wrapper,
+  enableAutoUnmount,
+  VueWrapper,
 } from '@vue/test-utils'
+import { h } from 'vue'
 
 describe('VTooltip', () => {
   type Instance = InstanceType<typeof VTooltip>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: any) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     document.body.setAttribute('data-app', 'true')
@@ -19,15 +22,13 @@ describe('VTooltip', () => {
 
   it('should render component with top and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         openDelay: 0,
         top: true,
       },
-      scopedSlots: {
-        activator: '<span>activator</span>',
-      },
       slots: {
-        default: '<span>content</span>',
+        activator: () => h('span', 'activator'),
+        default: () => h('span', 'content'),
       },
     })
 
@@ -35,24 +36,21 @@ describe('VTooltip', () => {
     expect(wrapper.vm.offsetY).toBeTruthy()
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
-      value: true,
+    await wrapper.setProps({
+      modelValue: true,
     })
-    await wrapper.vm.$nextTick()
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should render component with left and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         openDelay: 0,
         left: true,
       },
-      scopedSlots: {
-        activator: '<span>activator</span>',
-      },
       slots: {
-        default: '<span>content</span>',
+        activator: () => h('span', 'activator'),
+        default: () => h('span', 'content'),
       },
     })
 
@@ -60,24 +58,21 @@ describe('VTooltip', () => {
     expect(wrapper.vm.offsetY).toBeFalsy()
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
-      value: true,
+    await wrapper.setProps({
+      modelValue: true,
     })
-    await wrapper.vm.$nextTick()
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should render component with bottom and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         openDelay: 0,
         bottom: true,
       },
-      scopedSlots: {
-        activator: '<span>activator</span>',
-      },
       slots: {
-        default: '<span>content</span>',
+        activator: () => h('span', 'activator'),
+        default: () => h('span', 'content'),
       },
     })
 
@@ -85,24 +80,21 @@ describe('VTooltip', () => {
     expect(wrapper.vm.offsetY).toBeTruthy()
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
-      value: true,
+    await wrapper.setProps({
+      modelValue: true,
     })
-    await wrapper.vm.$nextTick()
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should render component with right and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         openDelay: 0,
         right: true,
       },
-      scopedSlots: {
-        activator: '<span>activator</span>',
-      },
       slots: {
-        default: '<span>content</span>',
+        activator: () => h('span', 'activator'),
+        default: () => h('span', 'content'),
       },
     })
 
@@ -110,39 +102,34 @@ describe('VTooltip', () => {
     expect(wrapper.vm.offsetY).toBeFalsy()
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({
-      value: true,
+    await wrapper.setProps({
+      modelValue: true,
     })
-    await wrapper.vm.$nextTick()
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should render component with custom eager and match snapshot', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         eager: true,
       },
-      scopedSlots: {
-        activator: '<span>activator</span>',
-      },
       slots: {
-        default: '<span>content</span>',
+        activator: () => h('span', 'activator'),
+        default: () => h('span', 'content'),
       },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should render component with value=true and match snapshot', async () => {
+  it('should render component with modelValue=true and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: true,
-      },
-      scopedSlots: {
-        activator: '<span>activator</span>',
+      props: {
+        modelValue: true,
       },
       slots: {
-        default: '<span>content</span>',
+        activator: () => h('span', 'activator'),
+        default: () => h('span', 'content'),
       },
     })
 
@@ -152,16 +139,14 @@ describe('VTooltip', () => {
 
   it('should render component with min/max width and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: true,
+      props: {
+        modelValue: true,
         minWidth: 100,
         maxWidth: 200,
       },
-      scopedSlots: {
-        activator: '<span>activator</span>',
-      },
       slots: {
-        default: '<span>content</span>',
+        activator: () => h('span', 'activator'),
+        default: () => h('span', 'content'),
       },
     })
 
@@ -170,7 +155,7 @@ describe('VTooltip', () => {
 
   it('should render component with zIndex prop and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         zIndex: 42,
       },
     })
@@ -181,43 +166,45 @@ describe('VTooltip', () => {
   it('should display tooltip after mouseenter and hide after mouseleave', async () => {
     jest.useFakeTimers()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         openDelay: 123,
         closeDelay: 321,
       },
-      scopedSlots: {
-        activator: '<span v-on="props.on" class="activator">activator</span>',
-      },
       slots: {
-        default: '<span class="content">content</span>',
+        activator: ({ on }: any) => h('span', { ...on, class: 'activator' }, 'activator'),
+        default: () => h('span', { class: 'content' }, 'content'),
       },
     })
 
     const activator = wrapper.find('.activator')
-    const cb = jest.fn()
-    wrapper.vm.$on('input', cb)
 
-    activator.trigger('mouseenter')
+    await activator.trigger('mouseenter')
     jest.runAllTimers()
     await wrapper.vm.$nextTick()
-    expect((setTimeout as any).mock.calls[0][1]).toBe(123)
-    expect(cb).toHaveBeenCalledWith(true)
 
-    activator.trigger('mouseleave')
+    // Check if tooltip became active
+    expect(wrapper.vm.isActive).toBe(true)
+    expect(wrapper.emitted()['update:modelValue']).toBeTruthy()
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual([true])
+
+    await activator.trigger('mouseleave')
     jest.runAllTimers()
     await wrapper.vm.$nextTick()
-    expect((setTimeout as any).mock.calls[1][1]).toBe(321)
-    expect(cb).toHaveBeenCalledWith(false)
+
+    expect(wrapper.vm.isActive).toBe(false)
+    expect(wrapper.emitted()['update:modelValue'][1]).toEqual([false])
+
+    jest.useRealTimers()
   })
 
   it(`should warn if activator isn't scoped`, () => {
     mountFunction({
-      propsData: {
+      props: {
         openDelay: 0,
       },
       slots: {
-        activator: '<span>activator</span>',
-        default: '<span>content</span>',
+        activator: () => h('span', 'activator'),
+        default: () => h('span', 'content'),
       },
     })
 
@@ -227,15 +214,13 @@ describe('VTooltip', () => {
   it(`should open and close`, () => {
     jest.useFakeTimers()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         openDelay: 0,
         closeDelay: 0,
       },
-      scopedSlots: {
-        activator: '<span v-on="props.on" class="activator">activator</span>',
-      },
       slots: {
-        default: '<span class="content">content</span>',
+        activator: ({ on }: any) => h('span', { ...on, class: 'activator' }, 'activator'),
+        default: () => h('span', { class: 'content' }, 'content'),
       },
     })
 

package/src/components/VTreeview/VTreeviewNode.ts

@@ -234,7 +234,7 @@ const VTreeviewNode = baseMixins.extend({
 
           this.checkChildren().then(() => this.open())
         }
-      }, [this.isLoading ? this.loadingIcon : this.expandIcon])
+      }, () => [this.isLoading ? this.loadingIcon : this.expandIcon])
     },
     genCheckbox () {
       return h(VIcon, {
@@ -257,7 +257,7 @@ const VTreeviewNode = baseMixins.extend({
             })
           })
         },
-      }, [this.computedIcon])
+      }, () => [this.computedIcon])
     },
     genLevel (level: number) {
       return createRange(level).map(() => h('div', {
@@ -331,7 +331,7 @@ const VTreeviewNode = baseMixins.extend({
       }, children)
     },
     genTransition () {
-      return h(VExpandTransition, [this.genChildrenWrapper()])
+      return h(VExpandTransition, {}, () => [this.genChildrenWrapper()])
     },
   },
 

package/src/components/transitions/createTransition.ts

@@ -88,7 +88,7 @@ export function createSimpleTransition (
           el.style.setProperty('display', 'none', 'important')
         })
       }
-      return h(tag, mergeData(this.$attrs, data), this.$slots.default())
+      return h(tag, mergeData(this.$attrs, data), () => this.$slots.default())
     },
   }
 }
@@ -117,7 +117,7 @@ export function createJavascriptTransition (
           name,
           ...functions,
         }),
-        this.$slots.default()
+        () => this.$slots.default()
       )
     },
   }

package/src/mixins/picker/index.ts

@@ -47,17 +47,17 @@ export default mixins(
       }) : getSlot(this)
     },
     genPicker (staticClass: string) {
-      const children = {}
+      const children: Record<string, any> = {}
 
       if (!this.noTitle) {
         const title = this.genPickerTitle()
-        title && (children.title = title)
+        title && (children.title = () => [title])
       }
 
       const body = this.genPickerBody()
-      body && (children.default = body)
+      body && (children.default = () => [body])
 
-      children.actions = (h('template', {}, [this.genPickerActionsSlot()]))
+      children.actions = () => [this.genPickerActionsSlot()]
 
       return h(VPicker, {
         class: staticClass,