vuetify 2.6.0-beta.0 → 2.6.3

package/src/components/VOtpInput/VOtpInput.sass

@@ -9,32 +9,29 @@
         background: map-get($material, 'bg-color')
 
 .v-otp-input
+  display: flex
+  flex-wrap: wrap
+  flex: 1 1 auto
+  margin-right: -$otp-gutter
+  margin-left: -$otp-gutter
+
   input
     text-align: center
+
   .v-input
     margin: 0
-    padding: 0
-    .v-input__control
-      .v-input__slot
-        background: #ffffff
+    flex: 1 0 $otp-width + $otp-gutter * 2
+    max-width: 100%
+    width: 100%
+    padding: $otp-gutter
+
     &.v-otp-input--plain
       fieldset
         display: none
+
     input[type=number]::-webkit-outer-spin-button,
     input[type=number]::-webkit-inner-spin-button
       -webkit-appearance: none
       margin: 0
     input[type=number]
       -moz-appearance: textfield
-  .row-container
-    display: flex
-    flex-wrap: wrap
-    flex: 1 1 auto
-    margin-right: $otp-row-container-margin-x
-    margin-left: $otp-row-container-margin-x
-    >.col-input
-      flex-basis: 0
-      flex-grow: $otp-col-flex-grow
-      max-width: $otp-col-width
-      width: $otp-col-width
-      padding: $otp-col-padding

package/src/components/VOtpInput/VOtpInput.ts

@@ -38,17 +38,14 @@ export default baseMixins.extend<options>().extend({
 
   props: {
     length: {
-      type: Number,
+      type: [Number, String],
       default: 6,
     },
     type: {
       type: String,
       default: 'text',
     },
-    plain: {
-      type: Boolean,
-      default: false,
-    },
+    plain: Boolean,
   },
 
   data: () => ({
@@ -78,6 +75,7 @@ export default baseMixins.extend<options>().extend({
     isFocused: 'updateValue',
     value (val) {
       this.lazyValue = val
+      this.otp = val?.split('') || []
     },
   },
 
@@ -123,26 +121,13 @@ export default baseMixins.extend<options>().extend({
         this.genTextFieldSlot(otpIdx),
       ]
     },
-    genCol (otpIdx: number) {
-      const node = this.$createElement('div', this.setTextColor(this.validationState, {
-        staticClass: 'v-input',
-        class: this.classes,
-      }), [this.genControl(otpIdx)])
-
-      return this.$createElement('div', {
-        staticClass: 'col-input',
-      }, [
-        node,
-      ])
-    },
     genContent () {
-      const cols = [...Array(this.length).keys()].map(x => {
-        return this.genCol(x)
+      return Array.from({ length: +this.length }, (_, i) => {
+        return this.$createElement('div', this.setTextColor(this.validationState, {
+          staticClass: 'v-input',
+          class: this.classes,
+        }), [this.genControl(i)])
       })
-
-      return [this.$createElement('div', {
-        staticClass: 'row-container',
-      }, cols)]
     },
     genFieldset () {
       return this.$createElement('fieldset', {
@@ -237,7 +222,7 @@ export default baseMixins.extend<options>().extend({
 
       const nextIndex = otpIdx + 1
       if (value) {
-        if (nextIndex < this.length) {
+        if (nextIndex < +this.length) {
           this.changeFocus(nextIndex)
         } else {
           this.clearFocus(otpIdx)
@@ -271,7 +256,7 @@ export default baseMixins.extend<options>().extend({
       VInput.options.methods.onMouseUp.call(this, e)
     },
     onPaste (event: ClipboardEvent, index: number) {
-      const maxCursor = this.length - 1
+      const maxCursor = +this.length - 1
       const inputVal = event?.clipboardData?.getData('Text')
       const inputDataArray = inputVal?.split('') || []
       event.preventDefault()
@@ -282,10 +267,11 @@ export default baseMixins.extend<options>().extend({
         newOtp[appIdx] = inputDataArray[i].toString()
       }
       this.otp = newOtp
+      this.internalValue = this.otp.join('')
       const targetFocus = Math.min(index + inputDataArray.length, maxCursor)
       this.changeFocus(targetFocus)
 
-      if (newOtp.length === this.length) { this.onCompleted(); this.clearFocus(targetFocus) }
+      if (newOtp.length === +this.length) { this.onCompleted(); this.clearFocus(targetFocus) }
     },
     applyValue (index: number, inputVal: string, next: Function) {
       const newOtp: string[] = [...this.otp]
@@ -319,12 +305,12 @@ export default baseMixins.extend<options>().extend({
         return index > 0 && this.changeFocus(index - 1)
       }
       if (eventKey === 'ArrowRight') {
-        return index + 1 < this.length && this.changeFocus(index + 1)
+        return index + 1 < +this.length && this.changeFocus(index + 1)
       }
     },
     onCompleted () {
       const rsp = this.otp.join('')
-      if (rsp.length === this.length) {
+      if (rsp.length === +this.length) {
         this.$emit('finish', rsp)
       }
     },

package/src/components/VOtpInput/_variables.scss

@@ -1,6 +1,4 @@
 @import '../../styles/styles.sass';
 
-$otp-row-container-margin-x: -4px !default;
-$otp-col-flex-grow: 1 !default;
-$otp-col-width: 100% !default;
-$otp-col-padding: 4px !default;
+$otp-gutter: 4px !default;
+$otp-width: 24px !default;

package/src/components/VOverlay/VOverlay.ts

@@ -86,6 +86,7 @@ export default mixins(
 
     return h('div', {
       staticClass: 'v-overlay',
+      on: this.$listeners,
       class: this.classes,
       style: this.styles,
     }, children)

package/src/components/VRadioGroup/VRadioGroup.ts

@@ -6,15 +6,11 @@ import './VRadioGroup.sass'
 import VInput from '../VInput'
 import { BaseItemGroup } from '../VItemGroup/VItemGroup'
 
-// Mixins
-import Comparable from '../../mixins/comparable'
-
 // Types
 import mixins from '../../util/mixins'
 import { PropType } from 'vue'
 
 const baseMixins = mixins(
-  Comparable,
   BaseItemGroup,
   VInput
 )
@@ -89,4 +85,12 @@ export default baseMixins.extend({
     },
     onClick: BaseItemGroup.options.methods.onClick,
   },
+
+  render (h) {
+    const vnode = VInput.options.render.call(this, h)
+
+    this._b(vnode.data!, 'div', this.attrs$)
+
+    return vnode
+  },
 })

package/src/components/VRangeSlider/VRangeSlider.ts

@@ -229,7 +229,9 @@ export default VSlider.extend({
         this.thumbPressed = true
       }
 
-      this.activeThumb = this.getIndexOfClosestValue(this.internalValue, value)
+      if (this.activeThumb === null) {
+        this.activeThumb = this.getIndexOfClosestValue(this.internalValue, value)
+      }
 
       this.setInternalValue(value)
     },

package/src/components/VSelect/VSelect.ts

@@ -325,6 +325,10 @@ export default baseMixins.extend<options>().extend({
       for (let index = 0; index < arr.length; ++index) {
         const item = arr[index]
 
+        // Do not return null values if existant (#14421)
+        if (item == null) {
+          continue
+        }
         // Do not deduplicate headers or dividers (#12517)
         if (item.header || item.divider) {
           uniqueValues.set(item, item)
@@ -664,7 +668,7 @@ export default baseMixins.extend<options>().extend({
 
       // If menu is active, allow default
       // listIndex change from menu
-      if (this.isMenuActive && keyCode !== keyCodes.tab) {
+      if (this.isMenuActive && [keyCodes.up, keyCodes.down, keyCodes.home, keyCodes.end, keyCodes.enter].includes(keyCode)) {
         this.$nextTick(() => {
           menu.changeListIndex(e)
           this.$emit('update:list-index', menu.listIndex)

package/src/components/VSlideGroup/VSlideGroup.ts

@@ -216,13 +216,17 @@ export const BaseSlideGroup = mixins<options &
     // and need to be recalculated
     isOverflowing: 'setWidths',
     scrollOffset (val) {
-      const scroll =
+      if (this.$vuetify.rtl) val = -val
+
+      let scroll =
         val <= 0
           ? bias(-val)
           : val > this.widths.content - this.widths.wrapper
             ? -(this.widths.content - this.widths.wrapper) + bias(this.widths.content - this.widths.wrapper - val)
             : -val
 
+      if (this.$vuetify.rtl) scroll = -scroll
+
       this.$refs.content.style.transform = `translateX(${scroll}px)`
     },
   },
@@ -475,8 +479,10 @@ export const BaseSlideGroup = mixins<options &
         wrapper: this.$refs.wrapper ? this.$refs.wrapper.clientWidth : 0,
       }, this.$vuetify.rtl, this.scrollOffset)
     },
-    setWidths /* istanbul ignore next */  () {
+    setWidths () {
       window.requestAnimationFrame(() => {
+        if (this._isDestroyed) return
+
         const { content, wrapper } = this.$refs
 
         this.widths = {

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)
@@ -67,12 +75,16 @@ export default baseMixins.extend<options>().extend(
     },
   },
 
-  mounted () {
-    this.onRouteChange()
-  },
-
   methods: {
     click (e: KeyboardEvent | MouseEvent): void {
+      // Prevent keyboard actions
+      // from children elements
+      // within disabled tabs
+      if (this.disabled) {
+        e.preventDefault()
+        return
+      }
+
       // If user provides an
       // actual link, do not
       // prevent default
@@ -86,6 +98,12 @@ export default baseMixins.extend<options>().extend(
 
       this.to || this.toggle()
     },
+    toggle () {
+      // VItemGroup treats a change event as a click
+      if (!this.isActive || (!this.tabsBar.mandatory && !this.to)) {
+        this.$emit('change')
+      }
+    },
   },
 
   render (h): VNode {
@@ -95,7 +113,7 @@ export default baseMixins.extend<options>().extend(
       ...data.attrs,
       'aria-selected': String(this.isActive),
       role: 'tab',
-      tabindex: 0,
+      tabindex: this.disabled ? -1 : 0,
     }
     data.on = {
       ...data.on,

package/src/components/VTabs/VTabs.sass

@@ -36,7 +36,7 @@
 
   .v-menu__activator
     height: 100%
-  
+
   &.v.tabs--vertical.v-tabs--right
     flex-direction: row-reverse
 
@@ -221,5 +221,8 @@
     color: inherit
 
 .v-tab--disabled
-  pointer-events: none
   opacity: $tab-disabled-opacity
+
+  &,
+  & *
+    pointer-events: none

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/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.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',
@@ -157,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/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/transitions/createTransition.ts

@@ -87,16 +87,8 @@ export function createSimpleTransition (
       }
       if (context.props.hideOnLeave) {
         data.on!.leave = mergeTransitions(data.on!.leave, (el: HTMLElement) => {
-          el._initialDisplay = [el.style.display, el.style.getPropertyPriority('display')]
           el.style.setProperty('display', 'none', 'important')
         })
-        data.on!.afterLeave = mergeTransitions(data.on!.afterLeave, (el?: HTMLElement) => {
-          if (el) {
-            el._initialDisplay
-              ? el.style.setProperty('display', ...el._initialDisplay)
-              : el.style.removeProperty('display')
-          }
-        })
       }
 
       return h(tag, mergeData(context.data, data), context.children)

package/src/directives/click-outside/__tests__/click-outside-shadow-dom.spec.ts

@@ -13,7 +13,8 @@ function bootstrap (args?: object) {
       handler: jest.fn(),
       ...args,
     },
-  }
+  } as any
+  const vnode = { context: { _uid: 1 } } as any
 
   let shadowClickHandler
   let outsideClickHandler
@@ -37,9 +38,11 @@ function bootstrap (args?: object) {
   jest.spyOn(window.document, 'removeEventListener')
   jest.spyOn(shadowRoot, 'removeEventListener')
 
-  ClickOutside.inserted(shadowEl as HTMLElement, binding as any)
+  ClickOutside.inserted(shadowEl as HTMLElement, binding, vnode)
 
   return {
+    binding,
+    vnode,
     callback: binding.value.handler,
     shadowEl: shadowEl as HTMLElement,
     outsideEl: outsideEl as HTMLElement,
@@ -53,18 +56,18 @@ function bootstrap (args?: object) {
 
 describe('click-outside.js within the Shadow DOM', () => {
   it('should register and unregister handler outside of the shadow DOM', () => {
-    const { outsideClickHandler, shadowEl } = bootstrap()
+    const { outsideClickHandler, shadowEl, binding, vnode } = bootstrap()
     expect(window.document.addEventListener).toHaveBeenCalledWith('click', outsideClickHandler, true)
 
-    ClickOutside.unbind(shadowEl)
+    ClickOutside.unbind(shadowEl, binding, vnode)
     expect(window.document.removeEventListener).toHaveBeenCalledWith('click', outsideClickHandler, true)
   })
 
   it('should register and unregister handler within the shadow DOM', () => {
-    const { shadowClickHandler, shadowRoot, shadowEl } = bootstrap()
+    const { shadowClickHandler, shadowRoot, shadowEl, binding, vnode } = bootstrap()
     expect(shadowRoot.addEventListener).toHaveBeenCalledWith('click', shadowClickHandler, true)
 
-    ClickOutside.unbind(shadowEl)
+    ClickOutside.unbind(shadowEl, binding, vnode)
     expect(shadowRoot.removeEventListener).toHaveBeenCalledWith('click', shadowClickHandler, true)
   })