@dimailn/vuetify 2.7.2-alpha2 → 2.7.2-superbundle

package/src/components/VDataIterator/VDataIterator.ts

@@ -24,7 +24,7 @@ export default mixins(
   name: 'v-data-iterator',
 
   props: {
-    ...VData.props, // TODO: filter out props not used
+    ...VData.options.props, // TODO: filter out props not used
     itemKey: {
       type: String,
       default: 'id',
@@ -39,7 +39,7 @@ export default mixins(
       default: () => [],
     } as PropValidator<any[]>,
     mobileBreakpoint: {
-      ...Mobile.props.mobileBreakpoint,
+      ...Mobile.options.props.mobileBreakpoint,
       default: 600,
     },
     singleExpand: Boolean,
@@ -252,7 +252,7 @@ export default mixins(
       }
     },
     genEmptyWrapper (content: VNodeChildren) {
-      return h('div', content)
+      return this.$createElement('div', content)
     },
     genEmpty (originalItemsLength: number, filteredItemsLength: number) {
       if (originalItemsLength === 0 && this.loading) {
@@ -272,8 +272,8 @@ export default mixins(
       const empty = this.genEmpty(props.originalItemsLength, props.pagination.itemsLength)
       if (empty) return [empty]
 
-      if (this.$slots.default) {
-        return this.$slots.default({
+      if (this.$scopedSlots.default) {
+        return this.$scopedSlots.default({
           ...props,
           isSelected: this.isSelected,
           select: this.select,
@@ -283,8 +283,8 @@ export default mixins(
         })
       }
 
-      if (this.$slots.item) {
-        return props.items.map((item: any, index) => this.$slots.item!(this.createItemProps(
+      if (this.$scopedSlots.item) {
+        return props.items.map((item: any, index) => this.$scopedSlots.item!(this.createItemProps(
           item,
           index
         )))
@@ -296,15 +296,19 @@ export default mixins(
       if (this.hideDefaultFooter) return null
 
       const data = {
-        ...this.sanitizedFooterProps,
-        options: props.options,
-        pagination: props.pagination,
-        'onUpdate:options': (value: any) => props.updateOptions(value)
+        props: {
+          ...this.sanitizedFooterProps,
+          options: props.options,
+          pagination: props.pagination,
+        },
+        on: {
+          'update:options': (value: any) => props.updateOptions(value),
+        },
       }
 
-      const scopedSlots = getPrefixedScopedSlots('footer.', this.$slots)
+      const scopedSlots = getPrefixedScopedSlots('footer.', this.$scopedSlots)
 
-      return h(VDataFooter, {
+      return this.$createElement(VDataFooter, {
         scopedSlots,
         ...data,
       })
@@ -317,8 +321,8 @@ export default mixins(
         toggleSelectAll: this.toggleSelectAll,
       }
 
-      return h('div', {
-        class: 'v-data-iterator',
+      return this.$createElement('div', {
+        staticClass: 'v-data-iterator',
       }, [
         getSlot(this, 'header', outerProps, true),
         this.genItems(props),
@@ -329,7 +333,7 @@ export default mixins(
   },
 
   render (): VNode {
-    return h(VData, {
+    return this.$createElement(VData, {
       props: this.$props,
       on: {
         'update:options': (v: any, old: any) => !deepEqual(v, old) && this.$emit('update:options', v),

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

@@ -62,7 +62,7 @@ describe('VDataIterator.ts', () => {
       },
       scopedSlots: {
         item (props) {
-          return h('div', [props.item])
+          return this.$createElement('div', [props.item])
         },
       },
     })
@@ -114,7 +114,7 @@ describe('VDataIterator.ts', () => {
       },
       scopedSlots: {
         item (props) {
-          return h('div', {
+          return this.$createElement('div', {
             attrs: {
               id: props.item.text,
             },
@@ -149,7 +149,7 @@ describe('VDataIterator.ts', () => {
       },
       scopedSlots: {
         item (props) {
-          return h('div', {
+          return this.$createElement('div', {
             attrs: {
               id: props.item.text,
             },
@@ -187,7 +187,7 @@ describe('VDataIterator.ts', () => {
       },
       scopedSlots: {
         header (props) {
-          return h('div', {
+          return this.$createElement('div', {
             attrs: {
               id: 'header',
             },

package/src/components/VDataTable/MobileRow.ts

@@ -1,8 +1,8 @@
-import { defineComponent, VNode, PropType, h } from 'vue'
+import Vue, { VNode, PropType } from 'vue'
 import { getObjectValueByPath } from '../../util/helpers'
 import { DataTableHeader } from 'vuetify/types'
 
-export default defineComponent({
+export default Vue.extend({
   name: 'row',
 
   functional: true,
@@ -15,11 +15,8 @@ export default defineComponent({
     rtl: Boolean,
   },
 
-  render (): VNode {
-    const props = this.$props
-    const data = this.$attrs
-
-    const computedSlots = this.$slots
+  render (h, { props, slots, data }): VNode {
+    const computedSlots = slots()
 
     const columns: VNode[] = props.headers.map((header: DataTableHeader) => {
       const classes = {
@@ -30,30 +27,33 @@ export default defineComponent({
       const value = getObjectValueByPath(props.item, header.value)
 
       const slotName = header.value
+      const scopedSlot = data.scopedSlots && data.scopedSlots.hasOwnProperty(slotName) && data.scopedSlots[slotName]
       const regularSlot = computedSlots.hasOwnProperty(slotName) && computedSlots[slotName]
 
-      if (regularSlot) {
-        children.push(regularSlot({
+      if (scopedSlot) {
+        children.push(scopedSlot({
           item: props.item,
           isMobile: true,
           header,
           index: props.index,
           value,
         }))
+      } else if (regularSlot) {
+        children.push(regularSlot)
       } else {
         children.push(value == null ? value : String(value))
       }
 
       const mobileRowChildren = [
         h('div', {
-          class: 'v-data-table__mobile-row__cell',
+          staticClass: 'v-data-table__mobile-row__cell',
         }, children),
       ]
 
       if (header.value !== 'dataTableSelect' && !props.hideDefaultHeader) {
         mobileRowChildren.unshift(
           h('div', {
-            class: 'v-data-table__mobile-row__header',
+            staticClass: 'v-data-table__mobile-row__header',
           }, [header.text])
         )
       }
@@ -61,6 +61,6 @@ export default defineComponent({
       return h('td', { class: classes }, mobileRowChildren)
     })
 
-    return h('tr', { ...data, class: 'v-data-table__mobile-table-row' }, columns)
+    return h('tr', { ...data, staticClass: 'v-data-table__mobile-table-row' }, columns)
   },
 })

package/src/components/VDataTable/Row.ts

@@ -1,5 +1,5 @@
 // Types
-import { defineComponent, VNode, PropType, h } from 'vue'
+import Vue, { VNode, PropType } from 'vue'
 import { DataTableHeader } from 'vuetify/types'
 
 // Utils
@@ -10,7 +10,7 @@ function needsTd (slot: VNode[] | undefined) {
     !['td', 'th'].includes(slot![0]?.tag!)
 }
 
-export default defineComponent({
+export default Vue.extend({
   name: 'row',
 
   functional: true,
@@ -22,16 +22,16 @@ export default defineComponent({
     rtl: Boolean,
   },
 
-  render (): VNode {
-    const props = this.$props
-    const data = this.$attrs
+  render (h, { props, slots, data }): VNode {
+    const computedSlots = slots()
 
     const columns = props.headers.map((header: DataTableHeader) => {
       const children = []
       const value = getObjectValueByPath(props.item, header.value)
 
       const slotName = header.value
-      const scopedSlot = this.$slots.hasOwnProperty(slotName) && this.$slots[slotName]
+      const scopedSlot = data.scopedSlots && data.scopedSlots.hasOwnProperty(slotName) && data.scopedSlots[slotName]
+      const regularSlot = computedSlots.hasOwnProperty(slotName) && computedSlots[slotName]
 
       if (scopedSlot) {
         children.push(...wrapInArray(scopedSlot({
@@ -41,8 +41,9 @@ export default defineComponent({
           index: props.index,
           value,
         })))
-      }
-      else {
+      } else if (regularSlot) {
+        children.push(...wrapInArray(regularSlot))
+      } else {
         children.push(value == null ? value : String(value))
       }
 

package/src/components/VDataTable/RowGroup.ts

@@ -1,6 +1,6 @@
-import { defineComponent, VNode, h } from 'vue'
+import Vue, { VNode } from 'vue'
 
-export default defineComponent({
+export default Vue.extend({
   name: 'row-group',
 
   functional: true,
@@ -21,15 +21,13 @@ export default defineComponent({
     },
   },
 
-  render (): VNode {
-    const props = this.$props
-
-    const computedSlots = this.$slots
+  render (h, { slots, props }): VNode {
+    const computedSlots = slots()
     const children = []
 
     if (computedSlots['column.header']) {
       children.push(h('tr', {
-        class: props.headerClass,
+        staticClass: props.headerClass,
       }, computedSlots['column.header']))
     } else if (computedSlots['row.header']) {
       children.push(...computedSlots['row.header'])
@@ -39,7 +37,7 @@ export default defineComponent({
 
     if (computedSlots['column.summary']) {
       children.push(h('tr', {
-        class: props.summaryClass,
+        staticClass: props.summaryClass,
       }, computedSlots['column.summary']))
     } else if (computedSlots['row.summary']) {
       children.push(...computedSlots['row.summary'])