@kokoccc/vuetify 1.0.1 → 1.0.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kokoccc/vuetify",
   "description": "Vue Material Component Framework",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "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

@@ -5,6 +5,7 @@ import Grid from './grid'
 
 import mergeData from '../../util/mergeData'
 import { defineComponent, h } from 'vue'
+import { getTagValue } from '../../util/helpers'
 
 /* @vue/component */
 export default defineComponent({
@@ -60,7 +61,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,5 +1,6 @@
 // Types
 import { defineComponent, VNode, h } from 'vue'
+import { getTagValue } from '../../util/helpers'
 
 export default function VGrid (name: string) {
   /* @vue/component */
@@ -49,7 +50,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

@@ -7,7 +7,7 @@ import Sizeable from '../../mixins/sizeable'
 import Themeable from '../../mixins/themeable'
 
 // Util
-import { convertToUnit, keys, remapInternalIcon } from '../../util/helpers'
+import { convertToUnit, keys, remapInternalIcon, getTagValue } from '../../util/helpers'
 
 // Types
 import { defineComponent, CreateElement, VNode, VNodeChildren, VNodeData, h } from 'vue'
@@ -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/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/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/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,14 @@
-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'
 
+export const getTagValue = (tag: string) => (
+  tag.includes('-') || /^[A-Z]/.test(tag)
+    ? resolveComponent(tag)
+    : tag
+)
+
 export function createSimpleFunctional (
   c: string,
   el = 'div',
@@ -25,7 +31,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?.())
     },
   })
 }