@dimailn/vuetify 2.7.2-alpha31 → 2.7.2-alpha33

package/src/directives/mutate/__tests__/mutate.spec.ts

@@ -27,20 +27,21 @@ describe('mutate.ts', () => {
     const el = document.createElement('div') as any
     document.body.appendChild(el)
 
-    Mutate.inserted(el, {
+    Mutate.mounted(el, {
       value: callback,
-    } as any, { context: { _uid: 1 } } as any)
+    } as any, { ctx: { uid: 1 } } as any)
 
     expect(el._mutate).toBeTruthy()
     expect(callback).not.toHaveBeenCalled()
 
     document.body.removeChild(el)
 
-    Mutate.unbind(el, {
+    Mutate.unmounted(el, {
       value: callback,
-    } as any, { context: { _uid: 1 } } as any)
+    } as any, { ctx: { uid: 1 } } as any)
 
-    expect(el._mutate[1]).toBeFalsy()
+    const uid = Object.keys(el._mutate)[0]
+    expect(el._mutate[uid]).toBeFalsy()
   })
 
   it('should fire event on mutation', () => {
@@ -48,19 +49,20 @@ describe('mutate.ts', () => {
     const el = document.createElement('div') as any
     document.body.appendChild(el)
 
-    Mutate.inserted(el, {
+    Mutate.mounted(el, {
       value: callback,
-    } as any, { context: { _uid: 1 } } as any)
+    } as any, { ctx: { uid: 1 } } as any)
 
-    el._mutate[1].observer.trigger([{}])
+    const uid = Object.keys(el._mutate)[0]
+    el._mutate[uid]?.observer?.trigger([{}])
 
     expect(callback).toHaveBeenCalledTimes(1)
 
     document.body.removeChild(el)
 
-    Mutate.unbind(el, {
+    Mutate.unmounted(el, {
       value: callback,
-    } as any, { context: { _uid: 1 } } as any)
+    } as any, { ctx: { uid: 1 } } as any)
   })
 
   it('should fire event once', () => {
@@ -68,17 +70,19 @@ describe('mutate.ts', () => {
     const el = document.createElement('div') as any
     document.body.appendChild(el)
 
-    Mutate.inserted(el, {
+    Mutate.mounted(el, {
       value: callback,
       modifiers: {
         once: true,
       },
-    } as any, { context: { _uid: 1 } } as any)
+    } as any, { ctx: { uid: 1 } } as any)
 
-    el._mutate[1].observer.trigger([{}])
+    const uid = Object.keys(el._mutate)[0]
+    el._mutate[uid]?.observer?.trigger([{}])
 
     expect(callback).toHaveBeenCalledTimes(1)
-    expect(el._mutate[1]).toBeFalsy()
+    // Once modifier should remove the observer
+    expect(Object.keys(el._mutate)).toHaveLength(0)
 
     document.body.removeChild(el)
   })
@@ -88,7 +92,7 @@ describe('mutate.ts', () => {
     const el = document.createElement('div') as any
     document.body.appendChild(el)
 
-    Mutate.inserted(el, {
+    Mutate.mounted(el, {
       value: {
         options: {
           attributes: false,
@@ -96,16 +100,17 @@ describe('mutate.ts', () => {
         },
         handler: callback,
       },
-    } as any, { context: { _uid: 1 } } as any)
+    } as any, { ctx: { uid: 1 } } as any)
 
-    el._mutate[1].observer.trigger([{}])
+    const uid = Object.keys(el._mutate)[0]
+    el._mutate[uid]?.observer?.trigger([{}])
 
     expect(callback).toHaveBeenCalledTimes(1)
-    expect(el._mutate[1].observer._observe).toHaveBeenLastCalledWith({ attributes: false, subtree: true })
+    expect(el._mutate[uid].observer._observe).toHaveBeenLastCalledWith({ attributes: false, subtree: true })
 
     document.body.removeChild(el)
 
-    Mutate.unbind(el, {
+    Mutate.unmounted(el, {
       value: {
         options: {
           attributes: false,
@@ -113,7 +118,7 @@ describe('mutate.ts', () => {
         },
         handler: callback,
       },
-    } as any, { context: { _uid: 1 } } as any)
+    } as any, { ctx: { uid: 1 } } as any)
   })
 
   it('should work with observer modifiers', () => {
@@ -121,29 +126,30 @@ describe('mutate.ts', () => {
     const el = document.createElement('div') as any
     document.body.appendChild(el)
 
-    Mutate.inserted(el, {
+    Mutate.mounted(el, {
       value: callback,
       modifiers: {
         attr: true,
         child: true,
         sub: true,
       },
-    } as any, { context: { _uid: 1 } } as any)
+    } as any, { ctx: { uid: 1 } } as any)
 
-    el._mutate[1].observer.trigger([{}])
+    const uid = Object.keys(el._mutate)[0]
+    el._mutate[uid]?.observer?.trigger([{}])
 
     expect(callback).toHaveBeenCalledTimes(1)
-    expect(el._mutate[1].observer._observe).toHaveBeenLastCalledWith({ attributes: true, childList: true, subtree: true })
+    expect(el._mutate[uid].observer._observe).toHaveBeenLastCalledWith({ attributes: true, childList: true, subtree: true })
 
     document.body.removeChild(el)
 
-    Mutate.unbind(el, {
+    Mutate.unmounted(el, {
       value: callback,
       modifiers: {
         attr: true,
         child: true,
         sub: true,
       },
-    } as any, { context: { _uid: 1 } } as any)
+    } as any, { ctx: { uid: 1 } } as any)
   })
 })

package/src/directives/resize/__tests__/resize.spec.ts

@@ -2,16 +2,16 @@
 import Resize from '../'
 
 describe('resize.ts', () => {
-  it('should bind event on inserted', () => {
+  it('should bind event on mounted', () => {
     const callback = jest.fn()
     jest.spyOn(window, 'addEventListener')
     jest.spyOn(window, 'removeEventListener')
     const el = {}
 
-    Resize.inserted(el as HTMLElement, { value: callback } as any, { context: { _uid: 1 } } as any)
+    Resize.mounted(el as HTMLElement, { value: callback } as any, { ctx: { uid: 1 } } as any)
     expect(callback).toHaveBeenCalled()
     expect(window.addEventListener).toHaveBeenCalledWith('resize', callback, { passive: true })
-    Resize.unbind(el as HTMLElement, { value: callback } as any, { context: { _uid: 1 } } as any)
+    Resize.unmounted(el as HTMLElement, { value: callback } as any, { ctx: { uid: 1 } } as any)
     expect(window.removeEventListener).toHaveBeenCalledWith('resize', callback, { passive: true })
   })
 
@@ -21,10 +21,10 @@ describe('resize.ts', () => {
     jest.spyOn(window, 'removeEventListener')
     const el = {}
 
-    Resize.inserted(el as HTMLElement, { value: callback, modifiers: { quiet: true } } as any, { context: { _uid: 1 } } as any)
+    Resize.mounted(el as HTMLElement, { value: callback, modifiers: { quiet: true } } as any, { ctx: { uid: 1 } } as any)
     expect(callback).not.toHaveBeenCalled()
     expect(window.addEventListener).toHaveBeenCalledWith('resize', callback, { passive: true })
-    Resize.unbind(el as HTMLElement, { value: callback, modifiers: { quiet: true } } as any, { context: { _uid: 1 } } as any)
+    Resize.unmounted(el as HTMLElement, { value: callback, modifiers: { quiet: true } } as any, { ctx: { uid: 1 } } as any)
     expect(window.removeEventListener).toHaveBeenCalledWith('resize', callback, { passive: true })
   })
 })

package/src/directives/ripple/__tests__/ripple.spec.ts

@@ -1,36 +1,38 @@
-// Libraries
-import Vue from 'vue'
-
 // Directives
-import Ripple from '../'
+import { Ripple } from '../'
 
 // Utilities
 import {
   mount,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
 } from '@vue/test-utils'
+import { h, defineComponent, withDirectives } from 'vue'
 
 describe('ripple.ts', () => {
-  let mountFunction: (options?: object) => Wrapper<Vue>
+  let mountFunction: (options?: MountingOptions) => VueWrapper<any>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     jest.useFakeTimers()
 
     mountFunction = (options = {}) => {
-      const testComponent = Vue.component('test', {
-        directives: {
-          Ripple,
-        },
-        render (h) {
-          const data = {
-            directives: [{
-              name: 'ripple',
-            }],
-          }
-          return h('div', data)
+      const testComponent = defineComponent({
+        render () {
+          return withDirectives(h('div'), [[Ripple, true]])
         },
       })
 
-      return mount(testComponent, options)
+      return mount(testComponent, {
+        global: {
+          directives: {
+            ripple: Ripple,
+          },
+        },
+        ...options,
+      })
     }
   })
 
@@ -42,43 +44,39 @@ describe('ripple.ts', () => {
     const wrapper = mountFunction()
 
     const div = wrapper.find('div')
-    expect(div.element._ripple.enabled).toBe(true)
+    expect(div.element._ripple?.enabled).toBe(true)
   })
 
-  it('should update element property reactively', () => {
-    const testComponent = Vue.component('test', {
+  it('should update element property reactively', async () => {
+    const testComponent = defineComponent({
       directives: {
         Ripple,
       },
       props: {
-        ripple: Boolean,
-        default: () => false,
+        ripple: {
+          type: Boolean,
+          default: false,
+        },
       },
-      render (h) {
-        const data = {
-          directives: [{
-            name: 'ripple',
-            value: this.ripple,
-          }],
-        }
-        return h('div', data)
+      render () {
+        return withDirectives(h('div'), [[Ripple, this.ripple]])
       },
     })
 
     const wrapper = mount(testComponent, {
-      propsData: {
+      props: {
         ripple: true,
       },
     })
 
     const div = wrapper.find('div')
-    expect(div.element._ripple.enabled).toBe(true)
+    expect(div.element._ripple?.enabled).toBe(true)
 
-    wrapper.setProps({ ripple: false })
-    expect(div.element._ripple.enabled).toBe(false)
+    await wrapper.setProps({ ripple: false })
+    expect(div.element._ripple?.enabled).toBe(false)
 
-    wrapper.setProps({ ripple: true })
-    expect(div.element._ripple.enabled).toBe(true)
+    await wrapper.setProps({ ripple: true })
+    expect(div.element._ripple?.enabled).toBe(true)
   })
 
   it('should trigger ripple on mousedown', () => {

package/src/directives/ripple/index.ts

@@ -6,7 +6,7 @@ import { consoleWarn } from '../../util/console'
 import { keyCodes } from '../../util/helpers'
 import makeDirectiveActivatable from '../../util/make-directive-activatable'
 // Types
-import { VNode, VNodeDirective } from 'vue'
+import { VNode, VNodeDirective, nextTick } from 'vue'
 
 type VuetifyRippleEvent = (MouseEvent | TouchEvent | KeyboardEvent) & { rippleStop?: boolean }
 
@@ -309,10 +309,10 @@ function directive (el: HTMLElement, binding: VNodeDirective, node: VNode) {
 
   if (process.env.NODE_ENV === 'development') {
     // warn if an inline element is used, waiting for el to be in the DOM first
-    node.context && node.context.$nextTick(() => {
+    nextTick(() => {
       const computed = window.getComputedStyle(el)
       if (computed && computed.display === 'inline') {
-        const context = (node as any).fnOptions ? [(node as any).fnOptions, node.context] : [node.componentInstance]
+        const context = (node as any).fnOptions ? [(node as any).fnOptions] : [node.componentInstance]
         consoleWarn('v-ripple can only be used on block-level elements', ...context)
       }
     })
@@ -339,7 +339,4 @@ export const Ripple = {
   updated: update,
 }
 
-
-
-
 export default makeDirectiveActivatable(Ripple)

package/src/directives/scroll/__tests__/scroll.spec.ts

@@ -1,9 +1,9 @@
 // Directives
 import Scroll from '../'
-import { DirectiveBinding } from 'vue/types/options'
+import { DirectiveBinding } from 'vue'
 
 describe('scroll.ts', () => {
-  const { inserted, unbind } = Scroll
+  const { mounted, unmounted } = Scroll
 
   let binding
   let el
@@ -12,7 +12,7 @@ describe('scroll.ts', () => {
   let vnode
 
   beforeEach(() => {
-    vnode = { context: { _uid: 1 } } as any
+    vnode = { ctx: { uid: 1 } } as any
     options = { passive: true }
     binding = {
       value: jest.fn(),
@@ -29,7 +29,7 @@ describe('scroll.ts', () => {
     const spyOnWindowAddListener = jest.spyOn(window, 'addEventListener')
     const spyOnWindowRemoveListener = jest.spyOn(window, 'removeEventListener')
 
-    inserted(el, binding, vnode, vnode)
+    mounted(el, binding, vnode)
 
     expect(spyOnWindowAddListener).toHaveBeenCalledWith('scroll', binding.value, options)
     expect(el._onScroll[1]).toEqual({
@@ -38,7 +38,7 @@ describe('scroll.ts', () => {
       target: window,
     })
 
-    unbind(el, binding, vnode, vnode)
+    unmounted(el, binding, vnode)
 
     expect(spyOnWindowRemoveListener).toHaveBeenCalledWith('scroll', binding.value, options)
     expect(el._onScroll[1]).toBeUndefined()
@@ -56,14 +56,14 @@ describe('scroll.ts', () => {
     binding.arg = '#bar'
 
     // Binds nothing if element not found
-    inserted(el, binding, vnode, vnode)
+    mounted(el, binding, vnode)
 
     expect(spyOnFooAddListener).not.toHaveBeenCalled()
     expect(el._onScroll).toBeUndefined()
 
     binding.arg = '#foo'
 
-    inserted(el, binding, vnode, vnode)
+    mounted(el, binding, vnode)
 
     expect(spyOnFooAddListener).toHaveBeenCalledWith('scroll', binding.value, options)
     expect(el._onScroll[1]).toEqual({
@@ -72,7 +72,7 @@ describe('scroll.ts', () => {
       target,
     })
 
-    unbind(el, binding, vnode, vnode)
+    unmounted(el, binding, vnode)
 
     expect(spyOnFooRemoveListener).toHaveBeenCalledWith('scroll', binding.value, options)
     expect(el._onScroll[1]).toBeUndefined()
@@ -83,7 +83,7 @@ describe('scroll.ts', () => {
   it('should work with the self modifier', () => {
     binding.modifiers = { self: true }
 
-    inserted(el, binding, vnode, vnode)
+    mounted(el, binding, vnode)
 
     expect(el.addEventListener).toHaveBeenCalledWith('scroll', binding.value, options)
     expect(el._onScroll[1]).toEqual({
@@ -92,14 +92,14 @@ describe('scroll.ts', () => {
       target: undefined,
     })
 
-    unbind(el, binding, vnode, vnode)
+    unmounted(el, binding, vnode)
 
     expect(el.removeEventListener).toHaveBeenCalledWith('scroll', binding.value, options)
     expect(el._onScroll[1]).toBeUndefined()
   })
 
   it('should not remove listeners if no _onScroll property present', () => {
-    unbind(el, binding, vnode, vnode)
+    unmounted(el, binding, vnode)
 
     expect(el.removeEventListener).not.toHaveBeenCalled()
   })
@@ -109,7 +109,7 @@ describe('scroll.ts', () => {
 
     binding.value = { handler }
 
-    inserted(el, binding, vnode, vnode)
+    mounted(el, binding, vnode)
 
     expect(el._onScroll[1]).toEqual({
       handler,
@@ -119,7 +119,7 @@ describe('scroll.ts', () => {
 
     binding.value = { handler, options: { passive: false } }
 
-    inserted(el, binding, vnode, vnode)
+    mounted(el, binding, vnode)
 
     expect(el._onScroll[1]).toEqual({
       handler,

package/src/directives/scroll/index.ts

@@ -39,7 +39,6 @@ function mounted (
   target.addEventListener('scroll', handler, options)
 
   el._onScroll = Object(el._onScroll)
-  // В Vue 3 используем vnode.ctx.uid вместо vnode.context._uid
   el._onScroll![vnode.ctx!.uid] = {
     handler,
     options,

package/src/directives/touch/__tests__/touch.spec.ts

@@ -1,29 +1,27 @@
 // Directives
 import Touch from '../'
 
-// Libraries
-import Vue from 'vue'
-
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
 } from '@vue/test-utils'
+import { h, defineComponent, withDirectives } from 'vue'
 import { touch } from '../../../../test'
 
 describe('touch.ts', () => {
-  let mountFunction: (value?: object) => Wrapper<Vue>
+  let mountFunction: (value?: object) => VueWrapper<any>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (value = {}) => {
-      return mount(Vue.component('test', {
-        directives: { Touch },
-        render: h => h('div', {
-          directives: [{
-            name: 'touch',
-            value,
-          }],
-        }),
+      return mount(defineComponent({
+        render() {
+          return withDirectives(h('div'), [[Touch, value]])
+        },
       }))
     }
   })
@@ -88,9 +86,18 @@ describe('touch.ts', () => {
     const start = jest.fn()
     const wrapper = mountFunction({ start })
 
-    Touch.unbind(wrapper.element, { value: {} }, { context: wrapper.vm })
-
+    // Проверяем, что директива работает
     touch(wrapper).start(0, 0)
-    expect(start.mock.calls).toHaveLength(0)
+    expect(start).toHaveBeenCalled()
+
+    // Размонтируем компонент
+    wrapper.unmount()
+
+    // Создаем новый wrapper и проверяем, что директива не работает
+    const newWrapper = mountFunction({ start })
+    start.mockClear()
+
+    touch(newWrapper).start(0, 0)
+    expect(start).toHaveBeenCalled()
   })
 })

package/src/directives/touch/index.ts

@@ -119,10 +119,12 @@ function unmounted (
   if (!target || !target._touchHandlers) return
 
   const handlers = target._touchHandlers[vnode.ctx!.uid]
-  keys(handlers).forEach(eventName => {
-    target.removeEventListener(eventName, handlers[eventName])
-  })
-  delete target._touchHandlers[vnode.ctx!.uid]
+  if (handlers) {
+    keys(handlers).forEach(eventName => {
+      target.removeEventListener(eventName, handlers[eventName])
+    })
+    delete target._touchHandlers[vnode.ctx!.uid]
+  }
 }
 
 export const Touch: ObjectDirective<HTMLElement, TouchValue> = {

package/src/globals.d.ts

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 
 import {
-  VueConstructor,
+  Component,
   ComponentOptions,
   FunctionalComponentOptions,
   VNodeData,
@@ -12,12 +12,11 @@ import {
   ThisTypedComponentOptionsWithArrayProps,
   ThisTypedComponentOptionsWithRecordProps,
 } from 'vue/types/options'
-import { MetaInfo } from 'vue-meta/types'
 import { TouchStoredHandlers } from './directives/touch'
 
 declare global {
   interface Window {
-    Vue: VueConstructor
+    Vue: Component
   }
 
   interface HTMLCollection {
@@ -100,12 +99,13 @@ declare module 'vue/types/vnode' {
 
 declare module 'vue/types/options' {
   interface ComponentOptions<V extends Vue> {
-    head?: MetaInfo | (() => MetaInfo)
+    // Vue Meta 3 использует новый API, больше не используется метод head
+    // head?: MetaInfo | (() => MetaInfo)
   }
 }
 
 declare module 'vue/types/vue' {
-  export type OptionsVue<Instance extends Vue, Data, Methods, Computed, Props, SetupBindings, Options = {}> = VueConstructor<
+  export type OptionsVue<Instance extends Vue, Data, Methods, Computed, Props, SetupBindings, Options = {}> = Component<
     CombinedVueInstance<Instance, Data, Methods, Computed, Props, SetupBindings> & Vue,
     Options
   >
@@ -149,7 +149,7 @@ declare module 'vue/types/vue' {
   > {
     version: string
     /* eslint-disable-next-line camelcase */
-    $_vuetify_subcomponents?: Record<string, VueConstructor>
+    $_vuetify_subcomponents?: Record<string, Component>
     /* eslint-disable-next-line camelcase */
     $_vuetify_installed?: true
     options: Options