UNPKG

vue-toastify

Version:

<p align="center">Simple and dependency-free notification plugin.</p>

694 lines (693 loc) 27.7 kB
import q from "./useVtEvents.mjs"; import { defineComponent as V, ref as b, watch as Y, onMounted as U, onBeforeUnmount as ee, createElementBlock as f, openBlock as v, createElementVNode as L, normalizeStyle as A, computed as w, isVNode as te, resolveComponent as j, normalizeClass as M, createCommentVNode as H, Fragment as R, createBlock as O, resolveDynamicComponent as le, createVNode as J, getCurrentInstance as ne, onUnmounted as ue, withDirectives as de, vShow as ce, toDisplayString as X, renderList as oe, TransitionGroup as ve, withCtx as se, renderSlot as me, nextTick as ge, unref as P, createApp as fe } from "vue"; import { i as pe, a as I, u as he, b as ye, c as Q, t as be, d as we } from "./useToast-Cb3NAh6T.js"; import { e as mt } from "./useToast-Cb3NAh6T.js"; import W from "./useVtSettings.mjs"; /*! ================================ vue-toastify v2.1.0 (c) 2019-present Nandor Kraszlan Released under MIT License ================================== */ const Te = V({ name: "ProgressBar", props: { isPaused: { type: Boolean }, duration: { type: Number, default: 0 }, id: { type: String, required: !0 } }, emits: ["vtFinished"], expose: ["progress"], setup: (e, n) => { const r = b(0), o = b(), a = b(), s = b(/* @__PURE__ */ new Date()), d = b(/* @__PURE__ */ new Date()), i = b(new Date(e.duration + Date.now())), u = q(), c = () => { s.value = new Date( s.value.getTime() + (Date.now() - d.value.getTime()) ), i.value = new Date( i.value.getTime() + (Date.now() - d.value.getTime()) ), !a.value && r.value > 0 && u.emit("vtResumed", { id: e.id }), a.value = window.setTimeout( () => { r.value = 100, n.emit("vtFinished"); }, i.value.getTime() - Date.now() ), o.value = requestAnimationFrame(y); }, h = () => { window.clearTimeout(a.value), a.value = void 0, cancelAnimationFrame(o.value), o.value = void 0, u.emit("vtPaused", { id: e.id }), d.value = /* @__PURE__ */ new Date(); }, y = () => { if (r.value < 100) { const g = i.value.getTime() - s.value.getTime(), E = Date.now() - s.value.getTime(); r.value = E / g * 100, a.value && (o.value = requestAnimationFrame(y)); } else cancelAnimationFrame(o.value), o.value = void 0; }; return Y(() => e.isPaused, (g) => g ? h() : c()), U(() => { u.emit("vtStarted", { id: e.id }), c(); }), ee(() => { r.value = 0, window.clearTimeout(a.value), o.value && (cancelAnimationFrame(o.value), o.value = void 0); }), { progress: r }; } }), z = (e, n) => { const r = e.__vccOpts || e; for (const [o, a] of n) r[o] = a; return r; }, $e = ["aria-valuenow"]; function Le(e, n, r, o, a, s) { return v(), f("div", { class: "vt-progress-bar", "aria-valuenow": e.progress, "aria-valuemin": "0", "aria-valuemax": "100", role: "progressbar" }, [ L("div", { class: "vt-progress", style: A({ width: e.progress + "%" }) }, null, 4) ], 8, $e); } const Ce = /* @__PURE__ */ z(Te, [["render", Le]]); function re(e) { return e.node; } const Ee = V({ name: "VtIcon", components: { Node: re }, props: { mode: { type: String }, type: { type: String }, icon: { type: [Object, String] }, baseIconClass: { type: String, default: "" }, enableHtml: { type: Boolean, required: !0 } }, setup: (e) => { const n = w(() => { if (!e.icon) return !1; let o = { type: "icon", tag: "i", ligature: "", class: e.baseIconClass }; return typeof e.icon == "string" ? e.enableHtml && e.icon.toLowerCase().includes("<svg") ? (o.tag = "div", o.ligature = e.icon) : o.class = o.class + " " + e.icon : te(e.icon) ? o = { type: "node", node: e.icon } : pe(e.icon) && (o = Object.assign(o, e.icon)), o; }), r = w(() => { const o = {}; return e.mode !== "loader" && (o["vt-circle"] = !e.icon), o["vt-prompt"] = e.mode === "prompt", (e.mode === void 0 || e.mode.length === 0) && (o["vt-" + (e.type ? e.type : "info")] = !0), o; }); return { userIcon: n, containerClasses: r }; } }), ke = { key: 1, class: "vt-icon" }, Ie = { key: 1, class: "vt-spinner" }, Se = { key: 2, class: "vt-icon" }, Be = { "aria-hidden": "true", style: { width: "24px", height: "24px" }, viewBox: "0 0 24 24" }, He = { key: 3, class: "vt-icon" }, De = { key: 4, class: "vt-icon" }, Ne = { key: 5, class: "vt-icon" }, Me = { key: 6, class: "vt-icon" }, Oe = { xmlns: "http://www.w3.org/2000/svg", style: { transform: "rotate(180deg)" }, width: "36", "aria-hidden": "true", height: "36", viewBox: "0 0 24 24" }; function Ve(e, n, r, o, a, s) { const d = j("Node"); return v(), f("div", { class: M(["vt-icon-container", e.containerClasses]) }, [ e.userIcon ? (v(), f(R, { key: 0 }, [ e.userIcon.type === "icon" ? (v(), O(le(e.userIcon.tag), { key: 0, class: M(["vt-icon", e.userIcon.class]), innerHTML: e.userIcon.ligature }, null, 8, ["class", "innerHTML"])) : (v(), f("div", ke, [ J(d, { node: e.userIcon.node }, null, 8, ["node"]) ])) ], 64)) : e.mode === "loader" ? (v(), f("div", Ie)) : e.mode === "prompt" ? (v(), f("div", Se, [ (v(), f("svg", Be, n[0] || (n[0] = [ L("path", { d: `M10,19H13V22H10V19M12,2C17.35,2.22 19.68,7.62 16.5,11.67C15.67,12.67 14.33,13.33 13.67,14.17C13,15 13,16 13,17H10C10,15.33 10,13.92 10.67,12.92C11.33,11.92 12.67,11.33 13.5,10.67C15.92,8.43 15.32,5.26 12,5A3,3 0 0,0 9,8H6A6,6 0 0,1 12,2Z` }, null, -1) ]))) ])) : e.containerClasses["vt-success"] ? (v(), f("div", He, n[1] || (n[1] = [ L("svg", { xmlns: "http://www.w3.org/2000/svg", width: "36", height: "36", "aria-hidden": "true", viewBox: "0 0 24 24" }, [ L("path", { d: `M9 16.2l-3.5-3.5c-.39-.39-1.01-.39-1.4 0-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41 0L20.3 7.7c.39-.39.39-1.01 0-1.4-.39-.39-1.01-.39-1.4 0L9 16.2z` }) ], -1) ]))) : e.containerClasses["vt-error"] ? (v(), f("div", De, n[2] || (n[2] = [ L("svg", { xmlns: "http://www.w3.org/2000/svg", width: "36", height: "36", "aria-hidden": "true", viewBox: "0 0 24 24" }, [ L("path", { d: `M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z` }) ], -1) ]))) : e.containerClasses["vt-warning"] ? (v(), f("div", Ne, n[3] || (n[3] = [ L("svg", { xmlns: "http://www.w3.org/2000/svg", width: "36", height: "36", "aria-hidden": "true", viewBox: "0 0 24 24" }, [ L("circle", { cx: "12", cy: "19", r: "2" }), L("path", { d: "M12 3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2s2-.9 2-2V5c0-1.1-.9-2-2-2z" }) ], -1) ]))) : e.containerClasses["vt-info"] ? (v(), f("div", Me, [ (v(), f("svg", Oe, n[4] || (n[4] = [ L("path", { d: "M12 3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2s2-.9 2-2V5c0-1.1-.9-2-2-2z" }, null, -1), L("circle", { cx: "12", cy: "19", r: "2" }, null, -1) ]))) ])) : H("", !0) ], 2); } const Fe = /* @__PURE__ */ z(Ee, [["render", Ve]]); function Z(e) { return "targetTouches" in e && e.targetTouches.length > 0 ? e.targetTouches[0].clientX : e.clientX; } function _(e) { return "targetTouches" in e && e.targetTouches.length > 0 ? e.targetTouches[0].clientY : e.clientY; } function Pe(e, n) { const r = ne(), o = b(), a = b(), s = b(!1), d = b(), i = q(), u = w(() => { var p; return (p = r.proxy) == null ? void 0 : p.$el; }), c = w(() => { var p; return !!a.value && ((p = o.value) == null ? void 0 : p.x) !== a.value.x; }), h = w(() => s.value ? a.value.x - o.value.x : 0), y = w(() => d.value ? d.value.width * e.status.dragThreshold : 15), g = w(() => { if (!s.value || a.value !== void 0 && o.value !== void 0 && o.value.x === a.value.x || !c.value) return {}; let p = 1 - Math.abs(h.value / y.value); return p = isNaN(p) ? 1 : p, { transform: `translateX(${h.value}px)`, opacity: String(p), userSelect: "none" }; }), E = (p) => { u.value.classList.add("vt-will-change"), s.value = !0, o.value = { x: Z(p), y: _(p) }, d.value = u.value.getBoundingClientRect(); }, C = (p) => { p.preventDefault(), s.value && (a.value = { x: Z(p), y: _(p) }, c.value ? i.emit("vtBeingDragged", { id: e.status.id, position: a.value }) : i.emit("vtDragStarted", { id: e.status.id, position: o.value })); }, S = () => { c.value && (i.emit("vtDragFinished", { id: e.status.id, position: a.value }), u.value.getBoundingClientRect().right > window.innerWidth && u.value.getBoundingClientRect().right - window.innerWidth > d.value.width * 0.75, u.value.getBoundingClientRect().right < d.value.width * 0.25, Math.abs(d.value.left - u.value.getBoundingClientRect().left) > y.value && n(), s.value = !1, setTimeout(() => { a.value = void 0, o.value = void 0, d.value = void 0, u.value.classList.remove("vt-will-change"); })); }; return e.status.draggable && (U(() => { u.value.addEventListener("touchstart", E), u.value.addEventListener("mousedown", E), addEventListener("touchmove", C), addEventListener("mousemove", C), addEventListener("touchend", S), addEventListener("mouseup", S); }), ee(() => { u.value.removeEventListener("touchstart", E), u.value.removeEventListener("mousedown", E), removeEventListener("touchmove", C), removeEventListener("mousemove", C), removeEventListener("touchend", S), removeEventListener("mouseup", S); })), { hasMoved: c, draggableStyles: g, isDragged: s }; } const je = V({ name: "VtToast", components: { ProgressBar: Ce, VtIcon: Fe, Node: re }, props: { status: { type: Object, required: !0 }, baseIconClass: { type: String, default: "" }, delayed: { type: Boolean, default: !1 } }, emits: ["vtRemove"], setup: (e, n) => { const r = b(!1), o = b(!0), a = q(), s = b(), d = w(() => { const k = {}; return e.status.mode === "loader" && (k["vt-cursor-wait"] = !0), k["vt-theme-" + e.status.theme] = !0, k; }), i = w(() => ["prompt", "loader"].indexOf(e.status.mode) === -1), u = w(() => te(e.status.body)), c = w(() => e.status.answers ? Object.keys(e.status.answers) : []), h = () => { i.value && !C.value && (a.emit("vtDismissed", { id: e.status.id }), n.emit("vtRemove")); }, y = () => { i.value && C.value && (a.emit("vtDismissed", { id: e.status.id }), n.emit("vtRemove")); }, g = (k) => { a.emit("vtPromptResponse", { id: e.status.id, response: k }), n.emit("vtRemove"); }, E = () => { var t; Math.ceil(((t = s.value) == null ? void 0 : t.progress) ?? NaN) >= 100 && i.value && (a.emit("vtFinished", { id: e.status.id }), n.emit("vtRemove")); }, { hasMoved: C, draggableStyles: S, isDragged: p } = Pe(e, y), D = () => o.value = !1, F = () => o.value = !0; return U(() => { e.status.pauseOnFocusLoss && (addEventListener("blur", D), addEventListener("focus", F)); }), ue(() => { e.status.pauseOnFocusLoss && (removeEventListener("blur", D), removeEventListener("focus", F)); }), { isHovered: r, notificationClass: d, isNotification: i, isJSXBody: u, respond: g, dismiss: h, draggableStyles: S, progressBar: s, answers: c, finish: E, isDragged: p, hasFocus: o }; } }), Ae = ["role", "aria-label", "data-delayed"], Re = { class: "vt-content" }, qe = ["textContent"], ze = { key: 0, class: "vt-paragraph" }, Xe = ["innerHTML"], Ye = { key: 2, class: "vt-paragraph" }, Ue = { key: 2, class: "vt-buttons" }, Je = ["onClick", "textContent"]; function We(e, n, r, o, a, s) { const d = j("ProgressBar"), i = j("Node"), u = j("VtIcon"); return v(), f("div", { class: M(["vt-notification", e.notificationClass]), role: e.status.type === "error" || e.status.type === "warning" ? "alert" : "status", style: A(e.draggableStyles), draggable: "false", "aria-label": e.status.title || `${e.status.type || "info"} notification`, "data-delayed": e.delayed, onClick: n[0] || (n[0] = (...c) => e.dismiss && e.dismiss(...c)), onMouseenter: n[1] || (n[1] = (c) => e.isHovered = !0), onMouseleave: n[2] || (n[2] = (c) => e.isHovered = !1), onTouchstart: n[3] || (n[3] = (c) => e.isHovered = !0), onTouchend: n[4] || (n[4] = (c) => e.isHovered = !1) }, [ e.isNotification && e.status.canTimeout ? de((v(), O(d, { key: 0, id: e.status.id, ref: "progressBar", duration: e.status.duration, "is-paused": e.status.pauseOnHover && e.isHovered || !e.hasFocus || e.isDragged, onVtFinished: e.finish }, null, 8, ["id", "duration", "is-paused", "onVtFinished"])), [ [ce, !e.status.hideProgressbar] ]) : H("", !0), L("div", Re, [ e.status.title ? (v(), f("h2", { key: 0, class: "vt-title", textContent: X(e.status.title) }, null, 8, qe)) : H("", !0), e.status.body ? (v(), f(R, { key: 1 }, [ e.isJSXBody ? (v(), f("div", ze, [ J(i, { node: e.status.body }, null, 8, ["node"]) ])) : e.status.enableHtmlInterpretation ? (v(), f("p", { key: 1, class: "vt-paragraph", innerHTML: e.status.body }, null, 8, Xe)) : (v(), f("p", Ye, X(e.status.body), 1)) ], 64)) : H("", !0) ]), e.status.iconEnabled ? (v(), O(u, { key: 1, mode: e.status.mode, type: e.status.type, icon: e.status.icon, "base-icon-class": e.baseIconClass, "enable-html": e.status.enableHtmlInterpretation }, null, 8, ["mode", "type", "icon", "base-icon-class", "enable-html"])) : H("", !0), e.status.mode === "prompt" ? (v(), f("div", Ue, [ (v(!0), f(R, null, oe(e.answers, (c, h) => (v(), f("button", { key: h, onClick: (y) => e.respond(e.status.answers[c]), textContent: X(c) }, null, 8, Je))), 128)) ])) : H("", !0) ], 46, Ae); } const Ge = /* @__PURE__ */ z(je, [["render", We]]), Ke = V({ name: "VtTransition", props: { transition: { type: [String, Object], required: !0 }, position: { type: String, required: !0 } }, setup: (e) => { const { settings: n } = W(), r = ne(); return { beforeEnter: (i) => { if (!(i instanceof HTMLElement)) return; const u = r == null ? void 0 : r.vnode.el; for (let c = 0; c < u.children.length; c++) delete u.children.item(c).dataset.delayed; i.dataset.delayed && i.classList.add("vt-move", "vt-will-change"); }, afterEnter: (i) => { i instanceof HTMLElement && (i.removeAttribute("data-delayed"), i.classList.remove("vt-move", "vt-will-change")); }, beforeLeave: (i) => { if (i instanceof HTMLElement) { i.classList.add("vt-will-change"); for (let u = 0; u < i.parentNode.childNodes.length; u++) i.parentNode.childNodes[u].isSameNode(i) || (i.parentElement.children[u].dataset.delayed = "true"); } }, leave: (i) => { if (n.singular || n.oneType && i.parentNode.childNodes.length === 1 || !(i instanceof HTMLElement)) return; const u = e.position.split("-"), { height: c, width: h, marginBottom: y } = window.getComputedStyle(i), g = parseFloat(h) + 0.01; i.style.left = String(i.offsetLeft - (i.parentNode.childNodes.length === 1 ? g / 2 : 0)) + "px", i.style.top = String(i.offsetTop) + "px", u[0] === "center" && (i.style.top = String(parseInt(i.style.top) - parseInt(c) / 2 - parseInt(y) / 2) + "px"), u[0] === "bottom" && (i.style.top = String(parseInt(i.style.top) - parseInt(c) - parseInt(y)) + "px"), i.style.width = `${g}px`, i.style.position = "absolute"; } }; } }); function Qe(e, n, r, o, a, s) { var d, i; return v(), O(ve, { name: typeof e.transition != "string" ? (d = e.transition) == null ? void 0 : d.name : e.transition, css: !0, tag: "div", "move-class": (typeof e.transition != "string" ? (i = e.transition) == null ? void 0 : i.moveClass : null) ?? "vt-move", onLeave: e.leave, onBeforeEnter: e.beforeEnter, onAfterEnter: e.afterEnter, onBeforeLeave: e.beforeLeave }, { default: se(() => [ me(e.$slots, "default") ]), _: 3 }, 8, ["name", "move-class", "onLeave", "onBeforeEnter", "onAfterEnter", "onBeforeLeave"]); } const Ze = /* @__PURE__ */ z(Ke, [["render", Qe]]), _e = { name: "VueToastify" }, xe = /* @__PURE__ */ V({ ..._e, setup(e, { expose: n }) { const r = {}, o = b([]), a = b([]), { settings: s, updateSettings: d } = W(), i = q(), u = w(() => { if (s.transition) return s.transition; const t = s.position.split("-"); return t[1] === "left" ? "vt-left" : t[1] === "center" ? "vt-" + t[0] : "vt-right"; }), c = w(() => ({ flexDirection: s.orderLatest && s.position.split("-")[0] === "bottom" ? "column" : "column-reverse" })), h = w(() => { const t = s.position.split("-"), l = {}; return t[0] === t[1] ? (l["vt-center-center"] = !0, l) : (l[t[0] === "center" ? "vt-centerY" : "vt-" + t[0]] = !0, l[t[1] === "center" ? "vt-centerX" : "vt-" + t[1]] = !0, l); }), y = (t) => o.value.findIndex((l) => l.id === t), g = (t) => a.value.findIndex((l) => l.id === t), E = (t) => t.title ? t.title : t.mode === "prompt" || t.mode === "loader" ? "" : (I(t.defaultTitle) && t.defaultTitle || I(s.defaultTitle) && s.defaultTitle) && t.type ? t.type.charAt(0).toUpperCase() + t.type.slice(1) : "", C = (t) => !!o.value.find( (l) => ( // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing l.mode && l.mode === t.mode || l.type && l.type === t.type ) ), S = (t) => { const l = []; return typeof t == "string" ? l.push(t) : Array.isArray(t) ? l.push(...t) : l.push(...o.value.filter((m) => m.mode === "loader").map((m) => m.id)), l.forEach((m) => { i.emit("vtLoadStop", { id: m }), k(m); }), l.length; }, p = (t) => { const l = Object.assign( {}, t, { id: he() } ); return l.duration = s.warningInfoDuration, Number(t.duration) > 0 ? l.duration = Number(t.duration) : t.type && (l.duration = t.type === "error" ? s.errorDuration : t.type === "success" ? s.successDuration : s.warningInfoDuration), l.answers = t.answers && Object.keys(t.answers).length > 0 ? t.answers : { Yes: !0, No: !1 }, l.pauseOnHover = I(t.pauseOnHover) ? t.pauseOnHover : s.pauseOnHover, l.pauseOnFocusLoss = I(t.pauseOnFocusLoss) ? t.pauseOnFocusLoss : s.pauseOnFocusLoss, l.hideProgressbar = I(t.hideProgressbar) ? t.hideProgressbar : s.hideProgressbar, l.title = E(t), l.canTimeout = I(t.canTimeout) ? t.canTimeout : s.canTimeout, l.iconEnabled = I(t.iconEnabled) ? t.iconEnabled : s.iconEnabled, l.enableHtmlInterpretation = I(t.enableHtmlInterpretation) ? t.enableHtmlInterpretation : s.enableHtmlInterpretation, t.mode === "prompt" || t.mode === "loader" ? l.draggable = !1 : l.draggable = I(t.draggable) ? t.draggable : s.draggable, l.dragThreshold = t.dragThreshold && ye(t.dragThreshold, 0, 5) ? t.dragThreshold : s.dragThreshold, (t.mode === "prompt" || t.mode === "loader") && (l.canTimeout = !1), l.theme = t.theme ? t.theme : s.theme, // if singular and there's 1 already showing s.singular && o.value.length > 0 || // if oneType turned on and that type already showing s.oneType && C(l) || // if it exceeds the max number of displayed toasts o.value.length >= s.maxToasts ? (l.delay ? setTimeout(() => { a.value.push({ ...l, delayed: !0 }); }, l.delay) : a.value.push({ ...l, delayed: !0 }), l.id) : (l.delay ? setTimeout(() => { o.value.push(l); }, l.delay) : o.value.push(l), l.id); }, D = (t) => t ? o.value.find((l) => l.id === t) ?? a.value.find((l) => l.id === t) : [ ...o.value, ...a.value ], F = (t, l) => { const m = D(t); return m ? y(t) !== -1 ? (o.value = o.value.map((B) => B.id === t ? Object.assign(B, l) : B), !0) : (o.value[g(t)] = Object.assign(m, l), !0) : !1; }, k = (t) => { var m, B, G, K; if (t) { let T = g(t); return s.singular && T !== -1 ? ((B = (m = a.value.splice(T, 1)[0]).callback) == null || B.call(m), 1) : (T = y(t), T !== -1 ? ((K = (G = o.value.splice(T, 1)[0]).callback) == null || K.call(G), 1) : 0); } const l = o.value.length + a.value.length; return o.value.forEach((T) => { var N; return (N = T.callback) == null ? void 0 : N.call(T); }), a.value.forEach((T) => { var N; return (N = T.callback) == null ? void 0 : N.call(T); }), o.value = [], a.value = [], l; }; return Y(() => s, (t, l) => { if (!t.singular) { for (let m = 0; m < t.maxToasts - 1; m++) a.value[m] && (C(a.value[m]) || o.value.push(a.value.splice(m, 1)[0])); I(r.orderLatest) && (d({ orderLatest: r.orderLatest }), delete r.orderLatest); return; } r.orderLatest = l.orderLatest, d({ orderLatest: !1 }); }), Y( () => o.value, async (t) => { if (a.value.length !== 0) { if (await ge(), s.singular) { t.length === 0 && o.value.push({ ...a.value.shift(), delayed: !0 }); return; } if (s.oneType) return a.value.forEach((l, m) => { !C(l) && o.value.length < s.maxToasts && o.value.push({ ...a.value.splice(m, 1)[0], delayed: !0 }); }); o.value.length < s.maxToasts && o.value.push({ ...a.value.shift(), delayed: !0 }); } }, { deep: !0 } ), n({ add: p, get: D, set: F, remove: k, stopLoader: S }), (t, l) => (v(), f("div", null, [ L("div", { class: M(["vt-backdrop-hidden", { "vt-backdrop-visible": o.value.length > 0 && P(s).withBackdrop }]), style: A({ backgroundColor: P(s).backdrop }) }, null, 6), J(Ze, { class: M(["vt-notification-container", h.value]), style: A(c.value), transition: u.value, position: P(s).position }, { default: se(() => [ (v(!0), f(R, null, oe(o.value, (m) => (v(), O(Ge, { key: m.id, status: m, delayed: !!m.delayed || !1, "base-icon-class": P(s).baseIconClass, onVtRemove: (B) => k(m.id) }, null, 8, ["status", "delayed", "base-icon-class", "onVtRemove"]))), 128)) ]), _: 1 }, 8, ["class", "style", "transition", "position"]) ])); } }), et = Symbol("vue-toastify"), ut = (e, n = {}) => { W().updateSettings(n); const r = document.createElement("div"); r.setAttribute("id", et.toString()), document.body.appendChild(r), Q.container = fe(xe).mount(r), n.customNotifications && Object.entries(n.customNotifications).length > 0 && Object.entries(n.customNotifications).forEach((o) => { Object.defineProperty(be, o[0], { get() { return (a, s) => { let d = Object.assign({}, o[1]); return we(a) ? d.body = a : d = { ...o[1], ...a }, s && (d.title = s), d.type || (d.type = "success"), Q.container.add(d); }; } }); }); }; function ie(e) { e = e.replace(/^#/, ""); const n = parseInt(e.slice(0, 2), 16) / 255, r = parseInt(e.slice(2, 4), 16) / 255, o = parseInt(e.slice(4, 6), 16) / 255, a = Math.max(n, r, o), s = Math.min(n, r, o); let d = 0, i = 0; const u = (a + s) / 2; if (a !== s) { const c = a - s; switch (i = u > 0.5 ? c / (2 - a - s) : c / (a + s), a) { case n: d = (r - o) / c + (r < o ? 6 : 0); break; case r: d = (o - n) / c + 2; break; case o: d = (n - r) / c + 4; break; } d /= 6; } return { h: d, s: i, l: u }; } function ae(e, n, r) { let o, a, s; if (n === 0) o = a = s = r; else { const i = (h, y, g) => (g < 0 && (g += 1), g > 1 && (g -= 1), g < 0.16666666666666666 ? h + (y - h) * 6 * g : g < 0.5 ? y : g < 0.6666666666666666 ? h + (y - h) * (0.6666666666666666 - g) * 6 : h), u = r < 0.5 ? r * (1 + n) : r + n - r * n, c = 2 * r - u; o = i(c, u, e + 1 / 3), a = i(c, u, e), s = i(c, u, e - 1 / 3); } const d = (i) => { const u = Math.round(i * 255).toString(16); return u.length === 1 ? "0" + u : u; }; return `#${d(o)}${d(a)}${d(s)}`; } function tt(e, n) { const r = ie(e); return r.l = Math.max(0, r.l - n / 100), ae(r.h, r.s, r.l); } function nt(e, n) { const r = ie(e); return r.l = Math.min(1, r.l + n / 100), ae(r.h, r.s, r.l); } function ot(e) { const n = { red: parseInt(e.slice(1, 3), 16), green: parseInt(e.slice(3, 5), 16), blue: parseInt(e.slice(5, 7), 16) }; for (const [s, d] of Object.entries(n)) { let i = d / 255; i < 0.03928 ? i /= 12.92 : i = ((i + 0.055) / 1.055) ** 2, n[s] = i; } const r = n.red * 0.2126, o = n.green * 0.7152, a = n.blue * 0.0722; return r + o + a; } function $(e, n) { return ot(e) > 0.4 ? tt(e, n) : nt(e, n); } function st(e, n) { return [ `.vt-theme-${e} { background-color: ${n}; }`, `.vt-theme-${e} > .vt-progress-bar { background-color: ${$(n, 10)}; }`, `.vt-theme-${e} > .vt-progress-bar > .vt-progress { background-color: ${$(n, 30)}; }`, `.vt-theme-${e} > .vt-content > .vt-title { color: ${$(n, 75)}; }`, `.vt-theme-${e} > .vt-content > .vt-paragraph { color: ${$(n, 75)}; }`, `.vt-theme-${e} > .vt-buttons > .button { background-color: ${$(n, 10)}; color: ${$(n, 75)}; border: 1px solid ${$(n, 10)}; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; }`, `.vt-theme-${e} > .vt-buttons > .button:hover { background-color: ${$(n, 65)}; color: ${$(n, 5)}; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; }`, `.vt-theme-${e} > .vt-prompt { border-color: ${$(n, 70)}; }`, `.vt-theme-${e} > .vt-prompt > .vt-icon > .svg { fill: ${$(n, 70)}; }`, `.vt-theme-${e} > .vt-icon-container > .vt-spinner { border: 2px solid ${$(n, 30)}; border-top: 2px solid ${$(n, 90)}; }` ]; } const x = Symbol("vue-toastify-themes"); function dt(e, n) { let r = document.getElementById(x.toString()); r || (r = document.createElement("style"), r.id = x.toString(), document.head.appendChild(r)), st(e, n).forEach((o) => r.sheet.insertRule( o.replaceAll(" ", "").replaceAll(` `, " ") )); } export { dt as createVtTheme, ut as default, st as getCssRules, mt as useToast, q as useVtEvents, W as useVtSettings };