import { mergeProps as _mergeProps, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue"; // Styles import "./VAlert.css"; // Components import { VAlertTitle } from "./VAlertTitle.mjs"; import { VBtn } from "../VBtn/index.mjs"; import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs"; import { VIcon } from "../VIcon/index.mjs"; // Composables import { useTextColor } from "../../composables/color.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 { useLocale } from "../../composables/locale.mjs"; import { makeLocationProps, useLocation } from "../../composables/location.mjs"; import { makePositionProps, usePosition } from "../../composables/position.mjs"; import { useProxiedModel } from "../../composables/proxiedModel.mjs"; import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs"; import { makeTagProps } from "../../composables/tag.mjs"; import { makeThemeProps, provideTheme } from "../../composables/theme.mjs"; import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.mjs"; // Utilities import { computed, toRef } from 'vue'; import { genericComponent, propsFactory } from "../../util/index.mjs"; // Types const allowedTypes = ['success', 'info', 'warning', 'error']; export const makeVAlertProps = propsFactory({ border: { type: [Boolean, String], validator: val => { return typeof val === 'boolean' || ['top', 'end', 'bottom', 'start'].includes(val); } }, borderColor: String, closable: Boolean, closeIcon: { type: IconValue, default: '$close' }, closeLabel: { type: String, default: '$vuetify.close' }, icon: { type: [Boolean, String, Function, Object], default: null }, modelValue: { type: Boolean, default: true }, prominent: Boolean, title: String, text: String, type: { type: String, validator: val => allowedTypes.includes(val) }, ...makeComponentProps(), ...makeDensityProps(), ...makeDimensionProps(), ...makeElevationProps(), ...makeLocationProps(), ...makePositionProps(), ...makeRoundedProps(), ...makeTagProps(), ...makeThemeProps(), ...makeVariantProps({ variant: 'flat' }) }, 'VAlert'); export const VAlert = genericComponent()({ name: 'VAlert', props: makeVAlertProps(), emits: { 'click:close': e => true, 'update:modelValue': value => true }, setup(props, _ref) { let { emit, slots } = _ref; const isActive = useProxiedModel(props, 'modelValue'); const icon = computed(() => { if (props.icon === false) return undefined; if (!props.type) return props.icon; return props.icon ?? `$${props.type}`; }); const variantProps = computed(() => ({ color: props.color ?? props.type, variant: props.variant })); const { themeClasses } = provideTheme(props); const { colorClasses, colorStyles, variantClasses } = useVariant(variantProps); const { densityClasses } = useDensity(props); const { dimensionStyles } = useDimension(props); const { elevationClasses } = useElevation(props); const { locationStyles } = useLocation(props); const { positionClasses } = usePosition(props); const { roundedClasses } = useRounded(props); const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'borderColor')); const { t } = useLocale(); const closeProps = computed(() => ({ 'aria-label': t(props.closeLabel), onClick(e) { isActive.value = false; emit('click:close', e); } })); return () => { const hasPrepend = !!(slots.prepend || icon.value); const hasTitle = !!(slots.title || props.title); const hasClose = !!(slots.close || props.closable); return isActive.value && _createVNode(props.tag, { "class": ['v-alert', props.border && { 'v-alert--border': !!props.border, [`v-alert--border-${props.border === true ? 'start' : props.border}`]: true }, { 'v-alert--prominent': props.prominent }, themeClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, positionClasses.value, roundedClasses.value, variantClasses.value, props.class], "style": [colorStyles.value, dimensionStyles.value, locationStyles.value, props.style], "role": "alert" }, { default: () => [genOverlays(false, 'v-alert'), props.border && _createVNode("div", { "key": "border", "class": ['v-alert__border', textColorClasses.value], "style": textColorStyles.value }, null), hasPrepend && _createVNode("div", { "key": "prepend", "class": "v-alert__prepend" }, [!slots.prepend ? _createVNode(VIcon, { "key": "prepend-icon", "density": props.density, "icon": icon.value, "size": props.prominent ? 44 : 28 }, null) : _createVNode(VDefaultsProvider, { "key": "prepend-defaults", "disabled": !icon.value, "defaults": { VIcon: { density: props.density, icon: icon.value, size: props.prominent ? 44 : 28 } } }, slots.prepend)]), _createVNode("div", { "class": "v-alert__content" }, [hasTitle && _createVNode(VAlertTitle, { "key": "title" }, { default: () => [slots.title?.() ?? props.title] }), slots.text?.() ?? props.text, slots.default?.()]), slots.append && _createVNode("div", { "key": "append", "class": "v-alert__append" }, [slots.append()]), hasClose && _createVNode("div", { "key": "close", "class": "v-alert__close" }, [!slots.close ? _createVNode(VBtn, _mergeProps({ "key": "close-btn", "icon": props.closeIcon, "size": "x-small", "variant": "text" }, closeProps.value), null) : _createVNode(VDefaultsProvider, { "key": "close-defaults", "defaults": { VBtn: { icon: props.closeIcon, size: 'x-small', variant: 'text' } } }, { default: () => [slots.close?.({ props: closeProps.value })] })])] }); }; } }); //# sourceMappingURL=VAlert.mjs.map