@datagouv/vue-toaster
Version:
Vue 3 toaster notification
220 lines (219 loc) • 6.41 kB
JavaScript
var x = Object.defineProperty;
var A = (n, t, e) => t in n ? x(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
var u = (n, t, e) => (A(n, typeof t != "symbol" ? t + "" : t, e), e);
import { defineComponent as F, ref as h, onBeforeMount as L, onMounted as S, computed as y, onBeforeUnmount as q, openBlock as O, createBlock as C, Transition as G, withCtx as g, withDirectives as H, resolveDynamicComponent as R, normalizeClass as $, createTextVNode as U, toDisplayString as j, vShow as z, h as Q, render as w } from "vue";
const l = {
TOP_RIGHT: "top-right",
TOP: "top",
TOP_LEFT: "top-left",
BOTTOM_RIGHT: "bottom-right",
BOTTOM: "bottom",
BOTTOM_LEFT: "bottom-left"
};
function B(n, t, e) {
let o = t;
switch (n) {
case l.TOP:
case l.TOP_RIGHT:
case l.TOP_LEFT:
o = t;
break;
case l.BOTTOM:
case l.BOTTOM_RIGHT:
case l.BOTTOM_LEFT:
o = e;
break;
}
return o;
}
const V = (n) => {
typeof n.remove < "u" ? n.remove() : n.parentNode && n.parentNode.removeChild(n);
};
class J {
constructor(t, e) {
u(this, "startedAt");
u(this, "callback");
u(this, "delay");
u(this, "timer");
this.startedAt = Date.now(), this.callback = t, this.delay = e, this.timer = setTimeout(t, e);
}
pause() {
this.stop(), this.delay -= Date.now() - this.startedAt;
}
resume() {
this.stop(), this.startedAt = Date.now(), this.timer = setTimeout(this.callback, this.delay);
}
stop() {
clearTimeout(this.timer);
}
}
function K(n) {
return { all: n = n || /* @__PURE__ */ new Map(), on: function(t, e) {
var o = n.get(t);
o ? o.push(e) : n.set(t, [e]);
}, off: function(t, e) {
var o = n.get(t);
o && (e ? o.splice(o.indexOf(e) >>> 0, 1) : n.set(t, []));
}, emit: function(t, e) {
var o = n.get(t);
o && o.slice().map(function(a) {
a(e);
}), (o = n.get("*")) && o.slice().map(function(a) {
a(t, e);
});
} };
}
const m = K(), W = /* @__PURE__ */ F({
__name: "Toaster",
props: {
message: {},
type: { default: "default" },
position: { default: l.BOTTOM_RIGHT },
maxToasts: { type: [Number, Boolean], default: !1 },
duration: { type: [Number, Boolean], default: 4e3 },
dismissible: { type: Boolean, default: !0 },
queue: { type: Boolean, default: !1 },
props: { type: Boolean, default: !0 },
useDefaultCss: { type: Boolean, default: !0 },
onClose: { type: Function, default: () => {
} },
onClick: { type: Function, default: () => {
} }
},
setup(n) {
const t = n;
let e = null, o = null, a = null, d;
const r = h(null), f = h(!1);
L(() => {
b(), E(), M();
}), S(() => {
p(), m.on("toast-clear", c);
});
function b() {
e = document.querySelector(".c-toast-container--top"), o = document.querySelector(".c-toast-container--bottom"), !(e && o) && (e || (e = document.createElement("div"), e.className = "c-toast-container c-toast-container--top"), o || (o = document.createElement("div"), o.className = "c-toast-container c-toast-container--bottom"));
}
function E() {
const s = t.useDefaultCss ? "add" : "remove";
e && e.classList[s]("v--default-css"), o && o.classList[s]("v--default-css");
}
function M() {
const s = document.body;
e && s.appendChild(e), o && s.appendChild(o);
}
function P() {
if (!t.queue && t.maxToasts === !1)
return !1;
let s = 0;
e && (s = e.childElementCount);
let i = 0;
return o && (i = o.childElementCount), t.maxToasts !== !1 ? t.maxToasts <= s + i : s > 0 || i > 0;
}
function p() {
if (P()) {
d = window.setTimeout(p, 250);
return;
}
const s = D();
s && r.value && (s.insertAdjacentElement("afterbegin", r.value), f.value = !0, a = t.duration !== !1 ? new J(c, t.duration) : null);
}
function k() {
t.onClick.apply(null, arguments), t.dismissible && c();
}
function T(s) {
a && (s ? a.pause() : a.resume());
}
function _() {
a && a.stop(), clearTimeout(d);
}
function c() {
_(), f.value = !1, setTimeout(() => {
t.onClose.apply(null, arguments), r.value && V(r.value);
}, 150);
}
function D() {
return !e || !o ? null : B(t.position, e, o);
}
const v = y(() => B(
t.position,
{
enter: "fadeInDown",
leave: "fadeOut"
},
{
enter: "fadeInUp",
leave: "fadeOut"
}
)), N = y(() => t.dismissible ? "button" : "div");
return q(() => {
m.off("toast-clear", c);
}), (s, i) => (O(), C(G, {
"enter-active-class": v.value.enter,
"leave-active-class": v.value.leave,
ref_key: "el",
ref: r
}, {
default: g(() => [
H((O(), C(R(N.value), {
class: $(["c-toast", `c-toast--${s.type}`, `c-toast--${s.position}`]),
onMouseover: i[0] || (i[0] = (I) => T(!0)),
onMouseleave: i[1] || (i[1] = (I) => T(!1)),
onClick: k,
role: "alert"
}, {
default: g(() => [
U(j(s.message), 1)
]),
_: 1
}, 40, ["class"])), [
[z, f.value]
])
]),
_: 1
}, 8, ["enter-active-class", "leave-active-class"]));
}
}), X = () => typeof document < "u" ? document.createElement("div") : null;
function Y(n, { props: t } = {}) {
let e = X(), o = Q(n, t);
return e && w(o, e), { vNode: o, destroy: () => {
e && w(null, e), e = null, o = null;
}, el: e };
}
function Z(n = {}) {
return {
show(t, e = {}) {
let o = { message: t, ...e };
return Y(W, {
props: { ...n, ...o }
});
},
clear() {
m.emit("toast-clear");
},
success(t, e = {}) {
return e.type = "success", this.show(t, e);
},
error(t, e = {}) {
return e.type = "error", this.show(t, e);
},
info(t, e = {}) {
return e.type = "info", this.show(t, e);
},
warning(t, e = {}) {
return e.type = "warning", this.show(t, e);
}
};
}
const oe = {
install: (n, t = {}) => {
let e = Z(t);
n.config.globalProperties.$toast = e, n.provide("toast", e);
}
};
export {
l as Positions,
W as Toaster,
Z as createToaster,
oe as default,
oe as plugin
};
//# sourceMappingURL=vue-toaster.js.map