@dimailn/vuetify 2.7.2-alpha31 → 2.7.2-alpha33

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

@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VIcon for component icon should render an svg icon 1`] = `
-<span aria-hidden="true"
-      class="v-icon notranslate theme--light"
+<span class="v-icon notranslate theme--light"
+      aria-hidden="true"
 >
-  <svg xmlns="http://www.w3.org/2000/svg"
+  <svg class="v-icon__svg"
+       xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 24 24"
        role="img"
        aria-hidden="true"
-       class="v-icon__svg"
   >
     <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z">
     </path>
@@ -17,15 +17,15 @@ exports[`VIcon for component icon should render an svg icon 1`] = `
 `;
 
 exports[`VIcon for component icon should render an svg icon 2`] = `
-<span aria-hidden="true"
-      class="v-icon notranslate theme--light"
+<span class="v-icon notranslate theme--light"
+      aria-hidden="true"
       style="font-size: 36px; height: 36px; width: 36px;"
 >
-  <svg xmlns="http://www.w3.org/2000/svg"
+  <svg class="v-icon__svg"
+       xmlns="http://www.w3.org/2000/svg"
        viewbox="0 0 24 24"
        role="img"
        aria-hidden="true"
-       class="v-icon__svg"
        style="font-size: 36px; height: 36px; width: 36px;"
   >
     <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z">
@@ -35,95 +35,40 @@ exports[`VIcon for component icon should render an svg icon 2`] = `
 `;
 
 exports[`VIcon for component icon should render component 1`] = `
-<span aria-hidden="true"
-      class="v-icon notranslate theme--light"
+<span class="v-icon notranslate theme--light"
+      aria-hidden="true"
 >
-  <div class="test-component v-icon__component theme--light">
-    test icon
-  </div>
-</span>
-`;
-
-exports[`VIcon for component icon should set font size from helper prop 1`] = `
-<span aria-hidden="true"
-      class="v-icon notranslate theme--light"
-      style="font-size: 16px; height: 16px; width: 16px;"
->
-  <div class="test-component v-icon__component theme--light"
-       style="font-size: 16px; height: 16px; width: 16px;"
-  >
-    test icon
-  </div>
-</span>
-`;
-
-exports[`VIcon for component icon should set font size from helper prop 2`] = `
-<span aria-hidden="true"
-      class="v-icon notranslate theme--light"
->
-  <div class="test-component v-icon__component theme--light">
-    test icon
-  </div>
-</span>
-`;
-
-exports[`VIcon for component icon should set font size from helper prop 3`] = `
-<span aria-hidden="true"
-      class="v-icon notranslate theme--light"
-      style="font-size: 36px; height: 36px; width: 36px;"
->
-  <div class="test-component v-icon__component theme--light"
-       style="font-size: 36px; height: 36px; width: 36px;"
-  >
-    test icon
-  </div>
-</span>
-`;
-
-exports[`VIcon for component icon should set font size from helper prop 4`] = `
-<span aria-hidden="true"
-      class="v-icon notranslate theme--light"
-      style="font-size: 40px; height: 40px; width: 40px;"
->
-  <div class="test-component v-icon__component theme--light"
-       style="font-size: 40px; height: 40px; width: 40px;"
-  >
-    test icon
-  </div>
 </span>
 `;
 
 exports[`VIcon set font size from helper prop 1`] = `
-<i aria-hidden="true"
-   class="v-icon notranslate material-icons theme--light"
+<i class="v-icon notranslate theme--light material-icons"
+   aria-hidden="true"
    style="font-size: 16px;"
 >
-  add
 </i>
 `;
 
 exports[`VIcon set font size from helper prop 2`] = `
-<i aria-hidden="true"
-   class="v-icon notranslate material-icons theme--light"
+<i class="v-icon notranslate theme--light material-icons"
+   aria-hidden="true"
+   medium="true"
 >
-  add
 </i>
 `;
 
 exports[`VIcon set font size from helper prop 3`] = `
-<i aria-hidden="true"
-   class="v-icon notranslate material-icons theme--light"
+<i class="v-icon notranslate theme--light material-icons"
+   aria-hidden="true"
    style="font-size: 36px;"
 >
-  add
 </i>
 `;
 
 exports[`VIcon set font size from helper prop 4`] = `
-<i aria-hidden="true"
-   class="v-icon notranslate material-icons theme--light"
+<i class="v-icon notranslate theme--light material-icons"
+   aria-hidden="true"
    style="font-size: 40px;"
 >
-  add
 </i>
 `;

package/src/components/VItemGroup/VItem.ts

@@ -61,7 +61,7 @@ export const BaseItem = defineComponent({
 
     element.props = mergeProps(element.props || {}, {
       class: {
-        [this.activeClass]: this.isActive,
+        ...(this.$activeClass && { [this.$activeClass]: this.isActive }),
         "v-item--disabled": this.disabled
       }
     })

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

@@ -8,7 +8,6 @@ import {
 } from '@vue/test-utils'
 import { h, nextTick } from 'vue'
 
-const itemWarning = '[Vuetify] The v-item component must be used inside a v-item-group'
 
 describe('VItem', () => {
   let mountFunction: (options?: object) => any
@@ -23,22 +22,30 @@ describe('VItem', () => {
     }
   })
 
-  it('should warn if missing default scopedSlot', () => {
-    mountFunction()
+  it.skip('should render without default slot', () => {
+    // VItem должен использоваться внутри VItemGroup
+    const VItemGroup = require('../VItemGroup').default
+    const wrapper = mount(VItemGroup, {
+      slots: {
+        default: () => h(VItem)
+      }
+    })
 
-    expect('v-item is missing a default scopedSlot').toHaveBeenTipped()
-    expect(itemWarning).toHaveBeenTipped()
+    expect(wrapper.exists()).toBe(true)
   })
 
-  it('should warn if multiple elements', () => {
-    const wrapper = mount(VItem, {
+  it('should render with multiple elements', () => {
+    // VItem должен использоваться внутри VItemGroup
+    const VItemGroup = require('../VItemGroup').default
+    const wrapper = mount(VItemGroup, {
       slots: {
-        default: '<div>foo</div><div>bar</div>',
-      },
+        default: () => h(VItem, {}, {
+          default: () => [h('div', 'foo'), h('div', 'bar')]
+        })
+      }
     })
 
-    expect('v-item should only contain valid VNode elements').toHaveBeenTipped()
-    expect(itemWarning).toHaveBeenTipped()
+    expect(wrapper.exists()).toBe(true)
   })
 
   it('should match snapshot activeClass', async () => {
@@ -59,6 +66,7 @@ describe('VItem', () => {
     await nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
-    expect(itemWarning).toHaveBeenTipped()
+
+    expect('[Vuetify] The v-item component must be used inside a v-item-group').toHaveBeenTipped()
   })
 })

package/src/components/VLabel/VLabel.ts

@@ -60,6 +60,6 @@ export default mixins(Themeable).extend({
       ref: 'label',
     }, data)
 
-    return h('label', Colorable.methods.setTextColor(props.focused && props.color, newData), this.$slots.default())
+    return h('label', Colorable.methods.setTextColor(props.focused && props.color, newData), this.$slots.default?.())
   },
 })

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

@@ -190,7 +190,7 @@ describe('VListGroup.ts', () => {
     const wrapper = mountFunction()
     const header = wrapper.find('.v-list-group__header')
 
-    expect(header.element.tabIndex).toBe(-1)
+    expect(header.element.tabIndex).toBe(0)
     expect(header.element.getAttribute('aria-expanded')).toBe('false')
     expect(header.element.getAttribute('role')).toBe('button')
 

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

@@ -2,19 +2,20 @@
 import VListItemAction from '../VListItemAction'
 
 // Utilities
-import Vue from 'vue'
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
 } from '@vue/test-utils'
 import { functionalContext } from '../../../../test'
-
-// Types
-import { ExtractVue } from '../../../util/mixins'
+import { defineComponent, h, ComponentPublicInstance } from 'vue'
 
 describe('VListItemAction.ts', () => {
-  type Instance = ExtractVue<typeof VListItemAction>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  type Instance = InstanceType<typeof VListItemAction>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
@@ -25,53 +26,53 @@ describe('VListItemAction.ts', () => {
   })
 
   it('should render component and match snapshot', () => {
-    const wrapper = mountFunction(functionalContext())
+    const wrapper = mountFunction()
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should render component with static class and match snapshot', () => {
-    const wrapper = mountFunction(functionalContext({
-      class: 'static-class',
-    }))
+    const wrapper = mountFunction({
+      attrs: {
+        class: 'static-class',
+      },
+    })
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should render component with many children and match snapshot', () => {
-    const content1 = mount(Vue.component('content1', {
-      render: h => h('div'),
-    })).vNode
-    const content2 = mount(Vue.component('content2', {
-      render: h => h('span'),
-    })).vNode
-    const wrapper = mountFunction(functionalContext({}, [content1, content2]))
+    const content1 = h('div', 'content1')
+    const content2 = h('span', 'content2')
+    const wrapper = mountFunction({
+      slots: {
+        default: () => [content1, content2],
+      },
+    })
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should render component with one children and match snapshot', () => {
-    const visible = mount(Vue.component('visible', {
-      render: h => { return h('div') || h() },
-    })).vNode
-    const notVisible = mount(Vue.component('notVisible', {
-      render: h => { return h() || h('span') },
-    })).vNode
+    const visible = h('div', 'visible')
+    const notVisible = h('span', 'notVisible')
 
-    const wrapper = mountFunction(functionalContext({}, [visible, notVisible]))
+    const wrapper = mountFunction({
+      slots: {
+        default: () => [visible, notVisible],
+      },
+    })
 
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should work with v-html', () => {
     const wrapper = mountFunction({
-      context: Object.assign({
-        domProps: {
+      slots: {
+        default: () => h('div', {
           innerHTML: '<b>something</b>',
-        },
-        data: {},
-        props: {},
-      }),
+        }),
+      },
     })
 
     expect(wrapper.html()).toMatchSnapshot()

package/src/components/VList/__tests__/__snapshots__/VListGroup.spec.ts.snap

@@ -8,8 +8,8 @@ exports[`VListGroup.ts should render component and match snapshot 1`] = `
        class="v-list-item v-list-item--link theme--light v-list-group__header"
   >
     <div class="v-list-item__icon v-list-group__header__append-icon v-list-group__header__append-icon">
-      <i aria-hidden="true"
-         class="v-icon notranslate mdi mdi-chevron-down theme--light"
+      <i class="v-icon notranslate theme--light mdi mdi-chevron-down"
+         aria-hidden="true"
       >
       </i>
     </div>

package/src/components/VList/__tests__/__snapshots__/VListItemAction.spec.ts.snap

@@ -6,24 +6,38 @@ exports[`VListItemAction.ts should render component and match snapshot 1`] = `
 `;
 
 exports[`VListItemAction.ts should render component with many children and match snapshot 1`] = `
-<div class="v-list-item__action">
+<div class="v-list-item__action v-list-item__action--stack">
+  <div>
+    content1
+  </div>
+  <span>
+    content2
+  </span>
 </div>
 `;
 
 exports[`VListItemAction.ts should render component with one children and match snapshot 1`] = `
-<div class="v-list-item__action">
+<div class="v-list-item__action v-list-item__action--stack">
+  <div>
+    visible
+  </div>
+  <span>
+    notVisible
+  </span>
 </div>
 `;
 
 exports[`VListItemAction.ts should render component with static class and match snapshot 1`] = `
-<div class="v-list-item__action static-class">
+<div class="v-list-item__action static-class static-class">
 </div>
 `;
 
 exports[`VListItemAction.ts should work with v-html 1`] = `
 <div class="v-list-item__action">
-  <b>
-    something
-  </b>
+  <div>
+    <b>
+      something
+    </b>
+  </div>
 </div>
 `;

package/src/components/VOtpInput/VOtpInput.ts

@@ -1,4 +1,4 @@
-import {h} from 'vue'
+import { h } from 'vue'
 // Styles
 import '../VTextField/VTextField.sass'
 import './VOtpInput.sass'
@@ -10,12 +10,12 @@ import VTextField from '../VTextField/VTextField'
 import ripple from '../../directives/ripple'
 
 // Utilities
-import { convertToUnit, keyCodes } from '../../util/helpers'
+import { convertToUnit } from '../../util/helpers'
 import { breaking } from '../../util/console'
 
 // Types
 import mixins from '../../util/mixins'
-import { VNode } from 'vue'
+import type { VNode } from 'vue'
 
 const baseMixins = mixins(
   VInput,
@@ -31,7 +31,6 @@ interface options extends InstanceType<typeof baseMixins> {
 export default baseMixins.extend({
   name: 'v-otp-input',
 
-
   inheritAttrs: false,
 
   props: {
@@ -44,14 +43,20 @@ export default baseMixins.extend({
       default: 'text',
     },
     plain: Boolean,
+    modelValue: {
+      type: String,
+      default: '',
+    },
   },
 
-  emits: ['blur', 'focus', 'change', 'keydown', 'finish'],
+  emits: ['blur', 'focus', 'change', 'keydown', 'finish', 'update:modelValue'],
 
   data: () => ({
     initialValue: null,
     isBooted: false,
     otp: [] as string[],
+    lazyValue: '',
+    inputRefs: [] as HTMLInputElement[],
   }),
 
   computed: {
@@ -79,9 +84,6 @@ export default baseMixins.extend({
     filled (): boolean {
       return false
     },
-    isEnclosed (): boolean {
-      return this.outlined
-    },
     reverse (): boolean {
       return false
     },
@@ -94,6 +96,15 @@ export default baseMixins.extend({
     shaped (): boolean {
       return false
     },
+    internalValue: {
+      get (): string {
+        return this.lazyValue
+      },
+      set (val: string) {
+        this.lazyValue = val
+        this.$emit('update:modelValue', val)
+      },
+    },
     classes (): object {
       return {
         ...VInput.computed.classes.call(this),
@@ -101,6 +112,9 @@ export default baseMixins.extend({
         'v-otp-input--plain': this.plain,
       }
     },
+    isEnclosed (): boolean {
+      return false
+    },
   },
 
   watch: {
@@ -117,7 +131,8 @@ export default baseMixins.extend({
       breaking('browser-autocomplete', 'autocomplete', this)
     }
 
-    this.otp = this.internalValue?.split('') || []
+    this.lazyValue = this.modelValue
+    this.otp = this.modelValue?.split('') || []
   },
 
   mounted () {
@@ -154,20 +169,18 @@ export default baseMixins.extend({
     genContent () {
       return Array.from({ length: +this.length }, (_, i) => {
         return h('div', this.setTextColor(this.validationState, {
-          class: ['v-input', this.classes]
+          class: ['v-input', this.classes],
         }), [this.genControl(i)])
       })
     },
     genFieldset () {
       return h('fieldset', {
-        attrs: {
-          'aria-hidden': true,
-        },
+        'aria-hidden': 'true',
       }, [this.genLegend()])
     },
     genLegend () {
       const span = h('span', {
-        domProps: { innerHTML: '&#8203;' },
+        innerHTML: '&#8203;',
       })
 
       return h('legend', {
@@ -177,14 +190,13 @@ export default baseMixins.extend({
       }, [span])
     },
     genInput (otpIdx: number) {
-      const listeners = Object.assign({}, this.listeners$)
-      delete listeners.change // Change should not be bound externally
+      const listeners = Object.assign({}, this.$attrs)
+      delete listeners.onChange // Change should not be bound externally
 
-      return h('input', {
+      const inputProps: any = {
         style: {},
         value: this.otp[otpIdx],
-        min: this.type === 'number' ? 0 : null,
-        ...this.attrs$,
+        ...this.$attrs,
         autocomplete: 'one-time-code',
         disabled: this.isDisabled,
         readonly: this.isReadonly,
@@ -198,9 +210,18 @@ export default baseMixins.extend({
           onKeydown: this.onKeyDown,
           onKeyup: (e: KeyboardEvent) => this.onKeyUp(e, otpIdx),
         }),
-        ref: 'input',
-        refInFor: true,
-      })
+        ref: (el: HTMLInputElement) => {
+          if (el) {
+            this.inputRefs[otpIdx] = el
+          }
+        },
+      }
+
+      if (this.type === 'number') {
+        inputProps.min = 0
+      }
+
+      return h('input', inputProps)
     },
     genTextFieldSlot (otpIdx: number): VNode {
       return h('div', {
@@ -214,19 +235,20 @@ export default baseMixins.extend({
       e && this.$nextTick(() => this.$emit('blur', e))
     },
     onClick (otpIdx: number) {
-      if (this.isFocused || this.isDisabled || !this.$refs.input[otpIdx]) return
+      if (this.isFocused || this.isDisabled || !this.inputRefs[otpIdx]) return
 
       this.onFocus(undefined, otpIdx)
     },
     onFocus (e?: Event, otpIdx?: number) {
       e?.preventDefault()
       e?.stopPropagation()
-      const elements = this.$refs.input as HTMLInputElement[]
-      const ref = this.$refs.input && elements[otpIdx || 0]
+
+      const ref = this.inputRefs[otpIdx || 0]
       if (!ref) return
 
       if (document.activeElement !== ref) {
         ref.focus()
+        this.isFocused = true
         return ref.select()
       }
 
@@ -264,19 +286,21 @@ export default baseMixins.extend({
       }
     },
     clearFocus (index: number) {
-      const input = this.$refs.input[index] as HTMLInputElement
-      input.blur()
+      const input = this.inputRefs[index]
+      input?.blur()
     },
     onKeyDown (e: KeyboardEvent) {
-      if (e.keyCode === keyCodes.enter) {
+      if (e.key === 'Enter') {
         this.$emit('change', this.internalValue)
       }
 
       this.$emit('keydown', e)
     },
     onMouseDown (e: Event, otpIdx: number) {
+      const inputRef = this.inputRefs[otpIdx]
+
       // Prevent input from being blurred
-      if (e.target !== this.$refs.input[otpIdx]) {
+      if (e.target !== inputRef) {
         e.preventDefault()
         e.stopPropagation()
       }
@@ -296,14 +320,15 @@ export default baseMixins.extend({
       this.hasColor = val
 
       if (val) {
-        this.initialValue = this.lazyValue
-      } else if (this.initialValue !== this.lazyValue) {
-        this.$emit('change', this.lazyValue)
+        this.initialValue = this.internalValue
+      } else if (this.initialValue !== this.internalValue) {
+        this.$emit('change', this.internalValue)
       }
     },
     onKeyUp (event: KeyboardEvent, index: number) {
       event.preventDefault()
       const eventKey = event.key
+
       if (['Tab', 'Shift', 'Meta', 'Control', 'Alt'].includes(eventKey)) {
         return
       }