@dimailn/vuetify 2.7.2-alpha0 → 2.7.2-superbundle

package/src/components/VDataTable/VDataTableHeaderDesktop.ts

@@ -1,5 +1,5 @@
 // Helpers
-import { VNode, VNodeData, h } from 'vue'
+import { VNode, VNodeData } from 'vue'
 import mixins from '../../util/mixins'
 import header from './mixins/header'
 import { wrapInArray, convertToUnit } from '../../util/helpers'
@@ -10,10 +10,12 @@ export default mixins(header).extend({
 
   methods: {
     genGroupByToggle (header: DataTableHeader) {
-      return h('span', {
-        onClick: (e: MouseEvent) => {
-          e.stopPropagation()
-          this.$emit('group', header.value)
+      return this.$createElement('span', {
+        on: {
+          click: (e: MouseEvent) => {
+            e.stopPropagation()
+            this.$emit('group', header.value)
+          },
         },
       }, ['group'])
     },
@@ -48,9 +50,11 @@ export default mixins(header).extend({
     },
     genHeader (header: DataTableHeader) {
       const data: Required<Pick<VNodeData, 'attrs' | 'on' | 'class' | 'style'>> = {
-        role: 'columnheader',
-        scope: 'col',
-        'aria-label': header.text || '',
+        attrs: {
+          role: 'columnheader',
+          scope: 'col',
+          'aria-label': header.text || '',
+        },
         style: {
           width: convertToUnit(header.width),
           minWidth: convertToUnit(header.width),
@@ -60,21 +64,22 @@ export default mixins(header).extend({
           ...wrapInArray(header.class),
           header.divider && 'v-data-table__divider',
         ],
+        on: {},
       }
       const children = []
 
       if (header.value === 'data-table-select' && !this.singleSelect) {
-        return h('th', data, [this.genSelectAll()])
+        return this.$createElement('th', data, [this.genSelectAll()])
       }
 
       children.push(
-        this.$slots.hasOwnProperty(header.value)
-          ? this.$slots[header.value]!({ header })
-          : h('span', [header.text])
+        this.$scopedSlots.hasOwnProperty(header.value)
+          ? this.$scopedSlots[header.value]!({ header })
+          : this.$createElement('span', [header.text])
       )
 
       if (!this.disableSort && (header.sortable || !header.hasOwnProperty('sortable'))) {
-        data.onClick = () => this.$emit('sort', header.value)
+        data.on.click = () => this.$emit('sort', header.value)
 
         const sortIndex = this.options.sortBy.findIndex(k => k === header.value)
         const beingSorted = sortIndex >= 0
@@ -84,8 +89,8 @@ export default mixins(header).extend({
 
         const { ariaLabel, ariaSort } = this.getAria(beingSorted, isDesc)
 
-        data['aria-label'] += `${header.text ? ': ' : ''}${ariaLabel}`
-        data['aria-sort'] = ariaSort
+        data.attrs['aria-label'] += `${header.text ? ': ' : ''}${ariaLabel}`
+        data.attrs['aria-sort'] = ariaSort
 
         if (beingSorted) {
           data.class.push('active')
@@ -96,21 +101,21 @@ export default mixins(header).extend({
         else children.push(this.genSortIcon())
 
         if (this.options.multiSort && beingSorted) {
-          children.push(h('span', { class: 'v-data-table-header__sort-badge' }, [String(sortIndex + 1)]))
+          children.push(this.$createElement('span', { class: 'v-data-table-header__sort-badge' }, [String(sortIndex + 1)]))
         }
       }
 
       if (this.showGroupBy && header.groupable !== false) children.push(this.genGroupByToggle(header))
 
-      return h('th', data, children)
+      return this.$createElement('th', data, children)
     },
   },
 
   render (): VNode {
-    return h('thead', {
-      class: 'v-data-table-header',
+    return this.$createElement('thead', {
+      staticClass: 'v-data-table-header',
     }, [
-      h('tr', this.headers.map(header => this.genHeader(header))),
+      this.$createElement('tr', this.headers.map(header => this.genHeader(header))),
     ])
   },
 })

package/src/components/VDataTable/VDataTableHeaderMobile.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 import { VNode, VNodeChildrenArrayContents } from 'vue'
 import mixins from '../../util/mixins'
 import VSelect from '../VSelect/VSelect'
@@ -24,8 +23,8 @@ export default mixins(header).extend({
       const beingSorted = sortIndex >= 0
       const isDesc = this.options.sortDesc[sortIndex]
 
-      children.push(h('div', {
-        class: 'v-chip__close',
+      children.push(this.$createElement('div', {
+        staticClass: 'v-chip__close',
         class: {
           sortable: true,
           active: beingSorted,
@@ -34,8 +33,8 @@ export default mixins(header).extend({
         },
       }, [this.genSortIcon()]))
 
-      return h(VChip, {
-        class: 'sortable',
+      return this.$createElement(VChip, {
+        staticClass: 'sortable',
         on: {
           click: (e: MouseEvent) => {
             e.stopPropagation()
@@ -45,7 +44,7 @@ export default mixins(header).extend({
       }, children)
     },
     genSortSelect (items: any[]) {
-      return h(VSelect, {
+      return this.$createElement(VSelect, {
         props: {
           label: this.$vuetify.lang.t(this.sortByText),
           items,
@@ -64,12 +63,12 @@ export default mixins(header).extend({
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const children: VNodeChildrenArrayContents = []
 
     const header = this.headers.find(h => h.value === 'data-table-select')
     if (header && !this.singleSelect) {
-      children.push(h('div', {
+      children.push(this.$createElement('div', {
         class: [
           'v-data-table-header-mobile__select',
           ...wrapInArray(header.class),
@@ -92,13 +91,13 @@ export default mixins(header).extend({
     }
 
     const th = children.length
-      ? h('th', [h('div', { class: 'v-data-table-header-mobile__wrapper' }, children)])
+      ? h('th', [h('div', { staticClass: 'v-data-table-header-mobile__wrapper' }, children)])
       : undefined
 
     const tr = h('tr', [th])
 
     return h('thead', {
-      class: 'v-data-table-header v-data-table-header-mobile',
+      staticClass: 'v-data-table-header v-data-table-header-mobile',
     }, [tr])
   },
 })

package/src/components/VDataTable/VEditDialog.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VEditDialog.sass'
 
@@ -64,15 +63,17 @@ export default mixins(Returnable, Themeable).extend({
       input && input.focus()
     },
     genButton (fn: Function, text: VNodeChildren): VNode {
-      return h(VBtn, {
-        text: true,
-        color: 'primary',
-        light: true,
-        onClick: fn,
+      return this.$createElement(VBtn, {
+        props: {
+          text: true,
+          color: 'primary',
+          light: true,
+        },
+        on: { click: fn },
       }, text)
     },
     genActions (): VNode {
-      return h('div', {
+      return this.$createElement('div', {
         class: 'v-small-dialog__actions',
       }, [
         this.genButton(this.cancel, this.cancelText),
@@ -83,42 +84,49 @@ export default mixins(Returnable, Themeable).extend({
       ])
     },
     genContent (): VNode {
-      return h('div', {
-        class: 'v-small-dialog__content',
-        onKeydown: (e: KeyboardEvent) => {
-          e.keyCode === keyCodes.esc && this.cancel()
-          if (e.keyCode === keyCodes.enter) {
-            this.save(this.returnValue)
-            this.$emit('save')
-          }
+      return this.$createElement('div', {
+        staticClass: 'v-small-dialog__content',
+        on: {
+          keydown: (e: KeyboardEvent) => {
+            e.keyCode === keyCodes.esc && this.cancel()
+            if (e.keyCode === keyCodes.enter) {
+              this.save(this.returnValue)
+              this.$emit('save')
+            }
+          },
         },
-        ref: 'content'
+        ref: 'content',
       }, getSlot(this, 'input'))
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h(VMenu, {
-      class: ['v-small-dialog', this.themeClasses],
-      contentClass: 'v-small-dialog__menu-content',
-      transition: this.transition,
-      origin: 'top right',
-      right: true,
-      value: this.isActive,
-      closeOnClick: !this.persistent,
-      closeOnContentClick: false,
-      eager: this.eager,
-      light: this.light,
-      dark: this.dark,
-      onInput: (val: boolean) => (this.isActive = val),
+      staticClass: 'v-small-dialog',
+      class: this.themeClasses,
+      props: {
+        contentClass: 'v-small-dialog__menu-content',
+        transition: this.transition,
+        origin: 'top right',
+        right: true,
+        value: this.isActive,
+        closeOnClick: !this.persistent,
+        closeOnContentClick: false,
+        eager: this.eager,
+        light: this.light,
+        dark: this.dark,
+      },
+      on: {
+        input: (val: boolean) => (this.isActive = val),
+      },
       scopedSlots: {
         activator: ({ on }) => {
           return h('div', {
-            class: 'v-small-dialog__activator',
+            staticClass: 'v-small-dialog__activator',
             on,
           }, [
             h('span', {
-              class: 'v-small-dialog__activator__content',
+              staticClass: 'v-small-dialog__activator__content',
             }, getSlot(this)),
           ])
         },

package/src/components/VDataTable/VSimpleTable.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 import './VSimpleTable.sass'
 
 import { convertToUnit, getSlot } from '../../util/helpers'
@@ -30,20 +29,21 @@ export default mixins(Themeable).extend({
 
   methods: {
     genWrapper () {
-      return this.$slots.wrapper || h('div', {
-        class: 'v-data-table__wrapper',
+      return this.$slots.wrapper || this.$createElement('div', {
+        staticClass: 'v-data-table__wrapper',
         style: {
           height: convertToUnit(this.height),
         },
       }, [
-        h('table', getSlot(this)),
+        this.$createElement('table', getSlot(this)),
       ])
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h('div', {
-      class: ['v-data-table', this.classes],
+      staticClass: 'v-data-table',
+      class: this.classes,
     }, [
       getSlot(this, 'top'),
       this.genWrapper(),

package/src/components/VDataTable/VVirtualTable.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 import './VVirtualTable.sass'
 
 // Components
@@ -22,7 +21,7 @@ interface options extends InstanceType<typeof baseMixins> {
   cachedItems: VNodeChildren
 }
 
-export default baseMixins.extend({
+export default baseMixins.extend<options>().extend({
   name: 'v-virtual-table',
 
   props: {
@@ -114,25 +113,25 @@ export default baseMixins.extend({
         this.oldChunk = this.chunkIndex
       }
 
-      return h('tbody', [
-        h('tr', { style: this.createStyleHeight(this.offsetTop) }),
+      return this.$createElement('tbody', [
+        this.$createElement('tr', { style: this.createStyleHeight(this.offsetTop) }),
         this.cachedItems,
-        h('tr', { style: this.createStyleHeight(this.offsetBottom) }),
+        this.$createElement('tr', { style: this.createStyleHeight(this.offsetBottom) }),
       ])
     },
     genItems () {
-      return this.$slots.items!({ items: this.items.slice(this.startIndex, this.stopIndex) })
+      return this.$scopedSlots.items!({ items: this.items.slice(this.startIndex, this.stopIndex) })
     },
     onScroll (e: Event) {
       const target = e.target as Element
       this.scrollTop = target.scrollTop
     },
     genTable () {
-      return h('div', {
+      return this.$createElement('div', {
         ref: 'table',
-        class: 'v-virtual-table__table',
+        staticClass: 'v-virtual-table__table',
       }, [
-        h('table', [
+        this.$createElement('table', [
           this.$slots['body.before'],
           this.genBody(),
           this.$slots['body.after'],
@@ -140,8 +139,8 @@ export default baseMixins.extend({
       ])
     },
     genWrapper () {
-      return h('div', {
-        class: 'v-virtual-table__wrapper',
+      return this.$createElement('div', {
+        staticClass: 'v-virtual-table__wrapper',
         style: {
           height: convertToUnit(this.height),
         },
@@ -151,9 +150,9 @@ export default baseMixins.extend({
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h('div', {
-      class: 'v-data-table v-virtual-table',
+      staticClass: 'v-data-table v-virtual-table',
       class: this.classes,
     }, [
       getSlot(this, 'top'),

package/src/components/VDataTable/__tests__/MobileRow.spec.ts

@@ -102,8 +102,8 @@ describe('MobileRow', () => {
         },
       },
       scopedSlots: {
-        petrol: props => vm.$createElement('p', { class: `test ${props.header.value}` }, [props.value]),
-        diesel: props => vm.$createElement('p', { class: `test ${props.header.value}` }, [props.value]),
+        petrol: props => vm.$createElement('p', { staticClass: `test ${props.header.value}` }, [props.value]),
+        diesel: props => vm.$createElement('p', { staticClass: `test ${props.header.value}` }, [props.value]),
       },
     })
 

package/src/components/VDataTable/__tests__/Row.spec.ts

@@ -125,8 +125,8 @@ describe('Table Row', () => {
         },
       },
       scopedSlots: {
-        'column.petrol': props => vm.$createElement('p', { class: `test ${props.header.value}` }, [props.value]),
-        'column.diesel': props => vm.$createElement('p', { class: `test ${props.header.value}` }, [props.value]),
+        'column.petrol': props => vm.$createElement('p', { staticClass: `test ${props.header.value}` }, [props.value]),
+        'column.diesel': props => vm.$createElement('p', { staticClass: `test ${props.header.value}` }, [props.value]),
       },
     })