@dimailn/vuetify 2.7.2-alpha0 → 2.7.2-superbundle

package/src/components/VColorPicker/VColorPickerEdit.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VColorPickerEdit.sass'
 
@@ -10,7 +9,7 @@ import VIcon from '../VIcon'
 import { parseHex } from '../../util/colorUtils'
 
 // Types
-import { defineComponent, VNode, PropType } from 'vue'
+import Vue, { VNode, PropType } from 'vue'
 import { VColorPickerColor, fromRGBA, fromHexa, fromHSLA } from './util'
 
 type Input = [string, number, string]
@@ -44,7 +43,7 @@ export const modes = {
   },
 } as { [key: string]: Mode }
 
-export default defineComponent({
+export default Vue.extend({
   name: 'v-color-picker-edit',
 
   props: {
@@ -101,16 +100,18 @@ export default defineComponent({
       this.$emit('update:mode', newMode)
     },
     genInput (target: string, attrs: any, value: any, on: any): VNode {
-      return h('div', {
-        class: 'v-color-picker__input',
+      return this.$createElement('div', {
+        staticClass: 'v-color-picker__input',
       }, [
-        h('input', {
+        this.$createElement('input', {
           key: target,
-          ...attrs,
-          value,
-          ...on,
+          attrs,
+          domProps: {
+            value,
+          },
+          on,
         }),
-        h('span', target.toUpperCase()),
+        this.$createElement('span', target.toUpperCase()),
       ])
     },
     genInputs (): VNode[] | VNode {
@@ -161,20 +162,24 @@ export default defineComponent({
       }
     },
     genSwitch (): VNode {
-      return h(VBtn, {
-        small: true,
-        icon: true,
-        disabled: this.disabled,
-        onClick: this.changeMode,
+      return this.$createElement(VBtn, {
+        props: {
+          small: true,
+          icon: true,
+          disabled: this.disabled,
+        },
+        on: {
+          click: this.changeMode,
+        },
       }, [
-        h(VIcon, '$unfold'),
+        this.$createElement(VIcon, '$unfold'),
       ])
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h('div', {
-      class: 'v-color-picker__edit',
+      staticClass: 'v-color-picker__edit',
     }, [
       this.genInputs(),
       !this.hideModeSwitch && this.genSwitch(),

package/src/components/VColorPicker/VColorPickerPreview.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VColorPickerPreview.sass'
 
@@ -9,10 +8,10 @@ import VSlider from '../VSlider/VSlider'
 import { RGBtoCSS, RGBAtoCSS } from '../../util/colorUtils'
 
 // Types
-import { defineComponent, VNode, VNodeData, PropType } from 'vue'
+import Vue, { VNode, VNodeData, PropType } from 'vue'
 import { VColorPickerColor, fromHSVA } from './util'
 
-export default defineComponent({
+export default Vue.extend({
   name: 'v-color-picker-preview',
 
   props: {
@@ -24,34 +23,38 @@ export default defineComponent({
   methods: {
     genAlpha (): VNode {
       return this.genTrack({
-        class: 'v-color-picker__alpha',
-        thumbColor: 'grey lighten-2',
-        hideDetails: true,
-        value: this.color.alpha,
-        step: 0,
-        min: 0,
-        max: 1,
+        staticClass: 'v-color-picker__alpha',
+        props: {
+          thumbColor: 'grey lighten-2',
+          hideDetails: true,
+          value: this.color.alpha,
+          step: 0,
+          min: 0,
+          max: 1,
+        },
         style: {
           backgroundImage: this.disabled
             ? undefined
             : `linear-gradient(to ${this.$vuetify.rtl ? 'left' : 'right'}, transparent, ${RGBtoCSS(this.color.rgba)})`,
         },
-        onInput: (val: number) => this.color.alpha !== val && this.$emit('update:color', fromHSVA({ ...this.color.hsva, a: val })),
+        on: {
+          input: (val: number) => this.color.alpha !== val && this.$emit('update:color', fromHSVA({ ...this.color.hsva, a: val })),
+        },
       })
     },
     genSliders (): VNode {
-      return h('div', {
-        class: 'v-color-picker__sliders',
+      return this.$createElement('div', {
+        staticClass: 'v-color-picker__sliders',
       }, [
         this.genHue(),
         !this.hideAlpha && this.genAlpha(),
       ])
     },
     genDot (): VNode {
-      return h('div', {
-        class: 'v-color-picker__dot',
+      return this.$createElement('div', {
+        staticClass: 'v-color-picker__dot',
       }, [
-        h('div', {
+        this.$createElement('div', {
           style: {
             background: RGBAtoCSS(this.color.rgba),
           },
@@ -60,31 +63,38 @@ export default defineComponent({
     },
     genHue (): VNode {
       return this.genTrack({
-        class: 'v-color-picker__hue',
-        thumbColor: 'grey lighten-2',
-        hideDetails: true,
-        value: this.color.hue,
-        step: 0,
-        min: 0,
-        max: 360,
-        onInput: (val: number) => this.color.hue !== val && this.$emit('update:color', fromHSVA({ ...this.color.hsva, h: val })),
+        staticClass: 'v-color-picker__hue',
+        props: {
+          thumbColor: 'grey lighten-2',
+          hideDetails: true,
+          value: this.color.hue,
+          step: 0,
+          min: 0,
+          max: 360,
+        },
+        on: {
+          input: (val: number) => this.color.hue !== val && this.$emit('update:color', fromHSVA({ ...this.color.hsva, h: val })),
+        },
       })
     },
     genTrack (options: VNodeData): VNode {
-      return h(VSlider, {
+      return this.$createElement(VSlider, {
         class: 'v-color-picker__track',
         ...options,
-        disabled: this.disabled,
-        ...options.props
+        props: {
+          disabled: this.disabled,
+          ...options.props,
+        },
       })
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h('div', {
-      class: ['v-color-picker__preview', {
+      staticClass: 'v-color-picker__preview',
+      class: {
         'v-color-picker__preview--hide-alpha': this.hideAlpha,
-      }],
+      },
     }, [
       this.genDot(),
       this.genSliders(),

package/src/components/VColorPicker/VColorPickerSwatches.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VColorPickerSwatches.sass'
 
@@ -57,20 +56,22 @@ export default mixins(Themeable).extend({
 
   methods: {
     genColor (color: string) {
-      const content = h('div', {
+      const content = this.$createElement('div', {
         style: {
           background: color,
         },
       }, [
-        deepEqual(this.color, parseColor(color, null)) && h(VIcon, {
-          small: true,
-          dark: contrastRatio(this.color.rgba, white) > 2 && this.color.alpha > 0.5,
-          light: contrastRatio(this.color.rgba, black) > 2 && this.color.alpha > 0.5
+        deepEqual(this.color, parseColor(color, null)) && this.$createElement(VIcon, {
+          props: {
+            small: true,
+            dark: contrastRatio(this.color.rgba, white) > 2 && this.color.alpha > 0.5,
+            light: contrastRatio(this.color.rgba, black) > 2 && this.color.alpha > 0.5,
+          },
         }, '$success'),
       ])
 
-      return h('div', {
-        class: 'v-color-picker__color',
+      return this.$createElement('div', {
+        staticClass: 'v-color-picker__color',
         on: {
           // TODO: Less hacky way of catching transparent
           click: () => this.disabled || this.$emit('update:color', fromHex(color === 'transparent' ? '#00000000' : color)),
@@ -81,22 +82,22 @@ export default mixins(Themeable).extend({
       return this.swatches.map(swatch => {
         const colors = swatch.map(this.genColor)
 
-        return h('div', {
-          class: 'v-color-picker__swatch',
+        return this.$createElement('div', {
+          staticClass: 'v-color-picker__swatch',
         }, colors)
       })
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h('div', {
-      class: 'v-color-picker__swatches',
+      staticClass: 'v-color-picker__swatches',
       style: {
         maxWidth: convertToUnit(this.maxWidth),
         maxHeight: convertToUnit(this.maxHeight),
       },
     }, [
-      h('div', this.genSwatches()),
+      this.$createElement('div', this.genSwatches()),
     ])
   },
 })

package/src/components/VCombobox/VCombobox.ts

@@ -10,14 +10,11 @@ import { keyCodes } from '../../util/helpers'
 
 // Types
 import { PropValidator } from 'vue/types/options'
-import { defineComponent } from 'vue'
 
 /* @vue/component */
-export default defineComponent({
+export default VAutocomplete.extend({
   name: 'v-combobox',
 
-  extends: VAutocomplete,
-
   props: {
     delimiters: {
       type: Array,
@@ -40,7 +37,7 @@ export default defineComponent({
         : (this.internalSearch || '').toString().length
     },
     hasSlot (): boolean {
-      return VSelect.computed.hasSlot.call(this) || this.multiple
+      return VSelect.options.computed.hasSlot.call(this) || this.multiple
     },
     isAnyValueAllowed (): boolean {
       return true
@@ -73,29 +70,32 @@ export default defineComponent({
       this.updateMenuDimensions()
     },
     genInput () {
-      const input = VAutocomplete.methods.genInput.call(this)
+      const input = VAutocomplete.options.methods.genInput.call(this)
 
-      delete input.props.name
-      input.onPaste = this.onPaste
+      delete input.data!.attrs!.name
+      input.data!.on!.paste = this.onPaste
 
       return input
     },
     genChipSelection (item: object, index: number) {
-      const chip = VSelect.methods.genChipSelection.call(this, item, index)
+      const chip = VSelect.options.methods.genChipSelection.call(this, item, index)
 
       // Allow user to update an existing value
       if (this.multiple) {
-        chip.props.onDblclick = () => {
-          this.editingIndex = index
-          this.internalSearch = this.getText(item)
-          this.selectedIndex = -1
+        chip.componentOptions!.listeners! = {
+          ...chip.componentOptions!.listeners!,
+          dblclick: () => {
+            this.editingIndex = index
+            this.internalSearch = this.getText(item)
+            this.selectedIndex = -1
+          },
         }
       }
 
       return chip
     },
     onChipInput (item: object) {
-      VSelect.methods.onChipInput.call(this, item)
+      VSelect.options.methods.onChipInput.call(this, item)
 
       this.editingIndex = -1
     },
@@ -115,7 +115,7 @@ export default defineComponent({
         e.ctrlKey ||
         ![keyCodes.home, keyCodes.end].includes(keyCode)
       ) {
-        VSelect.methods.onKeyDown.call(this, e)
+        VSelect.options.methods.onKeyDown.call(this, e)
       }
 
       // If user is at selection index of 0
@@ -149,14 +149,14 @@ export default defineComponent({
         return this.updateTags()
       }
 
-      VAutocomplete.methods.onTabDown.call(this, e)
+      VAutocomplete.options.methods.onTabDown.call(this, e)
     },
     selectItem (item: object) {
       // Currently only supports items:<string[]>
       if (this.editingIndex > -1) {
         this.updateEditing()
       } else {
-        VAutocomplete.methods.selectItem.call(this, item)
+        VAutocomplete.options.methods.selectItem.call(this, item)
 
         // if selected item contains search value,
         // remove the search string
@@ -179,7 +179,7 @@ export default defineComponent({
       }
     },
     setValue (value?: any) {
-      VSelect.methods.setValue.call(this, value === undefined ? this.internalSearch : value)
+      VSelect.options.methods.setValue.call(this, value === undefined ? this.internalSearch : value)
     },
     updateEditing () {
       const value = this.internalValue.slice()
@@ -212,7 +212,7 @@ export default defineComponent({
       if (this.internalSearch !== this.getText(this.internalValue)) this.setValue()
 
       // Reset search if using slot to avoid a double input
-      const isUsingSlot = Boolean(this.$slots.selection) || this.hasChips
+      const isUsingSlot = Boolean(this.$scopedSlots.selection) || this.hasChips
       if (isUsingSlot) this.internalSearch = null
     },
     updateSelf () {
@@ -267,13 +267,13 @@ export default defineComponent({
       const pastedItemText = event.clipboardData?.getData('text/vnd.vuetify.autocomplete.item+plain')
       if (pastedItemText && this.findExistingIndex(pastedItemText as any) === -1) {
         event.preventDefault()
-        VSelect.methods.selectItem.call(this, pastedItemText as any)
+        VSelect.options.methods.selectItem.call(this, pastedItemText as any)
       }
     },
     clearableCallback () {
       this.editingIndex = -1
 
-      VAutocomplete.methods.clearableCallback.call(this)
+      VAutocomplete.options.methods.clearableCallback.call(this)
     },
   },
 })

package/src/components/VContent/VContent.ts

@@ -1,24 +1,21 @@
-import {h} from 'vue'
 // Types
-import { VNode, defineComponent } from 'vue'
+import { VNode } from 'vue'
 
 // Extensions
 import VMain from '../VMain/VMain'
 import { deprecate } from '../../util/console'
 
 /* @vue/component */
-export default defineComponent({
+export default VMain.extend({
   name: 'v-main',
 
-  extends: VMain,
-
   created () {
     deprecate('v-content', 'v-main', this)
   },
 
-  render (): VNode {
+  render (h): VNode {
     // Add the legacy class names
-    const node = VMain.render.call(this, h)
+    const node = VMain.options.render.call(this, h)
 
     node.data!.staticClass += ' v-content'
     node.children![0]!.data!.staticClass += ' v-content__wrap'

package/src/components/VCounter/VCounter.ts

@@ -5,7 +5,7 @@ import './VCounter.sass'
 import Themeable, { functionalThemeClasses } from '../../mixins/themeable'
 
 // Types
-import { VNode, h } from 'vue'
+import { VNode } from 'vue'
 import mixins from '../../util/mixins'
 
 /* @vue/component */
@@ -22,18 +22,18 @@ export default mixins(Themeable).extend({
     max: [Number, String],
   },
 
-  render (): VNode {
-    const props  = this.$props
+  render (h, ctx): VNode {
+    const { props } = ctx
     const max = parseInt(props.max, 10)
     const value = parseInt(props.value, 10)
     const content = max ? `${value} / ${max}` : String(props.value)
     const isGreater = max && (value > max)
 
     return h('div', {
+      staticClass: 'v-counter',
       class: {
-        'v-counter': true,
         'error--text': isGreater,
-        ...functionalThemeClasses(this),
+        ...functionalThemeClasses(ctx),
       },
     }, content)
   },

package/src/components/VData/VData.ts

@@ -1,6 +1,6 @@
 // Helpers
 import { wrapInArray, sortItems, deepEqual, groupItems, searchItems, fillArray } from '../../util/helpers'
-import { defineComponent, VNode } from 'vue'
+import Vue, { VNode } from 'vue'
 
 // Types
 import {
@@ -14,7 +14,7 @@ import {
 } from 'vuetify/types'
 import { PropValidator } from 'vue/types/options'
 
-export default defineComponent({
+export default Vue.extend({
   name: 'v-data',
 
   inheritAttrs: false,
@@ -376,6 +376,6 @@ export default defineComponent({
   },
 
   render (): VNode {
-    return this.$slots.default && this.$slots.default(this.scopedProps)[0] as any
+    return this.$scopedSlots.default && this.$scopedSlots.default(this.scopedProps) as any
   },
 })

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

@@ -27,7 +27,7 @@ describe('VData.ts', () => {
       },
       scopedSlots: {
         default (data) {
-          return h('div', data.items.map(item => h('div', [item.text])))
+          return this.$createElement('div', data.items.map(item => this.$createElement('div', [item.text])))
         },
       },
     })
@@ -380,8 +380,8 @@ describe('VData.ts', () => {
       },
       scopedSlots: {
         default (props) {
-          const items = props.items.map(item => h('div', [item.text]))
-          return h('div', {
+          const items = props.items.map(item => this.$createElement('div', [item.text]))
+          return this.$createElement('div', {
             attrs: {
               id: 'wrapper',
             },
@@ -420,8 +420,8 @@ describe('VData.ts', () => {
       },
       scopedSlots: {
         default (props) {
-          const items = props.items.map(item => h('div', [`${item.group}-${item.text}`]))
-          return h('div', {
+          const items = props.items.map(item => this.$createElement('div', [`${item.group}-${item.text}`]))
+          return this.$createElement('div', {
             attrs: {
               id: 'wrapper',
             },
@@ -460,14 +460,14 @@ describe('VData.ts', () => {
             ? props.groupedItems.map(group => group.name)
             : props.items.map(item => item.text)
 
-          return h('div', {
+          return this.$createElement('div', {
             attrs: {
               id: 'wrapper',
             },
             on: {
               click: () => props.group('group'),
             },
-          }, items.map(item => h('div', [item])))
+          }, items.map(item => this.$createElement('div', [item])))
         },
       },
     })
@@ -540,14 +540,14 @@ describe('VData.ts', () => {
       },
       scopedSlots: {
         default (props) {
-          return h('div', {
+          return this.$createElement('div', {
             attrs: {
               id: 'wrapper',
             },
             on: {
               click: () => props.group('group'),
             },
-          }, props.groupedItems.map(group => h('div', [group.name])))
+          }, props.groupedItems.map(group => this.$createElement('div', [group.name])))
         },
       },
     })

package/src/components/VDataIterator/VDataFooter.ts

@@ -6,12 +6,12 @@ import VIcon from '../VIcon'
 import VBtn from '../VBtn'
 
 // Types
-import { defineComponent, VNode, VNodeChildrenArrayContents, PropType, h } from 'vue'
+import Vue, { VNode, VNodeChildrenArrayContents, PropType } from 'vue'
 import { DataPagination, DataOptions, DataItemsPerPageOption } from 'vuetify/types'
 import { PropValidator } from 'vue/types/options'
-import { getSlot, normalizeAttrs } from '../../util/helpers'
+import { getSlot } from '../../util/helpers'
 
-export default defineComponent({
+export default Vue.extend({
   name: 'v-data-footer',
 
   props: {
@@ -108,20 +108,26 @@ export default defineComponent({
 
       if (!computedIPPO.find(ippo => ippo.value === value)) value = computedIPPO[0]
 
-      return h('div', {
-        class: 'v-data-footer__select',
+      return this.$createElement('div', {
+        staticClass: 'v-data-footer__select',
       }, [
         this.$vuetify.lang.t(this.itemsPerPageText),
-        h(VSelect, normalizeAttrs({
-          'aria-label': this.$vuetify.lang.t(this.itemsPerPageText),
-          disabled: this.disableItemsPerPage,
-          items: computedIPPO,
-          modelValue: value,
-          hideDetails: true,
-          auto: true,
-          minWidth: '75px',
-          onInput: this.onChangeItemsPerPage,
-        })),
+        this.$createElement(VSelect, {
+          attrs: {
+            'aria-label': this.$vuetify.lang.t(this.itemsPerPageText),
+          },
+          props: {
+            disabled: this.disableItemsPerPage,
+            items: computedIPPO,
+            value,
+            hideDetails: true,
+            auto: true,
+            minWidth: '75px',
+          },
+          on: {
+            input: this.onChangeItemsPerPage,
+          },
+        }),
       ])
     },
     genPaginationInfo () {
@@ -136,27 +142,33 @@ export default defineComponent({
           ? itemsLength
           : this.pagination.pageStop
 
-        children = this.$slots['page-text']
-          ? [this.$slots['page-text']!({ pageStart, pageStop, itemsLength })]
+        children = this.$scopedSlots['page-text']
+          ? [this.$scopedSlots['page-text']!({ pageStart, pageStop, itemsLength })]
           : [this.$vuetify.lang.t(this.pageText, pageStart, pageStop, itemsLength)]
-      } else if (this.$slots['page-text']) {
-        children = [this.$slots['page-text']!({ pageStart, pageStop, itemsLength })]
+      } else if (this.$scopedSlots['page-text']) {
+        children = [this.$scopedSlots['page-text']!({ pageStart, pageStop, itemsLength })]
       }
 
-      return h('div', {
+      return this.$createElement('div', {
         class: 'v-data-footer__pagination',
       }, children)
     },
     genIcon (click: Function, disabled: boolean, label: string, icon: string): VNode {
-      return h(VBtn, {
-        disabled: disabled || this.disablePagination,
-        icon: true,
-        text: true,
-        // dark: this.dark, // TODO: add mixin
-        // light: this.light // TODO: add mixin
-        onClick: click,
-        'aria-label': label, // TODO: Localization
-      }, [h(VIcon, icon)])
+      return this.$createElement(VBtn, {
+        props: {
+          disabled: disabled || this.disablePagination,
+          icon: true,
+          text: true,
+          // dark: this.dark, // TODO: add mixin
+          // light: this.light // TODO: add mixin
+        },
+        on: {
+          click,
+        },
+        attrs: {
+          'aria-label': label, // TODO: Localization
+        },
+      }, [this.$createElement(VIcon, icon)])
     },
     genIcons () {
       const before: VNodeChildrenArrayContents = []
@@ -193,20 +205,20 @@ export default defineComponent({
       }
 
       return [
-        h('div', {
-          class: 'v-data-footer__icons-before',
+        this.$createElement('div', {
+          staticClass: 'v-data-footer__icons-before',
         }, before),
-        this.showCurrentPage && h('span', [this.options.page.toString()]),
-        h('div', {
-          class: 'v-data-footer__icons-after',
+        this.showCurrentPage && this.$createElement('span', [this.options.page.toString()]),
+        this.$createElement('div', {
+          staticClass: 'v-data-footer__icons-after',
         }, after),
       ]
     },
   },
 
   render (): VNode {
-    return h('div', {
-      class: 'v-data-footer',
+    return this.$createElement('div', {
+      staticClass: 'v-data-footer',
     }, [
       getSlot(this, 'prepend'),
       this.genItemsPerPageSelect(),