@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha40

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

@@ -9,21 +9,26 @@ import { preset } from '../../../presets/default'
 import { ExtractVue } from '../../../util/mixins'
 import {
   shallowMount,
-  Wrapper,
+  VueWrapper,
+  enableAutoUnmount,
 } from '@vue/test-utils'
+import { h } from 'vue'
 
 describe('VSlideGroup.ts', () => {
   type Instance = ExtractVue<typeof VSlideGroup>
-  let mountFunction: (options?: object) => Wrapper<Instance>
+  let mountFunction: (options?: object) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
 
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return shallowMount(VSlideGroup, {
-        methods: { setWidths: jest.fn() },
-        mocks: {
-          $vuetify: {
-            rtl: false,
-            breakpoint: new Breakpoint(preset),
+        global: {
+          mocks: {
+            $vuetify: {
+              rtl: false,
+              breakpoint: new Breakpoint(preset),
+            },
           },
         },
         ...options,
@@ -36,7 +41,7 @@ describe('VSlideGroup.ts', () => {
       data: () => ({
         isOverflowing: true,
       }),
-      propsData: {
+      props: {
         showArrows: true,
       },
     })
@@ -45,23 +50,19 @@ describe('VSlideGroup.ts', () => {
     expect(wrapper.vm.hasNext).toBe(false)
     expect(wrapper.vm.hasPrev).toBe(false)
 
-    wrapper.setData({
-      scrollOffset: 100,
-      widths: {
-        content: 1000,
-        wrapper: 500,
-      },
-    })
+    wrapper.vm.scrollOffset = 100
+    wrapper.vm.widths = {
+      content: 1000,
+      wrapper: 500,
+    }
 
     expect(wrapper.vm.hasPrev).toBe(true)
 
-    wrapper.setData({
-      scrollOffset: -100,
-      widths: {
-        content: 1000,
-        wrapper: 500,
-      },
-    })
+    wrapper.vm.scrollOffset = -100
+    wrapper.vm.widths = {
+      content: 1000,
+      wrapper: 500,
+    }
 
     expect(wrapper.vm.hasNext).toBe(true)
   })
@@ -175,10 +176,8 @@ describe('VSlideGroup.ts', () => {
 
     expect(wrapper.vm.scrollOffset).toBe(0)
 
-    wrapper.setData({
-      scrollOffset: 90,
-      isOverflowing: true,
-    })
+    wrapper.vm.scrollOffset = 90
+    wrapper.vm.isOverflowing = true
 
     wrapper.vm.onTouchEnd()
     expect(wrapper.vm.scrollOffset).toBe(0)
@@ -203,7 +202,7 @@ describe('VSlideGroup.ts', () => {
     wrapper.vm.overflowCheck(event, fn)
     expect(fn).not.toHaveBeenCalled()
 
-    wrapper.setData({ isOverflowing: true })
+    wrapper.vm.isOverflowing = true
     wrapper.vm.overflowCheck(event, fn)
     expect(fn).toHaveBeenCalled()
   })
@@ -213,24 +212,33 @@ describe('VSlideGroup.ts', () => {
     const scrollTo = jest.fn()
     const setWidths = jest.fn()
     const wrapper = mountFunction({
-      methods: { scrollTo, setWidths },
-      propsData: {
+      global: {
+        mocks: {
+          $vuetify: {
+            rtl: false,
+            breakpoint: new Breakpoint(preset),
+          },
+        },
+      },
+      props: {
         showArrows: true,
       },
-      listeners: {
-        'click:prev': onClick,
-        'click:next': onClick,
+      attrs: {
+        'onClick:prev': onClick,
+        'onClick:next': onClick,
       },
     })
 
-    wrapper.setData({
-      isOverflowing: true,
-      scrollOffset: 200,
-      widths: {
-        content: 1000,
-        wrapper: 500,
-      },
-    })
+    // Mock the methods
+    wrapper.vm.scrollTo = scrollTo
+    wrapper.vm.setWidths = setWidths
+
+    wrapper.vm.isOverflowing = true
+    wrapper.vm.scrollOffset = 200
+    wrapper.vm.widths = {
+      content: 1000,
+      wrapper: 500,
+    }
 
     await wrapper.vm.$nextTick()
 
@@ -250,10 +258,10 @@ describe('VSlideGroup.ts', () => {
         hasNext: () => true,
         hasPrev: () => true,
       },
-      propsData: {
+      props: {
         showArrows: true,
       },
-      scopedSlots: {
+      slots: {
         prev () {
           return h('div', {
             class: 'fizz',
@@ -267,39 +275,37 @@ describe('VSlideGroup.ts', () => {
       },
     })
 
-    wrapper.setData({ isOverflowing: true })
+    wrapper.vm.isOverflowing = true
 
     expect(wrapper.findAll('.fizz')).toHaveLength(2)
   })
 
   it('should match snapshot in rtl', async () => {
     const wrapper = mountFunction({
-      computed: {
-        hasAffixes: () => true,
-        hasNext: () => true,
-        hasPrev: () => true,
-      },
-      propsData: {
+      props: {
         showArrows: true,
       },
-      mocks: {
-        $vuetify: {
-          rtl: true,
-          breakpoint: { mobileBreakpoint: 1264 },
+      global: {
+        mocks: {
+          $vuetify: {
+            rtl: true,
+            breakpoint: { mobileBreakpoint: 1264 },
+          },
         },
       },
     })
 
+    // Set up data to show affixes
+    wrapper.vm.isOverflowing = true
+    wrapper.vm.scrollOffset = 200
+    wrapper.vm.widths = {
+      content: 1000,
+      wrapper: 500,
+    }
+
     const html1 = wrapper.html()
 
     expect(html1).toMatchSnapshot()
-
-    wrapper.vm.$vuetify.rtl = false
-
-    const html2 = wrapper.html()
-
-    expect(html1).not.toEqual(html2)
-    expect(html2).toMatchSnapshot()
   })
 
   // showArrows | isOverflowing | isMobile | hasAffixes
@@ -326,7 +332,7 @@ describe('VSlideGroup.ts', () => {
     const wrapper = mountFunction({
       data: () => ({ isOverflowing }),
       computed: { isMobile: () => isMobile },
-      propsData: { showArrows },
+      props: { showArrows },
     })
 
     expect(wrapper.vm.hasAffixes).toBe(hasAffixes)
@@ -356,9 +362,11 @@ describe('VSlideGroup.ts', () => {
       data: () => ({
         items: [{ $el: {} }],
       }),
-      methods: { calculateNewOffset },
     })
 
+    // Mock the method
+    wrapper.vm.calculateNewOffset = calculateNewOffset
+
     const setWrapperPosition = ({ left = 0, right = 0 } = {}) => {
       wrapper.vm.$refs.wrapper.getBoundingClientRect = () => ({ left, right } as DOMRectReadOnly)
     }

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/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