@dimailn/vuetify 2.7.2-alpha0 → 2.7.2-superbundle

package/src/components/VDatePicker/mixins/date-picker-table.ts

@@ -19,9 +19,6 @@ import { throttle } from '../../../util/helpers'
 import {
   PropType,
   VNodeChildren,
-  Transition,
-  withDirectives,
-  h
 } from 'vue'
 import { PropValidator } from 'vue/types/options'
 import {
@@ -122,7 +119,7 @@ export default mixins(
       if (this.disabled) return undefined
 
       return mergeListeners({
-        onClick: () => {
+        click: () => {
           if (isAllowed && !this.readonly) this.$emit('input', value)
         },
       }, createItemTypeNativeListeners(this, `:${mouseEventType}`, value))
@@ -140,21 +137,26 @@ export default mixins(
         isLast = value === this.value[this.value.length - 1]
       }
 
-      return h('button', setColor(color, {
-        class: ['v-btn', this.genButtonClasses(
+      return this.$createElement('button', setColor(color, {
+        staticClass: 'v-btn',
+        class: this.genButtonClasses(
           isAllowed && !isOtherMonth,
           isFloating,
           isSelected,
           isCurrent,
           isFirst,
           isLast,
-        )],
-        type: 'button',
-        disabled: this.disabled || !isAllowed || isOtherMonth,
-        ...this.genButtonEvents(value, isAllowed, mouseEventType),
+        ),
+        attrs: {
+          type: 'button',
+        },
+        domProps: {
+          disabled: this.disabled || !isAllowed || isOtherMonth,
+        },
+        on: this.genButtonEvents(value, isAllowed, mouseEventType),
       }), [
-        h('div', {
-          class: 'v-btn__content',
+        this.$createElement('div', {
+          staticClass: 'v-btn__content',
         }, [formatter(value)]),
         this.genEvents(value),
       ])
@@ -193,9 +195,9 @@ export default mixins(
     genEvents (date: string) {
       const eventColors = this.getEventColors(date)
 
-      return eventColors.length ? h('div', {
-        class: 'v-date-picker-table__events',
-      }, eventColors.map(color => h('div', this.setBackgroundColor(color)))) : null
+      return eventColors.length ? this.$createElement('div', {
+        staticClass: 'v-date-picker-table__events',
+      }, eventColors.map(color => this.$createElement('div', this.setBackgroundColor(color)))) : null
     },
     isValidScroll (value: number, calculateTableDate: CalculateTableDateFunction) {
       const tableDate = calculateTableDate(value)
@@ -211,33 +213,34 @@ export default mixins(
       this.$emit('update:table-date', calculateTableDate(value))
     },
     genTable (staticClass: string, children: VNodeChildren, calculateTableDate: CalculateTableDateFunction) {
-      const transition = h(Transition, {
-        name: this.computedTransition,
-      }, [h('table', { key: this.tableDate }, children)])
+      const transition = this.$createElement('transition', {
+        props: { name: this.computedTransition },
+      }, [this.$createElement('table', { key: this.tableDate }, children)])
 
-      const touchDirective = [
-        Touch,
-        {
+      const touchDirective = {
+        name: 'touch',
+        value: {
           left: (e: TouchWrapper) => (e.offsetX < -15) &&
             (this.isValidScroll(1, calculateTableDate) && this.touch(1, calculateTableDate)),
           right: (e: TouchWrapper) => (e.offsetX > 15) &&
             (this.isValidScroll(-1, calculateTableDate) && this.touch(-1, calculateTableDate)),
-        }
-      ]
+        },
+      }
 
-      return withDirectives(h('div', {
+      return this.$createElement('div', {
+        staticClass,
         class: {
-          [staticClass]: true,
           'v-date-picker-table--disabled': this.disabled,
           ...this.themeClasses,
         },
-        ...((!this.disabled && this.scrollable) ? {
-          onWheel: (e: WheelEvent) => {
+        on: (!this.disabled && this.scrollable) ? {
+          wheel: (e: WheelEvent) => {
             e.preventDefault()
             if (this.isValidScroll(e.deltaY, calculateTableDate)) { this.wheelThrottle(e, calculateTableDate) }
           },
-        } : {}),
-      }, [transition]), [touchDirective])
+        } : undefined,
+        directives: [touchDirective],
+      }, [transition])
     },
     isSelected (value: string): boolean {
       if (Array.isArray(this.value)) {

package/src/components/VDatePicker/util/eventHelpers.ts

@@ -1,6 +1,6 @@
-import {App} from 'vue'
+import Vue from 'vue'
 
-export function createItemTypeNativeListeners (instance: App, itemTypeSuffix: string, value: any) {
+export function createItemTypeNativeListeners (instance: Vue, itemTypeSuffix: string, value: any) {
   return Object.keys(instance.$listeners).reduce((on, eventName) => {
     if (eventName.endsWith(itemTypeSuffix)) {
       on[eventName.slice(0, -itemTypeSuffix.length)] = (event: Event) => instance.$emit(eventName, value, event)
@@ -10,7 +10,7 @@ export function createItemTypeNativeListeners (instance: App, itemTypeSuffix: st
   }, {} as typeof instance.$listeners)
 }
 
-export function createItemTypeListeners (instance: App, itemTypeSuffix: string) {
+export function createItemTypeListeners (instance: Vue, itemTypeSuffix: string) {
   return Object.keys(instance.$listeners).reduce((on, eventName) => {
     if (eventName.endsWith(itemTypeSuffix)) {
       on[eventName] = instance.$listeners[eventName]

package/src/components/VDialog/VDialog.ts

@@ -1,4 +1,3 @@
-import {Transition, h, vShow, withDirectives} from 'vue'
 // Styles
 import './VDialog.sass'
 
@@ -40,6 +39,8 @@ const baseMixins = mixins(
 export default baseMixins.extend({
   name: 'v-dialog',
 
+  directives: { ClickOutside },
+
   props: {
     dark: Boolean,
     disabled: Boolean,
@@ -94,7 +95,7 @@ export default baseMixins.extend({
     hasActivator (): boolean {
       return Boolean(
         !!this.$slots.activator ||
-        !!this.$slots.activator
+        !!this.$scopedSlots.activator
       )
     },
   },
@@ -169,7 +170,7 @@ export default baseMixins.extend({
       if (this.fullscreen) {
         document.documentElement.classList.add('overflow-y-hidden')
       } else {
-        Overlayable.methods.hideScroll.call(this)
+        Overlayable.options.methods.hideScroll.call(this)
       }
     },
     show () {
@@ -240,17 +241,21 @@ export default baseMixins.extend({
     },
     genContent () {
       return this.showLazyContent(() => [
-        h(VThemeProvider, {
-          root: true,
-          light: this.light,
-          dark: this.dark
+        this.$createElement(VThemeProvider, {
+          props: {
+            root: true,
+            light: this.light,
+            dark: this.dark,
+          },
         }, [
-          h('div', {
+          this.$createElement('div', {
             class: this.contentClasses,
-            role: 'dialog',
-            'aria-modal': this.hideOverlay ? undefined : 'true',
-            ...this.getScopeIdAttrs(),
-            onKeydown: this.onKeydown,
+            attrs: {
+              role: 'dialog',
+              'aria-modal': this.hideOverlay ? undefined : 'true',
+              ...this.getScopeIdAttrs(),
+            },
+            on: { keydown: this.onKeydown },
             style: { zIndex: this.activeZIndex },
             ref: 'content',
           }, [this.genTransition()]),
@@ -262,31 +267,32 @@ export default baseMixins.extend({
 
       if (!this.transition) return content
 
-      return h(Transition, {
-        name: this.transition,
-        origin: this.origin,
-        appear: true
+      return this.$createElement('transition', {
+        props: {
+          name: this.transition,
+          origin: this.origin,
+          appear: true,
+        },
       }, [content])
     },
     genInnerContent () {
-      const directives = [
-        [
-          ClickOutside,
-          {
-            handler: this.onClickOutside,
-            closeConditional: this.closeConditional,
-            include: this.getOpenDependentElements,
-          }
-        ],
-        [
-          vShow,
-          this.isActive
-        ]
-      ]
       const data: VNodeData = {
         class: this.classes,
-        tabindex: this.isActive ? 0 : undefined,
+        attrs: {
+          tabindex: this.isActive ? 0 : undefined,
+        },
         ref: 'dialog',
+        directives: [
+          {
+            name: 'click-outside',
+            value: {
+              handler: this.onClickOutside,
+              closeConditional: this.closeConditional,
+              include: this.getOpenDependentElements,
+            },
+          },
+          { name: 'show', value: this.isActive },
+        ],
         style: {
           transformOrigin: this.origin,
         },
@@ -300,21 +306,19 @@ export default baseMixins.extend({
         }
       }
 
-      return withDirectives(
-        h('div', data, this.getContentSlot()),
-        directives
-      )
+      return this.$createElement('div', data, this.getContentSlot())
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h('div', {
-      class: ['v-dialog__container', {
+      staticClass: 'v-dialog__container',
+      class: {
         'v-dialog__container--attached':
           this.attach === '' ||
           this.attach === true ||
           this.attach === 'attach',
-      }]
+      },
     }, [
       this.genActivator(),
       this.genContent(),

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

@@ -135,8 +135,8 @@ describe('VDialog.ts', () => {
     const wrapper = mountFunction({
       scopedSlots: {
         activator ({ on }) {
-          return h('div', {
-            class: 'activator',
+          return this.$createElement('div', {
+            staticClass: 'activator',
             on,
           })
         },
@@ -161,8 +161,8 @@ describe('VDialog.ts', () => {
       scopedSlots: {
         // eslint-disable-next-line sonarjs/no-identical-functions
         activator ({ on }) {
-          return h('div', {
-            class: 'activator',
+          return this.$createElement('div', {
+            staticClass: 'activator',
             on,
           })
         },
@@ -240,8 +240,8 @@ describe('VDialog.ts', () => {
       scopedSlots: {
         // eslint-disable-next-line sonarjs/no-identical-functions
         activator ({ on }) {
-          return h('div', {
-            class: 'activator',
+          return this.$createElement('div', {
+            staticClass: 'activator',
             on,
           })
         },
@@ -262,8 +262,8 @@ describe('VDialog.ts', () => {
       scopedSlots: {
         // eslint-disable-next-line sonarjs/no-identical-functions
         activator ({ on }) {
-          return h('div', {
-            class: 'activator',
+          return this.$createElement('div', {
+            staticClass: 'activator',
             on,
           })
         },
@@ -331,8 +331,8 @@ describe('VDialog.ts', () => {
       scopedSlots: {
         // eslint-disable-next-line sonarjs/no-identical-functions
         activator ({ on }) {
-          return h('div', {
-            class: 'activator',
+          return this.$createElement('div', {
+            staticClass: 'activator',
             on,
           })
         },

package/src/components/VDivider/VDivider.ts

@@ -1,40 +1,39 @@
-import {h} from 'vue'
 // Styles
 import './VDivider.sass'
 
 // Types
-import { VNode, defineComponent } from 'vue'
+import { VNode } from 'vue'
 
 // Mixins
 import Themeable from '../../mixins/themeable'
-import mergeData from '../../util/mergeData'
 
-
-export default defineComponent({
+export default Themeable.extend({
   name: 'v-divider',
-  extends: Themeable,
 
   props: {
     inset: Boolean,
     vertical: Boolean,
   },
 
-  render (): VNode {
+  render (h): VNode {
     // WAI-ARIA attributes
     let orientation
     if (!this.$attrs.role || this.$attrs.role === 'separator') {
       orientation = this.vertical ? 'vertical' : 'horizontal'
     }
-    return h('hr', mergeData({
+    return h('hr', {
       class: {
         'v-divider': true,
         'v-divider--inset': this.inset,
         'v-divider--vertical': this.vertical,
         ...this.themeClasses,
       },
-      role: 'separator',
-      'aria-orientation': orientation,
-      ...this.$listeners
-    }, this.$attrs))
+      attrs: {
+        role: 'separator',
+        'aria-orientation': orientation,
+        ...this.$attrs,
+      },
+      on: this.$listeners,
+    })
   },
 })

package/src/components/VExpansionPanel/VExpansionPanel.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Components
 import VExpansionPanels from './VExpansionPanels'
 import VExpansionPanelHeader from './VExpansionPanelHeader'
@@ -77,17 +76,17 @@ export default mixins(
       this.isReadonly || this.isDisabled || this.toggle()
     },
     toggle () {
-      this.$nextTick(() => {
-        this.$emit('change')
-        this.$emitLegacy('change')
-      })
+      this.$nextTick(() => this.$emit('change'))
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h('div', {
-      class: ['v-expansion-panel', this.classes],
-      'aria-expanded': String(this.isActive),
+      staticClass: 'v-expansion-panel',
+      class: this.classes,
+      attrs: {
+        'aria-expanded': String(this.isActive),
+      },
     }, getSlot(this))
   },
 })

package/src/components/VExpansionPanel/VExpansionPanelContent.ts

@@ -1,4 +1,3 @@
-import {h, vShow, withDirectives} from 'vue'
 // Components
 import VExpansionPanel from './VExpansionPanel'
 import { VExpandTransition } from '../transitions'
@@ -26,7 +25,7 @@ interface options extends ExtractVue<typeof baseMixins> {
 }
 
 /* @vue/component */
-export default baseMixins.extend({
+export default baseMixins.extend<options>().extend({
   name: 'v-expansion-panel-content',
 
   data: () => ({
@@ -59,17 +58,16 @@ export default baseMixins.extend({
     this.expansionPanel.unregisterContent()
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h(VExpandTransition, this.showLazyContent(() => [
-      withDirectives(h('div', this.setBackgroundColor(this.color, {
-        class: 'v-expansion-panel-content'
+      h('div', this.setBackgroundColor(this.color, {
+        staticClass: 'v-expansion-panel-content',
+        directives: [{
+          name: 'show',
+          value: this.isActive,
+        }],
       }), [
         h('div', { class: 'v-expansion-panel-content__wrap' }, getSlot(this, 'default', { open: this.isActive })),
-      ]), [
-        [
-          vShow,
-          this.isActive
-        ]
       ]),
     ]))
   },

package/src/components/VExpansionPanel/VExpansionPanelHeader.ts

@@ -1,4 +1,3 @@
-import {h, vShow, withDirectives} from 'vue'
 // Components
 import { VFadeTransition } from '../transitions'
 import VExpansionPanel from './VExpansionPanel'
@@ -9,7 +8,7 @@ import Colorable from '../../mixins/colorable'
 import { inject as RegistrableInject } from '../../mixins/registrable'
 
 // Directives
-import ripple, { Ripple } from '../../directives/ripple'
+import ripple from '../../directives/ripple'
 
 // Utilities
 import { getSlot } from '../../util/helpers'
@@ -28,7 +27,7 @@ interface options extends ExtractVue<typeof baseMixins> {
   expansionPanel: InstanceType<typeof VExpansionPanel>
 }
 
-export default baseMixins.extend({
+export default baseMixins.extend<options>().extend({
   name: 'v-expansion-panel-header',
 
   directives: { ripple },
@@ -79,47 +78,48 @@ export default baseMixins.extend({
   methods: {
     onClick (e: MouseEvent) {
       this.$emit('click', e)
-      this.$emitLegacy('click', e)
     },
     genIcon () {
       const icon = getSlot(this, 'actions', { open: this.isActive }) ||
-        [h(VIcon, this.expandIcon)]
+        [this.$createElement(VIcon, this.expandIcon)]
 
-      return h(VFadeTransition, [
-        withDirectives(h('div', {
-          class: ['v-expansion-panel-header__icon', {
+      return this.$createElement(VFadeTransition, [
+        this.$createElement('div', {
+          staticClass: 'v-expansion-panel-header__icon',
+          class: {
             'v-expansion-panel-header__icon--disable-rotate': this.disableIconRotate,
-          }]
-        }, icon), [
-          [
-            vShow,
-            !this.isDisabled
-          ]
-        ]),
+          },
+          directives: [{
+            name: 'show',
+            value: !this.isDisabled,
+          }],
+        }, icon),
       ])
     },
   },
 
-  render (): VNode {
-    const directives = [
-      [
-        Ripple,
-        this.ripple
-      ]
-    ]
-
-    return withDirectives(h('button', this.setBackgroundColor(this.color, {
-      class: ['v-expansion-panel-header', this.classes],
-      tabindex: this.isDisabled ? -1 : null,
-      type: 'button',
-      'aria-expanded': this.isActive,
-      ...this.$listeners,
-      onClick: this.onClick,
-      onMousedown: () => (this.hasMousedown = true),
-      onMouseup: () => (this.hasMousedown = false)
+  render (h): VNode {
+    return h('button', this.setBackgroundColor(this.color, {
+      staticClass: 'v-expansion-panel-header',
+      class: this.classes,
+      attrs: {
+        tabindex: this.isDisabled ? -1 : null,
+        type: 'button',
+        'aria-expanded': this.isActive,
+      },
+      directives: [{
+        name: 'ripple',
+        value: this.ripple,
+      }],
+      on: {
+        ...this.$listeners,
+        click: this.onClick,
+        mousedown: () => (this.hasMousedown = true),
+        mouseup: () => (this.hasMousedown = false),
+      },
     }), [
       getSlot(this, 'default', { open: this.isActive }, true),
       this.hideActions || this.genIcon(),
-    ]), directives)
+    ])
   },
 })

package/src/components/VExpansionPanel/VExpansionPanels.ts

@@ -7,15 +7,13 @@ import VExpansionPanel from './VExpansionPanel'
 
 // Utilities
 import { breaking } from '../../util/console'
-import { defineComponent } from 'vue'
 
 // Types
 interface VExpansionPanelInstance extends InstanceType<typeof VExpansionPanel> {}
 
 /* @vue/component */
-export default defineComponent({
+export default BaseItemGroup.extend({
   name: 'v-expansion-panels',
-  extends: BaseItemGroup,
 
   provide (): object {
     return {
@@ -38,7 +36,7 @@ export default defineComponent({
   computed: {
     classes (): object {
       return {
-        ...BaseItemGroup.computed.classes.call(this),
+        ...BaseItemGroup.options.computed.classes.call(this),
         'v-expansion-panels': true,
         'v-expansion-panels--accordion': this.accordion,
         'v-expansion-panels--flat': this.flat,