@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha40

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

@@ -1,34 +1,32 @@
 import VData from '../VData'
+import { h } from 'vue'
 import {
   mount,
-  MountOptions,
-  Wrapper,
+  MountingOptions,
+  VueWrapper,
 } from '@vue/test-utils'
 
 describe('VData.ts', () => {
   type Instance = InstanceType<typeof VData>
-  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+  let mountFunction: (options?: any) => VueWrapper<Instance>
   beforeEach(() => {
-    mountFunction = (options?: MountOptions<Instance>) => {
+    mountFunction = (options?: any) => {
       return mount(VData, {
         ...options,
-        sync: false,
       })
     }
   })
 
   it('should render data through default scoped slot', async () => {
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [
           { id: 1, text: 'foo' },
           { id: 2, text: 'bar' },
         ],
       },
-      scopedSlots: {
-        default (data) {
-          return h('div', data.items.map(item => h('div', [item.text])))
-        },
+      slots: {
+        default: (data: any) => h('div', data.items.map((item: any) => h('div', [item.text]))),
       },
     })
 
@@ -40,13 +38,13 @@ describe('VData.ts', () => {
   it('should ignore items length if using server-items-length', async () => {
     const render = jest.fn()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [
           { id: 1, text: 'foo' },
           { id: 2, text: 'bar' },
         ],
       },
-      scopedSlots: {
+      slots: {
         default: render,
       },
     })
@@ -58,7 +56,7 @@ describe('VData.ts', () => {
       }),
     }))
 
-    wrapper.setProps({
+    await wrapper.setProps({
       serverItemsLength: 10,
     })
 
@@ -79,11 +77,11 @@ describe('VData.ts', () => {
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items,
         groupBy: ['baz'],
       },
-      scopedSlots: {
+      slots: {
         default: render,
       },
     })
@@ -111,11 +109,11 @@ describe('VData.ts', () => {
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items,
         groupBy: ['baz'],
       },
-      scopedSlots: {
+      slots: {
         default: render,
       },
     })
@@ -143,11 +141,11 @@ describe('VData.ts', () => {
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items,
         groupBy: ['foo.bar'],
       },
-      scopedSlots: {
+      slots: {
         default: render,
       },
     })
@@ -175,7 +173,7 @@ describe('VData.ts', () => {
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items,
         groupBy: ['value'],
         customGroup: function evenOddGrouper (items: any[], groupBy: string[]) {
@@ -187,7 +185,7 @@ describe('VData.ts', () => {
           }, {})
         },
       },
-      scopedSlots: {
+      slots: {
         default: render,
       },
     })
@@ -218,11 +216,11 @@ describe('VData.ts', () => {
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: unsorted,
         sortBy: ['text'],
       },
-      scopedSlots: {
+      slots: {
         default: render,
       },
     })
@@ -250,18 +248,18 @@ describe('VData.ts', () => {
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: unsorted,
         sortBy: ['foo'],
       },
-      scopedSlots: {
+      slots: {
         default: render,
       },
     })
 
     await wrapper.vm.$nextTick()
 
-    wrapper.setProps({
+    await wrapper.setProps({
       sortBy: ['foo', 'bar'],
     })
     await wrapper.vm.$nextTick()
@@ -288,12 +286,12 @@ describe('VData.ts', () => {
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items,
         itemsPerPage: 5,
         page: 2,
       },
-      scopedSlots: {
+      slots: {
         default: render,
       },
     })
@@ -315,12 +313,12 @@ describe('VData.ts', () => {
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items,
         sortBy: ['text'],
         disableSort: true,
       },
-      scopedSlots: {
+      slots: {
         default: render,
       },
     })
@@ -341,8 +339,8 @@ describe('VData.ts', () => {
     ]
 
     const wrapper = mountFunction({
-      propsData: { items },
-      scopedSlots: {
+      props: { items },
+      slots: {
         default: render,
       },
     })
@@ -351,14 +349,14 @@ describe('VData.ts', () => {
       items,
     }))
 
-    wrapper.setProps({ itemsPerPage: 2 })
+    await wrapper.setProps({ itemsPerPage: 2 })
     await wrapper.vm.$nextTick()
 
     expect(render).toHaveBeenCalledWith(expect.objectContaining({
       items: items.slice(0, 2),
     }))
 
-    wrapper.setProps({ disablePagination: true })
+    await wrapper.setProps({ disablePagination: true })
     await wrapper.vm.$nextTick()
 
     expect(render).toHaveBeenCalledWith(expect.objectContaining({
@@ -375,19 +373,15 @@ describe('VData.ts', () => {
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: unsorted,
       },
-      scopedSlots: {
-        default (props) {
-          const items = props.items.map(item => h('div', [item.text]))
+      slots: {
+        default: (props: any) => {
+          const items = props.items.map((item: any) => h('div', [item.text]))
           return h('div', {
-            attrs: {
-              id: 'wrapper',
-            },
-            on: {
-              click: () => props.sort('text'),
-            },
+            id: 'wrapper',
+            onClick: () => props.sort('text'),
           }, items)
         },
       },
@@ -395,13 +389,12 @@ describe('VData.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    const el = wrapper.find('#wrapper').element
-    el.click()
+    await wrapper.find('#wrapper').trigger('click')
     await wrapper.vm.$nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    el.click()
+    await wrapper.find('#wrapper').trigger('click')
     await wrapper.vm.$nextTick()
     expect(wrapper.html()).toMatchSnapshot()
   })
@@ -415,19 +408,15 @@ describe('VData.ts', () => {
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: unsorted,
       },
-      scopedSlots: {
-        default (props) {
-          const items = props.items.map(item => h('div', [`${item.group}-${item.text}`]))
+      slots: {
+        default: (props: any) => {
+          const items = props.items.map((item: any) => h('div', [`${item.group}-${item.text}`]))
           return h('div', {
-            attrs: {
-              id: 'wrapper',
-            },
-            on: {
-              click: () => props.sort(['group', 'text']),
-            },
+            id: 'wrapper',
+            onClick: () => props.sort(['group', 'text']),
           }, items)
         },
       },
@@ -435,8 +424,7 @@ describe('VData.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    const el = wrapper.find('#wrapper').element
-    el.click()
+    await wrapper.find('#wrapper').trigger('click')
     await wrapper.vm.$nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -451,31 +439,26 @@ describe('VData.ts', () => {
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: unsorted,
       },
-      scopedSlots: {
-        default (props) {
+      slots: {
+        default: (props: any) => {
           const items = props.groupedItems
-            ? props.groupedItems.map(group => group.name)
-            : props.items.map(item => item.text)
+            ? props.groupedItems.map((group: any) => group.name)
+            : props.items.map((item: any) => item.text)
 
           return h('div', {
-            attrs: {
-              id: 'wrapper',
-            },
-            on: {
-              click: () => props.group('group'),
-            },
-          }, items.map(item => h('div', [item])))
+            id: 'wrapper',
+            onClick: () => props.group('group'),
+          }, items.map((item: any) => h('div', [item])))
         },
       },
     })
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    const el = wrapper.find('#wrapper').element
-    el.click()
+    await wrapper.find('#wrapper').trigger('click')
     await wrapper.vm.$nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -485,14 +468,14 @@ describe('VData.ts', () => {
   it('should handle setting itemsPerPage to zero', async () => {
     const render = jest.fn()
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: [
           { id: 1, text: 'foo' },
           { id: 2, text: 'bar' },
         ],
         itemsPerPage: 0,
       },
-      scopedSlots: {
+      slots: {
         default: render,
       },
     })
@@ -508,7 +491,7 @@ describe('VData.ts', () => {
       }),
     }))
 
-    wrapper.setProps({
+    await wrapper.setProps({
       itemsPerPage: 1,
     })
 
@@ -534,30 +517,26 @@ describe('VData.ts', () => {
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items: unsorted,
         groupBy: ['text'],
       },
-      scopedSlots: {
-        default (props) {
+      slots: {
+        default: (props: any) => {
           return h('div', {
-            attrs: {
-              id: 'wrapper',
-            },
-            on: {
-              click: () => props.group('group'),
-            },
-          }, props.groupedItems.map(group => h('div', [group.name])))
+            id: 'wrapper',
+            onClick: () => props.group('group'),
+          }, props.groupedItems.map((group: any) => h('div', [group.name])))
         },
       },
     })
 
-    wrapper.setProps({ groupDesc: [false] })
+    await wrapper.setProps({ groupDesc: [false] })
     await wrapper.vm.$nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
 
-    wrapper.setProps({ groupDesc: [true] })
+    await wrapper.setProps({ groupDesc: [true] })
     await wrapper.vm.$nextTick()
 
     expect(wrapper.html()).toMatchSnapshot()
@@ -573,12 +552,12 @@ describe('VData.ts', () => {
     ]
 
     const wrapper = mountFunction({
-      propsData: {
+      props: {
         items,
         groupBy: ['baz'],
         disableSort: true,
       },
-      scopedSlots: {
+      slots: {
         default: render,
       },
     })

package/src/components/VDataIterator/VDataFooter.ts

@@ -8,7 +8,6 @@ import VBtn from '../VBtn'
 // Types
 import { defineComponent, VNode, VNodeChildrenArrayContents, PropType, h } from 'vue'
 import { DataPagination, DataOptions, DataItemsPerPageOption } from 'vuetify/types'
-import { PropValidator } from 'vue/types/options'
 import { getSlot, normalizeAttrs } from '../../util/helpers'
 
 export default defineComponent({
@@ -24,9 +23,9 @@ export default defineComponent({
       required: true,
     },
     itemsPerPageOptions: {
-      type: Array,
+      type: Array as PropType<DataItemsPerPageOption[]>,
       default: () => ([5, 10, 15, -1]),
-    } as PropValidator<DataItemsPerPageOption[]>,
+    },
     prevIcon: {
       type: String,
       default: '$prev',
@@ -61,6 +60,10 @@ export default defineComponent({
     },
   },
 
+  emits: {
+    'update:options': (options: DataOptions) => true,
+  },
+
   computed: {
     disableNextPageIcon (): boolean {
       return this.options.itemsPerPage <= 0 ||
@@ -120,7 +123,7 @@ export default defineComponent({
           hideDetails: true,
           auto: true,
           minWidth: '75px',
-          onInput: this.onChangeItemsPerPage,
+          'onUpdate:modelValue': this.onChangeItemsPerPage,
         })),
       ])
     },
@@ -136,11 +139,15 @@ export default defineComponent({
           ? itemsLength
           : this.pagination.pageStop
 
-        children = this.$slots['page-text']
-          ? [this.$slots['page-text']!({ pageStart, pageStop, itemsLength })]
+        const pageTextSlot = getSlot(this, 'page-text', { pageStart, pageStop, itemsLength })
+        children = pageTextSlot
+          ? [pageTextSlot]
           : [this.$vuetify.lang.t(this.pageText, pageStart, pageStop, itemsLength)]
-      } else if (this.$slots['page-text']) {
-        children = [this.$slots['page-text']!({ pageStart, pageStop, itemsLength })]
+      } else {
+        const pageTextSlot = getSlot(this, 'page-text', { pageStart, pageStop, itemsLength })
+        if (pageTextSlot) {
+          children = [pageTextSlot]
+        }
       }
 
       return h('div', {
@@ -156,7 +163,7 @@ export default defineComponent({
         // light: this.light // TODO: add mixin
         onClick: click,
         'aria-label': label, // TODO: Localization
-      }, [h(VIcon, icon)])
+      }, () => [h(VIcon, {}, () => icon)])
     },
     genIcons () {
       const before: VNodeChildrenArrayContents = []

package/src/components/VDataIterator/VDataIterator.ts

@@ -12,32 +12,30 @@ import { deepEqual, getObjectValueByPath, getPrefixedScopedSlots, getSlot, camel
 import { breaking, removed } from '../../util/console'
 
 // Types
-import { VNode, VNodeChildren } from 'vue'
-import { PropValidator } from 'vue/types/options'
+import { h, VNode, VNodeChildren, PropType, defineComponent } from 'vue'
 import { DataItemProps, DataScopeProps } from 'vuetify/types'
 
 /* @vue/component */
-export default mixins(
-  Mobile,
-  Themeable
-).extend({
+export default defineComponent({
   name: 'v-data-iterator',
 
+  mixins: [Mobile, Themeable],
+
   props: {
     ...VData.props, // TODO: filter out props not used
     itemKey: {
       type: String,
       default: 'id',
     },
-    value: {
-      type: Array,
+    modelValue: {
+      type: Array as PropType<any[]>,
       default: () => [],
-    } as PropValidator<any[]>,
+    },
     singleSelect: Boolean,
     expanded: {
-      type: Array,
+      type: Array as PropType<any[]>,
       default: () => [],
-    } as PropValidator<any[]>,
+    },
     mobileBreakpoint: {
       ...Mobile.props.mobileBreakpoint,
       default: 600,
@@ -64,6 +62,24 @@ export default mixins(
     },
   },
 
+  emits: [
+    'update:modelValue',
+    'update:expanded',
+    'toggle-select-all',
+    'item-selected',
+    'item-expanded',
+    'update:options',
+    'update:page',
+    'update:items-per-page',
+    'update:sort-by',
+    'update:sort-desc',
+    'update:group-by',
+    'update:group-desc',
+    'pagination',
+    'current-items',
+    'page-count',
+  ],
+
   data: () => ({
     selection: {} as Record<string, any>,
     expansion: {} as Record<string, boolean>,
@@ -88,8 +104,10 @@ export default mixins(
   },
 
   watch: {
-    value: {
+    modelValue: {
       handler (value: any[]) {
+        if (!value) return
+
         this.selection = value.reduce((selection, item) => {
           selection[getObjectValueByPath(item, this.itemKey)] = item
           return selection
@@ -100,7 +118,7 @@ export default mixins(
     selection (value: Record<string, boolean>, old: Record<string, boolean>) {
       if (deepEqual(Object.keys(value), Object.keys(old))) return
 
-      this.$emit('input', Object.values(value))
+      this.$emit('update:modelValue', Object.values(value))
     },
     expanded: {
       handler (value: any[]) {
@@ -121,6 +139,8 @@ export default mixins(
 
   created () {
     const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
       ['disable-initial-sort', 'sort-by'],
       ['filter', 'custom-filter'],
       ['pagination', 'options'],
@@ -154,7 +174,7 @@ export default mixins(
     window.addEventListener('keydown', this.onKeyDown)
     window.addEventListener('keyup', this.onKeyUp)
   },
-  beforeDestroy () {
+  beforeUnmount () {
     window.removeEventListener('keydown', this.onKeyDown)
     window.removeEventListener('keyup', this.onKeyUp)
   },
@@ -299,15 +319,14 @@ export default mixins(
         ...this.sanitizedFooterProps,
         options: props.options,
         pagination: props.pagination,
-        'onUpdate:options': (value: any) => props.updateOptions(value)
+        onUpdateOptions: (value: any) => props.updateOptions(value),
       }
 
       const scopedSlots = getPrefixedScopedSlots('footer.', this.$slots)
 
       return h(VDataFooter, {
-        scopedSlots,
         ...data,
-      })
+      }, scopedSlots)
     },
     genDefaultScopedSlot (props: any) {
       const outerProps = {
@@ -330,25 +349,22 @@ export default mixins(
 
   render (): VNode {
     return h(VData, {
-      props: this.$props,
-      on: {
-        'update:options': (v: any, old: any) => !deepEqual(v, old) && this.$emit('update:options', v),
-        'update:page': (v: any) => this.$emit('update:page', v),
-        'update:items-per-page': (v: any) => this.$emit('update:items-per-page', v),
-        'update:sort-by': (v: any) => this.$emit('update:sort-by', v),
-        'update:sort-desc': (v: any) => this.$emit('update:sort-desc', v),
-        'update:group-by': (v: any) => this.$emit('update:group-by', v),
-        'update:group-desc': (v: any) => this.$emit('update:group-desc', v),
-        pagination: (v: any, old: any) => !deepEqual(v, old) && this.$emit('pagination', v),
-        'current-items': (v: any[]) => {
-          this.internalCurrentItems = v
-          this.$emit('current-items', v)
-        },
-        'page-count': (v: number) => this.$emit('page-count', v),
-      },
-      scopedSlots: {
-        default: this.genDefaultScopedSlot,
+      ...this.$props,
+      onUpdateOptions: (v: any, old: any) => !deepEqual(v, old) && this.$emit('update:options', v),
+      onUpdatePage: (v: any) => this.$emit('update:page', v),
+      onUpdateItemsPerPage: (v: any) => this.$emit('update:items-per-page', v),
+      onUpdateSortBy: (v: any) => this.$emit('update:sort-by', v),
+      onUpdateSortDesc: (v: any) => this.$emit('update:sort-desc', v),
+      onUpdateGroupBy: (v: any) => this.$emit('update:group-by', v),
+      onUpdateGroupDesc: (v: any) => this.$emit('update:group-desc', v),
+      onPagination: (v: any, old: any) => !deepEqual(v, old) && this.$emit('pagination', v),
+      onCurrentItems: (v: any[]) => {
+        this.internalCurrentItems = v
+        this.$emit('current-items', v)
       },
+      onPageCount: (v: number) => this.$emit('page-count', v),
+    }, {
+      default: this.genDefaultScopedSlot,
     })
   },
 })