@dimailn/vuetify 2.7.2-alpha2 → 2.7.2-superbundle2

package/src/components/VDataTable/VDataTable.ts

@@ -1,7 +1,7 @@
 import './VDataTable.sass'
 
 // Types
-import { VNode, VNodeChildrenArrayContents, VNodeChildren, h } from 'vue'
+import { VNode, VNodeChildrenArrayContents, VNodeChildren } from 'vue'
 import { PropValidator } from 'vue/types/options'
 import {
   DataTableHeader,
@@ -266,29 +266,33 @@ export default mixins(
     },
     createItemProps (item: any, index: number): DataTableItemProps {
       const data = {
-        ...VDataIterator.methods.createItemProps.call(this, item, index),
+        ...VDataIterator.options.methods.createItemProps.call(this, item, index),
         headers: this.computedHeaders,
       }
 
       return {
         ...data,
-        class: {
-          'v-data-table__selected': data.isSelected,
+        attrs: {
+          class: {
+            'v-data-table__selected': data.isSelected,
+          },
+        },
+        on: {
+          ...this.getDefaultMouseEventHandlers(':row', () => data, true),
+          // TODO: the first argument should be the event, and the second argument should be data,
+          // but this is a breaking change so it's for v3
+          click: (event: MouseEvent) => this.$emit('click:row', item, data, event),
         },
-        ...this.getDefaultMouseEventHandlers(':row', () => data, true),
-        // TODO: the first argument should be the event, and the second argument should be data,
-        // but this is a breaking change so it's for v3
-        onClick: (event: MouseEvent) => this.$emit('click:row', item, data, event)
       }
     },
     genCaption (props: DataScopeProps) {
-      if (this.caption) return [h('caption', [this.caption])]
+      if (this.caption) return [this.$createElement('caption', [this.caption])]
 
       return getSlot(this, 'caption', props, true)
     },
     genColgroup (props: DataScopeProps) {
-      return h('colgroup', this.computedHeaders.map(header => {
-        return h('col', {
+      return this.$createElement('colgroup', this.computedHeaders.map(header => {
+        return this.$createElement('col', {
           class: {
             divider: header.divider,
           },
@@ -296,35 +300,38 @@ export default mixins(
       }))
     },
     genLoading () {
-      const th = h('th', {
-        class: 'column',
+      const th = this.$createElement('th', {
+        staticClass: 'column',
         attrs: this.colspanAttrs,
       }, [this.genProgress()])
 
-      const tr = h('tr', {
-        class: 'v-data-table__progress',
+      const tr = this.$createElement('tr', {
+        staticClass: 'v-data-table__progress',
       }, [th])
 
-      return h('thead', [tr])
+      return this.$createElement('thead', [tr])
     },
     genHeaders (props: DataScopeProps) {
       const data = {
-        ...this.sanitizedHeaderProps,
-        headers: this.computedHeaders,
-        options: props.options,
-        mobile: this.isMobile,
-        showGroupBy: this.showGroupBy,
-        checkboxColor: this.checkboxColor,
-        someItems: this.someItems,
-        everyItem: this.everyItem,
-        singleSelect: this.singleSelect,
-        disableSort: this.disableSort,
-        onSort: props.sort,
-        onGroup: props.group,
-        'onToggle-select-all': this.toggleSelectAll
+        props: {
+          ...this.sanitizedHeaderProps,
+          headers: this.computedHeaders,
+          options: props.options,
+          mobile: this.isMobile,
+          showGroupBy: this.showGroupBy,
+          checkboxColor: this.checkboxColor,
+          someItems: this.someItems,
+          everyItem: this.everyItem,
+          singleSelect: this.singleSelect,
+          disableSort: this.disableSort,
+        },
+        on: {
+          sort: props.sort,
+          group: props.group,
+          'toggle-select-all': this.toggleSelectAll,
+        },
       }
 
-
       // TODO: rename to 'head'? (thead, tbody, tfoot)
       const children: VNodeChildrenArrayContents = [getSlot(this, 'header', {
         ...data,
@@ -332,11 +339,11 @@ export default mixins(
       })]
 
       if (!this.hideDefaultHeader) {
-        const scopedSlots = getPrefixedScopedSlots('header.', this.$slots)
-        children.push(h(VDataTableHeader, {
+        const scopedSlots = getPrefixedScopedSlots('header.', this.$scopedSlots)
+        children.push(this.$createElement(VDataTableHeader, {
           ...data,
-
-        }, scopedSlots))
+          scopedSlots,
+        }))
       }
 
       if (this.loading) children.push(this.genLoading())
@@ -344,10 +351,10 @@ export default mixins(
       return children
     },
     genEmptyWrapper (content: VNodeChildrenArrayContents) {
-      return h('tr', {
-        class: 'v-data-table__empty-wrapper',
+      return this.$createElement('tr', {
+        staticClass: 'v-data-table__empty-wrapper',
       }, [
-        h('td', {
+        this.$createElement('td', {
           attrs: this.colspanAttrs,
         }, content),
       ])
@@ -362,10 +369,10 @@ export default mixins(
     },
     genGroupedRows (groupedItems: ItemGroup<any>[], props: DataScopeProps) {
       return groupedItems.map(group => {
-        if (!this.openCache.hasOwnProperty(group.name)) this.openCache[group.name] = true
+        if (!this.openCache.hasOwnProperty(group.name)) this.$set(this.openCache, group.name, true)
 
-        if (this.$slots.group) {
-          return this.$slots.group({
+        if (this.$scopedSlots.group) {
+          return this.$scopedSlots.group({
             group: group.name,
             options: props.options,
             isMobile: this.isMobile,
@@ -380,16 +387,16 @@ export default mixins(
     genDefaultGroupedRow (group: string, items: any[], props: DataScopeProps) {
       const isOpen = !!this.openCache[group]
       const children: VNodeChildren = [
-        h('template', { slot: 'row.content' }, this.genRows(items, props)),
+        this.$createElement('template', { slot: 'row.content' }, this.genRows(items, props)),
       ]
-      const toggleFn = () => this.openCache[group] = !this.openCache[group]
+      const toggleFn = () => this.$set(this.openCache, group, !this.openCache[group])
       const removeFn = () => props.updateOptions({ groupBy: [], groupDesc: [] })
 
-      if (this.$slots['group.header']) {
-        children.unshift(h('template', { slot: 'column.header' }, [
-          this.$slots['group.header']!({
+      if (this.$scopedSlots['group.header']) {
+        children.unshift(this.$createElement('template', { slot: 'column.header' }, [
+          this.$scopedSlots['group.header']!({
             group,
-            groupBy: props.groupBy,
+            groupBy: props.options.groupBy,
             isMobile: this.isMobile,
             items,
             headers: this.computedHeaders,
@@ -399,15 +406,19 @@ export default mixins(
           }),
         ]))
       } else {
-        const toggle = h(VBtn, {
-          class: 'ma-0',
-          icon: true,
-          small: true,
-          onClick: toggleFn
-        }, [h(VIcon, [isOpen ? '$minus' : '$plus'])])
-
-        const remove = h(VBtn, {
-          class: 'ma-0',
+        const toggle = this.$createElement(VBtn, {
+          staticClass: 'ma-0',
+          props: {
+            icon: true,
+            small: true,
+          },
+          on: {
+            click: toggleFn,
+          },
+        }, [this.$createElement(VIcon, [isOpen ? '$minus' : '$plus'])])
+
+        const remove = this.$createElement(VBtn, {
+          staticClass: 'ma-0',
           props: {
             icon: true,
             small: true,
@@ -415,21 +426,21 @@ export default mixins(
           on: {
             click: removeFn,
           },
-        }, [h(VIcon, ['$close'])])
+        }, [this.$createElement(VIcon, ['$close'])])
 
-        const column = h('td', {
-          class: 'text-start',
+        const column = this.$createElement('td', {
+          staticClass: 'text-start',
           attrs: this.colspanAttrs,
         }, [toggle, `${this.groupByText}: ${group}`, remove])
 
-        children.unshift(h('template', { slot: 'column.header' }, [column]))
+        children.unshift(this.$createElement('template', { slot: 'column.header' }, [column]))
       }
 
-      if (this.$slots['group.summary']) {
-        children.push(h('template', { slot: 'column.summary' }, [
-          this.$slots['group.summary']!({
+      if (this.$scopedSlots['group.summary']) {
+        children.push(this.$createElement('template', { slot: 'column.summary' }, [
+          this.$scopedSlots['group.summary']!({
             group,
-            groupBy: props.groupBy,
+            groupBy: props.options.groupBy,
             isMobile: this.isMobile,
             items,
             headers: this.computedHeaders,
@@ -439,7 +450,7 @@ export default mixins(
         ]))
       }
 
-      return h(RowGroup, {
+      return this.$createElement(RowGroup, {
         key: group,
         props: {
           value: isOpen,
@@ -447,20 +458,20 @@ export default mixins(
       }, children)
     },
     genRows (items: any[], props: DataScopeProps) {
-      return this.$slots.item ? this.genScopedRows(items, props) : this.genDefaultRows(items, props)
+      return this.$scopedSlots.item ? this.genScopedRows(items, props) : this.genDefaultRows(items, props)
     },
     genScopedRows (items: any[], props: DataScopeProps) {
       const rows = []
 
       for (let i = 0; i < items.length; i++) {
         const item = items[i]
-        rows.push(this.$slots.item!({
+        rows.push(this.$scopedSlots.item!({
           ...this.createItemProps(item, i),
           isMobile: this.isMobile,
         }))
 
         if (this.isExpanded(item)) {
-          rows.push(this.$slots['expanded-item']!({
+          rows.push(this.$scopedSlots['expanded-item']!({
             headers: this.computedHeaders,
             isMobile: this.isMobile,
             index: i,
@@ -472,7 +483,7 @@ export default mixins(
       return rows
     },
     genDefaultRows (items: any[], props: DataScopeProps) {
-      return this.$slots['expanded-item']
+      return this.$scopedSlots['expanded-item']
         ? items.map((item, index) => this.genDefaultExpandedRow(item, index))
         : items.map((item, index) => this.genDefaultSimpleRow(item, index))
     },
@@ -482,25 +493,25 @@ export default mixins(
         'v-data-table__expanded v-data-table__expanded__row': isExpanded,
       }
       const headerRow = this.genDefaultSimpleRow(item, index, classes)
-      const expandedRow = h('tr', {
-        class: 'v-data-table__expanded v-data-table__expanded__content',
-      }, [this.$slots['expanded-item']!({
+      const expandedRow = this.$createElement('tr', {
+        staticClass: 'v-data-table__expanded v-data-table__expanded__content',
+      }, [this.$scopedSlots['expanded-item']!({
         headers: this.computedHeaders,
         isMobile: this.isMobile,
         item,
       })])
 
-      return h(RowGroup, {
+      return this.$createElement(RowGroup, {
         props: {
           value: isExpanded,
         },
       }, [
-        h('template', { slot: 'row.header' }, [headerRow]),
-        h('template', { slot: 'row.content' }, [expandedRow]),
+        this.$createElement('template', { slot: 'row.header' }, [headerRow]),
+        this.$createElement('template', { slot: 'row.content' }, [expandedRow]),
       ])
     },
     genDefaultSimpleRow (item: any, index: number, classes: Record<string, boolean> = {}): VNode {
-      const scopedSlots = getPrefixedScopedSlots('item.', this.$slots)
+      const scopedSlots = getPrefixedScopedSlots('item.', this.$scopedSlots)
 
       const data = this.createItemProps(item, index)
 
@@ -509,42 +520,52 @@ export default mixins(
         scopedSlots['data-table-select'] = slot ? () => slot({
           ...data,
           isMobile: this.isMobile,
-        }) : () => h(VSimpleCheckbox, {
-          class: 'v-data-table__checkbox',
-          value: data.isSelected,
-          disabled: !this.isSelectable(item),
-          color: this.checkboxColor ?? '',
-          onInput: (val: boolean) => data.select(val),
+        }) : () => this.$createElement(VSimpleCheckbox, {
+          staticClass: 'v-data-table__checkbox',
+          props: {
+            value: data.isSelected,
+            disabled: !this.isSelectable(item),
+            color: this.checkboxColor ?? '',
+          },
+          on: {
+            input: (val: boolean) => data.select(val),
+          },
         })
       }
 
       if (this.showExpand) {
         const slot = scopedSlots['data-table-expand']
-        scopedSlots['data-table-expand'] = slot ? () => slot(data) : () => h(VIcon, {
-          class: ['v-data-table__expand-icon', {
+        scopedSlots['data-table-expand'] = slot ? () => slot(data) : () => this.$createElement(VIcon, {
+          staticClass: 'v-data-table__expand-icon',
+          class: {
             'v-data-table__expand-icon--active': data.isExpanded,
-          }],
-          onClick: (e: MouseEvent) => {
-            e.stopPropagation()
-            data.expand(!data.isExpanded)
-          }
+          },
+          on: {
+            click: (e: MouseEvent) => {
+              e.stopPropagation()
+              data.expand(!data.isExpanded)
+            },
+          },
         }, [this.expandIcon])
       }
 
-      return h(this.isMobile ? MobileRow : Row, {
+      return this.$createElement(this.isMobile ? MobileRow : Row, {
         key: getObjectValueByPath(item, this.itemKey),
         class: mergeClasses(
           { ...classes, 'v-data-table__selected': data.isSelected },
           getPropertyFromItem(item, this.itemClass)
         ),
         style: mergeStyles({}, getPropertyFromItem(item, this.itemStyle)),
-        headers: this.computedHeaders,
-        hideDefaultHeader: this.hideDefaultHeader,
-        index,
-        item,
-        rtl: this.$vuetify.rtl,
+        props: {
+          headers: this.computedHeaders,
+          hideDefaultHeader: this.hideDefaultHeader,
+          index,
+          item,
+          rtl: this.$vuetify.rtl,
+        },
+        scopedSlots,
         on: data.on,
-      }, scopedSlots)
+      })
     },
     genBody (props: DataScopeProps): VNode | string | VNodeChildren {
       const data = {
@@ -557,40 +578,43 @@ export default mixins(
         select: this.select,
       }
 
-      if (this.$slots.body) {
-        return this.$slots.body!(data)
+      if (this.$scopedSlots.body) {
+        return this.$scopedSlots.body!(data)
       }
 
-      return h('tbody', [
+      return this.$createElement('tbody', [
         getSlot(this, 'body.prepend', data, true),
         this.genItems(props.items, props),
         getSlot(this, 'body.append', data, true),
       ])
     },
     genFoot (props: DataScopeProps): VNode[] | undefined {
-      return this.$slots.foot?.(props)
+      return this.$scopedSlots.foot?.(props)
     },
     genFooters (props: DataScopeProps) {
       const data = {
-        options: props.options,
-        pagination: props.pagination,
-        itemsPerPageText: '$vuetify.dataTable.itemsPerPageText',
-        ...this.sanitizedFooterProps,
-        'onUpdate:options': (value: any) => props.updateOptions(value),
+        props: {
+          options: props.options,
+          pagination: props.pagination,
+          itemsPerPageText: '$vuetify.dataTable.itemsPerPageText',
+          ...this.sanitizedFooterProps,
+        },
+        on: {
+          'update:options': (value: any) => props.updateOptions(value),
+        },
+        widths: this.widths,
+        headers: this.computedHeaders,
       }
 
       const children: VNodeChildren = [
-        getSlot(this, 'footer', {
-          ...data,
-          widths: this.widths,
-          headers: this.computedHeaders
-        }, true),
+        getSlot(this, 'footer', data, true),
       ]
 
       if (!this.hideDefaultFooter) {
-        children.push(h(VDataFooter, {
-          ...data
-        }, getPrefixedScopedSlots('footer.', this.$slots)))
+        children.push(this.$createElement(VDataFooter, {
+          ...data,
+          scopedSlots: getPrefixedScopedSlots('footer.', this.$scopedSlots),
+        }))
       }
 
       return children
@@ -603,7 +627,7 @@ export default mixins(
       }
 
       // if (this.virtualRows) {
-      //   return h(VVirtualTable, {
+      //   return this.$createElement(VVirtualTable, {
       //     props: Object.assign(simpleProps, {
       //       items: props.items,
       //       height: this.height,
@@ -620,51 +644,59 @@ export default mixins(
       //   ])
       // }
 
-      return h(VSimpleTable, {
-        ...simpleProps,
+      return this.$createElement(VSimpleTable, {
+        props: simpleProps,
         class: {
           'v-data-table--mobile': this.isMobile,
           'v-data-table--selectable': this.showSelect,
         },
-      }, {
-        default: () => [
-          this.genCaption(props),
-          this.genColgroup(props),
-          this.genHeaders(props),
-          this.genBody(props),
-          this.genFoot(props),
-        ],
-        top: getSlot(this, 'top', {
+      }, [
+        this.proxySlot('top', getSlot(this, 'top', {
           ...props,
           isMobile: this.isMobile,
-        }, true),
-        bottom: this.genFooters(props)
-      })
-    }
+        }, true)),
+        this.genCaption(props),
+        this.genColgroup(props),
+        this.genHeaders(props),
+        this.genBody(props),
+        this.genFoot(props),
+        this.proxySlot('bottom', this.genFooters(props)),
+      ])
+    },
+    proxySlot (slot: string, content: VNodeChildren) {
+      return this.$createElement('template', { slot }, content)
+    },
   },
 
   render (): VNode {
-    return h(VData, {
-      ...this.$props,
-      customFilter: this.customFilterWithColumns,
-      customSort: this.customSortWithHeaders,
-      itemsPerPage: this.computedItemsPerPage,
-      'onUpdate:options': (v: DataOptions, old: DataOptions) => {
-        this.internalGroupBy = v.groupBy || []
-        !deepEqual(v, old) && this.$emit('update:options', v)
+    return this.$createElement(VData, {
+      props: {
+        ...this.$props,
+        customFilter: this.customFilterWithColumns,
+        customSort: this.customSortWithHeaders,
+        itemsPerPage: this.computedItemsPerPage,
+      },
+      on: {
+        'update:options': (v: DataOptions, old: DataOptions) => {
+          this.internalGroupBy = v.groupBy || []
+          !deepEqual(v, old) && this.$emit('update:options', v)
+        },
+        'update:page': (v: number) => this.$emit('update:page', v),
+        'update:items-per-page': (v: number) => this.$emit('update:items-per-page', v),
+        'update:sort-by': (v: string | string[]) => this.$emit('update:sort-by', v),
+        'update:sort-desc': (v: boolean | boolean[]) => this.$emit('update:sort-desc', v),
+        'update:group-by': (v: string | string[]) => this.$emit('update:group-by', v),
+        'update:group-desc': (v: boolean | boolean[]) => this.$emit('update:group-desc', v),
+        pagination: (v: DataPagination, old: DataPagination) => !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),
       },
-      'onUpdate:page': (v: number) => this.$emit('update:page', v),
-      'onUpdate:items-per-page': (v: number) => this.$emit('update:items-per-page', v),
-      'onUpdate:sort-by': (v: string | string[]) => this.$emit('update:sort-by', v),
-      'onUpdate:sort-desc': (v: boolean | boolean[]) => this.$emit('update:sort-desc', v),
-      'onUpdate:group-by': (v: string | string[]) => this.$emit('update:group-by', v),
-      'onUpdate:group-desc': (v: boolean | boolean[]) => this.$emit('update:group-desc', v),
-      onPagination: (v: DataPagination, old: DataPagination) => !deepEqual(v, old) && this.$emit('pagination', v),
-      'onCurrent-items': (v: any[]) => {
-        this.internalCurrentItems = v
-        this.$emit('current-items', v)
+      scopedSlots: {
+        default: this.genDefaultScopedSlot,
       },
-      'onPage-count': (v: number) => this.$emit('page-count', v),
-    }, this.genDefaultScopedSlot)
+    })
   },
 })

package/src/components/VDataTable/VDataTableHeader.ts

@@ -14,27 +14,26 @@ import mergeData from '../../util/mergeData'
 import rebuildSlots from '../../util/rebuildFunctionalSlots'
 
 // Types
-import {defineComponent, h} from 'vue'
+import Vue from 'vue'
 
 /* @vue/component */
-export default defineComponent({
+export default Vue.extend({
   name: 'v-data-table-header',
 
   functional: true,
 
   props: {
-    ...header.props,
+    ...header.options.props,
     mobile: Boolean,
   },
 
-  render () {
-    const props = this.$props
-    let data = this.$attrs
+  render (h, { props, data, slots }) {
+    dedupeModelListeners(data)
+    const children = rebuildSlots(slots(), h)
 
-    // dedupeModelListeners(data)
-    const children = rebuildSlots(this.$slots, h)
+    data = mergeData(data, { props })
 
-    if (this.mobile) {
+    if (props.mobile) {
       return h(VDataTableHeaderMobile, data, children)
     } else {
       return h(VDataTableHeaderDesktop, data, children)