@dimailn/vuetify 2.7.2-alpha3 → 2.7.2-alpha32

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

@@ -21,11 +21,11 @@ exports[`VSkeletonLoader.ts should dynamically render content 2`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 1`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__button v-skeleton-loader__bone">
   </div>
@@ -35,11 +35,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 1`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 2`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__heading v-skeleton-loader__bone">
   </div>
@@ -55,11 +55,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 2`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 3`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__avatar v-skeleton-loader__bone">
   </div>
@@ -67,11 +67,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 3`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 4`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__button v-skeleton-loader__bone">
   </div>
@@ -79,11 +79,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 4`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 5`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__image v-skeleton-loader__bone">
   </div>
@@ -95,11 +95,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 5`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 6`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__image v-skeleton-loader__bone">
   </div>
@@ -113,11 +113,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 6`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 7`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__heading v-skeleton-loader__bone">
   </div>
@@ -125,11 +125,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 7`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 8`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__chip v-skeleton-loader__bone">
   </div>
@@ -137,11 +137,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 8`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 9`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__list-item v-skeleton-loader__bone">
     <div class="v-skeleton-loader__text v-skeleton-loader__bone">
@@ -229,11 +229,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 9`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 10`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__text v-skeleton-loader__bone">
   </div>
@@ -245,11 +245,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 10`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 11`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__avatar v-skeleton-loader__bone">
   </div>
@@ -311,11 +311,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 11`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 12`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__heading v-skeleton-loader__bone">
   </div>
@@ -323,11 +323,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 12`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 13`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__image v-skeleton-loader__bone">
   </div>
@@ -335,11 +335,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 13`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 14`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__text v-skeleton-loader__bone">
   </div>
@@ -347,11 +347,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 14`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 15`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__avatar v-skeleton-loader__bone">
   </div>
@@ -361,11 +361,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 15`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 16`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__sentences v-skeleton-loader__bone">
     <div class="v-skeleton-loader__text v-skeleton-loader__bone">
@@ -377,11 +377,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 16`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 17`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__avatar v-skeleton-loader__bone">
   </div>
@@ -395,11 +395,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 17`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 18`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__paragraph v-skeleton-loader__bone">
     <div class="v-skeleton-loader__text v-skeleton-loader__bone">
@@ -413,11 +413,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 18`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 19`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__avatar v-skeleton-loader__bone">
   </div>
@@ -433,11 +433,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 19`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 20`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__text v-skeleton-loader__bone">
   </div>
@@ -449,11 +449,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 20`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 21`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__text v-skeleton-loader__bone">
   </div>
@@ -463,11 +463,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 21`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 22`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__table-heading v-skeleton-loader__bone">
     <div class="v-skeleton-loader__heading v-skeleton-loader__bone">
@@ -685,11 +685,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 22`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 23`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__heading v-skeleton-loader__bone">
   </div>
@@ -699,11 +699,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 23`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 24`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__heading v-skeleton-loader__bone">
   </div>
@@ -721,11 +721,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 24`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 25`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__table-row-divider v-skeleton-loader__bone">
     <div class="v-skeleton-loader__table-row v-skeleton-loader__bone">
@@ -911,11 +911,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 25`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 26`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__table-row v-skeleton-loader__bone">
     <div class="v-skeleton-loader__table-cell v-skeleton-loader__bone">
@@ -949,11 +949,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 26`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 27`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__table-cell v-skeleton-loader__bone">
     <div class="v-skeleton-loader__text v-skeleton-loader__bone">
@@ -983,11 +983,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 27`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 28`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__text v-skeleton-loader__bone">
   </div>
@@ -995,11 +995,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 28`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 29`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__text v-skeleton-loader__bone">
   </div>
@@ -1013,11 +1013,11 @@ exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 29`] = `
 `;
 
 exports[`VSkeletonLoader.ts should generate a skeleton recursive tree 30`] = `
-<div aria-busy="true"
+<div class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
+     aria-busy="true"
      aria-live="polite"
      aria-label="$vuetify.loading"
      role="alert"
-     class="v-skeleton-loader v-skeleton-loader--is-loading theme--light"
 >
   <div class="v-skeleton-loader__text v-skeleton-loader__bone">
   </div>

package/src/components/VSlideGroup/VSlideGroup.ts

@@ -107,10 +107,6 @@ export const BaseSlideGroup = mixins<options &
 ).extend({
   name: 'base-slide-group',
 
-  directives: {
-    Resize,
-    Touch,
-  },
 
   props: {
     activeClass: {
@@ -139,6 +135,8 @@ export const BaseSlideGroup = mixins<options &
     },
   },
 
+  emits: ['click:prev', 'click:next'],
+
   data: () => ({
     isOverflowing: false,
     resizeTimeout: 0,
@@ -323,9 +321,9 @@ export const BaseSlideGroup = mixins<options &
         !hasAffix
       ) return null
 
-      return h(VIcon, {
+      return h(VIcon, () => ({
         disabled: !hasAffix,
-      }, (this as any)[`${icon}Icon`])
+      }, (this as any)[`${icon}Icon`]))
     },
     // Always generate prev for scrollable hint
     genPrev (): VNode | null {
@@ -342,7 +340,7 @@ export const BaseSlideGroup = mixins<options &
       }, [slot])
     },
     genTransition (location: 'prev' | 'next') {
-      return h(VFadeTransition, [this.genIcon(location)])
+      return h(VFadeTransition, () => [this.genIcon(location)])
     },
     genWrapper (): VNode {
       return withDirectives(h('div', {

package/src/components/VSlideGroup/VSlideItem.ts

@@ -11,4 +11,6 @@ export default mixins(
   /* @vue/component */
 ).extend({
   name: 'v-slide-item',
+
+  emits: ['change'],
 })

package/src/components/VSlider/VSlider.ts

@@ -13,14 +13,13 @@ 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 { defineComponent, VNode, PropType, h, getCurrentInstance, withDirectives, vShow } from 'vue'
 import { PropValidator } from 'vue/types/options'
 
-interface options extends Vue {
+interface options {
   $refs: {
     track: HTMLElement
   }
@@ -40,9 +39,6 @@ export default mixins<options &
 ).extend({
   name: 'v-slider',
 
-  directives: {
-    ClickOutside,
-  },
 
   props: {
     disabled: Boolean,
@@ -63,7 +59,7 @@ export default mixins<options &
     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],
@@ -76,7 +72,7 @@ export default mixins<options &
     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],
@@ -88,6 +84,16 @@ export default mixins<options &
     vertical: Boolean,
   },
 
+  emits: [
+    'update:modelValue',
+    'start',
+    'end',
+    'mouseup',
+    'change',
+    'focus',
+    'blur',
+  ],
+
   data: () => ({
     app: null as any,
     oldValue: null as any,
@@ -99,6 +105,19 @@ export default mixins<options &
     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 {
@@ -113,11 +132,14 @@ 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
 
@@ -140,7 +162,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
@@ -209,20 +232,26 @@ export default mixins<options &
   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,
     },
   },
 
+
   mounted () {
     // Without a v-app, iOS does not work with body selectors
     this.app = document.querySelector('[data-app]') ||
@@ -230,8 +259,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 +271,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,
@@ -253,16 +282,14 @@ export default mixins<options &
           'v-slider--readonly': this.isReadonly,
           ...this.themeClasses,
         },
-        directives: [{
-          name: 'click-outside',
-          value: this.onBlur,
-        }],
         onClick: this.onSliderClick,
         onMousedown: this.onSliderMouseDown,
         onTouchstart: this.onSliderMouseDown,
-      }, this.genChildren())
+      }, this.genChildren()), [
+        [ClickOutside, this.onBlur],
+      ])
     },
-    genChildren (): VNodeChildrenArrayContents {
+    genChildren (): VNode[] {
       return [
         this.genInput(),
         this.genTrackContainer(),
@@ -378,17 +405,17 @@ export default mixins<options &
         'aria-valuenow': this.internalValue,
         'aria-readonly': String(this.isReadonly),
         'aria-orientation': this.vertical ? 'vertical' : 'horizontal',
-        onFocus: onFocus,
-        onBlur: onBlur,
+        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
@@ -397,13 +424,9 @@ export default mixins<options &
 
       return h(VScaleTransition, {
         origin: 'bottom center',
-      }, [
-        h('div', {
+      }, () => [
+        withDirectives(h('div', {
           class: 'v-slider__thumb-label-container',
-          directives: [{
-            name: 'show',
-            value: this.isFocused || this.isActive || this.thumbLabel === 'always',
-          }],
         }, [
           h('div', this.setBackgroundColor(this.computedThumbColor, {
             class: 'v-slider__thumb-label',
@@ -413,6 +436,8 @@ export default mixins<options &
               transform,
             },
           }), [h('div', content)]),
+        ]), [
+          [vShow, this.isFocused || this.isActive || this.thumbLabel === 'always'],
         ]),
       ])
     },
@@ -510,6 +535,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