Vulture/VApp/node_modules/vuetify/lib/components/VAlert/VAlert.mjs

205 lines
6.7 KiB
JavaScript

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