@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha41

package/src/components/VPagination/VPagination.ts

@@ -1,4 +1,4 @@
-import {h, withDirectives} from 'vue'
+import { h, withDirectives } from 'vue'
 import './VPagination.sass'
 
 import VIcon from '../VIcon'
@@ -13,9 +13,10 @@ import Themeable from '../../mixins/themeable'
 
 // Utilities
 import mixins from '../../util/mixins'
+import { breaking } from '../../util/console'
 
 // Types
-import { VNode, CreateElement, VNodeChildrenArrayContents } from 'vue'
+import type { VNode, CreateElement, VNodeChildrenArrayContents } from '../../types/vue-internal'
 
 /* @vue/component */
 export default mixins(
@@ -25,8 +26,6 @@ export default mixins(
 ).extend({
   name: 'v-pagination',
 
-  directives: { Resize },
-
   props: {
     circle: Boolean,
     disabled: Boolean,
@@ -35,60 +34,59 @@ export default mixins(
     length: {
       type: Number,
       default: 0,
-      validator: (val: number) => val % 1 === 0,
+      validator: (val: number) => val % 1 === 0
     },
     nextIcon: {
       type: String,
-      default: '$next',
+      default: '$next'
     },
     prevIcon: {
       type: String,
-      default: '$prev',
+      default: '$prev'
     },
     totalVisible: [Number, String],
     modelValue: {
       type: Number,
-      default: 0,
+      default: 0
     },
     pageAriaLabel: {
       type: String,
-      default: '$vuetify.pagination.ariaLabel.page',
+      default: '$vuetify.pagination.ariaLabel.page'
     },
     currentPageAriaLabel: {
       type: String,
-      default: '$vuetify.pagination.ariaLabel.currentPage',
+      default: '$vuetify.pagination.ariaLabel.currentPage'
     },
     previousAriaLabel: {
       type: String,
-      default: '$vuetify.pagination.ariaLabel.previous',
+      default: '$vuetify.pagination.ariaLabel.previous'
     },
     nextAriaLabel: {
       type: String,
-      default: '$vuetify.pagination.ariaLabel.next',
+      default: '$vuetify.pagination.ariaLabel.next'
     },
     wrapperAriaLabel: {
       type: String,
-      default: '$vuetify.pagination.ariaLabel.wrapper',
-    },
+      default: '$vuetify.pagination.ariaLabel.wrapper'
+    }
   },
 
+  emits: ['update:modelValue', 'next', 'previous'],
+
   data () {
     return {
       maxButtons: 0,
-      selected: null as number | null,
+      selected: null as number | null
     }
   },
 
   computed: {
-    value() {
-      return this.modelValue
-    },
     classes (): object {
       return {
         'v-pagination': true,
         'v-pagination--circle': this.circle,
         'v-pagination--disabled': this.disabled,
-        ...this.themeClasses,
+        ...this.themeClasses
       }
     },
 
@@ -113,35 +111,47 @@ export default mixins(
       const left = Math.floor(maxLength / 2)
       const right = this.length - left + 1 + even
 
-      if (this.value > left && this.value < right) {
+      if (this.modelValue > left && this.modelValue < right) {
         const firstItem = 1
         const lastItem = this.length
-        const start = this.value - left + 2
-        const end = this.value + left - 2 - even
+        const start = this.modelValue - left + 2
+        const end = this.modelValue + left - 2 - even
         const secondItem = start - 1 === firstItem + 1 ? 2 : '...'
         const beforeLastItem = end + 1 === lastItem - 1 ? end + 1 : '...'
 
         return [1, secondItem, ...this.range(start, end), beforeLastItem, this.length]
-      } else if (this.value === left) {
-        const end = this.value + left - 1 - even
+      } else if (this.modelValue === left) {
+        const end = this.modelValue + left - 1 - even
         return [...this.range(1, end), '...', this.length]
-      } else if (this.value === right) {
-        const start = this.value - left + 1
+      } else if (this.modelValue === right) {
+        const start = this.modelValue - left + 1
         return [1, '...', ...this.range(start, this.length)]
       } else {
         return [
           ...this.range(1, left),
           '...',
-          ...this.range(right, this.length),
+          ...this.range(right, this.length)
         ]
       }
-    },
+    }
+  },
+
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue']
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
   },
 
   watch: {
-    value () {
+    modelValue () {
       this.init()
-    },
+    }
   },
 
   beforeMount () {
@@ -155,7 +165,7 @@ export default mixins(
       this.onResize()
       this.$nextTick(this.onResize)
       // TODO: Change this (f75dee3a, cbdf7caa)
-      setTimeout(() => (this.selected = this.value), 100)
+      setTimeout(() => (this.selected = this.modelValue), 100)
     },
     onResize () {
       const width = this.$el && this.$el.parentElement
@@ -166,12 +176,12 @@ export default mixins(
     },
     next (e: Event) {
       e.preventDefault()
-      this.$emit('update:modelValue', this.value + 1)
+      this.$emit('update:modelValue', this.modelValue + 1)
       this.$emit('next')
     },
     previous (e: Event) {
       e.preventDefault()
-      this.$emit('update:modelValue', this.value - 1)
+      this.$emit('update:modelValue', this.modelValue - 1)
       this.$emit('previous')
     },
     range (from: number, to: number) {
@@ -190,36 +200,36 @@ export default mixins(
         h('button',
           this.setBackgroundColor(this.navigationColor, {
             class: ['v-pagination__navigation', {
-              'v-pagination__navigation--disabled': disabled,
+              'v-pagination__navigation--disabled': disabled
             }],
             disabled,
             type: 'button',
             'aria-label': label,
-            ...(disabled ? {} : { onClick: fn }),
+            ...(disabled ? {} : { onClick: fn })
           }),
-          [h(VIcon, { color: this.navigationTextColor }, [icon])]
-        ),
+          [h(VIcon, { color: this.navigationTextColor }, () => [icon])]
+        )
       ])
     },
     genItem (h: CreateElement, i: string | number): VNode {
-      const color: string | false = (i === this.value) && (this.color || 'primary')
-      const isCurrentPage = i === this.value
+      const color: string | false = (i === this.modelValue) && (this.color || 'primary')
+      const isCurrentPage = i === this.modelValue
       const ariaLabel = isCurrentPage ? this.currentPageAriaLabel : this.pageAriaLabel
 
       return h('button', this.setBackgroundColor(color, {
         class: ['v-pagination__item', {
-          'v-pagination__item--active': i === this.value,
+          'v-pagination__item--active': i === this.modelValue
         }],
         type: 'button',
         'aria-current': isCurrentPage,
         'aria-label': this.$vuetify.lang.t(ariaLabel, i),
-        onClick: () => this.$emit('update:modelValue', i),
+        onClick: () => this.$emit('update:modelValue', i)
       }), [i.toString()])
     },
     genItems (h: CreateElement): VNode[] {
       return this.items.map((i, index) => {
         return h('li', { key: index }, [
-          isNaN(Number(i)) ? h('span', { class: 'v-pagination__more' }, [i.toString()]) : this.genItem(h, i),
+          isNaN(Number(i)) ? h('span', { class: 'v-pagination__more' }, [i.toString()]) : this.genItem(h, i)
         ])
       })
     },
@@ -234,27 +244,29 @@ export default mixins(
           { quiet: true }
         ]
       ])
-    },
+    }
   },
 
   render (): VNode {
     const children = [
       this.genIcon(h,
         this.$vuetify.rtl ? this.nextIcon : this.prevIcon,
-        this.value <= 1,
+        this.modelValue <= 1,
         this.previous,
-        this.$vuetify.lang.t(this.previousAriaLabel)),
+        this.$vuetify.lang.t(this.previousAriaLabel)
+      ),
       this.genItems(h),
       this.genIcon(h,
         this.$vuetify.rtl ? this.prevIcon : this.nextIcon,
-        this.value >= this.length,
+        this.modelValue >= this.length,
         this.next,
-        this.$vuetify.lang.t(this.nextAriaLabel)),
+        this.$vuetify.lang.t(this.nextAriaLabel)
+      )
     ]
 
     return h('nav', {
       role: 'navigation',
-      'aria-label': this.$vuetify.lang.t(this.wrapperAriaLabel),
+      'aria-label': this.$vuetify.lang.t(this.wrapperAriaLabel)
     }, [this.genList(h, children)])
-  },
+  }
 })

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

@@ -1,76 +1,77 @@
 import VPagination from '../VPagination'
 import {
   mount,
-  MountOptions,
-  Wrapper,
+  VueWrapper,
+  MountingOptions,
+  enableAutoUnmount
 } from '@vue/test-utils'
-import Vue from 'vue'
-
-Vue.prototype.$vuetify = {
-  rtl: false,
-  icons: {
-    values: {
-      next: 'mdi-chevron-right',
-      prev: 'mdi-chevron-left',
-    },
-  },
-  lang: {
-    t: str => str,
-  },
-}
+import { h } from 'vue'
+import { Lang } from '../../../services/lang'
+import { preset } from '../../../presets/default'
 
 describe('VPagination.ts', () => {
   type Instance = InstanceType<typeof VPagination>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: MountingOptions<Instance>) => VueWrapper<Instance>
+
+  enableAutoUnmount(afterEach)
+
   beforeEach(() => {
     jest.useFakeTimers()
 
-    mountFunction = (options?: MountOptions<Instance>) => {
+    mountFunction = (options?: MountingOptions<Instance>) => {
+      const vuetifyInstance = {
+        rtl: false,
+        icons: {
+          values: {
+            next: 'mdi-chevron-right',
+            prev: 'mdi-chevron-left'
+          }
+        },
+        lang: new Lang(preset)
+      }
+
       return mount(VPagination, {
-        mocks: {
-          $vuetify: {
-            lang: {
-              t: str => str,
-            },
+        global: {
+          config: {
+            globalProperties: {
+              $vuetify: vuetifyInstance
+            }
           },
+          mocks: {
+            $vuetify: vuetifyInstance
+          }
         },
-        ...options,
+        ...options
       })
     }
   })
 
   it('emits an event when next or previous is clicked', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         length: 5,
-        value: 2,
-      },
+        modelValue: 2
+      }
     })
     jest.runAllTimers()
 
     await wrapper.vm.$nextTick()
 
-    const previous = jest.fn()
-    const next = jest.fn()
-
-    wrapper.vm.$on('previous', previous)
-    wrapper.vm.$on('next', next)
-
-    const navigation = wrapper.findAll('.v-pagination__navigation').wrappers
+    const navigation = wrapper.findAll('.v-pagination__navigation')
     navigation[0].trigger('click')
     navigation[1].trigger('click')
 
-    expect(next).toHaveBeenCalled()
-    expect(previous).toHaveBeenCalled()
+    expect(wrapper.emitted('previous')).toBeTruthy()
+    expect(wrapper.emitted('next')).toBeTruthy()
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should render component in RTL mode and match snapshot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         length: 5,
-        value: 2,
-      },
+        modelValue: 2
+      }
     })
     wrapper.vm.$vuetify.rtl = true
     await wrapper.vm.$nextTick()
@@ -81,31 +82,28 @@ describe('VPagination.ts', () => {
 
   it('emits an event when pagination item is clicked', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         length: 5,
-        value: 2,
-      },
+        modelValue: 2
+      }
     })
     jest.runAllTimers()
 
     await wrapper.vm.$nextTick()
 
-    const cb = jest.fn()
-
-    wrapper.vm.$on('input', cb)
-
-    const navigation = wrapper.findAll('.v-pagination__item').wrappers
+    const navigation = wrapper.findAll('.v-pagination__item')
     navigation[1].trigger('click')
 
-    expect(cb).toHaveBeenCalledWith(2)
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([2])
   })
 
   it('should render disabled buttons with length equals to 0', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         length: 0,
-        value: 1,
-      },
+        modelValue: 1
+      }
     })
     jest.runAllTimers()
 
@@ -114,102 +112,117 @@ describe('VPagination.ts', () => {
 
   it('should watch the value', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         length: 5,
-        value: 1,
-      },
+        modelValue: 1
+      }
     })
 
     jest.runAllTimers()
+    await wrapper.vm.$nextTick()
     expect(wrapper.vm.selected).toBe(1)
 
-    wrapper.setProps({ value: 2 })
-    jest.runAllTimers()
+    await wrapper.setProps({ modelValue: 2 })
+    jest.advanceTimersByTime(150)
+    await wrapper.vm.$nextTick()
     expect(wrapper.vm.selected).toBe(2)
   })
 
   it('should only render start and end of range if length is big', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         length: 100,
-      },
+        modelValue: 1
+      }
     })
     jest.runAllTimers()
 
+    await wrapper.vm.$nextTick()
+    await wrapper.vm.$nextTick()
+    jest.advanceTimersByTime(150)
+
+    // Force maxButtons to be set and trigger re-render
+    wrapper.vm.maxButtons = 5
     await wrapper.vm.$nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
-    expect(wrapper.findAll('.v-pagination__more').wrappers).toHaveLength(1)
+    expect(wrapper.findAll('.v-pagination__more')).toHaveLength(1)
   })
 
   it('should only render middle of range if length is big and value is somewhere in the middle', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         length: 100,
-        value: 50,
-      },
+        modelValue: 50
+      }
     })
     jest.runAllTimers()
 
+    await wrapper.vm.$nextTick()
+    await wrapper.vm.$nextTick()
+    jest.advanceTimersByTime(150)
+
+    // Force maxButtons to be set and trigger re-render
+    wrapper.vm.maxButtons = 5
     await wrapper.vm.$nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
-    expect(wrapper.findAll('.v-pagination__more').wrappers).toHaveLength(2)
+    expect(wrapper.findAll('.v-pagination__more')).toHaveLength(2)
   })
 
   it('should only render start of range if value is equals "left"', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         length: 100,
-        totalVisible: 5,
-      },
+        totalVisible: 5
+      }
     })
     const maxLength = Number(wrapper.vm.totalVisible)
     const left = Math.ceil(maxLength / 2)
-    wrapper.setProps({ value: left })
+    wrapper.setProps({ modelValue: left })
     jest.runAllTimers()
 
     await wrapper.vm.$nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
-    expect(wrapper.findAll('.v-pagination__more').wrappers).toHaveLength(1)
+    expect(wrapper.findAll('.v-pagination__more')).toHaveLength(1)
   })
 
   it('should only render end of range if value is equals "right"', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         length: 100,
-        totalVisible: 5,
-      },
+        totalVisible: 5
+      }
     })
     const maxLength = Number(wrapper.vm.totalVisible)
     const even = maxLength % 2 === 0 ? 1 : 0
     const left = Math.ceil(maxLength / 2)
     const right = wrapper.vm.length - left + 1 + even
-    wrapper.setProps({ value: right })
+    wrapper.setProps({ modelValue: right })
     jest.runAllTimers()
 
     await wrapper.vm.$nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
-    expect(wrapper.findAll('.v-pagination__more').wrappers).toHaveLength(1)
+    expect(wrapper.findAll('.v-pagination__more')).toHaveLength(1)
   })
 
   it('should use totalVisible prop if defined', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         length: 100,
-        value: 50,
-        totalVisible: 10,
-      },
+        modelValue: 50,
+        totalVisible: 10
+      }
     })
     jest.runAllTimers()
 
     await wrapper.vm.$nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
-    expect(wrapper.findAll('.v-pagination__more').wrappers).toHaveLength(2)
-    expect(wrapper.findAll('.v-pagination__item').wrappers).toHaveLength(8)
+    expect(wrapper.findAll('.v-pagination__more')).toHaveLength(2)
+    expect(wrapper.findAll('.v-pagination__item')).toHaveLength(8)
   })
 
   it('should set from to 1 if <= 0', () => {
@@ -223,11 +236,10 @@ describe('VPagination.ts', () => {
   // even if it's not real world, so that we can detect changes
   it('should use parents width for on resize calculation', () => {
     const wrapper = mount({
-      functional: true,
-      render: h => h('div', [h(VPagination)]),
+      render: () => h('div', [h(VPagination)])
     })
 
-    const pagination = wrapper.find(VPagination.options)
+    const pagination = wrapper.findComponent(VPagination)
 
     expect(pagination.vm.maxButtons).toBe(22)
 
@@ -240,13 +252,13 @@ describe('VPagination.ts', () => {
   it('should never show more than the max number of allowed buttons', () => {
     const wrapper = mountFunction({
       data: () => ({
-        maxButtons: 4,
+        maxButtons: 4
       }),
 
-      propsData: {
+      props: {
         length: 40,
-        totalVisible: 10,
-      },
+        totalVisible: 10
+      }
     })
 
     wrapper.setData({ maxButtons: 4 })
@@ -258,16 +270,16 @@ describe('VPagination.ts', () => {
     expect(wrapper.vm.items).toHaveLength(10)
   })
 
-  it('should never show more than the number of total visible buttons', () => {
+  it('should never show more than the number of total visible buttons', async () => {
     const wrapper = mountFunction({
       data: () => ({
-        maxButtons: 0,
+        maxButtons: 0
       }),
 
-      propsData: {
+      props: {
         length: 5,
-        totalVisible: undefined,
-      },
+        totalVisible: undefined
+      }
     })
 
     expect(wrapper.vm.items).toHaveLength(5)
@@ -276,10 +288,12 @@ describe('VPagination.ts', () => {
 
     wrapper.setData({ maxButtons: 0 })
     wrapper.setProps({ totalVisible: 10 })
+    await wrapper.vm.$nextTick()
     expect(wrapper.vm.items).toHaveLength(10)
 
     wrapper.setData({ maxButtons: 11 })
     wrapper.setProps({ totalVisible: undefined })
+    await wrapper.vm.$nextTick()
     expect(wrapper.vm.items).toHaveLength(11)
 
     wrapper.setData({ maxButtons: 12 })
@@ -290,7 +304,7 @@ describe('VPagination.ts', () => {
   it('should return length when maxButtons is less than 1', () => {
     const wrapper = mountFunction({
       data: () => ({ maxButtons: -3 }),
-      propsData: { length: 4 },
+      props: { length: 4 }
     })
 
     expect(wrapper.vm.items).toEqual([1, 2, 3, 4])