vuetify 2.5.13 → 2.6.1

package/src/components/VStepper/VStepper.sass

@@ -137,9 +137,8 @@
           color: inherit
 
   &__label
-    align-items: flex-start
-    display: flex
-    flex-direction: column
+    display: block
+    flex-grow: 1
     line-height: $stepper-label-line-height
 
     +ltr()
@@ -149,6 +148,7 @@
       text-align: right
 
     small
+      display: block
       font-size: $stepper-label-small-font-size
       font-weight: $stepper-label-small-font-weight
       text-shadow: none
@@ -219,7 +219,7 @@
       flex-basis: $stepper-alt-labels-flex-basis
 
       small
-        align-self: center
+        text-align: center
 
     .v-stepper__step__step
       margin-bottom: $stepper-alt-labels-step-step-margin-bottom

package/src/components/VTabs/VTab.ts

@@ -11,6 +11,9 @@ import { ExtractVue } from './../../util/mixins'
 // Types
 import { VNode } from 'vue/types'
 
+// Components
+import VTabsBar from '../VTabs/VTabsBar'
+
 const baseMixins = mixins(
   Routable,
   // Must be after routable
@@ -19,8 +22,11 @@ const baseMixins = mixins(
   Themeable
 )
 
+type VTabBarInstance = InstanceType<typeof VTabsBar>
+
 interface options extends ExtractVue<typeof baseMixins> {
   $el: HTMLElement
+  tabsBar: VTabBarInstance
 }
 
 export default baseMixins.extend<options>().extend(
@@ -49,7 +55,9 @@ export default baseMixins.extend<options>().extend(
       }
     },
     value (): any {
-      let to = this.to || this.href || ''
+      let to = this.to || this.href
+
+      if (to == null) return to
 
       if (this.$router &&
         this.to === Object(this.to)
@@ -92,7 +100,7 @@ export default baseMixins.extend<options>().extend(
     },
     toggle () {
       // VItemGroup treats a change event as a click
-      if (!this.isActive) {
+      if (!this.isActive || (!this.tabsBar.mandatory && !this.to)) {
         this.$emit('change')
       }
     },

package/src/components/VTextField/VTextField.ts

@@ -231,10 +231,15 @@ export default baseMixins.extend<options>().extend({
   mounted () {
     // #11533
     this.$watch(() => this.labelValue, this.setLabelWidth)
-
     this.autofocus && this.tryAutofocus()
-
-    requestAnimationFrame(() => (this.isBooted = true))
+    requestAnimationFrame(() => {
+      this.isBooted = true
+      requestAnimationFrame(() => {
+        if (!this.isIntersecting) {
+          this.onResize()
+        }
+      })
+    })
   },
 
   methods: {

package/src/components/VTooltip/VTooltip.sass

@@ -17,9 +17,12 @@
     position: absolute
     text-transform: initial
     width: auto
-    opacity: 1
+    opacity: 0
     pointer-events: none
 
+    &.menuable__content__active
+      opacity: $tooltip-opacity
+
     &--fixed
       position: fixed
 

package/src/components/VTooltip/VTooltip.ts

@@ -125,7 +125,6 @@ export default mixins(Colorable, Delayable, Dependent, Menuable, Toggleable).ext
         left: this.calculatedLeft,
         maxWidth: convertToUnit(this.maxWidth),
         minWidth: convertToUnit(this.minWidth),
-        opacity: this.isActive ? 0.9 : 0,
         top: this.calculatedTop,
         zIndex: this.zIndex || this.activeZIndex,
       }

package/src/components/VTooltip/_variables.scss

@@ -2,6 +2,7 @@
 
 $tooltip-background-color: rgba(map-get($grey, 'darken-2'), 0.9) !default;
 $tooltip-text-color: map-get($shades, 'white') !default;
+$tooltip-opacity: .9 !default;
 $tooltip-border-radius: $border-radius-root !default;
 $tooltip-font-size: 14px !default;
 $tooltip-transition-timing-function: map-get($transition, 'linear-out-slow-in') !default;

package/src/components/VTreeview/VTreeview.ts

@@ -59,6 +59,7 @@ export default mixins(
       default: () => ([]),
     } as PropValidator<NodeArray>,
     dense: Boolean,
+    disabled: Boolean,
     filter: Function as PropType<TreeviewItemFunction>,
     hoverable: Boolean,
     items: {
@@ -415,7 +416,7 @@ export default mixins(
       }).map(item => {
         const genChild = VTreeviewNode.options.methods.genChild.bind(this)
 
-        return genChild(item, getObjectValueByPath(item, this.itemDisabled))
+        return genChild(item, this.disabled || getObjectValueByPath(item, this.itemDisabled))
       })
       /* istanbul ignore next */
       : this.$slots.default! // TODO: remove type annotation with TS 3.2

package/src/components/VTreeview/VTreeviewNode.ts

@@ -36,6 +36,7 @@ export const VTreeviewNodeProps = {
     type: String,
     default: 'primary',
   },
+  disablePerNode: Boolean,
   expandIcon: {
     type: String,
     default: '$subgroup',
@@ -122,7 +123,7 @@ const VTreeviewNode = baseMixins.extend<options>().extend({
     disabled (): boolean {
       return (
         getObjectValueByPath(this.item, this.itemDisabled) ||
-        (this.parentIsDisabled && this.selectionType === 'leaf')
+        (!this.disablePerNode && (this.parentIsDisabled && this.selectionType === 'leaf'))
       )
     },
     key (): string {
@@ -310,6 +311,7 @@ const VTreeviewNode = baseMixins.extend<options>().extend({
           selectable: this.selectable,
           selectedColor: this.selectedColor,
           color: this.color,
+          disablePerNode: this.disablePerNode,
           expandIcon: this.expandIcon,
           indeterminateIcon: this.indeterminateIcon,
           offIcon: this.offIcon,

package/src/components/index.ts

@@ -43,6 +43,7 @@ export * from './VMain'
 export * from './VMenu'
 export * from './VMessages'
 export * from './VNavigationDrawer'
+export * from './VOtpInput'
 export * from './VOverflowBtn'
 export * from './VOverlay'
 export * from './VPagination'

package/src/directives/click-outside/index.ts

@@ -104,9 +104,9 @@ export const ClickOutside = {
     if (!el._clickOutside) return
 
     handleShadow(el, (app: HTMLElement) => {
-      if (!app || !el._clickOutside) return
+      if (!app || !el._clickOutside?.[vnode.context!._uid]) return
 
-      const { onClick, onMousedown } = el._clickOutside[vnode.context!._uid]
+      const { onClick, onMousedown } = el._clickOutside[vnode.context!._uid]!
 
       app.removeEventListener('click', onClick, true)
       app.removeEventListener('mousedown', onMousedown, true)

package/src/directives/intersect/index.ts

@@ -27,9 +27,9 @@ function inserted (el: HTMLElement, binding: ObserveVNodeDirective, vnode: VNode
     entries: IntersectionObserverEntry[] = [],
     observer: IntersectionObserver
   ) => {
-    if (!el._observe?.[vnode.context!._uid]) return // Just in case, should never fire
+    const _observe = el._observe?.[vnode.context!._uid]
+    if (!_observe) return // Just in case, should never fire
 
-    const _observe = el._observe[vnode.context!._uid]
     const isIntersecting = entries.some(entry => entry.isIntersecting)
 
     // If is not quiet or has already been
@@ -58,10 +58,11 @@ function inserted (el: HTMLElement, binding: ObserveVNodeDirective, vnode: VNode
 }
 
 function unbind (el: HTMLElement, binding: ObserveVNodeDirective, vnode: VNode) {
-  if (!el._observe) return
+  const observe = el._observe?.[vnode.context!._uid]
+  if (!observe) return
 
-  el._observe[vnode.context!._uid].observer.unobserve(el)
-  delete el._observe[vnode.context!._uid]
+  observe.observer.unobserve(el)
+  delete el._observe![vnode.context!._uid]
 }
 
 export const Intersect = {

package/src/directives/mutate/index.ts

@@ -61,10 +61,9 @@ function inserted (el: HTMLElement, binding: MutateVNodeDirective, vnode: VNode)
 }
 
 function unbind (el: HTMLElement, binding: MutateVNodeDirective, vnode: VNode) {
-  /* istanbul ignore if */
-  if (!el._mutate) return
+  if (!el._mutate?.[vnode.context!._uid]) return
 
-  el._mutate[vnode.context!._uid].observer.disconnect()
+  el._mutate[vnode.context!._uid]!.observer.disconnect()
   delete el._mutate[vnode.context!._uid]
 }
 

package/src/directives/resize/index.ts

@@ -24,9 +24,9 @@ function inserted (el: HTMLElement, binding: ResizeVNodeDirective, vnode: VNode)
 }
 
 function unbind (el: HTMLElement, binding: ResizeVNodeDirective, vnode: VNode) {
-  if (!el._onResize) return
+  if (!el._onResize?.[vnode.context!._uid]) return
 
-  const { callback, options } = el._onResize[vnode.context!._uid]
+  const { callback, options } = el._onResize[vnode.context!._uid]!
 
   window.removeEventListener('resize', callback, options)
 

package/src/directives/ripple/VRipple.sass

@@ -1,4 +1,4 @@
-@import './_variables.scss'
+@import '../../styles/styles.sass'
 
 .v-ripple
   &__container
@@ -28,9 +28,12 @@
 
     &--enter
       transition: none
+      opacity: 0
 
     &--in
       transition: $ripple-animation-transition-in
+      opacity: $ripple-animation-visible-opacity
 
     &--out
       transition: $ripple-animation-transition-out
+      opacity: 0

package/src/directives/ripple/index.ts

@@ -17,10 +17,6 @@ function transform (el: HTMLElement, value: string) {
   el.style.webkitTransform = value
 }
 
-function opacity (el: HTMLElement, value: number) {
-  el.style.opacity = value.toString()
-}
-
 export interface RippleOptions {
   class?: string
   center?: boolean
@@ -109,14 +105,12 @@ const ripples = {
     animation.classList.add('v-ripple__animation--enter')
     animation.classList.add('v-ripple__animation--visible')
     transform(animation, `translate(${x}, ${y}) scale3d(${scale},${scale},${scale})`)
-    opacity(animation, 0)
     animation.dataset.activated = String(performance.now())
 
     setTimeout(() => {
       animation.classList.remove('v-ripple__animation--enter')
       animation.classList.add('v-ripple__animation--in')
       transform(animation, `translate(${centerX}, ${centerY}) scale3d(1,1,1)`)
-      opacity(animation, 0.25)
     }, 0)
   },
 
@@ -137,7 +131,6 @@ const ripples = {
     setTimeout(() => {
       animation.classList.remove('v-ripple__animation--in')
       animation.classList.add('v-ripple__animation--out')
-      opacity(animation, 0)
 
       setTimeout(() => {
         const ripples = el.getElementsByClassName('v-ripple__animation')

package/src/directives/scroll/index.ts

@@ -39,7 +39,7 @@ function inserted (el: HTMLElement, binding: ScrollVNodeDirective, vnode: VNode)
 function unbind (el: HTMLElement, binding: ScrollVNodeDirective, vnode: VNode) {
   if (!el._onScroll?.[vnode.context!._uid]) return
 
-  const { handler, options, target = el } = el._onScroll[vnode.context!._uid]
+  const { handler, options, target = el } = el._onScroll[vnode.context!._uid]!
 
   target.removeEventListener('scroll', handler, options)
   delete el._onScroll[vnode.context!._uid]

package/src/globals.d.ts

@@ -32,11 +32,11 @@ declare global {
     _clickOutside?: Record<number, {
       onClick: EventListener
       onMousedown: EventListener
-    }> & { lastMousedownWasOutside: boolean }
+    } | undefined> & { lastMousedownWasOutside: boolean }
     _onResize?: Record<number, {
       callback: () => void
       options?: boolean | AddEventListenerOptions
-    }>
+    } | undefined>
     _ripple?: {
       enabled?: boolean
       centered?: boolean
@@ -50,15 +50,15 @@ declare global {
     _observe?: Record<number, {
       init: boolean
       observer: IntersectionObserver
-    }>
+    } | undefined>
     _mutate?: Record<number, {
       observer: MutationObserver
-    }>
+    } | undefined>
     _onScroll?: Record<number, {
       handler: EventListenerOrEventListenerObject
       options: boolean | AddEventListenerOptions
       target?: EventTarget
-    }>
+    } | undefined>
     _touchHandlers?: {
       [_uid: number]: TouchStoredHandlers
     }

package/src/locale/da.ts

@@ -0,0 +1,69 @@
+export default {
+  badge: 'Emblem',
+  close: 'Luk',
+  dataIterator: {
+    noResultsText: 'Ingen matchende data fundet',
+    loadingText: 'Indhenter data...',
+  },
+  dataTable: {
+    itemsPerPageText: 'Rækker pr. side:',
+    ariaLabel: {
+      sortDescending: 'Sorteret faldende.',
+      sortAscending: 'Sorteret stigende.',
+      sortNone: 'Ikke sorteret.',
+      activateNone: 'Aktiver for at fjerne sortering.',
+      activateDescending: 'Aktiver for at sortere faldende.',
+      activateAscending: 'Aktiver for at sortere stigende.',
+    },
+    sortBy: 'Sorter efter',
+  },
+  dataFooter: {
+    itemsPerPageText: 'Rækker pr. side:',
+    itemsPerPageAll: 'Alle',
+    nextPage: 'Næste side',
+    prevPage: 'Forrige side',
+    firstPage: 'Første side',
+    lastPage: 'Sidste side',
+    pageText: '{0}-{1} af {2}',
+  },
+  datePicker: {
+    itemsSelected: '{0} valgt',
+    nextMonthAriaLabel: 'Næste måned',
+    nextYearAriaLabel: 'Næste år',
+    prevMonthAriaLabel: 'Forrige måned',
+    prevYearAriaLabel: 'Forrige år',
+  },
+  noDataText: 'Ingen data tilgængelig',
+  carousel: {
+    prev: 'Forrige visuelle',
+    next: 'Næste visuelle',
+    ariaLabel: {
+      delimiter: 'Karrusel dias {0} af {1}',
+    },
+  },
+  calendar: {
+    moreEvents: '{0} mere',
+  },
+  fileInput: {
+    counter: '{0} filer',
+    counterSize: '{0} filer ({1} total)',
+  },
+  timePicker: {
+    am: 'AM',
+    pm: 'PM',
+  },
+  pagination: {
+    ariaLabel: {
+      wrapper: 'Pagineringsnavigation',
+      next: 'Næste side',
+      previous: 'Forrige side',
+      page: 'Gå til side {0}',
+      currentPage: 'Nuværende side, Side {0}',
+    },
+  },
+  rating: {
+    ariaLabel: {
+      icon: 'Bedømmelse {0} af {1}',
+    },
+  },
+}

package/src/locale/index.ts

@@ -4,6 +4,7 @@ export { default as bg } from './bg'
 export { default as ca } from './ca'
 export { default as ckb } from './ckb'
 export { default as cs } from './cs'
+export { default as da } from './da'
 export { default as de } from './de'
 export { default as el } from './el'
 export { default as en } from './en'

package/src/locale/it.ts

@@ -22,8 +22,8 @@ export default {
     itemsPerPageAll: 'Tutti',
     nextPage: 'Pagina seguente',
     prevPage: 'Pagina precedente',
-    firstPage: 'Pagina prima',
-    lastPage: 'Pagina ultima',
+    firstPage: 'Prima pagina',
+    lastPage: 'Ultima pagina',
     pageText: '{0}-{1} di {2}',
   },
   datePicker: {
@@ -38,15 +38,15 @@ export default {
     prev: 'Vista precedente',
     next: 'Prossima vista',
     ariaLabel: {
-      delimiter: 'Carousel slide {0} of {1}',
+      delimiter: 'Carousel slide {0} di {1}',
     },
   },
   calendar: {
     moreEvents: '{0} di più',
   },
   fileInput: {
-    counter: '{0} files',
-    counterSize: '{0} files ({1} in totale)',
+    counter: '{0} file',
+    counterSize: '{0} file ({1} in totale)',
   },
   timePicker: {
     am: 'AM',
@@ -63,7 +63,7 @@ export default {
   },
   rating: {
     ariaLabel: {
-      icon: 'Rating {0} of {1}',
+      icon: 'Valutazione {0} di {1}',
     },
   },
 }

package/src/mixins/intersectable/index.ts

@@ -11,6 +11,10 @@ export default function intersectable (options: { onVisible: string[] }) {
   return Vue.extend({
     name: 'intersectable',
 
+    data: () => ({
+      isIntersecting: false,
+    }),
+
     mounted () {
       Intersect.inserted(this.$el as HTMLElement, {
         name: 'intersect',
@@ -27,6 +31,8 @@ export default function intersectable (options: { onVisible: string[] }) {
 
     methods: {
       onObserve (entries: IntersectionObserverEntry[], observer: IntersectionObserver, isIntersecting: boolean) {
+        this.isIntersecting = isIntersecting
+
         if (!isIntersecting) return
 
         for (let i = 0, length = options.onVisible.length; i < length; i++) {

package/src/mixins/routable/index.ts

@@ -80,9 +80,6 @@ export default Vue.extend({
   },
 
   methods: {
-    click (e: MouseEvent): void {
-      this.$emit('click', e)
-    },
     generateRouteLink () {
       let exact = this.exact
       let tag
@@ -100,7 +97,7 @@ export default Vue.extend({
         }],
         [this.to ? 'nativeOn' : 'on']: {
           ...this.$listeners,
-          click: this.click,
+          ...('click' in this ? { click: (this as any).click } : undefined), // #14447
         },
         ref: 'link',
       }

package/src/styles/settings/_variables.scss

@@ -22,17 +22,18 @@ $rounded: map-deep-merge(
 );
 
 $spacer: 4px !default;
+$spacers-steps: 16 !default; 
 
 $spacers: () !default;
 @if (type-of($spacers) == list) {
-  @for $i from 0 through 16 {
+  @for $i from 0 through $spacers-steps {
     $spacers: map-merge($spacers, ($i: $spacer * $i))
   }
 }
 
 $negative-spacers: () !default;
 @if (type-of($negative-spacers) == list) {
-  @for $i from 1 through 16 {
+  @for $i from 1 through $spacers-steps {
     $negative-spacers: map-merge($negative-spacers, ("n" + $i: -$spacer * $i))
   }
 }
@@ -249,7 +250,7 @@ $secondary-transition: 0.2s map-get($transition, 'ease-in-out') !default;
 // Ripples //;
 $ripple-animation-transition-in: transform 0.25s map-get($transition, 'fast-out-slow-in'), opacity 0.1s map-get($transition, 'fast-out-slow-in') !default;
 $ripple-animation-transition-out: opacity 0.3s map-get($transition, 'fast-out-slow-in') !default;
-$ripple-animation-visible-opacity: 0.15 !default;
+$ripple-animation-visible-opacity: 0.25 !default;
 
 // Elements //;
 $bootable-transition: 0.2s map-get($transition, 'fast-out-slow-in') !default;

package/src/util/__tests__/__snapshots__/helpers.spec.ts.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`createSimpleFunctional should render with a custom tag 1`] = `
+<pre class="v-test">
+</pre>
+`;
+
+exports[`createSimpleFunctional should render with a user-defined tag 1`] = `
+<h1 class="v-test">
+</h1>
+`;

package/src/util/__tests__/helpers.spec.ts

@@ -9,7 +9,24 @@ import {
   getObjectValueByPath,
   humanReadableFileSize,
   sortItems,
+  createSimpleFunctional,
 } from '../helpers'
+import { mount } from '@vue/test-utils'
+
+describe('createSimpleFunctional', () => {
+  it('should render with a custom tag', () => {
+    const component = createSimpleFunctional('v-test', 'pre')
+    const wrapper = mount(component)
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+  it('should render with a user-defined tag', () => {
+    const component = createSimpleFunctional('v-test', 'pre')
+    const wrapper = mount(component, {
+      propsData: { tag: 'h1' },
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})
 
 describe('helpers', () => {
   it('should return set difference of arrays A and B', () => {

package/src/util/helpers.ts

@@ -13,10 +13,17 @@ export function createSimpleFunctional (
 
     functional: true,
 
-    render (h, { data, children }): VNode {
+    props: {
+      tag: {
+        type: String,
+        default: el,
+      },
+    },
+
+    render (h, { data, props, children }): VNode {
       data.staticClass = (`${c} ${data.staticClass || ''}`).trim()
 
-      return h(el, data, children)
+      return h(props.tag, data, children)
     },
   })
 }
@@ -378,11 +385,11 @@ export function searchItems<T extends any = any> (items: T[], search: string): T
  *  - 'v-slot' for unbound v-slot (`#default`) - only if the third param is true, otherwise counts as scoped
  */
 export function getSlotType<T extends boolean = false> (vm: Vue, name: string, split?: T): (T extends true ? 'v-slot' : never) | 'normal' | 'scoped' | void {
-  if (vm.$slots[name] && vm.$scopedSlots[name] && (vm.$scopedSlots[name] as any).name) {
+  if (vm.$slots.hasOwnProperty(name) && vm.$scopedSlots.hasOwnProperty(name) && (vm.$scopedSlots[name] as any).name) {
     return split ? 'v-slot' as any : 'scoped'
   }
-  if (vm.$slots[name]) return 'normal'
-  if (vm.$scopedSlots[name]) return 'scoped'
+  if (vm.$slots.hasOwnProperty(name)) return 'normal'
+  if (vm.$scopedSlots.hasOwnProperty(name)) return 'scoped'
 }
 
 export function debounce (fn: Function, delay: number) {
@@ -412,9 +419,9 @@ export function getPrefixedScopedSlots (prefix: string, scopedSlots: any) {
 }
 
 export function getSlot (vm: Vue, name = 'default', data?: object | (() => object), optional = false) {
-  if (vm.$scopedSlots[name]) {
+  if (vm.$scopedSlots.hasOwnProperty(name)) {
     return vm.$scopedSlots[name]!(data instanceof Function ? data() : data)
-  } else if (vm.$slots[name] && (!data || optional)) {
+  } else if (vm.$slots.hasOwnProperty(name) && (!data || optional)) {
     return vm.$slots[name]
   }
   return undefined

package/src/directives/ripple/_variables.scss

@@ -1,6 +0,0 @@
-@import '../../styles/styles.sass';
-
-$ripple-animation-transition-in: transform .25s map-get($transition, 'fast-in-slow-out'),
-                                 opacity .1s map-get($transition, 'fast-in-slow-out') !default;
-$ripple-animation-transition-out: opacity .3s map-get($transition, 'fast-in-slow-out') !default;
-$ripple-animation-visible-opacity: .15 !default;