@dimailn/vuetify 2.7.2-alpha0 → 2.7.2-superbundle

package/src/components/VCard/VCard.ts

@@ -13,7 +13,7 @@ import mixins from '../../util/mixins'
 import { getSlot } from '../../util/helpers'
 
 // Types
-import { VNode, h, withDirectives } from 'vue'
+import { VNode } from 'vue'
 
 /* @vue/component */
 export default mixins(
@@ -39,19 +39,19 @@ export default mixins(
     classes (): object {
       return {
         'v-card': true,
-        ...Routable.computed.classes.call(this),
+        ...Routable.options.computed.classes.call(this),
         'v-card--flat': this.flat,
         'v-card--hover': this.hover,
         'v-card--link': this.isClickable,
         'v-card--loading': this.loading,
         'v-card--disabled': this.disabled,
         'v-card--raised': this.raised,
-        ...VSheet.computed.classes.call(this),
+        ...VSheet.options.computed.classes.call(this),
       }
     },
     styles (): object {
       const style: Dictionary<string> = {
-        ...VSheet.computed.styles.call(this),
+        ...VSheet.options.computed.styles.call(this),
       }
 
       if (this.img) {
@@ -64,29 +64,30 @@ export default mixins(
 
   methods: {
     genProgress () {
-      const render = Loadable.methods.genProgress.call(this)
+      const render = Loadable.options.methods.genProgress.call(this)
 
       if (!render) return null
 
-      return h('div', {
-        class: 'v-card__progress',
+      return this.$createElement('div', {
+        staticClass: 'v-card__progress',
         key: 'progress',
       }, [render])
     },
   },
 
-  render (): VNode {
-    const { tag, data, directives } = this.generateRouteLink()
+  render (h): VNode {
+    const { tag, data } = this.generateRouteLink()
 
     data.style = this.styles
 
     if (this.isClickable) {
-      data.tabindex = 0
+      data.attrs = data.attrs || {}
+      data.attrs.tabindex = 0
     }
 
-    return withDirectives(h(tag, this.setBackgroundColor(this.color, data), [
+    return h(tag, this.setBackgroundColor(this.color, data), [
       this.genProgress(),
       getSlot(this),
-    ]), directives)
+    ])
   },
 })

package/src/components/VCarousel/VCarousel.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VCarousel.sass'
 
@@ -19,11 +18,10 @@ import { convertToUnit } from '../../util/helpers'
 import { breaking } from '../../util/console'
 
 // Types
-import { VNode, PropType, defineComponent } from 'vue'
+import { VNode, PropType } from 'vue'
 
-export default defineComponent({
+export default VWindow.extend({
   name: 'v-carousel',
-  extends: VWindow,
 
   props: {
     continuous: {
@@ -79,7 +77,7 @@ export default defineComponent({
   computed: {
     classes (): object {
       return {
-        ...VWindow.computed.classes.call(this),
+        ...VWindow.options.computed.classes.call(this),
         'v-carousel': true,
         'v-carousel--hide-delimiter-background': this.hideDelimiterBackground,
         'v-carousel--vertical-delimiters': this.isVertical,
@@ -125,11 +123,11 @@ export default defineComponent({
     genControlIcons () {
       if (this.isVertical) return null
 
-      return VWindow.methods.genControlIcons.call(this)
+      return VWindow.options.methods.genControlIcons.call(this)
     },
     genDelimiters (): VNode {
-      return h('div', {
-        class: 'v-carousel__controls',
+      return this.$createElement('div', {
+        staticClass: 'v-carousel__controls',
         style: {
           left: this.verticalDelimiters === 'left' && this.isVertical ? 0 : 'auto',
           right: this.verticalDelimiters === 'right' ? 0 : 'auto',
@@ -141,35 +139,45 @@ export default defineComponent({
       const children = []
 
       for (let i = 0; i < length; i++) {
-        const child = h(VBtn, {
-          class: 'v-carousel__controls__item',
-          'aria-label': this.$vuetify.lang.t('$vuetify.carousel.ariaLabel.delimiter', i + 1, length),
-          icon: true,
-          small: true,
-          value: this.getValue(this.items[i], i),
+        const child = this.$createElement(VBtn, {
+          staticClass: 'v-carousel__controls__item',
+          attrs: {
+            'aria-label': this.$vuetify.lang.t('$vuetify.carousel.ariaLabel.delimiter', i + 1, length),
+          },
+          props: {
+            icon: true,
+            small: true,
+            value: this.getValue(this.items[i], i),
+          },
           key: i,
         }, [
-          h(VIcon, {
-            size: 18
+          this.$createElement(VIcon, {
+            props: { size: 18 },
           }, this.delimiterIcon),
         ])
 
         children.push(child)
       }
 
-      return h(ButtonGroup, {
-        value: this.internalValue,
-        mandatory: this.mandatory,
-        onChange: (val: unknown) => {
-          this.internalValue = val
-        }
+      return this.$createElement(ButtonGroup, {
+        props: {
+          value: this.internalValue,
+          mandatory: this.mandatory,
+        },
+        on: {
+          change: (val: unknown) => {
+            this.internalValue = val
+          },
+        },
       }, children)
     },
     genProgress () {
-      return h(VProgressLinear, {
-        class: 'v-carousel__progress',
-        color: this.progressColor,
-        value: (this.internalIndex + 1) / this.items.length * 100,
+      return this.$createElement(VProgressLinear, {
+        staticClass: 'v-carousel__progress',
+        props: {
+          color: this.progressColor,
+          value: (this.internalIndex + 1) / this.items.length * 100,
+        },
       })
     },
     restartTimeout () {
@@ -185,10 +193,10 @@ export default defineComponent({
     },
   },
 
-  render (): VNode {
-    const render = VWindow.render.call(this, h)
+  render (h): VNode {
+    const render = VWindow.options.render.call(this, h)
 
-    render.style = `height: ${convertToUnit(this.height)};`
+    render.data!.style = `height: ${convertToUnit(this.height)};`
 
     /* istanbul ignore else */
     if (!this.hideDelimiters) {

package/src/components/VCarousel/VCarouselItem.ts

@@ -8,7 +8,6 @@ import { VImg } from '../VImg'
 import mixins, { ExtractVue } from '../../util/mixins'
 import { getSlot } from '../../util/helpers'
 import Routable from '../../mixins/routable'
-import { vShow, withDirectives, h } from 'vue'
 
 // Types
 const baseMixins = mixins(
@@ -23,7 +22,7 @@ interface options extends ExtractVue<typeof baseMixins> {
 }
 
 /* @vue/component */
-export default baseMixins.extend({
+export default baseMixins.extend<options>().extend({
   name: 'v-carousel-item',
 
   inject: {
@@ -46,28 +45,29 @@ export default baseMixins.extend({
   methods: {
     genDefaultSlot () {
       return [
-        h(VImg, {
-          class: 'v-carousel__item',
-          ...this.$attrs,
-          height: this.windowGroup.internalHeight,
-          ...this.$listeners,
-        }, { default: getSlot(this), placeholder: this.$slots.placeholder }),
+        this.$createElement(VImg, {
+          staticClass: 'v-carousel__item',
+          props: {
+            ...this.$attrs,
+            height: this.windowGroup.internalHeight,
+          },
+          on: this.$listeners,
+          scopedSlots: {
+            placeholder: this.$scopedSlots.placeholder,
+          },
+        }, getSlot(this)),
       ]
     },
     genWindowItem () {
-      const { tag, data, directives } = this.generateRouteLink()
+      const { tag, data } = this.generateRouteLink()
 
-      data.class['v-window-item'] = true
+      data.staticClass = 'v-window-item'
+      data.directives!.push({
+        name: 'show',
+        value: this.isActive,
+      })
 
-      directives!.push([
-        vShow,
-        this.isActive,
-      ])
-
-      return withDirectives(
-        h(tag, data, this.genDefaultSlot()),
-        directives
-      )
+      return this.$createElement(tag, data, this.genDefaultSlot())
     },
   },
 })

package/src/components/VCheckbox/VCheckbox.ts

@@ -8,12 +8,10 @@ import VInput from '../VInput'
 
 // Mixins
 import Selectable from '../../mixins/selectable'
-import { defineComponent, h } from 'vue'
 
 /* @vue/component */
-export default defineComponent({
+export default Selectable.extend({
   name: 'v-checkbox',
-  extends: Selectable,
 
   props: {
     indeterminate: Boolean,
@@ -40,7 +38,7 @@ export default defineComponent({
   computed: {
     classes (): object {
       return {
-        ...VInput.computed.classes.call(this),
+        ...VInput.options.computed.classes.call(this),
         'v-input--selection-controls': true,
         'v-input--checkbox': true,
         'v-input--indeterminate': this.inputIndeterminate,
@@ -84,13 +82,15 @@ export default defineComponent({
   methods: {
     genCheckbox () {
       const { title, ...checkboxAttrs } = 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.dense,
-          dark: this.dark,
-          light: this.light
+        this.$createElement(VIcon, this.setTextColor(this.validationState, {
+          props: {
+            dense: this.dense,
+            dark: this.dark,
+            light: this.light,
+          },
         }), this.computedIcon),
         this.genInput('checkbox', {
           ...checkboxAttrs,

package/src/components/VCheckbox/VSimpleCheckbox.ts

@@ -2,9 +2,7 @@ import './VSimpleCheckbox.sass'
 
 import Ripple from '../../directives/ripple'
 
-import { VNode, VNodeDirective, h } from 'vue'
-import {defineComponent} from 'vue'
-
+import Vue, { VNode, VNodeDirective } from 'vue'
 import { VIcon } from '../VIcon'
 
 // Mixins
@@ -15,7 +13,7 @@ import Themeable from '../../mixins/themeable'
 import mergeData from '../../util/mergeData'
 import { wrapInArray } from '../../util/helpers'
 
-export default defineComponent({
+export default Vue.extend({
   name: 'v-simple-checkbox',
 
   functional: true,
@@ -25,8 +23,8 @@ export default defineComponent({
   },
 
   props: {
-    ...Colorable.props,
-    ...Themeable.props,
+    ...Colorable.options.props,
+    ...Themeable.options.props,
     disabled: Boolean,
     ripple: {
       type: Boolean,
@@ -48,24 +46,23 @@ export default defineComponent({
     },
   },
 
-  render (): VNode {
-    const props = this.$props
-    const data = this.$attrs
-
+  render (h, { props, data, listeners }): VNode {
     const children = []
     let icon = props.offIcon
     if (props.indeterminate) icon = props.indeterminateIcon
     else if (props.value) icon = props.onIcon
 
-    children.push(h(VIcon, Colorable.methods.setTextColor(props.value && props.color, {
-      disabled: props.disabled,
-      dark: props.dark,
-      light: props.light
+    children.push(h(VIcon, Colorable.options.methods.setTextColor(props.value && props.color, {
+      props: {
+        disabled: props.disabled,
+        dark: props.dark,
+        light: props.light,
+      },
     }), icon))
 
     if (props.ripple && !props.disabled) {
-      const ripple = h('div', Colorable.methods.setTextColor(props.color, {
-        class: 'v-input--selection-controls__ripple',
+      const ripple = h('div', Colorable.options.methods.setTextColor(props.color, {
+        staticClass: 'v-input--selection-controls__ripple',
         directives: [{
           def: Ripple,
           name: 'ripple',
@@ -82,15 +79,17 @@ export default defineComponent({
           'v-simple-checkbox': true,
           'v-simple-checkbox--disabled': props.disabled,
         },
-        onClick: (e: MouseEvent) => {
-          e.stopPropagation()
-
-          if (data.on && data.on.input && !props.disabled) {
-            data.onInput && data.onInput(!props.value)
-          }
+        on: {
+          click: (e: MouseEvent) => {
+            e.stopPropagation()
+
+            if (data.on && data.on.input && !props.disabled) {
+              wrapInArray(data.on.input).forEach(f => f(!props.value))
+            }
+          },
         },
       }), [
-        h('div', { class: 'v-input--selection-controls__input' }, children),
+        h('div', { staticClass: 'v-input--selection-controls__input' }, children),
       ])
   },
 })

package/src/components/VChip/VChip.ts

@@ -1,4 +1,3 @@
-import {h, vShow, withDirectives} from 'vue'
 // Styles
 import './VChip.sass'
 
@@ -43,6 +42,11 @@ export default mixins(
     },
     activeClass: {
       type: String,
+      default (): string | undefined {
+        if (!this.chipGroup) return ''
+
+        return this.chipGroup.activeClass
+      },
     } as any as PropValidator<string>,
     close: Boolean,
     closeIcon: {
@@ -77,17 +81,10 @@ export default mixins(
   }),
 
   computed: {
-    $activeClass() {
-      if(this.activeClass)
-        return this.activeClass
-      if (!this.chipGroup) return ''
-
-      return this.chipGroup.activeClass
-    },
     classes (): object {
       return {
         'v-chip': true,
-        ...Routable.computed.classes.call(this),
+        ...Routable.options.computed.classes.call(this),
         'v-chip--clickable': this.isClickable,
         'v-chip--disabled': this.disabled,
         'v-chip--draggable': this.draggable,
@@ -107,7 +104,7 @@ export default mixins(
     },
     isClickable (): boolean {
       return Boolean(
-        Routable.computed.isClickable.call(this) ||
+        Routable.options.computed.isClickable.call(this) ||
         this.chipGroup
       )
     },
@@ -138,33 +135,39 @@ export default mixins(
 
       if (this.isActive) {
         children.push(
-          h(VIcon, {
-            class: 'v-chip__filter',
-            left: true,
+          this.$createElement(VIcon, {
+            staticClass: 'v-chip__filter',
+            props: { left: true },
           }, this.filterIcon)
         )
       }
 
-      return h(VExpandXTransition, children)
+      return this.$createElement(VExpandXTransition, children)
     },
     genClose (): VNode {
-      return h(VIcon, {
-        class: 'v-chip__close',
-        right: true,
-        size: 18,
-        'aria-label': this.$vuetify.lang.t(this.closeLabel),
-        onClick: (e: Event) => {
-          e.stopPropagation()
-          e.preventDefault()
-
-          this.$emit('click:close')
-          this.$emit('update:active', false)
-        }
+      return this.$createElement(VIcon, {
+        staticClass: 'v-chip__close',
+        props: {
+          right: true,
+          size: 18,
+        },
+        attrs: {
+          'aria-label': this.$vuetify.lang.t(this.closeLabel),
+        },
+        on: {
+          click: (e: Event) => {
+            e.stopPropagation()
+            e.preventDefault()
+
+            this.$emit('click:close')
+            this.$emit('update:active', false)
+          },
+        },
       }, this.closeIcon)
     },
     genContent (): VNode {
-      return h('span', {
-        class: 'v-chip__content',
+      return this.$createElement('span', {
+        staticClass: 'v-chip__content',
       }, [
         this.filter && this.genFilter(),
         getSlot(this),
@@ -173,28 +176,23 @@ export default mixins(
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const children = [this.genContent()]
-    let { tag, data, directives } = this.generateRouteLink()
+    let { tag, data } = this.generateRouteLink()
 
-    data = {
-      ...data,
+    data.attrs = {
+      ...data.attrs,
       draggable: this.draggable ? 'true' : undefined,
-      tabindex: this.chipGroup && !this.disabled ? 0 : data.tabindex,
+      tabindex: this.chipGroup && !this.disabled ? 0 : data.attrs!.tabindex,
     }
-
-    directives!.push([
-      vShow,
-      this.active,
-    ])
-
+    data.directives!.push({
+      name: 'show',
+      value: this.active,
+    })
     data = this.setBackgroundColor(this.color, data)
 
     const color = this.textColor || (this.outlined && this.color)
 
-    return withDirectives(
-      h(tag, this.setTextColor(color, data), children),
-      directives
-    )
+    return h(tag, this.setTextColor(color, data), children)
   },
 })

package/src/components/VChipGroup/VChipGroup.ts

@@ -30,7 +30,7 @@ export default mixins(
   computed: {
     classes () {
       return {
-        ...BaseSlideGroup.computed.classes.call(this),
+        ...BaseSlideGroup.options.computed.classes.call(this),
         'v-chip-group': true,
         'v-chip-group--column': this.column,
       }
@@ -48,7 +48,7 @@ export default mixins(
   methods: {
     genData () {
       return this.setTextColor(this.color, {
-        ...BaseSlideGroup.methods.genData.call(this),
+        ...BaseSlideGroup.options.methods.genData.call(this),
       })
     },
   },

package/src/components/VColorPicker/VColorPicker.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VColorPicker.sass'
 
@@ -91,36 +90,44 @@ export default mixins(Elevatable, Themeable).extend({
       }
     },
     genCanvas (): VNode {
-      return h(VColorPickerCanvas, {
-        color: this.internalValue,
-        disabled: this.disabled,
-        dotSize: this.dotSize,
-        width: this.width,
-        height: this.canvasHeight,
-        'onUpdate:color': this.updateColor
+      return this.$createElement(VColorPickerCanvas, {
+        props: {
+          color: this.internalValue,
+          disabled: this.disabled,
+          dotSize: this.dotSize,
+          width: this.width,
+          height: this.canvasHeight,
+        },
+        on: {
+          'update:color': this.updateColor,
+        },
       })
     },
     genControls (): VNode {
-      return h('div', {
-        class: 'v-color-picker__controls',
+      return this.$createElement('div', {
+        staticClass: 'v-color-picker__controls',
       }, [
         !this.hideSliders && this.genPreview(),
         !this.hideInputs && this.genEdit(),
       ])
     },
     genEdit (): VNode {
-      return h(VColorPickerEdit, {
-        color: this.internalValue,
-        disabled: this.disabled,
-        hideAlpha: this.hideAlpha,
-        hideModeSwitch: this.hideModeSwitch,
-        mode: this.mode,
-        'onUpdate:color': this.updateColor,
-        'onUpdate:mode': (v: Mode) => this.$emit('update:mode', v),
+      return this.$createElement(VColorPickerEdit, {
+        props: {
+          color: this.internalValue,
+          disabled: this.disabled,
+          hideAlpha: this.hideAlpha,
+          hideModeSwitch: this.hideModeSwitch,
+          mode: this.mode,
+        },
+        on: {
+          'update:color': this.updateColor,
+          'update:mode': (v: Mode) => this.$emit('update:mode', v),
+        },
       })
     },
     genPreview (): VNode {
-      return h(VColorPickerPreview, {
+      return this.$createElement(VColorPickerPreview, {
         props: {
           color: this.internalValue,
           disabled: this.disabled,
@@ -132,7 +139,7 @@ export default mixins(Elevatable, Themeable).extend({
       })
     },
     genSwatches (): VNode {
-      return h(VColorPickerSwatches, {
+      return this.$createElement(VColorPickerSwatches, {
         props: {
           dark: this.dark,
           light: this.light,
@@ -148,9 +155,9 @@ export default mixins(Elevatable, Themeable).extend({
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h(VSheet, {
-      class: 'v-color-picker',
+      staticClass: 'v-color-picker',
       class: {
         'v-color-picker--flat': this.flat,
         ...this.themeClasses,

package/src/components/VColorPicker/VColorPickerCanvas.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VColorPickerCanvas.sass'
 
@@ -7,9 +6,9 @@ import { clamp, convertToUnit } from '../../util/helpers'
 import { fromHSVA, VColorPickerColor, fromRGBA } from './util'
 
 // Types
-import { defineComponent, VNode, PropType } from 'vue'
+import Vue, { VNode, PropType } from 'vue'
 
-export default defineComponent({
+export default Vue.extend({
   name: 'v-color-picker-canvas',
 
   props: {
@@ -120,7 +119,7 @@ export default defineComponent({
       window.removeEventListener('mouseup', this.handleMouseUp)
     },
     genCanvas (): VNode {
-      return h('canvas', {
+      return this.$createElement('canvas', {
         ref: 'canvas',
         attrs: {
           width: this.width,
@@ -133,8 +132,8 @@ export default defineComponent({
       const x = convertToUnit(this.dot.x - radius)
       const y = convertToUnit(this.dot.y - radius)
 
-      return h('div', {
-        class: 'v-color-picker__canvas-dot',
+      return this.$createElement('div', {
+        staticClass: 'v-color-picker__canvas-dot',
         class: {
           'v-color-picker__canvas-dot--disabled': this.disabled,
         },
@@ -147,9 +146,9 @@ export default defineComponent({
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h('div', {
-      class: 'v-color-picker__canvas',
+      staticClass: 'v-color-picker__canvas',
       style: {
         width: convertToUnit(this.width),
         height: convertToUnit(this.height),