@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha40

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/resize/index.ts

@@ -1,19 +1,34 @@
-import { VNodeDirective } from 'vue/types/vnode'
-import { VNode } from 'vue'
+import { DirectiveBinding, ObjectDirective, VNode } from 'vue'
 
-interface ResizeVNodeDirective extends VNodeDirective {
-  value?: () => void
+interface ResizeDirectiveBinding extends DirectiveBinding {
+  value: () => void
   options?: boolean | AddEventListenerOptions
 }
 
-function inserted (el: HTMLElement, binding: ResizeVNodeDirective, vnode: VNode) {
-  const callback = binding.value!
+declare global {
+  interface HTMLElement {
+    _onResize?: Record<
+      number,
+      {
+        callback: () => void
+        options: boolean | AddEventListenerOptions
+      }
+    >
+  }
+}
+
+function mounted (
+  el: HTMLElement,
+  binding: ResizeDirectiveBinding,
+  vnode: VNode
+) {
+  const callback = binding.value
   const options = binding.options || { passive: true }
 
   window.addEventListener('resize', callback, options)
 
   el._onResize = Object(el._onResize)
-  el._onResize![vnode.context!._uid] = {
+  el._onResize![vnode.ctx!.uid] = {
     callback,
     options,
   }
@@ -23,19 +38,23 @@ function inserted (el: HTMLElement, binding: ResizeVNodeDirective, vnode: VNode)
   }
 }
 
-function unbind (el: HTMLElement, binding: ResizeVNodeDirective, vnode: VNode) {
-  if (!el._onResize?.[vnode.context!._uid]) return
+function unmounted (
+  el: HTMLElement,
+  binding: ResizeDirectiveBinding,
+  vnode: VNode
+) {
+  if (!el._onResize?.[vnode.ctx!.uid]) return
 
-  const { callback, options } = el._onResize[vnode.context!._uid]!
+  const { callback, options } = el._onResize[vnode.ctx!.uid]!
 
   window.removeEventListener('resize', callback, options)
 
-  delete el._onResize[vnode.context!._uid]
+  delete el._onResize[vnode.ctx!.uid]
 }
 
-export const Resize = {
-  inserted,
-  unbind,
+export const Resize: ObjectDirective = {
+  mounted,
+  unmounted,
 }
 
 export default Resize

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

@@ -1,21 +1,32 @@
-import { VNodeDirective } from 'vue/types/vnode'
-import { DirectiveOptions, VNode } from 'vue'
-
-interface ScrollVNodeDirective extends Omit<VNodeDirective, 'modifiers'> {
-  value: EventListener | {
-    handler: EventListener
-    options?: boolean | AddEventListenerOptions
-  } | EventListenerObject & { options?: boolean | AddEventListenerOptions }
+import { DirectiveBinding, VNode, ObjectDirective } from 'vue'
+
+interface ScrollDirectiveBinding extends Omit<DirectiveBinding, 'modifiers'> {
+  value:
+    | EventListener
+    | {
+        handler: EventListener
+        options?: boolean | AddEventListenerOptions
+      }
+    | (EventListenerObject & { options?: boolean | AddEventListenerOptions })
   modifiers?: {
     self?: boolean
   }
 }
 
-function inserted (el: HTMLElement, binding: ScrollVNodeDirective, vnode: VNode) {
+function mounted (
+  el: HTMLElement,
+  binding: ScrollDirectiveBinding,
+  vnode: VNode
+) {
   const { self = false } = binding.modifiers || {}
   const value = binding.value
-  const options = (typeof value === 'object' && value.options) || { passive: true }
-  const handler = typeof value === 'function' || 'handleEvent' in value ? value : value.handler
+  const options = (typeof value === 'object' && value.options) || {
+    passive: true,
+  }
+  const handler =
+    typeof value === 'function' || 'handleEvent' in value
+      ? value
+      : value.handler
 
   const target = self
     ? el
@@ -28,7 +39,7 @@ function inserted (el: HTMLElement, binding: ScrollVNodeDirective, vnode: VNode)
   target.addEventListener('scroll', handler, options)
 
   el._onScroll = Object(el._onScroll)
-  el._onScroll![vnode.context!._uid] = {
+  el._onScroll![vnode.ctx!.uid] = {
     handler,
     options,
     // Don't reference self
@@ -36,18 +47,22 @@ function inserted (el: HTMLElement, binding: ScrollVNodeDirective, vnode: VNode)
   }
 }
 
-function unbind (el: HTMLElement, binding: ScrollVNodeDirective, vnode: VNode) {
-  if (!el._onScroll?.[vnode.context!._uid]) return
+function unmounted (
+  el: HTMLElement,
+  binding: ScrollDirectiveBinding,
+  vnode: VNode
+) {
+  if (!el._onScroll?.[vnode.ctx!.uid]) return
 
-  const { handler, options, target = el } = el._onScroll[vnode.context!._uid]!
+  const { handler, options, target = el } = el._onScroll[vnode.ctx!.uid]!
 
   target.removeEventListener('scroll', handler, options)
-  delete el._onScroll[vnode.context!._uid]
+  delete el._onScroll[vnode.ctx!.uid]
 }
 
-export const Scroll = {
-  inserted,
-  unbind,
-} as DirectiveOptions
+export const Scroll: ObjectDirective = {
+  mounted,
+  unmounted,
+}
 
 export default Scroll

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

@@ -1,4 +1,4 @@
-import { VNodeDirective, VNode } from 'vue/types/vnode'
+import { DirectiveBinding, VNode, ObjectDirective } from 'vue'
 import { keys } from '../../util/helpers'
 import { TouchHandlers, TouchValue, TouchWrapper } from 'vuetify/types'
 import makeDirectiveActivatable from '../../util/make-directive-activatable'
@@ -9,10 +9,6 @@ export interface TouchStoredHandlers {
   touchmove: (e: TouchEvent) => void
 }
 
-interface TouchVNodeDirective extends VNodeDirective {
-  value?: TouchValue
-}
-
 const handleGesture = (wrapper: TouchWrapper) => {
   const { touchstartX, touchendX, touchstartY, touchendY } = wrapper
   const dirRatio = 0.5
@@ -21,13 +17,19 @@ const handleGesture = (wrapper: TouchWrapper) => {
   wrapper.offsetY = touchendY - touchstartY
 
   if (Math.abs(wrapper.offsetY) < dirRatio * Math.abs(wrapper.offsetX)) {
-    wrapper.left && (touchendX < touchstartX - minDistance) && wrapper.left(wrapper)
-    wrapper.right && (touchendX > touchstartX + minDistance) && wrapper.right(wrapper)
+    wrapper.left &&
+      touchendX < touchstartX - minDistance &&
+      wrapper.left(wrapper)
+    wrapper.right &&
+      touchendX > touchstartX + minDistance &&
+      wrapper.right(wrapper)
   }
 
   if (Math.abs(wrapper.offsetX) < dirRatio * Math.abs(wrapper.offsetY)) {
-    wrapper.up && (touchendY < touchstartY - minDistance) && wrapper.up(wrapper)
-    wrapper.down && (touchendY > touchstartY + minDistance) && wrapper.down(wrapper)
+    wrapper.up && touchendY < touchstartY - minDistance && wrapper.up(wrapper)
+    wrapper.down &&
+      touchendY > touchstartY + minDistance &&
+      wrapper.down(wrapper)
   }
 }
 
@@ -36,8 +38,7 @@ function touchstart (event: TouchEvent, wrapper: TouchWrapper) {
   wrapper.touchstartX = touch.clientX
   wrapper.touchstartY = touch.clientY
 
-  wrapper.start &&
-    wrapper.start(Object.assign(event, wrapper))
+  wrapper.start && wrapper.start(Object.assign(event, wrapper))
 }
 
 function touchend (event: TouchEvent, wrapper: TouchWrapper) {
@@ -45,8 +46,7 @@ function touchend (event: TouchEvent, wrapper: TouchWrapper) {
   wrapper.touchendX = touch.clientX
   wrapper.touchendY = touch.clientY
 
-  wrapper.end &&
-    wrapper.end(Object.assign(event, wrapper))
+  wrapper.end && wrapper.end(Object.assign(event, wrapper))
 
   handleGesture(wrapper)
 }
@@ -85,39 +85,51 @@ function createHandlers (value: TouchHandlers): TouchStoredHandlers {
   }
 }
 
-function inserted (el: HTMLElement, binding: TouchVNodeDirective, vnode: VNode) {
-  const value = binding.value!
+function mounted (
+  el: HTMLElement,
+  binding: DirectiveBinding<TouchValue>,
+  vnode: VNode
+) {
+  const value = binding.value
   const target = value.parent ? el.parentElement : el
   const options = value.options || { passive: true }
 
   // Needed to pass unit tests
   if (!target) return
 
-  const handlers = createHandlers(binding.value!)
+  const handlers = createHandlers(binding.value)
   target._touchHandlers = Object(target._touchHandlers)
-  target._touchHandlers![vnode.ctx.uid] = handlers
+  target._touchHandlers![vnode.ctx!.uid] = handlers
 
   keys(handlers).forEach(eventName => {
-    target.addEventListener(eventName, handlers[eventName] as EventListener, options)
+    target.addEventListener(
+      eventName,
+      handlers[eventName] as EventListener,
+      options
+    )
   })
 }
 
-function unbind (el: HTMLElement, binding: TouchVNodeDirective, vnode: VNode) {
-  const target = binding.value!.parent ? el.parentElement : el
+function unmounted (
+  el: HTMLElement,
+  binding: DirectiveBinding<TouchValue>,
+  vnode: VNode
+) {
+  const target = binding.value.parent ? el.parentElement : el
   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]
+  const handlers = 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 = {
-  mounted: inserted,
-  unmounted: unbind,
+export const Touch: ObjectDirective<HTMLElement, TouchValue> = {
+  mounted,
+  unmounted,
 }
 
-
-
 export default makeDirectiveActivatable(Touch)

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