@vuetify/nightly 2.6.6 → 2.6.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vuetify/nightly",
   "description": "Vue Material Component Framework",
-  "version": "2.6.6",
+  "version": "2.6.7",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"
@@ -70,6 +70,7 @@
     "@fortawesome/vue-fontawesome": "^0.1.10",
     "@types/jest": "^26.0.14",
     "@types/node": "^14.11.10",
+    "@types/resize-observer-browser": "^0.1.7",
     "@vue/test-utils": "1.0.0-beta.29",
     "autoprefixer": "^9.6.1",
     "babel-loader": "^8.0.6",

package/src/components/VAutocomplete/VAutocomplete.sass

@@ -34,10 +34,6 @@
       .v-select__slot > input
         margin-top: $autocomplete-dense-enclosed-input-margin-top
 
-  &:not(.v-input--is-disabled).v-select.v-text-field
-    input
-      pointer-events: inherit
-
   &__content.v-menu__content
     border-radius: 0
 

package/src/components/VBtn/VBtn.sass

@@ -162,7 +162,7 @@
   display: flex
   flex: 1 0 auto
   min-width: 100% !important
-  max-width: auto
+  max-width: none
 
 .v-btn--is-elevated
   +elevation(2)

package/src/components/VChip/VChip.sass

@@ -150,7 +150,7 @@
 
 .v-chip--pill
   .v-chip__filter
-    margin-right: $chip-pill-filter-margin
+    margin: $chip-pill-filter-margin
 
   .v-avatar
     height: $chip-pill-avatar-size !important

package/src/components/VDialog/VDialog.sass

@@ -9,6 +9,7 @@
   transition: .3s map-get($transition, 'fast-in-fast-out')
   width: 100%
   z-index: inherit
+  outline: none
   +elevation($dialog-elevation)
 
   &:not(.v-dialog--fullscreen)
@@ -46,7 +47,6 @@
   transition: .2s map-get($transition, 'fast-in-fast-out'), z-index 1ms
   width: 100%
   z-index: 6
-  outline: none
 
 .v-dialog__container
   display: none

package/src/components/VDialog/VDialog.ts

@@ -178,9 +178,9 @@ export default baseMixins.extend({
       // Double nextTick to wait for lazy content to be generated
       this.$nextTick(() => {
         this.$nextTick(() => {
-          if (!this.$refs.content.contains(document.activeElement)) {
+          if (!this.$refs.dialog?.contains(document.activeElement)) {
             this.previousActiveElement = document.activeElement as HTMLElement
-            this.$refs.content.focus()
+            this.$refs.dialog?.focus()
           }
           this.bind()
         })
@@ -222,10 +222,11 @@ export default baseMixins.extend({
 
       if (
         !!target &&
+        this.$refs.dialog &&
         // It isn't the document or the dialog body
-        ![document, this.$refs.content].includes(target) &&
+        ![document, this.$refs.dialog].includes(target) &&
         // It isn't inside the dialog body
-        !this.$refs.content.contains(target) &&
+        !this.$refs.dialog.contains(target) &&
         // We're the topmost dialog
         this.activeZIndex >= this.getMaxZIndex() &&
         // It isn't inside a dependent element (like a menu)
@@ -233,7 +234,7 @@ export default baseMixins.extend({
         // So we must have focused something outside the dialog and its children
       ) {
         // Find and focus the first available element inside the dialog
-        const focusable = this.$refs.content.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
+        const focusable = this.$refs.dialog.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
         const el = [...focusable].find(el => !el.hasAttribute('disabled')) as HTMLElement | undefined
         el && el.focus()
       }
@@ -251,7 +252,6 @@ export default baseMixins.extend({
             class: this.contentClasses,
             attrs: {
               role: 'dialog',
-              tabindex: this.isActive ? 0 : undefined,
               'aria-modal': this.hideOverlay ? undefined : 'true',
               ...this.getScopeIdAttrs(),
             },
@@ -278,6 +278,9 @@ export default baseMixins.extend({
     genInnerContent () {
       const data: VNodeData = {
         class: this.classes,
+        attrs: {
+          tabindex: this.isActive ? 0 : undefined,
+        },
         ref: 'dialog',
         directives: [
           {

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

@@ -308,15 +308,15 @@ describe('VDialog.ts', () => {
       propsData: { eager: true },
     })
 
-    const content = wrapper.find('.v-dialog__content')
+    const dialog = wrapper.find('.v-dialog')
 
-    expect(content.html()).toMatchSnapshot()
-    expect(content.element.tabIndex).toBe(-1)
+    expect(dialog.html()).toMatchSnapshot()
+    expect(dialog.element.tabIndex).toBe(-1)
 
     wrapper.setData({ isActive: true })
 
-    expect(content.element.tabIndex).toBe(0)
-    expect(content.html()).toMatchSnapshot()
+    expect(dialog.element.tabIndex).toBe(0)
+    expect(dialog.html()).toMatchSnapshot()
   })
 
   // https://github.com/vuetifyjs/vuetify/issues/8697

package/src/components/VDialog/__tests__/__snapshots__/VDialog.spec.ts.snap

@@ -1,29 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VDialog.ts should only set tabindex if active 1`] = `
-<div role="dialog"
-     aria-modal="true"
-     class="v-dialog__content"
-     style="z-index: 0;"
+<div class="v-dialog"
+     style="transform-origin: center center; display: none;"
 >
-  <div class="v-dialog"
-       style="transform-origin: center center; display: none;"
-  >
-  </div>
 </div>
 `;
 
 exports[`VDialog.ts should only set tabindex if active 2`] = `
-<div role="dialog"
-     aria-modal="true"
-     class="v-dialog__content v-dialog__content--active"
-     style="z-index: 202; z-index: 202;"
+<div class="v-dialog v-dialog--active"
+     style="transform-origin: center center;"
      tabindex="0"
 >
-  <div class="v-dialog v-dialog--active"
-       style="transform-origin: center center;"
-  >
-  </div>
 </div>
 `;
 

package/src/components/VExpansionPanel/VExpansionPanel.sass

@@ -24,8 +24,8 @@
   &.v-expansion-panels--hover
     > .v-expansion-panel
       > .v-expansion-panel-header
-        &:hover
-          +states($material)
+        &:hover::before
+          opacity: map-deep-get($material, 'states', 'hover')
 
 // Block
 .v-expansion-panels

package/src/components/VInput/VInput.sass

@@ -111,9 +111,6 @@
   &--dense > .v-input__control > .v-input__slot
     margin-bottom: $input-dense-slot-margin-bottom
 
-  &--is-disabled:not(.v-input--is-readonly)
-    pointer-events: none
-
   &--is-loading > .v-input__control > .v-input__slot
     &:before,
     &:after
@@ -128,8 +125,8 @@
 
   &--hide-spin-buttons
     input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button 
+    input::-webkit-inner-spin-button
       -webkit-appearance: none
       margin: 0
-    input[type=number] 
+    input[type=number]
       -moz-appearance: textfield

package/src/components/VList/VListItem.ts

@@ -168,10 +168,12 @@ export default baseMixins.extend<options>().extend({
     data[this.to ? 'nativeOn' : 'on'] = {
       ...data[this.to ? 'nativeOn' : 'on'],
       keydown: (e: KeyboardEvent) => {
-        /* istanbul ignore else */
-        if (e.keyCode === keyCodes.enter) this.click(e)
+        if (!this.disabled) {
+          /* istanbul ignore else */
+          if (e.keyCode === keyCodes.enter) this.click(e)
 
-        this.$emit('keydown', e)
+          this.$emit('keydown', e)
+        }
       },
     }
 

package/src/components/VList/__tests__/VListItem.spec.ts

@@ -234,4 +234,16 @@ describe('VListItem.ts', () => {
     wrapper2.vm.toggle()
     expect(wrapper2.vm.isActive).toBeTruthy()
   })
+
+  it('should not react to keydown.enter when disabled', () => {
+    const click = jest.fn()
+    const wrapper = mountFunction({
+      methods: { click },
+      propsData: { disabled: true },
+    })
+
+    wrapper.trigger('keydown.enter')
+
+    expect(click).not.toHaveBeenCalled()
+  })
 })

package/src/components/VOtpInput/VOtpInput.ts

@@ -49,7 +49,6 @@ export default baseMixins.extend<options>().extend({
   },
 
   data: () => ({
-    badInput: false,
     initialValue: null,
     isBooted: false,
     otp: [] as string[],
@@ -66,9 +65,6 @@ export default baseMixins.extend<options>().extend({
         'v-otp-input--plain': this.plain,
       }
     },
-    isDirty (): boolean {
-      return VInput.options.computed.isDirty.call(this) || this.badInput
-    },
   },
 
   watch: {
@@ -159,18 +155,17 @@ export default baseMixins.extend<options>().extend({
         },
         attrs: {
           ...this.attrs$,
+          autocomplete: 'one-time-code',
           disabled: this.isDisabled,
           readonly: this.isReadonly,
           type: this.type,
           id: `${this.computedId}--${otpIdx}`,
           class: `otp-field-box--${otpIdx}`,
-          maxlength: 1,
         },
         on: Object.assign(listeners, {
           blur: this.onBlur,
           input: (e: Event) => this.onInput(e, otpIdx),
           focus: (e: Event) => this.onFocus(e, otpIdx),
-          paste: (e: ClipboardEvent) => this.onPaste(e, otpIdx),
           keydown: this.onKeyDown,
           keyup: (e: KeyboardEvent) => this.onKeyUp(e, otpIdx),
         }),
@@ -212,22 +207,31 @@ export default baseMixins.extend<options>().extend({
         e && this.$emit('focus', e)
       }
     },
-    onInput (e: Event, otpIdx: number) {
+    onInput (e: Event, index: number) {
+      const maxCursor = +this.length - 1
+
       const target = e.target as HTMLInputElement
       const value = target.value
-      this.applyValue(otpIdx, target.value, () => {
-        this.internalValue = this.otp.join('')
-      })
-      this.badInput = target.validity && target.validity.badInput
+      const inputDataArray = value?.split('') || []
+
+      const newOtp: string[] = [...this.otp]
+      for (let i = 0; i < inputDataArray.length; i++) {
+        const appIdx = index + i
+        if (appIdx > maxCursor) break
+        newOtp[appIdx] = inputDataArray[i].toString()
+      }
+      if (!inputDataArray.length) {
+        newOtp.splice(index, 1)
+      }
+
+      this.otp = newOtp
+      this.internalValue = this.otp.join('')
 
-      const nextIndex = otpIdx + 1
-      if (value) {
-        if (nextIndex < +this.length) {
-          this.changeFocus(nextIndex)
-        } else {
-          this.clearFocus(otpIdx)
-          this.onCompleted()
-        }
+      if (index + inputDataArray.length >= +this.length) {
+        this.onCompleted()
+        this.clearFocus(index)
+      } else if (inputDataArray.length) {
+        this.changeFocus(index + inputDataArray.length)
       }
     },
     clearFocus (index: number) {
@@ -255,30 +259,6 @@ export default baseMixins.extend<options>().extend({
 
       VInput.options.methods.onMouseUp.call(this, e)
     },
-    onPaste (event: ClipboardEvent, index: number) {
-      const maxCursor = +this.length - 1
-      const inputVal = event?.clipboardData?.getData('Text')
-      const inputDataArray = inputVal?.split('') || []
-      event.preventDefault()
-      const newOtp: string[] = [...this.otp]
-      for (let i = 0; i < inputDataArray.length; i++) {
-        const appIdx = index + i
-        if (appIdx > maxCursor) break
-        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) }
-    },
-    applyValue (index: number, inputVal: string, next: Function) {
-      const newOtp: string[] = [...this.otp]
-      newOtp[index] = inputVal
-      this.otp = newOtp
-      next()
-    },
     changeFocus (index: number) {
       this.onFocus(undefined, index || 0)
     },

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

@@ -173,14 +173,7 @@ describe('VOtpInput.ts', () => {
     expect(change).toHaveBeenCalledTimes(2)
   })
 
-  it('should process input when paste event', async () => {
-    const getData = jest.fn(() => '1337078')
-    const event = {
-      clipboardData: {
-        getData,
-      },
-    }
-
+  it('should process input on paste', async () => {
     const wrapper = mountFunction({})
 
     const input = wrapper.findAll('input').at(0)
@@ -190,30 +183,13 @@ describe('VOtpInput.ts', () => {
     await wrapper.vm.$nextTick()
     expect(document.activeElement === element).toBe(true)
 
-    input.trigger('paste', event)
+    element.value = '1337078'
+    input.trigger('input')
     await wrapper.vm.$nextTick()
 
     expect(wrapper.vm.otp).toStrictEqual('133707'.split(''))
   })
 
-  it('should process input when paste event with empty event', async () => {
-    const event = {}
-
-    const wrapper = mountFunction({})
-
-    const input = wrapper.findAll('input').at(0)
-
-    const element = input.element as HTMLInputElement
-    input.trigger('focus')
-    await wrapper.vm.$nextTick()
-    expect(document.activeElement === element).toBe(true)
-
-    input.trigger('paste', event)
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.vm.otp).toStrictEqual(''.split(''))
-  })
-
   it('should clear cursor when input typing is done', async () => {
     const onFinish = jest.fn()
     const clearFocus = jest.fn()

package/src/components/VRadioGroup/VRadio.sass

@@ -6,10 +6,6 @@
     label
       color: map-deep-get($material, 'text', 'disabled')
 
-    .v-icon
-      // needed for helper override
-      color: map-deep-get($material, 'selection-controls', 'disabled') !important
-
 .v-radio
   align-items: center
   display: flex

package/src/components/VSelect/VSelect.sass

@@ -63,7 +63,6 @@
     input
       flex: 1 1 // Doesn't resize on IE11 with 3rd param
       min-width: 0
-      pointer-events: none
       position: relative
 
     &:not(.v-text-field--single-line) input
@@ -118,6 +117,9 @@
     .v-select__selections
       flex-direction: row-reverse
 
+  &.v-input--is-disabled:not(.v-input--is-readonly):not(.v-autocomplete)
+    pointer-events: none
+
   &__selections
     align-items: center
     display: flex

package/src/components/VSelect/VSelect.ts

@@ -157,7 +157,7 @@ export default baseMixins.extend<options>().extend({
     computedCounterValue (): number {
       const value = this.multiple
         ? this.selectedItems
-        : (this.getText(this.selectedItems[0]) || '').toString()
+        : (this.getText(this.selectedItems[0]) ?? '').toString()
 
       if (typeof this.counterValue === 'function') {
         return this.counterValue(value)
@@ -650,7 +650,7 @@ export default baseMixins.extend<options>().extend({
       this.keyboardLookupLastTime = now
 
       const index = this.allItems.findIndex(item => {
-        const text = (this.getText(item) || '').toString()
+        const text = (this.getText(item) ?? '').toString()
 
         return text.toLowerCase().startsWith(this.keyboardLookupPrefix)
       })

package/src/components/VSkeletonLoader/VSkeletonLoader.sass

@@ -209,7 +209,7 @@
     ~ .v-skeleton-loader__card-heading
       border-radius: 0
 
-    &::first-child, &::last-child
+    &:first-child, &:last-child
       border-radius: inherit
 
   &__list-item

package/src/components/VSlideGroup/VSlideGroup.ts

@@ -138,7 +138,6 @@ export const BaseSlideGroup = mixins<options &
   },
 
   data: () => ({
-    internalItemsLength: 0,
     isOverflowing: false,
     resizeTimeout: 0,
     startX: 0,
@@ -231,13 +230,26 @@ export const BaseSlideGroup = mixins<options &
     },
   },
 
-  beforeUpdate () {
-    this.internalItemsLength = (this.$children || []).length
-  },
-
-  updated () {
-    if (this.internalItemsLength === (this.$children || []).length) return
-    this.setWidths()
+  mounted () {
+    if (typeof ResizeObserver !== 'undefined') {
+      const obs = new ResizeObserver(() => {
+        this.onResize()
+      })
+      obs.observe(this.$el)
+      obs.observe(this.$refs.content)
+      this.$on('hook:destroyed', () => {
+        obs.disconnect()
+      })
+    } else {
+      let itemsLength = 0
+      this.$on('hook:beforeUpdate', () => {
+        itemsLength = (this.$refs.content?.children || []).length
+      })
+      this.$on('hook:updated', () => {
+        if (itemsLength === (this.$refs.content?.children || []).length) return
+        this.setWidths()
+      })
+    }
   },
 
   methods: {

package/src/components/VTabs/VTabs.ts

@@ -141,6 +141,16 @@ export default baseMixins.extend<options>().extend({
   },
 
   mounted () {
+    if (typeof ResizeObserver !== 'undefined') {
+      const obs = new ResizeObserver(() => {
+        this.onResize()
+      })
+      obs.observe(this.$el)
+      this.$on('hook:destroyed', () => {
+        obs.disconnect()
+      })
+    }
+
     this.$nextTick(() => {
       window.setTimeout(this.callSlider, 30)
     })

package/src/components/VTimeline/VTimeline.sass

@@ -2,6 +2,12 @@
 @import './_variables.scss'
 @import './_mixins.sass'
 
+/**
+ * .v-timeline::before - center divider
+ * .v-card::before - arrow shadow (conflicts with active link overlay)
+ * .v-card::after - arrow
+ */
+
 // Theme
 +theme(v-timeline) using ($material)
   &::before
@@ -12,7 +18,7 @@
       background: map-get($material, 'cards')
 
     .v-card
-      &::before
+      &:not(.v-card--link)::before
         border-right-color: $shadow-key-ambient-opacity
 
 // Elements
@@ -20,7 +26,7 @@
   padding-top: $timeline-item-padding
   position: relative
 
-  &:before
+  &::before
     bottom: 0
     content: ''
     height: 100%
@@ -85,7 +91,8 @@
 // Wedge
 .v-timeline-item__body
   > .v-card:not(.v-card--flat)
-    &:before, &:after
+    &:not(.v-card--link)::before,
+    &::after
       content: ''
       position: absolute
       border-top: $timeline-wedge-size solid transparent
@@ -93,10 +100,10 @@
       border-right: $timeline-wedge-size solid black
       top: calc(50% - #{$timeline-wedge-size})
 
-    &:after
+    &::after
       border-right-color: inherit
 
-    &:before
+    &:not(.v-card--link)::before
       top: calc(50% - #{$timeline-wedge-size} + 2px)
 
 // Modifiers
@@ -106,12 +113,12 @@
 
   .v-timeline-item__body
     > .v-card
-      &:before
-        top: calc(0% + #{$timeline-wedge-size} + 2px)
-
-      &:after
+      &::after
         top: calc(0% + #{$timeline-wedge-size})
 
+      &:not(.v-card--link)::before
+        top: calc(0% + #{$timeline-wedge-size} + 2px)
+
 .v-timeline:not(.v-timeline--dense):not(.v-timeline--reverse)
   +timeline-line-align($timeline-divider-center, left, right)
 

package/src/components/VTimeline/_mixins.sass

@@ -9,8 +9,9 @@
     width: $inner-dot-size
 
 @mixin timeline-wedge-align($direction)
-  .v-timeline-item__body
-    > .v-card:before, .v-card:after
+  .v-timeline-item__body > .v-card
+    &:not(.v-card--link)::before,
+    &::after
       +ltr()
         transform: rotate(if($direction == right, 180deg, 0))
         #{$direction}: -($timeline-wedge-size)
@@ -32,7 +33,7 @@
       text-align: if($direction == left, left, right)
 
 @mixin timeline-line-align($center, $first, $second)
-  &:before
+  &::before
     +ltr()
       #{$first}: calc(#{$center} - #{$timeline-line-width / 2})
       #{$second}: initial

package/src/mixins/dependent/index.ts

@@ -3,10 +3,10 @@ import Vue from 'vue'
 import mixins from '../../util/mixins'
 import { VOverlay } from '../../components/VOverlay'
 
-interface options extends Vue {
+interface options {
   $el: HTMLElement
   $refs: {
-    content: HTMLElement
+    content?: HTMLElement
   }
   overlay?: InstanceType<typeof VOverlay>
 }
@@ -31,7 +31,7 @@ function searchChildren (children: Vue[]): DependentInstance[] {
 }
 
 /* @vue/component */
-export default mixins<options>().extend({
+export default mixins<Vue & options>().extend({
   name: 'dependent',
 
   data () {

package/src/mixins/detachable/index.ts

@@ -7,13 +7,13 @@ import mixins, { ExtractVue } from '../../util/mixins'
 import { consoleWarn } from '../../util/console'
 
 // Types
-import Vue, { PropOptions } from 'vue'
+import { PropOptions } from 'vue'
 import { VNode } from 'vue/types'
 
-interface options extends Vue {
+interface options {
   $el: HTMLElement
   $refs: {
-    content: HTMLElement
+    content?: HTMLElement
   }
 }
 

package/src/styles/components/_selection-controls.sass

@@ -109,6 +109,9 @@
     .v-icon
       color: inherit
 
+  &.v-input--is-disabled:not(.v-input--is-readonly)
+    pointer-events: none
+
 .v-input--selection-controls__input:hover
   .v-input--selection-controls__ripple:before
     background: currentColor