vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
207 lines (206 loc) • 7.53 kB
JavaScript
import { defineComponent as F, ref as a, computed as G, watch as H, onBeforeUnmount as P, createElementBlock as c, openBlock as l, normalizeStyle as C, unref as R, createVNode as U, TransitionGroup as q, withCtx as A, Fragment as I, renderList as J, withDirectives as K, normalizeClass as k, createElementVNode as s, createBlock as O, createCommentVNode as Q, resolveDynamicComponent as W, toDisplayString as X, vShow as Y } from "vue";
import { useInject as Z, rafTimeout as z, cancelRaf as g } from "../utils/index.js";
const ee = ["onMouseenter", "onMouseleave", "onClick"], oe = {
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"
}, ne = {
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"
}, te = {
key: 3,
class: "icon-svg",
focusable: "false",
"data-icon": "close-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
"fill-rule": "evenodd",
viewBox: "64 64 896 896"
}, le = {
key: 4,
class: "icon-svg",
focusable: "false",
"data-icon": "exclamation-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, ce = {
key: 5,
width: "1em",
height: "1em",
fill: "currentColor",
class: "icon-svg circle",
viewBox: "0 0 50 50"
}, se = { class: "message-content" }, ue = /* @__PURE__ */ F({
__name: "Message",
props: {
content: { default: void 0 },
duration: { default: 3e3 },
top: { default: 30 }
},
emits: ["click", "close"],
setup(M, { expose: _, emit: B }) {
const d = M, p = a(), u = a([]), r = a([]), n = a([]), f = a(null), h = a(), { colorPalettes: L } = Z("Message"), y = B, S = G(() => u.value.every((e) => !e));
H(S, (e, o) => {
!o && e && (p.value = z(() => {
n.value = [], u.value = [];
}, 300));
}), P(() => {
r.value.forEach((e) => {
e && g(e);
});
});
function $(e) {
r.value[e] && g(r.value[e]);
}
function b(e) {
w(e);
}
function T(e, o) {
n.value[o].onClick && n.value[o].onClick(), y("click", e);
}
function w(e) {
f.value !== null && (r.value[e] = z(() => {
u.value[e] = !1, r.value[e] = null, n.value[e].onClose && n.value[e].onClose(), y("close");
}, f.value));
}
function i() {
p.value && g(p.value);
const e = n.value.length - 1, o = n.value[e];
o.top !== void 0 ? h.value = typeof o.top == "number" ? `${o.top}px` : o.top : h.value = typeof d.top == "number" ? `${d.top}px` : d.top, u.value[e] = !0, o.duration !== null ? (f.value = o.duration || d.duration, w(e)) : f.value = null;
}
function V(e) {
typeof e == "string" ? n.value.push({
content: e,
mode: "open"
}) : n.value.push({
...e,
mode: "open"
}), i();
}
function D(e) {
typeof e == "string" ? n.value.push({
content: e,
mode: "info"
}) : n.value.push({
...e,
mode: "info"
}), i();
}
function E(e) {
typeof e == "string" ? n.value.push({
content: e,
mode: "success"
}) : n.value.push({
...e,
mode: "success"
}), i();
}
function x(e) {
typeof e == "string" ? n.value.push({
content: e,
mode: "error"
}) : n.value.push({
...e,
mode: "error"
}), i();
}
function N(e) {
typeof e == "string" ? n.value.push({
content: e,
mode: "warning"
}) : n.value.push({
...e,
mode: "warning"
}), i();
}
function j(e) {
typeof e == "string" ? n.value.push({
content: e,
mode: "loading"
}) : n.value.push({
...e,
mode: "loading"
}), i();
}
return _({
open: V,
info: D,
success: E,
error: x,
warning: N,
loading: j
}), (e, o) => (l(), c("div", {
class: "message-wrap",
style: C(`
top: ${h.value};
--message-primary-color: ${R(L)[5]};
--message-success-color: #52c41a;
--message-warning-color: #faad14;
--message-error-color: #ff4d4f;
`)
}, [
U(q, { name: "slide-fade" }, {
default: A(() => [
(l(!0), c(I, null, J(n.value, (t, v) => K((l(), c("div", {
class: k(["message-container", t.class]),
style: C(t.style),
key: v
}, [
s("div", {
class: k(["message-content-wrap", `icon-${t.mode}`]),
onMouseenter: (m) => $(v),
onMouseleave: (m) => b(v),
onClick: (m) => T(m, v)
}, [
t.icon ? (l(), O(W(t.icon), {
key: 0,
class: "icon-svg"
})) : t.mode === "info" ? (l(), c("svg", oe, [...o[0] || (o[0] = [
s("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)
])])) : t.mode === "success" ? (l(), c("svg", ne, [...o[1] || (o[1] = [
s("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)
])])) : t.mode === "error" ? (l(), c("svg", te, [...o[2] || (o[2] = [
s("path", { d: "M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z" }, null, -1)
])])) : t.mode === "warning" ? (l(), c("svg", le, [...o[3] || (o[3] = [
s("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)
])])) : t.mode === "loading" ? (l(), c("svg", ce, [...o[4] || (o[4] = [
s("circle", {
class: "path",
cx: "25",
cy: "25",
r: "20",
fill: "none"
}, null, -1)
])])) : Q("", !0),
s("div", se, X(t.content || e.content), 1)
], 42, ee)
], 6)), [
[Y, u.value[v]]
])), 128))
]),
_: 1
})
], 4));
}
});
export {
ue as default
};