@dimailn/vuetify 2.7.2-alpha55 → 2.7.2-alpha57

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

@@ -2,27 +2,45 @@
 import Intersect from '../'
 
 describe('intersect', () => {
+  let observerInstance: any
+
+  beforeEach(() => {
+    observerInstance = undefined
+    ;(global as any).IntersectionObserver = class IntersectionObserver {
+      callback: (entries: any, observer: any) => void
+      observe = jest.fn()
+      unobserve = jest.fn()
+
+      constructor (callback: (entries: any, observer: any) => void) {
+        this.callback = callback
+        observerInstance = this
+      }
+    }
+  })
+
   it('should bind event on mounted', () => {
     const callback = jest.fn()
     const el = document.createElement('div')
     document.body.appendChild(el)
 
     Intersect.mounted(el, {
+      instance: { $: { uid: 1 } },
       value: callback,
       modifiers: { quiet: true }
-    } as any, { ctx: { uid: 1 } } as any)
+    } as any, {} as any)
 
-    expect((el as any)._observe).toBeTruthy()
+    expect(observerInstance).toBeTruthy()
+    expect(observerInstance.observe).toHaveBeenCalledWith(el)
     expect(callback).not.toHaveBeenCalled()
 
     document.body.removeChild(el)
 
     Intersect.unmounted(el, {
+      instance: { $: { uid: 1 } },
       value: callback,
       modifiers: { quiet: true }
-    } as any, { ctx: { uid: 1 } } as any)
-
-    expect((el as any)._observe[1]).toBeFalsy()
+    } as any, {} as any)
+    expect(observerInstance.unobserve).toHaveBeenCalledWith(el)
   })
 
   it('should invoke callback once and unbind', () => {
@@ -33,21 +51,21 @@ describe('intersect', () => {
     const callback = jest.fn()
 
     Intersect.mounted(el, {
+      instance: { $: { uid: 1 } },
       value: callback,
       modifiers: { once: true }
-    } as any, { ctx: { uid: 1 } } as any)
+    } as any, {} as any)
 
     expect(callback).toHaveBeenCalledTimes(0)
-    expect((el as any)._observe[1]).toBeTruthy()
+    expect(observerInstance).toBeTruthy()
 
-    ;(el as any)._observe[1].observer.callback([{ isIntersecting: false }])
+    observerInstance.callback([{ isIntersecting: false }], observerInstance)
 
-    expect(callback).toHaveBeenCalledTimes(1)
-    expect((el as any)._observe[1]).toBeTruthy()
+    expect(callback).toHaveBeenCalledTimes(0)
 
-    ;(el as any)._observe[1].observer.callback([{ isIntersecting: true }])
+    observerInstance.callback([{ isIntersecting: true }], observerInstance)
 
-    expect(callback).toHaveBeenCalledTimes(2)
-    expect((el as any)._observe[1]).toBeFalsy()
+    expect(callback).toHaveBeenCalledTimes(1)
+    expect(observerInstance.unobserve).toHaveBeenCalledWith(el)
   })
 })

package/src/directives/intersect/index.ts

@@ -17,16 +17,13 @@ interface ObserveDirectiveBinding
   }
 }
 
-// Расширяем HTMLElement для хранения данных наблюдателя
-declare global {
-  interface HTMLElement {
-    _observe?: Record<
-      number,
-      { init: boolean, observer: IntersectionObserver }
-    >
-  }
+interface IntersectState {
+  init: boolean
+  observer: IntersectionObserver
 }
 
+const intersectState = new WeakMap<HTMLElement, IntersectState>()
+
 function mounted (
   el: HTMLElement,
   binding: ObserveDirectiveBinding,
@@ -48,8 +45,8 @@ function mounted (
       entries: IntersectionObserverEntry[] = [],
       observer: IntersectionObserver
     ) => {
-      const _observe = el._observe?.[vnode.ctx!.uid]
-      if (!_observe) return // Just in case, should never fire
+      const state = intersectState.get(el)
+      if (!state) return // Just in case, should never fire
 
       const isIntersecting = entries.some(entry => entry.isIntersecting)
 
@@ -58,20 +55,19 @@ function mounted (
       if (
         handler &&
         typeof handler === 'function' &&
-        (!modifiers.quiet || _observe.init) &&
-        (!modifiers.once || isIntersecting || _observe.init)
+        (!modifiers.quiet || state.init) &&
+        (!modifiers.once || isIntersecting || state.init)
       ) {
         handler(entries, observer, isIntersecting)
       }
 
       if (isIntersecting && modifiers.once) unmounted(el, binding, vnode)
-      else _observe.init = true
+      else state.init = true
     },
     options
   )
 
-  el._observe = Object(el._observe)
-  el._observe![vnode.ctx!.uid] = { init: false, observer }
+  intersectState.set(el, { init: false, observer })
 
   observer.observe(el)
 }
@@ -93,11 +89,11 @@ function unmounted (
   binding: ObserveDirectiveBinding,
   vnode: VNode
 ) {
-  const observe = el._observe?.[vnode.ctx!.uid]
-  if (!observe) return
+  const state = intersectState.get(el)
+  if (!state) return
 
-  observe.observer.unobserve(el)
-  delete el._observe![vnode.ctx!.uid]
+  state.observer.unobserve(el)
+  intersectState.delete(el)
 }
 
 export const Intersect: ObjectDirective<

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/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