import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue"; /* eslint-disable complexity */ // Styles import "./VCard.css"; // Components 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"; // Composables import { makeBorderProps, useBorder } from "../../composables/border.mjs"; import { makeComponentProps } from "../../composables/component.mjs"; import { makeDensityProps, useDensity } from "../../composables/density.mjs"; import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs"; import { makeElevationProps, useElevation } from "../../composables/elevation.mjs"; import { IconValue } from "../../composables/icons.mjs"; import { LoaderSlot, makeLoaderProps, useLoader } from "../../composables/loader.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 { computed } from 'vue'; import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types export const makeVCardProps = propsFactory({ appendAvatar: String, appendIcon: IconValue, disabled: Boolean, flat: Boolean, hover: Boolean, image: String, link: { type: Boolean, default: undefined }, prependAvatar: String, prependIcon: IconValue, ripple: { type: [Boolean, Object], default: true }, subtitle: [String, Number], text: [String, Number], title: [String, Number], ...makeBorderProps(), ...makeComponentProps(), ...makeDensityProps(), ...makeDimensionProps(), ...makeElevationProps(), ...makeLoaderProps(), ...makeLocationProps(), ...makePositionProps(), ...makeRoundedProps(), ...makeRouterProps(), ...makeTagProps(), ...makeThemeProps(), ...makeVariantProps({ variant: 'elevated' }) }, 'VCard'); export const VCard = genericComponent()({ name: 'VCard', directives: { Ripple }, props: makeVCardProps(), setup(props, _ref) { let { attrs, slots } = _ref; const { 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(() => { const Tag = isLink.value ? 'a' : props.tag; const hasTitle = !!(slots.title || props.title != null); const hasSubtitle = !!(slots.subtitle || props.subtitle != null); 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 != null); 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, props.class], "style": [colorStyles.value, dimensionStyles.value, locationStyles.value, props.style], "href": link.href.value, "onClick": isClickable.value && link.navigate, "tabindex": props.disabled ? -1 : undefined }, { default: () => [hasImage && _createVNode("div", { "key": "image", "class": "v-card__image" }, [!slots.image ? _createVNode(VImg, { "key": "image-img", "cover": true, "src": props.image }, null) : _createVNode(VDefaultsProvider, { "key": "image-defaults", "disabled": !props.image, "defaults": { VImg: { cover: true, src: props.image } } }, slots.image)]), _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?.() ?? props.text] }), slots.default?.(), slots.actions && _createVNode(VCardActions, null, { default: slots.actions }), genOverlays(isClickable.value, 'v-card')] }), [[_resolveDirective("ripple"), isClickable.value && props.ripple]]); }); return {}; } }); //# sourceMappingURL=VCard.mjs.map