vue-toastfic
Version:
**vue-toastfic** is a simple and customizable toast notification library for Vue.js and Nuxt.js projects. Follow the instructions below to integrate and use it in your application.
321 lines (320 loc) • 11.7 kB
JavaScript
import { ref as E, defineComponent as L, computed as F, watchEffect as P, onBeforeUnmount as Q, provide as R, openBlock as i, createBlock as y, TransitionGroup as X, withCtx as Z, createElementBlock as d, Fragment as Y, renderList as tt, normalizeClass as w, normalizeStyle as M, unref as $, createCommentVNode as I, createElementVNode as m, createVNode as et, createTextVNode as S, toDisplayString as D, renderSlot as N, inject as st, resolveDynamicComponent as ot, pushScopeId as nt, popScopeId as ct } from "vue";
const A = E([]);
let it = 0;
function C(e, o = "info", a = {}) {
const { duration: s, description: r, handle: p } = a;
A.value.unshift({ id: it++, title: e, type: o, duration: s, description: r, handle: p });
}
function at(e) {
A.value = A.value.filter((o) => o.id !== e);
}
function rt() {
return {
toasts: A,
addToast: C,
removeToast: at
};
}
const lt = ["toastfic-theme"], dt = /* @__PURE__ */ L({
__name: "Toast",
props: {
close: { type: Boolean, default: !0 },
duration: { default: 4e3 },
automaticClose: { type: Boolean, default: !0 },
position: { default: "top-right" },
colorful: { type: Boolean, default: !0 },
maxToasts: { default: 7 },
theme: { default: "light" },
progressBar: { type: Boolean, default: !0 },
classes: { default: void 0 }
},
setup(e) {
const { toasts: o, removeToast: a } = rt(), s = e, r = F(() => {
switch (s.position) {
case "top-center":
return "toastfic-top-center";
case "top-left":
return "toastfic-top-left";
case "top-right":
return "toastfic-top-right";
case "bottom-left":
return "toastfic-bottom-left";
case "bottom-right":
return "toastfic-bottom-right";
case "bottom-center":
return "toastfic-bottom-center";
default:
return "toastfic";
}
}), p = F(() => o.value.slice(0, s.maxToasts)), b = /* @__PURE__ */ new Map(), V = E({});
function O() {
s.automaticClose && p.value.forEach((n) => {
var c;
if (!((c = n.handle) != null && c.click) && !b.has(n.id)) {
const t = n.duration ?? s.duration, l = Date.now(), f = setInterval(() => {
const g = Date.now() - l, _ = Math.min(g / t * 100, 100);
V.value[n.id] = _, _ >= 100 && clearInterval(f);
}, 100), v = setTimeout(() => {
clearInterval(f), a(n.id), b.delete(n.id);
}, t);
b.set(n.id, v);
}
});
}
function U(n, c) {
n && c !== void 0 && (n(), a(c));
}
function W(n, c) {
var v, g, _, x;
let t = c.description ? c.description.length < 36 ? 58 : 80 : 52;
(v = c.handle) != null && v.click && c.description ? t += 30 : (g = c.handle) != null && g.click && (t += 20);
let l = 0;
for (let T = 0; T < n; T++) {
const h = p.value[T];
let k = h.description ? h.description.length < 36 ? 58 : 80 : 52;
(_ = h.handle) != null && _.click && h.description ? k += 30 : (x = h.handle) != null && x.click && (k += 20), l += k + 10;
}
return {
[s.position.includes("bottom") ? "bottom" : "top"]: `${l}px`,
height: `${t}px`
};
}
function q(n, c) {
return n.length > c ? n.slice(0, c) + "..." : n;
}
function J(n) {
var c, t, l, f;
return n === "default" ? ((c = s.classes) == null ? void 0 : c.icon) ?? "" : ((l = (t = s.classes) == null ? void 0 : t.icons) == null ? void 0 : l[n]) ?? ((f = s.classes) == null ? void 0 : f.icon) ?? "";
}
function K(n) {
var c, t, l;
return ((t = (c = s.classes) == null ? void 0 : c.toasts) == null ? void 0 : t[n]) ?? ((l = s.classes) == null ? void 0 : l.toast) ?? "";
}
return P(() => {
O();
}), Q(() => {
b.forEach((n) => clearTimeout(n));
}), R("isIconColor", E(s.colorful)), (n, c) => (i(), y(X, { name: r.value }, {
default: Z(() => [
(i(!0), d(Y, null, tt(p.value, (t, l) => {
var f, v, g, _, x, T, h, k, H, j;
return i(), d("div", {
key: t.id,
class: w([[
`toastfic-position-${s.position}`,
(f = s.classes) == null ? void 0 : f.toast,
{ "toastfic-description": t.description },
[K(t.type), (v = s.classes) == null ? void 0 : v.toast]
], "toastfic"]),
style: M([
W(l, t),
{ alignItems: !t.description && !((g = t.handle) != null && g.click) ? "center" : "flex-start" }
]),
"toastfic-theme": n.theme
}, [
s.close ? (i(), y($(qt), {
key: 0,
class: w((_ = s.classes) == null ? void 0 : _.buttonClose),
onClick: (B) => $(a)(t.id)
}, null, 8, ["class", "onClick"])) : I("", !0),
t.type !== "default" ? (i(), y($(Ft), {
key: 1,
class: w([J(t.type), (x = s.classes) == null ? void 0 : x.icon]),
type: t.type
}, null, 8, ["class", "type"])) : I("", !0),
m("section", {
style: M({ justifyContent: !t.description && !((T = t.handle) != null && T.click) ? "center" : "space-between" })
}, [
m("div", null, [
et($(pt), {
class: w((h = s.classes) == null ? void 0 : h.title)
}, {
default: Z(() => [
S(D(t.title), 1)
]),
_: 2
}, 1032, ["class"]),
t.description ? (i(), y($(mt), {
key: 0,
class: w((k = s.classes) == null ? void 0 : k.description)
}, {
default: Z(() => [
S(D(q(t.description || "", 65)), 1)
]),
_: 2
}, 1032, ["class"])) : I("", !0)
]),
(H = t.handle) != null && H.click ? (i(), y($(Kt), {
key: 0,
class: w((j = s.classes) == null ? void 0 : j.buttonHandle),
onClick: (B) => {
var z;
return U((z = t.handle) == null ? void 0 : z.click, t.id);
}
}, {
default: Z(() => {
var B;
return [
S(D((B = t.handle) == null ? void 0 : B.text), 1)
];
}),
_: 2
}, 1032, ["class", "onClick"])) : I("", !0)
], 4),
s.progressBar ? (i(), d("div", {
key: 2,
class: "progress-bar",
style: M([
{ width: `${V.value[t.id]}%` },
{
backgroundColor: t.type !== "default" && s.colorful ? `var(--toastfic-${t.type}-icon)` : "var(--toastfic-icon)"
}
])
}, null, 4)) : I("", !0)
], 14, lt);
}), 128))
]),
_: 1
}, 8, ["name"]));
}
}), u = (e, o) => {
const a = e.__vccOpts || e;
for (const [s, r] of o)
a[s] = r;
return a;
}, Qt = /* @__PURE__ */ u(dt, [["__scopeId", "data-v-0bd71293"]]), ut = {};
function ft(e, o) {
return i(), d("h1", null, [
N(e.$slots, "default", {}, void 0, !0)
]);
}
const pt = /* @__PURE__ */ u(ut, [["render", ft], ["__scopeId", "data-v-b0f678f5"]]), _t = {};
function ht(e, o) {
return i(), d("span", null, [
N(e.$slots, "default", {}, void 0, !0)
]);
}
const mt = /* @__PURE__ */ u(_t, [["render", ht], ["__scopeId", "data-v-0f8bfdba"]]), vt = {}, gt = {
xmlns: "http://www.w3.org/2000/svg",
width: "32",
height: "32",
fill: "#1a1a1a",
viewBox: "0 0 256 256"
}, wt = /* @__PURE__ */ m("path", { d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm45.66,85.66-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35a8,8,0,0,1,11.32,11.32Z" }, null, -1), $t = [
wt
];
function Tt(e, o) {
return i(), d("svg", gt, $t);
}
const kt = /* @__PURE__ */ u(vt, [["render", Tt]]), yt = {}, Ct = {
xmlns: "http://www.w3.org/2000/svg",
width: "32",
height: "32",
fill: "#1a1a1a",
viewBox: "0 0 256 256"
}, xt = /* @__PURE__ */ m("path", { d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm37.66,130.34a8,8,0,0,1-11.32,11.32L128,139.31l-26.34,26.35a8,8,0,0,1-11.32-11.32L116.69,128,90.34,101.66a8,8,0,0,1,11.32-11.32L128,116.69l26.34-26.35a8,8,0,0,1,11.32,11.32L139.31,128Z" }, null, -1), It = [
xt
];
function bt(e, o) {
return i(), d("svg", Ct, It);
}
const G = /* @__PURE__ */ u(yt, [["render", bt]]), Bt = {}, Zt = {
xmlns: "http://www.w3.org/2000/svg",
width: "32",
height: "32",
fill: "#1a1a1a",
viewBox: "0 0 256 256"
}, At = /* @__PURE__ */ m("path", { d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-8,56a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm8,104a12,12,0,1,1,12-12A12,12,0,0,1,128,184Z" }, null, -1), Lt = [
At
];
function Mt(e, o) {
return i(), d("svg", Zt, Lt);
}
const St = /* @__PURE__ */ u(Bt, [["render", Mt]]), Dt = {}, Et = {
xmlns: "http://www.w3.org/2000/svg",
width: "32",
height: "32",
fill: "#1a1a1a",
viewBox: "0 0 256 256"
}, Nt = /* @__PURE__ */ m("path", { d: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm-4,48a12,12,0,1,1-12,12A12,12,0,0,1,124,72Zm12,112a16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40a8,8,0,0,1,0,16Z" }, null, -1), Vt = [
Nt
];
function Ht(e, o) {
return i(), d("svg", Et, Vt);
}
const jt = /* @__PURE__ */ u(Dt, [["render", Ht]]), zt = /* @__PURE__ */ L({
__name: "ToastIcon",
props: {
type: {}
},
setup(e) {
const o = e, a = {
success: kt,
error: G,
info: jt,
warning: St
}, s = st("isIconColor");
if (!s)
throw new G("isIconColor not provided");
return (r, p) => (i(), d("div", null, [
(i(), y(ot(a[o.type]), {
class: w(["icon", { [`icon-${o.type}`]: $(s) }])
}, null, 8, ["class"]))
]));
}
}), Ft = /* @__PURE__ */ u(zt, [["__scopeId", "data-v-fa13e8fb"]]), Gt = (e) => (nt("data-v-e7467c53"), e = e(), ct(), e), Ot = /* @__PURE__ */ Gt(() => /* @__PURE__ */ m("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "12",
height: "12",
fill: "var(--toastfic-icon)",
viewBox: "0 0 256 256"
}, [
/* @__PURE__ */ m("path", { d: "M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z" })
], -1)), Ut = [
Ot
], Wt = /* @__PURE__ */ L({
__name: "ToastClose",
emits: ["click"],
setup(e, { emit: o }) {
const a = o;
return (s, r) => (i(), d("button", {
class: "toastfic-close",
onClick: r[0] || (r[0] = (p) => a("click"))
}, Ut));
}
}), qt = /* @__PURE__ */ u(Wt, [["__scopeId", "data-v-e7467c53"]]), Jt = /* @__PURE__ */ L({
__name: "ToastAction",
emits: ["click"],
setup(e, { emit: o }) {
const a = o;
return (s, r) => (i(), d("span", {
class: "toastific-action",
onClick: r[0] || (r[0] = (p) => a("click"))
}, [
N(s.$slots, "default", {}, void 0, !0)
]));
}
}), Kt = /* @__PURE__ */ u(Jt, [["__scopeId", "data-v-b4f72e47"]]), Rt = {
info(e, o = {}) {
C(e, "info", o);
},
success(e, o = {}) {
C(e, "success", o);
},
error(e, o = {}) {
C(e, "error", o);
},
warning(e, o = {}) {
C(e, "warning", o);
},
default(e, o = {}) {
C(e, "default", o);
}
};
export {
Qt as Toast,
C as addToast,
at as removeToast,
Rt as useToast,
rt as useToasts
};