vuetify 2.5.4 → 2.5.8

package/src/components/VSelect/VSelect.ts

@@ -455,7 +455,7 @@ export default baseMixins.extend<options>().extend({
           'aria-readonly': String(this.isReadonly),
           'aria-activedescendant': getObjectValueByPath(this.$refs.menu, 'activeTile.id'),
           autocomplete: getObjectValueByPath(input.data!, 'attrs.autocomplete', 'off'),
-          placeholder: (!this.isDirty && (this.isFocused || !this.hasLabel)) ? this.placeholder : undefined,
+          placeholder: (!this.isDirty && (this.persistentPlaceholder || this.isFocused || !this.hasLabel)) ? this.placeholder : undefined,
         },
         on: { keypress: this.onKeyPress },
       })
@@ -658,12 +658,6 @@ export default baseMixins.extend<options>().extend({
       const keyCode = e.keyCode
       const menu = this.$refs.menu
 
-      // If enter, space, open menu
-      if ([
-        keyCodes.enter,
-        keyCodes.space,
-      ].includes(keyCode)) this.activateMenu()
-
       this.$emit('keydown', e)
 
       if (!menu) return
@@ -677,6 +671,12 @@ export default baseMixins.extend<options>().extend({
         })
       }
 
+      // If enter, space, open menu
+      if ([
+        keyCodes.enter,
+        keyCodes.space,
+      ].includes(keyCode)) this.activateMenu()
+
       // If menu is not active, up/down/home/end can do
       // one of 2 things. If multiple, opens the
       // menu, if not, will cycle through all
@@ -709,6 +709,7 @@ export default baseMixins.extend<options>().extend({
       if (!menu || !this.isDirty) return
 
       // When menu opens, set index of first active item
+      this.$refs.menu.getTiles()
       for (let i = 0; i < menu.tiles.length; i++) {
         if (menu.tiles[i].getAttribute('aria-selected') === 'true') {
           this.setMenuIndex(i)
@@ -839,11 +840,6 @@ export default baseMixins.extend<options>().extend({
             (this.$refs.menu as { [key: string]: any }).updateDimensions()
         })
 
-        // We only need to reset list index for multiple
-        // to keep highlight when an item is toggled
-        // on and off
-        if (!this.multiple) return
-
         const listIndex = this.getMenuIndex()
 
         this.setMenuIndex(-1)

package/src/components/VSlider/VSlider.sass

@@ -69,6 +69,15 @@
     transform: scale(0.1)
     pointer-events: none
 
+  &::after
+    content: ''
+    width: $slider-thumb-touch-size
+    height: $slider-thumb-touch-size
+    position: absolute
+    top: 50%
+    left: 50%
+    transform: translate(-50%, -50%)
+
 .v-slider__ticks-container
   position: absolute
 

package/src/components/VSlider/VSlider.ts

@@ -98,6 +98,7 @@ export default mixins<options &
     isFocused: false,
     isActive: false,
     noClick: false, // Prevent click event if dragging took place, hack for #7915
+    startOffset: 0,
   }),
 
   computed: {
@@ -448,24 +449,30 @@ export default mixins<options &
         [direction]: `${value}%`,
       }
     },
-    onSliderMouseDown (e: MouseEvent) {
+    onSliderMouseDown (e: MouseEvent | TouchEvent) {
       e.preventDefault()
 
       this.oldValue = this.internalValue
       this.isActive = true
 
-      const mouseUpOptions = passiveSupported ? { passive: true, capture: true } : true
-      const mouseMoveOptions = passiveSupported ? { passive: true } : false
-
       if ((e.target as Element)?.matches('.v-slider__thumb-container, .v-slider__thumb-container *')) {
         this.thumbPressed = true
+        const domRect = (e.target as Element).getBoundingClientRect()
+        const touch = 'touches' in e ? e.touches[0] : e
+        this.startOffset = this.vertical
+          ? touch.clientY - (domRect.top + domRect.height / 2)
+          : touch.clientX - (domRect.left + domRect.width / 2)
       } else {
+        this.startOffset = 0
         window.clearTimeout(this.mouseTimeout)
         this.mouseTimeout = window.setTimeout(() => {
           this.thumbPressed = true
         }, 300)
       }
 
+      const mouseUpOptions = passiveSupported ? { passive: true, capture: true } : true
+      const mouseMoveOptions = passiveSupported ? { passive: true } : false
+
       const isTouchEvent = 'touches' in e
 
       this.onMouseMove(e)
@@ -491,7 +498,7 @@ export default mixins<options &
 
       this.isActive = false
     },
-    onMouseMove (e: MouseEvent) {
+    onMouseMove (e: MouseEvent | TouchEvent) {
       if (e.type === 'mousemove') {
         this.thumbPressed = true
       }
@@ -532,7 +539,7 @@ export default mixins<options &
 
       this.$emit('focus', e)
     },
-    parseMouseMove (e: MouseEvent) {
+    parseMouseMove (e: MouseEvent | TouchEvent) {
       const start = this.vertical ? 'top' : 'left'
       const length = this.vertical ? 'height' : 'width'
       const click = this.vertical ? 'clientY' : 'clientX'
@@ -540,11 +547,11 @@ export default mixins<options &
       const {
         [start]: trackStart,
         [length]: trackLength,
-      } = this.$refs.track.getBoundingClientRect() as any
-      const clickOffset = 'touches' in e ? (e as any).touches[0][click] : e[click] // Can we get rid of any here?
+      } = this.$refs.track.getBoundingClientRect()
+      const clickOffset = 'touches' in e ? e.touches[0][click] : e[click]
 
       // It is possible for left to be NaN, force to number
-      let clickPos = Math.min(Math.max((clickOffset - trackStart) / trackLength, 0), 1) || 0
+      let clickPos = Math.min(Math.max((clickOffset - trackStart - this.startOffset) / trackLength, 0), 1) || 0
 
       if (this.vertical) clickPos = 1 - clickPos
       if (this.$vuetify.rtl) clickPos = 1 - clickPos

package/src/components/VSlider/_variables.scss

@@ -16,6 +16,7 @@ $slider-thumb-label-height: 32px !default;
 $slider-thumb-label-transition: .3s map-get($transition, 'fast-in-fast-out') !default;
 $slider-thumb-label-width: 32px !default;
 $slider-thumb-size: 12px !default;
+$slider-thumb-touch-size: 42px !default;
 $slider-tick-border-radius: 0 !default;
 $slider-track-border-radius: 0 !default;
 $slider-track-width: 2px !default;

package/src/components/VSnackbar/VSnackbar.sass

@@ -101,7 +101,7 @@
     left: auto
 
   &:not(.v-snack--has-background) &__wrapper
-    box-shadow: none !important
+    box-shadow: none
 
   &--bottom
     top: auto

package/src/components/VSnackbar/VSnackbar.ts

@@ -173,8 +173,8 @@ export default mixins(
           value: this.isActive,
         }],
         on: {
-          mouseenter: () => window.clearTimeout(this.activeTimeout),
-          mouseleave: this.setTimeout,
+          pointerenter: () => window.clearTimeout(this.activeTimeout),
+          pointerleave: this.setTimeout,
         },
       })
 

package/src/components/VTabs/_variables.scss

@@ -9,8 +9,6 @@ $tabs-bar-height: 48px !default;
 $tabs-icons-and-text-bar-height: 72px !default;
 $tabs-icons-and-text-first-tab-margin-bottom: 6px !default;
 $tabs-item-align-with-title-margin: 42px !default;
-$tabs-item-focus-opacity: 0.20 !default;
-$tabs-item-hover-opacity: 0.16 !default;
 $tabs-item-letter-spacing: .0892857143em !default;
 $tabs-item-max-width: 360px !default;
 $tabs-item-min-width: 90px !default;

package/src/components/VTextField/VTextField.sass

@@ -403,8 +403,8 @@
       position: absolute
       right: 0
       top: $text-field-outlined-fieldset-top
-      transition-duration: 0.3s
-      transition-property: color, border-width
+      transition-duration: 0.15s
+      transition-property: color
       transition-timing-function: map-get($transition, 'fast-in-fast-out')
 
       +ltr()

package/src/components/VTextField/VTextField.ts

@@ -373,6 +373,7 @@ export default baseMixins.extend<options>().extend({
       const width = !this.singleLine && (this.labelValue || this.isDirty) ? this.labelWidth : 0
       const span = this.$createElement('span', {
         domProps: { innerHTML: '&#8203;' },
+        staticClass: 'notranslate',
       })
 
       return this.$createElement('legend', {
@@ -473,7 +474,13 @@ export default baseMixins.extend<options>().extend({
       this.badInput = target.validity && target.validity.badInput
     },
     onKeyDown (e: KeyboardEvent) {
-      if (e.keyCode === keyCodes.enter) this.$emit('change', this.internalValue)
+      if (
+        e.keyCode === keyCodes.enter &&
+        this.lazyValue !== this.initialValue
+      ) {
+        this.initialValue = this.lazyValue
+        this.$emit('change', this.initialValue)
+      }
 
       this.$emit('keydown', e)
     },

package/src/components/VTextField/__tests__/VTextField.spec.ts

@@ -628,19 +628,26 @@ describe('VTextField.ts', () => { // eslint-disable-line max-statements
     expect(input.element.id).toBe('foo')
   })
 
-  it('should fire change event when pressing enter', () => {
+  it('should fire change event when pressing enter and value has changed', () => {
     const wrapper = mountFunction()
     const input = wrapper.find('input')
     const change = jest.fn()
+    const el = input.element as HTMLInputElement
 
     wrapper.vm.$on('change', change)
 
     input.trigger('focus')
-    input.element.value = 'foo'
+    el.value = 'foo'
     input.trigger('input')
     input.trigger('keydown.enter')
     input.trigger('keydown.enter')
 
+    expect(change).toHaveBeenCalledTimes(1)
+
+    el.value = 'foobar'
+    input.trigger('input')
+    input.trigger('keydown.enter')
+
     expect(change).toHaveBeenCalledTimes(2)
   })
 

package/src/components/VTimePicker/__tests__/VTimePicker.spec.ts

@@ -44,7 +44,7 @@ describe('VTimePicker.ts', () => {
     })
 
     it('should render landscape component' + useSecondsDesc, async () => {
-      var wrapper = mountFunction({
+      const wrapper = mountFunction({
         propsData: {
           value: '09:12:34',
           landscape: true,
@@ -57,7 +57,7 @@ describe('VTimePicker.ts', () => {
     })
 
     it('should render disabled component' + useSecondsDesc, async () => {
-      var wrapper = mountFunction({
+      const wrapper = mountFunction({
         propsData: {
           disabled: true,
           value: '09:12:34',
@@ -70,7 +70,7 @@ describe('VTimePicker.ts', () => {
     })
 
     it('should render flat component' + useSecondsDesc, async () => {
-      var wrapper = mountFunction({
+      const wrapper = mountFunction({
         propsData: {
           flat: true,
           value: '09:12:34',
@@ -83,7 +83,7 @@ describe('VTimePicker.ts', () => {
     })
 
     it('should render component with elevation' + useSecondsDesc, async () => {
-      var wrapper = mountFunction({
+      const wrapper = mountFunction({
         propsData: {
           elevation: 15,
           value: '09:12:34',

package/src/components/VTreeview/VTreeview.ts

@@ -201,7 +201,7 @@ export default mixins(
       for (let i = 0; i < items.length; i++) {
         const item = items[i]
         const key = getObjectValueByPath(item, this.itemKey)
-        const children = getObjectValueByPath(item, this.itemChildren, [])
+        const children = getObjectValueByPath(item, this.itemChildren) ?? []
         const oldNode = this.nodes.hasOwnProperty(key) ? this.nodes[key] : {
           isSelected: false, isIndeterminate: false, isActive: false, isOpen: false, vnode: null,
         } as NodeState

package/src/mixins/overlayable/index.ts

@@ -108,7 +108,8 @@ export default Vue.extend<Vue & Toggleable & Stackable & options>().extend({
             !this.overlay ||
             !this.overlay.$el ||
             !this.overlay.$el.parentNode ||
-            this.overlay.value
+            this.overlay.value ||
+            this.isActive
           ) return
 
           this.overlay.$el.parentNode.removeChild(this.overlay.$el)
@@ -156,9 +157,21 @@ export default Vue.extend<Vue & Toggleable & Stackable & options>().extend({
       const style = window.getComputedStyle(el)
       return ['auto', 'scroll'].includes(style.overflowY!) && el.scrollHeight > el.clientHeight
     },
-    shouldScroll (el: Element, delta: number) {
-      if (el.scrollTop === 0 && delta < 0) return true
-      return el.scrollTop + el.clientHeight === el.scrollHeight && delta > 0
+    shouldScroll (el: Element, delta: number): boolean {
+      if (el.hasAttribute('data-app')) return false
+
+      const alreadyAtTop = el.scrollTop === 0
+      const alreadyAtBottom = el.scrollTop + el.clientHeight === el.scrollHeight
+      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)
+      }
+
+      return false
     },
     isInside (el: Element, parent: Element): boolean {
       if (el === parent) {
@@ -178,7 +191,7 @@ export default Vue.extend<Vue & Toggleable & Stackable & options>().extend({
         // 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, delta)
         }
         return true
       }
@@ -190,7 +203,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, delta)
       }
 
       return true

package/src/mixins/routable/index.ts

@@ -21,6 +21,7 @@ export default Vue.extend({
       type: Boolean as PropType<boolean | undefined>,
       default: undefined,
     },
+    exactPath: Boolean,
     exactActiveClass: String,
     link: Boolean,
     href: [String, Object],
@@ -120,6 +121,7 @@ export default Vue.extend({
         Object.assign(data.props, {
           to: this.to,
           exact,
+          exactPath: this.exactPath,
           activeClass,
           exactActiveClass,
           append: this.append,

package/src/services/goto/index.ts

@@ -15,7 +15,7 @@ import { VuetifyServiceContract } from 'vuetify/types/services'
 
 export default function goTo (
   _target: VuetifyGoToTarget,
-  _settings: Partial<GoToOptions> = {}
+  _settings: GoToOptions = {}
 ): Promise<number> {
   const settings: GoToOptions = {
     container: (document.scrollingElement as HTMLElement | null) || document.body || document.documentElement,

package/src/styles/tools/_elevation.sass

@@ -3,4 +3,3 @@
 
 @mixin elevationTransition($duration: 280ms, $easing: cubic-bezier(0.4, 0, 0.2, 1))
   transition: box-shadow $duration $easing
-  will-change: box-shadow

package/src/util/helpers.ts

@@ -37,7 +37,7 @@ export function addOnceEventListener (
   cb: (event: Event) => void,
   options: boolean | AddEventListenerOptions = false
 ): void {
-  var once = (event: Event) => {
+  const once = (event: Event) => {
     cb(event)
     el.removeEventListener(eventName, once, options)
   }
@@ -288,7 +288,7 @@ export function groupItems<T extends any = any> (
   const key = groupBy[0]
   const groups: ItemGroup<T>[] = []
   let current
-  for (var i = 0; i < items.length; i++) {
+  for (let i = 0; i < items.length; i++) {
     const item = items[i]
     const val = getObjectValueByPath(item, key, null)
     if (current !== val) {
@@ -339,6 +339,11 @@ export function sortItems<T extends any = any> (
         continue
       }
 
+      // Dates should be compared numerically
+      if (sortA instanceof Date && sortB instanceof Date) {
+        return sortA.getTime() - sortB.getTime()
+      }
+
       [sortA, sortB] = [sortA, sortB].map(s => (s || '').toString().toLocaleLowerCase())
 
       if (sortA !== sortB) {

package/types/index.d.ts

@@ -16,7 +16,7 @@ import {
 } from './services/presets'
 
 // Service Options
-import { GoToOptions } from './services/goto'
+import { GoToOptions, VuetifyGoToTarget } from './services/goto'
 
 export default class Vuetify {
   constructor (preset?: Partial<UserVuetifyPreset>)
@@ -48,7 +48,7 @@ export interface VuetifyUseOptions {
 
 export interface Framework {
   readonly breakpoint: Breakpoint
-  readonly goTo: <T extends string | number | HTMLElement | Vue>(target: T, options?: GoToOptions) => Promise<T>
+  readonly goTo: (target: VuetifyGoToTarget, options?: GoToOptions) => Promise<number>
   application: Application
   theme: Theme
   icons: Icons

package/types/lib.d.ts

@@ -368,3 +368,9 @@ declare module 'vuetify/lib/directives' {
     Touch,
   }
 }
+
+declare module 'vuetify/lib/services/goto' {
+  import { GoToOptions, VuetifyGoToTarget } from 'vuetify/types/services/goto'
+
+  export default function goTo(target: VuetifyGoToTarget, options?: Partial<GoToOptions>): Promise<number>
+}

package/types/services/goto.d.ts

@@ -1,7 +1,7 @@
 // Types
 import Vue from 'vue'
 
-type VuetifyGoToTarget = number | string | HTMLElement | Vue
+export type VuetifyGoToTarget = number | string | HTMLElement | Vue
 
 export type VuetifyGoToEasing =
   ((t: number) => number) |
@@ -26,3 +26,5 @@ export interface GoToOptions {
   easing?: VuetifyGoToEasing
   appOffset?: boolean
 }
+
+export default function goTo(target: VuetifyGoToTarget, options?: GoToOptions): Promise<number>