@dimailn/vuetify 2.7.2-alpha2 → 2.7.2-superbundle

package/src/components/VParallax/VParallax.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Style
 import './VParallax.sass'
 
@@ -20,7 +19,7 @@ interface options extends InstanceType<typeof baseMixins> {
 }
 
 /* @vue/component */
-export default baseMixins.extend({
+export default baseMixins.extend<options>().extend({
   name: 'v-parallax',
 
   props: {
@@ -77,32 +76,34 @@ export default baseMixins.extend({
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const imgData: VNodeData = {
-      class: 'v-parallax__image',
+      staticClass: 'v-parallax__image',
       style: this.styles,
-      src: this.src,
-      srcset: this.srcset,
-      alt: this.alt,
+      attrs: {
+        src: this.src,
+        srcset: this.srcset,
+        alt: this.alt,
+      },
       ref: 'img',
     }
 
     const container = h('div', {
-      class: 'v-parallax__image-container',
+      staticClass: 'v-parallax__image-container',
     }, [
       h('img', imgData),
     ])
 
     const content = h('div', {
-      class: 'v-parallax__content',
+      staticClass: 'v-parallax__content',
     }, getSlot(this))
 
     return h('div', {
-      class: 'v-parallax',
+      staticClass: 'v-parallax',
       style: {
         height: `${this.height}px`,
       },
-      ...this.$listeners,
+      on: this.$listeners,
     }, [container, content])
   },
 })

package/src/components/VPicker/VPicker.ts

@@ -1,4 +1,3 @@
-import {h, Transition} from 'vue'
 import './VPicker.sass'
 import '../VCard/VCard.sass'
 
@@ -46,23 +45,27 @@ export default mixins(
 
   methods: {
     genTitle () {
-      return h('div', this.setBackgroundColor(this.computedTitleColor, {
-        class: ['v-picker__title', {
+      return this.$createElement('div', this.setBackgroundColor(this.computedTitleColor, {
+        staticClass: 'v-picker__title',
+        class: {
           'v-picker__title--landscape': this.landscape,
-        }],
+        },
       }), getSlot(this, 'title'))
     },
     genBodyTransition () {
-      return h(Transition, {
-        name: this.transition,
+      return this.$createElement('transition', {
+        props: {
+          name: this.transition,
+        },
       }, getSlot(this))
     },
     genBody () {
-      return h('div', {
-        class: ['v-picker__body', {
+      return this.$createElement('div', {
+        staticClass: 'v-picker__body',
+        class: {
           'v-picker__body--no-title': this.noTitle,
           ...this.themeClasses,
-        }],
+        },
         style: this.fullWidth ? undefined : {
           width: convertToUnit(this.width),
         },
@@ -71,23 +74,25 @@ export default mixins(
       ])
     },
     genActions () {
-      return h('div', {
-        class: ['v-picker__actions v-card__actions', {
+      return this.$createElement('div', {
+        staticClass: 'v-picker__actions v-card__actions',
+        class: {
           'v-picker__actions--no-title': this.noTitle,
-        }],
+        },
       }, getSlot(this, 'actions'))
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h('div', {
-      class: ['v-picker v-card', {
+      staticClass: 'v-picker v-card',
+      class: {
         'v-picker--flat': this.flat,
         'v-picker--landscape': this.landscape,
         'v-picker--full-width': this.fullWidth,
         ...this.themeClasses,
         ...this.elevationClasses,
-      }],
+      },
     }, [
       this.$slots.title ? this.genTitle() : null,
       this.genBody(),

package/src/components/VProgressCircular/VProgressCircular.ts

@@ -1,9 +1,8 @@
-import {h, withDirectives} from 'vue'
 // Styles
 import './VProgressCircular.sass'
 
 // Directives
-import intersect, { Intersect } from '../../directives/intersect'
+import intersect from '../../directives/intersect'
 
 // Mixins
 import Colorable from '../../mixins/colorable'
@@ -12,14 +11,12 @@ import Colorable from '../../mixins/colorable'
 import { convertToUnit, getSlot } from '../../util/helpers'
 
 // Types
-import { VNode, VNodeChildren, defineComponent } from 'vue'
+import { VNode, VNodeChildren } from 'vue'
 
 /* @vue/component */
-export default defineComponent({
+export default Colorable.extend({
   name: 'v-progress-circular',
 
-  extends: Colorable,
-
   directives: { intersect },
 
   props: {
@@ -109,15 +106,17 @@ export default defineComponent({
 
   methods: {
     genCircle (name: string, offset: string | number): VNode {
-      return h('circle', {
+      return this.$createElement('circle', {
         class: `v-progress-circular__${name}`,
-        fill: 'transparent',
-        cx: 2 * this.viewBoxSize,
-        cy: 2 * this.viewBoxSize,
-        r: this.radius,
-        'stroke-width': this.strokeWidth,
-        'stroke-dasharray': this.strokeDashArray,
-        'stroke-dashoffset': offset,
+        attrs: {
+          fill: 'transparent',
+          cx: 2 * this.viewBoxSize,
+          cy: 2 * this.viewBoxSize,
+          r: this.radius,
+          'stroke-width': this.strokeWidth,
+          'stroke-dasharray': this.strokeDashArray,
+          'stroke-dashoffset': offset,
+        },
       })
     },
     genSvg (): VNode {
@@ -126,15 +125,17 @@ export default defineComponent({
         this.genCircle('overlay', this.strokeDashOffset),
       ] as VNodeChildren
 
-      return h('svg', {
+      return this.$createElement('svg', {
         style: this.svgStyles,
-        xmlns: 'http://www.w3.org/2000/svg',
-        viewBox: `${this.viewBoxSize} ${this.viewBoxSize} ${2 * this.viewBoxSize} ${2 * this.viewBoxSize}`,
+        attrs: {
+          xmlns: 'http://www.w3.org/2000/svg',
+          viewBox: `${this.viewBoxSize} ${this.viewBoxSize} ${2 * this.viewBoxSize} ${2 * this.viewBoxSize}`,
+        },
       }, children)
     },
     genInfo (): VNode {
-      return h('div', {
-        class: 'v-progress-circular__info',
+      return this.$createElement('div', {
+        staticClass: 'v-progress-circular__info',
       }, getSlot(this))
     },
     onObserve (entries: IntersectionObserverEntry[], observer: IntersectionObserver, isIntersecting: boolean) {
@@ -142,23 +143,25 @@ export default defineComponent({
     },
   },
 
-  render (): VNode {
-    return withDirectives(h('div', this.setTextColor(this.color, {
-      class: ['v-progress-circular', this.classes],
-      role: 'progressbar',
-      'aria-valuemin': 0,
-      'aria-valuemax': 100,
-      'aria-valuenow': this.indeterminate ? undefined : this.normalizedValue,
+  render (h): VNode {
+    return h('div', this.setTextColor(this.color, {
+      staticClass: 'v-progress-circular',
+      attrs: {
+        role: 'progressbar',
+        'aria-valuemin': 0,
+        'aria-valuemax': 100,
+        'aria-valuenow': this.indeterminate ? undefined : this.normalizedValue,
+      },
+      class: this.classes,
+      directives: [{
+        name: 'intersect',
+        value: this.onObserve,
+      }],
       style: this.styles,
-      ...this.$listeners,
+      on: this.$listeners,
     }), [
       this.genSvg(),
       this.genInfo(),
-    ]), [
-      [
-        Intersect,
-        this.onObserve
-      ]
     ])
   },
 })

package/src/components/VProgressLinear/VProgressLinear.ts

@@ -1,4 +1,3 @@
-import {h, withDirectives} from 'vue'
 import './VProgressLinear.sass'
 
 // Components
@@ -8,7 +7,7 @@ import {
 } from '../transitions'
 
 // Directives
-import intersect, { Intersect } from '../../directives/intersect'
+import intersect from '../../directives/intersect'
 
 // Mixins
 import Colorable from '../../mixins/colorable'
@@ -83,38 +82,37 @@ export default baseMixins.extend({
 
   computed: {
     __cachedBackground (): VNode {
-      return h('div', this.setBackgroundColor(this.backgroundColor || this.color, {
-        class: 'v-progress-linear__background',
+      return this.$createElement('div', this.setBackgroundColor(this.backgroundColor || this.color, {
+        staticClass: 'v-progress-linear__background',
         style: this.backgroundStyle,
       }))
     },
     __cachedBar (): VNode {
-      return h(this.computedTransition, [this.__cachedBarType])
+      return this.$createElement(this.computedTransition, [this.__cachedBarType])
     },
     __cachedBarType (): VNode {
       return this.indeterminate ? this.__cachedIndeterminate : this.__cachedDeterminate
     },
     __cachedBuffer (): VNode {
-      return h('div', {
-        class: 'v-progress-linear__buffer',
+      return this.$createElement('div', {
+        staticClass: 'v-progress-linear__buffer',
         style: this.styles,
       })
     },
     __cachedDeterminate (): VNode {
-      return h('div', this.setBackgroundColor(this.color, {
-        class: `v-progress-linear__determinate`,
+      return this.$createElement('div', this.setBackgroundColor(this.color, {
+        staticClass: `v-progress-linear__determinate`,
         style: {
           width: convertToUnit(this.normalizedValue, '%'),
         },
       }))
     },
     __cachedIndeterminate (): VNode {
-      return h('div', {
-        class: ['v-progress-linear__indeterminate',
-          {
-            'v-progress-linear__indeterminate--active': this.active,
-          }
-        ]
+      return this.$createElement('div', {
+        staticClass: 'v-progress-linear__indeterminate',
+        class: {
+          'v-progress-linear__indeterminate--active': this.active,
+        },
       }, [
         this.genProgressBar('long'),
         this.genProgressBar('short'),
@@ -123,8 +121,8 @@ export default baseMixins.extend({
     __cachedStream (): VNode | null {
       if (!this.stream) return null
 
-      return h('div', this.setTextColor(this.color, {
-        class: 'v-progress-linear__stream',
+      return this.$createElement('div', this.setTextColor(this.color, {
+        staticClass: 'v-progress-linear__stream',
         style: {
           width: convertToUnit(100 - this.normalizedBuffer, '%'),
         },
@@ -190,26 +188,25 @@ export default baseMixins.extend({
 
       if (!slot) return null
 
-      return h('div', {
-        class: 'v-progress-linear__content',
+      return this.$createElement('div', {
+        staticClass: 'v-progress-linear__content',
       }, slot)
     },
     genListeners () {
       const listeners = this.$listeners
 
       if (this.reactive) {
-        listeners.onClick = this.onClick
+        listeners.click = this.onClick
       }
 
       return listeners
     },
     genProgressBar (name: 'long' | 'short') {
-      return h('div', this.setBackgroundColor(this.color, {
-        class: ['v-progress-linear__indeterminate',
-          {
-            [name]: true,
-          }
-        ]
+      return this.$createElement('div', this.setBackgroundColor(this.color, {
+        staticClass: 'v-progress-linear__indeterminate',
+        class: {
+          [name]: true,
+        },
       }))
     },
     onClick (e: MouseEvent) {
@@ -229,34 +226,34 @@ export default baseMixins.extend({
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const data = {
-      class: ['v-progress-linear', this.classes],
+      staticClass: 'v-progress-linear',
       attrs: {
         role: 'progressbar',
         'aria-valuemin': 0,
         'aria-valuemax': this.normalizedBuffer,
         'aria-valuenow': this.indeterminate ? undefined : this.normalizedValue,
       },
+      class: this.classes,
+      directives: [{
+        name: 'intersect',
+        value: this.onObserve,
+      }],
       style: {
         bottom: this.bottom ? 0 : undefined,
         height: this.active ? convertToUnit(this.height) : 0,
         top: this.top ? 0 : undefined,
       },
-      ...this.genListeners(),
+      on: this.genListeners(),
     }
 
-    return withDirectives(h('div', data, [
+    return h('div', data, [
       this.__cachedStream,
       this.__cachedBackground,
       this.__cachedBuffer,
       this.__cachedBar,
       this.genContent(),
-    ]), [
-      [
-        Intersect,
-        this.onObserve
-      ]
     ])
   },
 })

package/src/components/VRadioGroup/VRadio.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VRadio.sass'
 
@@ -37,7 +36,7 @@ interface options extends InstanceType<typeof baseMixins> {
 }
 
 /* @vue/component */
-export default baseMixins.extend({
+export default baseMixins.extend<options>().extend({
   name: 'v-radio',
 
   inheritAttrs: false,
@@ -82,7 +81,7 @@ export default baseMixins.extend({
     },
     computedColor (): string | undefined {
       if (this.isDisabled) return undefined
-      return Selectable.computed.computedColor.call(this)
+      return Selectable.options.computed.computedColor.call(this)
     },
     computedIcon (): string {
       return this.isActive
@@ -90,9 +89,9 @@ export default baseMixins.extend({
         : this.offIcon
     },
     computedId (): string {
-      return VInput.computed.computedId.call(this)
+      return VInput.options.computed.computedId.call(this)
     },
-    hasLabel: VInput.computed.hasLabel,
+    hasLabel: VInput.options.computed.hasLabel,
     hasState (): boolean {
       return (this.radioGroup || {}).hasState
     },
@@ -113,10 +112,10 @@ export default baseMixins.extend({
         return this.name
       }
 
-      return this.radioGroup.name || `radio-${this.radioGroup.$.uid}`
+      return this.radioGroup.name || `radio-${this.radioGroup._uid}`
     },
     rippleState (): string | undefined {
-      return Selectable.computed.rippleState.call(this)
+      return Selectable.options.computed.rippleState.call(this)
     },
     validationState (): string | undefined {
       return (this.radioGroup || {}).validationState || this.computedColor
@@ -128,27 +127,35 @@ export default baseMixins.extend({
       // We can't actually use the mixin directly because
       // it's made for standalone components, but its
       // genInput method is exactly what we need
-      return Selectable.methods.genInput.call(this, 'radio', args)
+      return Selectable.options.methods.genInput.call(this, 'radio', args)
     },
     genLabel () {
       if (!this.hasLabel) return null
 
-      return h(VLabel, {
-        // Label shouldn't cause the input to focus
-        onClick: prevent,
-        for: this.computedId,
-        color: this.validationState,
-        focused: this.hasState,
+      return this.$createElement(VLabel, {
+        on: {
+          // Label shouldn't cause the input to focus
+          click: prevent,
+        },
+        attrs: {
+          for: this.computedId,
+        },
+        props: {
+          color: this.validationState,
+          focused: this.hasState,
+        },
       }, getSlot(this, 'label') || this.label)
     },
     genRadio () {
       const { title, ...radioAttrs } = this.attrs$
 
-      return h('div', {
-        class: 'v-input--selection-controls__input',
+      return this.$createElement('div', {
+        staticClass: 'v-input--selection-controls__input',
       }, [
-        h(VIcon, this.setTextColor(this.validationState, {
-          dense: this.radioGroup && this.radioGroup.dense,
+        this.$createElement(VIcon, this.setTextColor(this.validationState, {
+          props: {
+            dense: this.radioGroup && this.radioGroup.dense,
+          },
         }), this.computedIcon),
         this.genInput({
           name: this.computedName,
@@ -174,13 +181,14 @@ export default baseMixins.extend({
     onKeydown: () => {}, // Override default with noop
   },
 
-  render (): VNode {
+  render (h): VNode {
     const data: VNodeData = {
-      class: ['v-radio', this.classes],
-      ...mergeListeners({
-        onClick: this.onChange,
+      staticClass: 'v-radio',
+      class: this.classes,
+      on: mergeListeners({
+        click: this.onChange,
       }, this.listeners$),
-      title: this.attrs$.title
+      attrs: { title: this.attrs$.title },
     }
 
     return h('div', data, [

package/src/components/VRadioGroup/VRadioGroup.ts

@@ -9,7 +9,6 @@ import { BaseItemGroup } from '../VItemGroup/VItemGroup'
 // Types
 import mixins from '../../util/mixins'
 import { PropType } from 'vue'
-import {h} from 'vue'
 
 const baseMixins = mixins(
   BaseItemGroup,
@@ -46,7 +45,7 @@ export default baseMixins.extend({
   computed: {
     classes (): object {
       return {
-        ...VInput.computed.classes.call(this),
+        ...VInput.options.computed.classes.call(this),
         'v-input--selection-controls v-input--radio-group': true,
         'v-input--radio-group--column': this.column && !this.row,
         'v-input--radio-group--row': this.row,
@@ -56,22 +55,24 @@ export default baseMixins.extend({
 
   methods: {
     genDefaultSlot () {
-      return h('div', {
-        class: 'v-input--radio-group__input',
-        id: this.id,
-        role: 'radiogroup',
-        'aria-labelledby': this.computedId,
-      }, VInput.methods.genDefaultSlot.call(this))
+      return this.$createElement('div', {
+        staticClass: 'v-input--radio-group__input',
+        attrs: {
+          id: this.id,
+          role: 'radiogroup',
+          'aria-labelledby': this.computedId,
+        },
+      }, VInput.options.methods.genDefaultSlot.call(this))
     },
     genInputSlot () {
-      const render = VInput.methods.genInputSlot.call(this)
+      const render = VInput.options.methods.genInputSlot.call(this)
 
-      delete render.props!.onClick
+      delete render.data!.on!.click
 
       return render
     },
     genLabel () {
-      const label = VInput.methods.genLabel.call(this)
+      const label = VInput.options.methods.genLabel.call(this)
 
       if (!label) return null
 
@@ -82,16 +83,13 @@ export default baseMixins.extend({
 
       return label
     },
-    onClick: BaseItemGroup.methods.onClick,
+    onClick: BaseItemGroup.options.methods.onClick,
   },
 
-  render () {
-    const vnode = VInput.render.call(this)
+  render (h) {
+    const vnode = VInput.options.render.call(this, h)
 
-    vnode.props = {
-      ...vnode.props,
-      ...this.attrs$
-    }
+    this._b(vnode.data!, 'div', this.attrs$)
 
     return vnode
   },

package/src/components/VRangeSlider/VRangeSlider.ts

@@ -14,12 +14,10 @@ import {
 
 // Types
 import { PropValidator } from 'vue/types/options'
-import { defineComponent } from 'vue'
 
 /* @vue/component */
-export default defineComponent({
+export default VSlider.extend({
   name: 'v-range-slider',
-  extends: VSlider,
 
   props: {
     value: {
@@ -38,7 +36,7 @@ export default defineComponent({
   computed: {
     classes (): object {
       return {
-        ...VSlider.computed.classes.call(this),
+        ...VSlider.options.computed.classes.call(this),
         'v-input--range-slider': true,
       }
     },
@@ -95,7 +93,7 @@ export default defineComponent({
     },
     genInput () {
       return createRange(2).map(i => {
-        const input = VSlider.methods.genInput.call(this)
+        const input = VSlider.options.methods.genInput.call(this)
 
         input.data = input.data || {}
         input.data.attrs = input.data.attrs || {}
@@ -129,13 +127,13 @@ export default defineComponent({
 
       if (this.$vuetify.rtl) sections.reverse()
 
-      children.push(...sections.map(section => h('div', this.setBackgroundColor(section.color, {
-        class: section.class,
+      children.push(...sections.map(section => this.$createElement('div', this.setBackgroundColor(section.color, {
+        staticClass: section.class,
         style: this.getTrackStyle(...section.styles),
       }))))
 
-      return h('div', {
-        class: 'v-slider__track-container',
+      return this.$createElement('div', {
+        staticClass: 'v-slider__track-container',
         ref: 'track',
       }, children)
     },