@dimailn/vuetify 2.7.2-alpha40 → 2.7.2-alpha42

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

@@ -6,7 +6,7 @@ import {
   mount,
   MountingOptions,
   VueWrapper,
-  enableAutoUnmount,
+  enableAutoUnmount
 } from '@vue/test-utils'
 
 describe('VRadio.ts', () => {
@@ -25,7 +25,7 @@ describe('VRadio.ts', () => {
     const wrapper = mountFunction({
       props: {
         modelValue: 'test',
-        value: 'test',
+        value: 'test'
       },
       global: {
         provide: {
@@ -33,13 +33,13 @@ describe('VRadio.ts', () => {
             name: 'name',
             isMandatory: false,
             register: () => {},
-            unregister: () => {},
-          },
-        },
-      },
+            unregister: () => {}
+          }
+        }
+      }
     })
 
-    let inputGroup = wrapper.find('input')
+    const inputGroup = wrapper.find('input')
     expect(inputGroup.element.getAttribute('role')).toBe('radio')
     expect(inputGroup.element.getAttribute('aria-checked')).toBe('false')
 
@@ -51,7 +51,7 @@ describe('VRadio.ts', () => {
   it('should not render aria-label attribute with no label value on input group', () => {
     const wrapper = mountFunction({
       props: {
-        label: null,
+        label: null
       },
       global: {
         provide: {
@@ -59,10 +59,10 @@ describe('VRadio.ts', () => {
             name: 'name',
             isMandatory: false,
             register: () => {},
-            unregister: () => {},
-          },
-        },
-      },
+            unregister: () => {}
+          }
+        }
+      }
     })
 
     const inputGroup = wrapper.find('input')
@@ -77,10 +77,10 @@ describe('VRadio.ts', () => {
           radioGroup: {
             name: 'name',
             register: () => {},
-            unregister: () => {},
-          },
-        },
-      },
+            unregister: () => {}
+          }
+        }
+      }
     })
 
     const input = wrapper.find('input')
@@ -106,8 +106,8 @@ describe('VRadio.ts', () => {
         onIcon: 'foo',
         offIcon: 'bar',
         modelValue: 'test',
-        value: 'test',
-      },
+        value: 'test'
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -122,8 +122,8 @@ describe('VRadio.ts', () => {
     const wrapper = mountFunction({
       props: {
         modelValue: 'test',
-        value: 'test',
-      },
+        value: 'test'
+      }
     })
 
     // In Vue 3, the component might need different approach to test reactivity
@@ -148,7 +148,7 @@ describe('VRadio.ts', () => {
 
   it('should be render colored radio', () => {
     const wrapper = mountFunction({
-      props: { color: 'yellow' },
+      props: { color: 'yellow' }
     })
 
     expect(wrapper.html()).toMatchSnapshot()

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

@@ -6,7 +6,7 @@ import VRadioGroup from '../VRadioGroup'
 import {
   mount,
   MountingOptions,
-  VueWrapper,
+  VueWrapper
 } from '@vue/test-utils'
 
 describe('VRadioGroup.ts', () => {
@@ -28,11 +28,11 @@ describe('VRadioGroup.ts', () => {
   it('should match dense snapshot', async () => {
     const wrapper = mountFunction({
       props: {
-        dense: true,
+        dense: true
       },
       slots: {
-        default: [VRadio],
-      },
+        default: [VRadio]
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()

package/src/components/VRadioGroup/index.ts

@@ -6,6 +6,6 @@ export { VRadioGroup, VRadio }
 export default {
   $_vuetify_subcomponents: {
     VRadioGroup,
-    VRadio,
-  },
+    VRadio
+  }
 }

package/src/components/VRangeSlider/VRangeSlider.ts

@@ -9,12 +9,12 @@ import {
   addOnceEventListener,
   createRange,
   deepEqual,
-  passiveSupported,
+  passiveSupported
 } from '../../util/helpers'
 import { breaking } from '../../util/console'
 
 // Types
-import { PropValidator } from 'vue/types/options'
+import { PropType } from 'vue'
 import { defineComponent, h } from 'vue'
 
 /* @vue/component */
@@ -25,8 +25,8 @@ export default defineComponent({
   props: {
     modelValue: {
       type: Array,
-      default: () => ([0, 0]),
-    } as unknown as PropValidator<[number, number]>,
+      default: () => ([0, 0])
+    } as unknown as PropType<[number, number]>
   },
 
   emits: ['update:modelValue', 'focus', 'blur', 'start', 'change'],
@@ -34,7 +34,7 @@ export default defineComponent({
   data () {
     return {
       activeThumb: null as null | number,
-      lazyValue: this.modelValue,
+      lazyValue: this.modelValue
     }
   },
 
@@ -42,7 +42,7 @@ export default defineComponent({
     classes (): object {
       return {
         ...VSlider.computed.classes.call(this),
-        'v-input--range-slider': true,
+        'v-input--range-slider': true
       }
     },
     internalValue: {
@@ -69,19 +69,19 @@ export default defineComponent({
         if (!deepEqual(value, this.modelValue)) this.$emit('update:modelValue', value)
 
         this.validate()
-      },
+      }
     },
     inputWidth (): number[] {
       return this.internalValue.map((v: number) => (
         this.roundValue(v) - this.minValue) / (this.maxValue - this.minValue) * 100
       )
-    },
+    }
   },
 
   created () {
     const breakingProps = [
       ['value', 'modelValue'],
-      ['onInput', 'onUpdate:modelValue'],
+      ['onInput', 'onUpdate:modelValue']
     ]
 
     /* istanbul ignore next */
@@ -101,7 +101,7 @@ export default defineComponent({
       return {
         transition: this.trackTransition,
         [startDir]: start,
-        [endDir]: end,
+        [endDir]: end
       }
     },
     getIndexOfClosestValue (arr: number[], v: number) {
@@ -128,30 +128,30 @@ export default defineComponent({
         {
           class: 'v-slider__track-background',
           color: this.computedTrackColor,
-          styles: [0, this.inputWidth[0], 0, -padding],
+          styles: [0, this.inputWidth[0], 0, -padding]
         },
         {
           class: this.isDisabled ? 'v-slider__track-background' : 'v-slider__track-fill',
           color: this.isDisabled ? this.computedTrackColor : this.computedTrackFillColor,
-          styles: [this.inputWidth[0], Math.abs(this.inputWidth[1] - this.inputWidth[0]), padding, padding * -2],
+          styles: [this.inputWidth[0], Math.abs(this.inputWidth[1] - this.inputWidth[0]), padding, padding * -2]
         },
         {
           class: 'v-slider__track-background',
           color: this.computedTrackColor,
-          styles: [this.inputWidth[1], Math.abs(100 - this.inputWidth[1]), padding, -padding],
-        },
+          styles: [this.inputWidth[1], Math.abs(100 - this.inputWidth[1]), padding, -padding]
+        }
       ]
 
       if (this.$vuetify.rtl) sections.reverse()
 
       children.push(...sections.map(section => h('div', this.setBackgroundColor(section.color, {
         class: section.class,
-        style: this.getTrackStyle(...section.styles),
+        style: this.getTrackStyle(...section.styles)
       }))))
 
       return h('div', {
         class: 'v-slider__track-container',
-        ref: 'track',
+        ref: 'track'
       }, children)
     },
     genChildren () {
@@ -180,7 +180,7 @@ export default defineComponent({
           const isFocused = this.isFocused && this.activeThumb === index
 
           return this.genThumbContainer(value, valueWidth, isActive, isFocused, onFocus, onBlur, `thumb_${index}`)
-        }),
+        })
       ]
     },
     reevaluateSelected (value: number) {
@@ -267,6 +267,6 @@ export default defineComponent({
         if (i === this.activeThumb) return value
         else return Number(v)
       })
-    },
-  },
+    }
+  }
 })

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

@@ -3,7 +3,7 @@ import {
   mount,
   VueWrapper,
   MountingOptions,
-  enableAutoUnmount,
+  enableAutoUnmount
 } from '@vue/test-utils'
 import { h, nextTick } from 'vue'
 
@@ -23,12 +23,12 @@ describe('VRangeSlider', () => {
             $vuetify: {
               rtl: false,
               theme: {
-                dark: false,
-              },
-            },
-          },
+                dark: false
+              }
+            }
+          }
         },
-        ...options,
+        ...options
       })
     }
   })
@@ -42,8 +42,8 @@ describe('VRangeSlider', () => {
   it('should round values and swap order if needed', () => {
     const wrapper = mountFunction({
       props: {
-        modelValue: [0, 0],
-      },
+        modelValue: [0, 0]
+      }
     })
 
     expect(wrapper.vm.lazyValue).toEqual([0, 0])
@@ -153,8 +153,8 @@ describe('VRangeSlider', () => {
   it('should render a vertical slider', async () => {
     const wrapper = mountFunction({
       props: {
-        vertical: true,
-      },
+        vertical: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -163,8 +163,8 @@ describe('VRangeSlider', () => {
   it('should render disabled slider', async () => {
     const wrapper = mountFunction({
       props: {
-        disabled: true,
-      },
+        disabled: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -175,10 +175,10 @@ describe('VRangeSlider', () => {
     [
       [undefined, undefined],
       [null, null],
-      [false, false],
+      [false, false]
     ].forEach(value => {
       const wrapper = mountFunction({
-        props: { modelValue: value },
+        props: { modelValue: value }
       })
 
       // Для falsy значений должен использоваться default value
@@ -198,8 +198,8 @@ describe('VRangeSlider', () => {
   it('should fill track color', () => {
     const wrapper = mountFunction({
       props: {
-        trackFillColor: 'red',
-      },
+        trackFillColor: 'red'
+      }
     })
     expect(wrapper.find('.v-slider__track-fill.red').exists()).toBe(true)
   })
@@ -207,8 +207,8 @@ describe('VRangeSlider', () => {
   it('should fill track color with rgba string', () => {
     const wrapper = mountFunction({
       props: {
-        trackFillColor: 'rgba(255, 0, 0, 0.5)',
-      },
+        trackFillColor: 'rgba(255, 0, 0, 0.5)'
+      }
     })
     const trackFill = wrapper.find('.v-slider__track-fill')
     expect(trackFill.attributes('style')).toBe('background-color: rgba(255, 0, 0, 0.5);')

package/src/components/VRating/VRating.ts

@@ -1,4 +1,4 @@
-import {h, withDirectives} from 'vue'
+import { h, withDirectives } from 'vue'
 // Styles
 import './VRating.sass'
 
@@ -19,7 +19,7 @@ import mixins from '../../util/mixins'
 import { breaking } from '../../util/console'
 
 // Types
-import { VNode, VNodeDirective, VNodeChildren } from 'vue'
+import type { VNode, VNodeChildren } from '../../types/vue-internal'
 
 type ItemSlotProps = {
   index: number
@@ -28,7 +28,7 @@ type ItemSlotProps = {
   isHalfFilled?: boolean | undefined
   isHovered: boolean
   isHalfHovered?: boolean | undefined
-  click: Function
+  onClick: Function
 }
 
 /* @vue/component */
@@ -44,42 +44,42 @@ export default mixins(
   props: {
     backgroundColor: {
       type: String,
-      default: 'accent',
+      default: 'accent'
     },
     color: {
       type: String,
-      default: 'primary',
+      default: 'primary'
     },
     clearable: Boolean,
     dense: Boolean,
     emptyIcon: {
       type: String,
-      default: '$ratingEmpty',
+      default: '$ratingEmpty'
     },
     fullIcon: {
       type: String,
-      default: '$ratingFull',
+      default: '$ratingFull'
     },
     halfIcon: {
       type: String,
-      default: '$ratingHalf',
+      default: '$ratingHalf'
     },
     halfIncrements: Boolean,
     hover: Boolean,
     length: {
       type: [Number, String],
-      default: 5,
+      default: 5
     },
     readonly: Boolean,
     size: [Number, String],
     modelValue: {
       type: Number,
-      default: 0,
+      default: 0
     },
     iconLabel: {
       type: String,
-      default: '$vuetify.rating.ariaLabel.icon',
-    },
+      default: '$vuetify.rating.ariaLabel.icon'
+    }
   },
 
   emits: ['update:modelValue'],
@@ -87,12 +87,12 @@ export default mixins(
   data () {
     return {
       hoverIndex: -1,
-      internalValue: this.modelValue,
+      internalValue: this.modelValue
     }
   },
 
   computed: {
-    directives (): VNodeDirective[] {
+    directives (): any[] {
       return [
         [
           Ripple,
@@ -109,7 +109,7 @@ export default mixins(
         small,
         size,
         xLarge,
-        xSmall,
+        xSmall
       } = this
 
       return {
@@ -120,18 +120,18 @@ export default mixins(
         size,
         small,
         xLarge,
-        xSmall,
+        xSmall
       }
     },
     isHovering (): boolean {
       return this.hover && this.hoverIndex >= 0
-    },
+    }
   },
 
   created () {
     const breakingProps = [
       ['value', 'modelValue'],
-      ['onInput', 'onUpdate:modelValue'],
+      ['onInput', 'onUpdate:modelValue']
     ]
 
     /* istanbul ignore next */
@@ -146,7 +146,7 @@ export default mixins(
     },
     modelValue (val) {
       this.internalValue = val
-    },
+    }
   },
 
   methods: {
@@ -168,7 +168,7 @@ export default mixins(
         value: this.internalValue,
         onClick: this.createClickFn(i),
         isFilled: Math.floor(this.internalValue) > i,
-        isHovered: Math.floor(this.hoverIndex) > i,
+        isHovered: Math.floor(this.hoverIndex) > i
       }
 
       if (this.halfIncrements) {
@@ -227,7 +227,7 @@ export default mixins(
       if (this.$slots.item) return this.$slots.item(props)
 
       const listeners: Record<string, Function> = {
-        onClick: props.onClick,
+        onClick: props.onClick
       }
 
       if (this.hover) {
@@ -242,9 +242,9 @@ export default mixins(
       return withDirectives(h(VIcon, this.setTextColor(this.getColor(props), {
         'aria-label': this.$vuetify.lang.t(this.iconLabel, i + 1, Number(this.length)),
         ...this.iconProps,
-        ...listeners,
-      }), {default: () => [this.getIconName(props)]}), this.directives)
-    },
+        ...listeners
+      }), { default: () => [this.getIconName(props)] }), this.directives)
+    }
   },
 
   render (): VNode {
@@ -254,9 +254,9 @@ export default mixins(
       class: ['v-rating',
         {
           'v-rating--readonly': this.readonly,
-          'v-rating--dense': this.dense,
+          'v-rating--dense': this.dense
         }
       ]
-    }, {default: () => createRange(Number(this.length)).map(i => this.genItem(i)) })
-  },
+    }, { default: () => createRange(Number(this.length)).map(i => this.genItem(i)) })
+  }
 })

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

@@ -1,5 +1,5 @@
 // Libraries
-import {h} from 'vue'
+import { h } from 'vue'
 
 // Components
 import VRating from '../VRating'
@@ -8,12 +8,11 @@ import VRating from '../VRating'
 import {
   mount,
   VueWrapper,
-  MountingOptions,
+  MountingOptions
 } from '@vue/test-utils'
 import { mergeDeep } from '../../../util/helpers'
 import { nextTick } from 'vue'
 
-
 const $vuetify = {
   rtl: false,
   icons: {
@@ -23,8 +22,8 @@ const $vuetify = {
     }
   },
   lang: {
-    t: str => str,
-  },
+    t: str => str
+  }
 }
 
 describe('VRating.ts', () => {
@@ -41,7 +40,7 @@ describe('VRating.ts', () => {
               $createElement: h
             }
           }
-        },
+        }
       }, options))
     }
   })
@@ -49,8 +48,8 @@ describe('VRating.ts', () => {
   it('should not register directives if readonly or !ripple', async () => {
     const wrapper = mountFunction({
       props: {
-        readonly: true,
-      },
+        readonly: true
+      }
     })
 
     expect(wrapper.vm.directives[0][1].isDirActive).toBe(false)
@@ -122,8 +121,8 @@ describe('VRating.ts', () => {
   it('should not react to events when readonly', async () => {
     const wrapper = mountFunction({
       props: {
-        readonly: true,
-      },
+        readonly: true
+      }
     })
 
     const icon = wrapper.find('.v-icon')
@@ -151,8 +150,8 @@ describe('VRating.ts', () => {
 
     const wrapper = mountFunction({
       props: {
-        hover: true,
-      },
+        hover: true
+      }
     })
 
     const icons = wrapper.findAll('.v-icon')
@@ -187,15 +186,15 @@ describe('VRating.ts', () => {
     expect(wrapper.vm.genHoverIndex({
       pageX: 0,
       target: {
-        getBoundingClientRect: () => ({ width: 10, left: 0 }),
-      },
+        getBoundingClientRect: () => ({ width: 10, left: 0 })
+      }
     }, 1)).toBe(1.5)
 
     expect(wrapper.vm.genHoverIndex({
       pageX: 6,
       target: {
-        getBoundingClientRect: () => ({ width: 10, left: 0 }),
-      },
+        getBoundingClientRect: () => ({ width: 10, left: 0 })
+      }
     }, 1)).toBe(2)
   })
 
@@ -206,7 +205,7 @@ describe('VRating.ts', () => {
         config: {
           globalProperties: {
             $vuetify: {
-              rtl: true,
+              rtl: true
             }
           }
         }
@@ -219,15 +218,15 @@ describe('VRating.ts', () => {
     expect(wrapper.vm.genHoverIndex({
       pageX: 0,
       target: {
-        getBoundingClientRect: () => ({ width: 10, left: 0 }),
-      },
+        getBoundingClientRect: () => ({ width: 10, left: 0 })
+      }
     }, 1)).toBe(1.5)
 
     expect(wrapper.vm.genHoverIndex({
       pageX: 6,
       target: {
-        getBoundingClientRect: () => ({ width: 10, left: 0 }),
-      },
+        getBoundingClientRect: () => ({ width: 10, left: 0 })
+      }
     }, 1)).toBe(2)
   })
 
@@ -235,7 +234,7 @@ describe('VRating.ts', () => {
     const itemSlot = () => [h('span', 'foobar')]
 
     const component = {
-      render: () => h(VRating, {}, {item: itemSlot})
+      render: () => h(VRating, {}, { item: itemSlot })
     }
 
     const wrapper = mount(component)
@@ -247,7 +246,7 @@ describe('VRating.ts', () => {
     const wrapper = mountFunction({
       props: {
         halfIncrements: true,
-        hover: true,
+        hover: true
       }
     })
     const onMouseEnter = jest.fn()
@@ -264,7 +263,7 @@ describe('VRating.ts', () => {
   it('should reset hoverIndex on mouse leave', () => {
     jest.useFakeTimers()
     const wrapper = mountFunction({
-      props: { hover: true },
+      props: { hover: true }
     })
 
     const icon = wrapper.find('.v-icon')