@dimailn/vuetify 2.7.2-alpha0 → 2.7.2-superbundle

package/src/components/VTimePicker/VTimePickerClock.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 import './VTimePickerClock.sass'
 
 // Mixins
@@ -131,8 +130,8 @@ export default mixins<options &
 
       for (let value = this.min; value <= this.max; value = value + this.step) {
         const color = value === this.value && (this.color || 'accent')
-        children.push(h('span', this.setBackgroundColor(color, {
-          class: 'v-time-picker-clock__item',
+        children.push(this.$createElement('span', this.setBackgroundColor(color, {
+          staticClass: 'v-time-picker-clock__item',
           class: {
             'v-time-picker-clock__item--active': value === this.displayedValue,
             'v-time-picker-clock__item--disabled': this.disabled || !this.isAllowed(value),
@@ -148,8 +147,8 @@ export default mixins<options &
       const scale = `scaleY(${this.handScale(this.displayedValue)})`
       const angle = this.rotate + this.degreesPerUnit * (this.displayedValue - this.min)
       const color = (this.value != null) && (this.color || 'accent')
-      return h('div', this.setBackgroundColor(color, {
-        class: 'v-time-picker-clock__hand',
+      return this.$createElement('div', this.setBackgroundColor(color, {
+        staticClass: 'v-time-picker-clock__hand',
         class: {
           'v-time-picker-clock__hand--inner': this.isInner(this.value),
         },
@@ -247,9 +246,9 @@ export default mixins<options &
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const data: VNodeData = {
-      class: 'v-time-picker-clock',
+      staticClass: 'v-time-picker-clock',
       class: {
         'v-time-picker-clock--indeterminate': this.value == null,
         ...this.themeClasses,
@@ -272,7 +271,7 @@ export default mixins<options &
 
     return h('div', data, [
       h('div', {
-        class: 'v-time-picker-clock__inner',
+        staticClass: 'v-time-picker-clock__inner',
         ref: 'innerClock',
       }, [
         this.genHand(),

package/src/components/VTimePicker/VTimePickerTitle.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 import './VTimePickerTitle.sass'
 
 // Mixins
@@ -44,22 +43,22 @@ export default mixins(
       const displayedMinute = this.minute == null ? '--' : pad(this.minute)
       const titleContent = [
         this.genPickerButton('selecting', SelectingTimes.Hour, displayedHour, this.disabled),
-        h('span', ':'),
+        this.$createElement('span', ':'),
         this.genPickerButton('selecting', SelectingTimes.Minute, displayedMinute, this.disabled),
       ]
 
       if (this.useSeconds) {
         const displayedSecond = this.second == null ? '--' : pad(this.second)
-        titleContent.push(h('span', ':'))
+        titleContent.push(this.$createElement('span', ':'))
         titleContent.push(this.genPickerButton('selecting', SelectingTimes.Second, displayedSecond, this.disabled))
       }
-      return h('div', {
+      return this.$createElement('div', {
         class: 'v-time-picker-title__time',
       }, titleContent)
     },
     genAmPm () {
-      return h('div', {
-        class: 'v-time-picker-title__ampm',
+      return this.$createElement('div', {
+        staticClass: 'v-time-picker-title__ampm',
         class: {
           'v-time-picker-title__ampm--readonly': this.ampmReadonly,
         },
@@ -70,13 +69,13 @@ export default mixins(
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const children = [this.genTime()]
 
     this.ampm && children.push(this.genAmPm())
 
     return h('div', {
-      class: 'v-time-picker-title',
+      staticClass: 'v-time-picker-title',
     }, children)
   },
 })

package/src/components/VTimeline/VTimeline.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VTimeline.sass'
 
@@ -37,9 +36,10 @@ export default mixins(
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h('div', {
-      class: ['v-timeline', this.classes],
+      staticClass: 'v-timeline',
+      class: this.classes,
     }, getSlot(this))
   },
 })

package/src/components/VTimeline/VTimelineItem.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Types
 import mixins, { ExtractVue } from '../../util/mixins'
 import { VNode, VNodeData } from 'vue'
@@ -11,7 +10,6 @@ import VIcon from '../VIcon'
 import Themeable from '../../mixins/themeable'
 import Colorable from '../../mixins/colorable'
 import { getSlot } from '../../util/helpers'
-import mergeData from '../../util/mergeData'
 
 const baseMixins = mixins(
   Colorable,
@@ -25,7 +23,7 @@ interface options extends ExtractVue<typeof baseMixins> {
   timeline: VTimelineInstance
 }
 
-export default baseMixins.extend({
+export default baseMixins.extend<options>().extend({
   name: 'v-timeline-item',
 
   inject: ['timeline'],
@@ -53,30 +51,34 @@ export default baseMixins.extend({
 
   methods: {
     genBody () {
-      return h('div', {
-        class: 'v-timeline-item__body',
+      return this.$createElement('div', {
+        staticClass: 'v-timeline-item__body',
       }, getSlot(this))
     },
     genIcon (): VNode | VNode[] {
-      return getSlot(this, 'icon') || h(VIcon, {
-        color: this.iconColor,
-        dark: !this.theme.isDark,
-        small: this.small
+      return getSlot(this, 'icon') || this.$createElement(VIcon, {
+        props: {
+          color: this.iconColor,
+          dark: !this.theme.isDark,
+          small: this.small,
+        },
       }, this.icon)
     },
     genInnerDot () {
       const data: VNodeData = this.setBackgroundColor(this.color)
 
-      return h('div', mergeData({
-        class: 'v-timeline-item__inner-dot',
-      }, data), [this.hasIcon && this.genIcon()])
+      return this.$createElement('div', {
+        staticClass: 'v-timeline-item__inner-dot',
+        ...data,
+      }, [this.hasIcon && this.genIcon()])
     },
     genDot () {
-      return h('div', {
-        class: ['v-timeline-item__dot', {
+      return this.$createElement('div', {
+        staticClass: 'v-timeline-item__dot',
+        class: {
           'v-timeline-item__dot--small': this.small,
           'v-timeline-item__dot--large': this.large,
-        }],
+        },
       }, [this.genInnerDot()])
     },
     genDivider () {
@@ -84,18 +86,18 @@ export default baseMixins.extend({
 
       if (!this.hideDot) children.push(this.genDot())
 
-      return h('div', {
-        class: 'v-timeline-item__divider',
+      return this.$createElement('div', {
+        staticClass: 'v-timeline-item__divider',
       }, children)
     },
     genOpposite () {
-      return h('div', {
-        class: 'v-timeline-item__opposite',
+      return this.$createElement('div', {
+        staticClass: 'v-timeline-item__opposite',
       }, getSlot(this, 'opposite'))
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const children = [
       this.genBody(),
       this.genDivider(),
@@ -104,12 +106,13 @@ export default baseMixins.extend({
     if (this.$slots.opposite) children.push(this.genOpposite())
 
     return h('div', {
-      class: ['v-timeline-item', {
+      staticClass: 'v-timeline-item',
+      class: {
         'v-timeline-item--fill-dot': this.fillDot,
         'v-timeline-item--before': this.timeline.reverse ? this.right : this.left,
         'v-timeline-item--after': this.timeline.reverse ? this.left : this.right,
         ...this.themeClasses,
-      }],
+      },
     }, children)
   },
 })

package/src/components/VToolbar/VToolbar.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VToolbar.sass'
 
@@ -13,12 +12,11 @@ import { convertToUnit, getSlot } from '../../util/helpers'
 import { breaking } from '../../util/console'
 
 // Types
-import { VNode, PropType, defineComponent } from 'vue'
+import { VNode, PropType } from 'vue'
 
 /* @vue/component */
-export default defineComponent({
+export default VSheet.extend({
   name: 'v-toolbar',
-  extends: VSheet,
 
   props: {
     absolute: Boolean,
@@ -71,7 +69,7 @@ export default defineComponent({
     },
     classes (): object {
       return {
-        ...VSheet.computed.classes.call(this),
+        ...VSheet.options.computed.classes.call(this),
         'v-toolbar': true,
         'v-toolbar--absolute': this.absolute,
         'v-toolbar--bottom': this.bottom,
@@ -124,25 +122,25 @@ export default defineComponent({
         src: this.src,
       }
 
-      const image = this.$slots.img
-        ? this.$slots.img({ props })
-        : h(VImg, { props })
+      const image = this.$scopedSlots.img
+        ? this.$scopedSlots.img({ props })
+        : this.$createElement(VImg, { props })
 
-      return h('div', {
-        class: 'v-toolbar__image',
+      return this.$createElement('div', {
+        staticClass: 'v-toolbar__image',
       }, [image])
     },
     genContent () {
-      return h('div', {
-        class: 'v-toolbar__content',
+      return this.$createElement('div', {
+        staticClass: 'v-toolbar__content',
         style: {
           height: convertToUnit(this.computedContentHeight),
         },
       }, getSlot(this))
     },
     genExtension () {
-      return h('div', {
-        class: 'v-toolbar__extension',
+      return this.$createElement('div', {
+        staticClass: 'v-toolbar__extension',
         style: {
           height: convertToUnit(this.extensionHeight),
         },
@@ -150,8 +148,8 @@ export default defineComponent({
     },
   },
 
-  render (): VNode {
-    this.isExtended = this.extended || !!this.$slots.extension
+  render (h): VNode {
+    this.isExtended = this.extended || !!this.$scopedSlots.extension
 
     const children = [this.genContent()]
     const data = this.setBackgroundColor(this.color, {
@@ -161,7 +159,7 @@ export default defineComponent({
     })
 
     if (this.isExtended) children.push(this.genExtension())
-    if (this.src || this.$slots.img) children.unshift(this.genBackground())
+    if (this.src || this.$scopedSlots.img) children.unshift(this.genBackground())
 
     return h(this.tag, data, children)
   },

package/src/components/VTooltip/VTooltip.ts

@@ -1,4 +1,3 @@
-import {h, Transition} from 'vue'
 import './VTooltip.sass'
 
 // Mixins
@@ -159,7 +158,7 @@ export default mixins(Colorable, Delayable, Dependent, Menuable).extend({
       this.runDelay('close')
     },
     genActivatorListeners () {
-      const listeners = Activatable.methods.genActivatorListeners.call(this)
+      const listeners = Activatable.options.methods.genActivatorListeners.call(this)
 
       if (this.openOnFocus) {
         listeners.focus = (e: Event) => {
@@ -192,19 +191,22 @@ export default mixins(Colorable, Delayable, Dependent, Menuable).extend({
 
       if (!this.computedTransition) return content
 
-      return h(Transition, {
-        name: this.computedTransition,
+      return this.$createElement('transition', {
+        props: {
+          name: this.computedTransition,
+        },
       }, [content])
     },
     genContent () {
-      return h(
+      return this.$createElement(
         'div',
         this.setBackgroundColor(this.color, {
-          class: ['v-tooltip__content', {
+          staticClass: 'v-tooltip__content',
+          class: {
             [this.contentClass]: true,
             menuable__content__active: this.isActive,
             'v-tooltip__content--fixed': this.activatorFixed,
-          }],
+          },
           style: this.styles,
           attrs: this.getScopeIdAttrs(),
           directives: [{
@@ -218,9 +220,10 @@ export default mixins(Colorable, Delayable, Dependent, Menuable).extend({
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h(this.tag, {
-      class: ['v-tooltip', this.classes],
+      staticClass: 'v-tooltip',
+      class: this.classes,
     }, [
       this.showLazyContent(() => [this.genTransition()]),
       this.genActivator(),

package/src/components/VTreeview/VTreeview.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VTreeview.sass'
 
@@ -313,7 +312,6 @@ export default mixins(
     },
     register (node: VTreeviewNodeInstance) {
       const key = getObjectValueByPath(node.item, this.itemKey)
-
       this.nodes[key].vnode = node
 
       this.updateVnodeState(key)
@@ -416,12 +414,12 @@ export default mixins(
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const children: VNodeChildrenArrayContents = this.items.length
       ? this.items.filter(item => {
         return !this.isExcluded(getObjectValueByPath(item, this.itemKey))
       }).map(item => {
-        const genChild = VTreeviewNode.methods.genChild.bind(this)
+        const genChild = VTreeviewNode.options.methods.genChild.bind(this)
 
         return genChild(item, this.disabled || getObjectValueByPath(item, this.itemDisabled))
       })
@@ -429,11 +427,12 @@ export default mixins(
       : this.$slots.default! // TODO: remove type annotation with TS 3.2
 
     return h('div', {
-      class: ['v-treeview', {
+      staticClass: 'v-treeview',
+      class: {
         'v-treeview--hoverable': this.hoverable,
         'v-treeview--dense': this.dense,
         ...this.themeClasses,
-      }],
+      },
     }, children)
   },
 })