vuetify 2.6.0-beta.0 → 2.6.0

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: () => ({
@@ -123,26 +120,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 +221,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 +255,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()
@@ -285,7 +269,7 @@ export default baseMixins.extend<options>().extend({
       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 +303,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

@@ -89,4 +89,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

@@ -664,7 +664,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/VTabs/VTab.ts

@@ -67,12 +67,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 +90,12 @@ export default baseMixins.extend<options>().extend(
 
       this.to || this.toggle()
     },
+    toggle () {
+      // VItemGroup treats a change event as a click
+      if (!this.isActive) {
+        this.$emit('change')
+      }
+    },
   },
 
   render (h): VNode {

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/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)
   })
 

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

@@ -10,7 +10,8 @@ function bootstrap (args?: object) {
       handler: jest.fn(),
       ...args,
     },
-  }
+  } as any
+  const vnode = { context: { _uid: 1 } } as any
 
   let clickHandler
   let mousedownHandler
@@ -20,9 +21,11 @@ function bootstrap (args?: object) {
   })
   jest.spyOn(window.document, 'removeEventListener')
 
-  ClickOutside.inserted(el as HTMLElement, binding as any)
+  ClickOutside.inserted(el as HTMLElement, binding, vnode)
 
   return {
+    binding,
+    vnode,
     callback: binding.value.handler,
     el: el as HTMLElement,
     clickHandler,
@@ -32,10 +35,10 @@ function bootstrap (args?: object) {
 
 describe('click-outside', () => {
   it('should register and unregister handler', () => {
-    const { clickHandler, el } = bootstrap()
+    const { clickHandler, el, binding, vnode } = bootstrap()
     expect(window.document.addEventListener).toHaveBeenCalledWith('click', clickHandler, true)
 
-    ClickOutside.unbind(el)
+    ClickOutside.unbind(el, binding, vnode)
     expect(window.document.removeEventListener).toHaveBeenCalledWith('click', clickHandler, true)
   })
 

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

@@ -1,5 +1,6 @@
 import { attachedRoot } from '../../util/dom'
 import { VNodeDirective } from 'vue/types/vnode'
+import { VNode } from 'vue'
 
 interface ClickOutsideBindingArgs {
   handler: (e: Event) => void
@@ -52,7 +53,7 @@ function checkIsActive (e: PointerEvent, binding: ClickOutsideDirective): boolea
   return isActive(e)
 }
 
-function directive (e: PointerEvent, el: HTMLElement, binding: ClickOutsideDirective) {
+function directive (e: PointerEvent, el: HTMLElement, binding: ClickOutsideDirective, vnode: VNode) {
   const handler = typeof binding.value === 'function' ? binding.value : binding.value!.handler
 
   el._clickOutside!.lastMousedownWasOutside && checkEvent(e, el, binding) && setTimeout(() => {
@@ -76,8 +77,8 @@ export const ClickOutside = {
   // sure that the root element is
   // available, iOS does not support
   // clicks on body
-  inserted (el: HTMLElement, binding: ClickOutsideDirective) {
-    const onClick = (e: Event) => directive(e as PointerEvent, el, binding)
+  inserted (el: HTMLElement, binding: ClickOutsideDirective, vnode: VNode) {
+    const onClick = (e: Event) => directive(e as PointerEvent, el, binding, vnode)
     const onMousedown = (e: Event) => {
       el._clickOutside!.lastMousedownWasOutside = checkEvent(e as PointerEvent, el, binding)
     }
@@ -87,23 +88,31 @@ export const ClickOutside = {
       app.addEventListener('mousedown', onMousedown, true)
     })
 
-    el._clickOutside = {
-      lastMousedownWasOutside: true,
+    if (!el._clickOutside) {
+      el._clickOutside = {
+        lastMousedownWasOutside: true,
+      }
+    }
+
+    el._clickOutside[vnode.context!._uid] = {
       onClick,
       onMousedown,
     }
   },
 
-  unbind (el: HTMLElement) {
+  unbind (el: HTMLElement, binding: ClickOutsideDirective, vnode: VNode) {
     if (!el._clickOutside) return
 
     handleShadow(el, (app: HTMLElement) => {
-      if (!app || !el._clickOutside) return
-      app.removeEventListener('click', el._clickOutside.onClick, true)
-      app.removeEventListener('mousedown', el._clickOutside.onMousedown, true)
+      if (!app || !el._clickOutside?.[vnode.context!._uid]) return
+
+      const { onClick, onMousedown } = el._clickOutside[vnode.context!._uid]!
+
+      app.removeEventListener('click', onClick, true)
+      app.removeEventListener('mousedown', onMousedown, true)
     })
 
-    delete el._clickOutside
+    delete el._clickOutside[vnode.context!._uid]
   },
 }
 

package/src/directives/intersect/__tests__/intersect.spec.ts

@@ -10,16 +10,19 @@ describe('intersect', () => {
     Intersect.inserted(el, {
       value: callback,
       modifiers: { quiet: true },
-    } as any)
+    } as any, { context: { _uid: 1 } } as any)
 
     expect((el as any)._observe).toBeTruthy()
     expect(callback).not.toHaveBeenCalled()
 
     document.body.removeChild(el)
 
-    Intersect.unbind(el)
+    Intersect.unbind(el, {
+      value: callback,
+      modifiers: { quiet: true },
+    } as any, { context: { _uid: 1 } } as any)
 
-    expect((el as any)._observe).toBeFalsy()
+    expect((el as any)._observe[1]).toBeFalsy()
   })
 
   it('should invoke callback once and unbind', () => {
@@ -32,19 +35,19 @@ describe('intersect', () => {
     Intersect.inserted(el, {
       value: callback,
       modifiers: { once: true },
-    } as any)
+    } as any, { context: { _uid: 1 } } as any)
 
-    expect(callback).toHaveBeenCalledTimes(1)
-    expect((el as any)._observe).toBeTruthy()
+    expect(callback).toHaveBeenCalledTimes(0)
+    expect((el as any)._observe[1]).toBeTruthy()
 
-    ;(el as any)._observe.observer.callback([{ isIntersecting: false }])
+    ;(el as any)._observe[1].observer.callback([{ isIntersecting: false }])
 
     expect(callback).toHaveBeenCalledTimes(1)
-    expect((el as any)._observe).toBeTruthy()
+    expect((el as any)._observe[1]).toBeTruthy()
 
-    ;(el as any)._observe.observer.callback([{ isIntersecting: true }])
+    ;(el as any)._observe[1].observer.callback([{ isIntersecting: true }])
 
     expect(callback).toHaveBeenCalledTimes(2)
-    expect((el as any)._observe).toBeFalsy()
+    expect((el as any)._observe[1]).toBeFalsy()
   })
 })

package/src/directives/intersect/index.ts

@@ -1,4 +1,5 @@
 import { VNodeDirective } from 'vue/types/vnode'
+import { VNode } from 'vue'
 
 type ObserveHandler = (
   entries: IntersectionObserverEntry[],
@@ -14,7 +15,7 @@ interface ObserveVNodeDirective extends Omit<VNodeDirective, 'modifiers'> {
   }
 }
 
-function inserted (el: HTMLElement, binding: ObserveVNodeDirective) {
+function inserted (el: HTMLElement, binding: ObserveVNodeDirective, vnode: VNode) {
   if (typeof window === 'undefined' || !('IntersectionObserver' in window)) return
 
   const modifiers = binding.modifiers || {}
@@ -26,8 +27,8 @@ function inserted (el: HTMLElement, binding: ObserveVNodeDirective) {
     entries: IntersectionObserverEntry[] = [],
     observer: IntersectionObserver
   ) => {
-    /* istanbul ignore if */
-    if (!el._observe) return // Just in case, should never fire
+    const _observe = el._observe?.[vnode.context!._uid]
+    if (!_observe) return // Just in case, should never fire
 
     const isIntersecting = entries.some(entry => entry.isIntersecting)
 
@@ -36,31 +37,32 @@ function inserted (el: HTMLElement, binding: ObserveVNodeDirective) {
     if (
       handler && (
         !modifiers.quiet ||
-        el._observe.init
+        _observe.init
       ) && (
         !modifiers.once ||
         isIntersecting ||
-        !el._observe.init
+        _observe.init
       )
     ) {
       handler(entries, observer, isIntersecting)
     }
 
-    if (isIntersecting && modifiers.once) unbind(el)
-    else el._observe.init = true
+    if (isIntersecting && modifiers.once) unbind(el, binding, vnode)
+    else _observe.init = true
   }, options)
 
-  el._observe = { init: false, observer }
+  el._observe = Object(el._observe)
+  el._observe![vnode.context!._uid] = { init: false, observer }
 
   observer.observe(el)
 }
 
-function unbind (el: HTMLElement) {
-  /* istanbul ignore if */
-  if (!el._observe) return
+function unbind (el: HTMLElement, binding: ObserveVNodeDirective, vnode: VNode) {
+  const observe = el._observe?.[vnode.context!._uid]
+  if (!observe) return
 
-  el._observe.observer.unobserve(el)
-  delete el._observe
+  observe.observer.unobserve(el)
+  delete el._observe![vnode.context!._uid]
 }
 
 export const Intersect = {

package/src/directives/mutate/__tests__/mutate.spec.ts

@@ -29,16 +29,18 @@ describe('mutate.ts', () => {
 
     Mutate.inserted(el, {
       value: callback,
-    } as any)
+    } as any, { context: { _uid: 1 } } as any)
 
     expect(el._mutate).toBeTruthy()
     expect(callback).not.toHaveBeenCalled()
 
     document.body.removeChild(el)
 
-    Mutate.unbind(el)
+    Mutate.unbind(el, {
+      value: callback,
+    } as any, { context: { _uid: 1 } } as any)
 
-    expect(el._mutate).toBeFalsy()
+    expect(el._mutate[1]).toBeFalsy()
   })
 
   it('should fire event on mutation', () => {
@@ -48,15 +50,17 @@ describe('mutate.ts', () => {
 
     Mutate.inserted(el, {
       value: callback,
-    } as any)
+    } as any, { context: { _uid: 1 } } as any)
 
-    el._mutate.observer.trigger([{}])
+    el._mutate[1].observer.trigger([{}])
 
     expect(callback).toHaveBeenCalledTimes(1)
 
     document.body.removeChild(el)
 
-    Mutate.unbind(el)
+    Mutate.unbind(el, {
+      value: callback,
+    } as any, { context: { _uid: 1 } } as any)
   })
 
   it('should fire event once', () => {
@@ -69,12 +73,12 @@ describe('mutate.ts', () => {
       modifiers: {
         once: true,
       },
-    } as any)
+    } as any, { context: { _uid: 1 } } as any)
 
-    el._mutate.observer.trigger([{}])
+    el._mutate[1].observer.trigger([{}])
 
     expect(callback).toHaveBeenCalledTimes(1)
-    expect(el._mutate).toBeFalsy()
+    expect(el._mutate[1]).toBeFalsy()
 
     document.body.removeChild(el)
   })
@@ -92,16 +96,24 @@ describe('mutate.ts', () => {
         },
         handler: callback,
       },
-    } as any)
+    } as any, { context: { _uid: 1 } } as any)
 
-    el._mutate.observer.trigger([{}])
+    el._mutate[1].observer.trigger([{}])
 
     expect(callback).toHaveBeenCalledTimes(1)
-    expect(el._mutate.observer._observe).toHaveBeenLastCalledWith({ attributes: false, subtree: true })
+    expect(el._mutate[1].observer._observe).toHaveBeenLastCalledWith({ attributes: false, subtree: true })
 
     document.body.removeChild(el)
 
-    Mutate.unbind(el)
+    Mutate.unbind(el, {
+      value: {
+        options: {
+          attributes: false,
+          subtree: true,
+        },
+        handler: callback,
+      },
+    } as any, { context: { _uid: 1 } } as any)
   })
 
   it('should work with observer modifiers', () => {
@@ -116,15 +128,22 @@ describe('mutate.ts', () => {
         child: true,
         sub: true,
       },
-    } as any)
+    } as any, { context: { _uid: 1 } } as any)
 
-    el._mutate.observer.trigger([{}])
+    el._mutate[1].observer.trigger([{}])
 
     expect(callback).toHaveBeenCalledTimes(1)
-    expect(el._mutate.observer._observe).toHaveBeenLastCalledWith({ attributes: true, childList: true, subtree: true })
+    expect(el._mutate[1].observer._observe).toHaveBeenLastCalledWith({ attributes: true, childList: true, subtree: true })
 
     document.body.removeChild(el)
 
-    Mutate.unbind(el)
+    Mutate.unbind(el, {
+      value: callback,
+      modifiers: {
+        attr: true,
+        child: true,
+        sub: true,
+      },
+    } as any, { context: { _uid: 1 } } as any)
   })
 })