@dimailn/vuetify 2.7.2-alpha0 → 2.7.2-superbundle

package/src/components/VSparkline/VSparkline.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Mixins
 import Colorable from '../../mixins/colorable'
 
@@ -185,7 +184,7 @@ export default mixins<options &
       return Boolean(
         this.showLabels ||
         this.labels.length > 0 ||
-        this.$slots.label
+        this.$scopedSlots.label
       )
     },
     parsedLabels (): SparklineText[] {
@@ -273,7 +272,7 @@ export default mixins<options &
 
       const len = Math.max(gradient.length - 1, 1)
       const stops = gradient.reverse().map((color, index) =>
-        h('stop', {
+        this.$createElement('stop', {
           attrs: {
             offset: index / len,
             'stop-color': color || 'currentColor',
@@ -281,8 +280,8 @@ export default mixins<options &
         })
       )
 
-      return h('defs', [
-        h('linearGradient', {
+      return this.$createElement('defs', [
+        this.$createElement('linearGradient', {
           attrs: {
             id: this._uid,
             gradientUnits: 'userSpaceOnUse',
@@ -295,7 +294,7 @@ export default mixins<options &
       ])
     },
     genG (children: VNode[]) {
-      return h('g', {
+      return this.$createElement('g', {
         style: {
           fontSize: '8',
           textAnchor: 'middle',
@@ -307,7 +306,7 @@ export default mixins<options &
     genPath () {
       const points = genPoints(this.normalizedValues, this.boundary)
 
-      return h('path', {
+      return this.$createElement('path', {
         attrs: {
           d: genPath(points, this._radius, this.fill, this.parsedHeight),
           fill: this.fill ? `url(#${this._uid})` : 'none',
@@ -318,7 +317,7 @@ export default mixins<options &
     },
     genLabels (offsetX: number) {
       const children = this.parsedLabels.map((item, i) => (
-        h('text', {
+        this.$createElement('text', {
           attrs: {
             x: item.x + offsetX + this._lineWidth / 2,
             y: this.textY + (this.parsedLabelSize * 0.75),
@@ -330,8 +329,8 @@ export default mixins<options &
       return this.genG(children)
     },
     genLabel (item: SparklineText, index: number) {
-      return this.$slots.label
-        ? this.$slots.label({ index, value: item.value })
+      return this.$scopedSlots.label
+        ? this.$scopedSlots.label({ index, value: item.value })
         : item.value
     },
     genBars () {
@@ -340,7 +339,7 @@ export default mixins<options &
       const bars = genBars(this.normalizedValues, this.boundary)
       const offsetX = (Math.abs(bars[0].x - bars[1].x) - this._lineWidth) / 2
 
-      return h('svg', {
+      return this.$createElement('svg', {
         attrs: {
           display: 'block',
           viewBox: `0 0 ${this.totalWidth} ${this.totalHeight}`,
@@ -349,13 +348,13 @@ export default mixins<options &
         this.genGradient(),
         this.genClipPath(bars, offsetX, this._lineWidth, 'sparkline-bar-' + this._uid),
         this.hasLabels ? this.genLabels(offsetX) : undefined as never,
-        h('g', {
+        this.$createElement('g', {
           attrs: {
             'clip-path': `url(#sparkline-bar-${this._uid}-clip)`,
             fill: `url(#${this._uid})`,
           },
         }, [
-          h('rect', {
+          this.$createElement('rect', {
             attrs: {
               x: 0,
               y: 0,
@@ -371,12 +370,12 @@ export default mixins<options &
         ? this.smooth
         : this.smooth ? 2 : 0
 
-      return h('clipPath', {
+      return this.$createElement('clipPath', {
         attrs: {
           id: `${id}-clip`,
         },
       }, bars.map(item => {
-        return h('rect', {
+        return this.$createElement('rect', {
           attrs: {
             x: item.x + offsetX,
             y: item.y,
@@ -386,7 +385,7 @@ export default mixins<options &
             ry: rounding,
           },
         }, [
-          this.autoDraw ? h('animate', {
+          this.autoDraw ? this.$createElement('animate', {
             attrs: {
               attributeName: 'height',
               from: 0,
@@ -399,7 +398,7 @@ export default mixins<options &
       }))
     },
     genTrend () {
-      return h('svg', this.setTextColor(this.color, {
+      return this.$createElement('svg', this.setTextColor(this.color, {
         attrs: {
           ...this.$attrs,
           display: 'block',
@@ -414,7 +413,7 @@ export default mixins<options &
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     if (this.totalValues < 2) return undefined as never
 
     return this.type === 'trend' ? this.genTrend() : this.genBars()

package/src/components/VSpeedDial/VSpeedDial.ts

@@ -1,4 +1,3 @@
-import {TransitionGroup, h} from 'vue'
 // Styles
 import './VSpeedDial.sass'
 
@@ -53,7 +52,7 @@ export default mixins(Positionable, Toggleable, Transitionable).extend({
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     let children: VNode[] = []
     const data: VNodeData = {
       class: this.classes,
@@ -74,7 +73,7 @@ export default mixins(Positionable, Toggleable, Transitionable).extend({
     if (this.isActive) {
       let btnCount = 0
       children = (getSlot(this) || []).map((b, i) => {
-        if (b.tag && typeof b.componentOptions !== 'undefined' && (b.componentOptions.Ctor.name === 'v-btn' || b.componentOptions.Ctor.name === 'v-tooltip')) {
+        if (b.tag && typeof b.componentOptions !== 'undefined' && (b.componentOptions.Ctor.options.name === 'v-btn' || b.componentOptions.Ctor.options.name === 'v-tooltip')) {
           btnCount++
           return h('div', {
             style: {
@@ -89,12 +88,14 @@ export default mixins(Positionable, Toggleable, Transitionable).extend({
       })
     }
 
-    const list = h(TransitionGroup, {
+    const list = h('transition-group', {
       class: 'v-speed-dial__list',
-      name: this.transition,
-      mode: this.mode,
-      origin: this.origin,
-      tag: 'div',
+      props: {
+        name: this.transition,
+        mode: this.mode,
+        origin: this.origin,
+        tag: 'div',
+      },
     }, children)
 
     return h('div', data, [getSlot(this, 'activator'), list])

package/src/components/VStepper/VStepper.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VStepper.sass'
 
@@ -71,12 +70,12 @@ export default baseMixins.extend({
         'v-stepper--vertical': this.vertical,
         'v-stepper--alt-labels': this.altLabels,
         'v-stepper--non-linear': this.nonLinear,
-        ...VSheet.computed.classes.call(this),
+        ...VSheet.options.computed.classes.call(this),
       }
     },
     styles (): object {
       return {
-        ...VSheet.computed.styles.call(this),
+        ...VSheet.options.computed.styles.call(this),
       }
     },
   },
@@ -132,9 +131,10 @@ export default baseMixins.extend({
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h(this.tag, {
-      class: ['v-stepper', this.classes],
+      staticClass: 'v-stepper',
+      class: this.classes,
       style: this.styles,
     }, getSlot(this))
   },

package/src/components/VStepper/VStepperContent.ts

@@ -1,4 +1,3 @@
-import {h, vShow, withDirectives} from 'vue'
 // Components
 import {
   VTabTransition,
@@ -29,7 +28,7 @@ interface options extends InstanceType<typeof baseMixins> {
 }
 
 /* @vue/component */
-export default baseMixins.extend({
+export default baseMixins.extend<options>().extend({
   name: 'v-stepper-content',
 
   inject: {
@@ -139,12 +138,12 @@ export default baseMixins.extend({
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const contentData = {
-      class: 'v-stepper__content',
+      staticClass: 'v-stepper__content',
     } as VNodeData
     const wrapperData = {
-      class: 'v-stepper__wrapper',
+      staticClass: 'v-stepper__wrapper',
       style: this.styles,
       ref: 'wrapper',
     }
@@ -157,17 +156,10 @@ export default baseMixins.extend({
     }
 
     const wrapper = h('div', wrapperData, getSlot(this))
-    const content = withDirectives(
-      h('div', contentData, [wrapper]), this.isVertical ? [] :
-      [
-        [
-          vShow,
-          this.isActive
-        ]
-      ])
+    const content = h('div', contentData, [wrapper])
 
     return h(this.computedTransition, {
-      ...this.$listeners,
+      on: this.$listeners,
     }, [content])
   },
 })

package/src/components/VStepper/VStepperStep.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Components
 import VIcon from '../VIcon'
 
@@ -28,7 +27,7 @@ interface options extends InstanceType<typeof baseMixins> {
   stepClick: (step: number | string) => void
 }
 /* @vue/component */
-export default baseMixins.extend({
+export default baseMixins.extend<options>().extend({
   name: 'v-stepper-step',
 
   directives: { ripple },
@@ -102,18 +101,18 @@ export default baseMixins.extend({
       }
     },
     genIcon (icon: string) {
-      return h(VIcon, icon)
+      return this.$createElement(VIcon, icon)
     },
     genLabel () {
-      return h('div', {
-        class: 'v-stepper__label',
+      return this.$createElement('div', {
+        staticClass: 'v-stepper__label',
       }, getSlot(this))
     },
     genStep () {
       const color = (!this.hasError && (this.complete || this.isActive)) ? this.color : false
 
-      return h('span', this.setBackgroundColor(color, {
-        class: 'v-stepper__step__step',
+      return this.$createElement('span', this.setBackgroundColor(color, {
+        staticClass: 'v-stepper__step__step',
       }), this.genStepContent())
     },
     genStepContent () {
@@ -144,12 +143,12 @@ export default baseMixins.extend({
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h('div', {
       attrs: {
         tabindex: this.editable ? 0 : -1,
       },
-      class: 'v-stepper__step',
+      staticClass: 'v-stepper__step',
       class: this.classes,
       directives: [{
         name: 'ripple',

package/src/components/VSubheader/VSubheader.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VSubheader.sass'
 
@@ -20,14 +19,15 @@ export default mixins(
     inset: Boolean,
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h('div', {
-      class: ['v-subheader', {
+      staticClass: 'v-subheader',
+      class: {
         'v-subheader--inset': this.inset,
         ...this.themeClasses,
-      }],
-      ...this.$attrs,
-      ...this.$listeners
+      },
+      attrs: this.$attrs,
+      on: this.$listeners,
     }, getSlot(this))
   },
 })

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

@@ -21,7 +21,7 @@ describe('VSubheader.ts', () => {
 
   it('should have custom class', () => {
     const wrapper = mount({
-      render: h => h(VSubheader, { class: 'foo' }),
+      render: h => h(VSubheader, { staticClass: 'foo' }),
     })
 
     expect(wrapper.element.classList.contains('foo')).toBe(true)

package/src/components/VSwitch/VSwitch.ts

@@ -17,17 +17,14 @@ import VProgressCircular from '../VProgressCircular/VProgressCircular'
 import { getSlot, keyCodes } from '../../util/helpers'
 
 // Types
-import { defineComponent, VNode, VNodeData, h } from 'vue'
-import mergeData from '../../util/mergeData'
+import { VNode, VNodeData } from 'vue'
 
 /* @vue/component */
-export default defineComponent({
+export default Selectable.extend({
   name: 'v-switch',
 
   directives: { Touch },
 
-  extends: Selectable,
-
   props: {
     inset: Boolean,
     loading: {
@@ -43,7 +40,7 @@ export default defineComponent({
   computed: {
     classes (): object {
       return {
-        ...VInput.computed.classes.call(this),
+        ...VInput.options.computed.classes.call(this),
         'v-input--selection-controls v-input--switch': true,
         'v-input--switch--flat': this.flat,
         'v-input--switch--inset': this.inset,
@@ -82,44 +79,45 @@ export default defineComponent({
     genSwitch (): VNode {
       const { title, ...switchAttrs } = this.attrs$
 
-      return h('div', {
-        class: 'v-input--selection-controls__input',
+      return this.$createElement('div', {
+        staticClass: 'v-input--selection-controls__input',
       }, [
         this.genInput('checkbox', {
           ...this.attrs,
           ...switchAttrs,
         }),
         this.genRipple(this.setTextColor(this.validationState, {
-          directives: [[
-            Touch,
-            {
+          directives: [{
+            name: 'touch',
+            value: {
               left: this.onSwipeLeft,
               right: this.onSwipeRight,
             },
-          ]],
+          }],
         })),
-
-        h('div', mergeData({
-          class: 'v-input--switch__track' },
-          this.switchData,
-        )),
-        h('div', mergeData({
-          class: 'v-input--switch__thumb'},
-          this.switchData,
-        ), [this.genProgress()]),
+        this.$createElement('div', {
+          staticClass: 'v-input--switch__track',
+          ...this.switchData,
+        }),
+        this.$createElement('div', {
+          staticClass: 'v-input--switch__thumb',
+          ...this.switchData,
+        }, [this.genProgress()]),
       ])
     },
     genProgress (): VNode {
-      return h(VFabTransition, {}, [
+      return this.$createElement(VFabTransition, {}, [
         this.loading === false
           ? null
-          : getSlot(this, 'progress') || h(VProgressCircular, {
-            color: (this.loading === true || this.loading === '')
-              ? (this.color || 'primary')
-              : this.loading,
-            size: 16,
-            width: 2,
-            indeterminate: true,
+          : getSlot(this, 'progress') || this.$createElement(VProgressCircular, {
+            props: {
+              color: (this.loading === true || this.loading === '')
+                ? (this.color || 'primary')
+                : this.loading,
+              size: 16,
+              width: 2,
+              indeterminate: true,
+            },
           }),
       ])
     },

package/src/components/VSystemBar/VSystemBar.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VSystemBar.sass'
 
@@ -63,9 +62,9 @@ export default mixins(
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const data = {
-      class: 'v-system-bar',
+      staticClass: 'v-system-bar',
       class: this.classes,
       style: this.styles,
       on: this.$listeners,

package/src/components/VTabs/VTab.ts

@@ -1,4 +1,3 @@
-import {h, withDirectives} from 'vue'
 // Mixins
 import { factory as GroupableFactory } from '../../mixins/groupable'
 import Routable from '../../mixins/routable'
@@ -30,7 +29,9 @@ interface options extends ExtractVue<typeof baseMixins> {
   tabsBar: VTabBarInstance
 }
 
-export default baseMixins.extend({
+export default baseMixins.extend<options>().extend(
+  /* @vue/component */
+).extend({
   name: 'v-tab',
 
   props: {
@@ -51,7 +52,7 @@ export default baseMixins.extend({
     classes (): object {
       return {
         'v-tab': true,
-        ...Routable.computed.classes.call(this),
+        ...Routable.options.computed.classes.call(this),
         'v-tab--disabled': this.disabled,
         ...this.groupClasses,
       }
@@ -106,29 +107,28 @@ export default baseMixins.extend({
       // VItemGroup treats a change event as a click
       if (!this.isActive || (!this.tabsBar.mandatory && !this.to)) {
         this.$emit('change')
-        this.$emitLegacy('change')
       }
     },
   },
 
-  render (): VNode {
-    let { tag, data, directives } = this.generateRouteLink()
+  render (h): VNode {
+    const { tag, data } = this.generateRouteLink()
 
-    data = {
-      ...data
+    data.attrs = {
+      ...data.attrs,
       'aria-selected': String(this.isActive),
       role: 'tab',
       tabindex: this.disabled ? -1 : 0,
-      onKeydown: (e: KeyboardEvent) => {
+    }
+    data.on = {
+      ...data.on,
+      keydown: (e: KeyboardEvent) => {
         if (e.keyCode === keyCodes.enter) this.click(e)
 
         this.$emit('keydown', e)
-      }
+      },
     }
 
-    return withDirectives(
-      h(tag, data, getSlot(this)),
-      directives
-    )
+    return h(tag, data, getSlot(this))
   },
 })

package/src/components/VTabs/VTabItem.ts

@@ -1,22 +1,20 @@
 // Extensions
-import { defineComponent } from 'vue'
 import VWindowItem from '../VWindow/VWindowItem'
 
 /* @vue/component */
-export default defineComponent({
+export default VWindowItem.extend({
   name: 'v-tab-item',
 
-  extends: VWindowItem,
-
   props: {
     id: String,
   },
 
   methods: {
     genWindowItem () {
-      const item = VWindowItem.methods.genWindowItem.call(this)
+      const item = VWindowItem.options.methods.genWindowItem.call(this)
 
-      item.id = this.id || this.value
+      item.data!.domProps = item.data!.domProps || {}
+      item.data!.domProps.id = this.id || this.value
 
       return item
     },