@dimailn/vuetify 2.7.2-alpha2 → 2.7.2-superbundle2

package/lib/components/VDataTable/VDataTable.js

@@ -1,6 +1,4 @@
-import "../../../src/components/VDataTable/VDataTable.sass"; // Types
-
-import { h } from 'vue'; // Components
+import "../../../src/components/VDataTable/VDataTable.sass"; // Components
 
 import { VData } from '../VData';
 import { VDataFooter, VDataIterator } from '../VDataIterator';
@@ -242,28 +240,31 @@ export default mixins(VDataIterator, Loadable, Mouse).extend({
     },
 
     createItemProps(item, index) {
-      const data = { ...VDataIterator.methods.createItemProps.call(this, item, index),
+      const data = { ...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
+          }
         },
-        ...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 => this.$emit('click:row', item, data, event)
+        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 => this.$emit('click:row', item, data, event)
+        }
       };
     },
 
     genCaption(props) {
-      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) {
-      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
           }
@@ -272,30 +273,34 @@ export default mixins(VDataIterator, Loadable, Mouse).extend({
     },
 
     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) {
-      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
+      const data = {
+        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 = [getSlot(this, 'header', { ...data,
@@ -303,9 +308,10 @@ export default mixins(VDataIterator, Loadable, Mouse).extend({
       })];
 
       if (!this.hideDefaultHeader) {
-        const scopedSlots = getPrefixedScopedSlots('header.', this.$slots);
-        children.push(h(VDataTableHeader, { ...data
-        }, scopedSlots));
+        const scopedSlots = getPrefixedScopedSlots('header.', this.$scopedSlots);
+        children.push(this.$createElement(VDataTableHeader, { ...data,
+          scopedSlots
+        }));
       }
 
       if (this.loading) children.push(this.genLoading());
@@ -313,9 +319,9 @@ export default mixins(VDataIterator, Loadable, Mouse).extend({
     },
 
     genEmptyWrapper(content) {
-      return h('tr', {
-        class: 'v-data-table__empty-wrapper'
-      }, [h('td', {
+      return this.$createElement('tr', {
+        staticClass: 'v-data-table__empty-wrapper'
+      }, [this.$createElement('td', {
         attrs: this.colspanAttrs
       }, content)]);
     },
@@ -328,10 +334,10 @@ export default mixins(VDataIterator, Loadable, Mouse).extend({
 
     genGroupedRows(groupedItems, props) {
       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,
@@ -346,23 +352,23 @@ export default mixins(VDataIterator, Loadable, Mouse).extend({
 
     genDefaultGroupedRow(group, items, props) {
       const isOpen = !!this.openCache[group];
-      const children = [h('template', {
+      const children = [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', {
+      if (this.$scopedSlots['group.header']) {
+        children.unshift(this.$createElement('template', {
           slot: 'column.header'
-        }, [this.$slots['group.header']({
+        }, [this.$scopedSlots['group.header']({
           group,
-          groupBy: props.groupBy,
+          groupBy: props.options.groupBy,
           isMobile: this.isMobile,
           items,
           headers: this.computedHeaders,
@@ -371,14 +377,18 @@ export default mixins(VDataIterator, Loadable, Mouse).extend({
           remove: removeFn
         })]));
       } 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
@@ -386,22 +396,22 @@ export default mixins(VDataIterator, Loadable, Mouse).extend({
           on: {
             click: removeFn
           }
-        }, [h(VIcon, ['$close'])]);
-        const column = h('td', {
-          class: 'text-start',
+        }, [this.$createElement(VIcon, ['$close'])]);
+        const column = this.$createElement('td', {
+          staticClass: 'text-start',
           attrs: this.colspanAttrs
         }, [toggle, `${this.groupByText}: ${group}`, remove]);
-        children.unshift(h('template', {
+        children.unshift(this.$createElement('template', {
           slot: 'column.header'
         }, [column]));
       }
 
-      if (this.$slots['group.summary']) {
-        children.push(h('template', {
+      if (this.$scopedSlots['group.summary']) {
+        children.push(this.$createElement('template', {
           slot: 'column.summary'
-        }, [this.$slots['group.summary']({
+        }, [this.$scopedSlots['group.summary']({
           group,
-          groupBy: props.groupBy,
+          groupBy: props.options.groupBy,
           isMobile: this.isMobile,
           items,
           headers: this.computedHeaders,
@@ -410,7 +420,7 @@ export default mixins(VDataIterator, Loadable, Mouse).extend({
         })]));
       }
 
-      return h(RowGroup, {
+      return this.$createElement(RowGroup, {
         key: group,
         props: {
           value: isOpen
@@ -419,7 +429,7 @@ export default mixins(VDataIterator, Loadable, Mouse).extend({
     },
 
     genRows(items, props) {
-      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, props) {
@@ -427,12 +437,12 @@ export default mixins(VDataIterator, Loadable, Mouse).extend({
 
       for (let i = 0; i < items.length; i++) {
         const item = items[i];
-        rows.push(this.$slots.item({ ...this.createItemProps(item, i),
+        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,
@@ -445,7 +455,7 @@ export default mixins(VDataIterator, Loadable, Mouse).extend({
     },
 
     genDefaultRows(items, props) {
-      return this.$slots['expanded-item'] ? items.map((item, index) => this.genDefaultExpandedRow(item, index)) : items.map((item, index) => this.genDefaultSimpleRow(item, index));
+      return this.$scopedSlots['expanded-item'] ? items.map((item, index) => this.genDefaultExpandedRow(item, index)) : items.map((item, index) => this.genDefaultSimpleRow(item, index));
     },
 
     genDefaultExpandedRow(item, index) {
@@ -454,26 +464,26 @@ export default mixins(VDataIterator, Loadable, Mouse).extend({
         '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', {
+      }, [this.$createElement('template', {
         slot: 'row.header'
-      }, [headerRow]), h('template', {
+      }, [headerRow]), this.$createElement('template', {
         slot: 'row.content'
       }, [expandedRow])]);
     },
 
     genDefaultSimpleRow(item, index, classes = {}) {
-      const scopedSlots = getPrefixedScopedSlots('item.', this.$slots);
+      const scopedSlots = getPrefixedScopedSlots('item.', this.$scopedSlots);
       const data = this.createItemProps(item, index);
 
       if (this.showSelect) {
@@ -483,42 +493,52 @@ export default mixins(VDataIterator, Loadable, Mouse).extend({
         }) : () => {
           var _a;
 
-          return h(VSimpleCheckbox, {
-            class: 'v-data-table__checkbox',
-            value: data.isSelected,
-            disabled: !this.isSelectable(item),
-            color: (_a = this.checkboxColor) !== null && _a !== void 0 ? _a : '',
-            onInput: val => data.select(val)
+          return this.$createElement(VSimpleCheckbox, {
+            staticClass: 'v-data-table__checkbox',
+            props: {
+              value: data.isSelected,
+              disabled: !this.isSelectable(item),
+              color: (_a = this.checkboxColor) !== null && _a !== void 0 ? _a : ''
+            },
+            on: {
+              input: val => 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 => {
-            e.stopPropagation();
-            data.expand(!data.isExpanded);
+          },
+          on: {
+            click: e => {
+              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) {
@@ -531,35 +551,39 @@ export default mixins(VDataIterator, Loadable, Mouse).extend({
         select: this.select
       };
 
-      if (this.$slots.body) {
-        return this.$slots.body(data);
+      if (this.$scopedSlots.body) {
+        return this.$scopedSlots.body(data);
       }
 
-      return h('tbody', [getSlot(this, 'body.prepend', data, true), this.genItems(props.items, props), getSlot(this, 'body.append', data, true)]);
+      return this.$createElement('tbody', [getSlot(this, 'body.prepend', data, true), this.genItems(props.items, props), getSlot(this, 'body.append', data, true)]);
     },
 
     genFoot(props) {
       var _a, _b;
 
-      return (_b = (_a = this.$slots).foot) === null || _b === void 0 ? void 0 : _b.call(_a, props);
+      return (_b = (_a = this.$scopedSlots).foot) === null || _b === void 0 ? void 0 : _b.call(_a, props);
     },
 
     genFooters(props) {
       const data = {
-        options: props.options,
-        pagination: props.pagination,
-        itemsPerPageText: '$vuetify.dataTable.itemsPerPageText',
-        ...this.sanitizedFooterProps,
-        'onUpdate:options': value => props.updateOptions(value)
-      };
-      const children = [getSlot(this, 'footer', { ...data,
+        props: {
+          options: props.options,
+          pagination: props.pagination,
+          itemsPerPageText: '$vuetify.dataTable.itemsPerPageText',
+          ...this.sanitizedFooterProps
+        },
+        on: {
+          'update:options': value => props.updateOptions(value)
+        },
         widths: this.widths,
         headers: this.computedHeaders
-      }, true)];
+      };
+      const children = [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;
@@ -571,7 +595,7 @@ export default mixins(VDataIterator, Loadable, Mouse).extend({
         fixedHeader: this.fixedHeader,
         dense: this.dense
       }; // if (this.virtualRows) {
-      //   return h(VVirtualTable, {
+      //   return this.$createElement(VVirtualTable, {
       //     props: Object.assign(simpleProps, {
       //       items: props.items,
       //       height: this.height,
@@ -588,44 +612,54 @@ export default mixins(VDataIterator, Loadable, Mouse).extend({
       //   ])
       // }
 
-      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', { ...props,
-          isMobile: this.isMobile
-        }, true),
-        bottom: this.genFooters(props)
-      });
+      }, [this.proxySlot('top', getSlot(this, 'top', { ...props,
+        isMobile: this.isMobile
+      }, true)), this.genCaption(props), this.genColgroup(props), this.genHeaders(props), this.genBody(props), this.genFoot(props), this.proxySlot('bottom', this.genFooters(props))]);
+    },
+
+    proxySlot(slot, content) {
+      return this.$createElement('template', {
+        slot
+      }, content);
     }
 
   },
 
   render() {
-    return h(VData, { ...this.$props,
-      customFilter: this.customFilterWithColumns,
-      customSort: this.customSortWithHeaders,
-      itemsPerPage: this.computedItemsPerPage,
-      'onUpdate:options': (v, old) => {
-        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
       },
-      'onUpdate:page': v => this.$emit('update:page', v),
-      'onUpdate:items-per-page': v => this.$emit('update:items-per-page', v),
-      'onUpdate:sort-by': v => this.$emit('update:sort-by', v),
-      'onUpdate:sort-desc': v => this.$emit('update:sort-desc', v),
-      'onUpdate:group-by': v => this.$emit('update:group-by', v),
-      'onUpdate:group-desc': v => this.$emit('update:group-desc', v),
-      onPagination: (v, old) => !deepEqual(v, old) && this.$emit('pagination', v),
-      'onCurrent-items': v => {
-        this.internalCurrentItems = v;
-        this.$emit('current-items', v);
+      on: {
+        'update:options': (v, old) => {
+          this.internalGroupBy = v.groupBy || [];
+          !deepEqual(v, old) && this.$emit('update:options', v);
+        },
+        'update:page': v => this.$emit('update:page', v),
+        'update:items-per-page': v => this.$emit('update:items-per-page', v),
+        'update:sort-by': v => this.$emit('update:sort-by', v),
+        'update:sort-desc': v => this.$emit('update:sort-desc', v),
+        'update:group-by': v => this.$emit('update:group-by', v),
+        'update:group-desc': v => this.$emit('update:group-desc', v),
+        pagination: (v, old) => !deepEqual(v, old) && this.$emit('pagination', v),
+        'current-items': v => {
+          this.internalCurrentItems = v;
+          this.$emit('current-items', v);
+        },
+        'page-count': v => this.$emit('page-count', v)
       },
-      'onPage-count': v => this.$emit('page-count', v)
-    }, this.genDefaultScopedSlot);
+      scopedSlots: {
+        default: this.genDefaultScopedSlot
+      }
+    });
   }
 
 });