@vuetify/nightly 3.0.0-alpha.3 → 3.0.0-beta.10

package/lib/components/VCard/VCard.css

@@ -0,0 +1,287 @@
+.v-card {
+  display: block;
+  overflow: hidden;
+  overflow-wrap: break-word;
+  position: relative;
+  padding: 0;
+  text-decoration: none;
+  transition-duration: 0.28s;
+  transition-property: box-shadow, opacity, background;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 0;
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+  border-style: solid;
+  border-width: 0;
+  border-radius: 4px;
+}
+.v-card--border {
+  border-width: thin;
+  box-shadow: none;
+}
+.v-card--absolute {
+  position: absolute;
+}
+.v-card--fixed {
+  position: fixed;
+}
+.v-card:hover > .v-card__overlay {
+  opacity: calc(0.04 * var(--v-theme-overlay-multiplier));
+}
+.v-card:focus-visible > .v-card__overlay {
+  opacity: calc(0.12 * var(--v-theme-overlay-multiplier));
+}
+@supports not selector(:focus-visible) {
+  .v-card:focus > .v-card__overlay {
+    opacity: calc(0.12 * var(--v-theme-overlay-multiplier));
+  }
+}
+.v-card--active > .v-card__overlay, .v-card[aria-haspopup=menu][aria-expanded=true] > .v-card__overlay {
+  opacity: calc(0.12 * var(--v-theme-overlay-multiplier));
+}
+.v-card--active:hover > .v-card__overlay, .v-card[aria-haspopup=menu][aria-expanded=true]:hover > .v-card__overlay {
+  opacity: calc(0.12 * var(--v-theme-overlay-multiplier));
+}
+.v-card--active:focus > .v-card__overlay, .v-card[aria-haspopup=menu][aria-expanded=true]:focus > .v-card__overlay {
+  opacity: calc(0.16 * var(--v-theme-overlay-multiplier));
+}
+.v-card--variant-plain, .v-card--variant-outlined, .v-card--variant-text, .v-card--variant-tonal {
+  background: transparent;
+  color: inherit;
+}
+.v-card--variant-plain {
+  opacity: 0.62;
+}
+.v-card--variant-plain:focus, .v-card--variant-plain:hover {
+  opacity: 1;
+}
+.v-card--variant-plain .v-card__overlay {
+  display: none;
+}
+.v-card--variant-elevated, .v-card--variant-flat {
+  background: rgb(var(--v-theme-surface));
+  color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
+.v-card--variant-elevated {
+  box-shadow: 0px 2px 1px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 1px 1px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 3px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
+}
+.v-card--variant-flat {
+  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
+}
+.v-card--variant-outlined {
+  border: thin solid currentColor;
+}
+.v-card--variant-text .v-card__overlay {
+  background: currentColor;
+}
+.v-card--variant-tonal .v-card__underlay {
+  background: currentColor;
+  opacity: var(--v-activated-opacity);
+  border-radius: inherit;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+}
+.v-card--disabled {
+  pointer-events: none;
+  user-select: none;
+}
+.v-card--disabled > :not(.v-card__loader) {
+  opacity: 0.6;
+}
+.v-card--flat {
+  box-shadow: none;
+}
+.v-card--hover {
+  cursor: pointer;
+  box-shadow: 0px 0px 0px 0px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 0px 0px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
+}
+.v-card--hover::before, .v-card--hover::after {
+  border-radius: inherit;
+  bottom: 0;
+  content: "";
+  display: block;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: inherit;
+}
+.v-card--hover::before {
+  opacity: 1;
+  z-index: -1;
+  box-shadow: 0px 2px 1px -1px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 1px 1px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 1px 3px 0px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
+}
+.v-card--hover::after {
+  z-index: 1;
+  opacity: 0;
+  box-shadow: 0px 5px 5px -3px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)), 0px 8px 10px 1px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)), 0px 3px 14px 2px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12));
+}
+.v-card--hover:hover::after {
+  opacity: 1;
+}
+.v-card--hover:hover::before {
+  opacity: 0;
+}
+.v-card--link {
+  cursor: pointer;
+}
+
+.v-card-actions {
+  align-items: center;
+  display: flex;
+  flex: none;
+  min-height: 52px;
+  padding: 0.5rem;
+}
+
+.v-card-item {
+  align-items: center;
+  display: grid;
+  flex: none;
+  grid-template-areas: "prepend content append";
+  grid-template-columns: max-content auto max-content;
+  padding: 0.625rem 1rem;
+}
+.v-card-item + .v-card-text {
+  padding-top: 0;
+}
+.v-card-item__prepend {
+  grid-area: prepend;
+  padding-inline-end: 1rem;
+}
+.v-card-item__append {
+  grid-area: append;
+  padding-inline-start: 1rem;
+}
+
+.v-card-item__content {
+  align-self: center;
+  grid-area: content;
+  overflow: hidden;
+}
+
+.v-card-title {
+  display: block;
+  flex: none;
+  font-size: 1.25rem;
+  font-weight: 500;
+  hyphens: auto;
+  letter-spacing: 0.0125em;
+  min-width: 0;
+  overflow-wrap: normal;
+  overflow: hidden;
+  overflow: hidden;
+  padding: 0.5rem 1rem;
+  text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  text-transform: none;
+  white-space: nowrap;
+  white-space: nowrap;
+  word-break: normal;
+  word-wrap: break-word;
+}
+.v-card .v-card-title {
+  line-height: 2rem;
+}
+.v-card--density-comfortable .v-card-title {
+  line-height: 1.75rem;
+}
+.v-card--density-compact .v-card-title {
+  line-height: 1.55rem;
+}
+.v-card-item .v-card-title {
+  padding: 0;
+}
+.v-card-title + .v-card-text,
+.v-card-title + .v-card-actions {
+  padding-top: 0;
+}
+
+.v-card-subtitle {
+  display: block;
+  flex: none;
+  font-size: 0.875rem;
+  font-weight: 400;
+  letter-spacing: 0.0178571429em;
+  opacity: var(--v-medium-emphasis-opacity);
+  overflow: hidden;
+  padding: 0 1rem;
+  text-overflow: ellipsis;
+  text-transform: none;
+  white-space: nowrap;
+}
+.v-card .v-card-subtitle {
+  line-height: 1.25rem;
+}
+.v-card--density-comfortable .v-card-subtitle {
+  line-height: 1.125rem;
+}
+.v-card--density-compact .v-card-subtitle {
+  line-height: 1rem;
+}
+.v-card-item .v-card-subtitle {
+  padding: 0 0 0.25rem;
+}
+
+.v-card-text {
+  flex: 1 1 auto;
+  font-size: 0.875rem;
+  font-weight: 400;
+  letter-spacing: 0.0178571429em;
+  padding: 1rem;
+  text-transform: none;
+}
+.v-card .v-card-text {
+  line-height: 1.25rem;
+}
+.v-card--density-comfortable .v-card-text {
+  line-height: 1.2rem;
+}
+.v-card--density-compact .v-card-text {
+  line-height: 1.15rem;
+}
+
+.v-card__image {
+  display: flex;
+  height: 100%;
+  flex: 1 1 auto;
+  left: 0;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: -1;
+}
+
+.v-card__content {
+  border-radius: inherit;
+  overflow: hidden;
+  position: relative;
+}
+
+.v-card__loader {
+  bottom: auto;
+  top: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  width: 100%;
+  z-index: 1;
+}
+
+.v-card__overlay {
+  background-color: currentColor;
+  border-radius: inherit;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+}

package/lib/components/VCard/VCard.mjs

@@ -1,82 +1,176 @@
-// @ts-nocheck
+import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
 
-/* eslint-disable */
+/* eslint-disable complexity */
 // Styles
-import "./VCard.sass"; // Extensions
+import "./VCard.css"; // Components
 
-import VSheet from "../VSheet/index.mjs"; // Mixins
+import { VCardActions } from "./VCardActions.mjs";
+import { VCardItem } from "./VCardItem.mjs";
+import { VCardText } from "./VCardText.mjs";
+import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
+import { VImg } from "../VImg/index.mjs"; // Directives
 
-import Loadable from "../../mixins/loadable/index.mjs";
-import Routable from "../../mixins/routable/index.mjs"; // Helpers
+import { Ripple } from "../../directives/ripple/index.mjs"; // Composables
 
-import mixins from "../../util/mixins.mjs"; // Types
+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"; // Utilities
 
-/* @vue/component */
-export default mixins(Loadable, Routable, VSheet).extend({
-  name: 'v-card',
+import { defineComponent, useRender } from "../../util/index.mjs";
+import { computed } from 'vue';
+export const VCard = defineComponent({
+  name: 'VCard',
+  directives: {
+    Ripple
+  },
   props: {
+    appendAvatar: String,
+    appendIcon: IconValue,
+    disabled: Boolean,
     flat: Boolean,
     hover: Boolean,
-    img: String,
-    link: Boolean,
-    loaderHeight: {
-      type: [Number, String],
-      default: 4
-    },
-    raised: Boolean
-  },
-  computed: {
-    classes() {
-      return {
-        'v-card': true,
-        ...Routable.options.computed.classes.call(this),
-        'v-card--flat': this.flat,
-        'v-card--hover': this.hover,
-        'v-card--link': this.isClickable,
-        'v-card--loading': this.loading,
-        'v-card--disabled': this.disabled,
-        'v-card--raised': this.raised,
-        ...VSheet.options.computed.classes.call(this)
-      };
+    image: String,
+    link: {
+      type: Boolean,
+      default: undefined
     },
-
-    styles() {
-      const style = { ...VSheet.options.computed.styles.call(this)
-      };
-
-      if (this.img) {
-        style.background = "url(\"".concat(this.img, "\") center center / cover no-repeat");
-      }
-
-      return style;
-    }
-
+    prependAvatar: String,
+    prependIcon: IconValue,
+    ripple: Boolean,
+    subtitle: String,
+    text: String,
+    title: String,
+    ...makeThemeProps(),
+    ...makeBorderProps(),
+    ...makeDensityProps(),
+    ...makeDimensionProps(),
+    ...makeElevationProps(),
+    ...makeLoaderProps(),
+    ...makeLocationProps(),
+    ...makePositionProps(),
+    ...makeRoundedProps(),
+    ...makeRouterProps(),
+    ...makeTagProps(),
+    ...makeVariantProps({
+      variant: 'elevated'
+    })
   },
-  methods: {
-    genProgress() {
-      const render = Loadable.options.methods.genProgress.call(this);
-      if (!render) return null;
-      return this.$createElement('div', {
-        staticClass: 'v-card__progress',
-        key: 'progress'
-      }, [render]);
-    }
 
-  },
-
-  render(h) {
+  setup(props, _ref) {
+    let {
+      attrs,
+      slots
+    } = _ref;
     const {
-      tag,
-      data
-    } = this.generateRouteLink();
-    data.style = this.styles;
-
-    if (this.isClickable) {
-      data.attrs = data.attrs || {};
-      data.attrs.tabindex = 0;
-    }
+      themeClasses
+    } = provideTheme(props);
+    const {
+      borderClasses
+    } = useBorder(props);
+    const {
+      colorClasses,
+      colorStyles,
+      variantClasses
+    } = useVariant(props);
+    const {
+      densityClasses
+    } = useDensity(props);
+    const {
+      dimensionStyles
+    } = useDimension(props);
+    const {
+      elevationClasses
+    } = useElevation(props);
+    const {
+      loaderClasses
+    } = useLoader(props);
+    const {
+      locationStyles
+    } = useLocation(props);
+    const {
+      positionClasses
+    } = usePosition(props);
+    const {
+      roundedClasses
+    } = useRounded(props);
+    const link = useLink(props, attrs);
+    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;
 
-    return h(tag, this.setBackgroundColor(this.color, data), [this.genProgress(), this.$slots.default]);
+      const Tag = isLink.value ? 'a' : props.tag;
+      const hasTitle = !!(slots.title || props.title);
+      const hasSubtitle = !!(slots.subtitle || props.subtitle);
+      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 hasCardItem = hasHeader || hasPrepend || hasAppend;
+      const hasText = !!(slots.text || props.text);
+      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.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.value && link.navigate
+      }, {
+        default: () => [hasImage && _createVNode(VDefaultsProvider, {
+          "key": "image",
+          "defaults": {
+            VImg: {
+              cover: true,
+              src: props.image
+            }
+          }
+        }, {
+          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
+        }), 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.ts"],"names":["VSheet","Loadable","Routable","mixins","extend","name","props","flat","Boolean","hover","img","String","link","loaderHeight","type","Number","default","raised","computed","classes","options","call","isClickable","loading","disabled","styles","style","background","methods","genProgress","render","$createElement","staticClass","key","h","tag","data","generateRouteLink","attrs","tabindex","setBackgroundColor","color","$slots"],"mappings":"AAAA;;AACA;AAEA;AACA,sB,CAEA;;OACOA,M,6BAEP;;OACOC,Q;OACAC,Q,yCAEP;;OACOC,M,+BAEP;;AAGA;AACA,eAAeA,MAAM,CACnBF,QADmB,EAEnBC,QAFmB,EAGnBF,MAHmB,CAAN,CAIbI,MAJa,CAIN;AACPC,EAAAA,IAAI,EAAE,QADC;AAGPC,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAEC,OADD;AAELC,IAAAA,KAAK,EAAED,OAFF;AAGLE,IAAAA,GAAG,EAAEC,MAHA;AAILC,IAAAA,IAAI,EAAEJ,OAJD;AAKLK,IAAAA,YAAY,EAAE;AACZC,MAAAA,IAAI,EAAE,CAACC,MAAD,EAASJ,MAAT,CADM;AAEZK,MAAAA,OAAO,EAAE;AAFG,KALT;AASLC,IAAAA,MAAM,EAAET;AATH,GAHA;AAePU,EAAAA,QAAQ,EAAE;AACRC,IAAAA,OAAO,GAAY;AACjB,aAAO;AACL,kBAAU,IADL;AAEL,WAAGjB,QAAQ,CAACkB,OAAT,CAAiBF,QAAjB,CAA0BC,OAA1B,CAAkCE,IAAlC,CAAuC,IAAvC,CAFE;AAGL,wBAAgB,KAAKd,IAHhB;AAIL,yBAAiB,KAAKE,KAJjB;AAKL,wBAAgB,KAAKa,WALhB;AAML,2BAAmB,KAAKC,OANnB;AAOL,4BAAoB,KAAKC,QAPpB;AAQL,0BAAkB,KAAKP,MARlB;AASL,WAAGjB,MAAM,CAACoB,OAAP,CAAeF,QAAf,CAAwBC,OAAxB,CAAgCE,IAAhC,CAAqC,IAArC;AATE,OAAP;AAWD,KAbO;;AAcRI,IAAAA,MAAM,GAAY;AAChB,YAAMC,KAAyB,GAAG,EAChC,GAAG1B,MAAM,CAACoB,OAAP,CAAeF,QAAf,CAAwBO,MAAxB,CAA+BJ,IAA/B,CAAoC,IAApC;AAD6B,OAAlC;;AAIA,UAAI,KAAKX,GAAT,EAAc;AACZgB,QAAAA,KAAK,CAACC,UAAN,mBAA2B,KAAKjB,GAAhC;AACD;;AAED,aAAOgB,KAAP;AACD;;AAxBO,GAfH;AA0CPE,EAAAA,OAAO,EAAE;AACPC,IAAAA,WAAW,GAAI;AACb,YAAMC,MAAM,GAAG7B,QAAQ,CAACmB,OAAT,CAAiBQ,OAAjB,CAAyBC,WAAzB,CAAqCR,IAArC,CAA0C,IAA1C,CAAf;AAEA,UAAI,CAACS,MAAL,EAAa,OAAO,IAAP;AAEb,aAAO,KAAKC,cAAL,CAAoB,KAApB,EAA2B;AAChCC,QAAAA,WAAW,EAAE,kBADmB;AAEhCC,QAAAA,GAAG,EAAE;AAF2B,OAA3B,EAGJ,CAACH,MAAD,CAHI,CAAP;AAID;;AAVM,GA1CF;;AAuDPA,EAAAA,MAAM,CAAEI,CAAF,EAAY;AAChB,UAAM;AAAEC,MAAAA,GAAF;AAAOC,MAAAA;AAAP,QAAgB,KAAKC,iBAAL,EAAtB;AAEAD,IAAAA,IAAI,CAACV,KAAL,GAAa,KAAKD,MAAlB;;AAEA,QAAI,KAAKH,WAAT,EAAsB;AACpBc,MAAAA,IAAI,CAACE,KAAL,GAAaF,IAAI,CAACE,KAAL,IAAc,EAA3B;AACAF,MAAAA,IAAI,CAACE,KAAL,CAAWC,QAAX,GAAsB,CAAtB;AACD;;AAED,WAAOL,CAAC,CAACC,GAAD,EAAM,KAAKK,kBAAL,CAAwB,KAAKC,KAA7B,EAAoCL,IAApC,CAAN,EAAiD,CACvD,KAAKP,WAAL,EADuD,EAEvD,KAAKa,MAAL,CAAY1B,OAF2C,CAAjD,CAAR;AAID;;AArEM,CAJM,CAAf","sourcesContent":["// @ts-nocheck\n/* eslint-disable */\n\n// Styles\nimport './VCard.sass'\n\n// Extensions\nimport VSheet from '../VSheet'\n\n// Mixins\nimport Loadable from '../../mixins/loadable'\nimport Routable from '../../mixins/routable'\n\n// Helpers\nimport mixins from '../../util/mixins'\n\n// Types\nimport { VNode } from 'vue'\n\n/* @vue/component */\nexport default mixins(\n  Loadable,\n  Routable,\n  VSheet\n).extend({\n  name: 'v-card',\n\n  props: {\n    flat: Boolean,\n    hover: Boolean,\n    img: String,\n    link: Boolean,\n    loaderHeight: {\n      type: [Number, String],\n      default: 4,\n    },\n    raised: Boolean,\n  },\n\n  computed: {\n    classes (): object {\n      return {\n        'v-card': true,\n        ...Routable.options.computed.classes.call(this),\n        'v-card--flat': this.flat,\n        'v-card--hover': this.hover,\n        'v-card--link': this.isClickable,\n        'v-card--loading': this.loading,\n        'v-card--disabled': this.disabled,\n        'v-card--raised': this.raised,\n        ...VSheet.options.computed.classes.call(this),\n      }\n    },\n    styles (): object {\n      const style: Dictionary<string> = {\n        ...VSheet.options.computed.styles.call(this),\n      }\n\n      if (this.img) {\n        style.background = `url(\"${this.img}\") center center / cover no-repeat`\n      }\n\n      return style\n    },\n  },\n\n  methods: {\n    genProgress () {\n      const render = Loadable.options.methods.genProgress.call(this)\n\n      if (!render) return null\n\n      return this.$createElement('div', {\n        staticClass: 'v-card__progress',\n        key: 'progress',\n      }, [render])\n    },\n  },\n\n  render (h): VNode {\n    const { tag, data } = this.generateRouteLink()\n\n    data.style = this.styles\n\n    if (this.isClickable) {\n      data.attrs = data.attrs || {}\n      data.attrs.tabindex = 0\n    }\n\n    return h(tag, this.setBackgroundColor(this.color, data), [\n      this.genProgress(),\n      this.$slots.default,\n    ])\n  },\n})\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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"}