@vuetify/nightly 3.0.0-beta.0 → 3.0.0-beta.13

package/lib/components/VCard/VCard.mjs

@@ -4,32 +4,30 @@ import { withDirectives as _withDirectives, resolveDirective as _resolveDirectiv
 // Styles
 import "./VCard.css"; // Components
 
-import { VAvatar } from "../VAvatar/index.mjs";
-import { VImg } from "../VImg/index.mjs";
 import { VCardActions } from "./VCardActions.mjs";
-import { VCardAvatar } from "./VCardAvatar.mjs";
-import { VCardHeader } from "./VCardHeader.mjs";
-import { VCardHeaderText } from "./VCardHeaderText.mjs";
-import { VCardImg } from "./VCardImg.mjs";
-import { VCardSubtitle } from "./VCardSubtitle.mjs";
+import { VCardItem } from "./VCardItem.mjs";
 import { VCardText } from "./VCardText.mjs";
-import { VCardTitle } from "./VCardTitle.mjs"; // Composables
+import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
+import { VImg } from "../VImg/index.mjs"; // Directives
+
+import { Ripple } from "../../directives/ripple/index.mjs"; // Composables
 
+import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.mjs";
+import { IconValue } from "../../composables/icons.mjs";
+import { LoaderSlot, makeLoaderProps, useLoader } from "../../composables/loader.mjs";
 import { makeBorderProps, useBorder } from "../../composables/border.mjs";
 import { makeDensityProps, useDensity } from "../../composables/density.mjs";
 import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
 import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
+import { makeLocationProps, useLocation } from "../../composables/location.mjs";
 import { makePositionProps, usePosition } from "../../composables/position.mjs";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
 import { makeRouterProps, useLink } from "../../composables/router.mjs";
 import { makeTagProps } from "../../composables/tag.mjs";
-import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
-import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.mjs"; // Directives
-
-import { Ripple } from "../../directives/ripple/index.mjs"; // Utilities
+import { makeThemeProps, provideTheme } from "../../composables/theme.mjs"; // Utilities
 
-import { defineComponent } from "../../util/index.mjs";
-import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
+import { defineComponent, useRender } from "../../util/index.mjs";
+import { computed } from 'vue';
 export const VCard = defineComponent({
   name: 'VCard',
   directives: {
@@ -37,14 +35,17 @@ export const VCard = defineComponent({
   },
   props: {
     appendAvatar: String,
-    appendIcon: String,
+    appendIcon: IconValue,
     disabled: Boolean,
     flat: Boolean,
     hover: Boolean,
     image: String,
-    link: Boolean,
+    link: {
+      type: Boolean,
+      default: undefined
+    },
     prependAvatar: String,
-    prependIcon: String,
+    prependIcon: IconValue,
     ripple: Boolean,
     subtitle: String,
     text: String,
@@ -54,12 +55,14 @@ export const VCard = defineComponent({
     ...makeDensityProps(),
     ...makeDimensionProps(),
     ...makeElevationProps(),
+    ...makeLoaderProps(),
+    ...makeLocationProps(),
     ...makePositionProps(),
     ...makeRoundedProps(),
     ...makeRouterProps(),
     ...makeTagProps(),
     ...makeVariantProps({
-      variant: 'contained'
+      variant: 'elevated'
     })
   },
 
@@ -89,38 +92,45 @@ export const VCard = defineComponent({
       elevationClasses
     } = useElevation(props);
     const {
-      positionClasses,
-      positionStyles
+      loaderClasses
+    } = useLoader(props);
+    const {
+      locationStyles
+    } = useLocation(props);
+    const {
+      positionClasses
     } = usePosition(props);
     const {
       roundedClasses
     } = useRounded(props);
     const link = useLink(props, attrs);
-    return () => {
-      var _slots$image, _slots$media, _slots$default;
+    const isLink = computed(() => props.link !== false && link.isLink.value);
+    const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value));
+    useRender(() => {
+      var _slots$image, _slots$text, _slots$default;
 
-      const Tag = link.isLink.value ? 'a' : props.tag;
+      const Tag = isLink.value ? 'a' : props.tag;
       const hasTitle = !!(slots.title || props.title);
       const hasSubtitle = !!(slots.subtitle || props.subtitle);
-      const hasHeaderText = hasTitle || hasSubtitle;
+      const hasHeader = hasTitle || hasSubtitle;
       const hasAppend = !!(slots.append || props.appendAvatar || props.appendIcon);
       const hasPrepend = !!(slots.prepend || props.prependAvatar || props.prependIcon);
       const hasImage = !!(slots.image || props.image);
-      const hasHeader = hasHeaderText || hasPrepend || hasAppend;
+      const hasCardItem = hasHeader || hasPrepend || hasAppend;
       const hasText = !!(slots.text || props.text);
-      const isClickable = !props.disabled && (link.isClickable.value || props.link);
       return _withDirectives(_createVNode(Tag, {
         "class": ['v-card', {
           'v-card--disabled': props.disabled,
           'v-card--flat': props.flat,
           'v-card--hover': props.hover && !(props.disabled || props.flat),
-          'v-card--link': isClickable
-        }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value],
-        "style": [colorStyles.value, dimensionStyles.value, positionStyles.value],
+          'v-card--link': isClickable.value
+        }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, loaderClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value],
+        "style": [colorStyles.value, dimensionStyles.value, locationStyles.value],
         "href": link.href.value,
-        "onClick": isClickable && link.navigate
+        "onClick": isClickable.value && link.navigate
       }, {
-        default: () => [genOverlays(isClickable, 'v-card'), hasImage && _createVNode(VDefaultsProvider, {
+        default: () => [hasImage && _createVNode(VDefaultsProvider, {
+          "key": "image",
           "defaults": {
             VImg: {
               cover: true,
@@ -128,50 +138,39 @@ export const VCard = defineComponent({
             }
           }
         }, {
-          default: () => [_createVNode(VCardImg, null, {
-            default: () => [slots.image ? (_slots$image = slots.image) == null ? void 0 : _slots$image.call(slots) : _createVNode(VImg, {
-              "alt": ""
-            }, null)]
-          })]
-        }), (_slots$media = slots.media) == null ? void 0 : _slots$media.call(slots), hasHeader && _createVNode(VCardHeader, null, {
-          default: () => [hasPrepend && _createVNode(VDefaultsProvider, {
-            "defaults": {
-              VAvatar: {
-                density: props.density,
-                icon: props.prependIcon,
-                image: props.prependAvatar
-              }
-            }
-          }, {
-            default: () => [_createVNode(VCardAvatar, null, {
-              default: () => [slots.prepend ? slots.prepend() : _createVNode(VAvatar, null, null)]
-            })]
-          }), hasHeaderText && _createVNode(VCardHeaderText, null, {
-            default: () => [hasTitle && _createVNode(VCardTitle, null, {
-              default: () => [slots.title ? slots.title() : props.title]
-            }), hasSubtitle && _createVNode(VCardSubtitle, null, {
-              default: () => [slots.subtitle ? slots.subtitle() : props.subtitle]
-            })]
-          }), hasAppend && _createVNode(VDefaultsProvider, {
-            "defaults": {
-              VAvatar: {
-                density: props.density,
-                icon: props.appendIcon,
-                image: props.appendAvatar
-              }
-            }
-          }, {
-            default: () => [_createVNode(VCardAvatar, null, {
-              default: () => [slots.append ? slots.append() : _createVNode(VAvatar, null, null)]
-            })]
-          })]
-        }), hasText && _createVNode(VCardText, null, {
-          default: () => [slots.text ? slots.text() : props.text]
+          default: () => [_createVNode("div", {
+            "class": "v-card__image"
+          }, [((_slots$image = slots.image) == null ? void 0 : _slots$image.call(slots)) ?? _createVNode(VImg, null, null)])]
+        }), _createVNode(LoaderSlot, {
+          "name": "v-card",
+          "active": !!props.loading,
+          "color": typeof props.loading === 'boolean' ? undefined : props.loading
+        }, {
+          default: slots.loader
+        }), hasCardItem && _createVNode(VCardItem, {
+          "key": "item",
+          "prependAvatar": props.prependAvatar,
+          "prependIcon": props.prependIcon,
+          "title": props.title,
+          "subtitle": props.subtitle,
+          "appendAvatar": props.appendAvatar,
+          "appendIcon": props.appendIcon
+        }, {
+          default: slots.item,
+          prepend: slots.prepend,
+          title: slots.title,
+          subtitle: slots.subtitle,
+          append: slots.append
+        }), hasText && _createVNode(VCardText, {
+          "key": "text"
+        }, {
+          default: () => [((_slots$text = slots.text) == null ? void 0 : _slots$text.call(slots)) ?? props.text]
         }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots), slots.actions && _createVNode(VCardActions, null, {
           default: slots.actions
-        })]
-      }), [[_resolveDirective("ripple"), isClickable]]);
-    };
+        }), genOverlays(isClickable.value, 'v-card')]
+      }), [[_resolveDirective("ripple"), isClickable.value]]);
+    });
+    return {};
   }
 
 });

package/lib/components/VCard/VCard.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VCard/VCard.tsx"],"names":["VAvatar","VImg","VCardActions","VCardAvatar","VCardHeader","VCardHeaderText","VCardImg","VCardSubtitle","VCardText","VCardTitle","makeBorderProps","useBorder","makeDensityProps","useDensity","makeDimensionProps","useDimension","makeElevationProps","useElevation","makePositionProps","usePosition","makeRoundedProps","useRounded","makeRouterProps","useLink","makeTagProps","makeThemeProps","provideTheme","genOverlays","makeVariantProps","useVariant","Ripple","defineComponent","VDefaultsProvider","VCard","name","directives","props","appendAvatar","String","appendIcon","disabled","Boolean","flat","hover","image","link","prependAvatar","prependIcon","ripple","subtitle","text","title","variant","setup","attrs","slots","themeClasses","borderClasses","colorClasses","colorStyles","variantClasses","densityClasses","dimensionStyles","elevationClasses","positionClasses","positionStyles","roundedClasses","Tag","isLink","value","tag","hasTitle","hasSubtitle","hasHeaderText","hasAppend","append","hasPrepend","prepend","hasImage","hasHeader","hasText","isClickable","href","navigate","cover","src","media","density","icon","default","actions"],"mappings":"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","sourcesContent":["/* eslint-disable complexity */\n\n// Styles\nimport './VCard.sass'\n\n// Components\nimport { VAvatar } from '@/components/VAvatar'\nimport { VImg } from '@/components/VImg'\nimport { VCardActions } from './VCardActions'\nimport { VCardAvatar } from './VCardAvatar'\nimport { VCardHeader } from './VCardHeader'\nimport { VCardHeaderText } from './VCardHeaderText'\nimport { VCardImg } from './VCardImg'\nimport { VCardSubtitle } from './VCardSubtitle'\nimport { VCardText } from './VCardText'\nimport { VCardTitle } from './VCardTitle'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makePositionProps, usePosition } from '@/composables/position'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeRouterProps, useLink } from '@/composables/router'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Utilities\nimport { defineComponent } from '@/util'\nimport { VDefaultsProvider } from '../VDefaultsProvider'\n\nexport const VCard = defineComponent({\n  name: 'VCard',\n\n  directives: { Ripple },\n\n  props: {\n    appendAvatar: String,\n    appendIcon: String,\n    disabled: Boolean,\n    flat: Boolean,\n    hover: Boolean,\n    image: String,\n    link: Boolean,\n    prependAvatar: String,\n    prependIcon: String,\n    ripple: Boolean,\n    subtitle: String,\n    text: String,\n    title: String,\n\n    ...makeThemeProps(),\n    ...makeBorderProps(),\n    ...makeDensityProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makePositionProps(),\n    ...makeRoundedProps(),\n    ...makeRouterProps(),\n    ...makeTagProps(),\n    ...makeVariantProps({ variant: 'contained' } as const),\n  },\n\n  setup (props, { attrs, slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { borderClasses } = useBorder(props)\n    const { colorClasses, colorStyles, variantClasses } = useVariant(props)\n    const { densityClasses } = useDensity(props)\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { positionClasses, positionStyles } = usePosition(props)\n    const { roundedClasses } = useRounded(props)\n    const link = useLink(props, attrs)\n\n    return () => {\n      const Tag = (link.isLink.value) ? 'a' : props.tag\n      const hasTitle = !!(slots.title || props.title)\n      const hasSubtitle = !!(slots.subtitle || props.subtitle)\n      const hasHeaderText = hasTitle || hasSubtitle\n      const hasAppend = !!(slots.append || props.appendAvatar || props.appendIcon)\n      const hasPrepend = !!(slots.prepend || props.prependAvatar || props.prependIcon)\n      const hasImage = !!(slots.image || props.image)\n      const hasHeader = hasHeaderText || hasPrepend || hasAppend\n      const hasText = !!(slots.text || props.text)\n      const isClickable = !props.disabled && (link.isClickable.value || props.link)\n\n      return (\n        <Tag\n          class={[\n            'v-card',\n            {\n              'v-card--disabled': props.disabled,\n              'v-card--flat': props.flat,\n              'v-card--hover': props.hover && !(props.disabled || props.flat),\n              'v-card--link': isClickable,\n            },\n            themeClasses.value,\n            borderClasses.value,\n            colorClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            positionClasses.value,\n            roundedClasses.value,\n            variantClasses.value,\n          ]}\n          style={[\n            colorStyles.value,\n            dimensionStyles.value,\n            positionStyles.value,\n          ]}\n          href={ link.href.value }\n          onClick={ isClickable && link.navigate }\n          v-ripple={ isClickable }\n        >\n          { genOverlays(isClickable, 'v-card') }\n\n          { hasImage && (\n            <VDefaultsProvider\n              defaults={{\n                VImg: {\n                  cover: true,\n                  src: props.image,\n                },\n              }}\n            >\n              <VCardImg>\n                { slots.image ? slots.image?.() : (<VImg alt=\"\" />) }\n              </VCardImg>\n            </VDefaultsProvider>\n          ) }\n\n          { slots.media?.() }\n\n          { hasHeader && (\n            <VCardHeader>\n              { hasPrepend && (\n                <VDefaultsProvider\n                  defaults={{\n                    VAvatar: {\n                      density: props.density,\n                      icon: props.prependIcon,\n                      image: props.prependAvatar,\n                    },\n                  }}\n                >\n                  <VCardAvatar>\n                    { slots.prepend ? slots.prepend() : (<VAvatar />) }\n                  </VCardAvatar>\n                </VDefaultsProvider>\n              ) }\n\n              { hasHeaderText && (\n                <VCardHeaderText>\n                  { hasTitle && (\n                    <VCardTitle>\n                      { slots.title ? slots.title() : props.title}\n                    </VCardTitle>\n                  ) }\n\n                  { hasSubtitle && (\n                    <VCardSubtitle>\n                      { slots.subtitle ? slots.subtitle() : props.subtitle }\n                    </VCardSubtitle>\n                  ) }\n                </VCardHeaderText>\n              ) }\n\n              { hasAppend && (\n                <VDefaultsProvider\n                  defaults={{\n                    VAvatar: {\n                      density: props.density,\n                      icon: props.appendIcon,\n                      image: props.appendAvatar,\n                    },\n                  }}\n                >\n                  <VCardAvatar>\n                    { slots.append ? slots.append() : (<VAvatar />) }\n                  </VCardAvatar>\n                </VDefaultsProvider>\n              ) }\n            </VCardHeader>\n          ) }\n\n          { hasText && (\n            <VCardText>\n              { slots.text ? slots.text() : props.text }\n            </VCardText>\n          ) }\n\n          { slots.default?.() }\n\n          { slots.actions && (\n            <VCardActions v-slots={{ default: slots.actions }} />\n          ) }\n        </Tag>\n      )\n    }\n  },\n})\n\nexport type VCard = InstanceType<typeof VCard>\n"],"file":"VCard.mjs"}
+{"version":3,"file":"VCard.mjs","names":["VCardActions","VCardItem","VCardText","VDefaultsProvider","VImg","Ripple","genOverlays","makeVariantProps","useVariant","IconValue","LoaderSlot","makeLoaderProps","useLoader","makeBorderProps","useBorder","makeDensityProps","useDensity","makeDimensionProps","useDimension","makeElevationProps","useElevation","makeLocationProps","useLocation","makePositionProps","usePosition","makeRoundedProps","useRounded","makeRouterProps","useLink","makeTagProps","makeThemeProps","provideTheme","defineComponent","useRender","computed","VCard","name","directives","props","appendAvatar","String","appendIcon","disabled","Boolean","flat","hover","image","link","type","default","undefined","prependAvatar","prependIcon","ripple","subtitle","text","title","variant","setup","attrs","slots","themeClasses","borderClasses","colorClasses","colorStyles","variantClasses","densityClasses","dimensionStyles","elevationClasses","loaderClasses","locationStyles","positionClasses","roundedClasses","isLink","value","isClickable","Tag","tag","hasTitle","hasSubtitle","hasHeader","hasAppend","append","hasPrepend","prepend","hasImage","hasCardItem","hasText","href","navigate","cover","src","loading","loader","item","actions"],"sources":["../../../src/components/VCard/VCard.tsx"],"sourcesContent":["/* eslint-disable complexity */\n\n// Styles\nimport './VCard.sass'\n\n// Components\nimport { VCardActions } from './VCardActions'\nimport { VCardItem } from './VCardItem'\nimport { VCardText } from './VCardText'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VImg } from '@/components/VImg'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Composables\nimport { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\nimport { IconValue } from '@/composables/icons'\nimport { LoaderSlot, makeLoaderProps, useLoader } from '@/composables/loader'\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeLocationProps, useLocation } from '@/composables/location'\nimport { makePositionProps, usePosition } from '@/composables/position'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeRouterProps, useLink } from '@/composables/router'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { defineComponent, useRender } from '@/util'\nimport { computed } from 'vue'\n\nexport const VCard = defineComponent({\n  name: 'VCard',\n\n  directives: { Ripple },\n\n  props: {\n    appendAvatar: String,\n    appendIcon: IconValue,\n    disabled: Boolean,\n    flat: Boolean,\n    hover: Boolean,\n    image: String,\n    link: {\n      type: Boolean,\n      default: undefined,\n    },\n    prependAvatar: String,\n    prependIcon: IconValue,\n    ripple: Boolean,\n    subtitle: String,\n    text: String,\n    title: String,\n\n    ...makeThemeProps(),\n    ...makeBorderProps(),\n    ...makeDensityProps(),\n    ...makeDimensionProps(),\n    ...makeElevationProps(),\n    ...makeLoaderProps(),\n    ...makeLocationProps(),\n    ...makePositionProps(),\n    ...makeRoundedProps(),\n    ...makeRouterProps(),\n    ...makeTagProps(),\n    ...makeVariantProps({ variant: 'elevated' } as const),\n  },\n\n  setup (props, { attrs, slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { borderClasses } = useBorder(props)\n    const { colorClasses, colorStyles, variantClasses } = useVariant(props)\n    const { densityClasses } = useDensity(props)\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { loaderClasses } = useLoader(props)\n    const { locationStyles } = useLocation(props)\n    const { positionClasses } = usePosition(props)\n    const { roundedClasses } = useRounded(props)\n    const link = useLink(props, attrs)\n\n    const isLink = computed(() => props.link !== false && link.isLink.value)\n    const isClickable = computed(() =>\n      !props.disabled &&\n      props.link !== false &&\n      (props.link || link.isClickable.value)\n    )\n\n    useRender(() => {\n      const Tag = isLink.value ? 'a' : props.tag\n      const hasTitle = !!(slots.title || props.title)\n      const hasSubtitle = !!(slots.subtitle || props.subtitle)\n      const hasHeader = hasTitle || hasSubtitle\n      const hasAppend = !!(slots.append || props.appendAvatar || props.appendIcon)\n      const hasPrepend = !!(slots.prepend || props.prependAvatar || props.prependIcon)\n      const hasImage = !!(slots.image || props.image)\n      const hasCardItem = hasHeader || hasPrepend || hasAppend\n      const hasText = !!(slots.text || props.text)\n\n      return (\n        <Tag\n          class={[\n            'v-card',\n            {\n              'v-card--disabled': props.disabled,\n              'v-card--flat': props.flat,\n              'v-card--hover': props.hover && !(props.disabled || props.flat),\n              'v-card--link': isClickable.value,\n            },\n            themeClasses.value,\n            borderClasses.value,\n            colorClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            loaderClasses.value,\n            positionClasses.value,\n            roundedClasses.value,\n            variantClasses.value,\n          ]}\n          style={[\n            colorStyles.value,\n            dimensionStyles.value,\n            locationStyles.value,\n          ]}\n          href={ link.href.value }\n          onClick={ isClickable.value && link.navigate }\n          v-ripple={ isClickable.value }\n        >\n          { hasImage && (\n            <VDefaultsProvider\n              key=\"image\"\n              defaults={{\n                VImg: {\n                  cover: true,\n                  src: props.image,\n                },\n              }}\n            >\n              <div class=\"v-card__image\">\n                { slots.image?.() ?? <VImg /> }\n              </div>\n            </VDefaultsProvider>\n          ) }\n\n          <LoaderSlot\n            name=\"v-card\"\n            active={ !!props.loading }\n            color={ typeof props.loading === 'boolean' ? undefined : props.loading }\n            v-slots={{ default: slots.loader }}\n          />\n\n          { hasCardItem && (\n            <VCardItem\n              key=\"item\"\n              prependAvatar={ props.prependAvatar }\n              prependIcon={ props.prependIcon }\n              title={ props.title }\n              subtitle={ props.subtitle }\n              appendAvatar={ props.appendAvatar }\n              appendIcon={ props.appendIcon }\n            >\n              {{\n                default: slots.item,\n                prepend: slots.prepend,\n                title: slots.title,\n                subtitle: slots.subtitle,\n                append: slots.append,\n              }}\n            </VCardItem>\n          ) }\n\n          { hasText && (\n            <VCardText key=\"text\">\n              { slots.text?.() ?? props.text }\n            </VCardText>\n          ) }\n\n          { slots.default?.() }\n\n          { slots.actions && (\n            <VCardActions v-slots={{ default: slots.actions }} />\n          ) }\n\n          { genOverlays(isClickable.value, 'v-card') }\n        </Tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VCard = InstanceType<typeof VCard>\n"],"mappings":"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"}

package/lib/components/VCard/VCard.sass

@@ -1,4 +1,3 @@
-@forward './variables'
 @use '../../styles/tools'
 @use './variables' as *
 @use './mixins' as *
@@ -6,12 +5,14 @@
 .v-card
   display: block
   overflow: hidden
+  overflow-wrap: $card-overflow-wrap
   position: relative
   padding: $card-padding
   text-decoration: none
   transition-duration: $card-transition-duration
   transition-property: $card-transition-property
   transition-timing-function: $card-transition-timing-function
+  z-index: 0
 
   @include tools.border($card-border...)
   @include tools.position($card-positions)
@@ -23,7 +24,7 @@
     pointer-events: none
     user-select: none
 
-    > [class*='v-card-']
+    >:not(.v-card__loader)
       opacity: $card-disabled-opacity
 
   &--flat
@@ -68,100 +69,118 @@
   &--link
     cursor: pointer
 
-  &--tile
-    @include tools.rounded($card-tile-border-radius)
-
 .v-card-actions
   align-items: center
   display: flex
-  flex: 1 1 auto
+  flex: $card-actions-flex
   min-height: $card-actions-min-height
   padding: $card-actions-padding
 
-.v-card-avatar
-  align-self: $card-avatar-align-self
-  padding: $card-avatar-padding
+.v-card-item
+  align-items: $card-item-align-items
+  display: grid
+  flex: $card-header-flex
+  grid-template-areas: "prepend content append"
+  grid-template-columns: max-content auto max-content
+  padding: $card-item-padding
 
-  &:last-child
-    .v-card-header &
-      padding-inline-end: $card-avatar-header-padding
+  + .v-card-text
+    padding-top: 0
 
-  &:first-child
-    .v-card-header &
-      padding-inline-start: $card-avatar-header-padding
+  &__prepend
+    grid-area: prepend
+    padding-inline-end: $card-prepend-padding-inline-end
 
-.v-card-header-text
-  flex: 1 1 auto
-  min-width: 0
+  &__append
+    grid-area: append
+    padding-inline-start: $card-append-padding-inline-start
 
-.v-card-img
-  border-radius: inherit
-  display: flex
-  height: 100%
-  left: 0
+.v-card-item__content
+  align-self: center
+  grid-area: content
   overflow: hidden
-  position: absolute
-  top: 0
-  width: 100%
 
-.v-card-header
-  align-items: $card-item-align-items
-  display: flex
-  padding: $card-item-padding
+.v-card-title
+  display: block
+  flex: $card-title-flex
+  font-size: $card-title-font-size
+  font-weight: $card-title-font-weight
+  hyphens: $card-title-hyphens
+  letter-spacing: $card-title-letter-spacing
+  min-width: 0
+  overflow-wrap: $card-title-overflow-wrap
+  overflow: $card-title-overflow
+  overflow: hidden
+  padding: $card-title-padding
+  text-overflow: $card-title-text-overflow
+  text-overflow: ellipsis
+  text-transform: $card-title-text-transform
+  white-space: $card-title-white-space
+  white-space: nowrap
+  word-break: $card-title-word-break
+  word-wrap: $card-title-word-wrap
 
-  + .v-card-text
-    padding-top: 0
+  @include card-line-height-densities($card-title-densities)
 
-.v-card-media
-  overflow: hidden
+  .v-card-item &
+    padding: $card-title-header-padding
+
+  + .v-card-text,
+  + .v-card-actions
+    padding-top: 0
 
 .v-card-subtitle
-  align-items: center
-  display: flex
+  display: block
+  flex: $card-subtitle-flex
   font-size: $card-subtitle-font-size
   font-weight: $card-subtitle-font-weight
   letter-spacing: $card-subtitle-letter-spacing
   opacity: $card-subtitle-opacity
+  overflow: $card-subtitle-overflow
   padding: $card-subtitle-padding
+  text-overflow: $card-subtitle-text-overflow
   text-transform: $card-subtitle-text-transform
+  white-space: $card-subtitle-white-space
 
   @include card-line-height-densities($card-subtitle-densities)
 
-  .v-card-header &
+  .v-card-item &
     padding: $card-subtitle-header-padding
 
 .v-card-text
-  color: $card-text-color
+  flex: $card-text-flex
   font-size: $card-text-font-size
   font-weight: $card-text-font-weight
   letter-spacing: $card-text-letter-spacing
   padding: $card-text-padding
   text-transform: $card-text-text-transform
-  transition: inherit
-  transition-property: color, opacity
 
   @include card-line-height-densities($card-text-densities)
 
-  + .v-card-actions
-    margin-top: -.5rem
-
-.v-card-title
-  align-items: center
+.v-card__image
   display: flex
-  font-size: $card-title-font-size
-  font-weight: $card-title-font-weight
-  hyphens: $card-title-hyphens
-  letter-spacing: $card-title-letter-spacing
-  overflow-wrap: $card-title-overflow-wrap
-  padding: $card-title-padding
-  text-transform: $card-title-text-transform
-  word-break: $card-title-word-break
-  word-wrap: $card-title-word-wrap
+  height: 100%
+  flex: $card-img-flex
+  left: 0
+  overflow: hidden
+  position: absolute
+  top: 0
+  width: 100%
+  z-index: -1
 
-  @include card-line-height-densities($card-title-densities)
+.v-card__content
+  border-radius: inherit
+  overflow: hidden
+  position: relative
 
-  .v-card-header &
-    padding: $card-title-header-padding
+.v-card__loader
+  bottom: $card-loader-bottom
+  top: $card-loader-top
+  left: 0
+  position: absolute
+  right: 0
+  width: 100%
+  z-index: 1
 
 .v-card__overlay
   background-color: currentColor
@@ -174,7 +193,3 @@
   pointer-events: none
   opacity: 0
   transition: opacity 0.2s ease-in-out
-
-  + .v-card-media
-    border-top-left-radius: inherit
-    border-top-right-radius: inherit

package/lib/components/VCard/VCardActions.mjs

@@ -2,8 +2,7 @@ import { createVNode as _createVNode } from "vue";
 // Composables
 import { provideDefaults } from "../../composables/defaults.mjs"; // Utility
 
-import { defineComponent } from 'vue';
-import { useRender } from "../../util/index.mjs";
+import { defineComponent, useRender } from "../../util/index.mjs";
 export const VCardActions = defineComponent({
   name: 'VCardActions',
 
@@ -21,7 +20,7 @@ export const VCardActions = defineComponent({
 
       return _createVNode("div", {
         "class": "v-card-actions"
-      }, [slots == null ? void 0 : (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]);
+      }, [(_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]);
     });
     return {};
   }

package/lib/components/VCard/VCardActions.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VCard/VCardActions.tsx"],"names":["provideDefaults","defineComponent","useRender","VCardActions","name","setup","_","slots","VBtn","variant","default"],"mappings":";AAAA;SACSA,e,0CAET;;AACA,SAASC,eAAT,QAAgC,KAAhC;SACSC,S;AAET,OAAO,MAAMC,YAAY,GAAGF,eAAe,CAAC;AAC1CG,EAAAA,IAAI,EAAE,cADoC;;AAG1CC,EAAAA,KAAK,CAAEC,CAAF,QAAgB;AAAA,QAAX;AAAEC,MAAAA;AAAF,KAAW;AACnBP,IAAAA,eAAe,CAAC;AACdQ,MAAAA,IAAI,EAAE;AACJC,QAAAA,OAAO,EAAE;AADL;AADQ,KAAD,CAAf;AAMAP,IAAAA,SAAS,CAAC;AAAA;;AAAA;AAAA,iBACG;AADH,UAEJK,KAFI,sCAEJA,KAAK,CAAEG,OAFH,qBAEJ,oBAAAH,KAAK,CAFD;AAAA,KAAD,CAAT;AAMA,WAAO,EAAP;AACD;;AAjByC,CAAD,CAApC","sourcesContent":["// Composables\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utility\nimport { defineComponent } from 'vue'\nimport { useRender } from '@/util'\n\nexport const VCardActions = defineComponent({\n  name: 'VCardActions',\n\n  setup (_, { slots }) {\n    provideDefaults({\n      VBtn: {\n        variant: 'text',\n      },\n    })\n\n    useRender(() => (\n      <div class=\"v-card-actions\">\n        { slots?.default?.() }\n      </div>\n    ))\n\n    return {}\n  },\n})\n"],"file":"VCardActions.mjs"}
+{"version":3,"file":"VCardActions.mjs","names":["provideDefaults","defineComponent","useRender","VCardActions","name","setup","_","slots","VBtn","variant","default"],"sources":["../../../src/components/VCard/VCardActions.tsx"],"sourcesContent":["// Composables\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utility\nimport { defineComponent, useRender } from '@/util'\n\nexport const VCardActions = defineComponent({\n  name: 'VCardActions',\n\n  setup (_, { slots }) {\n    provideDefaults({\n      VBtn: {\n        variant: 'text',\n      },\n    })\n\n    useRender(() => (\n      <div class=\"v-card-actions\">\n        { slots.default?.() }\n      </div>\n    ))\n\n    return {}\n  },\n})\n"],"mappings":";AAAA;SACSA,e,0CAET;;SACSC,e,EAAiBC,S;AAE1B,OAAO,MAAMC,YAAY,GAAGF,eAAe,CAAC;EAC1CG,IAAI,EAAE,cADoC;;EAG1CC,KAAK,CAAEC,CAAF,QAAgB;IAAA,IAAX;MAAEC;IAAF,CAAW;IACnBP,eAAe,CAAC;MACdQ,IAAI,EAAE;QACJC,OAAO,EAAE;MADL;IADQ,CAAD,CAAf;IAMAP,SAAS,CAAC;MAAA;;MAAA;QAAA,SACG;MADH,sBAEJK,KAAK,CAACG,OAFF,qBAEJ,oBAAAH,KAAK,CAFD;IAAA,CAAD,CAAT;IAMA,OAAO,EAAP;EACD;;AAjByC,CAAD,CAApC"}

package/lib/components/VCard/VCardItem.mjs

@@ -0,0 +1,88 @@
+import { createVNode as _createVNode } from "vue";
+// Components
+import { VAvatar } from "../VAvatar/index.mjs";
+import { VCardSubtitle } from "./VCardSubtitle.mjs";
+import { VCardTitle } from "./VCardTitle.mjs";
+import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs"; // Composables
+
+import { IconValue } from "../../composables/icons.mjs";
+import { makeDensityProps } from "../../composables/density.mjs"; // Utility
+
+import { defineComponent } from 'vue';
+import { useRender } from "../../util/index.mjs";
+export const VCardItem = defineComponent({
+  name: 'VCardItem',
+  props: {
+    appendAvatar: String,
+    appendIcon: IconValue,
+    prependAvatar: String,
+    prependIcon: IconValue,
+    subtitle: String,
+    title: String,
+    ...makeDensityProps()
+  },
+
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    useRender(() => {
+      var _slots$prepend, _slots$title, _slots$subtitle, _slots$default, _slots$append;
+
+      const hasPrepend = !!(props.prependAvatar || props.prependIcon || slots.prepend);
+      const hasAppend = !!(props.appendAvatar || props.appendIcon || slots.append);
+      const hasTitle = !!(props.title || slots.title);
+      const hasSubtitle = !!(props.subtitle || slots.subtitle);
+      return _createVNode("div", {
+        "class": "v-card-item"
+      }, [hasPrepend && _createVNode(VDefaultsProvider, {
+        "key": "prepend",
+        "defaults": {
+          VAvatar: {
+            density: props.density,
+            icon: props.prependIcon,
+            image: props.prependAvatar
+          },
+          VIcon: {
+            density: props.density,
+            icon: props.prependIcon
+          }
+        }
+      }, {
+        default: () => [_createVNode("div", {
+          "class": "v-card-item__prepend"
+        }, [((_slots$prepend = slots.prepend) == null ? void 0 : _slots$prepend.call(slots)) ?? _createVNode(VAvatar, null, null)])]
+      }), _createVNode("div", {
+        "class": "v-card-item__content"
+      }, [hasTitle && _createVNode(VCardTitle, {
+        "key": "title"
+      }, {
+        default: () => [((_slots$title = slots.title) == null ? void 0 : _slots$title.call(slots)) ?? props.title]
+      }), hasSubtitle && _createVNode(VCardSubtitle, {
+        "key": "subtitle"
+      }, {
+        default: () => [((_slots$subtitle = slots.subtitle) == null ? void 0 : _slots$subtitle.call(slots)) ?? props.subtitle]
+      }), (_slots$default = slots.default) == null ? void 0 : _slots$default.call(slots)]), hasAppend && _createVNode(VDefaultsProvider, {
+        "key": "append",
+        "defaults": {
+          VAvatar: {
+            density: props.density,
+            icon: props.appendIcon,
+            image: props.appendAvatar
+          },
+          VIcon: {
+            density: props.density,
+            icon: props.appendIcon
+          }
+        }
+      }, {
+        default: () => [_createVNode("div", {
+          "class": "v-card-item__append"
+        }, [((_slots$append = slots.append) == null ? void 0 : _slots$append.call(slots)) ?? _createVNode(VAvatar, null, null)])]
+      })]);
+    });
+    return {};
+  }
+
+});
+//# sourceMappingURL=VCardItem.mjs.map

package/lib/components/VCard/VCardItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VCardItem.mjs","names":["VAvatar","VCardSubtitle","VCardTitle","VDefaultsProvider","IconValue","makeDensityProps","defineComponent","useRender","VCardItem","name","props","appendAvatar","String","appendIcon","prependAvatar","prependIcon","subtitle","title","setup","slots","hasPrepend","prepend","hasAppend","append","hasTitle","hasSubtitle","density","icon","image","VIcon","default"],"sources":["../../../src/components/VCard/VCardItem.tsx"],"sourcesContent":["// Components\nimport { VAvatar } from '../VAvatar'\nimport { VCardSubtitle } from './VCardSubtitle'\nimport { VCardTitle } from './VCardTitle'\nimport { VDefaultsProvider } from '../VDefaultsProvider'\n\n// Composables\nimport { IconValue } from '@/composables/icons'\nimport { makeDensityProps } from '@/composables/density'\n\n// Utility\nimport { defineComponent } from 'vue'\nimport { useRender } from '@/util'\n\nexport const VCardItem = defineComponent({\n  name: 'VCardItem',\n\n  props: {\n    appendAvatar: String,\n    appendIcon: IconValue,\n    prependAvatar: String,\n    prependIcon: IconValue,\n    subtitle: String,\n    title: String,\n\n    ...makeDensityProps(),\n  },\n\n  setup (props, { slots }) {\n    useRender(() => {\n      const hasPrepend = !!(props.prependAvatar || props.prependIcon || slots.prepend)\n      const hasAppend = !!(props.appendAvatar || props.appendIcon || slots.append)\n      const hasTitle = !!(props.title || slots.title)\n      const hasSubtitle = !!(props.subtitle || slots.subtitle)\n\n      return (\n        <div class=\"v-card-item\">\n          { hasPrepend && (\n            <VDefaultsProvider\n              key=\"prepend\"\n              defaults={{\n                VAvatar: {\n                  density: props.density,\n                  icon: props.prependIcon,\n                  image: props.prependAvatar,\n                },\n                VIcon: {\n                  density: props.density,\n                  icon: props.prependIcon,\n                },\n              }}\n            >\n              <div class=\"v-card-item__prepend\">\n                { slots.prepend?.() ?? (<VAvatar />) }\n              </div>\n            </VDefaultsProvider>\n          ) }\n\n          <div class=\"v-card-item__content\">\n            { hasTitle && (\n              <VCardTitle key=\"title\">\n                { slots.title?.() ?? props.title}\n              </VCardTitle>\n            ) }\n\n            { hasSubtitle && (\n              <VCardSubtitle key=\"subtitle\">\n                { slots.subtitle?.() ?? props.subtitle }\n              </VCardSubtitle>\n            ) }\n\n            { slots.default?.() }\n          </div>\n\n          { hasAppend && (\n            <VDefaultsProvider\n              key=\"append\"\n              defaults={{\n                VAvatar: {\n                  density: props.density,\n                  icon: props.appendIcon,\n                  image: props.appendAvatar,\n                },\n                VIcon: {\n                  density: props.density,\n                  icon: props.appendIcon,\n                },\n              }}\n            >\n              <div class=\"v-card-item__append\">\n                { slots.append?.() ?? (<VAvatar />) }\n              </div>\n            </VDefaultsProvider>\n          ) }\n        </div>\n      )\n    })\n\n    return {}\n  },\n})\n"],"mappings":";AAAA;SACSA,O;SACAC,a;SACAC,U;SACAC,iB,0CAET;;SACSC,S;SACAC,gB,yCAET;;AACA,SAASC,eAAT,QAAgC,KAAhC;SACSC,S;AAET,OAAO,MAAMC,SAAS,GAAGF,eAAe,CAAC;EACvCG,IAAI,EAAE,WADiC;EAGvCC,KAAK,EAAE;IACLC,YAAY,EAAEC,MADT;IAELC,UAAU,EAAET,SAFP;IAGLU,aAAa,EAAEF,MAHV;IAILG,WAAW,EAAEX,SAJR;IAKLY,QAAQ,EAAEJ,MALL;IAMLK,KAAK,EAAEL,MANF;IAQL,GAAGP,gBAAgB;EARd,CAHgC;;EAcvCa,KAAK,CAAER,KAAF,QAAoB;IAAA,IAAX;MAAES;IAAF,CAAW;IACvBZ,SAAS,CAAC,MAAM;MAAA;;MACd,MAAMa,UAAU,GAAG,CAAC,EAAEV,KAAK,CAACI,aAAN,IAAuBJ,KAAK,CAACK,WAA7B,IAA4CI,KAAK,CAACE,OAApD,CAApB;MACA,MAAMC,SAAS,GAAG,CAAC,EAAEZ,KAAK,CAACC,YAAN,IAAsBD,KAAK,CAACG,UAA5B,IAA0CM,KAAK,CAACI,MAAlD,CAAnB;MACA,MAAMC,QAAQ,GAAG,CAAC,EAAEd,KAAK,CAACO,KAAN,IAAeE,KAAK,CAACF,KAAvB,CAAlB;MACA,MAAMQ,WAAW,GAAG,CAAC,EAAEf,KAAK,CAACM,QAAN,IAAkBG,KAAK,CAACH,QAA1B,CAArB;MAEA;QAAA,SACa;MADb,IAEMI,UAAU;QAAA,OAEJ,SAFI;QAAA,YAGE;UACRpB,OAAO,EAAE;YACP0B,OAAO,EAAEhB,KAAK,CAACgB,OADR;YAEPC,IAAI,EAAEjB,KAAK,CAACK,WAFL;YAGPa,KAAK,EAAElB,KAAK,CAACI;UAHN,CADD;UAMRe,KAAK,EAAE;YACLH,OAAO,EAAEhB,KAAK,CAACgB,OADV;YAELC,IAAI,EAAEjB,KAAK,CAACK;UAFP;QANC;MAHF;QAAA;UAAA,SAeG;QAfH,IAgBJ,mBAAAI,KAAK,CAACE,OAAN,yCAAAF,KAAK,uCAhBD;MAAA,EAFhB;QAAA,SAuBe;MAvBf,IAwBQK,QAAQ;QAAA,OACQ;MADR;QAAA,gBAEJ,iBAAAL,KAAK,CAACF,KAAN,uCAAAE,KAAK,MAAcT,KAAK,CAACO,KAFrB;MAAA,EAxBhB,EA8BQQ,WAAW;QAAA,OACQ;MADR;QAAA,gBAEP,oBAAAN,KAAK,CAACH,QAAN,0CAAAG,KAAK,MAAiBT,KAAK,CAACM,QAFrB;MAAA,EA9BnB,oBAoCQG,KAAK,CAACW,OApCd,qBAoCQ,oBAAAX,KAAK,CApCb,IAuCMG,SAAS;QAAA,OAEH,QAFG;QAAA,YAGG;UACRtB,OAAO,EAAE;YACP0B,OAAO,EAAEhB,KAAK,CAACgB,OADR;YAEPC,IAAI,EAAEjB,KAAK,CAACG,UAFL;YAGPe,KAAK,EAAElB,KAAK,CAACC;UAHN,CADD;UAMRkB,KAAK,EAAE;YACLH,OAAO,EAAEhB,KAAK,CAACgB,OADV;YAELC,IAAI,EAAEjB,KAAK,CAACG;UAFP;QANC;MAHH;QAAA;UAAA,SAeI;QAfJ,IAgBH,kBAAAM,KAAK,CAACI,MAAN,wCAAAJ,KAAK,uCAhBF;MAAA,EAvCf;IA6DD,CAnEQ,CAAT;IAqEA,OAAO,EAAP;EACD;;AArFsC,CAAD,CAAjC"}

package/lib/components/VCard/VCardSubtitle.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VCard/VCardSubtitle.ts"],"names":["createSimpleFunctional","VCardSubtitle"],"mappings":"SAASA,sB;AAET,OAAO,MAAMC,aAAa,GAAGD,sBAAsB,CAAC,iBAAD,CAA5C","sourcesContent":["import { createSimpleFunctional } from '@/util'\n\nexport const VCardSubtitle = createSimpleFunctional('v-card-subtitle')\n"],"file":"VCardSubtitle.mjs"}
+{"version":3,"file":"VCardSubtitle.mjs","names":["createSimpleFunctional","VCardSubtitle"],"sources":["../../../src/components/VCard/VCardSubtitle.ts"],"sourcesContent":["import { createSimpleFunctional } from '@/util'\n\nexport const VCardSubtitle = createSimpleFunctional('v-card-subtitle')\n"],"mappings":"SAASA,sB;AAET,OAAO,MAAMC,aAAa,GAAGD,sBAAsB,CAAC,iBAAD,CAA5C"}

package/lib/components/VCard/VCardText.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VCard/VCardText.ts"],"names":["createSimpleFunctional","VCardText"],"mappings":"SAASA,sB;AAET,OAAO,MAAMC,SAAS,GAAGD,sBAAsB,CAAC,aAAD,CAAxC","sourcesContent":["import { createSimpleFunctional } from '@/util'\n\nexport const VCardText = createSimpleFunctional('v-card-text')\n"],"file":"VCardText.mjs"}
+{"version":3,"file":"VCardText.mjs","names":["createSimpleFunctional","VCardText"],"sources":["../../../src/components/VCard/VCardText.ts"],"sourcesContent":["import { createSimpleFunctional } from '@/util'\n\nexport const VCardText = createSimpleFunctional('v-card-text')\n"],"mappings":"SAASA,sB;AAET,OAAO,MAAMC,SAAS,GAAGD,sBAAsB,CAAC,aAAD,CAAxC"}

package/lib/components/VCard/VCardTitle.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VCard/VCardTitle.ts"],"names":["createSimpleFunctional","VCardTitle"],"mappings":"SAASA,sB;AAET,OAAO,MAAMC,UAAU,GAAGD,sBAAsB,CAAC,cAAD,CAAzC","sourcesContent":["import { createSimpleFunctional } from '@/util'\n\nexport const VCardTitle = createSimpleFunctional('v-card-title')\n"],"file":"VCardTitle.mjs"}
+{"version":3,"file":"VCardTitle.mjs","names":["createSimpleFunctional","VCardTitle"],"sources":["../../../src/components/VCard/VCardTitle.ts"],"sourcesContent":["import { createSimpleFunctional } from '@/util'\n\nexport const VCardTitle = createSimpleFunctional('v-card-title')\n"],"mappings":"SAASA,sB;AAET,OAAO,MAAMC,UAAU,GAAGD,sBAAsB,CAAC,cAAD,CAAzC"}