vuetify 2.6.6 → 2.6.9

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

@@ -6911,7 +6911,7 @@ exports[`VDataTable.ts should render item slot when using group-by function 1`]
                 </i>
               </span>
             </button>
-            name: Frozen Yogurt
+            Dessert (100g serving): Frozen Yogurt
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -6941,7 +6941,7 @@ exports[`VDataTable.ts should render item slot when using group-by function 1`]
                 </i>
               </span>
             </button>
-            name: Ice cream sandwich
+            Dessert (100g serving): Ice cream sandwich
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -8477,7 +8477,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
                 </i>
               </span>
             </button>
-            calories: 159
+            Calories: 159
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -8551,7 +8551,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
                 </i>
               </span>
             </button>
-            calories: 237
+            Calories: 237
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -8625,7 +8625,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
                 </i>
               </span>
             </button>
-            calories: 262
+            Calories: 262
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -8699,7 +8699,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
                 </i>
               </span>
             </button>
-            calories: 305
+            Calories: 305
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -8773,7 +8773,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
                 </i>
               </span>
             </button>
-            calories: 356
+            Calories: 356
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -8988,7 +8988,7 @@ exports[`VDataTable.ts should render with grouped rows 1`] = `
                 </i>
               </span>
             </button>
-            protein: 0
+            Protein (g): 0
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -9099,7 +9099,7 @@ exports[`VDataTable.ts should render with grouped rows 1`] = `
                 </i>
               </span>
             </button>
-            protein: 3.9
+            Protein (g): 3.9
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -9168,7 +9168,7 @@ exports[`VDataTable.ts should render with grouped rows 1`] = `
                 </i>
               </span>
             </button>
-            protein: 4
+            Protein (g): 4
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -9237,7 +9237,7 @@ exports[`VDataTable.ts should render with grouped rows 1`] = `
                 </i>
               </span>
             </button>
-            protein: 4.3
+            Protein (g): 4.3
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -11644,7 +11644,7 @@ exports[`VDataTable.ts should search group-by column 1`] = `
                 </i>
               </span>
             </button>
-            name: Assistance
+            Name: Assistance
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -11681,7 +11681,7 @@ exports[`VDataTable.ts should search group-by column 1`] = `
                 </i>
               </span>
             </button>
-            name: Candidat
+            Name: Candidat
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >
@@ -11856,7 +11856,7 @@ exports[`VDataTable.ts should search group-by column 2`] = `
                 </i>
               </span>
             </button>
-            name: Candidat
+            Name: Candidat
             <button type="button"
                     class="ma-0 v-btn v-btn--icon v-btn--round theme--light v-size--small"
             >

package/src/components/VDatePicker/VDatePicker.ts

@@ -231,7 +231,7 @@ export default mixins(
         year: { year: 'numeric', timeZone: 'UTC' },
         month: { month: 'long', timeZone: 'UTC' },
         date: { weekday: 'short', month: 'short', day: 'numeric', timeZone: 'UTC' },
-      }
+      } as const
 
       const titleDateFormatter = createNativeLocaleFormatter(this.currentLocale, titleFormats[this.type], {
         start: 0,

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

@@ -100,20 +100,17 @@
 
   &__slot
     align-items: center
-    color: inherit
     display: flex
     margin-bottom: $input-slot-margin-bottom
     min-height: inherit
     position: relative
     transition: $primary-transition
+    transition-property: height, min-height
     width: 100%
 
   &--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/VItemGroup/VItemGroup.ts

@@ -219,7 +219,7 @@ export const BaseItemGroup = mixins(
         ? this.internalValue
         : []
       const internalValue = defaultValue.slice()
-      const index = internalValue.findIndex(val => val === value)
+      const index = internalValue.findIndex(val => this.valueComparator(val, value))
 
       if (
         this.mandatory &&
@@ -245,7 +245,7 @@ export const BaseItemGroup = mixins(
       this.internalValue = internalValue
     },
     updateSingle (value: any) {
-      const isSame = value === this.internalValue
+      const isSame = this.valueComparator(this.internalValue, value)
 
       if (this.mandatory && isSame) return
 

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

@@ -217,6 +217,18 @@ describe('VItemGroup', () => {
     wrapper.vm.updateSingle('foo')
     expect(wrapper.vm.internalValue).toBeUndefined()
 
+    // Toggling on and off object references
+    wrapper.vm.updateSingle({ foo: 'foo' })
+    expect(wrapper.vm.internalValue).toEqual({ foo: 'foo' })
+    wrapper.vm.updateSingle({ foo: 'foo' })
+    expect(wrapper.vm.internalValue).toBeUndefined()
+
+    // Toggling on and off with custom comparator
+    wrapper.setProps({ valueComparator: (a: any, b: any) => a?.startsWith(b?.[0]), value: 'foo' })
+    expect(wrapper.vm.internalValue).toBe('foo')
+    wrapper.vm.updateSingle('foobar')
+    expect(wrapper.vm.internalValue).toBeUndefined()
+
     wrapper.setProps({ mandatory: true })
 
     // Toggling off single mandatory
@@ -237,6 +249,12 @@ describe('VItemGroup', () => {
     wrapper.vm.updateMultiple('foo')
     expect(wrapper.vm.internalValue).toEqual([])
 
+    // Toggling on and off object references
+    wrapper.vm.updateMultiple({ foo: 'foo' })
+    expect(wrapper.vm.internalValue).toEqual([{ foo: 'foo' }])
+    wrapper.vm.updateMultiple({ foo: 'foo' })
+    expect(wrapper.vm.internalValue).toEqual([])
+
     wrapper.setProps({ mandatory: true })
 
     // Toggling off single mandatory
@@ -256,6 +274,17 @@ describe('VItemGroup', () => {
     expect(wrapper.vm.internalValue).toEqual(['foo', 'bar', 'fizz'])
   })
 
+  it('should update a multiple item group with a custom comparator', () => {
+    const wrapper = mountFunction({
+      propsData: { multiple: true },
+    })
+
+    wrapper.setProps({ valueComparator: (a: any, b: any) => a?.startsWith(b?.[0]), value: ['foo'] })
+    expect(wrapper.vm.internalValue).toEqual(['foo'])
+    wrapper.vm.updateMultiple('foobar')
+    expect(wrapper.vm.internalValue).toEqual([])
+  })
+
   it('should update value if mandatory and dynamic items', async () => {
     const wrapper = mountFunction({
       propsData: {

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

@@ -6,17 +6,17 @@ exports[`VOverflowBtn.js should show label with persistentPlaceholder property s
     <div role="combobox"
          aria-haspopup="listbox"
          aria-expanded="false"
-         aria-owns="list-14"
+         aria-owns="list-15"
          class="v-input__slot"
     >
       <div class="v-select__slot">
-        <label for="input-14"
+        <label for="input-15"
                class="v-label theme--light"
         >
           Some label
         </label>
         <div class="v-select__selections">
-          <input id="input-14"
+          <input id="input-15"
                  readonly="readonly"
                  type="text"
           >
@@ -54,17 +54,17 @@ exports[`VOverflowBtn.js should show label with persistentPlaceholder property s
     <div role="combobox"
          aria-haspopup="listbox"
          aria-expanded="true"
-         aria-owns="list-14"
+         aria-owns="list-15"
          class="v-input__slot"
     >
       <div class="v-select__slot">
-        <label for="input-14"
+        <label for="input-15"
                class="v-label theme--light"
         >
           Some label
         </label>
         <div class="v-select__selections">
-          <input id="input-14"
+          <input id="input-15"
                  readonly="readonly"
                  type="text"
           >
@@ -145,7 +145,7 @@ exports[`VOverflowBtn.js should use default autocomplete selections 1`] = `
 `;
 
 exports[`VOverflowBtn.js should use default autocomplete selections 2`] = `
-<div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--single-line v-select v-select--is-multi v-autocomplete v-overflow-btn">
+<div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-text-field--single-line v-select v-autocomplete v-overflow-btn v-overflow-btn--segmented">
   <div class="v-input__control">
     <div role="combobox"
          aria-haspopup="listbox"
@@ -155,9 +155,13 @@ exports[`VOverflowBtn.js should use default autocomplete selections 2`] = `
     >
       <div class="v-select__slot">
         <div class="v-select__selections">
-          <div class="v-select__selection v-select__selection--comma">
-            foo
-          </div>
+          <button type="button"
+                  class="v-btn v-btn--text theme--light v-size--default"
+          >
+            <span class="v-btn__content">
+              foo
+            </span>
+          </button>
           <input id="input-1"
                  readonly="readonly"
                  type="text"

package/src/components/VPagination/VPagination.ts

@@ -89,7 +89,7 @@ export default mixins(
     items (): (string | number)[] {
       const totalVisible = parseInt(this.totalVisible, 10)
 
-      if (totalVisible === 0) {
+      if (totalVisible === 0 || isNaN(this.length) || this.length > Number.MAX_SAFE_INTEGER) {
         return []
       }
 

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/VRadioGroup/VRadio.ts

@@ -74,6 +74,7 @@ export default baseMixins.extend<options>().extend({
       }
     },
     computedColor (): string | undefined {
+      if (this.isDisabled) return undefined
       return Selectable.options.computed.computedColor.call(this)
     },
     computedIcon (): string {