@dimailn/vuetify 2.7.2-alpha0 → 2.7.2-superbundle

package/src/components/VTreeview/VTreeviewNode.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Components
 import { VExpandTransition } from '../transitions'
 import { VIcon } from '../VIcon'
@@ -92,7 +91,7 @@ export const VTreeviewNodeProps = {
 }
 
 /* @vue/component */
-const VTreeviewNode = baseMixins.extend({
+const VTreeviewNode = baseMixins.extend<options>().extend({
   name: 'v-treeview-node',
 
   inject: {
@@ -187,27 +186,27 @@ const VTreeviewNode = baseMixins.extend({
     genLabel () {
       const children = []
 
-      if (this.$slots.label) children.push(this.$slots.label(this.scopedProps))
+      if (this.$scopedSlots.label) children.push(this.$scopedSlots.label(this.scopedProps))
       else children.push(this.text)
 
-      return h('div', {
+      return this.$createElement('div', {
         slot: 'label',
-        class: 'v-treeview-node__label',
+        staticClass: 'v-treeview-node__label',
       }, children)
     },
     genPrependSlot () {
-      if (!this.$slots.prepend) return null
+      if (!this.$scopedSlots.prepend) return null
 
-      return h('div', {
-        class: 'v-treeview-node__prepend',
-      }, this.$slots.prepend(this.scopedProps))
+      return this.$createElement('div', {
+        staticClass: 'v-treeview-node__prepend',
+      }, this.$scopedSlots.prepend(this.scopedProps))
     },
     genAppendSlot () {
-      if (!this.$slots.append) return null
+      if (!this.$scopedSlots.append) return null
 
-      return h('div', {
-        class: 'v-treeview-node__append',
-      }, this.$slots.append(this.scopedProps))
+      return this.$createElement('div', {
+        staticClass: 'v-treeview-node__append',
+      }, this.$scopedSlots.append(this.scopedProps))
     },
     genContent () {
       const children = [
@@ -216,52 +215,59 @@ const VTreeviewNode = baseMixins.extend({
         this.genAppendSlot(),
       ]
 
-      return h('div', {
-        class: 'v-treeview-node__content',
+      return this.$createElement('div', {
+        staticClass: 'v-treeview-node__content',
       }, children)
     },
     genToggle () {
-      return h(VIcon, {
-        class: ['v-treeview-node__toggle', {
+      return this.$createElement(VIcon, {
+        staticClass: 'v-treeview-node__toggle',
+        class: {
           'v-treeview-node__toggle--open': this.isOpen,
           'v-treeview-node__toggle--loading': this.isLoading,
-        }],
+        },
         slot: 'prepend',
-        onClick: (e: MouseEvent) => {
-          e.stopPropagation()
+        on: {
+          click: (e: MouseEvent) => {
+            e.stopPropagation()
 
-          if (this.isLoading) return
+            if (this.isLoading) return
 
-          this.checkChildren().then(() => this.open())
-        }
+            this.checkChildren().then(() => this.open())
+          },
+        },
       }, [this.isLoading ? this.loadingIcon : this.expandIcon])
     },
     genCheckbox () {
-      return h(VIcon, {
-        class: 'v-treeview-node__checkbox',
-        color: this.isSelected || this.isIndeterminate ? this.selectedColor : undefined,
-        disabled: this.disabled,
-        onClick: (e: MouseEvent) => {
-          e.stopPropagation()
-
-          if (this.isLoading) return
-
-          this.checkChildren().then(() => {
-            // We nextTick here so that items watch in VTreeview has a chance to run first
-            this.$nextTick(() => {
-              this.isSelected = !this.isSelected
-              this.isIndeterminate = false
-
-              this.treeview.updateSelected(this.key, this.isSelected)
-              this.treeview.emitSelected()
+      return this.$createElement(VIcon, {
+        staticClass: 'v-treeview-node__checkbox',
+        props: {
+          color: this.isSelected || this.isIndeterminate ? this.selectedColor : undefined,
+          disabled: this.disabled,
+        },
+        on: {
+          click: (e: MouseEvent) => {
+            e.stopPropagation()
+
+            if (this.isLoading) return
+
+            this.checkChildren().then(() => {
+              // We nextTick here so that items watch in VTreeview has a chance to run first
+              this.$nextTick(() => {
+                this.isSelected = !this.isSelected
+                this.isIndeterminate = false
+
+                this.treeview.updateSelected(this.key, this.isSelected)
+                this.treeview.emitSelected()
+              })
             })
-          })
+          },
         },
       }, [this.computedIcon])
     },
     genLevel (level: number) {
-      return createRange(level).map(() => h('div', {
-        class: 'v-treeview-node__level',
+      return createRange(level).map(() => this.$createElement('div', {
+        staticClass: 'v-treeview-node__level',
       }))
     },
     genNode () {
@@ -277,80 +283,89 @@ const VTreeviewNode = baseMixins.extend({
 
       children.unshift(...this.genLevel(this.level))
 
-      return h('div', this.setTextColor(this.isActive && this.color, {
-        class: ['v-treeview-node__root', {
+      return this.$createElement('div', this.setTextColor(this.isActive && this.color, {
+        staticClass: 'v-treeview-node__root',
+        class: {
           [this.activeClass]: this.isActive,
-        }],
-        onClick: () => {
-          if (this.openOnClick && this.hasChildren) {
-            this.checkChildren().then(this.open)
-          } else if (this.activatable && !this.disabled) {
-            this.isActive = !this.isActive
-            this.treeview.updateActive(this.key, this.isActive)
-            this.treeview.emitActive()
-          }
-        }
+        },
+        on: {
+          click: () => {
+            if (this.openOnClick && this.hasChildren) {
+              this.checkChildren().then(this.open)
+            } else if (this.activatable && !this.disabled) {
+              this.isActive = !this.isActive
+              this.treeview.updateActive(this.key, this.isActive)
+              this.treeview.emitActive()
+            }
+          },
+        },
       }), children)
     },
     genChild (item: any, parentIsDisabled: boolean) {
-      return h(VTreeviewNode, {
+      return this.$createElement(VTreeviewNode, {
         key: getObjectValueByPath(item, this.itemKey),
-        activatable: this.activatable,
-        activeClass: this.activeClass,
-        item,
-        selectable: this.selectable,
-        selectedColor: this.selectedColor,
-        color: this.color,
-        disablePerNode: this.disablePerNode,
-        expandIcon: this.expandIcon,
-        indeterminateIcon: this.indeterminateIcon,
-        offIcon: this.offIcon,
-        onIcon: this.onIcon,
-        loadingIcon: this.loadingIcon,
-        itemKey: this.itemKey,
-        itemText: this.itemText,
-        itemDisabled: this.itemDisabled,
-        itemChildren: this.itemChildren,
-        loadChildren: this.loadChildren,
-        transition: this.transition,
-        openOnClick: this.openOnClick,
-        rounded: this.rounded,
-        shaped: this.shaped,
-        level: this.level + 1,
-        selectionType: this.selectionType,
-        parentIsDisabled,
-      }, this.$slots)
+        props: {
+          activatable: this.activatable,
+          activeClass: this.activeClass,
+          item,
+          selectable: this.selectable,
+          selectedColor: this.selectedColor,
+          color: this.color,
+          disablePerNode: this.disablePerNode,
+          expandIcon: this.expandIcon,
+          indeterminateIcon: this.indeterminateIcon,
+          offIcon: this.offIcon,
+          onIcon: this.onIcon,
+          loadingIcon: this.loadingIcon,
+          itemKey: this.itemKey,
+          itemText: this.itemText,
+          itemDisabled: this.itemDisabled,
+          itemChildren: this.itemChildren,
+          loadChildren: this.loadChildren,
+          transition: this.transition,
+          openOnClick: this.openOnClick,
+          rounded: this.rounded,
+          shaped: this.shaped,
+          level: this.level + 1,
+          selectionType: this.selectionType,
+          parentIsDisabled,
+        },
+        scopedSlots: this.$scopedSlots,
+      })
     },
     genChildrenWrapper () {
       if (!this.isOpen || !this.children) return null
 
       const children = [this.children.map(c => this.genChild(c, this.disabled))]
 
-      return h('div', {
-        class: 'v-treeview-node__children',
+      return this.$createElement('div', {
+        staticClass: 'v-treeview-node__children',
       }, children)
     },
     genTransition () {
-      return h(VExpandTransition, [this.genChildrenWrapper()])
+      return this.$createElement(VExpandTransition, [this.genChildrenWrapper()])
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const children: VNodeChildren = [this.genNode()]
 
     if (this.transition) children.push(this.genTransition())
     else children.push(this.genChildrenWrapper())
 
     return h('div', {
-      class: ['v-treeview-node', {
+      staticClass: 'v-treeview-node',
+      class: {
         'v-treeview-node--leaf': !this.hasChildren,
         'v-treeview-node--click': this.openOnClick,
         'v-treeview-node--disabled': this.disabled,
         'v-treeview-node--rounded': this.rounded,
         'v-treeview-node--shaped': this.shaped,
         'v-treeview-node--selected': this.isSelected,
-      }],
-      'aria-expanded': String(this.isOpen),
+      },
+      attrs: {
+        'aria-expanded': String(this.isOpen),
+      },
     }, children)
   },
 })

package/src/components/VVirtualScroll/VVirtualScroll.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VVirtualScroll.sass'
 
@@ -15,16 +14,14 @@ import {
 } from '../../util/helpers'
 
 // Types
-import { VNode, defineComponent } from 'vue'
+import { VNode } from 'vue'
 import { PropValidator } from 'vue/types/options'
 
-export default defineComponent({
+export default Measurable.extend({
   name: 'v-virtual-scroll',
 
   directives: { Scroll },
 
-  extends: Measurable,
-
   props: {
     bench: {
       type: [Number, String],
@@ -82,8 +79,8 @@ export default defineComponent({
 
       const top = convertToUnit(index * this.__itemHeight)
 
-      return h('div', {
-        class: 'v-virtual-scroll__item',
+      return this.$createElement('div', {
+        staticClass: 'v-virtual-scroll__item',
         style: { top },
         key: index,
       }, getSlot(this, 'default', { index, item }))
@@ -103,16 +100,16 @@ export default defineComponent({
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const content = h('div', {
-      class: 'v-virtual-scroll__container',
+      staticClass: 'v-virtual-scroll__container',
       style: {
         height: convertToUnit((this.items.length * this.__itemHeight)),
       },
     }, this.getChildren())
 
     return h('div', {
-      class: 'v-virtual-scroll',
+      staticClass: 'v-virtual-scroll',
       style: this.measurableStyles,
       directives: [{
         name: 'scroll',

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

@@ -20,7 +20,7 @@ describe('VVirtualScroll.ts', () => {
         ...options,
         scopedSlots: {
           default ({ item }) {
-            return h('div', { class: 'item' }, item)
+            return this.$createElement('div', { class: 'item' }, item)
           },
         },
       })

package/src/components/VWindow/VWindow.sass

@@ -73,35 +73,35 @@
     &-leave-active
       transition: $window-transition
 
-    &-leave-from,
+    &-leave,
     &-leave-to
       position: absolute !important
       top: 0
       width: 100%
 
   &-x-transition
-    &-enter-from
+    &-enter
       transform: translateX(100%)
 
     &-leave-to
       transform: translateX(-100%)
 
   &-x-reverse-transition
-    &-enter-from
+    &-enter
       transform: translateX(-100%)
 
     &-leave-to
       transform: translateX(100%)
 
   &-y-transition
-    &-enter-from
+    &-enter
       transform: translateY(100%)
 
     &-leave-to
       transform: translateY(-100%)
 
   &-y-reverse-transition
-    &-enter-from
+    &-enter
       transform: translateY(-100%)
 
     &-leave-to

package/src/components/VWindow/VWindow.ts

@@ -1,10 +1,9 @@
-import {h, withDirectives} from 'vue'
 // Styles
 import './VWindow.sass'
 
 // Types
 import { VNode, VNodeDirective } from 'vue/types/vnode'
-import { PropType, defineComponent } from 'vue'
+import { PropType } from 'vue'
 import { TouchHandlers } from 'vuetify/types'
 
 // Directives
@@ -17,9 +16,8 @@ import { BaseItemGroup } from '../VItemGroup/VItemGroup'
 import { getSlot } from '../../util/helpers'
 
 /* @vue/component */
-export default defineComponent({
+export default BaseItemGroup.extend({
   name: 'v-window',
-  extends: BaseItemGroup,
 
   directives: { Touch },
 
@@ -52,7 +50,7 @@ export default defineComponent({
     showArrowsOnHover: Boolean,
     touch: Object as PropType<TouchHandlers>,
     touchless: Boolean,
-    modelValue: {
+    value: {
       required: false,
     },
     vertical: Boolean,
@@ -75,7 +73,7 @@ export default defineComponent({
     },
     classes (): object {
       return {
-        ...BaseItemGroup.computed.classes.call(this),
+        ...BaseItemGroup.options.computed.classes.call(this),
         'v-window--show-arrows-on-hover': this.showArrowsOnHover,
       }
     },
@@ -130,10 +128,11 @@ export default defineComponent({
         children.push(this.genControlIcons())
       }
 
-      return h('div', {
-        class: ['v-window__container', {
+      return this.$createElement('div', {
+        staticClass: 'v-window__container',
+        class: {
           'v-window__container--is-active': this.isActive,
-        }],
+        },
         style: {
           height: this.internalHeight || this.transitionHeight,
         },
@@ -144,28 +143,31 @@ export default defineComponent({
       icon: string,
       click: () => void
     ) {
-
-      const attrs = {
-        'aria-label': this.$vuetify.lang.t(`$vuetify.carousel.${direction}`),
-        onClick: (e: Event) => {
+      const on = {
+        click: (e: Event) => {
           e.stopPropagation()
           this.changedByDelimiters = true
           click()
-        }
+        },
       }
-      const children = this.$slots[direction]?.({
+      const attrs = {
+        'aria-label': this.$vuetify.lang.t(`$vuetify.carousel.${direction}`),
+      }
+      const children = this.$scopedSlots[direction]?.({
+        on,
+        attrs,
+      }) ?? [this.$createElement(VBtn, {
+        props: { icon: true },
         attrs,
-      }) ?? [h(VBtn, {
-        icon: true,
-        ...attrs,
+        on,
       }, [
-        h(VIcon, {
-          large: true,
+        this.$createElement(VIcon, {
+          props: { large: true },
         }, icon),
       ])]
 
-      return h('div', {
-        class: `v-window__${direction}`,
+      return this.$createElement('div', {
+        staticClass: `v-window__${direction}`,
       }, children)
     },
     genControlIcons () {
@@ -251,11 +253,11 @@ export default defineComponent({
     },
   },
 
-  render (): VNode {
-    const directives = []
-
+  render (h): VNode {
     const data = {
-      class: ['v-window', this.classes]
+      staticClass: 'v-window',
+      class: this.classes,
+      directives: [] as VNodeDirective[],
     }
 
     if (!this.touchless) {
@@ -274,12 +276,12 @@ export default defineComponent({
         },
       }
 
-      directives.push([
-        Touch,
-        value
-      ])
+      data.directives.push({
+        name: 'touch',
+        value,
+      })
     }
 
-    return withDirectives(h('div', data, [this.genContainer()]), directives)
+    return h('div', data, [this.genContainer()])
   },
 })

package/src/components/VWindow/VWindowItem.ts

@@ -1,4 +1,3 @@
-import {h, vShow, withDirectives} from 'vue'
 // Components
 import VWindow from './VWindow'
 
@@ -14,7 +13,7 @@ import { convertToUnit, getSlot } from '../../util/helpers'
 import mixins, { ExtractVue } from '../../util/mixins'
 
 // Types
-import { VNode, Transition } from 'vue'
+import { VNode } from 'vue'
 
 const baseMixins = mixins(
   Bootable,
@@ -26,7 +25,9 @@ interface options extends ExtractVue<typeof baseMixins> {
   windowGroup: InstanceType<typeof VWindow>
 }
 
-export default baseMixins.extend({
+export default baseMixins.extend<options>().extend(
+  /* @vue/component */
+).extend({
   name: 'v-window-item',
 
   directives: {
@@ -77,15 +78,15 @@ export default baseMixins.extend({
       return getSlot(this)
     },
     genWindowItem () {
-      return withDirectives(h('div', {
-        class: ['v-window-item', this.classes],
-        ...this.$listeners,
-      }, this.genDefaultSlot()), [
-        [
-          vShow,
-          this.isActive
-        ]
-      ])
+      return this.$createElement('div', {
+        staticClass: 'v-window-item',
+        class: this.classes,
+        directives: [{
+          name: 'show',
+          value: this.isActive,
+        }],
+        on: this.$listeners,
+      }, this.genDefaultSlot())
     },
     onAfterTransition () {
       if (!this.inTransition) {
@@ -136,21 +137,25 @@ export default baseMixins.extend({
     },
   },
 
-  render (): VNode {
-    return h(Transition, {
-      name: this.computedTransition,
-      // Handlers for enter windows.
-      onBeforeEnter: this.onBeforeTransition,
-      onAfterEnter: this.onAfterTransition,
-      onEnterCancelled: this.onTransitionCancelled,
-
-      // Handlers for leave windows.
-      onBeforeLeave: this.onBeforeTransition,
-      onAfterLeave: this.onAfterTransition,
-      onLeaveCancelled: this.onTransitionCancelled,
-
-      // Enter handler for height transition.
-      onEnter: this.onEnter,
+  render (h): VNode {
+    return h('transition', {
+      props: {
+        name: this.computedTransition,
+      },
+      on: {
+        // Handlers for enter windows.
+        beforeEnter: this.onBeforeTransition,
+        afterEnter: this.onAfterTransition,
+        enterCancelled: this.onTransitionCancelled,
+
+        // Handlers for leave windows.
+        beforeLeave: this.onBeforeTransition,
+        afterLeave: this.onAfterTransition,
+        leaveCancelled: this.onTransitionCancelled,
+
+        // Enter handler for height transition.
+        enter: this.onEnter,
+      },
     }, this.showLazyContent(() => [this.genWindowItem()]))
   },
 })

package/src/components/index.ts

@@ -1,3 +1,8 @@
+import VDataTableHeaderDesktop from './VDataTable/VDataTableHeaderDesktop'
+import VDataTableHeaderMobile from './VDataTable/VDataTableHeaderMobile'
+import VDataTableHeader from './VDataTable/VDataTableHeader'
+
+
 export * from './VApp'
 export * from './VAppBar'
 export * from './VAlert'
@@ -79,3 +84,8 @@ export * from './VTreeview'
 export * from './VVirtualScroll'
 export * from './VWindow'
 export * from './transitions'
+export {
+    VDataTableHeader,
+    VDataTableHeaderMobile,
+    VDataTableHeaderDesktop
+}