@dimailn/vuetify 2.7.2-alpha39 → 2.7.2-alpha40

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dimailn/vuetify",
   "description": "Vue Material Component Framework",
-  "version": "2.7.2-alpha39",
+  "version": "2.7.2-alpha40",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"

package/src/components/VChip/VChip.ts

@@ -17,7 +17,7 @@ import Sizeable from '../../mixins/sizeable'
 
 // Utilities
 import { breaking } from '../../util/console'
-import { getSlot } from '../../util/helpers'
+import { getSlot, getTagValue } from '../../util/helpers'
 
 // Types
 import { PropValidator, PropType } from 'vue/types/options'
@@ -197,7 +197,7 @@ export default mixins(
     const color = this.textColor || (this.outlined && this.color)
 
     return withDirectives(
-      h(tag, this.setTextColor(color, data), children),
+      h(getTagValue(tag), this.setTextColor(color, data), children),
       directives
     )
   },

package/src/components/VContent/VContent.ts

@@ -5,7 +5,7 @@ import { VNode, defineComponent } from 'vue'
 // Extensions
 import VMain from '../VMain/VMain'
 import { deprecate } from '../../util/console'
-import { normalizeClasses } from '../../util/helpers'
+import { normalizeClasses, getTagValue } from '../../util/helpers'
 
 /* @vue/component */
 export default defineComponent({
@@ -31,6 +31,6 @@ export default defineComponent({
       node.children[0].data = { ...node.children[0].data, class: wrapClasses }
     }
 
-    return h(node.tag, node.data, node.children)
+    return h(getTagValue(this.tag), node.data, node.children)
   },
 })

package/src/components/VFooter/VFooter.ts

@@ -11,7 +11,7 @@ import SSRBootable from '../../mixins/ssr-bootable'
 
 // Utilities
 import mixins from '../../util/mixins'
-import { convertToUnit, getSlot } from '../../util/helpers'
+import { convertToUnit, getSlot, getTagValue } from '../../util/helpers'
 
 // Types
 import { VNode } from 'vue/types/vnode'
@@ -111,6 +111,6 @@ export default mixins(
       style: this.styles,
     })
 
-    return h(this.tag, data, getSlot(this))
+    return h(getTagValue(this.tag), data, getSlot(this))
   },
 })

package/src/components/VGrid/VCol.ts

@@ -2,7 +2,7 @@ import './VGrid.sass'
 
 import { defineComponent, VNode, PropOptions, getCurrentInstance } from 'vue'
 import mergeData from '../../util/mergeData'
-import { upperFirst } from '../../util/helpers'
+import { upperFirst, getTagValue } from '../../util/helpers'
 import {h} from 'vue'
 // no xs
 const breakpoints = ['sm', 'md', 'lg', 'xl']
@@ -134,6 +134,6 @@ export default defineComponent({
       cache.set(cacheKey, classList)
     }
 
-    return h(props.tag, mergeData({ class: classList }, data), children)
+    return h(getTagValue(props.tag), mergeData({ class: classList }, data), children)
   },
 })

package/src/components/VGrid/VContainer.ts

@@ -6,6 +6,8 @@ import Grid from './grid'
 import mergeData from '../../util/mergeData'
 import { defineComponent, h } from 'vue'
 
+import { getTagValue } from '../../util/helpers'
+
 /* @vue/component */
 export default defineComponent({
   name: 'v-container',
@@ -60,7 +62,7 @@ export default defineComponent({
     }
 
     return h(
-      this.tag,
+      getTagValue(this.tag),
       data,
       this.$slots.default?.()
     )

package/src/components/VGrid/VRow.ts

@@ -2,7 +2,7 @@ import './VGrid.sass'
 
 import { defineComponent, PropOptions } from 'vue'
 import mergeData from '../../util/mergeData'
-import { upperFirst } from '../../util/helpers'
+import { upperFirst, getTagValue } from '../../util/helpers'
 import {h} from 'vue'
 // no xs
 const breakpoints = ['sm', 'md', 'lg', 'xl']
@@ -128,7 +128,7 @@ export default defineComponent({
     }
 
     return h(
-      props.tag,
+      getTagValue(props.tag),
       mergeData(this.$attrs, {
         class: classList.concat('row'),
       }),

package/src/components/VGrid/grid.ts

@@ -1,6 +1,8 @@
 // Types
 import { defineComponent, VNode, h } from 'vue'
 
+import { getTagValue } from '../../util/helpers'
+
 export default function VGrid (name: string) {
   /* @vue/component */
   return defineComponent({
@@ -49,7 +51,7 @@ export default function VGrid (name: string) {
         data.id = componentProps.id
       }
 
-      return h(componentProps?.tag || 'div', data, children)
+      return h(getTagValue(componentProps?.tag || 'div'), data, children)
     }
   })
 }

package/src/components/VIcon/VIcon.ts

@@ -13,7 +13,7 @@ import { convertToUnit, keys, remapInternalIcon } from '../../util/helpers'
 import { defineComponent, CreateElement, VNode, VNodeChildren, VNodeData, h } from 'vue'
 import mixins from '../../util/mixins'
 import { VuetifyIcon, VuetifyIconComponent } from 'vuetify/types/services/icons'
-import { normalizeAttrs, normalizeClasses } from '../../util/helpers'
+import { normalizeAttrs, normalizeClasses, getTagValue } from '../../util/helpers'
 
 enum SIZE_MAP {
   xSmall = '12px',
@@ -192,7 +192,7 @@ export const VIconInternal = mixins(
 
       this.applyColors(fontData)
 
-      return h(this.hasClickListener ? 'button' : this.tag, fontData, {default: () => newChildren})
+      return h(this.hasClickListener ? 'button' : getTagValue(this.tag), fontData, {default: () => newChildren})
     },
     renderSvgIcon (icon: string): VNode {
       const size = this.getSize()

package/src/components/VItemGroup/VItemGroup.ts

@@ -11,7 +11,7 @@ import Themeable from '../../mixins/themeable'
 // Utilities
 import mixins from '../../util/mixins'
 import { consoleWarn } from '../../util/console'
-import { getSlot } from '../../util/helpers'
+import { getSlot, getTagValue } from '../../util/helpers'
 
 // Types
 import { VNode } from 'vue/types'
@@ -266,7 +266,7 @@ export const BaseItemGroup = mixins(
 
   render (): VNode {
     const data = this.genData()
-    return h(this.tag, {
+    return h(getTagValue(this.tag), {
       class: data.class,
       ...data.attrs,
     }, getSlot(this))

package/src/components/VLazy/VLazy.ts

@@ -8,7 +8,7 @@ import intersect from '../../directives/intersect'
 
 // Utilities
 import mixins from '../../util/mixins'
-import { getSlot } from '../../util/helpers'
+import { getSlot, getTagValue } from '../../util/helpers'
 
 // Types
 import { VNode } from 'vue'
@@ -74,7 +74,7 @@ export default mixins(
   },
 
   render (): VNode {
-    return withDirectives(h(this.tag, {
+    return withDirectives(h(getTagValue(this.tag), {
       class: 'v-lazy',
       ...this.$attrs,
       style: this.styles,

package/src/components/VList/VList.ts

@@ -5,7 +5,7 @@ import VListGroup from './VListGroup'
 
 // Components
 import VSheet from '../VSheet/VSheet'
-import { getSlot } from '../../util/helpers'
+import { getSlot, getTagValue } from '../../util/helpers'
 
 // Types
 import { VNode, defineComponent } from 'vue'
@@ -97,6 +97,6 @@ export default defineComponent({
       ...this.listeners$,
     }
 
-    return h(this.tag, this.setBackgroundColor(this.color, data), getSlot(this))
+    return h(getTagValue(this.tag), this.setBackgroundColor(this.color, data), getSlot(this))
   },
 })

package/src/components/VList/VListItem.ts

@@ -13,7 +13,7 @@ import { factory as ToggleableFactory } from '../../mixins/toggleable'
 import Ripple from '../../directives/ripple'
 
 // Utilities
-import { getSlot, keyCodes } from './../../util/helpers'
+import { getSlot, keyCodes, getTagValue } from './../../util/helpers'
 import mergeData, { mergeClasses } from './../../util/mergeData'
 import { ExtractVue } from './../../util/mixins'
 import { removed, breaking } from '../../util/console'
@@ -224,7 +224,7 @@ export default baseMixins.extend({
     }
 
     const node = typeof tag === 'string'
-      ? h(tag, nodeData, children)
+      ? h(getTagValue(tag), nodeData, children)
       : h(tag, nodeData, () => children)
 
     return withDirectives(node, directives)

package/src/components/VMain/VMain.ts

@@ -3,7 +3,7 @@ import './VMain.sass'
 
 // Mixins
 import SSRBootable from '../../mixins/ssr-bootable'
-import { getSlot } from '../../util/helpers'
+import { getSlot, getTagValue } from '../../util/helpers'
 
 // Types
 import { VNode, defineComponent, h } from 'vue'
@@ -43,7 +43,7 @@ export default defineComponent({
       ref: 'main',
     }
 
-    return h(this.tag, data, [
+    return h(getTagValue(this.tag), data, [
       h(
         'div',
         { class: 'v-main__wrap' },

package/src/components/VMenu/VMenu.ts

@@ -333,7 +333,7 @@ export default baseMixins.extend({
 
       return h(Transition, {
         name: this.transition
-      }, [content])
+      }, () => [content])
     },
     genDirectives (): VNodeDirective[] {
       const directives = [[
@@ -528,7 +528,7 @@ export default baseMixins.extend({
           root: true,
           light: this.light,
           dark: this.dark,
-        }, [this.genTransition()]),
+        }, () => [this.genTransition()]),
       ]),
     ]), directives)
   },

package/src/components/VNavigationDrawer/VNavigationDrawer.ts

@@ -20,7 +20,7 @@ import Resize from '../../directives/resize'
 import Touch from '../../directives/touch'
 
 // Utilities
-import { convertToUnit, getSlot } from '../../util/helpers'
+import { convertToUnit, getSlot, getTagValue } from '../../util/helpers'
 import { breaking } from '../../util/console'
 import mixins from '../../util/mixins'
 
@@ -466,7 +466,8 @@ export default baseMixins.extend({
 
     if (this.src || getSlot(this, 'img')) children.unshift(this.genBackground())
 
-    const node = h(this.$tag, this.setBackgroundColor(this.color, {
+    // this.$tag сейчас всегда равен nav|aside, но оборачиваем в getTagValue на случай возможных изменений
+    const node = h(getTagValue(this.$tag), this.setBackgroundColor(this.color, {
       class: this.classes,
       style: this.styles,
       ...this.genListeners(),

package/src/components/VSheet/VSheet.ts

@@ -12,6 +12,7 @@ import Themeable from '../../mixins/themeable'
 
 // Helpers
 import mixins from '../../util/mixins'
+import { getTagValue } from '../../util/helpers'
 
 // Types
 import { VNode, defineComponent } from 'vue'
@@ -61,7 +62,7 @@ export default defineComponent({
     }
 
     return h(
-      this.tag,
+      getTagValue(this.tag),
       this.setBackgroundColor(this.color, data),
       this.$slots.default?.()
     )

package/src/components/VSlideGroup/VSlideGroup.ts

@@ -325,7 +325,7 @@ export const BaseSlideGroup = mixins<options &
 
       return h(VIcon, {
         disabled: !hasAffix,
-      }, (this as any)[`${icon}Icon`])
+      }, () => (this as any)[`${icon}Icon`])
     },
     // Always generate prev for scrollable hint
     genPrev (): VNode | null {
@@ -342,7 +342,7 @@ export const BaseSlideGroup = mixins<options &
       }, [slot])
     },
     genTransition (location: 'prev' | 'next') {
-      return h(VFadeTransition, {}, [this.genIcon(location)])
+      return h(VFadeTransition, {}, () => [this.genIcon(location)])
     },
     genWrapper (): VNode {
       return withDirectives(h('div', {

package/src/components/VSnackbar/VSnackbar.ts

@@ -180,7 +180,7 @@ export default mixins(
     genTransition () {
       return h(Transition, {
         name: this.transition,
-      }, [this.genWrapper()])
+      }, () => [this.genWrapper()])
     },
     setTimeout () {
       window.clearTimeout(this.activeTimeout)

package/src/components/VStepper/VStepper.ts

@@ -16,7 +16,7 @@ import Proxyable from '../../mixins/proxyable'
 // Utilities
 import mixins from '../../util/mixins'
 import { breaking } from '../../util/console'
-import { getSlot } from '../../util/helpers'
+import { getSlot, getTagValue } from '../../util/helpers'
 
 // Types
 import { VNode } from 'vue'
@@ -135,7 +135,7 @@ export default baseMixins.extend({
   },
 
   render (): VNode {
-    return h(this.tag, {
+    return h(getTagValue(this.tag), {
       class: ['v-stepper', this.classes],
       style: this.styles,
     }, getSlot(this))

package/src/components/VToolbar/VToolbar.ts

@@ -9,7 +9,7 @@ import VSheet from '../VSheet/VSheet'
 import VImg, { srcObject } from '../VImg/VImg'
 
 // Utilities
-import { convertToUnit, getSlot } from '../../util/helpers'
+import { convertToUnit, getSlot, getTagValue } from '../../util/helpers'
 import { breaking } from '../../util/console'
 
 // Types
@@ -162,6 +162,6 @@ export default defineComponent({
     if (this.isExtended) children.push(this.genExtension())
     if (this.src || this.$slots.img) children.unshift(this.genBackground())
 
-    return h(this.tag, {...this.attrs$, ...data}, children)
+    return h(getTagValue(this.tag), {...this.attrs$, ...data}, children)
   }
 })

package/src/components/VTooltip/VTooltip.ts

@@ -9,7 +9,7 @@ import Dependent from '../../mixins/dependent'
 import Menuable from '../../mixins/menuable'
 
 // Helpers
-import { convertToUnit, keyCodes, getSlotType } from '../../util/helpers'
+import { convertToUnit, keyCodes, getSlotType, getTagValue } from '../../util/helpers'
 import { consoleError } from '../../util/console'
 
 // Types
@@ -213,7 +213,7 @@ export default mixins(Colorable, Delayable, Dependent, Menuable).extend({
   },
 
   render (): VNode {
-    return h(this.tag, {
+    return h(getTagValue(this.tag), {
       class: ['v-tooltip', this.classes],
     }, [
       this.showLazyContent(() => [this.genTransition()]),

package/src/util/helpers.ts

@@ -1,8 +1,15 @@
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, resolveComponent } from 'vue'
 import { VNode, VNodeDirective } from 'vue/types'
 import { VuetifyIcon } from 'vuetify/types/services/icons'
 import { DataTableCompareFunction, SelectItemKey, ItemGroup } from 'vuetify/types'
 
+/** Резолвит пропс tag как компонент, если это строка с составным именем (например v-card или VCard) */
+export const getTagValue = (tag: string) => (
+  tag.includes('-') || /^[A-Z]/.test(tag)
+    ? resolveComponent(tag)
+    : tag
+)
+
 export function createSimpleFunctional (
   c: string,
   el = 'div',
@@ -25,7 +32,7 @@ export function createSimpleFunctional (
 
       data.class = (`${c} ${data.class || ''}`).trim()
 
-      return h(this.tag, data, this.$slots.default?.())
+      return h(getTagValue(this.tag), data, this.$slots.default?.())
     },
   })
 }