vuetify 2.5.9 → 2.5.13

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
     }

package/src/locale/fr.ts

@@ -63,7 +63,7 @@ export default {
   },
   rating: {
     ariaLabel: {
-      icon: 'Rating {0} of {1}',
+      icon: 'Note de {0} sur {1}',
     },
   },
 }

package/src/mixins/detachable/index.ts

@@ -25,6 +25,14 @@ function validateAttachTarget (val: any) {
   return val.nodeType === Node.ELEMENT_NODE
 }
 
+function removeActivator (activator: VNode[]) {
+  activator.forEach(node => {
+    node.elm &&
+    node.elm.parentNode &&
+    node.elm.parentNode.removeChild(node.elm)
+  })
+}
+
 /* @vue/component */
 export default mixins<options &
   /* eslint-disable indent */
@@ -87,24 +95,33 @@ export default mixins<options &
   },
 
   beforeDestroy () {
-    // IE11 Fix
-    try {
-      if (
-        this.$refs.content &&
-        this.$refs.content.parentNode
-      ) {
-        this.$refs.content.parentNode.removeChild(this.$refs.content)
-      }
+    if (
+      this.$refs.content &&
+      this.$refs.content.parentNode
+    ) {
+      this.$refs.content.parentNode.removeChild(this.$refs.content)
+    }
+  },
 
-      if (this.activatorNode) {
-        const activator = Array.isArray(this.activatorNode) ? this.activatorNode : [this.activatorNode]
-        activator.forEach(node => {
-          node.elm &&
-            node.elm.parentNode &&
-            node.elm.parentNode.removeChild(node.elm)
+  destroyed () {
+    if (this.activatorNode) {
+      const activator = Array.isArray(this.activatorNode) ? this.activatorNode : [this.activatorNode]
+      if (this.$el.isConnected) {
+        // Component has been destroyed but the element still exists, we must be in a transition
+        // Wait for the transition to finish before cleaning up the detached activator
+        const observer = new MutationObserver(list => {
+          if (
+            list.some(record => Array.from(record.removedNodes).includes(this.$el))
+          ) {
+            observer.disconnect()
+            removeActivator(activator)
+          }
         })
+        observer.observe(this.$el.parentNode!, { subtree: false, childList: true })
+      } else {
+        removeActivator(activator)
       }
-    } catch (e) { console.log(e) } /* eslint-disable-line no-console */
+    }
   },
 
   methods: {

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

@@ -1,6 +1,6 @@
 // Mixins
-import Positionable from '../positionable'
 import Stackable from '../stackable'
+import { factory as positionableFactory } from '../positionable'
 import Activatable from '../activatable'
 import Detachable from '../detachable'
 
@@ -13,7 +13,7 @@ import { VNode } from 'vue'
 
 const baseMixins = mixins(
   Stackable,
-  Positionable,
+  positionableFactory(['top', 'right', 'bottom', 'left', 'absolute']),
   Activatable,
   Detachable,
 )
@@ -205,8 +205,8 @@ export default baseMixins.extend<options>().extend({
   methods: {
     absolutePosition () {
       return {
-        offsetTop: 0,
-        offsetLeft: 0,
+        offsetTop: this.positionY || this.absoluteY,
+        offsetLeft: this.positionX || this.absoluteX,
         scrollHeight: 0,
         top: this.positionY || this.absoluteY,
         bottom: this.positionY || this.absoluteY,

package/src/mixins/overlayable/index.ts

@@ -7,6 +7,7 @@ import {
   addOnceEventListener,
   addPassiveEventListener,
   getZIndex,
+  composedPath,
 } from '../../util/helpers'
 
 // Types
@@ -155,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
@@ -183,15 +196,14 @@ export default Vue.extend<Vue & Toggleable & Stackable & options>().extend({
       }
     },
     checkPath (e: WheelEvent) {
-      const path = e.path || this.composedPath(e)
-      const delta = e.deltaY
+      const path = composedPath(e)
 
       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
       }
@@ -203,34 +215,11 @@ 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
     },
-    /**
-     * Polyfill for Event.prototype.composedPath
-     */
-    composedPath (e: WheelEvent): EventTarget[] {
-      if (e.composedPath) return e.composedPath()
-
-      const path = []
-      let el = e.target as Element
-
-      while (el) {
-        path.push(el)
-
-        if (el.tagName === 'HTML') {
-          path.push(document)
-          path.push(window)
-
-          return path
-        }
-
-        el = el.parentElement!
-      }
-      return path
-    },
     hideScroll () {
       if (this.$vuetify.breakpoint.smAndDown) {
         document.documentElement!.classList.add('overflow-y-hidden')

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

@@ -1,12 +1,50 @@
 import Routable from '../'
-import { mount } from '@vue/test-utils'
+import { createLocalVue, mount, Wrapper } from '@vue/test-utils'
+import Router from 'vue-router'
+import Vue, { VNode } from 'vue'
 
 describe('routable.ts', () => {
+  let mountFunction: (options?: object) => Wrapper<Vue>
+  let router: Router
+  let localVue: typeof Vue
+
+  beforeEach(() => {
+    router = new Router()
+    localVue = createLocalVue()
+    localVue.use(Router)
+
+    mountFunction = (options = {}) => {
+      return mount({
+        mixins: [Routable],
+        props: {
+          activeClass: {
+            default: 'active',
+          },
+          exactActiveClass: {
+            default: 'exact-active',
+          },
+        },
+        render (h): VNode {
+          const { tag, data } = this.generateRouteLink()
+
+          data.attrs = {
+            ...data.attrs,
+          }
+          data.on = {
+            ...data.on,
+          }
+
+          return h(tag, data, this.$slots.default)
+        },
+      }, {
+        localVue,
+        router,
+        ...options,
+      })
+    }
+  })
   it('should generate exact route link with to="/" and undefined exact', async () => {
-    const wrapper = mount({
-      mixins: [Routable],
-      render: h => h('div'),
-    }, {
+    const wrapper = mountFunction({
       propsData: {
         to: '/',
       },
@@ -14,4 +52,43 @@ describe('routable.ts', () => {
 
     expect(wrapper.vm.generateRouteLink().data.props.exact).toBe(true)
   })
+
+  it('should reflect the link state to isActive', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        to: '/',
+      },
+    })
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.isActive).toBe(true)
+
+    // Simulate route changing
+    wrapper.vm.$router.push('/foo')
+
+    await wrapper.vm.$nextTick()
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.isActive).toBe(false)
+
+    wrapper.vm.$router.push('/')
+    await wrapper.vm.$nextTick()
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.isActive).toBe(true)
+  })
+
+  it('should reflect the link state to isActive if not exact', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        to: '/foo',
+      },
+    })
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.isActive).toBe(false)
+
+    // Simulate route changing
+    wrapper.vm.$router.push('/foo')
+
+    await wrapper.vm.$nextTick()
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.isActive).toBe(true)
+  })
 })

package/src/mixins/routable/index.ts

@@ -75,6 +75,10 @@ export default Vue.extend({
     $route: 'onRouteChange',
   },
 
+  mounted () {
+    this.onRouteChange()
+  },
+
   methods: {
     click (e: MouseEvent): void {
       this.$emit('click', e)
@@ -140,16 +144,19 @@ export default Vue.extend({
     onRouteChange () {
       if (!this.to || !this.$refs.link || !this.$route) return
       const activeClass = `${this.activeClass} ${this.proxyClass || ''}`.trim()
+      const exactActiveClass = `${this.exactActiveClass} ${this.proxyClass || ''}`.trim() || activeClass
 
-      const path = `_vnode.data.class.${activeClass}`
+      const path = '_vnode.data.class.' + (this.exact ? exactActiveClass : activeClass)
 
       this.$nextTick(() => {
         /* istanbul ignore else */
-        if (getObjectValueByPath(this.$refs.link, path)) {
+        if (!getObjectValueByPath(this.$refs.link, path) === this.isActive) {
           this.toggle()
         }
       })
     },
-    toggle: () => { /* noop */ },
+    toggle () {
+      this.isActive = !this.isActive
+    },
   },
 })

package/src/services/goto/index.ts

@@ -65,7 +65,12 @@ export default function goTo (
     container.scrollTop = Math.floor(startLocation + (targetLocation - startLocation) * ease(progress))
 
     const clientHeight = container === document.body ? document.documentElement.clientHeight : container.clientHeight
-    if (progress === 1 || clientHeight + container.scrollTop === container.scrollHeight) {
+    const reachBottom = clientHeight + container.scrollTop >= container.scrollHeight
+    if (
+      progress === 1 ||
+      // Need to go lower but reach bottom
+      (targetLocation > container.scrollTop && reachBottom)
+    ) {
       return resolve(targetLocation)
     }
 

package/src/styles/components/_selection-controls.sass

@@ -1,12 +1,5 @@
 @import '../styles.sass'
 
-// Theme
-+theme(v-input--selection-controls) using ($material)
-  &.v-input--is-disabled:not(.v-input--indeterminate)
-    .v-icon
-      // needed for helper override
-      color: map-deep-get($material, 'selection-controls', 'disabled') !important
-
 .v-input--selection-controls
   margin-top: $input-top-spacing
   padding-top: 4px
@@ -112,6 +105,10 @@
       background: currentColor
       transform: scale(1.2)
 
+  &.v-input--is-disabled:not(.v-input--indeterminate)
+    .v-icon
+      color: inherit
+
 .v-input--selection-controls__input:hover
   .v-input--selection-controls__ripple:before
     background: currentColor