@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha41

package/src/components/VDataIterator/VDataFooter.ts

@@ -6,9 +6,9 @@ import VIcon from '../VIcon'
 import VBtn from '../VBtn'
 
 // Types
-import { defineComponent, VNode, VNodeChildrenArrayContents, PropType, h } from 'vue'
+import { defineComponent, VNode, PropType, h } from 'vue'
+import type { VNodeChildrenArrayContents } from '../../types/vue-internal'
 import { DataPagination, DataOptions, DataItemsPerPageOption } from 'vuetify/types'
-import { PropValidator } from 'vue/types/options'
 import { getSlot, normalizeAttrs } from '../../util/helpers'
 
 export default defineComponent({
@@ -17,39 +17,39 @@ export default defineComponent({
   props: {
     options: {
       type: Object as PropType<DataOptions>,
-      required: true,
+      required: true
     },
     pagination: {
       type: Object as PropType<DataPagination>,
-      required: true,
+      required: true
     },
     itemsPerPageOptions: {
-      type: Array,
-      default: () => ([5, 10, 15, -1]),
-    } as PropValidator<DataItemsPerPageOption[]>,
+      type: Array as PropType<DataItemsPerPageOption[]>,
+      default: () => ([5, 10, 15, -1])
+    },
     prevIcon: {
       type: String,
-      default: '$prev',
+      default: '$prev'
     },
     nextIcon: {
       type: String,
-      default: '$next',
+      default: '$next'
     },
     firstIcon: {
       type: String,
-      default: '$first',
+      default: '$first'
     },
     lastIcon: {
       type: String,
-      default: '$last',
+      default: '$last'
     },
     itemsPerPageText: {
       type: String,
-      default: '$vuetify.dataFooter.itemsPerPageText',
+      default: '$vuetify.dataFooter.itemsPerPageText'
     },
     itemsPerPageAllText: {
       type: String,
-      default: '$vuetify.dataFooter.itemsPerPageAll',
+      default: '$vuetify.dataFooter.itemsPerPageAll'
     },
     showFirstLastPage: Boolean,
     showCurrentPage: Boolean,
@@ -57,8 +57,12 @@ export default defineComponent({
     disableItemsPerPage: Boolean,
     pageText: {
       type: String,
-      default: '$vuetify.dataFooter.pageText',
-    },
+      default: '$vuetify.dataFooter.pageText'
+    }
+  },
+
+  emits: {
+    'update:options': (options: DataOptions) => true
   },
 
   computed: {
@@ -72,7 +76,7 @@ export default defineComponent({
         if (typeof option === 'object') return option
         else return this.genDataItemsPerPageOption(option)
       })
-    },
+    }
   },
 
   methods: {
@@ -97,7 +101,7 @@ export default defineComponent({
     genDataItemsPerPageOption (option: number) {
       return {
         text: option === -1 ? this.$vuetify.lang.t(this.itemsPerPageAllText) : String(option),
-        value: option,
+        value: option
       }
     },
     genItemsPerPageSelect () {
@@ -109,7 +113,7 @@ export default defineComponent({
       if (!computedIPPO.find(ippo => ippo.value === value)) value = computedIPPO[0]
 
       return h('div', {
-        class: 'v-data-footer__select',
+        class: 'v-data-footer__select'
       }, [
         this.$vuetify.lang.t(this.itemsPerPageText),
         h(VSelect, normalizeAttrs({
@@ -120,8 +124,8 @@ export default defineComponent({
           hideDetails: true,
           auto: true,
           minWidth: '75px',
-          onInput: this.onChangeItemsPerPage,
-        })),
+          'onUpdate:modelValue': this.onChangeItemsPerPage
+        }))
       ])
     },
     genPaginationInfo () {
@@ -136,16 +140,20 @@ 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 as any]
           : [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 as any]
+        }
       }
 
       return h('div', {
-        class: 'v-data-footer__pagination',
-      }, children)
+        class: 'v-data-footer__pagination'
+      }, children as any)
     },
     genIcon (click: Function, disabled: boolean, label: string, icon: string): VNode {
       return h(VBtn, {
@@ -155,8 +163,8 @@ export default defineComponent({
         // dark: this.dark, // TODO: add mixin
         // light: this.light // TODO: add mixin
         onClick: click,
-        'aria-label': label, // TODO: Localization
-      }, [h(VIcon, icon)])
+        'aria-label': label // TODO: Localization
+      }, () => [h(VIcon, {}, () => icon)])
     },
     genIcons () {
       const before: VNodeChildrenArrayContents = []
@@ -194,24 +202,24 @@ export default defineComponent({
 
       return [
         h('div', {
-          class: 'v-data-footer__icons-before',
+          class: 'v-data-footer__icons-before'
         }, before),
         this.showCurrentPage && h('span', [this.options.page.toString()]),
         h('div', {
-          class: 'v-data-footer__icons-after',
-        }, after),
+          class: 'v-data-footer__icons-after'
+        }, after)
       ]
-    },
+    }
   },
 
   render (): VNode {
     return h('div', {
-      class: 'v-data-footer',
+      class: 'v-data-footer'
     }, [
       getSlot(this, 'prepend'),
       this.genItemsPerPageSelect(),
       this.genPaginationInfo(),
-      this.genIcons(),
+      this.genIcons()
     ])
-  },
+  }
 })

package/src/components/VDataIterator/VDataIterator.ts

@@ -12,64 +12,81 @@ 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, PropType, defineComponent } from 'vue'
+import type { VNodeChildren } from '../../types/vue-internal'
 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',
+      default: 'id'
+    },
+    modelValue: {
+      type: Array as PropType<any[]>,
+      default: () => []
     },
-    value: {
-      type: Array,
-      default: () => [],
-    } as PropValidator<any[]>,
     singleSelect: Boolean,
     expanded: {
-      type: Array,
-      default: () => [],
-    } as PropValidator<any[]>,
+      type: Array as PropType<any[]>,
+      default: () => []
+    },
     mobileBreakpoint: {
       ...Mobile.props.mobileBreakpoint,
-      default: 600,
+      default: 600
     },
     singleExpand: Boolean,
     loading: [Boolean, String],
     noResultsText: {
       type: String,
-      default: '$vuetify.dataIterator.noResultsText',
+      default: '$vuetify.dataIterator.noResultsText'
     },
     noDataText: {
       type: String,
-      default: '$vuetify.noDataText',
+      default: '$vuetify.noDataText'
     },
     loadingText: {
       type: String,
-      default: '$vuetify.dataIterator.loadingText',
+      default: '$vuetify.dataIterator.loadingText'
     },
     hideDefaultFooter: Boolean,
     footerProps: Object,
     selectableKey: {
       type: String,
-      default: 'isSelectable',
-    },
+      default: 'isSelectable'
+    }
   },
 
+  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>,
     internalCurrentItems: [] as any[],
     shiftKeyDown: false,
-    lastEntry: -1,
+    lastEntry: -1
   }),
 
   computed: {
@@ -84,23 +101,25 @@ export default mixins(
     },
     selectableItems (): any[] {
       return this.internalCurrentItems.filter(item => this.isSelectable(item))
-    },
+    }
   },
 
   watch: {
-    value: {
+    modelValue: {
       handler (value: any[]) {
+        if (!value) return
+
         this.selection = value.reduce((selection, item) => {
           selection[getObjectValueByPath(item, this.itemKey)] = item
           return selection
         }, {})
       },
-      immediate: true,
+      immediate: true
     },
     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[]) {
@@ -109,18 +128,20 @@ export default mixins(
           return expansion
         }, {})
       },
-      immediate: true,
+      immediate: true
     },
     expansion (value: Record<string, boolean>, old: Record<string, boolean>) {
       if (deepEqual(value, old)) return
       const keys = Object.keys(value).filter(k => value[k])
       const expanded = !keys.length ? [] : this.items.filter(i => keys.includes(String(getObjectValueByPath(i, this.itemKey))))
       this.$emit('update:expanded', expanded)
-    },
+    }
   },
 
   created () {
     const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
       ['disable-initial-sort', 'sort-by'],
       ['filter', 'custom-filter'],
       ['pagination', 'options'],
@@ -129,7 +150,7 @@ export default mixins(
       ['rows-per-page-items', 'footer-props.items-per-page-options'],
       ['rows-per-page-text', 'footer-props.items-per-page-text'],
       ['prev-icon', 'footer-props.prev-icon'],
-      ['next-icon', 'footer-props.next-icon'],
+      ['next-icon', 'footer-props.next-icon']
     ]
 
     /* istanbul ignore next */
@@ -141,7 +162,7 @@ export default mixins(
       'expand',
       'content-class',
       'content-props',
-      'content-tag',
+      'content-tag'
     ]
 
     /* istanbul ignore next */
@@ -154,7 +175,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)
   },
@@ -248,11 +269,11 @@ export default mixins(
         isSelected: this.isSelected(item),
         expand: (v: boolean) => this.expand(item, v),
         isExpanded: this.isExpanded(item),
-        isMobile: this.isMobile,
+        isMobile: this.isMobile
       }
     },
     genEmptyWrapper (content: VNodeChildren) {
-      return h('div', content)
+      return h('div', null, content as any)
     },
     genEmpty (originalItemsLength: number, filteredItemsLength: number) {
       if (originalItemsLength === 0 && this.loading) {
@@ -279,7 +300,7 @@ export default mixins(
           select: this.select,
           isExpanded: this.isExpanded,
           isMobile: this.isMobile,
-          expand: this.expand,
+          expand: this.expand
         })
       }
 
@@ -299,56 +320,52 @@ 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,
-      })
+        ...data
+      }, scopedSlots)
     },
     genDefaultScopedSlot (props: any) {
       const outerProps = {
         ...props,
         someItems: this.someItems,
         everyItem: this.everyItem,
-        toggleSelectAll: this.toggleSelectAll,
+        toggleSelectAll: this.toggleSelectAll
       }
 
       return h('div', {
-        class: 'v-data-iterator',
+        class: 'v-data-iterator'
       }, [
         getSlot(this, 'header', outerProps, true),
         this.genItems(props),
         this.genFooter(props),
-        getSlot(this, 'footer', outerProps, true),
+        getSlot(this, 'footer', outerProps, true)
       ])
-    },
+    }
   },
 
   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
     })
-  },
+  }
 })