@dimailn/vuetify 2.7.2-alpha2 → 2.7.2-superbundle

package/src/components/VImg/VImg.ts

@@ -1,4 +1,3 @@
-import {h, Transition, withDirectives, mergeProps} from 'vue'
 // Styles
 import './VImg.sass'
 
@@ -20,7 +19,6 @@ import mixins from '../../util/mixins'
 import mergeData from '../../util/mergeData'
 import { consoleWarn } from '../../util/console'
 import { getSlot } from '../../util/helpers'
-import Intersect from '../../directives/intersect'
 
 // not intended for public use, this is passed in by vuetify-loader
 export interface srcObject {
@@ -111,12 +109,12 @@ export default mixins(
       if (this.gradient) backgroundImage.push(`linear-gradient(${this.gradient})`)
       if (src) backgroundImage.push(`url("${src}")`)
 
-      const image = h('div', {
+      const image = this.$createElement('div', {
+        staticClass: 'v-image__image',
         class: {
           'v-image__image--preload': this.isLoading,
           'v-image__image--contain': this.contain,
           'v-image__image--cover': !this.contain,
-          'v-image__image': true
         },
         style: {
           backgroundImage: backgroundImage.join(', '),
@@ -128,9 +126,11 @@ export default mixins(
       /* istanbul ignore if */
       if (!this.transition) return image
 
-      return h(Transition, {
-        name: this.transition,
-        mode: 'in-out',
+      return this.$createElement('transition', {
+        attrs: {
+          name: this.transition,
+          mode: 'in-out',
+        },
       }, [image])
     },
   },
@@ -241,12 +241,11 @@ export default mixins(
       poll()
     },
     genContent () {
-      let content: VNode = VResponsive.methods.genContent.call(this)
-
+      const content: VNode = VResponsive.options.methods.genContent.call(this)
       if (this.naturalWidth) {
-        content = h(content.type, mergeProps(content.data!, {
+        this._b(content.data!, 'div', {
           style: { width: `${this.naturalWidth}px` },
-        }), content.children)
+        })
       }
 
       return content
@@ -255,31 +254,45 @@ export default mixins(
       const slot = getSlot(this, 'placeholder')
       if (slot) {
         const placeholder = this.isLoading
-          ? [h('div', {
-            class: 'v-image__placeholder',
+          ? [this.$createElement('div', {
+            staticClass: 'v-image__placeholder',
           }, slot)]
           : []
 
         if (!this.transition) return placeholder[0]
 
-        return h(Transition, {
-          appear: true,
-          name: this.transition,
+        return this.$createElement('transition', {
+          props: {
+            appear: true,
+            name: this.transition,
+          },
         }, placeholder)
       }
     },
   },
 
-  render (): VNode {
-    let node = VResponsive.render.call(this, h)
-
-    const data = mergeData(node.props, {
-      'aria-label': this.alt,
-      role: this.alt ? 'img' : undefined,
-      class:  {
-        ...this.themeClasses,
-        'v-image': true
-      }
+  render (h): VNode {
+    const node = VResponsive.options.render.call(this, h)
+
+    const data = mergeData(node.data!, {
+      staticClass: 'v-image',
+      attrs: {
+        'aria-label': this.alt,
+        role: this.alt ? 'img' : undefined,
+      },
+      class: this.themeClasses,
+      // Only load intersect directive if it
+      // will work in the current browser.
+      directives: hasIntersect
+        ? [{
+          name: 'intersect',
+          modifiers: { once: true },
+          value: {
+            handler: this.init,
+            options: this.options,
+          },
+        }]
+        : undefined,
     })
 
     node.children = [
@@ -289,23 +302,6 @@ export default mixins(
       this.genContent(),
     ] as VNode[]
 
-    node = h(node.type, data, node.children)
-
-    return withDirectives(node, hasIntersect
-      ? [
-        [
-          Intersect,
-          {
-            handler: this.init,
-            options: this.options,
-          },
-          '',
-          {
-            once: true
-          }
-        ]
-      ]
-
-      : [])
+    return h(node.tag, data, node.children)
   },
 })

package/src/components/VInput/VInput.ts

@@ -19,7 +19,7 @@ import {
 import mergeData from '../../util/mergeData'
 
 // Types
-import { VNode, VNodeData, PropType, h, getCurrentInstance } from 'vue'
+import { VNode, VNodeData, PropType } from 'vue'
 import mixins from '../../util/mixins'
 import { InputValidationRule } from 'vuetify/types'
 
@@ -34,7 +34,7 @@ interface options extends InstanceType<typeof baseMixins> {
 }
 
 /* @vue/component */
-export default baseMixins.extend({
+export default baseMixins.extend<options>().extend({
   name: 'v-input',
 
   inheritAttrs: false,
@@ -55,12 +55,12 @@ export default baseMixins.extend({
     loading: Boolean,
     persistentHint: Boolean,
     prependIcon: String,
-    modelValue: null as any as PropType<any>,
+    value: null as any as PropType<any>,
   },
 
   data () {
     return {
-      lazyValue: this.modelValue,
+      lazyValue: this.value,
       hasMouseDown: false,
     }
   },
@@ -83,7 +83,7 @@ export default baseMixins.extend({
       }
     },
     computedId (): string {
-      return this.id || `input-${this.$.uid}`
+      return this.id || `input-${this._uid}`
     },
     hasDetails (): boolean {
       return this.messagesToDisplay.length > 0
@@ -142,7 +142,7 @@ export default baseMixins.extend({
   beforeCreate () {
     // v-radio-group needs to emit a different event
     // https://github.com/vuetifyjs/vuetify/issues/4752
-    this.$_modelEvent = /*(this.$options.model && this.$options.model.event) ||*/ 'update:modelValue'
+    this.$_modelEvent = (this.$options.model && this.$options.model.event) || 'input'
   },
 
   methods: {
@@ -154,9 +154,9 @@ export default baseMixins.extend({
       ]
     },
     genControl () {
-      return h('div', {
-        class: 'v-input__control',
-        title: this.attrs$.title,
+      return this.$createElement('div', {
+        staticClass: 'v-input__control',
+        attrs: { title: this.attrs$.title },
       }, [
         this.genInputSlot(),
         this.genMessages(),
@@ -189,16 +189,18 @@ export default baseMixins.extend({
         : undefined
 
       const data = mergeData({
-        'aria-label': label,
-        color: this.validationState,
-        dark: this.dark,
-        disabled: this.isDisabled,
-        light: this.light,
-        tabindex: type === 'clear' ? -1 : undefined,
-        ...(!hasListener
-          ? {}
+        attrs: {
+          'aria-label': label,
+          color: this.validationState,
+          dark: this.dark,
+          disabled: this.isDisabled,
+          light: this.light,
+          tabindex: type === 'clear' ? -1 : undefined,
+        },
+        on: !hasListener
+          ? undefined
           : {
-            onClick: (e: Event) => {
+            click: (e: Event) => {
               e.preventDefault()
               e.stopPropagation()
 
@@ -207,20 +209,18 @@ export default baseMixins.extend({
             },
             // Container has g event that will
             // trigger menu open if enclosed
-            onMouseup: (e: Event) => {
+            mouseup: (e: Event) => {
               e.preventDefault()
               e.stopPropagation()
             },
-          }),
+          },
       }, extraData)
 
-      return h('div', {
-        class: {
-          'v-input__icon': true,
-          [`v-input__icon--${kebabCase(type)}`]: type
-        },
+      return this.$createElement('div', {
+        staticClass: `v-input__icon`,
+        class: type ? `v-input__icon--${kebabCase(type)}` : undefined,
       }, [
-        h(
+        this.$createElement(
           VIcon,
           data,
           icon
@@ -228,37 +228,48 @@ export default baseMixins.extend({
       ])
     },
     genInputSlot () {
-      return h('div', this.setBackgroundColor(this.backgroundColor, {
-        class: {'v-input__slot': true},
+      return this.$createElement('div', this.setBackgroundColor(this.backgroundColor, {
+        staticClass: 'v-input__slot',
         style: { height: convertToUnit(this.height) },
-        onClick: this.onClick,
-        onMousedown: this.onMouseDown,
-        onMouseup: this.onMouseUp,
+        on: {
+          click: this.onClick,
+          mousedown: this.onMouseDown,
+          mouseup: this.onMouseUp,
+        },
         ref: 'input-slot',
       }), [this.genDefaultSlot()])
     },
     genLabel () {
       if (!this.hasLabel) return null
 
-      return h(VLabel, {
-        color: this.validationState,
-        dark: this.dark,
-        disabled: this.isDisabled,
-        focused: this.hasState,
-        for: this.computedId,
-        light: this.light,
+      return this.$createElement(VLabel, {
+        props: {
+          color: this.validationState,
+          dark: this.dark,
+          disabled: this.isDisabled,
+          focused: this.hasState,
+          for: this.computedId,
+          light: this.light,
+        },
       }, getSlot(this, 'label') || this.label)
     },
     genMessages () {
       if (!this.showDetails) return null
 
-      return h(VMessages, {
-        color: this.hasHint ? '' : this.validationState,
-        dark: this.dark,
-        light: this.light,
-        value: this.messagesToDisplay,
-        role: this.hasMessages ? 'alert' : null,
-      }, {default: getSlot(this, 'message') })
+      return this.$createElement(VMessages, {
+        props: {
+          color: this.hasHint ? '' : this.validationState,
+          dark: this.dark,
+          light: this.light,
+          value: this.messagesToDisplay,
+        },
+        attrs: {
+          role: this.hasMessages ? 'alert' : null,
+        },
+        scopedSlots: {
+          default: props => getSlot(this, 'message', props),
+        },
+      })
     },
     genSlot (
       type: string,
@@ -269,10 +280,8 @@ export default baseMixins.extend({
 
       const ref = `${type}-${location}`
 
-      slot = slot.map(child => child instanceof Function ? child() : child)
-
-      return h('div', {
-        class: `v-input__${ref}`,
+      return this.$createElement('div', {
+        staticClass: `v-input__${ref}`,
         ref,
       }, slot)
     },
@@ -315,9 +324,10 @@ export default baseMixins.extend({
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h('div', this.setTextColor(this.validationState, {
-      class: {'v-input': true, ...this.classes},
+      staticClass: 'v-input',
+      class: this.classes,
     }), this.genContent())
   },
 })

package/src/components/VItemGroup/VItem.ts

@@ -9,11 +9,11 @@ import mixins from '../../util/mixins'
 import { consoleWarn } from '../../util/console'
 
 // Types
-import {defineComponent} from 'vue'
+import Vue from 'vue'
 import { VNode, ScopedSlotChildren } from 'vue/types/vnode'
 
 /* @vue/component */
-export const BaseItem = defineComponent({
+export const BaseItem = Vue.extend({
   props: {
     activeClass: String,
     value: {
@@ -33,7 +33,7 @@ export const BaseItem = defineComponent({
   },
 
   render (): VNode {
-    if (!this.$slots.default) {
+    if (!this.$scopedSlots.default) {
       consoleWarn('v-item is missing a default scopedSlot', this)
 
       return null as any
@@ -42,8 +42,8 @@ export const BaseItem = defineComponent({
     let element: VNode | ScopedSlotChildren
 
     /* istanbul ignore else */
-    if (this.$slots.default) {
-      element = this.$slots.default({
+    if (this.$scopedSlots.default) {
+      element = this.$scopedSlots.default({
         active: this.isActive,
         toggle: this.toggle,
       })

package/src/components/VItemGroup/VItemGroup.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VItemGroup.sass'
 
@@ -15,7 +14,6 @@ import { getSlot } from '../../util/helpers'
 
 // Types
 import { VNode } from 'vue/types'
-import { defineComponent } from 'vue'
 
 export type GroupableInstance = InstanceType<typeof Groupable> & {
   id?: string
@@ -131,7 +129,6 @@ export const BaseItemGroup = mixins(
     register (item: GroupableInstance) {
       const index = this.items.push(item) - 1
 
-      // TODO!!!
       item.$on('change', () => this.onClick(item))
 
       // If no value provided and mandatory,
@@ -257,14 +254,13 @@ export const BaseItemGroup = mixins(
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h(this.tag, this.genData(), getSlot(this))
   },
 })
 
-export default defineComponent({
+export default BaseItemGroup.extend({
   name: 'v-item-group',
-  extends: BaseItemGroup,
 
   provide (): object {
     return {

package/src/components/VLabel/VLabel.ts

@@ -6,7 +6,7 @@ import Colorable from '../../mixins/colorable'
 import Themeable, { functionalThemeClasses } from '../../mixins/themeable'
 
 // Types
-import { VNode, h } from 'vue'
+import { VNode } from 'vue'
 import mixins from '../../util/mixins'
 
 // Helpers
@@ -39,19 +39,20 @@ export default mixins(Themeable).extend({
     value: Boolean,
   },
 
-  render (): VNode {
-    const data = this.$attrs
-    const props = this.$props
-
+  render (h, ctx): VNode {
+    const { children, listeners, props, data } = ctx
     const newData = mergeData({
+      staticClass: 'v-label',
       class: {
-        'v-label': true,
-        'v-label--active': this.value,
-        'v-label--is-disabled': this.disabled,
-        ...functionalThemeClasses(this),
+        'v-label--active': props.value,
+        'v-label--is-disabled': props.disabled,
+        ...functionalThemeClasses(ctx),
+      },
+      attrs: {
+        for: props.for,
+        'aria-hidden': !props.for,
       },
-      for: props.for,
-      'aria-hidden': !props.for,
+      on: listeners,
       style: {
         left: convertToUnit(props.left),
         right: convertToUnit(props.right),
@@ -60,6 +61,6 @@ export default mixins(Themeable).extend({
       ref: 'label',
     }, data)
 
-    return h('label', Colorable.methods.setTextColor(props.focused && props.color, newData), this.$slots.default())
+    return h('label', Colorable.options.methods.setTextColor(props.focused && props.color, newData), children)
   },
 })

package/src/components/VLazy/VLazy.ts

@@ -1,4 +1,3 @@
-import {Transition, h} from 'vue'
 // Mixins
 import Measurable from '../../mixins/measurable'
 import Toggleable from '../../mixins/toggleable'
@@ -56,8 +55,8 @@ export default mixins(
       const children = this.isActive && getSlot(this)
 
       return this.transition
-        ? h(Transition, {
-          name: this.transition,
+        ? this.$createElement('transition', {
+          props: { name: this.transition },
         }, children)
         : children
     },
@@ -72,9 +71,9 @@ export default mixins(
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h(this.tag, {
-      class: 'v-lazy',
+      staticClass: 'v-lazy',
       attrs: this.$attrs,
       directives: [{
         name: 'intersect',

package/src/components/VList/VList.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VList.sass'
 import VListGroup from './VListGroup'
@@ -8,7 +7,7 @@ import VSheet from '../VSheet/VSheet'
 import { getSlot } from '../../util/helpers'
 
 // Types
-import { VNode, defineComponent } from 'vue'
+import { VNode } from 'vue'
 
 type VListGroupInstance = InstanceType<typeof VListGroup>
 
@@ -18,9 +17,8 @@ interface options extends InstanceType<typeof VSheet> {
 }
 
 /* @vue/component */
-export default defineComponent({
+export default VSheet.extend<options>().extend({
   name: 'v-list',
-  extends: VSheet,
 
   provide (): object {
     return {
@@ -57,7 +55,7 @@ export default defineComponent({
   computed: {
     classes (): object {
       return {
-        ...VSheet.computed.classes.call(this),
+        ...VSheet.options.computed.classes.call(this),
         'v-list--dense': this.dense,
         'v-list--disabled': this.disabled,
         'v-list--flat': this.flat,
@@ -88,13 +86,16 @@ export default defineComponent({
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const data = {
-      class: [this.classes, 'v-list'],
+      staticClass: 'v-list',
+      class: this.classes,
       style: this.styles,
-      role: this.isInNav || this.isInMenu ? undefined : 'list',
-      // ...this.attrs$,
-      ...this.listeners$,
+      attrs: {
+        role: this.isInNav || this.isInMenu ? undefined : 'list',
+        ...this.attrs$,
+      },
+      on: this.listeners$,
     }
 
     return h(this.tag, this.setBackgroundColor(this.color, data), getSlot(this))

package/src/components/VList/VListGroup.ts

@@ -1,4 +1,3 @@
-import {h, withDirectives} from 'vue'
 // Styles
 import './VListGroup.sass'
 
@@ -16,7 +15,7 @@ import Toggleable from '../../mixins/toggleable'
 import { inject as RegistrableInject } from '../../mixins/registrable'
 
 // Directives
-import ripple, { Ripple } from '../../directives/ripple'
+import ripple from '../../directives/ripple'
 
 // Transitions
 import { VExpandTransition } from '../transitions'
@@ -47,7 +46,7 @@ interface options extends ExtractVue<typeof baseMixins> {
   $route: Route
 }
 
-export default baseMixins.extend({
+export default baseMixins.extend<options>().extend({
   name: 'v-list-group',
 
   directives: { ripple },
@@ -122,7 +121,7 @@ export default baseMixins.extend({
       this.$nextTick(() => (this.isActive = !this.isActive))
     },
     genIcon (icon: string | false): VNode {
-      return h(VIcon, icon)
+      return this.$createElement(VIcon, icon)
     },
     genAppendIcon (): VNode | null {
       const icon = !this.subGroup ? this.appendIcon : false
@@ -130,36 +129,43 @@ export default baseMixins.extend({
 
       if (!icon && !slot) return null
 
-      return h(VListItemIcon, {
-        class: 'v-list-group__header__append-icon',
+      return this.$createElement(VListItemIcon, {
+        staticClass: 'v-list-group__header__append-icon',
       }, [
         slot || this.genIcon(icon),
       ])
     },
     genHeader (): VNode {
-      return withDirectives(h(VListItem, {
-        'aria-expanded': String(this.isActive),
-        role: 'button',
+      return this.$createElement(VListItem, {
+        staticClass: 'v-list-group__header',
+        attrs: {
+          'aria-expanded': String(this.isActive),
+          role: 'button',
+        },
         class: {
-          'v-list-group__header': true,
           [this.activeClass]: this.isActive,
         },
-        inputValue: this.isActive,
-        ...this.listeners$,
-        onClick: this.click
+        props: {
+          inputValue: this.isActive,
+        },
+        directives: [{
+          name: 'ripple',
+          value: this.ripple,
+        }],
+        on: {
+          ...this.listeners$,
+          click: this.click,
+        },
       }, [
         this.genPrependIcon(),
         getSlot(this, 'activator'),
         this.genAppendIcon(),
-      ]),
-      [
-        [Ripple, this.ripple]
       ])
     },
     genItems (): VNode[] {
       return this.showLazyContent(() => [
-        h('div', {
-          class: 'v-list-group__items',
+        this.$createElement('div', {
+          staticClass: 'v-list-group__items',
           directives: [{
             name: 'show',
             value: this.isActive,
@@ -175,8 +181,8 @@ export default baseMixins.extend({
 
       if (!icon && !slot) return null
 
-      return h(VListItemIcon, {
-        class: 'v-list-group__header__prepend-icon',
+      return this.$createElement(VListItemIcon, {
+        staticClass: 'v-list-group__header__prepend-icon',
       }, [
         slot || this.genIcon(icon),
       ])
@@ -205,9 +211,9 @@ export default baseMixins.extend({
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h('div', this.setTextColor(this.isActive && this.color, {
-      class: 'v-list-group',
+      staticClass: 'v-list-group',
       class: this.classes,
     }), [
       this.genHeader(),