vuetify 2.5.12 → 2.5.13

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

@@ -29,16 +29,18 @@ describe('mutate.ts', () => {
 
     Mutate.inserted(el, {
       value: callback,
-    } as any)
+    } as any, { context: { _uid: 1 } } as any)
 
     expect(el._mutate).toBeTruthy()
     expect(callback).not.toHaveBeenCalled()
 
     document.body.removeChild(el)
 
-    Mutate.unbind(el)
+    Mutate.unbind(el, {
+      value: callback,
+    } as any, { context: { _uid: 1 } } as any)
 
-    expect(el._mutate).toBeFalsy()
+    expect(el._mutate[1]).toBeFalsy()
   })
 
   it('should fire event on mutation', () => {
@@ -48,15 +50,17 @@ describe('mutate.ts', () => {
 
     Mutate.inserted(el, {
       value: callback,
-    } as any)
+    } as any, { context: { _uid: 1 } } as any)
 
-    el._mutate.observer.trigger([{}])
+    el._mutate[1].observer.trigger([{}])
 
     expect(callback).toHaveBeenCalledTimes(1)
 
     document.body.removeChild(el)
 
-    Mutate.unbind(el)
+    Mutate.unbind(el, {
+      value: callback,
+    } as any, { context: { _uid: 1 } } as any)
   })
 
   it('should fire event once', () => {
@@ -69,12 +73,12 @@ describe('mutate.ts', () => {
       modifiers: {
         once: true,
       },
-    } as any)
+    } as any, { context: { _uid: 1 } } as any)
 
-    el._mutate.observer.trigger([{}])
+    el._mutate[1].observer.trigger([{}])
 
     expect(callback).toHaveBeenCalledTimes(1)
-    expect(el._mutate).toBeFalsy()
+    expect(el._mutate[1]).toBeFalsy()
 
     document.body.removeChild(el)
   })
@@ -92,16 +96,24 @@ describe('mutate.ts', () => {
         },
         handler: callback,
       },
-    } as any)
+    } as any, { context: { _uid: 1 } } as any)
 
-    el._mutate.observer.trigger([{}])
+    el._mutate[1].observer.trigger([{}])
 
     expect(callback).toHaveBeenCalledTimes(1)
-    expect(el._mutate.observer._observe).toHaveBeenLastCalledWith({ attributes: false, subtree: true })
+    expect(el._mutate[1].observer._observe).toHaveBeenLastCalledWith({ attributes: false, subtree: true })
 
     document.body.removeChild(el)
 
-    Mutate.unbind(el)
+    Mutate.unbind(el, {
+      value: {
+        options: {
+          attributes: false,
+          subtree: true,
+        },
+        handler: callback,
+      },
+    } as any, { context: { _uid: 1 } } as any)
   })
 
   it('should work with observer modifiers', () => {
@@ -116,15 +128,22 @@ describe('mutate.ts', () => {
         child: true,
         sub: true,
       },
-    } as any)
+    } as any, { context: { _uid: 1 } } as any)
 
-    el._mutate.observer.trigger([{}])
+    el._mutate[1].observer.trigger([{}])
 
     expect(callback).toHaveBeenCalledTimes(1)
-    expect(el._mutate.observer._observe).toHaveBeenLastCalledWith({ attributes: true, childList: true, subtree: true })
+    expect(el._mutate[1].observer._observe).toHaveBeenLastCalledWith({ attributes: true, childList: true, subtree: true })
 
     document.body.removeChild(el)
 
-    Mutate.unbind(el)
+    Mutate.unbind(el, {
+      value: callback,
+      modifiers: {
+        attr: true,
+        child: true,
+        sub: true,
+      },
+    } as any, { context: { _uid: 1 } } as any)
   })
 })

package/src/directives/mutate/index.ts

@@ -1,4 +1,4 @@
-import { VNodeDirective } from 'vue'
+import { VNode, VNodeDirective } from 'vue'
 
 type MutateHandler = (
   mutationsList: MutationRecord[],
@@ -16,7 +16,7 @@ interface MutateVNodeDirective extends Omit<VNodeDirective, 'modifiers'> {
   }
 }
 
-function inserted (el: HTMLElement, binding: MutateVNodeDirective) {
+function inserted (el: HTMLElement, binding: MutateVNodeDirective, vnode: VNode) {
   const modifiers = binding.modifiers || {}
   const value = binding.value
   const callback = typeof value === 'object' ? value.handler : value!
@@ -52,19 +52,20 @@ function inserted (el: HTMLElement, binding: MutateVNodeDirective) {
     callback(mutationsList, observer)
 
     // If has the once modifier, unbind
-    once && unbind(el)
+    once && unbind(el, binding, vnode)
   })
 
   observer.observe(el, options)
-  el._mutate = { observer }
+  el._mutate = Object(el._mutate)
+  el._mutate![vnode.context!._uid] = { observer }
 }
 
-function unbind (el: HTMLElement) {
+function unbind (el: HTMLElement, binding: MutateVNodeDirective, vnode: VNode) {
   /* istanbul ignore if */
   if (!el._mutate) return
 
-  el._mutate.observer.disconnect()
-  delete el._mutate
+  el._mutate[vnode.context!._uid].observer.disconnect()
+  delete el._mutate[vnode.context!._uid]
 }
 
 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.inserted(el as HTMLElement, { value: callback } as any)
+    Resize.inserted(el as HTMLElement, { value: callback } as any, { context: { _uid: 1 } } as any)
     expect(callback).toHaveBeenCalled()
     expect(window.addEventListener).toHaveBeenCalledWith('resize', callback, { passive: true })
-    Resize.unbind(el as HTMLElement)
+    Resize.unbind(el as HTMLElement, { value: callback } as any, { context: { _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)
+    Resize.inserted(el as HTMLElement, { value: callback, modifiers: { quiet: true } } as any, { context: { _uid: 1 } } as any)
     expect(callback).not.toHaveBeenCalled()
     expect(window.addEventListener).toHaveBeenCalledWith('resize', callback, { passive: true })
-    Resize.unbind(el as HTMLElement)
+    Resize.unbind(el as HTMLElement, { value: callback, modifiers: { quiet: true } } as any, { context: { _uid: 1 } } as any)
     expect(window.removeEventListener).toHaveBeenCalledWith('resize', callback, { passive: true })
   })
 })

package/src/directives/resize/index.ts

@@ -1,16 +1,19 @@
 import { VNodeDirective } from 'vue/types/vnode'
+import { VNode } from 'vue'
 
 interface ResizeVNodeDirective extends VNodeDirective {
   value?: () => void
   options?: boolean | AddEventListenerOptions
 }
 
-function inserted (el: HTMLElement, binding: ResizeVNodeDirective) {
+function inserted (el: HTMLElement, binding: ResizeVNodeDirective, vnode: VNode) {
   const callback = binding.value!
   const options = binding.options || { passive: true }
 
   window.addEventListener('resize', callback, options)
-  el._onResize = {
+
+  el._onResize = Object(el._onResize)
+  el._onResize![vnode.context!._uid] = {
     callback,
     options,
   }
@@ -20,12 +23,14 @@ function inserted (el: HTMLElement, binding: ResizeVNodeDirective) {
   }
 }
 
-function unbind (el: HTMLElement) {
+function unbind (el: HTMLElement, binding: ResizeVNodeDirective, vnode: VNode) {
   if (!el._onResize) return
 
-  const { callback, options } = el._onResize
+  const { callback, options } = el._onResize[vnode.context!._uid]
+
   window.removeEventListener('resize', callback, options)
-  delete el._onResize
+
+  delete el._onResize[vnode.context!._uid]
 }
 
 export const Resize = {

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

@@ -12,7 +12,7 @@ describe('scroll.ts', () => {
   let vnode
 
   beforeEach(() => {
-    vnode = null as any
+    vnode = { context: { _uid: 1 } } as any
     options = { passive: true }
     binding = {
       value: jest.fn(),
@@ -32,7 +32,7 @@ describe('scroll.ts', () => {
     inserted(el, binding, vnode, vnode)
 
     expect(spyOnWindowAddListener).toHaveBeenCalledWith('scroll', binding.value, options)
-    expect(el._onScroll).toEqual({
+    expect(el._onScroll[1]).toEqual({
       handler: binding.value,
       options,
       target: window,
@@ -41,7 +41,7 @@ describe('scroll.ts', () => {
     unbind(el, binding, vnode, vnode)
 
     expect(spyOnWindowRemoveListener).toHaveBeenCalledWith('scroll', binding.value, options)
-    expect(el._onScroll).toBeUndefined()
+    expect(el._onScroll[1]).toBeUndefined()
   })
 
   it('should work with a provided valid querySelector string', () => {
@@ -66,7 +66,7 @@ describe('scroll.ts', () => {
     inserted(el, binding, vnode, vnode)
 
     expect(spyOnFooAddListener).toHaveBeenCalledWith('scroll', binding.value, options)
-    expect(el._onScroll).toEqual({
+    expect(el._onScroll[1]).toEqual({
       handler: binding.value,
       options,
       target,
@@ -75,7 +75,7 @@ describe('scroll.ts', () => {
     unbind(el, binding, vnode, vnode)
 
     expect(spyOnFooRemoveListener).toHaveBeenCalledWith('scroll', binding.value, options)
-    expect(el._onScroll).toBeUndefined()
+    expect(el._onScroll[1]).toBeUndefined()
 
     document.body.removeChild(target)
   })
@@ -86,7 +86,7 @@ describe('scroll.ts', () => {
     inserted(el, binding, vnode, vnode)
 
     expect(el.addEventListener).toHaveBeenCalledWith('scroll', binding.value, options)
-    expect(el._onScroll).toEqual({
+    expect(el._onScroll[1]).toEqual({
       handler: binding.value,
       options,
       target: undefined,
@@ -95,7 +95,7 @@ describe('scroll.ts', () => {
     unbind(el, binding, vnode, vnode)
 
     expect(el.removeEventListener).toHaveBeenCalledWith('scroll', binding.value, options)
-    expect(el._onScroll).toBeUndefined()
+    expect(el._onScroll[1]).toBeUndefined()
   })
 
   it('should not remove listeners if no _onScroll property present', () => {
@@ -111,7 +111,7 @@ describe('scroll.ts', () => {
 
     inserted(el, binding, vnode, vnode)
 
-    expect(el._onScroll).toEqual({
+    expect(el._onScroll[1]).toEqual({
       handler,
       target: window,
       options: { passive: true },
@@ -121,7 +121,7 @@ describe('scroll.ts', () => {
 
     inserted(el, binding, vnode, vnode)
 
-    expect(el._onScroll).toEqual({
+    expect(el._onScroll[1]).toEqual({
       handler,
       target: window,
       options: { passive: false },

package/src/directives/scroll/index.ts

@@ -1,5 +1,5 @@
 import { VNodeDirective } from 'vue/types/vnode'
-import { DirectiveOptions } from 'vue'
+import { DirectiveOptions, VNode } from 'vue'
 
 interface ScrollVNodeDirective extends Omit<VNodeDirective, 'modifiers'> {
   value: EventListener | {
@@ -11,7 +11,7 @@ interface ScrollVNodeDirective extends Omit<VNodeDirective, 'modifiers'> {
   }
 }
 
-function inserted (el: HTMLElement, binding: ScrollVNodeDirective) {
+function inserted (el: HTMLElement, binding: ScrollVNodeDirective, vnode: VNode) {
   const { self = false } = binding.modifiers || {}
   const value = binding.value
   const options = (typeof value === 'object' && value.options) || { passive: true }
@@ -27,7 +27,8 @@ function inserted (el: HTMLElement, binding: ScrollVNodeDirective) {
 
   target.addEventListener('scroll', handler, options)
 
-  el._onScroll = {
+  el._onScroll = Object(el._onScroll)
+  el._onScroll![vnode.context!._uid] = {
     handler,
     options,
     // Don't reference self
@@ -35,13 +36,13 @@ function inserted (el: HTMLElement, binding: ScrollVNodeDirective) {
   }
 }
 
-function unbind (el: HTMLElement) {
-  if (!el._onScroll) return
+function unbind (el: HTMLElement, binding: ScrollVNodeDirective, vnode: VNode) {
+  if (!el._onScroll?.[vnode.context!._uid]) return
 
-  const { handler, options, target = el } = el._onScroll
+  const { handler, options, target = el } = el._onScroll[vnode.context!._uid]
 
   target.removeEventListener('scroll', handler, options)
-  delete el._onScroll
+  delete el._onScroll[vnode.context!._uid]
 }
 
 export const Scroll = {

package/src/globals.d.ts

@@ -29,15 +29,14 @@ declare global {
   }
 
   interface HTMLElement {
-    _clickOutside?: {
-      lastMousedownWasOutside: boolean
+    _clickOutside?: Record<number, {
       onClick: EventListener
       onMousedown: EventListener
-    }
-    _onResize?: {
+    }> & { lastMousedownWasOutside: boolean }
+    _onResize?: Record<number, {
       callback: () => void
       options?: boolean | AddEventListenerOptions
-    }
+    }>
     _ripple?: {
       enabled?: boolean
       centered?: boolean
@@ -48,18 +47,18 @@ declare global {
       showTimer?: number
       showTimerCommit?: (() => void) | null
     }
-    _observe?: {
+    _observe?: Record<number, {
       init: boolean
       observer: IntersectionObserver
-    }
-    _mutate?: {
+    }>
+    _mutate?: Record<number, {
       observer: MutationObserver
-    }
-    _onScroll?: {
+    }>
+    _onScroll?: Record<number, {
       handler: EventListenerOrEventListenerObject
       options: boolean | AddEventListenerOptions
       target?: EventTarget
-    }
+    }>
     _touchHandlers?: {
       [_uid: number]: TouchStoredHandlers
     }
@@ -70,7 +69,6 @@ declare global {
       width: string
       height: string
     }
-    _initialDisplay?: [string, string]
   }
 
   interface WheelEvent {

package/src/mixins/intersectable/index.ts

@@ -15,11 +15,14 @@ export default function intersectable (options: { onVisible: string[] }) {
       Intersect.inserted(this.$el as HTMLElement, {
         name: 'intersect',
         value: this.onObserve,
-      })
+      }, this.$vnode)
     },
 
     destroyed () {
-      Intersect.unbind(this.$el as HTMLElement)
+      Intersect.unbind(this.$el as HTMLElement, {
+        name: 'intersect',
+        value: this.onObserve,
+      }, this.$vnode)
     },
 
     methods: {

package/src/mixins/overlayable/index.ts

@@ -156,20 +156,32 @@ export default Vue.extend<Vue & Toggleable & Stackable & options>().extend({
       if (!el || el.nodeType !== Node.ELEMENT_NODE) return false
 
       const style = window.getComputedStyle(el)
-      return ['auto', 'scroll'].includes(style.overflowY!) && el.scrollHeight > el.clientHeight
+      return ((['auto', 'scroll'].includes(style.overflowY!) || el.tagName === 'SELECT') && el.scrollHeight > el.clientHeight) ||
+      ((['auto', 'scroll'].includes(style.overflowX!)) && el.scrollWidth > el.clientWidth)
     },
-    shouldScroll (el: Element, delta: number): boolean {
+    shouldScroll (el: Element, e: WheelEvent): boolean {
       if (el.hasAttribute('data-app')) return false
 
-      const alreadyAtTop = el.scrollTop === 0
-      const alreadyAtBottom = el.scrollTop + el.clientHeight === el.scrollHeight
+      const dir = e.shiftKey || e.deltaX ? 'x' : 'y'
+      const delta = dir === 'y' ? e.deltaY : e.deltaX || e.deltaY
+
+      let alreadyAtStart: boolean
+      let alreadyAtEnd: boolean
+      if (dir === 'y') {
+        alreadyAtStart = el.scrollTop === 0
+        alreadyAtEnd = el.scrollTop + el.clientHeight === el.scrollHeight
+      } else {
+        alreadyAtStart = el.scrollLeft === 0
+        alreadyAtEnd = el.scrollLeft + el.clientWidth === el.scrollWidth
+      }
+
       const scrollingUp = delta < 0
       const scrollingDown = delta > 0
 
-      if (!alreadyAtTop && scrollingUp) return true
-      if (!alreadyAtBottom && scrollingDown) return true
-      if ((alreadyAtTop || alreadyAtBottom)) {
-        return this.shouldScroll(el.parentNode as Element, delta)
+      if (!alreadyAtStart && scrollingUp) return true
+      if (!alreadyAtEnd && scrollingDown) return true
+      if ((alreadyAtStart || alreadyAtEnd)) {
+        return this.shouldScroll(el.parentNode as Element, e)
       }
 
       return false
@@ -185,14 +197,13 @@ export default Vue.extend<Vue & Toggleable & Stackable & options>().extend({
     },
     checkPath (e: WheelEvent) {
       const path = composedPath(e)
-      const delta = e.deltaY
 
       if (e.type === 'keydown' && path[0] === document.body) {
         const dialog = this.$refs.dialog
         // getSelection returns null in firefox in some edge cases, can be ignored
         const selected = window.getSelection()!.anchorNode as Element
         if (dialog && this.hasScrollbar(dialog) && this.isInside(selected, dialog)) {
-          return !this.shouldScroll(dialog, delta)
+          return !this.shouldScroll(dialog, e)
         }
         return true
       }
@@ -204,7 +215,7 @@ export default Vue.extend<Vue & Toggleable & Stackable & options>().extend({
         if (el === document.documentElement) return true
         if (el === this.$refs.content) return true
 
-        if (this.hasScrollbar(el as Element)) return !this.shouldScroll(el as Element, delta)
+        if (this.hasScrollbar(el as Element)) return !this.shouldScroll(el as Element, e)
       }
 
       return true