vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
212 lines (211 loc) • 8.28 kB
JavaScript
import { defineComponent as G, ref as c, computed as g, watch as I, watchEffect as U, onBeforeUnmount as q, createElementBlock as i, openBlock as s, normalizeStyle as _, normalizeClass as k, unref as J, createVNode as K, TransitionGroup as O, withCtx as Q, Fragment as W, renderList as X, withDirectives as Y, createBlock as Z, createCommentVNode as ee, createElementVNode as o, resolveDynamicComponent as te, toDisplayString as b, vShow as oe, nextTick as le } from "vue";
import { useInject as ne, rafTimeout as M, cancelRaf as w } from "../utils/index.js";
const se = ["onMouseenter", "onMouseleave"], ae = {
key: 1,
class: "icon-svg",
viewBox: "64 64 896 896",
"data-icon": "info-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
focusable: "false"
}, ce = {
key: 2,
class: "icon-svg",
viewBox: "64 64 896 896",
"data-icon": "check-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
focusable: "false"
}, ie = {
key: 3,
class: "icon-svg",
viewBox: "64 64 896 896",
"data-icon": "exclamation-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
focusable: "false"
}, ue = {
key: 4,
class: "icon-svg",
viewBox: "64 64 896 896",
"data-icon": "close-circle",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
focusable: "false"
}, re = { class: "notification-content" }, fe = { class: "notification-title" }, de = { class: "notification-description" }, ve = ["onClick"], pe = /* @__PURE__ */ G({
__name: "Notification",
props: {
title: { default: void 0 },
description: { default: void 0 },
duration: { default: 4500 },
top: { default: 24 },
bottom: { default: 24 },
placement: { default: "topRight" }
},
emits: ["close"],
setup(L, { expose: B, emit: S }) {
const v = L, m = c(), r = c([]), a = c([]), l = c([]), h = c(null), u = c(), p = c(), { colorPalettes: R } = ne("Notification"), $ = S, D = g(() => ["topRight", "topLeft"].includes(u.value) ? {
top: `${v.top}px`
} : {}), E = g(() => ["bottomRight", "bottomLeft"].includes(u.value) ? {
bottom: `${v.bottom}px`
} : {}), N = g(() => r.value.length === l.value.length);
I(
N,
(e, t) => {
!t && e && (m.value = M(() => {
r.value = [], l.value = [];
}, 300));
},
{
flush: "post"
}
), U(() => {
u.value = v.placement;
}), q(() => {
a.value.forEach((e) => {
e && w(e);
});
});
function T(e) {
H(e);
}
function V(e) {
r.value.includes(e) || C(e);
}
function H(e) {
a.value[e] && w(a.value[e]), a.value[e] = null;
}
function C(e) {
h.value !== null && (a.value[e] = M(() => {
y(e);
}, h.value));
}
async function y(e) {
p.value[e].style.maxHeight = p.value[e].offsetHeight + "px", await le(), r.value.push(e), a.value[e] = null, l.value[e].onClose && l.value[e].onClose(), $("close");
}
function f() {
m.value && w(m.value), a.value.push(null);
const e = l.value.length - 1, t = l.value[e];
t.placement && (u.value = t.placement), t.duration !== null ? (h.value = t.duration || v.duration, C(e)) : h.value = null;
}
function x(e) {
l.value.push({
...e,
mode: "open"
}), f();
}
function A(e) {
l.value.push({
...e,
mode: "info"
}), f();
}
function P(e) {
l.value.push({
...e,
mode: "success"
}), f();
}
function j(e) {
l.value.push({
...e,
mode: "error"
}), f();
}
function F(e) {
l.value.push({
...e,
mode: "warning"
}), f();
}
return B({
open: x,
info: A,
success: P,
error: j,
warning: F
}), (e, t) => (s(), i("div", {
class: k(["notification-wrap", `notification-${u.value}`]),
style: _([
D.value,
E.value,
`
--notification-primary-color: ${J(R)[5]};
--notification-success-color: #52c41a;
--notification-error-color: #ff4d4f;
--notification-warning-color: #faad14;
`
])
}, [
K(O, {
name: ["topRight", "bottomRight"].includes(u.value) ? "right" : "left"
}, {
default: Q(() => [
(s(!0), i(W, null, X(l.value, (n, d) => Y((s(), i("div", {
ref_for: !0,
ref_key: "notificationRef",
ref: p,
class: k(["notification-container", [`icon-${n.mode}`, n.class]]),
style: _(n.style),
key: d,
onMouseenter: (z) => T(d),
onMouseleave: (z) => V(d)
}, [
n.icon ? (s(), Z(te(n.icon), {
key: 0,
class: "icon-svg"
})) : n.mode === "info" ? (s(), i("svg", ae, [...t[0] || (t[0] = [
o("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),
o("path", { d: "M464 336a48 48 0 1 0 96 0 48 48 0 1 0-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)
])])) : n.mode === "success" ? (s(), i("svg", ce, [...t[1] || (t[1] = [
o("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 0 0 51.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z" }, null, -1),
o("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)
])])) : n.mode === "warning" ? (s(), i("svg", ie, [...t[2] || (t[2] = [
o("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),
o("path", { d: "M464 688a48 48 0 1 0 96 0 48 48 0 1 0-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)
])])) : n.mode === "error" ? (s(), i("svg", ue, [...t[3] || (t[3] = [
o("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 0 0-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),
o("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)
])])) : ee("", !0),
o("div", re, [
o("div", fe, b(n.title || e.title), 1),
o("div", de, b(n.description || e.description), 1)
]),
o("a", {
tabindex: "0",
class: "notification-close",
onClick: (z) => y(d)
}, [...t[4] || (t[4] = [
o("svg", {
class: "close-svg",
viewBox: "64 64 896 896",
"data-icon": "close",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
focusable: "false"
}, [
o("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 0 0 203 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" })
], -1)
])], 8, ve)
], 46, se)), [
[oe, !r.value.includes(d)]
])), 128))
]),
_: 1
}, 8, ["name"])
], 6));
}
});
export {
pe as default
};