@dimailn/vuetify 2.7.2-alpha40 → 2.7.2-alpha42

package/src/components/VSlider/VSlider.ts

@@ -16,8 +16,8 @@ import { addOnceEventListener, deepEqual, keyCodes, createRange, convertToUnit,
 import { consoleWarn, breaking } from '../../util/console'
 
 // Types
-import { defineComponent, VNode, PropType, h, getCurrentInstance, withDirectives, vShow } from 'vue'
-import { PropValidator } from 'vue/types/options'
+import type { PropType, VNode } from 'vue'
+import { defineComponent, h, getCurrentInstance, withDirectives, vShow } from 'vue'
 
 interface options {
   $refs: {
@@ -25,63 +25,55 @@ interface options {
   }
 }
 
-export default mixins<options &
-/* eslint-disable indent */
-  ExtractVue<[
-    typeof VInput,
-    typeof Loadable
-  ]>
-/* eslint-enable indent */
->(
+export default mixins(
   VInput,
   Loadable
 /* @vue/component */
 ).extend({
   name: 'v-slider',
 
-
   props: {
     disabled: Boolean,
     inverseLabel: Boolean,
     max: {
       type: [Number, String],
-      default: 100,
+      default: 100
     },
     min: {
       type: [Number, String],
-      default: 0,
+      default: 0
     },
     step: {
       type: [Number, String],
-      default: 1,
+      default: 1
     },
     thumbColor: String,
     thumbLabel: {
       type: [Boolean, String] as PropType<boolean | 'always' | undefined>,
       default: undefined,
-      validator: (v: any) => typeof v === 'boolean' || v === 'always' || v === undefined,
+      validator: (v: any) => typeof v === 'boolean' || v === 'always' || v === undefined
     },
     thumbSize: {
       type: [Number, String],
-      default: 32,
+      default: 32
     },
     tickLabels: {
       type: Array,
-      default: () => ([]),
-    } as PropValidator<string[]>,
+      default: () => ([])
+    } as unknown as PropType<string[]>,
     ticks: {
       type: [Boolean, String] as PropType<boolean | 'always'>,
       default: false,
-      validator: (v: any) => typeof v === 'boolean' || v === 'always',
+      validator: (v: any) => typeof v === 'boolean' || v === 'always'
     },
     tickSize: {
       type: [Number, String],
-      default: 2,
+      default: 2
     },
     trackColor: String,
     trackFillColor: String,
     modelValue: [Number, String],
-    vertical: Boolean,
+    vertical: Boolean
   },
 
   emits: [
@@ -91,7 +83,7 @@ export default mixins<options &
     'mouseup',
     'change',
     'focus',
-    'blur',
+    'blur'
   ],
 
   data: () => ({
@@ -102,29 +94,16 @@ export default mixins<options &
     isFocused: false,
     isActive: false,
     noClick: false, // Prevent click event if dragging took place, hack for #7915
-    startOffset: 0,
+    startOffset: 0
   }),
 
-  created () {
-    const breakingProps = [
-      ['value', 'modelValue'],
-      ['onInput', 'onUpdate:modelValue'],
-      ['onChange', 'onUpdate:modelValue'],
-    ]
-
-    /* istanbul ignore next */
-    breakingProps.forEach(([original, replacement]) => {
-      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
-    })
-  },
-
   computed: {
     classes (): object {
       return {
         ...VInput.computed.classes.call(this),
         'v-input__slider': true,
         'v-input__slider--vertical': this.vertical,
-        'v-input__slider--inverse-label': this.inverseLabel,
+        'v-input__slider--inverse-label': this.inverseLabel
       }
     },
     internalValue: {
@@ -146,7 +125,7 @@ export default mixins<options &
         this.lazyValue = value
 
         this.$emit('update:modelValue', value)
-      },
+      }
     },
     trackTransition (): string {
       return this.thumbPressed
@@ -183,7 +162,7 @@ export default mixins<options &
         transition: this.trackTransition,
         [startDir]: start,
         [endDir]: end,
-        [valueDir]: value,
+        [valueDir]: value
       }
     },
     trackStyles (): Partial<CSSStyleDeclaration> {
@@ -196,7 +175,7 @@ export default mixins<options &
       return {
         transition: this.trackTransition,
         [startDir]: start,
-        [endDir]: end,
+        [endDir]: end
       }
     },
     showTicks (): boolean {
@@ -226,7 +205,7 @@ export default mixins<options &
     computedThumbColor (): string | undefined {
       if (this.thumbColor) return this.thumbColor
       return this.validationState || this.computedColor
-    },
+    }
   },
 
   watch: {
@@ -247,10 +226,22 @@ export default mixins<options &
         // Use the setter to ensure proper rounding and validation
         this.internalValue = v
       },
-      immediate: true,
-    },
+      immediate: true
+    }
   },
 
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+      ['onChange', 'onUpdate:modelValue']
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
 
   mounted () {
     // Without a v-app, iOS does not work with body selectors
@@ -280,13 +271,13 @@ export default mixins<options &
           'v-slider--active': this.isActive,
           'v-slider--disabled': this.isDisabled,
           'v-slider--readonly': this.isReadonly,
-          ...this.themeClasses,
+          ...this.themeClasses
         },
         onClick: this.onSliderClick,
         onMousedown: this.onSliderMouseDown,
-        onTouchstart: this.onSliderMouseDown,
+        onTouchstart: this.onSliderMouseDown
       }, this.genChildren()), [
-        [ClickOutside, this.onBlur],
+        [ClickOutside, this.onBlur]
       ])
     },
     genChildren (): VNode[] {
@@ -300,8 +291,8 @@ export default mixins<options &
           this.isActive,
           this.isFocused,
           this.onFocus,
-          this.onBlur,
-        ),
+          this.onBlur
+        )
       ]
     },
     genInput (): VNode {
@@ -311,7 +302,7 @@ export default mixins<options &
         disabled: true,
         readonly: true,
         tabindex: -1,
-        ...this.$attrs,
+        ...this.$attrs
         // on: this.genListeners(), // TODO: do we need to attach the listeners to input?
       })
     },
@@ -319,17 +310,17 @@ export default mixins<options &
       const children = [
         h('div', this.setBackgroundColor(this.computedTrackColor, {
           class: 'v-slider__track-background',
-          style: this.trackStyles,
+          style: this.trackStyles
         })),
         h('div', this.setBackgroundColor(this.computedTrackFillColor, {
           class: 'v-slider__track-fill',
-          style: this.trackFillStyles,
-        })),
+          style: this.trackFillStyles
+        }))
       ]
 
       return h('div', {
         class: 'v-slider__track-container',
-        ref: 'track',
+        ref: 'track'
       }, children)
     },
     genSteps (): VNode | null {
@@ -347,7 +338,7 @@ export default mixins<options &
 
         if (this.tickLabels[index]) {
           children.push(h('div', {
-            class: 'v-slider__tick-label',
+            class: 'v-slider__tick-label'
           }, this.tickLabels[index]))
         }
 
@@ -357,21 +348,21 @@ export default mixins<options &
         return h('span', {
           key: index,
           class: ['v-slider__tick', {
-            'v-slider__tick--filled': filled,
+            'v-slider__tick--filled': filled
           }],
           style: {
             width: `${tickSize}px`,
             height: `${tickSize}px`,
             [direction]: `calc(${width}% - ${tickSize / 2}px)`,
-            [offsetDirection]: `calc(50% - ${tickSize / 2}px)`,
-          },
+            [offsetDirection]: `calc(50% - ${tickSize / 2}px)`
+          }
         }, children)
       })
 
       return h('div', {
         class: ['v-slider__ticks-container', {
-          'v-slider__ticks-container--always-show': this.ticks === 'always' || this.tickLabels.length > 0,
-        }],
+          'v-slider__ticks-container--always-show': this.ticks === 'always' || this.tickLabels.length > 0
+        }]
       }, ticks)
     },
     genThumbContainer (
@@ -394,7 +385,7 @@ export default mixins<options &
         class: ['v-slider__thumb-container', {
           'v-slider__thumb-container--active': isActive,
           'v-slider__thumb-container--focused': isFocused,
-          'v-slider__thumb-container--show-label': this.showThumbLabel,
+          'v-slider__thumb-container--show-label': this.showThumbLabel
         }],
         style: this.getThumbContainerStyles(valueWidth),
         role: 'slider',
@@ -407,7 +398,7 @@ export default mixins<options &
         'aria-orientation': this.vertical ? 'vertical' : 'horizontal',
         onFocus,
         onBlur,
-        onKeydown: this.onKeyDown,
+        onKeydown: this.onKeyDown
       }), children)
     },
     genThumbLabelContent (value: number | string): any {
@@ -423,27 +414,27 @@ export default mixins<options &
         : `translateY(-20%) translateY(-12px) translateX(-50%) rotate(45deg)`
 
       return h(VScaleTransition, {
-        origin: 'bottom center',
+        origin: 'bottom center'
       }, () => [
         withDirectives(h('div', {
-          class: 'v-slider__thumb-label-container',
+          class: 'v-slider__thumb-label-container'
         }, [
           h('div', this.setBackgroundColor(this.computedThumbColor, {
             class: 'v-slider__thumb-label',
             style: {
               height: size,
               width: size,
-              transform,
-            },
-          }), [h('div', content)]),
+              transform
+            }
+          }), [h('div', content)])
         ]), [
-          [vShow, this.isFocused || this.isActive || this.thumbLabel === 'always'],
-        ]),
+          [vShow, this.isFocused || this.isActive || this.thumbLabel === 'always']
+        ])
       ])
     },
     genThumb (): VNode {
       return h('div', this.setBackgroundColor(this.computedThumbColor, {
-        class: 'v-slider__thumb',
+        class: 'v-slider__thumb'
       }))
     },
     getThumbContainerStyles (width: number): object {
@@ -453,7 +444,7 @@ export default mixins<options &
 
       return {
         transition: this.trackTransition,
-        [direction]: `${value}%`,
+        [direction]: `${value}%`
       }
     },
     onSliderMouseDown (e: MouseEvent | TouchEvent) {
@@ -554,7 +545,7 @@ export default mixins<options &
 
       const {
         [start]: trackStart,
-        [length]: trackLength,
+        [length]: trackLength
       } = this.$refs.track.getBoundingClientRect()
       const clickOffset = 'touches' in e ? e.touches[0][click] : e[click]
 
@@ -571,14 +562,18 @@ export default mixins<options &
 
       const { pageup, pagedown, end, home, left, right, down, up } = keyCodes
 
-      if (![pageup, pagedown, end, home, left, right, down, up].includes(e.keyCode)) return
+      if (
+        ![pageup, pagedown, end, home, left, right, down, up].includes(
+          e.keyCode as typeof pageup | typeof pagedown | typeof end | typeof home | typeof left | typeof right | typeof down | typeof up
+        )
+      ) return
 
       e.preventDefault()
       const step = this.stepNumeric || 1
       const steps = (this.maxValue - this.minValue) / step
-      if ([left, right, down, up].includes(e.keyCode)) {
+      if ([left, right, down, up].includes(e.keyCode as typeof left | typeof right | typeof down | typeof up)) {
         const increase = this.$vuetify.rtl ? [left, up] : [right, up]
-        const direction = increase.includes(e.keyCode) ? 1 : -1
+        const direction = increase.includes(e.keyCode as typeof left | typeof right | typeof up) ? 1 : -1
         const multiplier = e.shiftKey ? 3 : (e.ctrlKey ? 2 : 1)
 
         value = value + (direction * step * multiplier)
@@ -606,6 +601,6 @@ export default mixins<options &
       const newValue = Math.round((value - offset) / this.stepNumeric) * this.stepNumeric + offset
 
       return parseFloat(Math.min(newValue, this.maxValue).toFixed(decimals))
-    },
-  },
+    }
+  }
 })

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

@@ -5,7 +5,7 @@ import VSlider from '../VSlider'
 import {
   mount,
   VueWrapper,
-  enableAutoUnmount,
+  enableAutoUnmount
 } from '@vue/test-utils'
 
 /* eslint-disable max-statements */
@@ -23,11 +23,11 @@ describe('VSlider.ts', () => {
         global: {
           mocks: {
             $vuetify: {
-              rtl: false,
-            },
-          },
+              rtl: false
+            }
+          }
         },
-        ...options,
+        ...options
       })
     }
   })
@@ -44,8 +44,8 @@ describe('VSlider.ts', () => {
   it('should render vertical slider', async () => {
     const wrapper = mountFunction({
       props: {
-        vertical: true,
-      },
+        vertical: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -55,8 +55,8 @@ describe('VSlider.ts', () => {
     const wrapper = mountFunction({
       props: {
         ticks: true,
-        step: 25,
-      },
+        step: 25
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -69,8 +69,8 @@ describe('VSlider.ts', () => {
   it('should render component with thumbLabel and match a snapshot', async () => {
     const wrapper = mountFunction({
       props: {
-        thumbLabel: true,
-      },
+        thumbLabel: true
+      }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -83,8 +83,8 @@ describe('VSlider.ts', () => {
   it('should set tabindex in disabled component', () => {
     const wrapper = mountFunction({
       props: {
-        disabled: true,
-      },
+        disabled: true
+      }
     })
 
     const slider = wrapper.find('.v-slider__thumb-container')
@@ -96,8 +96,8 @@ describe('VSlider.ts', () => {
     const wrapper = mountFunction({
       props: {
         min: 2,
-        max: 4,
-      },
+        max: 4
+      }
     })
 
     await wrapper.setProps({ modelValue: 0 })
@@ -114,8 +114,8 @@ describe('VSlider.ts', () => {
       props: {
         modelValue: 5,
         min: 0,
-        max: 10,
-      },
+        max: 10
+      }
     })
 
     await wrapper.setProps({ min: 6 })
@@ -130,8 +130,8 @@ describe('VSlider.ts', () => {
       props: {
         min: 3,
         max: 15,
-        step: 3,
-      },
+        step: 3
+      }
     })
 
     await wrapper.setProps({ modelValue: 5 })
@@ -146,8 +146,8 @@ describe('VSlider.ts', () => {
   it('should react to keydown event', async () => {
     const wrapper = mountFunction({
       props: {
-        modelValue: 50,
-      },
+        modelValue: 50
+      }
     })
 
     const slider = wrapper.find('.v-slider__thumb-container')
@@ -203,13 +203,13 @@ describe('VSlider.ts', () => {
     await wrapper.setProps({ modelValue: newValue })
 
     await slider.trigger('keydown.left', {
-      shiftKey: true,
+      shiftKey: true
     })
     const events10 = wrapper.emitted('update:modelValue') as any[][]
     expect(events10[events10.length - 1]).toEqual([94])
 
     await slider.trigger('keydown.right', {
-      ctrlKey: true,
+      ctrlKey: true
     })
     const events11 = wrapper.emitted('update:modelValue') as any[][]
     expect(events11[events11.length - 1]).toEqual([98])
@@ -227,7 +227,7 @@ describe('VSlider.ts', () => {
     wrapper.vm.$vuetify.rtl = true
 
     await slider.trigger('keydown.right', {
-      shiftKey: true,
+      shiftKey: true
     })
     const events12 = wrapper.emitted('update:modelValue') as any[][]
     expect(events12[events12.length - 1]).toEqual([92])
@@ -236,9 +236,9 @@ describe('VSlider.ts', () => {
   it('should add for to label', () => {
     const wrapper = mountFunction({
       props: {
-        label: 'bar',
+        label: 'bar'
       },
-      attrs: { id: 'foo' },
+      attrs: { id: 'foo' }
     })
 
     const label = wrapper.find('.v-label')
@@ -246,8 +246,8 @@ describe('VSlider.ts', () => {
 
     const wrapper2 = mountFunction({
       props: {
-        label: 'bar',
-      },
+        label: 'bar'
+      }
     })
 
     const label2 = wrapper2.find('.v-label')
@@ -280,7 +280,7 @@ describe('VSlider.ts', () => {
     expect(wrapper.vm.isActive).toBe(false)
 
     await container.trigger('touchstart', {
-      touches: [{}],
+      touches: [{}]
     })
     expect(wrapper.vm.thumbPressed).toBe(true)
     expect(wrapper.vm.isActive).toBe(true)
@@ -293,7 +293,7 @@ describe('VSlider.ts', () => {
 
   it('should return a rounded value', async () => {
     const wrapper = mountFunction({
-      props: { step: 0 },
+      props: { step: 0 }
     })
 
     expect(wrapper.vm.roundValue(1.234)).toBe(1.234)
@@ -311,7 +311,7 @@ describe('VSlider.ts', () => {
 
   it('should return a rounded value with offset', async () => {
     const wrapper = mountFunction({
-      props: { step: 0 },
+      props: { step: 0 }
     })
 
     expect(wrapper.vm.roundValue(1.234)).toBe(1.234)
@@ -331,8 +331,8 @@ describe('VSlider.ts', () => {
     const wrapper = mountFunction({
       props: {
         min: 5,
-        max: 10,
-      },
+        max: 10
+      }
     })
 
     await wrapper.setProps({ modelValue: 1 })
@@ -345,8 +345,8 @@ describe('VSlider.ts', () => {
   it('should not update if value matches lazy value', async () => {
     const wrapper = mountFunction({
       props: {
-        modelValue: 10,
-      },
+        modelValue: 10
+      }
     })
 
     expect(wrapper.vm.lazyValue).toBe(10)
@@ -392,8 +392,8 @@ describe('VSlider.ts', () => {
   it('should keep thumb-label when focused and clicked', async () => {
     const wrapper = mountFunction({
       props: {
-        thumbLabel: true,
-      },
+        thumbLabel: true
+      }
     })
 
     const input = wrapper.find('.v-slider__thumb-container')
@@ -415,7 +415,7 @@ describe('VSlider.ts', () => {
 
   it('should reverse label location when inverse', async () => {
     const wrapper = mountFunction({
-      props: { label: 'foo' },
+      props: { label: 'foo' }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -449,7 +449,7 @@ describe('VSlider.ts', () => {
   it('should display label and have different aria-label', () => {
     const wrapper = mountFunction({
       props: { label: 'foo' },
-      attrs: { 'aria-label': 'bar' },
+      attrs: { 'aria-label': 'bar' }
     })
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -459,8 +459,8 @@ describe('VSlider.ts', () => {
     const wrapper = mountFunction({
       props: {
         max: 1,
-        tickLabels: ['foo', 'bar'],
-      },
+        tickLabels: ['foo', 'bar']
+      }
     })
 
     const ticks = wrapper.findAll('.v-slider__tick')
@@ -472,7 +472,7 @@ describe('VSlider.ts', () => {
 
   it('should not react to keydown if disabled', async () => {
     const wrapper = mountFunction({
-      props: { disabled: true, modelValue: 50 },
+      props: { disabled: true, modelValue: 50 }
     })
 
     const input = wrapper.find('.v-slider__thumb-container')
@@ -484,7 +484,7 @@ describe('VSlider.ts', () => {
     // Тестируем readonly состояние
     await wrapper.setProps({
       disabled: false,
-      readonly: true,
+      readonly: true
     })
     await input.trigger('keydown.right')
     expect(wrapper.emitted('update:modelValue')).toBeFalsy()
@@ -492,7 +492,7 @@ describe('VSlider.ts', () => {
     // Тестируем нормальное состояние
     await wrapper.setProps({
       disabled: false,
-      readonly: false,
+      readonly: false
     })
     const eventsBefore = wrapper.emitted('update:modelValue')?.length || 0
     await input.trigger('keydown.right')
@@ -506,8 +506,8 @@ describe('VSlider.ts', () => {
       props: {
         min: -20,
         max: 20,
-        modelValue: NaN,
-      },
+        modelValue: NaN
+      }
     })
 
     expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([-20])
@@ -518,8 +518,8 @@ describe('VSlider.ts', () => {
       props: {
         min: -20,
         max: 20,
-        modelValue: 0,
-      },
+        modelValue: 0
+      }
     })
 
     expect(wrapper.emitted('update:modelValue')).toBeFalsy()
@@ -528,14 +528,14 @@ describe('VSlider.ts', () => {
 
   it('should not fire event if value is provided and valid', async () => {
     const wrapper = mountFunction({
-      props: { modelValue: 10, min: -20 },
+      props: { modelValue: 10, min: -20 }
     })
 
     expect(wrapper.emitted('update:modelValue')).toBeFalsy()
 
     // Should set to min value if invalid
     const wrapper2 = mountFunction({
-      props: { modelValue: NaN, min: -20 },
+      props: { modelValue: NaN, min: -20 }
     })
 
     expect(wrapper2.emitted('update:modelValue')?.[0]).toEqual([-20])
@@ -543,7 +543,7 @@ describe('VSlider.ts', () => {
 
   it('should not fire change event onKeyDown if value is invalid', () => {
     const wrapper = mountFunction({
-      props: { min: 1 },
+      props: { min: 1 }
     })
 
     const slider = wrapper.find('.v-slider__thumb-container')