@dimailn/vuetify 2.7.2-alpha56 → 2.7.2-alpha58

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

@@ -1,17 +1,18 @@
 // Directives
 import Mutate from '../'
 
+const observers: any[] = [];
+
 (global as any).MutationObserver = class { // Mock MutationObserver
   _callback: Function
-
   _observe = jest.fn()
+  disconnect = jest.fn()
 
   constructor (callback) {
     this._callback = callback
+    observers.push(this)
   }
 
-  disconnect () {}
-
   observe (_, options) {
     this._observe(options)
   }
@@ -22,26 +23,30 @@ import Mutate from '../'
 }
 
 describe('mutate.ts', () => {
+  beforeEach(() => {
+    observers.length = 0
+  })
+
   it('should bind event on inserted', () => {
     const callback = jest.fn()
     const el = document.createElement('div') as any
     document.body.appendChild(el)
 
     Mutate.mounted(el, {
+      instance: { $: { uid: 1 } },
       value: callback
-    } as any, { ctx: { uid: 1 } } as any)
+    } as any, {} as any)
 
-    expect(el._mutate).toBeTruthy()
+    expect(observers).toHaveLength(1)
     expect(callback).not.toHaveBeenCalled()
 
     document.body.removeChild(el)
 
     Mutate.unmounted(el, {
+      instance: { $: { uid: 1 } },
       value: callback
-    } as any, { ctx: { uid: 1 } } as any)
-
-    const uid = Object.keys(el._mutate)[0]
-    expect(el._mutate[uid]).toBeFalsy()
+    } as any, {} as any)
+    expect(observers[0].disconnect).toHaveBeenCalled()
   })
 
   it('should fire event on mutation', () => {
@@ -50,19 +55,20 @@ describe('mutate.ts', () => {
     document.body.appendChild(el)
 
     Mutate.mounted(el, {
+      instance: { $: { uid: 1 } },
       value: callback
-    } as any, { ctx: { uid: 1 } } as any)
+    } as any, {} as any)
 
-    const uid = Object.keys(el._mutate)[0]
-    el._mutate[uid]?.observer?.trigger([{}])
+    observers[0]?.trigger([{} as any])
 
     expect(callback).toHaveBeenCalledTimes(1)
 
     document.body.removeChild(el)
 
     Mutate.unmounted(el, {
+      instance: { $: { uid: 1 } },
       value: callback
-    } as any, { ctx: { uid: 1 } } as any)
+    } as any, {} as any)
   })
 
   it('should fire event once', () => {
@@ -71,18 +77,18 @@ describe('mutate.ts', () => {
     document.body.appendChild(el)
 
     Mutate.mounted(el, {
+      instance: { $: { uid: 1 } },
       value: callback,
       modifiers: {
         once: true
       }
-    } as any, { ctx: { uid: 1 } } as any)
+    } as any, {} as any)
 
-    const uid = Object.keys(el._mutate)[0]
-    el._mutate[uid]?.observer?.trigger([{}])
+    observers[0]?.trigger([{} as any])
 
     expect(callback).toHaveBeenCalledTimes(1)
     // Once modifier should remove the observer
-    expect(Object.keys(el._mutate)).toHaveLength(0)
+    expect(observers[0].disconnect).toHaveBeenCalled()
 
     document.body.removeChild(el)
   })
@@ -93,6 +99,7 @@ describe('mutate.ts', () => {
     document.body.appendChild(el)
 
     Mutate.mounted(el, {
+      instance: { $: { uid: 1 } },
       value: {
         options: {
           attributes: false,
@@ -100,17 +107,17 @@ describe('mutate.ts', () => {
         },
         handler: callback
       }
-    } as any, { ctx: { uid: 1 } } as any)
+    } as any, {} as any)
 
-    const uid = Object.keys(el._mutate)[0]
-    el._mutate[uid]?.observer?.trigger([{}])
+    observers[0]?.trigger([{} as any])
 
     expect(callback).toHaveBeenCalledTimes(1)
-    expect(el._mutate[uid].observer._observe).toHaveBeenLastCalledWith({ attributes: false, subtree: true })
+    expect(observers[0]._observe).toHaveBeenLastCalledWith({ attributes: false, subtree: true })
 
     document.body.removeChild(el)
 
     Mutate.unmounted(el, {
+      instance: { $: { uid: 1 } },
       value: {
         options: {
           attributes: false,
@@ -118,7 +125,7 @@ describe('mutate.ts', () => {
         },
         handler: callback
       }
-    } as any, { ctx: { uid: 1 } } as any)
+    } as any, {} as any)
   })
 
   it('should work with observer modifiers', () => {
@@ -127,29 +134,30 @@ describe('mutate.ts', () => {
     document.body.appendChild(el)
 
     Mutate.mounted(el, {
+      instance: { $: { uid: 1 } },
       value: callback,
       modifiers: {
         attr: true,
         child: true,
         sub: true
       }
-    } as any, { ctx: { uid: 1 } } as any)
+    } as any, {} as any)
 
-    const uid = Object.keys(el._mutate)[0]
-    el._mutate[uid]?.observer?.trigger([{}])
+    observers[0]?.trigger([{} as any])
 
     expect(callback).toHaveBeenCalledTimes(1)
-    expect(el._mutate[uid].observer._observe).toHaveBeenLastCalledWith({ attributes: true, childList: true, subtree: true })
+    expect(observers[0]._observe).toHaveBeenLastCalledWith({ attributes: true, childList: true, subtree: true })
 
     document.body.removeChild(el)
 
     Mutate.unmounted(el, {
+      instance: { $: { uid: 1 } },
       value: callback,
       modifiers: {
         attr: true,
         child: true,
         sub: true
       }
-    } as any, { ctx: { uid: 1 } } as any)
+    } as any, {} as any)
   })
 })

package/src/directives/mutate/index.ts

@@ -17,6 +17,12 @@ type MutateModifiers = {
   char?: boolean
 };
 
+interface MutateState {
+  observer: MutationObserver
+}
+
+const mutateState = new WeakMap<HTMLElement, MutateState>()
+
 function mounted (
   el: HTMLElement,
   binding: DirectiveBinding<MutateValue>,
@@ -51,7 +57,7 @@ function mounted (
   const observer = new MutationObserver(
     (mutationsList: MutationRecord[], observer: MutationObserver) => {
       /* istanbul ignore if */
-      if (!el._mutate) return // Just in case, should never fire
+      if (!mutateState.has(el)) return // Just in case, should never fire
 
       callback(mutationsList, observer)
 
@@ -61,8 +67,7 @@ function mounted (
   )
 
   observer.observe(el, options)
-  el._mutate = Object(el._mutate)
-  el._mutate![vnode.ctx!.uid] = { observer }
+  mutateState.set(el, { observer })
 }
 
 function unmounted (
@@ -70,10 +75,11 @@ function unmounted (
   binding: DirectiveBinding<MutateValue>,
   vnode: VNode
 ) {
-  if (!el._mutate?.[vnode.ctx!.uid]) return
+  const state = mutateState.get(el)
+  if (!state) return
 
-  el._mutate[vnode.ctx!.uid]!.observer.disconnect()
-  delete el._mutate[vnode.ctx!.uid]
+  state.observer.disconnect()
+  mutateState.delete(el)
 }
 
 export const Mutate = {

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

@@ -8,10 +8,10 @@ describe('resize.ts', () => {
     jest.spyOn(window, 'removeEventListener')
     const el = {}
 
-    Resize.mounted(el as HTMLElement, { value: callback } as any, { ctx: { uid: 1 } } as any)
+    Resize.mounted(el as HTMLElement, { instance: { $: { uid: 1 } }, value: callback } as any, {} as any)
     expect(callback).toHaveBeenCalled()
     expect(window.addEventListener).toHaveBeenCalledWith('resize', callback, { passive: true })
-    Resize.unmounted(el as HTMLElement, { value: callback } as any, { ctx: { uid: 1 } } as any)
+    Resize.unmounted(el as HTMLElement, { instance: { $: { uid: 1 } }, value: callback } as any, {} as any)
     expect(window.removeEventListener).toHaveBeenCalledWith('resize', callback, { passive: true })
   })
 
@@ -21,10 +21,10 @@ describe('resize.ts', () => {
     jest.spyOn(window, 'removeEventListener')
     const el = {}
 
-    Resize.mounted(el as HTMLElement, { value: callback, modifiers: { quiet: true } } as any, { ctx: { uid: 1 } } as any)
+    Resize.mounted(el as HTMLElement, { instance: { $: { uid: 1 } }, value: callback, modifiers: { quiet: true } } as any, {} as any)
     expect(callback).not.toHaveBeenCalled()
     expect(window.addEventListener).toHaveBeenCalledWith('resize', callback, { passive: true })
-    Resize.unmounted(el as HTMLElement, { value: callback, modifiers: { quiet: true } } as any, { ctx: { uid: 1 } } as any)
+    Resize.unmounted(el as HTMLElement, { instance: { $: { uid: 1 } }, value: callback, modifiers: { quiet: true } } as any, {} as any)
     expect(window.removeEventListener).toHaveBeenCalledWith('resize', callback, { passive: true })
   })
 })

package/src/directives/resize/index.ts

@@ -5,18 +5,13 @@ interface ResizeDirectiveBinding extends DirectiveBinding {
   options?: boolean | AddEventListenerOptions
 }
 
-declare global {
-  interface HTMLElement {
-    _onResize?: Record<
-      number,
-      {
-        callback: () => void
-        options: boolean | AddEventListenerOptions
-      }
-    >
-  }
+interface ResizeState {
+  callback: () => void
+  options: boolean | AddEventListenerOptions
 }
 
+const resizeState = new WeakMap<HTMLElement, ResizeState>()
+
 function mounted (
   el: HTMLElement,
   binding: ResizeDirectiveBinding,
@@ -27,11 +22,10 @@ function mounted (
 
   window.addEventListener('resize', callback, options)
 
-  el._onResize = Object(el._onResize)
-  el._onResize![vnode.ctx!.uid] = {
+  resizeState.set(el, {
     callback,
     options
-  }
+  })
 
   if (!binding.modifiers || !binding.modifiers.quiet) {
     callback()
@@ -43,13 +37,12 @@ function unmounted (
   binding: ResizeDirectiveBinding,
   vnode: VNode
 ) {
-  if (!el._onResize?.[vnode.ctx!.uid]) return
-
-  const { callback, options } = el._onResize[vnode.ctx!.uid]!
+  const state = resizeState.get(el)
+  if (!state) return
+  const { callback, options } = state
 
   window.removeEventListener('resize', callback, options)
-
-  delete el._onResize[vnode.ctx!.uid]
+  resizeState.delete(el)
 }
 
 export const Resize: ObjectDirective = {

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

@@ -12,9 +12,10 @@ describe('scroll.ts', () => {
   let vnode
 
   beforeEach(() => {
-    vnode = { ctx: { uid: 1 } } as any
+    vnode = {} as any
     options = { passive: true }
     binding = {
+      instance: { $: { uid: 1 } },
       value: jest.fn(),
       modifiers: {},
       arg: null
@@ -32,16 +33,10 @@ describe('scroll.ts', () => {
     mounted(el, binding, vnode)
 
     expect(spyOnWindowAddListener).toHaveBeenCalledWith('scroll', binding.value, options)
-    expect(el._onScroll[1]).toEqual({
-      handler: binding.value,
-      options,
-      target: window
-    })
 
     unmounted(el, binding, vnode)
 
     expect(spyOnWindowRemoveListener).toHaveBeenCalledWith('scroll', binding.value, options)
-    expect(el._onScroll[1]).toBeUndefined()
   })
 
   it('should work with a provided valid querySelector string', () => {
@@ -66,16 +61,10 @@ describe('scroll.ts', () => {
     mounted(el, binding, vnode)
 
     expect(spyOnFooAddListener).toHaveBeenCalledWith('scroll', binding.value, options)
-    expect(el._onScroll[1]).toEqual({
-      handler: binding.value,
-      options,
-      target
-    })
 
     unmounted(el, binding, vnode)
 
     expect(spyOnFooRemoveListener).toHaveBeenCalledWith('scroll', binding.value, options)
-    expect(el._onScroll[1]).toBeUndefined()
 
     document.body.removeChild(target)
   })
@@ -86,16 +75,10 @@ describe('scroll.ts', () => {
     mounted(el, binding, vnode)
 
     expect(el.addEventListener).toHaveBeenCalledWith('scroll', binding.value, options)
-    expect(el._onScroll[1]).toEqual({
-      handler: binding.value,
-      options,
-      target: undefined
-    })
 
     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', () => {
@@ -106,25 +89,18 @@ describe('scroll.ts', () => {
 
   it('should accept an object for the value with handler and/or options', () => {
     const handler = binding.value
+    jest.spyOn(window, 'addEventListener')
 
     binding.value = { handler }
 
     mounted(el, binding, vnode)
 
-    expect(el._onScroll[1]).toEqual({
-      handler,
-      target: window,
-      options: { passive: true }
-    })
+    expect(window.addEventListener).toHaveBeenLastCalledWith('scroll', handler, { passive: true })
 
     binding.value = { handler, options: { passive: false } }
 
     mounted(el, binding, vnode)
 
-    expect(el._onScroll[1]).toEqual({
-      handler,
-      target: window,
-      options: { passive: false }
-    })
+    expect(window.addEventListener).toHaveBeenLastCalledWith('scroll', handler, { passive: false })
   })
 })

package/src/directives/scroll/index.ts

@@ -13,6 +13,14 @@ interface ScrollDirectiveBinding extends Omit<DirectiveBinding, 'modifiers'> {
   }
 }
 
+interface ScrollState {
+  handler: EventListener | EventListenerObject
+  options: boolean | AddEventListenerOptions
+  target?: EventTarget
+}
+
+const scrollState = new WeakMap<HTMLElement, ScrollState>()
+
 function mounted (
   el: HTMLElement,
   binding: ScrollDirectiveBinding,
@@ -38,13 +46,12 @@ function mounted (
 
   target.addEventListener('scroll', handler, options)
 
-  el._onScroll = Object(el._onScroll)
-  el._onScroll![vnode.ctx!.uid] = {
+  scrollState.set(el, {
     handler,
     options,
     // Don't reference self
     target: self ? undefined : target
-  }
+  })
 }
 
 function unmounted (
@@ -52,12 +59,12 @@ function unmounted (
   binding: ScrollDirectiveBinding,
   vnode: VNode
 ) {
-  if (!el._onScroll?.[vnode.ctx!.uid]) return
-
-  const { handler, options, target = el } = el._onScroll[vnode.ctx!.uid]!
+  const state = scrollState.get(el)
+  if (!state) return
+  const { handler, options, target = el } = state
 
   target.removeEventListener('scroll', handler, options)
-  delete el._onScroll[vnode.ctx!.uid]
+  scrollState.delete(el)
 }
 
 export const Scroll: ObjectDirective = {

package/src/directives/touch/index.ts

@@ -85,6 +85,8 @@ function createHandlers (value: TouchHandlers): TouchStoredHandlers {
   }
 }
 
+const touchState = new WeakMap<EventTarget, TouchStoredHandlers>()
+
 function mounted (
   el: HTMLElement,
   binding: DirectiveBinding<TouchValue>,
@@ -98,8 +100,7 @@ function mounted (
   if (!target) return
 
   const handlers = createHandlers(binding.value)
-  target._touchHandlers = Object(target._touchHandlers)
-  target._touchHandlers![vnode.ctx!.uid] = handlers
+  touchState.set(target, handlers)
 
   keys(handlers).forEach(eventName => {
     target.addEventListener(
@@ -116,14 +117,14 @@ function unmounted (
   vnode: VNode
 ) {
   const target = binding.value.parent ? el.parentElement : el
-  if (!target || !target._touchHandlers) return
+  if (!target) return
 
-  const handlers = target._touchHandlers[vnode.ctx!.uid]
+  const handlers = touchState.get(target)
   if (handlers) {
     keys(handlers).forEach(eventName => {
       target.removeEventListener(eventName, handlers[eventName])
     })
-    delete target._touchHandlers[vnode.ctx!.uid]
+    touchState.delete(target)
   }
 }
 

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

@@ -75,6 +75,12 @@ describe('Overlayable.ts', () => {
     expect(wrapper.vm.overlay).toBeFalsy()
   })
 
+  it('destroyOverlay безопасен когда оверлея нет', () => {
+    const wrapper = mountFunction()
+    expect(() => wrapper.vm.destroyOverlay()).not.toThrow()
+    expect(wrapper.vm.overlay).toBeFalsy()
+  })
+
   it('should remove overlay app container after close', async () => {
     const wrapper = mountFunction()
 
@@ -210,6 +216,24 @@ describe('Overlayable.ts', () => {
       expect(wrapper.vm.overlay!.$el.isConnected).toBe(true)
     })
 
+    it('beforeUnmount уничтожает оверлей даже при isActive (фикс залипшего overlay)', async () => {
+      const wrapper = mountDrawerLike()
+
+      wrapper.vm.temporary = true
+      wrapper.vm.isActive = true
+      await nextTick()
+      await waitAnimationFrame()
+
+      const app = document.querySelector('[data-app]') as HTMLElement
+      expect(app.querySelector('.v-overlay')).toBeTruthy()
+      expect(document.querySelectorAll('[data-v-app]')).toHaveLength(1)
+
+      wrapper.unmount()
+
+      expect(app.querySelector('.v-overlay')).toBeNull()
+      expect(document.querySelectorAll('[data-v-app]')).toHaveLength(0)
+    })
+
     it('showOverlay true→true не вызывает genOverlay после потери [data-app]', async () => {
       const genOverlay = jest.fn()
       const removeOverlay = jest.fn()

package/src/mixins/overlayable/index.ts

@@ -57,7 +57,7 @@ export default defineComponent({
   },
 
   beforeUnmount () {
-    this.removeOverlay()
+    this.destroyOverlay()
   },
 
   methods: {
@@ -113,14 +113,7 @@ export default defineComponent({
       if (this.hideOverlay) return
 
       if (!this.overlay?.$el?.isConnected) {
-        if (this.overlay) {
-          cancelAnimationFrame(this.animationFrame)
-          const container = this.overlay.$el?.parentNode as HTMLElement | null
-          this.overlayApp?.unmount()
-          this.overlayApp = null
-          if (container?.parentNode) container.parentNode.removeChild(container)
-          this.overlay = null
-        }
+        this.teardownOverlay()
         this.createOverlay()
       }
 
@@ -142,10 +135,7 @@ export default defineComponent({
     removeOverlay (showScroll = true) {
       if (this.overlay) {
         if (!this.overlay.$el?.isConnected) {
-          cancelAnimationFrame(this.animationFrame)
-          this.overlayApp?.unmount()
-          this.overlayApp = null
-          this.overlay = null
+          this.teardownOverlay()
           showScroll && this.showScroll()
           return
         }
@@ -159,16 +149,7 @@ export default defineComponent({
             this.isActive
           ) return
 
-          const overlayContainer = this.overlay.$el.parentNode as HTMLElement | null
-
-          this.overlayApp?.unmount()
-          this.overlayApp = null
-
-          if (overlayContainer?.parentNode) {
-            overlayContainer.parentNode.removeChild(overlayContainer)
-          }
-
-          this.overlay = null
+          this.teardownOverlay()
         })
 
         // Cancel animation frame in case
@@ -181,6 +162,27 @@ export default defineComponent({
 
       showScroll && this.showScroll()
     },
+    teardownOverlay () {
+      cancelAnimationFrame(this.animationFrame)
+
+      if (!this.overlay) return
+
+      const container = this.overlay.$el?.parentNode as HTMLElement | null
+
+      this.overlayApp?.unmount()
+      this.overlayApp = null
+
+      if (container?.parentNode) {
+        container.parentNode.removeChild(container)
+      }
+
+      this.overlay = null
+    },
+    /** Синхронно уничтожает оверлей независимо от isActive/анимации. Для unmount. */
+    destroyOverlay () {
+      this.teardownOverlay()
+      this.showScroll()
+    },
     scrollListener (e: WheelEvent | KeyboardEvent) {
       if ('key' in e) {
         if (

package/src/services/theme/utils.ts

@@ -100,7 +100,7 @@ export function genStyles (theme: VuetifyParsedTheme, cssVar = false): string {
 
     const variants = keys(value)
     for (let i = 0; i < variants.length; ++i) {
-      const variant = variants[i]
+      const variant = variants[i] as string
       const variantValue = value[variant]
       if (variant === 'base') continue