@dimailn/vuetify 2.7.2-alpha32 → 2.7.2-alpha34

package/src/components/VRadioGroup/__tests__/__snapshots__/VRadio.spec.ts.snap

@@ -3,16 +3,14 @@
 exports[`VRadio.ts should be render colored radio 1`] = `
 <div class="v-radio theme--light">
   <div class="v-input--selection-controls__input">
-    <i aria-hidden="true"
-       class="v-icon notranslate material-icons theme--light"
+    <i class="v-icon notranslate theme--light mdi mdi-radiobox-blank"
+       aria-hidden="true"
     >
-      $radioOff
     </i>
     <input aria-checked="false"
-           id="input-22"
+           id="input-29"
            role="radio"
            type="radio"
-           value
     >
     <div class="v-input--selection-controls__ripple">
     </div>
@@ -23,16 +21,15 @@ exports[`VRadio.ts should be render colored radio 1`] = `
 exports[`VRadio.ts should not render aria-label attribute with no label value on input group 1`] = `
 <div class="v-radio theme--light">
   <div class="v-input--selection-controls__input">
-    <i aria-hidden="true"
-       class="v-icon notranslate material-icons theme--light"
+    <i class="v-icon notranslate theme--light mdi mdi-radiobox-blank"
+       aria-hidden="true"
     >
-      $radioOff
     </i>
     <input aria-checked="false"
-           id="input-4"
+           id="input-5"
            role="radio"
            type="radio"
-           value
+           name="name"
     >
     <div class="v-input--selection-controls__ripple">
     </div>
@@ -43,17 +40,15 @@ exports[`VRadio.ts should not render aria-label attribute with no label value on
 exports[`VRadio.ts should render proper input name 1`] = `
 <div class="v-radio theme--light">
   <div class="v-input--selection-controls__input">
-    <i aria-hidden="true"
-       class="v-icon notranslate material-icons theme--light"
+    <i class="v-icon notranslate theme--light mdi mdi-radiobox-blank"
+       aria-hidden="true"
     >
-      $radioOff
     </i>
     <input aria-checked="false"
-           id="input-7"
+           id="input-9"
            role="radio"
            type="radio"
            name="name"
-           value
     >
     <div class="v-input--selection-controls__ripple">
     </div>
@@ -64,18 +59,19 @@ exports[`VRadio.ts should render proper input name 1`] = `
 exports[`VRadio.ts should render role and aria-checked attributes on input group 1`] = `
 <div class="v-radio theme--light">
   <div class="v-input--selection-controls__input">
-    <i aria-hidden="true"
-       class="v-icon notranslate material-icons theme--light primary--text"
+    <i class="v-icon notranslate theme--light mdi mdi-radiobox-blank"
+       aria-hidden="true"
     >
-      $radioOn
     </i>
-    <input aria-checked="true"
+    <input aria-checked="false"
            id="input-1"
            role="radio"
            type="radio"
-           value
+           name="name"
+           modelvalue="test"
+           value="test"
     >
-    <div class="v-input--selection-controls__ripple primary--text">
+    <div class="v-input--selection-controls__ripple">
     </div>
   </div>
 </div>
@@ -84,16 +80,16 @@ exports[`VRadio.ts should render role and aria-checked attributes on input group
 exports[`VRadio.ts should use custom icons 1`] = `
 <div class="v-radio theme--light">
   <div class="v-input--selection-controls__input">
-    <i aria-hidden="true"
-       class="v-icon notranslate material-icons theme--light"
+    <i class="v-icon notranslate theme--light material-icons"
+       aria-hidden="true"
     >
-      bar
     </i>
     <input aria-checked="false"
-           id="input-13"
+           id="input-17"
            role="radio"
            type="radio"
-           value
+           modelvalue="test"
+           value="test"
     >
     <div class="v-input--selection-controls__ripple">
     </div>
@@ -104,18 +100,18 @@ exports[`VRadio.ts should use custom icons 1`] = `
 exports[`VRadio.ts should use custom icons 2`] = `
 <div class="v-radio theme--light">
   <div class="v-input--selection-controls__input">
-    <i aria-hidden="true"
-       class="v-icon notranslate material-icons theme--light primary--text"
+    <i class="v-icon notranslate theme--light material-icons"
+       aria-hidden="true"
     >
-      foo
     </i>
-    <input aria-checked="true"
-           id="input-13"
+    <input aria-checked="false"
+           id="input-17"
            role="radio"
            type="radio"
-           value
+           modelvalue="test"
+           value="test"
     >
-    <div class="v-input--selection-controls__ripple primary--text">
+    <div class="v-input--selection-controls__ripple">
     </div>
   </div>
 </div>

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

@@ -6,23 +6,21 @@ exports[`VRadioGroup.ts should match dense snapshot 1`] = `
     <div class="v-input__slot"
          style="height: auto;"
     >
-      <div role="radiogroup"
+      <div class="v-input--radio-group__input"
+           role="radiogroup"
            aria-labelledby="input-5"
-           class="v-input--radio-group__input"
       >
         <div class="v-radio theme--light">
           <div class="v-input--selection-controls__input">
-            <i aria-hidden="true"
-               class="v-icon notranslate v-icon--dense material-icons theme--light"
+            <i class="v-icon--dense v-icon notranslate theme--light mdi mdi-radiobox-blank"
+               aria-hidden="true"
             >
-              $radioOff
             </i>
             <input aria-checked="false"
                    id="input-6"
                    role="radio"
                    type="radio"
                    name="radio-5"
-                   value
             >
             <div class="v-input--selection-controls__ripple">
             </div>
@@ -31,11 +29,8 @@ exports[`VRadioGroup.ts should match dense snapshot 1`] = `
       </div>
     </div>
     <div class="v-messages theme--light">
-      <span name="message-transition"
-            tag="div"
-            class="v-messages__wrapper"
-      >
-      </span>
+      <div class="v-messages__wrapper">
+      </div>
     </div>
   </div>
 </div>
@@ -47,18 +42,15 @@ exports[`VRadioGroup.ts should match snapshot 1`] = `
     <div class="v-input__slot"
          style="height: auto;"
     >
-      <div role="radiogroup"
+      <div class="v-input--radio-group__input"
+           role="radiogroup"
            aria-labelledby="input-1"
-           class="v-input--radio-group__input"
       >
       </div>
     </div>
     <div class="v-messages theme--light">
-      <span name="message-transition"
-            tag="div"
-            class="v-messages__wrapper"
-      >
-      </span>
+      <div class="v-messages__wrapper">
+      </div>
     </div>
   </div>
 </div>

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

@@ -6,9 +6,12 @@ import VRating from '../VRating'
 
 // Utilities
 import {
-  mount
+  mount,
+  VueWrapper,
+  MountingOptions,
 } from '@vue/test-utils'
 import { mergeDeep } from '../../../util/helpers'
+import { nextTick } from 'vue'
 
 
 const $vuetify = {
@@ -25,13 +28,12 @@ const $vuetify = {
 }
 
 describe('VRating.ts', () => {
-  // type Instance = ExtractVue<typeof VRating>
-  let mountFunction//: (options?: object) => Wrapper<Instance>
+  type Instance = InstanceType<typeof VRating>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
 
   beforeEach(() => {
-    mountFunction = (options: MountOptions<Instance>) => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
       return mount(VRating, mergeDeep({
-        // https://github.com/vuejs/vue-test-utils/issues/1130
         global: {
           config: {
             globalProperties: {
@@ -55,13 +57,13 @@ describe('VRating.ts', () => {
 
     wrapper.setProps({ readonly: false })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.vm.directives[0][1].isDirActive).toBe(true)
 
     wrapper.setProps({ ripple: false })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.vm.directives[0][1].isDirActive).toBe(false)
   })
@@ -72,7 +74,7 @@ describe('VRating.ts', () => {
     expect(wrapper.vm.internalValue).toBe(0)
 
     wrapper.setProps({ modelValue: 1 })
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.vm.internalValue).toBe(1)
 
@@ -82,7 +84,7 @@ describe('VRating.ts', () => {
 
     icon.trigger('click')
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.emitted()).toHaveProperty('update:modelValue')
     expect(wrapper.emitted()['update:modelValue'][0][0]).toBe(2)
@@ -94,7 +96,7 @@ describe('VRating.ts', () => {
     expect(wrapper.vm.internalValue).toBe(0)
 
     wrapper.setProps({ modelValue: 1, clearable: false })
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.vm.internalValue).toBe(1)
 
@@ -102,17 +104,17 @@ describe('VRating.ts', () => {
 
     icon.trigger('click')
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.vm.internalValue).toBe(1)
 
     wrapper.setProps({ clearable: true })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     icon.trigger('click')
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.vm.internalValue).toBe(0)
   })
@@ -128,17 +130,17 @@ describe('VRating.ts', () => {
 
     icon.trigger('click')
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.emitted()).not.toHaveProperty('update:modelValue')
 
     wrapper.setProps({ readonly: false })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     icon.trigger('click')
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.emitted()).toHaveProperty('update:modelValue')
     expect(wrapper.emitted()['update:modelValue'][0][0]).toBe(1)
@@ -180,7 +182,7 @@ describe('VRating.ts', () => {
 
     wrapper.setProps({ halfIncrements: true })
 
-    await wrapper.vm.$nextTick()
+    await nextTick()
 
     expect(wrapper.vm.genHoverIndex({
       pageX: 0,
@@ -212,25 +214,21 @@ describe('VRating.ts', () => {
     })
 
     const event = new MouseEvent('hover')
-    expect(wrapper.vm.genHoverIndex(event, 1)).toBe(1.5)
-
-    wrapper.setProps({ halfIncrements: true })
-
-    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.genHoverIndex(event, 1)).toBe(2)
 
     expect(wrapper.vm.genHoverIndex({
       pageX: 0,
       target: {
         getBoundingClientRect: () => ({ width: 10, left: 0 }),
       },
-    }, 1)).toBe(2)
+    }, 1)).toBe(1.5)
 
     expect(wrapper.vm.genHoverIndex({
       pageX: 6,
       target: {
         getBoundingClientRect: () => ({ width: 10, left: 0 }),
       },
-    }, 1)).toBe(1.5)
+    }, 1)).toBe(2)
   })
 
   it('should render a scoped slot', () => {
@@ -240,10 +238,7 @@ describe('VRating.ts', () => {
       render: () => h(VRating, {}, {item: itemSlot})
     }
 
-    const wrapper = mount(component, {
-      // https://github.com/vuejs/vue-test-utils/issues/1130
-      sync: false,
-    })
+    const wrapper = mount(component)
 
     expect(wrapper.html()).toMatchSnapshot()
   })
@@ -269,7 +264,7 @@ describe('VRating.ts', () => {
   it('should reset hoverIndex on mouse leave', () => {
     jest.useFakeTimers()
     const wrapper = mountFunction({
-      propsData: { hover: true },
+      props: { hover: true },
     })
 
     const icon = wrapper.find('.v-icon')

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

@@ -4,12 +4,17 @@ import VResponsive from '../VResponsive'
 // Utilities
 import {
   mount,
-  Wrapper,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
 } from '@vue/test-utils'
+import { h } from 'vue'
 
 describe('VResponsive.ts', () => {
   type Instance = InstanceType<typeof VResponsive>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
@@ -21,7 +26,7 @@ describe('VResponsive.ts', () => {
 
   it('should force aspect ratio', () => {
     const wrapper = mountFunction({
-      propsData: { aspectRatio: 16 / 9 },
+      props: { aspectRatio: 16 / 9 },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -30,7 +35,7 @@ describe('VResponsive.ts', () => {
   it('should render content', () => {
     const wrapper = mountFunction({
       slots: {
-        default: { render: h => h('div', ['content']) },
+        default: () => h('div', ['content']),
       },
     })
 
@@ -39,7 +44,7 @@ describe('VResponsive.ts', () => {
 
   it('should set height', () => {
     const wrapper = mountFunction({
-      propsData: { height: 100, maxHeight: 200 },
+      props: { height: 100, maxHeight: 200 },
     })
 
     expect(wrapper.html()).toMatchSnapshot()

package/src/components/VSelect/VSelect.ts

@@ -63,6 +63,9 @@ interface options extends InstanceType<typeof baseMixins> {
 export default baseMixins.extend({
   name: 'v-select',
 
+  $_emitChangeEvent: true,
+  $_modelEvent: 'update:modelValue',
+
   props: {
     appendIcon: {
       type: String,
@@ -111,7 +114,7 @@ export default baseMixins.extend({
     smallChips: Boolean,
   },
 
-  emits: ['update:modelValue', 'change', 'focus', 'blur', 'keydown', 'click', 'update:list-index'],
+  emits: ['update:modelValue', 'change', 'focus', 'blur', 'keydown', 'click', 'update:list-index', 'click:clear'],
 
   data () {
     return {
@@ -351,6 +354,7 @@ export default baseMixins.extend({
       this.$nextTick(() => this.$refs.input && this.$refs.input.focus())
 
       if (this.openOnClear) this.isMenuActive = true
+      this.$emit('click:clear')
     },
     closeConditional (e: Event) {
       if (!this.isMenuActive) return true

package/src/components/VSelect/__tests__/VSelect2.spec.ts

@@ -199,7 +199,7 @@ describe('VSelect.ts', () => {
     expect(wrapper.vm.computedCounterValue).toBe(2)
   })
 
-  it('should emit a single change event', async () => {
+  it('should emit a single update:modelValue event', async () => {
     const wrapper = mountFunction({
       attachTo: el,
       props: {
@@ -219,12 +219,12 @@ describe('VSelect.ts', () => {
     wrapper.vm.blur()
     await wrapper.vm.$nextTick()
 
-    const emitted = wrapper.emitted('change')
+    const emitted = wrapper.emitted('update:modelValue')
     expect(emitted).toBeTruthy()
     expect(emitted[0]).toEqual(['foo'])
   })
 
-  it('should not emit change event when clicked on the selected item', async () => {
+  it('should not emit update:modelValue event when clicked on the selected item', async () => {
     const wrapper = mountFunction({
       props: {
         items: ['foo', 'bar'],
@@ -237,7 +237,7 @@ describe('VSelect.ts', () => {
     wrapper.vm.selectItem('foo')
     await wrapper.vm.$nextTick()
 
-    const emitted = wrapper.emitted('change')
+    const emitted = wrapper.emitted('update:modelValue')
     expect(emitted).toHaveLength(1)
   })
 
@@ -376,7 +376,7 @@ describe('VSelect.ts', () => {
     clear.trigger('click')
     await wrapper.vm.$nextTick()
 
-    const emitted = wrapper.emitted('change')
+    const emitted = wrapper.emitted('update:modelValue')
     expect(emitted).toBeTruthy()
     expect(emitted[0]).toEqual([[]])
     expect(wrapper.vm.isMenuActive).toBe(false)

package/src/components/VSelect/__tests__/VSelect3.spec.ts

@@ -52,13 +52,13 @@ describe('VSelect.ts', () => {
     wrapper.vm.selectItem('foo')
 
     expect(wrapper.vm.internalValue).toBe('foo')
-    expect(wrapper.emitted('update:modelValue')).toHaveLength(2)
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
     expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['foo'])
 
     await wrapper.vm.$nextTick()
 
-    expect(wrapper.emitted('change')).toHaveLength(1)
-    expect(wrapper.emitted('change')?.[0]).toEqual(['foo'])
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(1)
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['foo'])
 
     await wrapper.setProps({ returnObject: true })
 
@@ -66,13 +66,13 @@ describe('VSelect.ts', () => {
     wrapper.vm.selectItem(item)
 
     expect(wrapper.vm.internalValue).toStrictEqual(item)
-    expect(wrapper.emitted('update:modelValue')).toHaveLength(4)
-    expect(wrapper.emitted('update:modelValue')?.[3]).toEqual([item])
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(2)
+    expect(wrapper.emitted('update:modelValue')?.[1]).toEqual([item])
 
     await wrapper.vm.$nextTick()
 
-    expect(wrapper.emitted('change')).toHaveLength(2)
-    expect(wrapper.emitted('change')?.[1]).toEqual([item])
+    expect(wrapper.emitted('update:modelValue')).toHaveLength(2)
+    expect(wrapper.emitted('update:modelValue')?.[1]).toEqual([item])
   })
 
   // TODO: this fails without sync, nextTick doesn't help

package/src/components/VSelect/__tests__/VSelect4.spec.ts

@@ -339,12 +339,12 @@ describe('VSelect.ts', () => {
     await wrapper.vm.$nextTick()
     expect(wrapper.emitted('update:list-index')).toBeTruthy()
     expect(wrapper.emitted('update:list-index')).toHaveLength(1)
-    expect(wrapper.emitted('update:list-index')[0]).toEqual([-1])
+    expect(wrapper.emitted('update:list-index')[0]).toEqual([0])
 
     input.trigger('keydown.down')
     await wrapper.vm.$nextTick()
     expect(wrapper.emitted('update:list-index')).toHaveLength(2)
-    expect(wrapper.emitted('update:list-index')[1]).toEqual([-1])
+    expect(wrapper.emitted('update:list-index')[1]).toEqual([1])
   })
 
   it('should close menu when append icon is clicked', async () => {

package/src/components/VSelect/__tests__/__snapshots__/VSelect2.spec.ts.snap

@@ -169,8 +169,8 @@ exports[`VSelect.ts should use slotted append-item 1`] = `
   <div aria-selected="false"
        id="list-item-23-0"
        role="option"
-       tabindex="-1"
-       class="v-list-item theme--light"
+       tabindex="0"
+       class="v-list-item v-list-item--link theme--light"
   >
     <div class="v-list-item__content">
       <div class="v-list-item__title">
@@ -196,8 +196,8 @@ exports[`VSelect.ts should use slotted prepend-item 1`] = `
   <div aria-selected="false"
        id="list-item-8-0"
        role="option"
-       tabindex="-1"
-       class="v-list-item theme--light"
+       tabindex="0"
+       class="v-list-item v-list-item--link theme--light"
   >
     <div class="v-list-item__content">
       <div class="v-list-item__title">