@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha41

package/src/components/VSlideGroup/VSlideGroup.ts

@@ -1,4 +1,4 @@
-import {h, withDirectives} from 'vue'
+import { h, withDirectives } from 'vue'
 // Styles
 import './VSlideGroup.sass'
 
@@ -20,7 +20,7 @@ import Touch from '../../directives/touch'
 import mixins, { ExtractVue } from '../../util/mixins'
 
 // Types
-import Vue, { VNode, defineComponent } from 'vue'
+import { VNode, defineComponent } from 'vue'
 import { composedPath, getSlot } from '../../util/helpers'
 
 interface TouchEvent {
@@ -36,7 +36,7 @@ interface Widths {
   wrapper: number
 }
 
-interface options extends Vue {
+interface options {
   $refs: {
     content: HTMLElement
     wrapper: HTMLElement
@@ -93,38 +93,26 @@ export function calculateCenteredOffset (
   }
 }
 
-export const BaseSlideGroup = mixins<options &
-/* eslint-disable indent */
-  ExtractVue<[
-    typeof BaseItemGroup,
-    typeof Mobile,
-  ]>
-/* eslint-enable indent */
->(
+export const BaseSlideGroup = mixins(
   BaseItemGroup,
-  Mobile,
+  Mobile
   /* @vue/component */
 ).extend({
   name: 'base-slide-group',
 
-  directives: {
-    Resize,
-    Touch,
-  },
-
   props: {
     activeClass: {
       type: String,
-      default: 'v-slide-item--active',
+      default: 'v-slide-item--active'
     },
     centerActive: Boolean,
     nextIcon: {
       type: String,
-      default: '$next',
+      default: '$next'
     },
     prevIcon: {
       type: String,
-      default: '$prev',
+      default: '$prev'
     },
     showArrows: {
       type: [Boolean, String],
@@ -133,12 +121,14 @@ export const BaseSlideGroup = mixins<options &
           'always',
           'never',
           'desktop',
-          'mobile',
+          'mobile'
         ].includes(v)
-      ),
-    },
+      )
+    }
   },
 
+  emits: ['click:prev', 'click:next'],
+
   data: () => ({
     isOverflowing: false,
     resizeTimeout: 0,
@@ -148,8 +138,8 @@ export const BaseSlideGroup = mixins<options &
     scrollOffset: 0,
     widths: {
       content: 0,
-      wrapper: 0,
-    },
+      wrapper: 0
+    }
   }),
 
   computed: {
@@ -167,7 +157,7 @@ export const BaseSlideGroup = mixins<options &
         ...BaseItemGroup.computed.classes.call(this),
         'v-slide-group': true,
         'v-slide-group--has-affixes': this.hasAffixes,
-        'v-slide-group--is-overflowing': this.isOverflowing,
+        'v-slide-group--is-overflowing': this.isOverflowing
       }
     },
     hasAffixes (): Boolean {
@@ -210,7 +200,7 @@ export const BaseSlideGroup = mixins<options &
     },
     hasPrev (): boolean {
       return this.hasAffixes && this.scrollOffset !== 0
-    },
+    }
   },
 
   watch: {
@@ -232,7 +222,7 @@ export const BaseSlideGroup = mixins<options &
       if (this.$vuetify.rtl) scroll = -scroll
 
       this.$refs.content.style.transform = `translateX(${scroll}px)`
-    },
+    }
   },
 
   mounted () {
@@ -259,7 +249,10 @@ export const BaseSlideGroup = mixins<options &
 
   methods: {
     onScroll () {
-      this.$refs.wrapper.scrollLeft = 0
+      const wrapper = this.$refs.wrapper as HTMLElement
+      if (wrapper) {
+        wrapper.scrollLeft = 0
+      }
     },
     onFocusin (e: FocusEvent) {
       if (!this.isOverflowing) return
@@ -288,17 +281,17 @@ export const BaseSlideGroup = mixins<options &
 
       return h('div', {
         class: ['v-slide-group__next', {
-          'v-slide-group__next--disabled': !this.hasNext,
+          'v-slide-group__next--disabled': !this.hasNext
         }],
         onClick: () => this.onAffixClick('next'),
-        key: 'next',
+        key: 'next'
       }, [slot])
     },
     genContent (): VNode {
       return h('div', {
         class: 'v-slide-group__content',
         ref: 'content',
-        onFocusin: this.onFocusin,
+        onFocusin: this.onFocusin
       }, getSlot(this))
     },
     genData (): object {
@@ -324,8 +317,8 @@ export const BaseSlideGroup = mixins<options &
       ) return null
 
       return h(VIcon, {
-        disabled: !hasAffix,
-      }, (this as any)[`${icon}Icon`])
+        disabled: !hasAffix
+      }, () => (this as any)[`${icon}Icon`])
     },
     // Always generate prev for scrollable hint
     genPrev (): VNode | null {
@@ -335,27 +328,27 @@ export const BaseSlideGroup = mixins<options &
 
       return h('div', {
         class: ['v-slide-group__prev', {
-          'v-slide-group__prev--disabled': !this.hasPrev,
+          'v-slide-group__prev--disabled': !this.hasPrev
         }],
         onClick: () => this.onAffixClick('prev'),
-        key: 'prev',
+        key: 'prev'
       }, [slot])
     },
     genTransition (location: 'prev' | 'next') {
-      return h(VFadeTransition, [this.genIcon(location)])
+      return h(VFadeTransition, {}, () => [this.genIcon(location)])
     },
     genWrapper (): VNode {
       return withDirectives(h('div', {
         class: 'v-slide-group__wrapper',
         ref: 'wrapper',
-        onScroll: this.onScroll,
+        onScroll: this.onScroll
       }, [this.genContent()]), [
         [
           Touch,
           {
             start: (e: TouchEvent) => this.overflowCheck(e, this.onTouchStart),
             move: (e: TouchEvent) => this.overflowCheck(e, this.onTouchMove),
-            end: (e: TouchEvent) => this.overflowCheck(e, this.onTouchEnd),
+            end: (e: TouchEvent) => this.overflowCheck(e, this.onTouchEnd)
           }
         ]
 
@@ -374,12 +367,14 @@ export const BaseSlideGroup = mixins<options &
     },
     onResize () {
       /* istanbul ignore next */
-      if (this._isDestroyed) return
+      if (this.$.isUnmounted) return
 
       this.setWidths()
     },
     onTouchStart (e: TouchEvent) {
-      const { content } = this.$refs
+      const content = this.$refs.content as HTMLElement
+
+      if (!content) return
 
       this.startX = this.scrollOffset + e.touchstartX as number
 
@@ -408,7 +403,11 @@ export const BaseSlideGroup = mixins<options &
     onTouchEnd () {
       if (!this.canTouch) return
 
-      const { content, wrapper } = this.$refs
+      const content = this.$refs.content as HTMLElement
+      const wrapper = this.$refs.wrapper as HTMLElement
+
+      if (!content || !wrapper) return
+
       const maxScrollOffset = content.clientWidth - wrapper.clientWidth
 
       content.style.setProperty('transition', null)
@@ -441,7 +440,10 @@ export const BaseSlideGroup = mixins<options &
     scrollIntoView /* istanbul ignore next */ () {
       if (!this.selectedItem && this.items.length) {
         const lastItemPosition = this.items[this.items.length - 1].$el.getBoundingClientRect()
-        const wrapperPosition = this.$refs.wrapper.getBoundingClientRect()
+        const wrapper = this.$refs.wrapper as HTMLElement
+
+        if (!wrapper) return
+        const wrapperPosition = wrapper.getBoundingClientRect()
 
         if (
           (this.$vuetify.rtl && wrapperPosition.right < lastItemPosition.right) ||
@@ -479,18 +481,21 @@ export const BaseSlideGroup = mixins<options &
       this.scrollOffset = this.calculateNewOffset(location, {
         // Force reflow
         content: this.$refs.content ? this.$refs.content.clientWidth : 0,
-        wrapper: this.$refs.wrapper ? this.$refs.wrapper.clientWidth : 0,
+        wrapper: this.$refs.wrapper ? this.$refs.wrapper.clientWidth : 0
       }, this.$vuetify.rtl, this.scrollOffset)
     },
     setWidths () {
       window.requestAnimationFrame(() => {
-        if (this._isDestroyed) return
+        if (this.$.isUnmounted) return
+
+        const content = this.$refs.content as HTMLElement
+        const wrapper = this.$refs.wrapper as HTMLElement
 
-        const { content, wrapper } = this.$refs
+        if (!content || !wrapper) return
 
         this.widths = {
-          content: content ? content.clientWidth : 0,
-          wrapper: wrapper ? wrapper.clientWidth : 0,
+          content: content.clientWidth,
+          wrapper: wrapper.clientWidth
         }
 
         // https://github.com/vuetifyjs/vuetify/issues/13212
@@ -500,21 +505,21 @@ export const BaseSlideGroup = mixins<options &
 
         this.scrollIntoView()
       })
-    },
+    }
   },
 
   render (): VNode {
     return withDirectives(h('div', this.genData(), [
       this.genPrev(),
       this.genWrapper(),
-      this.genNext(),
+      this.genNext()
     ]), [
       [
         Resize,
         this.onResize
       ]
     ])
-  },
+  }
 })
 
 export default defineComponent({
@@ -524,7 +529,7 @@ export default defineComponent({
 
   provide (): object {
     return {
-      slideGroup: this,
+      slideGroup: this
     }
-  },
+  }
 })

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/VSlideGroup/__tests__/VSlideGroup.spec.ts

@@ -9,24 +9,29 @@ 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,
+        ...options
       })
     }
   })
@@ -34,34 +39,30 @@ describe('VSlideGroup.ts', () => {
   it('should conditionally have affixes, prev and next', () => {
     const wrapper = mountFunction({
       data: () => ({
-        isOverflowing: true,
+        isOverflowing: true
       }),
-      propsData: {
-        showArrows: true,
-      },
+      props: {
+        showArrows: true
+      }
     })
 
     expect(wrapper.vm.hasAffixes).toBe(true)
     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)
   })
@@ -72,7 +73,7 @@ describe('VSlideGroup.ts', () => {
     const testOffsetAndUpdate = (direction: 'prev' | 'next', rtl: boolean, expectedOffset: number) => {
       currentOffset = calculateNewOffset(direction, {
         content: 1000,
-        wrapper: 400,
+        wrapper: 400
       }, rtl, currentOffset)
 
       expect(currentOffset).toBe(expectedOffset)
@@ -98,10 +99,10 @@ describe('VSlideGroup.ts', () => {
     const testOffset = (offsetLeft: number, rtl: boolean, expectedOffset: number) => {
       const offset = calculateUpdatedOffset({
         offsetLeft,
-        clientWidth: 20,
+        clientWidth: 20
       } as HTMLElement, {
         content: 1000,
-        wrapper: 500,
+        wrapper: 500
       }, rtl, 0)
 
       expect(offset).toBe(expectedOffset)
@@ -122,10 +123,10 @@ describe('VSlideGroup.ts', () => {
     const testOffset = (offsetLeft: number, rtl: boolean, expectedOffset: number) => {
       const offset = calculateCenteredOffset({
         offsetLeft,
-        clientWidth: 20,
+        clientWidth: 20
       } as HTMLElement, {
         content: 1000,
-        wrapper: 500,
+        wrapper: 500
       }, rtl)
 
       expect(offset).toBe(expectedOffset)
@@ -146,15 +147,15 @@ describe('VSlideGroup.ts', () => {
   it.skip('should call on touch methods', async () => {
     const wrapper = mountFunction({
       data: () => ({
-        isOverflowing: true,
-      }),
+        isOverflowing: true
+      })
     })
 
     expect(wrapper.vm.scrollOffset).toBe(0)
 
     const touchstartEvent = {
       touchstartX: 10,
-      touchmoveX: 0,
+      touchmoveX: 0
     }
 
     wrapper.vm.onTouchStart(touchstartEvent)
@@ -165,7 +166,7 @@ describe('VSlideGroup.ts', () => {
 
     const touchmoveEvent = {
       touchstartX: 10,
-      touchmoveX: 100,
+      touchmoveX: 100
     }
     wrapper.vm.onTouchMove(touchmoveEvent)
 
@@ -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)
@@ -197,13 +196,13 @@ describe('VSlideGroup.ts', () => {
     const event = {
       touchstartX: 0,
       touchmoveX: 0,
-      stopPropagation: () => {},
+      stopPropagation: () => {}
     }
 
     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: {
-        showArrows: true,
+      global: {
+        mocks: {
+          $vuetify: {
+            rtl: false,
+            breakpoint: new Breakpoint(preset)
+          }
+        }
       },
-      listeners: {
-        'click:prev': onClick,
-        'click:next': onClick,
+      props: {
+        showArrows: true
       },
+      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()
 
@@ -248,58 +256,56 @@ describe('VSlideGroup.ts', () => {
       computed: {
         hasAffixes: () => true,
         hasNext: () => true,
-        hasPrev: () => true,
+        hasPrev: () => true
       },
-      propsData: {
-        showArrows: true,
+      props: {
+        showArrows: true
       },
-      scopedSlots: {
+      slots: {
         prev () {
           return h('div', {
-            class: 'fizz',
+            class: 'fizz'
           }, 'foo')
         },
         next () {
           return h('div', {
-            class: 'fizz',
+            class: 'fizz'
           }, 'bar')
-        },
-      },
+        }
+      }
     })
 
-    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: {
-        showArrows: true,
-      },
-      mocks: {
-        $vuetify: {
-          rtl: true,
-          breakpoint: { mobileBreakpoint: 1264 },
-        },
+      props: {
+        showArrows: true
       },
+      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
@@ -314,19 +320,19 @@ describe('VSlideGroup.ts', () => {
     ['desktop', false, true, false],
     ['always', true, true, true],
     ['always', true, false, true],
-    ['always', false, false, true],
+    ['always', false, false, true]
   ])('should conditionally show arrows with %s %s %s %s', (...opts) => {
     const [
       showArrows,
       isOverflowing,
       isMobile,
-      hasAffixes,
+      hasAffixes
     ] = opts
 
     const wrapper = mountFunction({
       data: () => ({ isOverflowing }),
       computed: { isMobile: () => isMobile },
-      propsData: { showArrows },
+      props: { showArrows }
     })
 
     expect(wrapper.vm.hasAffixes).toBe(hasAffixes)
@@ -335,9 +341,9 @@ describe('VSlideGroup.ts', () => {
   it('should has affixes on desktop when scrollOffset greater than 0', async () => {
     const wrapper = mountFunction({
       data: () => ({
-        scrollOffset: 200,
+        scrollOffset: 200
       }),
-      computed: { isMobile: () => false },
+      computed: { isMobile: () => false }
     })
 
     expect(wrapper.vm.hasAffixes).toBe(true)
@@ -354,11 +360,13 @@ describe('VSlideGroup.ts', () => {
 
     const wrapper = mountFunction({
       data: () => ({
-        items: [{ $el: {} }],
-      }),
-      methods: { calculateNewOffset },
+        items: [{ $el: {} }]
+      })
     })
 
+    // Mock the method
+    wrapper.vm.calculateNewOffset = calculateNewOffset
+
     const setWrapperPosition = ({ left = 0, right = 0 } = {}) => {
       wrapper.vm.$refs.wrapper.getBoundingClientRect = () => ({ left, right } as DOMRectReadOnly)
     }