123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205 |
- 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
|