@vielzeug/refine 1.7.0 → 2.0.0

package/dist/toast.js

@@ -1,34 +1,156 @@
-import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
-import { warn as t } from "./_dev.js";
-import { createSwipeControl as n } from "./headless/swipe.js";
-import r from "./feedback/toast/toast.css.js";
-import { define as i, getHost as a, html as o, onCleanup as s, onMounted as c, prop as l, ref as u, useEmit as d } from "@vielzeug/ore";
-import { computed as f, signal as p, watch as m } from "@vielzeug/ripple";
-import { uuid as h } from "@vielzeug/arsenal";
+import "./_dev.js";
+import { createSwipeControl as e } from "./core/swipe.js";
+import { reducedMotionMixin as t } from "./styles/mixins/accessibility.css.js";
+import n from "./feedback/toast/toast.css.js";
+import { define as r, getHost as i, html as a, onCleanup as o, onMounted as s, prop as c, ref as l, useEmit as u } from "@vielzeug/ore";
+import { computed as d, signal as f } from "@vielzeug/ripple";
+import { watch as p } from "@vielzeug/ripple/watch";
+import { uuid as m } from "@vielzeug/arsenal/random";
 //#region src/feedback/toast/toast.ts
-var g = 300;
-function _(e, t) {
-	return e.actions?.length ? o`
+var h = 300, g = class {
+	#e = f([]);
+	#t = /* @__PURE__ */ new Set();
+	#n = /* @__PURE__ */ new Set();
+	#r = !1;
+	#i = 5;
+	add(e) {
+		if (this.#r) return e.id ?? m();
+		let t = e.id ?? m(), n = this.#e.value.filter((e) => e.phase !== "exiting"), r = n.length - (this.#i - 1);
+		if (r > 0) for (let e of n.slice(0, r)) this.dismiss(e.id);
+		let i = {
+			dismissible: !0,
+			duration: 5e3,
+			...e,
+			exitTimeoutId: null,
+			id: t,
+			phase: "entering",
+			timer: null
+		};
+		return this.#l([...this.#e.value, i]), this.#o({
+			id: t,
+			type: "add"
+		}), requestAnimationFrame(() => {
+			this.#s(t)?.phase === "entering" && this.#u(t, { phase: "active" });
+		}), i.duration > 0 && this.#c(t, i.duration), t;
+	}
+	clear() {
+		for (let e of this.#e.value) e.phase !== "exiting" && this.dismiss(e.id);
+	}
+	dispose() {
+		if (!this.#r) {
+			this.#r = !0;
+			for (let e of this.#e.value) e.timer && clearTimeout(e.timer.timeoutId), e.exitTimeoutId && clearTimeout(e.exitTimeoutId);
+			this.#l([]), this.#t.clear(), this.#n.clear();
+		}
+	}
+	dismiss(e) {
+		let t = this.#s(e);
+		!t || t.phase === "exiting" || this.#r || (this.#u(e, {
+			...this.#a(t),
+			phase: "exiting"
+		}), this.scheduleFinalization(e, 350));
+	}
+	finalize(e) {
+		let t = this.#s(e);
+		!t || this.#r || (t.timer && clearTimeout(t.timer.timeoutId), t.exitTimeoutId && clearTimeout(t.exitTimeoutId), this.#l(this.#e.value.filter((t) => t.id !== e)), t.onDismiss?.(), this.#o({
+			id: e,
+			type: "dismiss"
+		}));
+	}
+	pauseTimers() {
+		this.#r || this.#l(this.#e.value.map((e) => e.timer ? (clearTimeout(e.timer.timeoutId), {
+			...e,
+			timer: {
+				...e.timer,
+				remaining: Math.max(0, e.timer.remaining - (Date.now() - e.timer.startedAt))
+			}
+		}) : e));
+	}
+	resumeTimers() {
+		if (!this.#r) for (let e of this.#e.value) e.phase === "active" && e.timer && e.timer.remaining > 0 && this.#c(e.id, e.timer.remaining);
+	}
+	scheduleFinalization(e, t) {
+		let n = this.#s(e);
+		if (!n || n.phase !== "exiting" || this.#r) return;
+		n.exitTimeoutId && clearTimeout(n.exitTimeoutId);
+		let r = setTimeout(() => this.finalize(e), t);
+		this.#u(e, { exitTimeoutId: r });
+	}
+	setMax(e) {
+		e != null && (this.#i = Math.max(1, e));
+	}
+	subscribe(e) {
+		return e(this.#e.value), this.#t.add(e), () => this.#t.delete(e);
+	}
+	subscribeEvents(e) {
+		return this.#n.add(e), () => this.#n.delete(e);
+	}
+	update(e, t) {
+		let n = this.#s(e);
+		if (!n || this.#r) return;
+		let r = t.duration === void 0 ? n : this.#a(n);
+		this.#u(e, {
+			...r,
+			...t,
+			id: e
+		}), t.duration !== void 0 && t.duration > 0 && this.#c(e, t.duration);
+	}
+	#a(e) {
+		return e.timer && clearTimeout(e.timer.timeoutId), {
+			...e,
+			timer: null
+		};
+	}
+	#o(e) {
+		for (let t of this.#n) t(e);
+	}
+	#s(e) {
+		return this.#e.value.find((t) => t.id === e);
+	}
+	#c(e, t) {
+		if (t <= 0 || this.#r) return;
+		let n = setTimeout(() => this.dismiss(e), t);
+		this.#u(e, { timer: {
+			remaining: t,
+			startedAt: Date.now(),
+			timeoutId: n
+		} });
+	}
+	#l(e) {
+		this.#e.value = e;
+		for (let t of this.#t) t(e);
+	}
+	#u(e, t) {
+		this.#l(this.#e.value.map((n) => n.id === e ? {
+			...n,
+			...t
+		} : n));
+	}
+}, _ = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), y = (e, t) => {
+	v.set(e, t), _.get(e)?.bind(t);
+};
+function b(e, t) {
+	return e.actions?.length ? a`
     <div slot="actions" class="toast-actions">
-      ${e.actions.map((n) => o`
+      ${e.actions.map((n) => a`
           <ore-button
             size="sm"
             color=${n.color || e.color || "primary"}
             variant=${n.variant || "solid"}
             @click=${() => {
 		n.onClick?.(), t();
-	}}
-            >${n.label}</ore-button
-          >
+	}}>
+            ${n.label}
+          </ore-button>
         `)}
     </div>
   ` : "";
 }
-var v = "ore-toast";
-i(v, {
+var x = "ore-toast";
+r(x, {
 	props: {
-		max: l.number(5),
-		position: l.oneOf([
+		max: c.number(5),
+		position: c.oneOf([
 			"top-left",
 			"top-center",
 			"top-right",
@@ -37,136 +159,89 @@ i(v, {
 			"bottom-right"
 		], "bottom-right")
 	},
-	setup(e) {
-		let t = a(), r = d(), i = p([]), l = u(), v = /* @__PURE__ */ new Map(), y = p(!1), b = p(!1), x = f(() => y.value || b.value), S = (e, t) => {
-			i.value = i.value.map((n) => n.id === e ? {
-				...n,
-				...t
-			} : n);
-		}, C = (e) => i.value.find((t) => t.id === e), w = (e) => (e instanceof Event ? e.currentTarget : e).querySelector(".toast-inner"), T = (e) => (e.timer && clearTimeout(e.timer.timeoutId), {
-			...e,
-			timer: null
-		}), E = (e, t) => {
-			if (t <= 0) return;
-			let n = setTimeout(() => M(e), t);
-			S(e, { timer: {
-				remaining: t,
-				startedAt: Date.now(),
-				timeoutId: n
-			} });
-		}, D = () => {
-			i.value = i.value.map((e) => e.timer ? (clearTimeout(e.timer.timeoutId), {
-				...e,
-				timer: {
-					...e.timer,
-					remaining: Math.max(0, e.timer.remaining - (Date.now() - e.timer.startedAt))
-				}
-			}) : e);
-		}, O = () => {
-			for (let e of i.value) {
-				if (!e.timer || e.timer.remaining <= 0) continue;
-				let t = setTimeout(() => M(e.id), e.timer.remaining);
-				S(e.id, { timer: {
-					...e.timer,
-					startedAt: Date.now(),
-					timeoutId: t
-				} });
-			}
-		};
-		m(x, (e) => {
-			e ? D() : O();
-		});
-		let k = (e) => {
-			let t = ({ event: e }) => {
-				let t = w(e);
-				t && (t.style.transition = "", t.style.transform = "", t.style.opacity = "");
-			};
-			return n({
+	setup() {
+		let t = i(), n = u(), r = l(), c = f([]), m = f(!1), g = f(!1), y = d(() => m.value || g.value), x = /* @__PURE__ */ new Map(), S = /* @__PURE__ */ new Map(), C = /* @__PURE__ */ new Set(), w = null, T = () => {}, E = () => {}, D = (e) => (e instanceof Event ? e.currentTarget : e).querySelector(".toast-inner"), O = (e) => {
+			S.get(e)?.(), S.delete(e);
+		}, k = (e) => {
+			C.delete(e), w?.finalize(e);
+		}, A = (t) => {
+			let n = () => c.value.find((e) => e.id === t)?.dismissible ?? !0;
+			return e({
 				axis: () => "x",
 				captureTarget: () => null,
-				disabled: f(() => !(C(e)?.dismissible ?? !0)),
-				onCancel: t,
-				onCommit: ({ distance: t, event: n }) => {
-					let r = w(n);
-					if (!r) return;
-					let i = t >= 0 ? 1 : -1, a = window.matchMedia("(prefers-reduced-motion: reduce)").matches, o = () => A(e);
-					if (a) {
-						r.style.opacity = "0", o();
+				disabled: {
+					peek: () => !n(),
+					subscribe: (e) => c.subscribe(e),
+					get value() {
+						return !n();
+					}
+				},
+				onCancel: ({ event: e }) => {
+					let t = D(e);
+					t && (t.style.transition = "", t.style.transform = "", t.style.opacity = "");
+				},
+				onCommit: ({ distance: e, event: n }) => {
+					let r = D(n);
+					if (!r || !w) return;
+					C.add(t), w.dismiss(t);
+					let i = () => k(t);
+					if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+						r.style.opacity = "0", i();
 						return;
 					}
-					r.style.transition = "transform 0.22s ease-out, opacity 0.22s ease-out", r.offsetWidth, r.style.transform = `translateX(${i * 120}%)`, r.style.opacity = "0";
-					let s = (e) => {
-						e.target !== r || e.propertyName !== "transform" || (r.removeEventListener("transitionend", s), clearTimeout(c), o());
-					}, c = setTimeout(() => {
-						r.removeEventListener("transitionend", s), o();
-					}, 300);
-					r.addEventListener("transitionend", s);
+					let a = e >= 0 ? 1 : -1;
+					r.style.transition = "transform 0.22s ease-out, opacity 0.22s ease-out", r.offsetWidth, r.style.transform = `translateX(${a * 120}%)`, r.style.opacity = "0";
+					let o = (e) => {
+						e.target === r && e.propertyName === "transform" && (r.removeEventListener("transitionend", o), i());
+					};
+					r.addEventListener("transitionend", o), w.scheduleFinalization(t, 300);
 				},
 				onMove: ({ distance: e, event: t }) => {
-					let n = w(t);
+					let n = D(t);
 					n && (n.style.transition = "none", n.style.transform = `translateX(${e}px)`, n.style.opacity = String(Math.max(0, 1 - Math.abs(e) / 200)));
 				},
-				onRelease: t
+				onRelease: ({ event: e }) => {
+					let t = D(e);
+					t && (t.style.transition = "", t.style.transform = "", t.style.opacity = "");
+				}
 			});
-		}, A = (e) => {
-			let t = C(e);
-			t?.timer && clearTimeout(t.timer.timeoutId), v.delete(e), i.value = i.value.filter((t) => t.id !== e), t?.onDismiss?.(), r("dismiss", { id: e });
-		}, j = (t) => {
-			let n = t.id || h(), a = e.max?.value ?? 5, o = i.value.filter((e) => e.phase !== "exiting"), s = o.length - (a - 1);
-			if (s > 0) for (let e of o.slice(0, s)) M(e.id);
-			let c = {
-				dismissible: !0,
-				duration: 5e3,
-				...t,
-				id: n,
-				phase: "entering",
-				timer: null
-			};
-			return v.set(n, k(n)), i.value = [...i.value, c], r("add", { id: n }), requestAnimationFrame(() => {
-				C(n)?.phase === "entering" && S(n, { phase: "active" });
-			}), c.duration > 0 && E(n, c.duration), n;
-		}, M = (e) => {
-			let t = C(e);
-			if (!t || t.phase === "exiting") return;
-			S(e, {
-				...T(t),
-				phase: "exiting"
+		}, j = (e) => {
+			!w || S.has(e) || C.has(e) || requestAnimationFrame(() => {
+				if (!w || S.has(e) || C.has(e)) return;
+				let t = r.value?.querySelector(`[data-toast-id="${e}"] .toast-inner`);
+				if (!t) {
+					w.scheduleFinalization(e, h);
+					return;
+				}
+				t.offsetHeight;
+				let n = parseFloat(getComputedStyle(t).transitionDuration) * 1e3, i = Number.isFinite(n) && n > 0 ? n : h, a = (t) => {
+					t.target?.closest?.(`[data-toast-id="${e}"]`) && (O(e), w?.finalize(e));
+				};
+				S.set(e, () => r.value?.removeEventListener("transitionend", a)), r.value?.addEventListener("transitionend", a), w.scheduleFinalization(e, i + 50);
 			});
-			let n = l.value?.querySelector(`[data-toast-id="${e}"] .toast-inner`);
-			n?.offsetHeight;
-			let r = !1, i = () => {
-				r || (r = !0, A(e));
-			}, a = n ? parseFloat(getComputedStyle(n).transitionDuration) * 1e3 : NaN, o = setTimeout(i, (Number.isFinite(a) && a > 0 ? a : g) + 50), s = (t) => {
-				t.target?.closest?.(`[data-toast-id="${e}"]`) && (l.value?.removeEventListener("transitionend", s), clearTimeout(o), i());
-			};
-			l.value?.addEventListener("transitionend", s);
-		}, N = (e, t) => {
-			let n = C(e);
-			if (!n) return;
-			let r = t.duration === void 0 ? n : T(n);
-			S(e, {
-				...r,
-				...t,
-				id: e
-			}), t.duration !== void 0 && t.duration > 0 && E(e, t.duration);
-		}, P = () => {
-			for (let e of i.value) e.phase !== "exiting" && M(e.id);
-		}, F = (e) => e.urgency ?? (e.color === "error" ? "assertive" : "polite"), I = f(() => i.value.filter((e) => F(e) === "polite")), L = f(() => i.value.filter((e) => F(e) === "assertive"));
-		s(() => {
-			for (let e of i.value) e.timer && clearTimeout(e.timer.timeoutId);
-			v.clear();
+		};
+		p(c, () => {
+			let e = new Set(c.value.map((e) => e.id));
+			for (let [t, n] of x) e.has(t) || (n.dispose(), x.delete(t), O(t), C.delete(t));
+			for (let e of c.value) x.has(e.id) || x.set(e.id, A(e.id)), e.phase === "exiting" && j(e.id);
+		}), p(y, (e) => {
+			e ? w?.pauseTimers() : w?.resumeTimers();
 		});
-		let R = (e) => {
-			let t = () => M(e.id);
-			return o`
+		let M = (e) => {
+			w !== e && (T(), E(), w = e, T = w.subscribe((e) => {
+				c.value = e;
+			}), E = w.subscribeEvents((e) => n(e.type, { id: e.id })), y.value && w.pauseTimers());
+		}, N = (e) => {
+			let t = () => w?.dismiss(e.id);
+			return a`
         <div
           class="toast-wrapper"
           data-toast-id=${e.id}
           part="toast-wrapper"
-          @pointerdown=${(t) => v.get(e.id)?.handlePointerDown(t)}
-          @pointermove=${(t) => v.get(e.id)?.handlePointerMove(t)}
-          @pointerup=${(t) => v.get(e.id)?.handlePointerUp(t)}
-          @pointercancel=${(t) => v.get(e.id)?.handlePointerCancel(t)}>
+          @pointerdown=${(t) => x.get(e.id)?.handlePointerDown(t)}
+          @pointermove=${(t) => x.get(e.id)?.handlePointerMove(t)}
+          @pointerup=${(t) => x.get(e.id)?.handlePointerUp(t)}
+          @pointercancel=${(t) => x.get(e.id)?.handlePointerCancel(t)}>
           <div class="${() => `toast-inner${e.phase === "active" ? "" : ` ${e.phase}`}`}" part="toast-inner">
             <ore-alert
               color=${e.color || (e.urgency === "assertive" ? "error" : "primary")}
@@ -175,36 +250,49 @@ i(v, {
               rounded=${e.rounded || "md"}
               ?horizontal=${e.horizontal}
               heading=${e.heading || ""}
-              ?dismissible=${e.dismissible !== !1}
+              ?dismissible=${e.dismissible}
               @dismiss=${t}>
-              ${e.meta ? o`<span slot="meta">${e.meta}</span>` : ""} ${e.message}
-              ${_(e, t)}
+              ${e.meta ? a`
+                      <span slot="meta">${e.meta}</span>
+                    ` : ""}
+              ${e.message} ${b(e, t)}
             </ore-alert>
           </div>
         </div>
       `;
 		};
-		return c(() => {
-			let e = t;
-			e.add = j, e.clear = P, e.dismiss = M, e.update = N;
-		}), o`
+		s(() => {
+			_.set(t, {
+				bind: M,
+				unbind() {
+					T(), E(), w = null, c.value = [];
+				}
+			});
+			let e = v.get(t);
+			e && M(e);
+		}), o(() => {
+			_.get(t)?.unbind(), _.delete(t);
+			for (let e of x.values()) e.dispose();
+			for (let e of S.keys()) O(e);
+		});
+		let P = (e) => e.urgency ?? (e.color === "error" ? "assertive" : "polite"), F = d(() => c.value.filter((e) => P(e) === "polite")), I = d(() => c.value.filter((e) => P(e) === "assertive"));
+		return a`
       <div
         class="toast-container"
-        ref=${l}
+        ref=${r}
         @pointerenter=${() => {
-			y.value = !0, t.classList.add("hovered");
+			m.value = !0, t.classList.add("hovered");
 		}}
         @pointerleave=${() => {
-			y.value = !1, t.classList.remove("hovered");
+			m.value = !1, t.classList.remove("hovered");
 		}}
         @focusin=${() => {
-			b.value = !0;
+			g.value = !0;
 		}}
         @focusout=${() => {
-			b.value = !1;
+			g.value = !1;
 		}}
         part="container">
-        <!-- Polite live region: normal informational toasts -->
         <div
           role="region"
           aria-live="polite"
@@ -212,9 +300,8 @@ i(v, {
           aria-atomic="false"
           aria-label="Notifications"
           class="toast-live-region">
-          ${() => I.value.map(R)}
+          ${() => F.value.map(N)}
         </div>
-        <!-- Assertive live region: critical errors that interrupt immediately -->
         <div
           role="region"
           aria-live="assertive"
@@ -222,51 +309,68 @@ i(v, {
           aria-atomic="false"
           aria-label="Critical notifications"
           class="toast-live-region">
-          ${() => L.value.map(R)}
+          ${() => I.value.map(N)}
         </div>
         <slot></slot>
       </div>
     `;
 	},
-	styles: [e, r]
+	styles: [t, n]
 });
-function y(e = document.body) {
-	let n = null, r = !1, i = null, a = () => n?.isConnected ? n : (n = (e instanceof Element, e).querySelector("ore-toast"), n || (n = document.createElement("ore-toast"), i &&= (i.position && n.setAttribute("position", i.position), i.max != null && n.setAttribute("max", String(i.max)), null), e.appendChild(n)), r = !0, n), o = {
+var S = /* @__PURE__ */ new WeakMap();
+function C(e = document.body) {
+	let t = S.get(e);
+	if (t) return t;
+	let n = new g(), r = new AbortController(), i = !1, a = !1, o = null, s = null, c = () => !i, l = e, u = () => {
+		if (!c()) return null;
+		if (s?.isConnected) return s;
+		if (s = l.querySelector(x), s || (s = document.createElement(x), o?.position && s.setAttribute("position", o.position), o?.max != null && s.setAttribute("max", String(o.max)), l.appendChild(s)), o?.max != null) n.setMax(o.max);
+		else {
+			let e = Number(s.getAttribute("max"));
+			Number.isFinite(e) && e > 0 && n.setMax(e);
+		}
+		return o = null, a = !0, y(s, n), s;
+	}, d = () => !!u(), f = {
 		add(e) {
-			return a().add(e);
+			return d() ? n.add(e) : e.id ?? m();
 		},
 		clear() {
-			a().clear();
+			d() && n.clear();
 		},
 		configure(e) {
-			if (r) {
-				t("toast.configure() called after the container was already created; options ignored.");
-				return;
-			}
-			i = {
-				...i,
+			a || (o = {
+				...o,
 				...e
-			};
+			});
 		},
 		dismiss(e) {
-			a().dismiss(e);
+			d() && n.dismiss(e);
+		},
+		get disposalSignal() {
+			return r.signal;
+		},
+		dispose() {
+			i || (i = !0, r.abort(), n.dispose(), S.get(e) === f && S.delete(e));
+		},
+		get disposed() {
+			return i;
 		},
 		error(e, t) {
-			return o.add({
+			return f.add({
 				color: "error",
 				...t,
 				message: e
 			});
 		},
 		info(e, t) {
-			return o.add({
+			return f.add({
 				color: "info",
 				...t,
 				message: e
 			});
 		},
 		async promise(e, t) {
-			let n = o.add({
+			let n = f.add({
 				color: "primary",
 				dismissible: !1,
 				duration: 0,
@@ -274,14 +378,14 @@ function y(e = document.body) {
 			});
 			try {
 				let r = await e;
-				return o.update(n, {
+				return f.update(n, {
 					color: "success",
 					dismissible: !0,
 					duration: 5e3,
 					message: typeof t.success == "function" ? t.success(r) : t.success
 				}), r;
 			} catch (e) {
-				throw o.update(n, {
+				throw f.update(n, {
 					color: "error",
 					dismissible: !0,
 					duration: 5e3,
@@ -290,27 +394,30 @@ function y(e = document.body) {
 			}
 		},
 		success(e, t) {
-			return o.add({
+			return f.add({
 				color: "success",
 				...t,
 				message: e
 			});
 		},
+		[Symbol.dispose]() {
+			f.dispose();
+		},
 		update(e, t) {
-			a().update(e, t);
+			d() && n.update(e, t);
 		},
 		warning(e, t) {
-			return o.add({
+			return f.add({
 				color: "warning",
 				...t,
 				message: e
 			});
 		}
 	};
-	return o;
+	return S.set(e, f), f;
 }
-var b = y();
+var w = C();
 //#endregion
-export { v as TOAST_TAG, y as createToastService, b as toast };
+export { x as TOAST_TAG, C as createToastService, w as toast };
 
 //# sourceMappingURL=toast.js.map