@dimailn/vuetify 2.7.2-alpha3 → 2.7.2-alpha32

package/src/mixins/activatable/index.ts

@@ -62,7 +62,7 @@ export default baseMixins.extend({
     this.addActivatorEvents()
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.removeActivatorEvents()
   },
 
@@ -88,14 +88,19 @@ export default baseMixins.extend({
       }
     },
     genActivator () {
-      const node = getSlot(this, 'activator', Object.assign(this.getValueProxy(), {
+      let node = getSlot(this, 'activator', Object.assign(this.getValueProxy(), {
         attrs: {
           ...this.genActivatorListeners(),
           ...this.genActivatorAttributes(),
-        }
+        },
+        on: this.genActivatorListeners()
       })) || []
 
-      this.activatorNode = node
+      node = Array.isArray(node) ? node : [node]
+
+      this.activatorNode = node.flatMap(node => {
+        return node.type === Symbol.for('v-fgt') ? node.children : node
+      })
 
       return node
     },
@@ -167,7 +172,7 @@ export default baseMixins.extend({
         // Use the contents of the activator slot
         // There's either only one element in it or we
         // don't have a click event to use as a last resort
-        const vm = this.activatorNode[0].component.ctx
+        const vm = this.activatorNode[0].component?.ctx
         if (
           vm &&
           (vm.isActivatable !== undefined || vm.isMenuable !== undefined)

package/src/mixins/applicationable/__tests__/applicationable.spec.ts

@@ -1,22 +1,24 @@
-import {
-  mount,
-  Wrapper,
-} from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
+import { h, defineComponent } from 'vue'
 import Applicationable from '../'
-import { ComponentOptions } from 'vue'
 import { Application } from '../../../services/application'
 
 describe('applicationable.js', () => {
-  let mountFunction: (options?: ComponentOptions<any>) => Wrapper<any>
+  let mountFunction: (options?: any) => any
+
   beforeEach(() => {
-    mountFunction = (options?: ComponentOptions<any>) => {
-      return mount({
-        render: h => h('div'),
+    mountFunction = (options = {}) => {
+      const component = defineComponent({
+        render: () => h('div'),
         ...options,
-      }, {
-        mocks: {
-          $vuetify: {
-            application: new Application(),
+      })
+
+      return mount(component, {
+        global: {
+          mocks: {
+            $vuetify: {
+              application: new Application(),
+            },
           },
         },
       })
@@ -33,9 +35,9 @@ describe('applicationable.js', () => {
       methods: { updateApplication },
     })
 
-    wrapper.setProps({ app: true })
+    await wrapper.setProps({ app: true })
     await wrapper.vm.$nextTick()
-    expect(updateApplication.mock.calls).toHaveLength(1)
+    expect(updateApplication).toHaveBeenCalledTimes(1)
   })
 
   it('should update application on app prop change', async () => {
@@ -49,14 +51,15 @@ describe('applicationable.js', () => {
       methods: { updateApplication, removeApplication },
     })
 
-    wrapper.setProps({ app: true })
+    await wrapper.setProps({ app: true })
     await wrapper.vm.$nextTick()
-    wrapper.setProps({ app: false })
+    await wrapper.setProps({ app: false })
     await wrapper.vm.$nextTick()
-    wrapper.setProps({ app: true })
+    await wrapper.setProps({ app: true })
     await wrapper.vm.$nextTick()
-    expect(updateApplication.mock.calls).toHaveLength(2)
-    expect(removeApplication.mock.calls).toHaveLength(1)
+
+    expect(updateApplication).toHaveBeenCalledTimes(2)
+    expect(removeApplication).toHaveBeenCalledTimes(1)
   })
 
   it('should bind watchers passed through factory', () => {
@@ -68,7 +71,8 @@ describe('applicationable.js', () => {
       mixins: [Applicationable(null, ['foo', 'bar'])],
     })
 
-    expect(wrapper.vm._scope.effects).toHaveLength(6)
+    // В Vue 3 структура реактивности изменилась
+    expect(wrapper.vm.$.scope?.effects?.length || 0).toBeGreaterThan(0)
   })
 
   it('should call to remove application on destroy', async () => {
@@ -81,10 +85,10 @@ describe('applicationable.js', () => {
       methods: { removeApplication },
     })
 
-    wrapper.setProps({ app: true })
-    wrapper.destroy()
-    await wrapper.vm.$nextTick()
-    expect(removeApplication.mock.calls).toHaveLength(1)
+    await wrapper.setProps({ app: true })
+    wrapper.unmount()
+    await new Promise(resolve => setTimeout(resolve, 0))
+    expect(removeApplication).toHaveBeenCalledTimes(1)
   })
 
   it('should update application with dynamic property', async () => {
@@ -102,7 +106,7 @@ describe('applicationable.js', () => {
       },
     })
 
-    wrapper.setProps({ app: true })
+    await wrapper.setProps({ app: true })
     await wrapper.vm.$nextTick()
     expect(wrapper.vm.$vuetify.application.top).toBe(30)
   })
@@ -117,7 +121,7 @@ describe('applicationable.js', () => {
       },
     })
 
-    wrapper.setProps({ app: true })
+    await wrapper.setProps({ app: true })
     await wrapper.vm.$nextTick()
     expect(wrapper.vm.$vuetify.application.footer).toBe(30)
     wrapper.vm.removeApplication()

package/src/mixins/applicationable/index.ts

@@ -28,7 +28,7 @@ export default function applicationable (value: TargetProp, events: string[] = [
           : this.callUpdate()
       },
       applicationProperty (newVal, oldVal) {
-        this.$vuetify.application.unregister(this._uid, oldVal)
+        this.$vuetify.application.unregister(this.$.uid, oldVal)
       },
     },
 
@@ -51,7 +51,7 @@ export default function applicationable (value: TargetProp, events: string[] = [
       this.removeApplication()
     },
 
-    destroyed () {
+    unmounted () {
       this.removeApplication()
     },
 
@@ -60,7 +60,7 @@ export default function applicationable (value: TargetProp, events: string[] = [
         if (!this.app) return
 
         this.$vuetify.application.register(
-          this._uid,
+          this.$.uid,
           this.applicationProperty,
           this.updateApplication()
         )
@@ -69,7 +69,7 @@ export default function applicationable (value: TargetProp, events: string[] = [
         if (!force && !this.app) return
 
         this.$vuetify.application.unregister(
-          this._uid,
+          this.$.uid,
           this.applicationProperty
         )
       },

package/src/mixins/binds-attrs/index.ts

@@ -9,7 +9,7 @@ function makeWatcher (property: string): ThisType<Vue> & ((val: any, oldVal: any
   return function (this: Vue, val, oldVal) {
     for (const attr in oldVal) {
       if (!Object.prototype.hasOwnProperty.call(val, attr)) {
-        this.$delete(this.$data[property], attr)
+        delete this.$data[property][attr]
       }
     }
     for (const attr in val) {

package/src/mixins/bootable/__tests__/bootable.spec.ts

@@ -4,18 +4,22 @@ import Bootable from '../index'
 // Utilities
 import {
   mount,
-  Wrapper,
+  enableAutoUnmount,
+  VueWrapper,
 } from '@vue/test-utils'
+import { h, nextTick, Comment } from 'vue'
 
 describe('Bootable.ts', () => {
   type Instance = InstanceType<typeof Bootable>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount({
         mixins: [Bootable],
-        render: h => h('div'),
+        render: () => h('div'),
       }, {
         ...options,
       })
@@ -31,13 +35,13 @@ describe('Bootable.ts', () => {
 
     expect(wrapper.vm.isBooted).toBe(false)
     wrapper.vm.isActive = true
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapper.vm.isBooted).toBe(true)
   })
 
   it('should return lazy content', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         eager: true,
       },
     })
@@ -50,18 +54,20 @@ describe('Bootable.ts', () => {
       }),
     })
 
-    expect(wrapperLazy.vm.showLazyContent(() => 'content')).toMatchObject([{ isComment: true }])
+    const lazyResult = wrapperLazy.vm.showLazyContent(() => 'content')
+    expect(Array.isArray(lazyResult)).toBe(true)
+    expect(lazyResult[0].type).toBe(Comment)
     wrapperLazy.vm.isActive = true
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapperLazy.vm.showLazyContent(() => 'content')).toBe('content')
     wrapperLazy.vm.isActive = false
-    await wrapper.vm.$nextTick()
+    await nextTick()
     expect(wrapperLazy.vm.showLazyContent(() => 'content')).toBe('content')
   })
 
   it('should show if lazy and active at boot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         eager: true,
       },
     })
@@ -77,8 +83,8 @@ describe('Bootable.ts', () => {
     expect(wrapper.vm.isActive).toBe(false)
     expect(wrapper.vm.isBooted).toBe(false)
 
-    wrapper.setData({ isActive: true })
-    await wrapper.vm.$nextTick()
+    wrapper.vm.isActive = true
+    await nextTick()
     expect(wrapper.vm.isBooted).toBe(true)
   })
 })

package/src/mixins/bootable/index.ts

@@ -1,9 +1,10 @@
 // Utilities
 import { removed } from '../../util/console'
-import {h} from 'vue'
 
 // Types
-import  { defineComponent, VNode, App } from 'vue'
+import type { VNode, App } from 'vue'
+
+import { defineComponent, h, Comment } from 'vue'
 interface Toggleable extends App {
   isActive?: boolean
 }
@@ -49,7 +50,7 @@ export default defineComponent({
 
   methods: {
     showLazyContent (content?: () => VNode[]): VNode[] {
-      return (this.hasContent && content) ? content() : [h()]
+      return (this.hasContent && content) ? content() : [h(Comment)]
     },
   },
 })

package/src/mixins/colorable/__tests__/colorable.spec.ts

@@ -1,19 +1,22 @@
 import Colorable from '../'
 import {
   mount,
-  MountOptions,
-  Wrapper,
+  MountingOptions,
+  VueWrapper,
 } from '@vue/test-utils'
+import { defineComponent } from 'vue'
 
 describe('colorable.ts', () => {
-  const Mock = Colorable.extend({
-    render: h => h('div'),
+  const Mock = defineComponent({
+    mixins: [Colorable],
+    render: () => null,
   })
 
   type Instance = InstanceType<typeof Mock>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
       return mount(Mock, options)
     }
   })

package/src/mixins/detachable/index.ts

@@ -27,9 +27,9 @@ function validateAttachTarget (val: any) {
 
 function removeActivator (activator: VNode[]) {
   activator.forEach(node => {
-    node.elm &&
-    node.elm.parentNode &&
-    node.elm.parentNode.removeChild(node.elm)
+    node.el &&
+    node.el.parentNode &&
+    node.el.parentNode.removeChild(node.el)
   })
 }
 
@@ -94,7 +94,7 @@ export default mixins<options &
     this.isActive = false
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     if (
       this.$refs.content &&
       this.$refs.content.parentNode
@@ -103,7 +103,7 @@ export default mixins<options &
     }
   },
 
-  destroyed () {
+  unmounted () {
     if (this.activatorNode) {
       const activator = Array.isArray(this.activatorNode) ? this.activatorNode : [this.activatorNode]
       if (this.$el.isConnected) {
@@ -126,11 +126,18 @@ export default mixins<options &
 
   methods: {
     getScopeIdAttrs () {
-      const scopeId = getObjectValueByPath(this.$vnode, 'context.$options._scopeId')
+      if (!this.$attrs) return {}
 
-      return scopeId && {
-        [scopeId]: '',
-      }
+      const scopeIdAttrs: Record<string, any> = {}
+
+      // Ищем все data-v- атрибуты в $attrs
+      Object.keys(this.$attrs).forEach(key => {
+        if (key.startsWith('data-v-')) {
+          scopeIdAttrs[key] = ''
+        }
+      })
+
+      return scopeIdAttrs
     },
     initDetach () {
       if (this._isDestroyed ||

package/src/mixins/elevatable/__tests__/elevatable.spec.ts

@@ -2,18 +2,19 @@
 import Elevatable from '../'
 
 // Utilities
-import {
-  mount,
-  Wrapper,
-} from '@vue/test-utils'
-
-const Component = Elevatable.extend({
-  render: h => h('div'),
+import { mount, VueWrapper, MountingOptions } from '@vue/test-utils'
+import { defineComponent, h } from 'vue'
+
+const Component = defineComponent({
+  mixins: [Elevatable],
+  render () {
+    return h('div')
+  },
 })
 
 describe('elevatable.ts', () => {
-  type Instance = InstanceType<typeof Component>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  type Instance = InstanceType<typeof Component>;
+  let mountFunction: (options?: MountingOptions<any>) => VueWrapper<Instance>
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
@@ -23,25 +24,25 @@ describe('elevatable.ts', () => {
     }
   })
 
-  it('generate elevation classes', () => {
+  it('generate elevation classes', async () => {
     const wrapper = mountFunction()
 
     expect(wrapper.vm.computedElevation).toBeUndefined()
     expect(wrapper.vm.elevationClasses).toEqual({})
 
-    wrapper.setProps({ elevation: 1 })
+    await wrapper.setProps({ elevation: 1 })
     expect(wrapper.vm.computedElevation).toBe(1)
     expect(wrapper.vm.elevationClasses).toEqual({
       'elevation-1': true,
     })
 
-    wrapper.setProps({ elevation: '12' })
+    await wrapper.setProps({ elevation: '12' })
     expect(wrapper.vm.computedElevation).toBe('12')
     expect(wrapper.vm.elevationClasses).toEqual({
       'elevation-12': true,
     })
 
-    wrapper.setProps({ elevation: 0 })
+    await wrapper.setProps({ elevation: 0 })
     expect(wrapper.vm.computedElevation).toBe(0)
     expect(wrapper.vm.elevationClasses).toEqual({
       'elevation-0': true,

package/src/mixins/groupable/index.ts

@@ -57,7 +57,7 @@ export function factory<T extends string, C extends VueConstructor | null = null
       this[namespace] && (this[namespace] as any).register(this)
     },
 
-    beforeDestroy () {
+    beforeUnmount () {
       this[namespace] && (this[namespace] as any).unregister(this)
     },
 

package/src/mixins/intersectable/__tests__/intersectable.spec.ts

@@ -1,39 +1,45 @@
-import intersectable from '../index'
+import intersectable from "../index";
+import { defineComponent, h } from "vue";
+import { mount, VueWrapper } from "@vue/test-utils";
 
-import {
-  mount,
-  Wrapper,
-} from '@vue/test-utils'
-import { ComponentOptions } from 'vue'
-
-describe('intersectable.ts', () => {
-  let mountFunction: (options?: ComponentOptions<any>) => Wrapper<any>
+describe("intersectable.ts", () => {
+  let mountFunction: (options?: any) => VueWrapper<any>;
 
   beforeEach(() => {
-    mountFunction = (options?: ComponentOptions<any>) => {
-      return mount({
-        render: h => h('div'),
-        ...options,
-      })
-    }
-  })
-
-  it('should call callbacks when element is intersected', () => {
-    const callback = jest.fn()
+    mountFunction = (options?: any) => {
+      return mount(
+        defineComponent({
+          render: () => h("div"),
+          ...options
+        })
+      );
+    };
+  });
+
+  it("should call callbacks when element is intersected", () => {
+    const callback = jest.fn();
 
     const wrapper = mountFunction({
-      mixins: [intersectable({ onVisible: ['callback'] })],
-      methods: { callback },
-    })
+      mixins: [intersectable({ onVisible: ["callback"] })],
+      methods: { callback }
+    });
 
-    expect(callback).not.toHaveBeenCalled()
+    expect(callback).not.toHaveBeenCalled();
 
-    wrapper.vm.onObserve([] as IntersectionObserverEntry[], null as any as IntersectionObserver, false)
+    wrapper.vm.onObserve(
+      [] as IntersectionObserverEntry[],
+      (null as any) as IntersectionObserver,
+      false
+    );
 
-    expect(callback).not.toHaveBeenCalled()
+    expect(callback).not.toHaveBeenCalled();
 
-    wrapper.vm.onObserve([] as IntersectionObserverEntry[], null as any as IntersectionObserver, true)
+    wrapper.vm.onObserve(
+      [] as IntersectionObserverEntry[],
+      (null as any) as IntersectionObserver,
+      true
+    );
 
-    expect(callback).toHaveBeenCalledTimes(1)
-  })
-})
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+});

package/src/mixins/intersectable/index.ts

@@ -23,10 +23,10 @@ export default function intersectable (options: { onVisible: string[] }) {
       }, vnode)
     },
 
-    destroyed () {
+    unmounted () {
       const {vnode} = getCurrentInstance()
 
-      Intersect.unbind(this.$el as HTMLElement, {
+      Intersect.unmounted(this.$el as HTMLElement, {
         name: 'intersect',
         value: this.onObserve,
       }, vnode)