@dimailn/vuetify 2.7.2-alpha2 → 2.7.2-superbundle

package/src/components/VAppBar/VAppBarTitle.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Mixins
 import { inject } from '../../mixins/registrable'
 
@@ -20,9 +19,8 @@ interface options extends ExtractVue<typeof base> {
   }
 }
 
-export default {
+export default base.extend<options>().extend({
   name: 'v-app-bar-title',
-  extends: base,
 
   data: () => ({
     contentWidth: 0,
@@ -61,7 +59,7 @@ export default {
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     return h('div', {
       class: 'v-toolbar__title v-app-bar-title',
     }, [
@@ -79,4 +77,4 @@ export default {
       }, getSlot(this)),
     ])
   },
-}
+})

package/src/components/VAutocomplete/VAutocomplete.ts

@@ -14,7 +14,7 @@ import {
 } from '../../util/helpers'
 
 // Types
-import { PropType, VNode, defineComponent } from 'vue'
+import { PropType, VNode } from 'vue'
 import { PropValidator } from 'vue/types/options'
 
 const defaultMenuProps = {
@@ -25,9 +25,8 @@ const defaultMenuProps = {
 }
 
 /* @vue/component */
-export default defineComponent({
+export default VSelect.extend({
   name: 'v-autocomplete',
-  extends: VSelect,
 
   props: {
     autoSelectFirst: {
@@ -42,7 +41,7 @@ export default defineComponent({
     } as PropValidator<(item: any, queryText: string, itemText: string) => boolean>,
     hideNoData: Boolean,
     menuProps: {
-      type: VSelect.props.menuProps.type,
+      type: VSelect.options.props.menuProps.type,
       default: () => defaultMenuProps,
     },
     noFilter: Boolean,
@@ -60,7 +59,7 @@ export default defineComponent({
   computed: {
     classes (): object {
       return {
-        ...VSelect.computed.classes.call(this),
+        ...VSelect.options.computed.classes.call(this),
         'v-autocomplete': true,
         'v-autocomplete--is-selecting-index': this.selectedIndex > -1,
       }
@@ -125,7 +124,7 @@ export default defineComponent({
       return this.hasDisplayedItems || !this.hideNoData
     },
     $_menuProps (): object {
-      const props = VSelect.computed.$_menuProps.call(this);
+      const props = VSelect.options.computed.$_menuProps.call(this);
       (props as any).contentClass = `v-autocomplete__content ${(props as any).contentClass || ''}`.trim()
       return {
         ...defaultMenuProps,
@@ -144,7 +143,7 @@ export default defineComponent({
       })
     },
     listData () {
-      const data = VSelect.computed.listData.call(this) as any
+      const data = VSelect.options.computed.listData.call(this) as any
 
       data.props = {
         ...data.props,
@@ -308,29 +307,31 @@ export default defineComponent({
     clearableCallback () {
       this.internalSearch = null
 
-      VSelect.methods.clearableCallback.call(this)
+      VSelect.options.methods.clearableCallback.call(this)
     },
     genInput () {
-      const input = VTextField.methods.genInput.call(this)
-
-      input.data = mergeData(input.props!, {
-        'aria-activedescendant': getObjectValueByPath(this.$refs.menu, 'activeTile.id'),
-        autocomplete: getObjectValueByPath(input.data!, 'attrs.autocomplete', 'off'),
-        value: this.internalSearch,
+      const input = VTextField.options.methods.genInput.call(this)
+
+      input.data = mergeData(input.data!, {
+        attrs: {
+          'aria-activedescendant': getObjectValueByPath(this.$refs.menu, 'activeTile.id'),
+          autocomplete: getObjectValueByPath(input.data!, 'attrs.autocomplete', 'off'),
+        },
+        domProps: { value: this.internalSearch },
       })
 
       return input
     },
     genInputSlot () {
-      const slot = VSelect.methods.genInputSlot.call(this)
+      const slot = VSelect.options.methods.genInputSlot.call(this)
 
-      slot.props.role = 'combobox'
+      slot.data!.attrs!.role = 'combobox'
 
       return slot
     },
     genSelections (): VNode | never[] {
       return this.hasSlot || this.multiple
-        ? VSelect.methods.genSelections.call(this)
+        ? VSelect.options.methods.genSelections.call(this)
         : []
     },
     onClick (e: MouseEvent) {
@@ -366,7 +367,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)
       }
 
       // The ordering is important here
@@ -377,7 +378,7 @@ export default defineComponent({
     },
     onSpaceDown (e: KeyboardEvent) { /* noop */ },
     onTabDown (e: KeyboardEvent) {
-      VSelect.methods.onTabDown.call(this, e)
+      VSelect.options.methods.onTabDown.call(this, e)
       this.updateSelf()
     },
     onUpDown (e: Event) {
@@ -390,11 +391,11 @@ export default defineComponent({
       this.activateMenu()
     },
     selectItem (item: object) {
-      VSelect.methods.selectItem.call(this, item)
+      VSelect.options.methods.selectItem.call(this, item)
       this.setSearch()
     },
     setSelectedItems () {
-      VSelect.methods.setSelectedItems.call(this)
+      VSelect.options.methods.setSelectedItems.call(this)
 
       // #4273 Don't replace if searching
       // #4403 Don't replace if focused

package/src/components/VAvatar/VAvatar.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 import './VAvatar.sass'
 
 // Mixins
@@ -48,11 +47,12 @@ export default mixins(
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const data = {
-      class: ['v-avatar', this.classes],
+      staticClass: 'v-avatar',
+      class: this.classes,
       style: this.styles,
-      ...this.$listeners,
+      on: this.$listeners,
     }
 
     return h('div', this.setBackgroundColor(this.color, data), getSlot(this))

package/src/components/VBadge/VBadge.ts

@@ -1,4 +1,3 @@
-import {Transition, h} from 'vue'
 // Styles
 import './VBadge.sass'
 
@@ -11,7 +10,7 @@ import Themeable from '../../mixins/themeable'
 import Toggleable from '../../mixins/toggleable'
 import Transitionable from '../../mixins/transitionable'
 import { factory as PositionableFactory } from '../../mixins/positionable'
-import mergeData from '../../util/mergeData'
+
 // Utilities
 import mixins from '../../util/mixins'
 import {
@@ -129,27 +128,31 @@ export default mixins(
       const label = this.$attrs['aria-label'] || lang.t(this.label)
 
       const data = this.setBackgroundColor(this.color, {
-        class: 'v-badge__badge',
+        staticClass: 'v-badge__badge',
         style: this.styles,
-        'aria-atomic': this.$attrs['aria-atomic'] || 'true',
-        'aria-label': label,
-        'aria-live': this.$attrs['aria-live'] || 'polite',
-        title: this.$attrs.title,
-        role: this.$attrs.role || 'status',
+        attrs: {
+          'aria-atomic': this.$attrs['aria-atomic'] || 'true',
+          'aria-label': label,
+          'aria-live': this.$attrs['aria-live'] || 'polite',
+          title: this.$attrs.title,
+          role: this.$attrs.role || 'status',
+        },
         directives: [{
           name: 'show',
           value: this.isActive,
         }],
       })
 
-      const badge = h('span', data, [this.genBadgeContent()])
+      const badge = this.$createElement('span', data, [this.genBadgeContent()])
 
       if (!this.transition) return badge
 
-      return h(Transition, {
-        name: this.transition,
-        origin: this.origin,
-        mode: this.mode,
+      return this.$createElement('transition', {
+        props: {
+          name: this.transition,
+          origin: this.origin,
+          mode: this.mode,
+        },
       }, [badge])
     },
     genBadgeContent () {
@@ -160,18 +163,18 @@ export default mixins(
 
       if (slot) return slot
       if (this.content) return String(this.content)
-      if (this.icon) return h(VIcon, this.icon)
+      if (this.icon) return this.$createElement(VIcon, this.icon)
 
       return undefined
     },
     genBadgeWrapper () {
-      return h('span', {
-        class: 'v-badge__wrapper',
+      return this.$createElement('span', {
+        staticClass: 'v-badge__wrapper',
       }, [this.genBadge()])
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const badge = [this.genBadgeWrapper()]
     const children = [getSlot(this)]
     const {
@@ -186,9 +189,10 @@ export default mixins(
     if (this.inline && this.left) children.unshift(badge)
     else children.push(badge)
 
-    return h('span', mergeData({
-      class: ['v-badge', this.classes]
-    }, attrs)
-    , children)
+    return h('span', {
+      staticClass: 'v-badge',
+      attrs,
+      class: this.classes,
+    }, children)
   },
 })

package/src/components/VBanner/VBanner.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VBanner.sass'
 
@@ -46,7 +45,7 @@ export default mixins(
   computed: {
     classes (): object {
       return {
-        ...VSheet.computed.classes.call(this),
+        ...VSheet.options.computed.classes.call(this),
         'v-banner--has-icon': this.hasIcon,
         'v-banner--is-mobile': this.isMobile,
         'v-banner--single-line': this.singleLine,
@@ -54,13 +53,13 @@ export default mixins(
       }
     },
     hasIcon (): boolean {
-      return Boolean(this.icon || this.$slots.icon || this.$slots.icon)
+      return Boolean(this.icon || this.$slots.icon || this.$scopedSlots.icon)
     },
     isSticky (): boolean {
       return this.sticky || this.app
     },
     styles (): object {
-      const styles: Record<string, any> = { ...VSheet.computed.styles.call(this) }
+      const styles: Record<string, any> = { ...VSheet.options.computed.styles.call(this) }
 
       if (this.isSticky) {
         const top = !this.app
@@ -90,24 +89,30 @@ export default mixins(
       let content
 
       if (this.icon) {
-        content = h(VIcon, {
-          color: this.iconColor,
-          size: 28
+        content = this.$createElement(VIcon, {
+          props: {
+            color: this.iconColor,
+            size: 28,
+          },
         }, [this.icon])
       } else {
         content = getSlot(this, 'icon')
       }
 
-      return h(VAvatar, {
-        class: 'v-banner__icon',
-        color: this.color,
-        size: 40,
-        onClick: this.iconClick,
+      return this.$createElement(VAvatar, {
+        staticClass: 'v-banner__icon',
+        props: {
+          color: this.color,
+          size: 40,
+        },
+        on: {
+          click: this.iconClick,
+        },
       }, [content])
     },
     genText () {
-      return h('div', {
-        class: 'v-banner__text',
+      return this.$createElement('div', {
+        staticClass: 'v-banner__text',
       }, getSlot(this))
     },
     genActions () {
@@ -117,21 +122,21 @@ export default mixins(
 
       if (!children) return undefined
 
-      return h('div', {
-        class: 'v-banner__actions',
+      return this.$createElement('div', {
+        staticClass: 'v-banner__actions',
       }, children)
     },
     genContent () {
-      return h('div', {
-        class: 'v-banner__content',
+      return this.$createElement('div', {
+        staticClass: 'v-banner__content',
       }, [
         this.genIcon(),
         this.genText(),
       ])
     },
     genWrapper () {
-      return h('div', {
-        class: 'v-banner__wrapper',
+      return this.$createElement('div', {
+        staticClass: 'v-banner__wrapper',
       }, [
         this.genContent(),
         this.genActions(),
@@ -139,9 +144,9 @@ export default mixins(
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const data = {
-      class: 'v-banner',
+      staticClass: 'v-banner',
       attrs: this.attrs$,
       class: this.classes,
       style: this.styles,

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

@@ -170,11 +170,11 @@ describe('VBanner.ts', () => {
       },
       scopedSlots: {
         actions (props) {
-          return h('div', {
+          return this.$createElement('div', {
             on: {
               click: props.dismiss,
             },
-            class: 'test',
+            staticClass: 'test',
           })
         },
       },

package/src/components/VBottomNavigation/VBottomNavigation.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VBottomNavigation.sass'
 
@@ -69,7 +68,7 @@ export default mixins(
   computed: {
     canScroll (): boolean {
       return (
-        Scrollable.computed.canScroll.call(this) &&
+        Scrollable.options.computed.canScroll.call(this) &&
         (
           this.hideOnScroll ||
           !this.inputValue
@@ -127,18 +126,21 @@ export default mixins(
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const data = this.setBackgroundColor(this.backgroundColor, {
-      class: ['v-bottom-navigation', this.classes],
+      staticClass: 'v-bottom-navigation',
+      class: this.classes,
       style: this.styles,
-      activeClass: this.activeClass,
-      mandatory: Boolean(
-        this.mandatory ||
-        this.value !== undefined
-      ),
-      tag: this.tag,
-      value: this.internalValue,
-      onChange: this.updateValue
+      props: {
+        activeClass: this.activeClass,
+        mandatory: Boolean(
+          this.mandatory ||
+          this.value !== undefined
+        ),
+        tag: this.tag,
+        value: this.internalValue,
+      },
+      on: { change: this.updateValue },
     })
 
     if (this.canScroll) {

package/src/components/VBottomSheet/VBottomSheet.ts

@@ -2,12 +2,10 @@ import './VBottomSheet.sass'
 
 // Extensions
 import VDialog from '../VDialog/VDialog'
-import { defineComponent } from 'vue'
 
 /* @vue/component */
-export default defineComponent({
+export default VDialog.extend({
   name: 'v-bottom-sheet',
-  extends: VDialog,
 
   props: {
     inset: Boolean,
@@ -21,7 +19,7 @@ export default defineComponent({
   computed: {
     classes (): object {
       return {
-        ...VDialog.computed.classes.call(this),
+        ...VDialog.options.computed.classes.call(this),
         'v-bottom-sheet': true,
         'v-bottom-sheet--inset': this.inset,
       }

package/src/components/VBreadcrumbs/VBreadcrumbs.ts

@@ -1,4 +1,3 @@
-import {h} from 'vue'
 // Styles
 import './VBreadcrumbs.sass'
 
@@ -46,11 +45,11 @@ export default mixins(
 
   methods: {
     genDivider () {
-      return h(VBreadcrumbsDivider, this.$slots.divider ? this.$slots.divider : this.divider)
+      return this.$createElement(VBreadcrumbsDivider, this.$slots.divider ? this.$slots.divider : this.divider)
     },
     genItems () {
       const items = []
-      const hasSlot = !!this.$slots.item
+      const hasSlot = !!this.$scopedSlots.item
       const keys = []
 
       for (let i = 0; i < this.items.length; i++) {
@@ -58,8 +57,8 @@ export default mixins(
 
         keys.push(item.text)
 
-        if (hasSlot) items.push(this.$slots.item!({ item }))
-        else items.push(h(VBreadcrumbsItem, { key: keys.join('.'), ...item }, [item.text]))
+        if (hasSlot) items.push(this.$scopedSlots.item!({ item }))
+        else items.push(this.$createElement(VBreadcrumbsItem, { key: keys.join('.'), props: item }, [item.text]))
 
         if (i < this.items.length - 1) items.push(this.genDivider())
       }
@@ -68,11 +67,12 @@ export default mixins(
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const children = getSlot(this) || this.genItems()
 
     return h('ul', {
-      class: ['v-breadcrumbs', this.classes],
+      staticClass: 'v-breadcrumbs',
+      class: this.classes,
     }, children)
   },
 })

package/src/components/VBreadcrumbs/VBreadcrumbsItem.ts

@@ -1,4 +1,3 @@
-import {h, withDirectives} from 'vue'
 import Routable from '../../mixins/routable'
 
 import mixins from '../../util/mixins'
@@ -31,14 +30,17 @@ export default mixins(Routable).extend({
     },
   },
 
-  render (): VNode {
-    const { tag, data, directives } = this.generateRouteLink()
+  render (h): VNode {
+    const { tag, data } = this.generateRouteLink()
 
-    return withDirectives(h('li', [
+    return h('li', [
       h(tag, {
         ...data,
-        'aria-current': this.isActive && this.isLink ? 'page' : undefined,
+        attrs: {
+          ...data.attrs,
+          'aria-current': this.isActive && this.isLink ? 'page' : undefined,
+        },
       }, getSlot(this)),
-    ]), directives)
+    ])
   },
 })

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

@@ -68,7 +68,7 @@ describe('VBreadcrumbs.ts', () => {
       },
       scopedSlots: {
         item (props) {
-          return h(VBreadcrumbsItem, {
+          return this.$createElement(VBreadcrumbsItem, {
             key: props.item.text,
           }, props.item.text.toUpperCase())
         },

package/src/components/VBtn/VBtn.ts

@@ -19,13 +19,11 @@ import Sizeable from '../../mixins/sizeable'
 import mixins, { ExtractVue } from '../../util/mixins'
 import { breaking } from '../../util/console'
 import { getSlot } from '../../util/helpers'
-import mergeData from '../../util/mergeData'
 
 // Types
-import { VNode, withDirectives } from 'vue'
+import { VNode } from 'vue'
 import { PropValidator, PropType } from 'vue/types/options'
 import { RippleOptions } from '../../directives/ripple'
-import {h} from 'vue'
 
 const baseMixins = mixins(
   VSheet,
@@ -40,12 +38,17 @@ interface options extends ExtractVue<typeof baseMixins> {
   $el: HTMLElement
 }
 
-export default baseMixins.extend({
+export default baseMixins.extend<options>().extend({
   name: 'v-btn',
-  inheritAttrs: false,
+
   props: {
     activeClass: {
       type: String,
+      default (): string | undefined {
+        if (!this.btnToggle) return ''
+
+        return this.btnToggle.activeClass
+      },
     } as any as PropValidator<string>,
     block: Boolean,
     depressed: Boolean,
@@ -77,7 +80,7 @@ export default baseMixins.extend({
     classes (): any {
       return {
         'v-btn': true,
-        ...Routable.computed.classes.call(this),
+        ...Routable.options.computed.classes.call(this),
         'v-btn--absolute': this.absolute,
         'v-btn--block': this.block,
         'v-btn--bottom': this.bottom,
@@ -107,7 +110,7 @@ export default baseMixins.extend({
     computedElevation (): string | number | undefined {
       if (this.disabled) return undefined
 
-      return Elevatable.computed.computedElevation.call(this)
+      return Elevatable.options.computed.computedElevation.call(this)
     },
     computedRipple (): RippleOptions | boolean {
       const defaultRipple = this.icon || this.fab ? { circle: true } : true
@@ -159,57 +162,45 @@ export default baseMixins.extend({
       // TODO: Remove this in v3
       !this.retainFocusOnClick && !this.fab && e.detail && this.$el.blur()
       this.$emit('click', e)
-      this.$emitLegacy('click', e)
-
 
       this.btnToggle && this.toggle()
     },
     genContent (): VNode {
-      return h('span', {
-        class: 'v-btn__content',
+      return this.$createElement('span', {
+        staticClass: 'v-btn__content',
       }, getSlot(this))
     },
     genLoader (): VNode {
-      return h('span', {
+      return this.$createElement('span', {
         class: 'v-btn__loader',
-      }, getSlot(this, 'loader') || [h(VProgressCircular, {
-        indeterminate: true,
-        size: 23,
-        width: 2
+      }, getSlot(this, 'loader') || [this.$createElement(VProgressCircular, {
+        props: {
+          indeterminate: true,
+          size: 23,
+          width: 2,
+        },
       })])
     },
   },
 
-  render (): VNode {
+  render (h): VNode {
     const children = [
       this.genContent(),
       this.loading && this.genLoader(),
     ]
-    const { tag, data: linkData, directives } = this.generateRouteLink()
+    const { tag, data } = this.generateRouteLink()
     const setColor = this.hasBg
       ? this.setBackgroundColor
       : this.setTextColor
 
-    let data = {}
-
     if (tag === 'button') {
-      data.type = this.type
-      data.disabled = this.disabled
+      data.attrs!.type = this.type
+      data.attrs!.disabled = this.disabled
     }
-    data.value = ['string', 'number'].includes(typeof this.value)
+    data.attrs!.value = ['string', 'number'].includes(typeof this.value)
       ? this.value
       : JSON.stringify(this.value)
 
-    data = {
-      ...data,
-      ...linkData
-    }
-
-    data = mergeData(data, { class: this.$attrs.class })
-
-    return withDirectives(
-      h(tag, this.disabled ? data : setColor(this.color, data), children),
-      directives
-    )
+    return h(tag, this.disabled ? data : setColor(this.color, data), children)
   },
 })