@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha41

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

@@ -1,46 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VSlideGroup.ts should match snapshot in rtl 1`] = `
-<div class="v-item-group theme--light v-slide-group v-slide-group--has-affixes">
-  <div class="v-slide-group__prev">
-    <fade-transition-stub origin="top center 0">
-      <vuecomponent-stub>
-        $next
-      </vuecomponent-stub>
+<div class="v-item-group theme--light v-slide-group">
+  <div class="v-slide-group__prev v-slide-group__prev--disabled">
+    <fade-transition-stub group="false"
+                          hideonleave="false"
+                          leaveabsolute="false"
+                          origin="top center 0"
+    >
     </fade-transition-stub>
   </div>
   <div class="v-slide-group__wrapper">
     <div class="v-slide-group__content">
     </div>
   </div>
-  <div class="v-slide-group__next">
-    <fade-transition-stub origin="top center 0">
-      <vuecomponent-stub>
-        $prev
-      </vuecomponent-stub>
-    </fade-transition-stub>
-  </div>
-</div>
-`;
-
-exports[`VSlideGroup.ts should match snapshot in rtl 2`] = `
-<div class="v-item-group theme--light v-slide-group v-slide-group--has-affixes">
-  <div class="v-slide-group__prev">
-    <fade-transition-stub origin="top center 0">
-      <vuecomponent-stub>
-        $prev
-      </vuecomponent-stub>
-    </fade-transition-stub>
-  </div>
-  <div class="v-slide-group__wrapper">
-    <div class="v-slide-group__content">
-    </div>
-  </div>
-  <div class="v-slide-group__next">
-    <fade-transition-stub origin="top center 0">
-      <vuecomponent-stub>
-        $next
-      </vuecomponent-stub>
+  <div class="v-slide-group__next v-slide-group__next--disabled">
+    <fade-transition-stub group="false"
+                          hideonleave="false"
+                          leaveabsolute="false"
+                          origin="top center 0"
+    >
     </fade-transition-stub>
   </div>
 </div>

package/src/components/VSlideGroup/index.ts

@@ -3,12 +3,12 @@ import VSlideItem from './VSlideItem'
 
 export {
   VSlideGroup,
-  VSlideItem,
+  VSlideItem
 }
 
 export default {
   $_vuetify_subcomponents: {
     VSlideGroup,
-    VSlideItem,
-  },
+    VSlideItem
+  }
 }

package/src/components/VSlider/VSlider.ts

@@ -13,81 +13,79 @@ import ClickOutside from '../../directives/click-outside'
 
 // Helpers
 import { addOnceEventListener, deepEqual, keyCodes, createRange, convertToUnit, passiveSupported } from '../../util/helpers'
-import { consoleWarn } from '../../util/console'
+import { consoleWarn, breaking } from '../../util/console'
 
 // Types
-import Vue, { VNode, VNodeChildrenArrayContents, PropType, h } from 'vue'
-import { ScopedSlotChildren } from 'vue/types/vnode'
-import { PropValidator } from 'vue/types/options'
+import type { PropType, VNode } from 'vue'
+import { defineComponent, h, getCurrentInstance, withDirectives, vShow } from 'vue'
 
-interface options extends Vue {
+interface options {
   $refs: {
     track: HTMLElement
   }
 }
 
-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',
 
-  directives: {
-    ClickOutside,
-  },
-
   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 => typeof v === 'boolean' || v === 'always',
+      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 => 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: [
+    'update:modelValue',
+    'start',
+    'end',
+    'mouseup',
+    'change',
+    'focus',
+    'blur'
+  ],
+
   data: () => ({
     app: null as any,
     oldValue: null as any,
@@ -96,7 +94,7 @@ export default mixins<options &
     isFocused: false,
     isActive: false,
     noClick: false, // Prevent click event if dragging took place, hack for #7915
-    startOffset: 0,
+    startOffset: 0
   }),
 
   computed: {
@@ -105,7 +103,7 @@ export default mixins<options &
         ...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: {
@@ -113,18 +111,21 @@ export default mixins<options &
         return this.lazyValue
       },
       set (val: number) {
+        const originalVal = val
         val = isNaN(val) ? this.minValue : val
         // Round value to ensure the
         // entire slider range can
         // be selected with step
-        const value = this.roundValue(Math.min(Math.max(val, this.minValue), this.maxValue))
+        let value = this.roundValue(val)
+        // Then clamp to min/max
+        value = Math.min(Math.max(value, this.minValue), this.maxValue)
 
         if (value === this.lazyValue) return
 
         this.lazyValue = value
 
         this.$emit('update:modelValue', value)
-      },
+      }
     },
     trackTransition (): string {
       return this.thumbPressed
@@ -140,7 +141,8 @@ export default mixins<options &
       return parseFloat(this.max)
     },
     stepNumeric (): number {
-      return this.step > 0 ? parseFloat(this.step) : 0
+      const step = parseFloat(this.step)
+      return step > 0 ? step : 0
     },
     inputWidth (): number {
       const inputWidth = (this.roundValue(this.internalValue) - this.minValue) / (this.maxValue - this.minValue) * 100
@@ -160,7 +162,7 @@ export default mixins<options &
         transition: this.trackTransition,
         [startDir]: start,
         [endDir]: end,
-        [valueDir]: value,
+        [valueDir]: value
       }
     },
     trackStyles (): Partial<CSSStyleDeclaration> {
@@ -173,7 +175,7 @@ export default mixins<options &
       return {
         transition: this.trackTransition,
         [startDir]: start,
-        [endDir]: end,
+        [endDir]: end
       }
     },
     showTicks (): boolean {
@@ -203,24 +205,42 @@ export default mixins<options &
     computedThumbColor (): string | undefined {
       if (this.thumbColor) return this.thumbColor
       return this.validationState || this.computedColor
-    },
+    }
   },
 
   watch: {
     min (val) {
       const parsed = parseFloat(val)
-      parsed > this.internalValue && this.$emit('update:modelValue', parsed)
+      if (parsed > this.internalValue) {
+        this.$emit('update:modelValue', parsed)
+      }
     },
     max (val) {
       const parsed = parseFloat(val)
-      parsed < this.internalValue && this.$emit('update:modelValue', parsed)
+      if (parsed < this.internalValue) {
+        this.$emit('update:modelValue', parsed)
+      }
     },
     modelValue: {
       handler (v: number) {
+        // 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 () {
@@ -230,8 +250,8 @@ export default mixins<options &
   },
 
   methods: {
-    genDefaultSlot (): VNodeChildrenArrayContents {
-      const children: VNodeChildrenArrayContents = [this.genLabel()]
+    genDefaultSlot (): VNode[] {
+      const children: VNode[] = [this.genLabel()]
       const slider = this.genSlider()
       this.inverseLabel
         ? children.unshift(slider)
@@ -242,7 +262,7 @@ export default mixins<options &
       return children
     },
     genSlider (): VNode {
-      return h('div', {
+      return withDirectives(h('div', {
         class: {
           'v-slider': true,
           'v-slider--horizontal': !this.vertical,
@@ -251,18 +271,16 @@ export default mixins<options &
           'v-slider--active': this.isActive,
           'v-slider--disabled': this.isDisabled,
           'v-slider--readonly': this.isReadonly,
-          ...this.themeClasses,
+          ...this.themeClasses
         },
-        directives: [{
-          name: 'click-outside',
-          value: this.onBlur,
-        }],
         onClick: this.onSliderClick,
         onMousedown: this.onSliderMouseDown,
-        onTouchstart: this.onSliderMouseDown,
-      }, this.genChildren())
+        onTouchstart: this.onSliderMouseDown
+      }, this.genChildren()), [
+        [ClickOutside, this.onBlur]
+      ])
     },
-    genChildren (): VNodeChildrenArrayContents {
+    genChildren (): VNode[] {
       return [
         this.genInput(),
         this.genTrackContainer(),
@@ -273,8 +291,8 @@ export default mixins<options &
           this.isActive,
           this.isFocused,
           this.onFocus,
-          this.onBlur,
-        ),
+          this.onBlur
+        )
       ]
     },
     genInput (): VNode {
@@ -284,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?
       })
     },
@@ -292,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 {
@@ -320,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]))
         }
 
@@ -330,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 (
@@ -367,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',
@@ -378,17 +396,17 @@ export default mixins<options &
         'aria-valuenow': this.internalValue,
         'aria-readonly': String(this.isReadonly),
         'aria-orientation': this.vertical ? 'vertical' : 'horizontal',
-        onFocus: onFocus,
-        onBlur: onBlur,
-        onKeydown: this.onKeyDown,
+        onFocus,
+        onBlur,
+        onKeydown: this.onKeyDown
       }), children)
     },
-    genThumbLabelContent (value: number | string): ScopedSlotChildren {
+    genThumbLabelContent (value: number | string): any {
       return this.$slots['thumb-label']
         ? this.$slots['thumb-label']!({ value })
         : [h('span', [String(value)])]
     },
-    genThumbLabel (content: ScopedSlotChildren): VNode {
+    genThumbLabel (content: any): VNode {
       const size = convertToUnit(this.thumbSize)
 
       const transform = this.vertical
@@ -396,29 +414,27 @@ export default mixins<options &
         : `translateY(-20%) translateY(-12px) translateX(-50%) rotate(45deg)`
 
       return h(VScaleTransition, {
-        origin: 'bottom center',
-      }, [
-        h('div', {
-          class: 'v-slider__thumb-label-container',
-          directives: [{
-            name: 'show',
-            value: this.isFocused || this.isActive || this.thumbLabel === 'always',
-          }],
+        origin: 'bottom center'
+      }, () => [
+        withDirectives(h('div', {
+          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']
+        ])
       ])
     },
     genThumb (): VNode {
       return h('div', this.setBackgroundColor(this.computedThumbColor, {
-        class: 'v-slider__thumb',
+        class: 'v-slider__thumb'
       }))
     },
     getThumbContainerStyles (width: number): object {
@@ -428,7 +444,7 @@ export default mixins<options &
 
       return {
         transition: this.trackTransition,
-        [direction]: `${value}%`,
+        [direction]: `${value}%`
       }
     },
     onSliderMouseDown (e: MouseEvent | TouchEvent) {
@@ -510,6 +526,7 @@ export default mixins<options &
 
       this.onMouseMove(e)
       this.$emit('update:modelValue', this.internalValue)
+      this.$emit('change', this.internalValue)
     },
     onBlur (e: Event) {
       this.isFocused = false
@@ -528,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]
 
@@ -545,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)
@@ -580,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))
-    },
-  },
+    }
+  }
 })