vuetify 2.5.14 → 2.6.2

package/src/components/VSnackbar/VSnackbar.ts

@@ -90,9 +90,7 @@ export default mixins(
         : Themeable.options.computed.isDark.call(this)
     },
     styles (): object {
-      // Styles are not needed when
-      // using the absolute prop.
-      if (this.absolute) return {}
+      if (this.absolute || !this.app) return {}
 
       const {
         bar,
@@ -104,12 +102,10 @@ export default mixins(
         top,
       } = this.$vuetify.application
 
-      // Should always move for y-axis
-      // applicationable components.
       return {
         paddingBottom: convertToUnit(bottom + footer + insetFooter),
-        paddingLeft: !this.app ? undefined : convertToUnit(left),
-        paddingRight: !this.app ? undefined : convertToUnit(right),
+        paddingLeft: convertToUnit(left),
+        paddingRight: convertToUnit(right),
         paddingTop: convertToUnit(bar + top),
       }
     },

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

@@ -63,7 +63,10 @@ describe('VSnackbar.ts', () => {
     [true, false],
   ])('should have app padding on the x-axis using %s', (absolute, expected: boolean) => {
     const wrapper = mountFunction({
-      propsData: { absolute },
+      propsData: {
+        app: true,
+        absolute,
+      },
     })
 
     expect(Object.keys(wrapper.vm.styles).length > 0).toBe(expected)

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/VStepper/VStepperStep.ts

@@ -10,6 +10,7 @@ import ripple from '../../directives/ripple'
 
 // Utilities
 import mixins from '../../util/mixins'
+import { keyCodes } from '../../util/helpers'
 
 // Types
 import { VNode } from 'vue'
@@ -90,7 +91,7 @@ export default baseMixins.extend<options>().extend({
   },
 
   methods: {
-    click (e: MouseEvent) {
+    click (e: MouseEvent | KeyboardEvent) {
       e.stopPropagation()
 
       this.$emit('click', e)
@@ -131,6 +132,11 @@ export default baseMixins.extend<options>().extend({
 
       return children
     },
+    keyboardClick (e: KeyboardEvent) {
+      if (e.keyCode === keyCodes.space) {
+        this.click(e)
+      }
+    },
     toggle (step: number | string) {
       this.isActive = step.toString() === this.step.toString()
       this.isInactive = Number(step) < Number(this.step)
@@ -139,13 +145,19 @@ export default baseMixins.extend<options>().extend({
 
   render (h): VNode {
     return h('div', {
+      attrs: {
+        tabindex: this.editable ? 0 : -1,
+      },
       staticClass: 'v-stepper__step',
       class: this.classes,
       directives: [{
         name: 'ripple',
         value: this.editable,
       }],
-      on: { click: this.click },
+      on: {
+        click: this.click,
+        keydown: this.keyboardClick,
+      },
     }, [
       this.genStep(),
       this.genLabel(),

package/src/components/VStepper/__tests__/__snapshots__/VStepperStep.spec.ts.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VStepperStep.ts should accept a custom color 1`] = `
-<div class="v-stepper__step v-stepper__step--inactive v-stepper__step--complete">
+<div tabindex="-1"
+     class="v-stepper__step v-stepper__step--inactive v-stepper__step--complete"
+>
   <span class="v-stepper__step__step pink">
     <i aria-hidden="true"
        class="v-icon notranslate mdi mdi-check theme--light"
@@ -14,7 +16,9 @@ exports[`VStepperStep.ts should accept a custom color 1`] = `
 `;
 
 exports[`VStepperStep.ts should accept a custom css color 1`] = `
-<div class="v-stepper__step v-stepper__step--inactive v-stepper__step--complete">
+<div tabindex="-1"
+     class="v-stepper__step v-stepper__step--inactive v-stepper__step--complete"
+>
   <span class="v-stepper__step__step"
         style="background-color: rgb(170, 187, 204); border-color: #aabbcc;"
   >
@@ -29,7 +33,9 @@ exports[`VStepperStep.ts should accept a custom css color 1`] = `
 `;
 
 exports[`VStepperStep.ts should render 1`] = `
-<div class="v-stepper__step v-stepper__step--inactive">
+<div tabindex="-1"
+     class="v-stepper__step v-stepper__step--inactive"
+>
   <span class="v-stepper__step__step">
     1
   </span>
@@ -39,7 +45,9 @@ exports[`VStepperStep.ts should render 1`] = `
 `;
 
 exports[`VStepperStep.ts should render complete step 1`] = `
-<div class="v-stepper__step v-stepper__step--inactive v-stepper__step--complete">
+<div tabindex="-1"
+     class="v-stepper__step v-stepper__step--inactive v-stepper__step--complete"
+>
   <span class="v-stepper__step__step primary">
     <i aria-hidden="true"
        class="v-icon notranslate mdi mdi-check theme--light"
@@ -52,7 +60,9 @@ exports[`VStepperStep.ts should render complete step 1`] = `
 `;
 
 exports[`VStepperStep.ts should render editable step 1`] = `
-<div class="v-stepper__step v-stepper__step--editable v-stepper__step--inactive v-stepper__step--complete">
+<div tabindex="0"
+     class="v-stepper__step v-stepper__step--editable v-stepper__step--inactive v-stepper__step--complete"
+>
   <span class="v-stepper__step__step primary">
     <i aria-hidden="true"
        class="v-icon notranslate material-icons theme--light"
@@ -66,7 +76,9 @@ exports[`VStepperStep.ts should render editable step 1`] = `
 `;
 
 exports[`VStepperStep.ts should render step with error 1`] = `
-<div class="v-stepper__step v-stepper__step--inactive v-stepper__step--error error--text">
+<div tabindex="-1"
+     class="v-stepper__step v-stepper__step--inactive v-stepper__step--error error--text"
+>
   <span class="v-stepper__step__step">
     <i aria-hidden="true"
        class="v-icon notranslate material-icons theme--light"

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/VTextarea/VTextarea.sass

@@ -1,5 +1,14 @@
 @import './_variables.scss'
 
++theme(v-textarea) using ($material)
+  &.v-text-field--solo-inverted
+    &.v-input--is-focused
+      textarea
+        color: map-deep-get($material, 'inputs', 'solo-inverted-focused-text')
+
+      textarea::placeholder
+        color: map-deep-get($material, 'inputs', 'solo-inverted-focused-placeholder')
+
 .v-textarea
   textarea
     align-self: stretch
@@ -49,6 +58,10 @@
   &.v-text-field--solo
     align-items: flex-start
 
+    .v-input__control
+      textarea
+        caret-color: auto
+
     // Essentially revert styles
     // applied by v-text-field
     .v-input__prepend-inner,

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

@@ -34,6 +34,10 @@ export default mixins(Colorable, Delayable, Dependent, Menuable, Toggleable).ext
       type: Boolean,
       default: true,
     },
+    openOnFocus: {
+      type: Boolean,
+      default: true,
+    },
     tag: {
       type: String,
       default: 'span',
@@ -125,7 +129,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,
       }
@@ -158,14 +161,17 @@ export default mixins(Colorable, Delayable, Dependent, Menuable, Toggleable).ext
     genActivatorListeners () {
       const listeners = Activatable.options.methods.genActivatorListeners.call(this)
 
-      listeners.focus = (e: Event) => {
-        this.getActivator(e)
-        this.runDelay('open')
-      }
-      listeners.blur = (e: Event) => {
-        this.getActivator(e)
-        this.runDelay('close')
+      if (this.openOnFocus) {
+        listeners.focus = (e: Event) => {
+          this.getActivator(e)
+          this.runDelay('open')
+        }
+        listeners.blur = (e: Event) => {
+          this.getActivator(e)
+          this.runDelay('close')
+        }
       }
+
       listeners.keydown = (e: KeyboardEvent) => {
         if (e.keyCode === keyCodes.esc) {
           this.getActivator(e)

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/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/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/activatable/__tests__/__snapshots__/activatable.spec.ts.snap

@@ -2,8 +2,7 @@
 
 exports[`activatable.ts should render activator slot with hover 1`] = `
 <div>
-  <button role="button"
-          aria-haspopup="true"
+  <button aria-haspopup="true"
           aria-expanded="false"
   >
   </button>

package/src/mixins/activatable/index.ts

@@ -30,6 +30,10 @@ export default baseMixins.extend({
     },
     disabled: Boolean,
     internalActivator: Boolean,
+    openOnClick: {
+      type: Boolean,
+      default: true,
+    },
     openOnHover: Boolean,
     openOnFocus: Boolean,
   },
@@ -89,7 +93,7 @@ export default baseMixins.extend({
     },
     genActivatorAttributes () {
       return {
-        role: 'button',
+        role: (this.openOnClick && !this.openOnHover) ? 'button' : undefined,
         'aria-haspopup': true,
         'aria-expanded': String(this.isActive),
       }
@@ -108,7 +112,7 @@ export default baseMixins.extend({
           this.getActivator(e)
           this.runDelay('close')
         }
-      } else {
+      } else if (this.openOnClick) {
         listeners.click = (e: MouseEvent) => {
           const activator = this.getActivator(e)
           if (activator) activator.focus()

package/src/mixins/menuable/index.ts

@@ -78,7 +78,6 @@ export default baseMixins.extend<options>().extend({
       default: 0,
     },
     offsetOverflow: Boolean,
-    openOnClick: Boolean,
     positionX: {
       type: Number,
       default: null,
@@ -298,13 +297,15 @@ export default baseMixins.extend<options>().extend({
 
       const onClick = listeners.click
 
-      listeners.click = (e: MouseEvent & KeyboardEvent & FocusEvent) => {
-        if (this.openOnClick) {
-          onClick && onClick(e)
-        }
+      if (onClick) {
+        listeners.click = (e: MouseEvent & KeyboardEvent & FocusEvent) => {
+          if (this.openOnClick) {
+            onClick && onClick(e)
+          }
 
-        this.absoluteX = e.clientX
-        this.absoluteY = e.clientY
+          this.absoluteX = e.clientX
+          this.absoluteY = e.clientY
+        }
       }
 
       return listeners

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',
       }
@@ -143,8 +140,8 @@ 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 activeClass = `${this.activeClass || ''} ${this.proxyClass || ''}`.trim()
+      const exactActiveClass = `${this.exactActiveClass || ''} ${this.proxyClass || ''}`.trim() || activeClass
 
       const path = '_vnode.data.class.' + (this.exact ? exactActiveClass : activeClass)
 

package/src/services/application/index.ts

@@ -36,7 +36,7 @@ export class Application extends Service implements IApplication {
     location: TargetProp,
     size: number
   ) {
-    this.application[location] = { [uid]: size }
+    this.application[location][uid] = size
 
     this.update(location)
   }