@dimailn/vuetify 2.7.2-alpha2 → 2.7.2-superbundle

package/src/components/VTabs/VTabs.ts

@@ -1,4 +1,3 @@
-import {h, withDirectives} from 'vue'
 // Styles
 import './VTabs.sass'
 
@@ -35,7 +34,7 @@ interface options extends ExtractVue<typeof baseMixins> {
   }
 }
 
-export default baseMixins.extend({
+export default baseMixins.extend<options>().extend({
   name: 'v-tabs',
 
   directives: {
@@ -195,19 +194,23 @@ export default baseMixins.extend({
         style: {
           height: convertToUnit(this.height),
         },
-        activeClass: this.activeClass,
-        centerActive: this.centerActive,
-        dark: this.dark,
-        light: this.light,
-        mandatory: !this.optional,
-        mobileBreakpoint: this.mobileBreakpoint,
-        nextIcon: this.nextIcon,
-        prevIcon: this.prevIcon,
-        showArrows: this.showArrows,
-        value: this.internalValue,
-        'onCall:slider': this.callSlider,
-        'onUpdate:modelValue': (val: any) => {
-          this.internalValue = val
+        props: {
+          activeClass: this.activeClass,
+          centerActive: this.centerActive,
+          dark: this.dark,
+          light: this.light,
+          mandatory: !this.optional,
+          mobileBreakpoint: this.mobileBreakpoint,
+          nextIcon: this.nextIcon,
+          prevIcon: this.prevIcon,
+          showArrows: this.showArrows,
+          value: this.internalValue,
+        },
+        on: {
+          'call:slider': this.callSlider,
+          change: (val: any) => {
+            this.internalValue = val
+          },
         },
         ref: 'items',
       }
@@ -215,7 +218,7 @@ export default baseMixins.extend({
       this.setTextColor(this.computedColor, data)
       this.setBackgroundColor(this.backgroundColor, data)
 
-      return h(VTabsBar, data, [
+      return this.$createElement(VTabsBar, data, [
         this.genSlider(slider),
         items,
       ])
@@ -229,25 +232,28 @@ export default baseMixins.extend({
       // render nothing
       if (!item.length) return null
 
-      return h(VTabsItems, {
-        modelValue: this.internalValue,
-        'onUpdate:modelValue': (val: any) => {
-          console.log(val)
-          this.internalValue = val
-        }
+      return this.$createElement(VTabsItems, {
+        props: {
+          value: this.internalValue,
+        },
+        on: {
+          change: (val: any) => {
+            this.internalValue = val
+          },
+        },
       }, item)
     },
     genSlider (slider: VNode | null) {
       if (this.hideSlider) return null
 
       if (!slider) {
-        slider = h(VTabsSlider, {
-          color: this.sliderColor
+        slider = this.$createElement(VTabsSlider, {
+          props: { color: this.sliderColor },
         })
       }
 
-      return h('div', {
-        class: 'v-tabs-slider-wrapper',
+      return this.$createElement('div', {
+        staticClass: 'v-tabs-slider-wrapper',
         style: this.sliderStyles,
       }, [slider])
     },
@@ -268,8 +274,8 @@ export default baseMixins.extend({
       for (let i = 0; i < length; i++) {
         const vnode = slot[i]
 
-        if (vnode.type) {
-          switch (vnode.type.name) {
+        if (vnode.componentOptions) {
+          switch (vnode.componentOptions.Ctor.options.name) {
             case 'v-tabs-slider': slider = vnode
               break
             case 'v-tabs-items': items = vnode
@@ -294,21 +300,20 @@ export default baseMixins.extend({
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const { tab, slider, items, item } = this.parseNodes()
 
-    return withDirectives(h('div', {
-      class: ['v-tabs', this.classes]
+    return h('div', {
+      staticClass: 'v-tabs',
+      class: this.classes,
+      directives: [{
+        name: 'resize',
+        modifiers: { quiet: true },
+        value: this.onResize,
+      }],
     }, [
       this.genBar(tab, slider),
       this.genItems(items, item),
-    ]), [
-      [
-        Resize,
-        this.onResize,
-        '',
-        { quiet: true }
-      ]
     ])
   },
 })

package/src/components/VTabs/VTabsBar.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Extensions
 import { BaseSlideGroup } from '../VSlideGroup/VSlideGroup'
 
@@ -35,7 +34,7 @@ export default mixins(
   computed: {
     classes () {
       return {
-        ...BaseSlideGroup.computed.classes.call(this),
+        ...BaseSlideGroup.options.computed.classes.call(this),
         'v-tabs-bar': true,
         'v-tabs-bar--is-mobile': this.isMobile,
         // TODO: Remove this and move to v-slide-group
@@ -58,9 +57,10 @@ export default mixins(
       this.$emit('call:slider')
     },
     genContent () {
-      const render = BaseSlideGroup.methods.genContent.call(this)
+      const render = BaseSlideGroup.options.methods.genContent.call(this)
 
-      render.props.class += ' v-tabs-bar__content'
+      render.data = render.data || {}
+      render.data.staticClass += ' v-tabs-bar__content'
 
       return render
     },
@@ -89,10 +89,12 @@ export default mixins(
     },
   },
 
-  render (): VNode {
-    const render = BaseSlideGroup.render.call(this, h)
+  render (h): VNode {
+    const render = BaseSlideGroup.options.render.call(this, h)
 
-    render.role = 'tablist'
+    render.data!.attrs = {
+      role: 'tablist',
+    }
 
     return render
   },

package/src/components/VTabs/VTabsItems.ts

@@ -1,15 +1,13 @@
 // Extensions
-import { defineComponent } from 'vue'
 import VWindow from '../VWindow/VWindow'
 
 // Types & Components
 import { BaseItemGroup, GroupableInstance } from './../VItemGroup/VItemGroup'
 
 /* @vue/component */
-export default defineComponent({
+export default VWindow.extend({
   name: 'v-tabs-items',
 
-  extends: VWindow,
   props: {
     mandatory: {
       type: Boolean,
@@ -20,7 +18,7 @@ export default defineComponent({
   computed: {
     classes (): object {
       return {
-        ...VWindow.computed.classes.call(this),
+        ...VWindow.options.computed.classes.call(this),
         'v-tabs-items': true,
       }
     },
@@ -31,7 +29,7 @@ export default defineComponent({
 
   methods: {
     getValue (item: GroupableInstance, i: number) {
-      return item.id || BaseItemGroup.methods.getValue.call(this, item, i)
+      return item.id || BaseItemGroup.options.methods.getValue.call(this, item, i)
     },
   },
 })

package/src/components/VTabs/VTabsSlider.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Mixins
 import Colorable from '../../mixins/colorable'
 
@@ -12,9 +11,9 @@ import { VNode } from 'vue/types'
 export default mixins(Colorable).extend({
   name: 'v-tabs-slider',
 
-  render (): VNode {
+  render (h): VNode {
     return h('div', this.setBackgroundColor(this.color, {
-      class: 'v-tabs-slider',
+      staticClass: 'v-tabs-slider',
     }))
   },
 })

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

@@ -103,7 +103,7 @@ describe('VTabs.ts', () => {
         return h(VTabs, {
           props: { hideSlider: true },
         }, [
-          h('div', { class: 'test-element' }, ['foobar']),
+          h('div', { staticClass: 'test-element' }, ['foobar']),
         ])
       },
     }

package/src/components/VTextField/VTextField.ts

@@ -25,7 +25,6 @@ import { breaking, consoleWarn } from '../../util/console'
 // Types
 import mixins from '../../util/mixins'
 import { VNode, PropType } from 'vue/types'
-import { withDirectives, h } from 'vue'
 
 const baseMixins = mixins(
   VInput,
@@ -50,7 +49,7 @@ interface options extends InstanceType<typeof baseMixins> {
 const dirtyTypes = ['color', 'file', 'time', 'date', 'datetime-local', 'week', 'month']
 
 /* @vue/component */
-export default baseMixins.extend({
+export default baseMixins.extend<options>().extend({
   name: 'v-text-field',
 
   directives: {
@@ -58,6 +57,8 @@ export default baseMixins.extend({
     ripple,
   },
 
+  inheritAttrs: false,
+
   props: {
     appendOuterIcon: String,
     autofocus: Boolean,
@@ -103,7 +104,7 @@ export default baseMixins.extend({
   computed: {
     classes (): object {
       return {
-        ...VInput.computed.classes.call(this),
+        ...VInput.options.computed.classes.call(this),
         'v-text-field': true,
         'v-text-field--full-width': this.fullWidth,
         'v-text-field--prefix': this.prefix,
@@ -122,7 +123,7 @@ export default baseMixins.extend({
       }
     },
     computedColor (): string | undefined {
-      const computedColor = Validatable.computed.computedColor.call(this)
+      const computedColor = Validatable.options.computed.computedColor.call(this)
 
       if (!this.soloInverted || !this.isFocused) return computedColor
 
@@ -138,7 +139,7 @@ export default baseMixins.extend({
       return this.counter !== false && this.counter != null
     },
     hasDetails (): boolean {
-      return VInput.computed.hasDetails.call(this) || this.hasCounter
+      return VInput.options.computed.hasDetails.call(this) || this.hasCounter
     },
     internalValue: {
       get (): any {
@@ -146,7 +147,7 @@ export default baseMixins.extend({
       },
       set (val: any) {
         this.lazyValue = val
-        this.$emit('update:modelValue', this.lazyValue)
+        this.$emit('input', this.lazyValue)
       },
     },
     isDirty (): boolean {
@@ -273,7 +274,7 @@ export default baseMixins.extend({
       const slot = []
 
       if (this.$slots['prepend-inner']) {
-        slot.push(this.$slots['prepend-inner']() as VNode[])
+        slot.push(this.$slots['prepend-inner'] as VNode[])
       } else if (this.prependInnerIcon) {
         slot.push(this.genIcon('prependInner'))
       }
@@ -292,7 +293,7 @@ export default baseMixins.extend({
       return this.genSlot('append', 'inner', slot)
     },
     genInputSlot () {
-      const input = VInput.methods.genInputSlot.call(this)
+      const input = VInput.options.methods.genInputSlot.call(this)
 
       const prepend = this.genPrependInnerSlot()
 
@@ -310,7 +311,7 @@ export default baseMixins.extend({
       // We add an empty div because other controls depend on a ref to append inner
       if (!this.isDirty) {
         return this.genSlot('append', 'inner', [
-          h('div'),
+          this.$createElement('div'),
         ])
       }
 
@@ -330,10 +331,10 @@ export default baseMixins.extend({
         value: this.computedCounterValue,
       }
 
-      return this.$slots.counter?.({ props }) ?? h(VCounter, props)
+      return this.$scopedSlots.counter?.({ props }) ?? this.$createElement(VCounter, { props })
     },
     genControl () {
-      return VInput.methods.genControl.call(this)
+      return VInput.options.methods.genControl.call(this)
     },
     genDefaultSlot () {
       return [
@@ -347,36 +348,40 @@ export default baseMixins.extend({
     genFieldset () {
       if (!this.outlined) return null
 
-      return h('fieldset', {
-        'aria-hidden': true
+      return this.$createElement('fieldset', {
+        attrs: {
+          'aria-hidden': true,
+        },
       }, [this.genLegend()])
     },
     genLabel () {
       if (!this.showLabel) return null
 
       const data = {
-        absolute: true,
-        color: this.validationState,
-        dark: this.dark,
-        disabled: this.isDisabled,
-        focused: !this.isSingle && (this.isFocused || !!this.validationState),
-        for: this.computedId,
-        left: this.labelPosition.left,
-        light: this.light,
-        right: this.labelPosition.right,
-        value: this.labelValue
+        props: {
+          absolute: true,
+          color: this.validationState,
+          dark: this.dark,
+          disabled: this.isDisabled,
+          focused: !this.isSingle && (this.isFocused || !!this.validationState),
+          for: this.computedId,
+          left: this.labelPosition.left,
+          light: this.light,
+          right: this.labelPosition.right,
+          value: this.labelValue,
+        },
       }
 
-      return h(VLabel, data, getSlot(this, 'label') || this.label)
+      return this.$createElement(VLabel, data, getSlot(this, 'label') || this.label)
     },
     genLegend () {
       const width = !this.singleLine && (this.labelValue || this.isDirty) ? this.labelWidth : 0
-      const span = h('span', {
-        innerHTML: '&#8203;',
-        class: 'notranslate',
+      const span = this.$createElement('span', {
+        domProps: { innerHTML: '&#8203;' },
+        staticClass: 'notranslate',
       })
 
-      return h('legend', {
+      return this.$createElement('legend', {
         style: {
           width: !this.isSingle ? convertToUnit(width) : undefined,
         },
@@ -387,49 +392,50 @@ export default baseMixins.extend({
       delete listeners.change // Change should not be bound externally
       const { title, ...inputAttrs } = this.attrs$
 
-      const node = h('input', {
+      return this.$createElement('input', {
         style: {},
-        value: (this.type === 'number' && Object.is(this.lazyValue, -0)) ? '-0' : this.lazyValue,
-        ...inputAttrs,
-        autofocus: this.autofocus,
-        disabled: this.isDisabled,
-        id: this.computedId,
-        placeholder: this.persistentPlaceholder || this.isFocused || !this.hasLabel ? this.placeholder : undefined,
-        readonly: this.isReadonly,
-        type: this.type,
-        onBlur: this.onBlur,
-        onInput: this.onInput,
-        onFocus: this.onFocus,
-        onKeydown: this.onKeyDown,
-        ...listeners,
-        ref: 'input'
+        domProps: {
+          value: (this.type === 'number' && Object.is(this.lazyValue, -0)) ? '-0' : this.lazyValue,
+        },
+        attrs: {
+          ...inputAttrs,
+          autofocus: this.autofocus,
+          disabled: this.isDisabled,
+          id: this.computedId,
+          placeholder: this.persistentPlaceholder || this.isFocused || !this.hasLabel ? this.placeholder : undefined,
+          readonly: this.isReadonly,
+          type: this.type,
+        },
+        on: Object.assign(listeners, {
+          blur: this.onBlur,
+          input: this.onInput,
+          focus: this.onFocus,
+          keydown: this.onKeyDown,
+        }),
+        ref: 'input',
+        directives: [{
+          name: 'resize',
+          modifiers: { quiet: true },
+          value: this.onResize,
+        }],
       })
-
-      return withDirectives(node, [
-        [
-          resize,
-          this.onResize,
-          '',
-          { quiet: true }
-        ]
-      ])
     },
     genMessages () {
       if (!this.showDetails) return null
 
-      const messagesNode = VInput.methods.genMessages.call(this)
+      const messagesNode = VInput.options.methods.genMessages.call(this)
       const counterNode = this.genCounter()
 
-      return h('div', {
-        class: 'v-text-field__details',
+      return this.$createElement('div', {
+        staticClass: 'v-text-field__details',
       }, [
         messagesNode,
         counterNode,
       ])
     },
     genTextFieldSlot () {
-      return h('div', {
-        class: 'v-text-field__slot',
+      return this.$createElement('div', {
+        staticClass: 'v-text-field__slot',
       }, [
         this.genLabel(),
         this.prefix ? this.genAffix('prefix') : null,
@@ -438,7 +444,7 @@ export default baseMixins.extend({
       ])
     },
     genAffix (type: 'prefix' | 'suffix') {
-      return h('div', {
+      return this.$createElement('div', {
         class: `v-text-field__${type}`,
         ref: type,
       }, this[type])
@@ -478,7 +484,7 @@ export default baseMixins.extend({
         this.lazyValue !== this.initialValue
       ) {
         this.initialValue = this.lazyValue
-        this.$emit('update:modelValue', this.initialValue)
+        this.$emit('change', this.initialValue)
       }
 
       this.$emit('keydown', e)
@@ -490,12 +496,12 @@ export default baseMixins.extend({
         e.stopPropagation()
       }
 
-      VInput.methods.onMouseDown.call(this, e)
+      VInput.options.methods.onMouseDown.call(this, e)
     },
     onMouseUp (e: Event) {
       if (this.hasMouseDown) this.focus()
 
-      VInput.methods.onMouseUp.call(this, e)
+      VInput.options.methods.onMouseUp.call(this, e)
     },
     setLabelWidth () {
       if (!this.outlined) return
@@ -534,7 +540,7 @@ export default baseMixins.extend({
       if (val) {
         this.initialValue = this.lazyValue
       } else if (this.initialValue !== this.lazyValue) {
-        this.$emit('update:modelValue', this.lazyValue)
+        this.$emit('change', this.lazyValue)
       }
     },
     onResize () {

package/src/components/VTextarea/VTextarea.ts

@@ -47,7 +47,7 @@ export default baseMixins.extend({
         'v-textarea': true,
         'v-textarea--auto-grow': this.autoGrow,
         'v-textarea--no-resize': this.noResizeHandle,
-        ...VTextField.computed.classes.call(this),
+        ...VTextField.options.computed.classes.call(this),
       }
     },
     noResizeHandle (): boolean {
@@ -90,17 +90,16 @@ export default baseMixins.extend({
       input.style.height = Math.max(minHeight, height) + 'px'
     },
     genInput () {
-      const input = VTextField.methods.genInput.call(this)
+      const input = VTextField.options.methods.genInput.call(this)
 
       input.tag = 'textarea'
-      input.type = 'textarea'
-      delete input.props.type
-      input.rows = this.rows
+      delete input.data!.attrs!.type
+      input.data!.attrs!.rows = this.rows
 
       return input
     },
     onInput (e: Event) {
-      VTextField.methods.onInput.call(this, e)
+      VTextField.options.methods.onInput.call(this, e)
       this.autoGrow && this.calculateInputHeight()
     },
     onKeyDown (e: KeyboardEvent) {

package/src/components/VThemeProvider/VThemeProvider.ts

@@ -5,9 +5,8 @@ import Themeable from '../../mixins/themeable'
 import { VNode } from 'vue'
 
 /* @vue/component */
-export default {
+export default Themeable.extend({
   name: 'v-theme-provider',
-  extends: Themeable,
 
   props: { root: Boolean },
 
@@ -15,7 +14,7 @@ export default {
     isDark (): boolean {
       return this.root
         ? this.rootIsDark
-        : Themeable.computed.isDark.call(this)
+        : Themeable.options.computed.isDark.call(this)
     },
   },
 
@@ -23,7 +22,7 @@ export default {
     /* istanbul ignore next */
     return (
       this.$slots.default! &&
-      this.$slots.default!().find(node => !node.isComment && node.text !== ' ')!
+      this.$slots.default!.find(node => !node.isComment && node.text !== ' ')!
     )
   },
-}
+})

package/src/components/VTimePicker/VTimePicker.ts

@@ -301,48 +301,52 @@ export default mixins(
       return ((first || 0) + value) % range.length + range[0]
     },
     genClock () {
-      return h(VTimePickerClock, {
-        allowedValues:
-          this.selecting === SelectingTimes.Hour
-            ? this.isAllowedHourCb
+      return this.$createElement(VTimePickerClock, {
+        props: {
+          allowedValues:
+            this.selecting === SelectingTimes.Hour
+              ? this.isAllowedHourCb
+              : (this.selecting === SelectingTimes.Minute
+                ? this.isAllowedMinuteCb
+                : this.isAllowedSecondCb),
+          color: this.color,
+          dark: this.dark,
+          disabled: this.disabled,
+          double: this.selecting === SelectingTimes.Hour && !this.isAmPm,
+          format: this.selecting === SelectingTimes.Hour
+            ? (this.isAmPm ? this.convert24to12 : (val: number) => val)
+            : (val: number) => pad(val, 2),
+          light: this.light,
+          max: this.selecting === SelectingTimes.Hour ? (this.isAmPm && this.period === 'am' ? 11 : 23) : 59,
+          min: this.selecting === SelectingTimes.Hour && this.isAmPm && this.period === 'pm' ? 12 : 0,
+          readonly: this.readonly,
+          scrollable: this.scrollable,
+          size: Number(this.width) - ((!this.fullWidth && this.landscape) ? 80 : 20),
+          step: this.selecting === SelectingTimes.Hour ? 1 : 5,
+          value: this.selecting === SelectingTimes.Hour
+            ? this.inputHour
             : (this.selecting === SelectingTimes.Minute
-              ? this.isAllowedMinuteCb
-              : this.isAllowedSecondCb),
-        color: this.color,
-        dark: this.dark,
-        disabled: this.disabled,
-        double: this.selecting === SelectingTimes.Hour && !this.isAmPm,
-        format: this.selecting === SelectingTimes.Hour
-          ? (this.isAmPm ? this.convert24to12 : (val: number) => val)
-          : (val: number) => pad(val, 2),
-        light: this.light,
-        max: this.selecting === SelectingTimes.Hour ? (this.isAmPm && this.period === 'am' ? 11 : 23) : 59,
-        min: this.selecting === SelectingTimes.Hour && this.isAmPm && this.period === 'pm' ? 12 : 0,
-        readonly: this.readonly,
-        scrollable: this.scrollable,
-        size: Number(this.width) - ((!this.fullWidth && this.landscape) ? 80 : 20),
-        step: this.selecting === SelectingTimes.Hour ? 1 : 5,
-        value: this.selecting === SelectingTimes.Hour
-          ? this.inputHour
-          : (this.selecting === SelectingTimes.Minute
-            ? this.inputMinute
-            : this.inputSecond),
-        onInput: this.onInput,
-        onChange: this.onChange,
+              ? this.inputMinute
+              : this.inputSecond),
+        },
+        on: {
+          input: this.onInput,
+          change: this.onChange,
+        },
         ref: 'clock',
       })
     },
     genClockAmPm () {
-      return h('div', this.setTextColor(this.color || 'primary', {
-        class: 'v-time-picker-clock__ampm',
+      return this.$createElement('div', this.setTextColor(this.color || 'primary', {
+        staticClass: 'v-time-picker-clock__ampm',
       }), [
         this.genPickerButton('period', 'am', this.$vuetify.lang.t('$vuetify.timePicker.am'), this.disabled || this.readonly),
         this.genPickerButton('period', 'pm', this.$vuetify.lang.t('$vuetify.timePicker.pm'), this.disabled || this.readonly),
       ])
     },
     genPickerBody () {
-      return h('div', {
-        class: 'v-time-picker-clock__container',
+      return this.$createElement('div', {
+        staticClass: 'v-time-picker-clock__container',
         key: this.selecting,
       }, [
         !this.ampmInTitle && this.isAmPm && this.genClockAmPm(),
@@ -350,7 +354,7 @@ export default mixins(
       ])
     },
     genPickerTitle () {
-      return h(VTimePickerTitle, {
+      return this.$createElement(VTimePickerTitle, {
         props: {
           ampm: this.isAmPm,
           ampmReadonly: this.isAmPm && !this.ampmInTitle,