@ac-design/design-system 2.2.0 → 2.2.1

package/dist/lib/components/AcNotificationMenu.vue_vue_type_script_setup_true_lang.js

@@ -1,52 +1,53 @@
 import e from "./AcNavbarItem.js";
-import t from "./AcSkeleton.js";
-import { Fragment as n, Teleport as r, Transition as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, getCurrentInstance as p, mergeModels as m, mergeProps as h, nextTick as g, normalizeClass as _, normalizeStyle as ee, onBeforeUnmount as te, openBlock as v, ref as y, renderList as b, renderSlot as x, resolveDynamicComponent as S, toDisplayString as C, unref as w, useId as T, useModel as ne, watch as E, withCtx as D } from "vue";
-import { ArrowRight as re, Bell as ie, BellOff as ae } from "@lucide/vue";
+import { fixedFrame as t } from "./fixedFrame.js";
+import n from "./AcSkeleton.js";
+import { Fragment as r, Teleport as i, Transition as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, getCurrentInstance as m, mergeModels as h, mergeProps as g, nextTick as _, normalizeClass as v, normalizeStyle as ee, onBeforeUnmount as te, openBlock as y, ref as b, renderList as x, renderSlot as S, resolveDynamicComponent as C, toDisplayString as w, unref as T, useId as ne, useModel as re, watch as E, withCtx as D } from "vue";
+import { ArrowRight as ie, Bell as ae, BellOff as oe } from "@lucide/vue";
 //#region src/lib/components/AcNotificationMenu.vue?vue&type=script&setup=true&lang.ts
-var oe = {
+var se = {
 	class: "inline-flex",
 	"data-ac-ds": "",
 	"data-testid": "ac-notification-menu"
-}, se = { class: "flex shrink-0 items-center justify-between gap-2 border-b border-border p-3" }, ce = {
+}, ce = { class: "flex shrink-0 items-center justify-between gap-2 border-b border-border p-3" }, le = {
 	key: 0,
 	class: "sr-only"
-}, le = {
+}, ue = {
 	key: 0,
 	class: "flex flex-col gap-4 p-3",
 	"aria-busy": "true",
 	role: "status",
 	"aria-label": "Loading notifications"
-}, ue = {
+}, de = {
 	key: 1,
 	class: "flex flex-col items-center gap-3 px-6 py-10 text-center"
-}, de = {
+}, fe = {
 	class: "inline-flex size-12 items-center justify-center rounded-14 bg-primary/10 text-primary-strong",
 	"aria-hidden": "true"
-}, fe = { class: "text-lg font-semibold text-heading" }, pe = {
+}, pe = { class: "text-lg font-semibold text-heading" }, me = {
 	key: 2,
 	role: "list",
 	class: "ac-scrollbar min-h-0 flex-1 divide-y divide-border",
 	"data-ac-ds": "",
 	"data-testid": "ac-notification-menu-list"
-}, me = { class: "flex items-center gap-2" }, he = { class: "line-clamp-2 min-w-0 text-base font-medium text-heading" }, ge = {
+}, he = { class: "flex items-center gap-2" }, ge = { class: "line-clamp-2 min-w-0 text-base font-medium text-heading" }, _e = {
 	key: 1,
 	class: "size-2 shrink-0 rounded-full bg-primary",
 	"aria-hidden": "true"
-}, _e = {
+}, ve = {
 	key: 2,
 	class: "sr-only"
-}, ve = {
+}, ye = {
 	key: 0,
 	class: "mt-1 line-clamp-2 block text-xs text-muted"
-}, ye = { class: "mt-1 flex items-center gap-1.5 text-xs text-muted" }, be = {
+}, be = { class: "mt-1 flex items-center gap-1.5 text-xs text-muted" }, xe = {
 	key: 1,
 	"aria-hidden": "true"
-}, xe = ["datetime", "title"], Se = {
+}, Se = ["datetime", "title"], Ce = {
 	key: 3,
 	class: "shrink-0 border-t border-border p-1.5"
-}, Ce = "[data-notification-item]", we = 6048e5, O = /*@__PURE__*/ f({
+}, we = "[data-notification-item]", Te = 6048e5, O = /*@__PURE__*/ p({
 	__name: "AcNotificationMenu",
-	props: /*@__PURE__*/ m({
+	props: /*@__PURE__*/ h({
 		notifications: { default: () => [] },
 		unreadCount: { default: void 0 },
 		loading: {
@@ -66,13 +67,13 @@ var oe = {
 		},
 		openModifiers: {}
 	}),
-	emits: /*@__PURE__*/ m([
+	emits: /*@__PURE__*/ h([
 		"select",
 		"markAllRead",
 		"viewAll"
 	], ["update:open"]),
-	setup(f, { emit: m }) {
-		let O = f, k = ne(f, "open"), A = m, Te = {
+	setup(p, { emit: h }) {
+		let O = p, k = re(p, "open"), A = h, Ee = {
 			success: "success",
 			succeeded: "success",
 			completed: "success",
@@ -91,7 +92,7 @@ var oe = {
 			inprogress: "info",
 			progressing: "info",
 			info: "info"
-		}, Ee = {
+		}, De = {
 			success: "text-success-strong",
 			danger: "text-danger-strong",
 			warning: "text-warning-strong",
@@ -100,30 +101,30 @@ var oe = {
 		}, j = new Intl.RelativeTimeFormat(void 0, {
 			numeric: "auto",
 			style: "narrow"
-		}), De = new Intl.DateTimeFormat(void 0, {
+		}), Oe = new Intl.DateTimeFormat(void 0, {
 			dateStyle: "medium",
 			timeStyle: "short"
-		}), Oe = new Intl.DateTimeFormat(void 0, {
+		}), ke = new Intl.DateTimeFormat(void 0, {
 			month: "short",
 			day: "numeric"
-		}), M = p()?.appContext.components.RouterLink, N = T(), P = `${N}-panel`, F = `${N}-heading`, I = y(null), L = y(null), R = y({}), z = y(!0), B = y(Date.now()), V, H = a(() => O.unreadCount ?? O.notifications.filter((e) => !e.read).length), ke = a(() => O.notifications.some((e) => !e.read)), Ae = a(() => !!(O.viewAllHref || O.viewAllTo));
-		function je(e) {
-			return e.type ? e.type : Te[(e.status ?? "").toLowerCase().replace(/[^a-z]/g, "")] ?? "neutral";
+		}), M = m()?.appContext.components.RouterLink, N = ne(), P = `${N}-panel`, F = `${N}-heading`, I = b(null), L = b(null), R = b({}), z = b(!0), B = b(Date.now()), V, H = o(() => O.unreadCount ?? O.notifications.filter((e) => !e.read).length), Ae = o(() => O.notifications.some((e) => !e.read)), je = o(() => !!(O.viewAllHref || O.viewAllTo));
+		function Me(e) {
+			return e.type ? e.type : Ee[(e.status ?? "").toLowerCase().replace(/[^a-z]/g, "")] ?? "neutral";
 		}
 		function U(e) {
 			return e instanceof Date ? e.getTime() : typeof e == "number" ? e < 1e11 ? e * 1e3 : e : new Date(e).getTime();
 		}
-		function Me(e) {
+		function Ne(e) {
 			let t = U(e);
 			if (Number.isNaN(t)) return "";
 			let n = t - B.value, r = Math.abs(n);
-			return r < 45e3 ? "Just now" : r >= we ? Oe.format(t) : r < 36e5 ? j.format(Math.round(n / 6e4), "minute") : r < 864e5 ? j.format(Math.round(n / 36e5), "hour") : j.format(Math.round(n / 864e5), "day");
+			return r < 45e3 ? "Just now" : r >= Te ? ke.format(t) : r < 36e5 ? j.format(Math.round(n / 6e4), "minute") : r < 864e5 ? j.format(Math.round(n / 36e5), "hour") : j.format(Math.round(n / 864e5), "day");
 		}
-		function Ne(e) {
+		function Pe(e) {
 			let t = U(e);
-			return Number.isNaN(t) ? "" : De.format(t);
+			return Number.isNaN(t) ? "" : Oe.format(t);
 		}
-		function Pe(e) {
+		function Fe(e) {
 			let t = U(e);
 			return Number.isNaN(t) ? void 0 : new Date(t).toISOString();
 		}
@@ -138,7 +139,7 @@ var oe = {
 			return I.value?.$el ?? null;
 		}
 		function q() {
-			return [...L.value?.querySelectorAll(Ce) ?? []];
+			return [...L.value?.querySelectorAll(we) ?? []];
 		}
 		function J(e) {
 			let t = q();
@@ -147,37 +148,37 @@ var oe = {
 		function Y() {
 			let e = K();
 			if (!e || !L.value) return;
-			let t = e.getBoundingClientRect(), { offsetWidth: n, offsetHeight: r } = L.value, i = window.innerHeight - t.bottom - 6 - 8, a = t.top - 6 - 8, o = i < r && a > i, s = O.align === "end" ? t.right - n : t.left;
-			z.value = !o, R.value = {
-				[o ? "bottom" : "top"]: `${o ? window.innerHeight - t.top + 6 : t.bottom + 6}px`,
-				left: `${Math.max(8, Math.min(s, window.innerWidth - n - 8))}px`,
-				maxHeight: `${Math.max(o ? a : i, 200)}px`
+			let n = e.getBoundingClientRect(), r = t(), { offsetWidth: i, offsetHeight: a } = L.value, o = r.bottom - n.bottom - 6 - 8, s = n.top - r.top - 6 - 8, c = o < a && s > o, l = (O.align === "end" ? n.right - i : n.left) - r.left;
+			z.value = !c, R.value = {
+				[c ? "bottom" : "top"]: `${c ? r.bottom - n.top + 6 : n.bottom + 6 - r.top}px`,
+				left: `${Math.max(8, Math.min(l, r.width - i - 8))}px`,
+				maxHeight: `${Math.max(c ? s : o, 200)}px`
 			};
 		}
 		function X(e = !0) {
 			k.value && (k.value = !1, e && K()?.focus());
 		}
-		function Z() {
+		function Ie() {
 			k.value ? X() : k.value = !0;
 		}
-		function Fe(e) {
+		function Le(e) {
 			A("select", e), X(!1);
 		}
-		function Ie() {
+		function Re() {
 			A("viewAll"), X(!1);
 		}
-		function Le(e) {
+		function ze(e) {
 			e.key !== "ArrowDown" || k.value || (e.preventDefault(), k.value = !0);
 		}
-		function Re(e) {
+		function Z(e) {
 			let t = q(), n = t.indexOf(document.activeElement);
-			(e.key === "ArrowDown" || e.key === "ArrowUp") && t.length ? (e.preventDefault(), J(n < 0 ? e.key === "ArrowDown" ? 0 : -1 : n + (e.key === "ArrowDown" ? 1 : -1))) : (e.key === "Home" || e.key === "End") && n >= 0 ? (e.preventDefault(), J(e.key === "Home" ? 0 : -1)) : e.key === "Escape" ? (e.preventDefault(), X()) : e.key === "Tab" && ze(e);
+			(e.key === "ArrowDown" || e.key === "ArrowUp") && t.length ? (e.preventDefault(), J(n < 0 ? e.key === "ArrowDown" ? 0 : -1 : n + (e.key === "ArrowDown" ? 1 : -1))) : (e.key === "Home" || e.key === "End") && n >= 0 ? (e.preventDefault(), J(e.key === "Home" ? 0 : -1)) : e.key === "Escape" ? (e.preventDefault(), X()) : e.key === "Tab" && Be(e);
 		}
-		function ze(e) {
+		function Be(e) {
 			let t = [...L.value?.querySelectorAll("a[href], button:not([disabled])") ?? []], n = t[0], r = t[t.length - 1];
 			e.shiftKey && (document.activeElement === n || document.activeElement === L.value) ? (e.preventDefault(), X()) : !e.shiftKey && (document.activeElement === r || !t.length) && X();
 		}
-		function Be(e) {
+		function Ve(e) {
 			let t = e.target;
 			K()?.contains(t) || L.value?.contains(t) || X(!1);
 		}
@@ -186,28 +187,28 @@ var oe = {
 		}
 		function $(e) {
 			let t = e ? "addEventListener" : "removeEventListener";
-			document[t]("pointerdown", Be, !0), window[t]("scroll", Q, !0), window[t]("resize", Q), clearInterval(V), e && (V = setInterval(() => B.value = Date.now(), 3e4));
+			document[t]("pointerdown", Ve, !0), window[t]("scroll", Q, !0), window[t]("resize", Q), clearInterval(V), e && (V = setInterval(() => B.value = Date.now(), 3e4));
 		}
 		return E(k, async (e) => {
 			if ($(e), !e) return;
-			B.value = Date.now(), await g(), Y();
+			B.value = Date.now(), await _(), Y();
 			let t = q()[0];
 			t ? t.focus() : L.value?.focus();
-		}), E(() => [O.notifications.length, O.loading], () => k.value && g(Y)), te(() => $(!1)), (a, p) => (v(), c("div", oe, [d(e, {
+		}), E(() => [O.notifications.length, O.loading], () => k.value && _(Y)), te(() => $(!1)), (t, o) => (y(), l("div", se, [f(e, {
 			ref_key: "trigger",
 			ref: I,
-			label: f.label,
-			icon: w(ie),
+			label: p.label,
+			icon: T(ae),
 			"icon-only": "",
 			badge: H.value,
 			"aria-haspopup": "dialog",
 			"aria-expanded": k.value,
 			"aria-controls": k.value ? P : void 0,
-			class: _(k.value && "border-border bg-surface-sunken/50 text-heading"),
+			class: v(k.value && "border-border bg-surface-sunken/50 text-heading"),
 			"data-ac-ds": "",
 			"data-testid": "ac-notification-menu-trigger",
-			onClick: Z,
-			onKeydown: Le
+			onClick: Ie,
+			onKeydown: ze
 		}, null, 8, [
 			"label",
 			"icon",
@@ -215,13 +216,13 @@ var oe = {
 			"aria-expanded",
 			"aria-controls",
 			"class"
-		]), (v(), o(r, { to: "body" }, [d(i, {
+		]), (y(), s(i, { to: "body" }, [f(a, {
 			"enter-active-class": "transition duration-150 ease-out",
 			"enter-from-class": "opacity-0 motion-safe:scale-95",
 			"leave-active-class": "transition duration-100 ease-in",
 			"leave-to-class": "opacity-0"
 		}, {
-			default: D(() => [k.value ? (v(), c("div", {
+			default: D(() => [k.value ? (y(), l("div", {
 				key: 0,
 				id: P,
 				ref_key: "panel",
@@ -229,79 +230,79 @@ var oe = {
 				role: "dialog",
 				tabindex: "-1",
 				"aria-labelledby": F,
-				class: _(["fixed z-[90] flex w-[calc(320px*var(--ac-scale))] max-w-[calc(100vw-16px)] flex-col overflow-hidden rounded-14 border border-border/80 bg-surface shadow-lg outline-none", z.value ? "origin-top-right" : "origin-bottom-right"]),
+				class: v(["fixed z-[90] flex w-[calc(320px*var(--ac-scale))] max-w-[calc(100vw-16px)] flex-col overflow-hidden rounded-14 border border-border/80 bg-surface shadow-lg outline-none", z.value ? "origin-top-right" : "origin-bottom-right"]),
 				style: ee(R.value),
 				"data-ac-ds": "",
 				"data-testid": "ac-notification-menu-panel",
-				onKeydown: Re
+				onKeydown: Z
 			}, [
-				l("div", se, [l("h2", {
+				u("div", ce, [u("h2", {
 					id: F,
 					class: "font-heading text-base font-semibold text-heading"
-				}, C(f.label), 1), ke.value || H.value ? (v(), c("button", {
+				}, w(p.label), 1), Ae.value || H.value ? (y(), l("button", {
 					key: 0,
 					type: "button",
 					class: "cursor-pointer rounded-4 text-xs text-muted transition-colors duration-200 hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
 					"data-ac-ds": "",
 					"data-testid": "ac-notification-menu-mark-all",
-					onClick: p[0] ||= (e) => A("markAllRead")
-				}, [p[1] ||= u(" Mark all as read", -1), H.value ? (v(), c("span", ce, " (" + C(H.value) + " unread)", 1)) : s("", !0)])) : s("", !0)]),
-				f.loading ? (v(), c("div", le, [(v(), c(n, null, b(3, (e) => d(t, {
+					onClick: o[0] ||= (e) => A("markAllRead")
+				}, [o[1] ||= d(" Mark all as read", -1), H.value ? (y(), l("span", le, " (" + w(H.value) + " unread)", 1)) : c("", !0)])) : c("", !0)]),
+				p.loading ? (y(), l("div", ue, [(y(), l(r, null, x(3, (e) => f(n, {
 					key: e,
 					shape: "text",
 					lines: 3,
 					height: "10px",
 					label: ""
-				})), 64))])) : f.notifications.length ? (v(), c("ul", pe, [(v(!0), c(n, null, b(f.notifications, (e) => (v(), c("li", { key: e.id }, [(v(), o(S(W(e.to, e.href)), h({ ref_for: !0 }, G(e.to, e.href), {
+				})), 64))])) : p.notifications.length ? (y(), l("ul", me, [(y(!0), l(r, null, x(p.notifications, (e) => (y(), l("li", { key: e.id }, [(y(), s(C(W(e.to, e.href)), g({ ref_for: !0 }, G(e.to, e.href), {
 					"data-notification-item": "",
 					class: ["relative block w-full cursor-pointer p-3 text-left no-underline outline-none transition-colors duration-200 hover:bg-surface-sunken focus-visible:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", !e.read && "bg-primary/8"],
 					"data-ac-ds": "",
 					"data-testid": "ac-notification-menu-item",
-					onClick: (t) => Fe(e)
+					onClick: (t) => Le(e)
 				}), {
-					default: D(() => [x(a.$slots, "item", { item: e }, () => [
-						l("span", me, [
-							e.icon ? (v(), o(S(e.icon), {
+					default: D(() => [S(t.$slots, "item", { item: e }, () => [
+						u("span", he, [
+							e.icon ? (y(), s(C(e.icon), {
 								key: 0,
 								class: "size-4 shrink-0 text-muted",
 								"aria-hidden": "true"
-							})) : s("", !0),
-							l("span", he, C(e.title || e.msg), 1),
-							e.read ? s("", !0) : (v(), c("span", ge)),
-							e.read ? s("", !0) : (v(), c("span", _e, "(unread)"))
+							})) : c("", !0),
+							u("span", ge, w(e.title || e.msg), 1),
+							e.read ? c("", !0) : (y(), l("span", _e)),
+							e.read ? c("", !0) : (y(), l("span", ve, "(unread)"))
 						]),
-						e.title && e.msg ? (v(), c("span", ve, C(e.msg), 1)) : s("", !0),
-						l("span", ye, [
-							e.status ? (v(), c("span", {
+						e.title && e.msg ? (y(), l("span", ye, w(e.msg), 1)) : c("", !0),
+						u("span", be, [
+							e.status ? (y(), l("span", {
 								key: 0,
-								class: _(["font-medium", Ee[je(e)]])
-							}, C(e.status), 3)) : s("", !0),
-							e.status ? (v(), c("span", be, "·")) : s("", !0),
-							l("time", {
-								datetime: Pe(e.time),
-								title: Ne(e.time)
-							}, C(Me(e.time)), 9, xe)
+								class: v(["font-medium", De[Me(e)]])
+							}, w(e.status), 3)) : c("", !0),
+							e.status ? (y(), l("span", xe, "·")) : c("", !0),
+							u("time", {
+								datetime: Fe(e.time),
+								title: Pe(e.time)
+							}, w(Ne(e.time)), 9, Se)
 						])
 					])]),
 					_: 2
-				}, 1040, ["class", "onClick"]))]))), 128))])) : (v(), c("div", ue, [x(a.$slots, "empty", {}, () => [
-					l("span", de, [d(w(ae), { class: "size-6" })]),
-					l("p", fe, C(f.emptyText), 1),
-					p[2] ||= l("p", { class: "max-w-64 text-base text-muted" }, "Backups, upgrades and alerts from your clusters show up here.", -1)
+				}, 1040, ["class", "onClick"]))]))), 128))])) : (y(), l("div", de, [S(t.$slots, "empty", {}, () => [
+					u("span", fe, [f(T(oe), { class: "size-6" })]),
+					u("p", pe, w(p.emptyText), 1),
+					o[2] ||= u("p", { class: "max-w-64 text-base text-muted" }, "Backups, upgrades and alerts from your clusters show up here.", -1)
 				])])),
-				a.$slots.footer || Ae.value ? (v(), c("div", Se, [x(a.$slots, "footer", { close: X }, () => [(v(), o(S(W(f.viewAllTo, f.viewAllHref)), h(G(f.viewAllTo, f.viewAllHref), {
+				t.$slots.footer || je.value ? (y(), l("div", Ce, [S(t.$slots, "footer", { close: X }, () => [(y(), s(C(W(p.viewAllTo, p.viewAllHref)), g(G(p.viewAllTo, p.viewAllHref), {
 					class: "group/link flex h-9 w-full cursor-pointer items-center justify-center gap-1.5 rounded-8 text-base font-semibold text-primary-strong no-underline outline-none transition-colors duration-200 hover:bg-surface-sunken focus-visible:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
 					"data-ac-ds": "",
 					"data-testid": "ac-notification-menu-view-all",
-					onClick: Ie
+					onClick: Re
 				}), {
-					default: D(() => [u(C(f.viewAllLabel) + " ", 1), d(w(re), {
+					default: D(() => [d(w(p.viewAllLabel) + " ", 1), f(T(ie), {
 						class: "size-3.5 transition-transform duration-200 group-hover/link:translate-x-0.5 motion-reduce:transition-none",
 						"aria-hidden": "true"
 					})]),
 					_: 1
-				}, 16))])])) : s("", !0)
-			], 38)) : s("", !0)]),
+				}, 16))])])) : c("", !0)
+			], 38)) : c("", !0)]),
 			_: 3
 		})]))]));
 	}