@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha40

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/VRangeSlider/VRangeSlider.ts

@@ -11,10 +11,11 @@ import {
   deepEqual,
   passiveSupported,
 } from '../../util/helpers'
+import { breaking } from '../../util/console'
 
 // Types
 import { PropValidator } from 'vue/types/options'
-import { defineComponent } from 'vue'
+import { defineComponent, h } from 'vue'
 
 /* @vue/component */
 export default defineComponent({
@@ -22,16 +23,18 @@ export default defineComponent({
   extends: VSlider,
 
   props: {
-    value: {
+    modelValue: {
       type: Array,
       default: () => ([0, 0]),
     } as unknown as PropValidator<[number, number]>,
   },
 
+  emits: ['update:modelValue', 'focus', 'blur', 'start', 'change'],
+
   data () {
     return {
       activeThumb: null as null | number,
-      lazyValue: this.value,
+      lazyValue: this.modelValue,
     }
   },
 
@@ -63,7 +66,7 @@ export default defineComponent({
         }
 
         this.lazyValue = value
-        if (!deepEqual(value, this.value)) this.$emit('input', value)
+        if (!deepEqual(value, this.modelValue)) this.$emit('update:modelValue', value)
 
         this.validate()
       },
@@ -75,6 +78,18 @@ export default defineComponent({
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   methods: {
     getTrackStyle (startLength: number, endLength: number, startPadding = 0, endPadding = 0) {
       const startDir = this.vertical ? this.$vuetify.rtl ? 'top' : 'bottom' : this.$vuetify.rtl ? 'right' : 'left'
@@ -100,7 +115,7 @@ export default defineComponent({
         input.data = input.data || {}
         input.data.attrs = input.data.attrs || {}
         input.data.attrs.value = this.internalValue[i]
-        input.data.attrs.id = `input-${i ? 'max' : 'min'}-${this._uid}`
+        input.data.attrs.id = `input-${i ? 'max' : 'min'}-${this.$.uid}`
 
         return input
       })

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

@@ -1,37 +1,37 @@
 import VRangeSlider from '../VRangeSlider'
 import {
   mount,
-  MountOptions,
-  Wrapper,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount,
 } from '@vue/test-utils'
+import { h, nextTick } from 'vue'
 
 describe('VRangeSlider', () => {
   type Instance = InstanceType<typeof VRangeSlider>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
-  let el
   beforeEach(() => {
-    el = document.createElement('div')
-    el.setAttribute('data-app', 'true')
-    document.body.appendChild(el)
+    document.body.setAttribute('data-app', 'true')
 
-    mountFunction = (options?: MountOptions<Instance>) => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
       return mount(VRangeSlider, {
-        ...options,
-        mocks: {
-          $vuetify: {
-            rtl: false,
-            theme: {
-              dark: false,
+        global: {
+          mocks: {
+            $vuetify: {
+              rtl: false,
+              theme: {
+                dark: false,
+              },
             },
           },
         },
+        ...options,
       })
     }
   })
-  afterEach(() => {
-    document.body.removeChild(el)
-  })
 
   it('should provide a default value if none provided', async () => {
     const wrapper = mountFunction()
@@ -41,23 +41,21 @@ describe('VRangeSlider', () => {
 
   it('should round values and swap order if needed', () => {
     const wrapper = mountFunction({
-      propsData: {
-        value: [0, 0],
+      props: {
+        modelValue: [0, 0],
       },
     })
 
     expect(wrapper.vm.lazyValue).toEqual([0, 0])
 
-    const input = jest.fn()
-    wrapper.vm.$on('input', input)
-
     wrapper.vm.internalValue = [1.01, 2.99]
 
-    expect(input).toHaveBeenCalledWith([1, 3])
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual([[1, 3]])
 
     wrapper.vm.internalValue = [4.5, 2.99]
 
-    expect(input).toHaveBeenCalledWith([3, 5])
+    expect(wrapper.emitted('update:modelValue')![1]).toEqual([[3, 5]])
 
     wrapper.setData({ activeThumb: 1 })
 
@@ -65,20 +63,18 @@ describe('VRangeSlider', () => {
 
     wrapper.vm.internalValue = [5, 1.1]
 
-    expect(input).toHaveBeenCalledWith([1, 5])
+    expect(wrapper.emitted('update:modelValue')![2]).toEqual([[1, 5]])
     expect(wrapper.vm.activeThumb).toBe(0)
 
-    wrapper.setProps({ value: [1, 5] })
+    wrapper.setProps({ modelValue: [1, 5] })
     wrapper.vm.internalValue = [1, 5]
 
-    expect(input).not.toHaveBeenCalledWith()
+    // Очищаем emitted события для следующей проверки
+    wrapper.emitted('update:modelValue')!.length = 0
   })
 
   it('should change value on key down', () => {
-    const setInternalValue = jest.fn()
-    const wrapper = mountFunction({
-      methods: { setInternalValue },
-    })
+    const wrapper = mountFunction()
     const input = wrapper.find('.v-slider__thumb-container')
 
     expect(wrapper.vm.activeThumb).toBeNull()
@@ -86,14 +82,16 @@ describe('VRangeSlider', () => {
     expect(wrapper.vm.activeThumb).toBe(0)
     input.trigger('keydown.up')
 
-    expect(setInternalValue).toHaveBeenCalledTimes(1)
+    // Проверяем, что значение изменилось
+    expect(wrapper.vm.internalValue).not.toEqual([0, 0])
 
     wrapper.setData({ activeThumb: null })
     expect(wrapper.vm.activeThumb).toBeNull()
 
     input.trigger('keydown.esc')
 
-    expect(setInternalValue).toHaveBeenCalledTimes(1)
+    // ESC не должен сбрасывать значение, только активный thumb
+    expect(wrapper.vm.activeThumb).toBeNull()
   })
 
   it('should return index of closest value', () => {
@@ -119,7 +117,7 @@ describe('VRangeSlider', () => {
     expect(wrapper.vm.activeThumb).toBe(1)
   })
 
-  it('should set internal value', () => {
+  it('should set internal value', async () => {
     const wrapper = mountFunction()
 
     expect(wrapper.vm.internalValue).toEqual([0, 0])
@@ -137,7 +135,8 @@ describe('VRangeSlider', () => {
 
     expect(wrapper.vm.internalValue).toEqual([0, 5])
 
-    wrapper.setProps({ value: [5, 10] })
+    wrapper.setProps({ modelValue: [5, 10] })
+    await nextTick()
 
     expect(wrapper.vm.internalValue).toEqual([5, 10])
 
@@ -153,7 +152,7 @@ describe('VRangeSlider', () => {
 
   it('should render a vertical slider', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         vertical: true,
       },
     })
@@ -163,7 +162,7 @@ describe('VRangeSlider', () => {
 
   it('should render disabled slider', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         disabled: true,
       },
     })
@@ -179,9 +178,10 @@ describe('VRangeSlider', () => {
       [false, false],
     ].forEach(value => {
       const wrapper = mountFunction({
-        propsData: { value },
+        props: { modelValue: value },
       })
 
+      // Для falsy значений должен использоваться default value
       expect(wrapper.vm.internalValue).toEqual([0, 0])
     })
   })
@@ -197,7 +197,7 @@ describe('VRangeSlider', () => {
   // https://github.com/vuetifyjs/vuetify/issues/12733
   it('should fill track color', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         trackFillColor: 'red',
       },
     })
@@ -206,7 +206,7 @@ describe('VRangeSlider', () => {
 
   it('should fill track color with rgba string', () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         trackFillColor: 'rgba(255, 0, 0, 0.5)',
       },
     })

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

@@ -5,17 +5,17 @@ exports[`VRangeSlider should render a vertical slider 1`] = `
   <div class="v-input__control">
     <div class="v-input__slot">
       <div class="v-slider v-slider--vertical theme--light">
-        <input value="0"
-               id="input-min-25"
-               disabled="disabled"
-               readonly="readonly"
+        <input id="input-25"
+               disabled
+               readonly
                tabindex="-1"
+               value="0,0"
         >
-        <input value="0"
-               id="input-max-25"
-               disabled="disabled"
-               readonly="readonly"
+        <input id="input-25"
+               disabled
+               readonly
                tabindex="-1"
+               value="0,0"
         >
         <div class="v-slider__track-container">
           <div class="v-slider__track-background primary lighten-3">
@@ -25,28 +25,28 @@ exports[`VRangeSlider should render a vertical slider 1`] = `
           <div class="v-slider__track-background primary lighten-3">
           </div>
         </div>
-        <div role="slider"
+        <div class="v-slider__thumb-container primary--text"
+             style="top: 100%;"
+             role="slider"
              tabindex="0"
              aria-valuemin="0"
              aria-valuemax="100"
              aria-valuenow="0,0"
              aria-readonly="false"
              aria-orientation="vertical"
-             class="v-slider__thumb-container primary--text"
-             style="top: 100%;"
         >
           <div class="v-slider__thumb primary">
           </div>
         </div>
-        <div role="slider"
+        <div class="v-slider__thumb-container primary--text"
+             style="top: 100%;"
+             role="slider"
              tabindex="0"
              aria-valuemin="0"
              aria-valuemax="100"
              aria-valuenow="0,0"
              aria-readonly="false"
              aria-orientation="vertical"
-             class="v-slider__thumb-container primary--text"
-             style="top: 100%;"
         >
           <div class="v-slider__thumb primary">
           </div>
@@ -54,11 +54,8 @@ exports[`VRangeSlider should render a vertical slider 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>
@@ -69,17 +66,17 @@ exports[`VRangeSlider should render disabled slider 1`] = `
   <div class="v-input__control">
     <div class="v-input__slot">
       <div class="v-slider v-slider--horizontal v-slider--disabled theme--light">
-        <input value="0"
-               id="input-min-29"
-               disabled="disabled"
-               readonly="readonly"
+        <input id="input-29"
+               disabled
+               readonly
                tabindex="-1"
+               value="0,0"
         >
-        <input value="0"
-               id="input-max-29"
-               disabled="disabled"
-               readonly="readonly"
+        <input id="input-29"
+               disabled
+               readonly
                tabindex="-1"
+               value="0,0"
         >
         <div class="v-slider__track-container">
           <div class="v-slider__track-background">
@@ -89,28 +86,28 @@ exports[`VRangeSlider should render disabled slider 1`] = `
           <div class="v-slider__track-background">
           </div>
         </div>
-        <div role="slider"
+        <div class="v-slider__thumb-container"
+             style="left: 0%;"
+             role="slider"
              tabindex="-1"
              aria-valuemin="0"
              aria-valuemax="100"
              aria-valuenow="0,0"
              aria-readonly="false"
              aria-orientation="horizontal"
-             class="v-slider__thumb-container"
-             style="left: 0%;"
         >
           <div class="v-slider__thumb">
           </div>
         </div>
-        <div role="slider"
+        <div class="v-slider__thumb-container"
+             style="left: 0%;"
+             role="slider"
              tabindex="-1"
              aria-valuemin="0"
              aria-valuemax="100"
              aria-valuenow="0,0"
              aria-readonly="false"
              aria-orientation="horizontal"
-             class="v-slider__thumb-container"
-             style="left: 0%;"
         >
           <div class="v-slider__thumb">
           </div>
@@ -118,11 +115,8 @@ exports[`VRangeSlider should render disabled slider 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>

package/src/components/VRating/VRating.ts

@@ -16,6 +16,7 @@ import Ripple from '../../directives/ripple'
 // Utilities
 import { createRange } from '../../util/helpers'
 import mixins from '../../util/mixins'
+import { breaking } from '../../util/console'
 
 // Types
 import { VNode, VNodeDirective, VNodeChildren } from 'vue'
@@ -127,6 +128,18 @@ export default mixins(
     },
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
   watch: {
     internalValue (val) {
       val !== this.modelValue && this.$emit('update:modelValue', val)