202 lines
6.5 KiB
JavaScript
202 lines
6.5 KiB
JavaScript
import { computed, toRef, createVNode, mergeProps } from 'vue';
|
|
import { q as createSimpleFunctional, t as propsFactory, I as IconValue, v as makeComponentProps, w as makeDensityProps, x as makeDimensionProps, y as makeElevationProps, z as makeLocationProps, A as makePositionProps, B as makeRoundedProps, C as makeTagProps, D as makeThemeProps, E as makeVariantProps, l as genericComponent, F as useProxiedModel, G as provideTheme, H as useVariant, J as useDensity, K as useDimension, L as useElevation, M as useLocation, N as usePosition, O as useRounded, P as useTextColor, Q as useLocale, R as genOverlays, f as VIcon, S as VDefaultsProvider, e as VBtn } from './server.mjs';
|
|
|
|
const VAlertTitle = createSimpleFunctional("v-alert-title");
|
|
const allowedTypes = ["success", "info", "warning", "error"];
|
|
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");
|
|
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(() => {
|
|
var _a;
|
|
if (props.icon === false) return void 0;
|
|
if (!props.type) return props.icon;
|
|
return (_a = props.icon) != null ? _a : `$${props.type}`;
|
|
});
|
|
const variantProps = computed(() => {
|
|
var _a;
|
|
return {
|
|
color: (_a = props.color) != null ? _a : 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: () => {
|
|
var _a2;
|
|
var _a, _b;
|
|
return [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: () => {
|
|
var _a3;
|
|
var _a22;
|
|
return [(_a3 = (_a22 = slots.title) == null ? void 0 : _a22.call(slots)) != null ? _a3 : props.title];
|
|
}
|
|
}), (_a2 = (_a = slots.text) == null ? void 0 : _a.call(slots)) != null ? _a2 : props.text, (_b = slots.default) == null ? void 0 : _b.call(slots)]), 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: () => {
|
|
var _a22;
|
|
return [(_a22 = slots.close) == null ? void 0 : _a22.call(slots, {
|
|
props: closeProps.value
|
|
})];
|
|
}
|
|
})])];
|
|
}
|
|
});
|
|
};
|
|
}
|
|
});
|
|
|
|
export { VAlert as V };
|
|
//# sourceMappingURL=VAlert-BpInto26.mjs.map
|