vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
233 lines (232 loc) • 10.4 kB
JavaScript
import { defineComponent as C, ref as p, computed as g, createBlock as B, openBlock as o, Transition as M, withCtx as L, createElementBlock as l, createCommentVNode as r, normalizeStyle as S, normalizeClass as $, unref as a, createElementVNode as t, Fragment as T, renderSlot as i, createTextVNode as y, toDisplayString as h, withKeys as V, withModifiers as H, nextTick as A } from "vue";
import { useInject as E, useSlotsExist as I } from "../utils/index.js";
const K = {
key: 0,
class: "m-alert-icon"
}, N = ["src"], D = {
key: 1,
class: "icon-svg",
focusable: "false",
"data-icon": "info-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, R = {
key: 2,
class: "icon-svg",
focusable: "false",
"data-icon": "check-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, _ = {
key: 3,
class: "icon-svg",
focusable: "false",
"data-icon": "exclamation-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, j = {
key: 4,
class: "icon-svg",
focusable: "false",
"data-icon": "close-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, F = {
key: 1,
class: "m-big-icon"
}, P = ["src"], q = {
key: 1,
class: "icon-svg",
focusable: "false",
"data-icon": "info-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, G = {
key: 2,
class: "icon-svg",
focusable: "false",
"data-icon": "check-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, J = {
key: 3,
class: "icon-svg",
focusable: "false",
"data-icon": "exclamation-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, O = {
key: 4,
class: "icon-svg",
focusable: "false",
"data-icon": "close-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, Q = { class: "m-alert-content" }, U = { class: "alert-message" }, W = {
key: 0,
class: "alert-description"
}, X = {
key: 1,
class: "m-alert-actions"
}, Y = ["onKeydown"], Z = { key: 0 }, x = {
key: 1,
class: "alert-close",
focusable: "false",
"data-icon": "close",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, le = /* @__PURE__ */ C({
__name: "Alert",
props: {
message: { default: void 0 },
description: { default: void 0 },
type: { default: "default" },
bordered: { type: Boolean, default: !0 },
closable: { type: Boolean, default: !1 },
closeText: { default: void 0 },
icon: { default: void 0 },
showIcon: { type: Boolean, default: !1 },
actions: { default: void 0 }
},
emits: ["close"],
setup(w, { emit: b }) {
const c = w, n = p(), m = p(!1), { colorPalettes: d } = E("Alert"), k = b, u = I(["icon", "description", "actions"]), z = g(() => u.icon || c.icon || ["success", "info", "warning", "error"].includes(c.type)), f = g(() => u.description || c.description);
async function v(e) {
n.value.style.maxHeight = `${n.value.offsetHeight}px`, await A(), m.value = !0, k("close", e);
}
return (e, s) => (o(), B(M, {
name: "alert-motion",
"leave-from-class": "alert-motion-leave",
"leave-active-class": "alert-motion-leave alert-motion-leave-active",
"leave-to-class": "alert-motion-leave alert-motion-leave-active"
}, {
default: L(() => [
m.value ? r("", !0) : (o(), l("div", {
key: 0,
ref_key: "alertRef",
ref: n,
class: $(["m-alert", [
`alert-${e.type}`,
{
"alert-borderless": !e.bordered,
"alert-width-description": f.value
}
]]),
style: S(`
--alert-primary-color: ${a(d)[5]};
--alert-primary-bg-color: ${a(d)[0]};
--alert-primary-border-color: ${a(d)[2]};
--alert-success-color: #52c41a;
--alert-success-bg-color: #f6ffed;
--alert-success-border-color: #b7eb8f;
--alert-warning-color: #faad14;
--alert-warning-bg-color: #fffbe6;
--alert-warning-border-color: #ffe58f;
--alert-error-color: #ff4d4f;
--alert-error-bg-color: #fff2f0;
--alert-error-border-color: #ffccc7;
`)
}, [
e.showIcon && z.value ? (o(), l(T, { key: 0 }, [
f.value ? (o(), l("span", F, [
i(e.$slots, "icon", {}, () => [
e.icon ? (o(), l("img", {
key: 0,
src: e.icon,
class: "big-icon-img"
}, null, 8, P)) : e.type === "info" ? (o(), l("svg", q, s[4] || (s[4] = [
t("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" }, null, -1),
t("path", { d: "M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z" }, null, -1)
]))) : e.type === "success" ? (o(), l("svg", G, s[5] || (s[5] = [
t("path", { d: "M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0051.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z" }, null, -1),
t("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" }, null, -1)
]))) : e.type === "warning" ? (o(), l("svg", J, s[6] || (s[6] = [
t("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" }, null, -1),
t("path", { d: "M464 688a48 48 0 1096 0 48 48 0 10-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z" }, null, -1)
]))) : e.type === "error" ? (o(), l("svg", O, s[7] || (s[7] = [
t("path", { d: "M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z" }, null, -1),
t("path", { d: "M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" }, null, -1)
]))) : r("", !0)
], !0)
])) : (o(), l("span", K, [
i(e.$slots, "icon", {}, () => [
e.icon ? (o(), l("img", {
key: 0,
src: e.icon,
class: "icon-img"
}, null, 8, N)) : e.type === "info" ? (o(), l("svg", D, s[0] || (s[0] = [
t("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z" }, null, -1)
]))) : e.type === "success" ? (o(), l("svg", R, s[1] || (s[1] = [
t("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z" }, null, -1)
]))) : e.type === "warning" ? (o(), l("svg", _, s[2] || (s[2] = [
t("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z" }, null, -1)
]))) : e.type === "error" ? (o(), l("svg", j, s[3] || (s[3] = [
t("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z" }, null, -1)
]))) : r("", !0)
], !0)
]))
], 64)) : r("", !0),
t("div", Q, [
t("div", U, [
i(e.$slots, "default", {}, () => [
y(h(e.message), 1)
], !0)
]),
f.value ? (o(), l("div", W, [
i(e.$slots, "description", {}, () => [
y(h(e.description), 1)
], !0)
])) : r("", !0)
]),
a(u).actions ? (o(), l("div", X, [
i(e.$slots, "actions", {}, void 0, !0)
])) : r("", !0),
e.closable ? (o(), l("a", {
key: 2,
tabindex: "0",
class: "m-alert-close",
onClick: v,
onKeydown: V(H(v, ["prevent"]), ["enter"])
}, [
i(e.$slots, "closeText", {}, () => [
e.closeText ? (o(), l("span", Z, h(e.closeText), 1)) : (o(), l("svg", x, s[8] || (s[8] = [
t("path", { d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" }, null, -1)
])))
], !0)
], 40, Y)) : r("", !0)
], 6))
]),
_: 3
}));
}
});
export {
le as default
};