@dimailn/vuetify 2.7.2-alpha4 → 2.7.2-alpha41

package/src/components/VDataTable/VDataTableHeaderDesktop.ts

@@ -1,5 +1,6 @@
 // Helpers
-import { VNode, VNodeData, h } from 'vue'
+import { VNode, h } from 'vue'
+import type { VNodeData } from '../../types/vue-internal'
 import mixins from '../../util/mixins'
 import header from './mixins/header'
 import { wrapInArray, convertToUnit } from '../../util/helpers'
@@ -8,13 +9,22 @@ import { DataTableHeader } from 'vuetify/types'
 export default mixins(header).extend({
   name: 'v-data-table-header-desktop',
 
+  props: {
+    mobile: Boolean
+  },
+
+  emits: [
+    'group',
+    'sort'
+  ],
+
   methods: {
     genGroupByToggle (header: DataTableHeader) {
       return h('span', {
         onClick: (e: MouseEvent) => {
           e.stopPropagation()
           this.$emit('group', header.value)
-        },
+        }
       }, ['group'])
     },
     getAria (beingSorted: boolean, isDesc: boolean) {
@@ -23,7 +33,7 @@ export default mixins(header).extend({
       let ariaSort = 'none'
       let ariaLabel = [
         $t('sortNone'),
-        $t('activateAscending'),
+        $t('activateAscending')
       ]
 
       if (!beingSorted) {
@@ -34,32 +44,32 @@ export default mixins(header).extend({
         ariaSort = 'descending'
         ariaLabel = [
           $t('sortDescending'),
-          $t(this.options.mustSort ? 'activateAscending' : 'activateNone'),
+          $t(this.options.mustSort ? 'activateAscending' : 'activateNone')
         ]
       } else {
         ariaSort = 'ascending'
         ariaLabel = [
           $t('sortAscending'),
-          $t('activateDescending'),
+          $t('activateDescending')
         ]
       }
 
       return { ariaSort, ariaLabel: ariaLabel.join(' ') }
     },
     genHeader (header: DataTableHeader) {
-      const data: Required<Pick<VNodeData, 'attrs' | 'on' | 'class' | 'style'>> = {
+      const data: VNodeData = {
         role: 'columnheader',
         scope: 'col',
         'aria-label': header.text || '',
         style: {
           width: convertToUnit(header.width),
-          minWidth: convertToUnit(header.width),
+          minWidth: convertToUnit(header.width)
         },
         class: [
           `text-${header.align || 'start'}`,
           ...wrapInArray(header.class),
-          header.divider && 'v-data-table__divider',
-        ],
+          header.divider && 'v-data-table__divider'
+        ]
       }
       const children = []
 
@@ -103,14 +113,14 @@ export default mixins(header).extend({
       if (this.showGroupBy && header.groupable !== false) children.push(this.genGroupByToggle(header))
 
       return h('th', data, children)
-    },
+    }
   },
 
   render (): VNode {
     return h('thead', {
-      class: 'v-data-table-header',
+      class: 'v-data-table-header'
     }, [
-      h('tr', this.headers.map(header => this.genHeader(header))),
+      h('tr', this.headers?.map(header => this.genHeader(header)) || [])
     ])
-  },
+  }
 })

package/src/components/VDataTable/VDataTableHeaderMobile.ts

@@ -1,5 +1,5 @@
-import {h} from 'vue'
-import { VNode, VNodeChildrenArrayContents } from 'vue'
+import type { VNode, VNodeChildrenArrayContents } from '../../types/vue-internal'
+import { h } from 'vue'
 import mixins from '../../util/mixins'
 import VSelect from '../VSelect/VSelect'
 import VChip from '../VChip'
@@ -12,10 +12,13 @@ export default mixins(header).extend({
   props: {
     sortByText: {
       type: String,
-      default: '$vuetify.dataTable.sortBy',
+      default: '$vuetify.dataTable.sortBy'
     },
+    mobile: Boolean
   },
 
+  emits: ['sort'],
+
   methods: {
     genSortChip (props: any) {
       const children: VNodeChildrenArrayContents = [props.item.text]
@@ -25,43 +28,36 @@ export default mixins(header).extend({
       const isDesc = this.options.sortDesc[sortIndex]
 
       children.push(h('div', {
-        class: 'v-chip__close',
         class: {
+          'v-chip__close': true,
           sortable: true,
           active: beingSorted,
           asc: beingSorted && !isDesc,
-          desc: beingSorted && isDesc,
-        },
+          desc: beingSorted && isDesc
+        }
       }, [this.genSortIcon()]))
 
       return h(VChip, {
         class: 'sortable',
-        on: {
-          click: (e: MouseEvent) => {
-            e.stopPropagation()
-            this.$emit('sort', props.item.value)
-          },
-        },
-      }, children)
+        onClick: (e: MouseEvent) => {
+          e.stopPropagation()
+          this.$emit('sort', props.item.value)
+        }
+      }, () => children)
     },
     genSortSelect (items: any[]) {
       return h(VSelect, {
-        props: {
-          label: this.$vuetify.lang.t(this.sortByText),
-          items,
-          hideDetails: true,
-          multiple: this.options.multiSort,
-          value: this.options.multiSort ? this.options.sortBy : this.options.sortBy[0],
-          menuProps: { closeOnContentClick: true },
-        },
-        on: {
-          change: (v: string | string[]) => this.$emit('sort', v),
-        },
-        scopedSlots: {
-          selection: props => this.genSortChip(props),
-        },
+        label: this.$vuetify.lang.t(this.sortByText),
+        items,
+        hideDetails: true,
+        multiple: this.options.multiSort,
+        modelValue: this.options.multiSort ? this.options.sortBy : this.options.sortBy[0],
+        menuProps: { closeOnContentClick: true },
+        'onUpdate:modelValue': (v: string | string[]) => this.$emit('sort', v)
+      }, {
+        selection: (props: any) => this.genSortChip(props)
       })
-    },
+    }
   },
 
   render (): VNode {
@@ -72,11 +68,9 @@ export default mixins(header).extend({
       children.push(h('div', {
         class: [
           'v-data-table-header-mobile__select',
-          ...wrapInArray(header.class),
+          ...wrapInArray(header.class)
         ],
-        attrs: {
-          width: header.width,
-        },
+        width: header.width
       }, [this.genSelectAll()]))
     }
 
@@ -84,7 +78,7 @@ export default mixins(header).extend({
       .filter(h => h.sortable !== false && h.value !== 'data-table-select')
       .map(h => ({
         text: h.text,
-        value: h.value,
+        value: h.value
       }))
 
     if (!this.disableSort && sortHeaders.length) {
@@ -98,7 +92,7 @@ export default mixins(header).extend({
     const tr = h('tr', [th])
 
     return h('thead', {
-      class: 'v-data-table-header v-data-table-header-mobile',
+      class: 'v-data-table-header v-data-table-header-mobile'
     }, [tr])
-  },
+  }
 })

package/src/components/VDataTable/VEditDialog.ts

@@ -1,4 +1,4 @@
-import {h} from 'vue'
+import { h } from 'vue'
 // Styles
 import './VEditDialog.sass'
 
@@ -14,7 +14,7 @@ import VBtn from '../VBtn'
 import VMenu from '../VMenu'
 
 // Types
-import { VNode, VNodeChildren } from 'vue'
+import type { VNode, VNodeChildren } from '../../types/vue-internal'
 import mixins from '../../util/mixins'
 
 /* @vue/component */
@@ -23,23 +23,25 @@ export default mixins(Returnable, Themeable).extend({
 
   props: {
     cancelText: {
-      default: 'Cancel',
+      default: 'Cancel'
     },
     large: Boolean,
     eager: Boolean,
     persistent: Boolean,
     saveText: {
-      default: 'Save',
+      default: 'Save'
     },
     transition: {
       type: String,
-      default: 'slide-x-reverse-transition',
-    },
+      default: 'slide-x-reverse-transition'
+    }
   },
 
+  emits: ['update:return-value', 'open', 'close', 'cancel', 'save'],
+
   data () {
     return {
-      isActive: false,
+      // isActive is provided by Returnable mixin
     }
   },
 
@@ -51,7 +53,7 @@ export default mixins(Returnable, Themeable).extend({
       } else {
         this.$emit('close')
       }
-    },
+    }
   },
 
   methods: {
@@ -68,18 +70,18 @@ export default mixins(Returnable, Themeable).extend({
         text: true,
         color: 'primary',
         light: true,
-        onClick: fn,
-      }, text)
+        onClick: fn
+      }, () => text)
     },
     genActions (): VNode {
       return h('div', {
-        class: 'v-small-dialog__actions',
+        class: 'v-small-dialog__actions'
       }, [
         this.genButton(this.cancel, this.cancelText),
         this.genButton(() => {
           this.save(this.returnValue)
           this.$emit('save')
-        }, this.saveText),
+        }, this.saveText)
       ])
     },
     genContent (): VNode {
@@ -94,7 +96,7 @@ export default mixins(Returnable, Themeable).extend({
         },
         ref: 'content'
       }, getSlot(this, 'input'))
-    },
+    }
   },
 
   render (): VNode {
@@ -104,28 +106,28 @@ export default mixins(Returnable, Themeable).extend({
       transition: this.transition,
       origin: 'top right',
       right: true,
-      value: this.isActive,
+      modelValue: this.isActive,
       closeOnClick: !this.persistent,
       closeOnContentClick: false,
       eager: this.eager,
       light: this.light,
       dark: this.dark,
-      onInput: (val: boolean) => (this.isActive = val),
-      scopedSlots: {
-        activator: ({ on }) => {
-          return h('div', {
-            class: 'v-small-dialog__activator',
-            on,
-          }, [
-            h('span', {
-              class: 'v-small-dialog__activator__content',
-            }, getSlot(this)),
-          ])
-        },
+      'onUpdate:modelValue': (val: boolean) => (this.isActive = val)
+    }, {
+      activator: ({ on }: { on: any }) => {
+        return h('div', {
+          class: 'v-small-dialog__activator',
+          ...on
+        }, [
+          h('span', {
+            class: 'v-small-dialog__activator__content'
+          }, getSlot(this))
+        ])
       },
-    }, [
-      this.genContent(),
-      this.large ? this.genActions() : null,
-    ])
-  },
+      default: () => [
+        this.genContent(),
+        this.large ? this.genActions() : null
+      ]
+    })
+  }
 })

package/src/components/VDataTable/VSimpleTable.ts

@@ -1,10 +1,9 @@
-import {h} from 'vue'
+import { h, VNode } from 'vue'
 import './VSimpleTable.sass'
 
 import { convertToUnit, getSlot } from '../../util/helpers'
 import Themeable from '../../mixins/themeable'
 import mixins from '../../util/mixins'
-import { VNode } from 'vue'
 
 export default mixins(Themeable).extend({
   name: 'v-simple-table',
@@ -12,7 +11,7 @@ export default mixins(Themeable).extend({
   props: {
     dense: Boolean,
     fixedHeader: Boolean,
-    height: [Number, String],
+    height: [Number, String]
   },
 
   computed: {
@@ -23,31 +22,31 @@ export default mixins(Themeable).extend({
         'v-data-table--fixed-header': this.fixedHeader,
         'v-data-table--has-top': !!this.$slots.top,
         'v-data-table--has-bottom': !!this.$slots.bottom,
-        ...this.themeClasses,
+        ...this.themeClasses
       }
-    },
+    }
   },
 
   methods: {
     genWrapper () {
-      return this.$slots.wrapper || h('div', {
+      return getSlot(this, 'wrapper') || h('div', {
         class: 'v-data-table__wrapper',
         style: {
-          height: convertToUnit(this.height),
-        },
+          height: convertToUnit(this.height)
+        }
       }, [
-        h('table', getSlot(this)),
+        h('table', getSlot(this))
       ])
-    },
+    }
   },
 
   render (): VNode {
     return h('div', {
-      class: ['v-data-table', this.classes],
+      class: ['v-data-table', this.classes]
     }, [
       getSlot(this, 'top'),
       this.genWrapper(),
-      getSlot(this, 'bottom'),
+      getSlot(this, 'bottom')
     ])
-  },
+  }
 })

package/src/components/VDataTable/VVirtualTable.ts

@@ -1,12 +1,11 @@
-import {h} from 'vue'
+import { h, PropType } from 'vue'
 import './VVirtualTable.sass'
 
 // Components
 import VSimpleTable from './VSimpleTable'
 
 // Types
-import { VNode, VNodeChildren } from 'vue'
-import { PropValidator } from 'vue/types/options'
+import type { VNode, VNodeChildren } from '../../types/vue-internal'
 import mixins from '../../util/mixins'
 
 // Utiltiies
@@ -15,7 +14,7 @@ import { convertToUnit, debounce, getSlot } from '../../util/helpers'
 // Types
 const baseMixins = mixins(VSimpleTable)
 
-interface options extends InstanceType<typeof baseMixins> {
+type options = {
   $refs: {
     table: HTMLElement
   }
@@ -28,27 +27,27 @@ export default baseMixins.extend({
   props: {
     chunkSize: {
       type: Number,
-      default: 25,
+      default: 25
     },
     headerHeight: {
       type: Number,
-      default: 48,
+      default: 48
     },
     items: {
       type: Array,
-      default: () => ([]),
-    } as PropValidator<any[]>,
+      default: () => ([])
+    } as unknown as PropType<any[]>,
     rowHeight: {
       type: Number,
-      default: 48,
-    },
+      default: 48
+    }
   },
 
   data: () => ({
     scrollTop: 0,
     oldChunk: 0,
     scrollDebounce: null as any,
-    invalidateCache: false,
+    invalidateCache: false
   }),
 
   computed: {
@@ -75,7 +74,7 @@ export default baseMixins.extend({
     },
     offsetBottom (): number {
       return Math.max(0, (this.itemsLength - this.stopIndex - this.startIndex) * this.rowHeight)
-    },
+    }
   },
 
   watch: {
@@ -85,7 +84,7 @@ export default baseMixins.extend({
     items () {
       this.cachedItems = null
       this.$refs.table.scrollTop = 0
-    },
+    }
   },
 
   created () {
@@ -98,14 +97,14 @@ export default baseMixins.extend({
     this.$refs.table.addEventListener('scroll', this.scrollDebounce, { passive: true })
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     this.$refs.table.removeEventListener('scroll', this.scrollDebounce)
   },
 
   methods: {
     createStyleHeight (height: number) {
       return {
-        height: `${height}px`,
+        height: `${height}px`
       }
     },
     genBody () {
@@ -117,7 +116,7 @@ export default baseMixins.extend({
       return h('tbody', [
         h('tr', { style: this.createStyleHeight(this.offsetTop) }),
         this.cachedItems,
-        h('tr', { style: this.createStyleHeight(this.offsetBottom) }),
+        h('tr', { style: this.createStyleHeight(this.offsetBottom) })
       ])
     },
     genItems () {
@@ -130,35 +129,34 @@ export default baseMixins.extend({
     genTable () {
       return h('div', {
         ref: 'table',
-        class: 'v-virtual-table__table',
+        class: 'v-virtual-table__table'
       }, [
         h('table', [
           this.$slots['body.before'],
           this.genBody(),
-          this.$slots['body.after'],
-        ]),
+          this.$slots['body.after']
+        ])
       ])
     },
     genWrapper () {
       return h('div', {
         class: 'v-virtual-table__wrapper',
         style: {
-          height: convertToUnit(this.height),
-        },
+          height: convertToUnit(this.height)
+        }
       }, [
-        this.genTable(),
+        this.genTable()
       ])
-    },
+    }
   },
 
   render (): VNode {
     return h('div', {
-      class: 'v-data-table v-virtual-table',
-      class: this.classes,
+      class: ['v-data-table', 'v-virtual-table', this.classes]
     }, [
       getSlot(this, 'top'),
       this.genWrapper(),
-      getSlot(this, 'bottom'),
+      getSlot(this, 'bottom')
     ])
-  },
+  }
 })