@ac-design/design-system 1.0.2 → 2.0.0

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

@@ -1,33 +1,40 @@
-import e from "./AcBadge.js";
-import t from "./AcModal.js";
-import n from "./AcSkeleton.js";
-import r from "./AcTag.js";
-import i from "./AcTooltip.js";
-import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as ee, createVNode as d, defineAsyncComponent as f, defineComponent as p, getCurrentInstance as te, h as ne, mergeProps as m, nextTick as re, normalizeClass as h, normalizeStyle as g, onBeforeUnmount as ie, onMounted as ae, openBlock as _, ref as v, renderList as oe, resolveDynamicComponent as y, toDisplayString as b, unref as x, watch as S, withCtx as C, withModifiers as w } from "vue";
-import { Braces as se, Check as ce, Minus as le } from "@lucide/vue";
+import { statusMeta as e } from "./status.js";
+import t from "./AcBadge.js";
+import n from "./AcModal.js";
+import r from "./AcSkeleton.js";
+import i from "./AcTag.js";
+import a from "./AcTooltip.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as ee, defineAsyncComponent as te, defineComponent as p, getCurrentInstance as ne, h as re, mergeProps as m, nextTick as ie, normalizeClass as h, normalizeStyle as ae, onBeforeUnmount as oe, onMounted as se, openBlock as g, ref as _, renderList as ce, resolveDynamicComponent as v, toDisplayString as y, unref as b, watch as x, withCtx as S, withModifiers as C } from "vue";
+import { Braces as le, Check as ue, Minus as de } from "@lucide/vue";
 //#region src/lib/components/AcCellValue.vue?vue&type=script&setup=true&lang.ts
-var ue = ["src"], de = {
+var fe = ["src"], pe = {
 	key: 1,
 	class: "text-muted"
-}, fe = ["tabindex"], pe = {
+}, me = {
+	class: "relative flex size-1.5 shrink-0",
+	"aria-hidden": "true"
+}, he = ["tabindex"], ge = {
+	class: "relative flex size-1.5 shrink-0",
+	"aria-hidden": "true"
+}, _e = {
 	key: 4,
 	class: "inline-flex items-center gap-1"
-}, me = ["datetime"], he = ["datetime", "tabindex"], ge = ["aria-expanded", "aria-label"], _e = ["tabindex"], ve = ["aria-label"], T = v(Date.now()), E = 0, D;
-function ye() {
-	E++ === 0 && (D = setInterval(() => T.value = Date.now(), 3e4));
+}, ve = ["datetime"], ye = ["datetime", "tabindex"], be = ["aria-expanded", "aria-label"], xe = ["tabindex"], Se = ["aria-label"], w = _(Date.now()), T = 0, E;
+function Ce() {
+	T++ === 0 && (E = setInterval(() => w.value = Date.now(), 3e4));
 }
-function O() {
-	--E === 0 && clearInterval(D);
+function we() {
+	--T === 0 && clearInterval(E);
 }
-var k = /* @__PURE__ */ new WeakMap(), A;
-function be(e, t) {
+var D = /* @__PURE__ */ new WeakMap(), O;
+function Te(e, t) {
 	if (typeof ResizeObserver > "u") return t();
-	A ??= new ResizeObserver((e) => e.forEach((e) => k.get(e.target)?.())), k.set(e, t), A.observe(e);
+	O ??= new ResizeObserver((e) => e.forEach((e) => D.get(e.target)?.())), D.set(e, t), O.observe(e);
 }
-function j(e) {
-	k.delete(e), A?.unobserve(e);
+function k(e) {
+	D.delete(e), O?.unobserve(e);
 }
-var M = /*@__PURE__*/ p({
+var A = /*@__PURE__*/ p({
 	__name: "AcCellValue",
 	props: {
 		value: { default: void 0 },
@@ -63,17 +70,21 @@ var M = /*@__PURE__*/ p({
 		loading: {
 			type: Boolean,
 			default: !1
+		},
+		plain: {
+			type: Boolean,
+			default: !1
 		}
 	},
 	setup(p) {
-		let E = p, D = /* @__PURE__ */ new Set([
+		let T = p, E = /* @__PURE__ */ new Set([
 			"",
 			"<none>",
 			"<unknown>",
 			"<nil>",
 			"null",
 			"undefined"
-		]), k = {
+		]), D = {
 			primary: "primary",
 			secondary: "secondary",
 			info: "info",
@@ -81,6 +92,7 @@ var M = /*@__PURE__*/ p({
 			success: "success",
 			warning: "warning",
 			danger: "danger",
+			pending: "pending",
 			dark: "dark",
 			black: "dark",
 			light: "default",
@@ -88,89 +100,92 @@ var M = /*@__PURE__*/ p({
 			gray: "default",
 			default: "default",
 			neutral: "default"
-		}, A = [
-			["success", /^(ready|running|succeeded|success|successful|healthy|active|available|approved|bound|completed?|current|provisioned|synced|true)$/],
-			["danger", /^(failed|failure|error|critical|notready|not ready|unhealthy|crashloopbackoff|lost|rejected|false)$/],
-			["warning", /^(pending|provisioning|progressing|updating|degraded|warning|halted|paused|terminating|waiting|suspended)$/]
-		], M = /^-?[\d.]+\s?[a-zA-Z%]{0,3}$/, xe = /^\d{4}-\d{2}-\d{2}[T ]\d{2}:\d{2}/, Se = new Intl.NumberFormat(void 0, { maximumFractionDigits: 2 }), Ce = new Intl.NumberFormat(void 0, { maximumFractionDigits: 0 }), N = new Intl.DateTimeFormat(void 0, {
+		}, O = {
+			primary: ["bg-primary", "text-primary-strong"],
+			secondary: ["bg-secondary", "text-secondary"],
+			info: ["bg-info", "text-info-strong"],
+			success: ["bg-success", "text-success-strong"],
+			warning: ["bg-warning", "text-warning-strong"],
+			danger: ["bg-danger", "text-danger-strong"],
+			pending: ["bg-pending", "text-pending-strong"],
+			dark: ["bg-heading", "text-heading"],
+			default: ["bg-muted", "text-muted"]
+		}, A = /^-?[\d.]+\s?[a-zA-Z%]{0,3}$/, Ee = /^\d{4}-\d{2}-\d{2}[T ]\d{2}:\d{2}/, De = new Intl.NumberFormat(void 0, { maximumFractionDigits: 2 }), Oe = new Intl.NumberFormat(void 0, { maximumFractionDigits: 0 }), ke = new Intl.DateTimeFormat(void 0, {
 			dateStyle: "medium",
 			timeStyle: "long"
-		}), we = f({
+		}), Ae = te({
 			loader: () => import("../editor/index.js").then((e) => e.AcCodeEditor),
-			loadingComponent: () => ne(n, {
+			loadingComponent: () => re(r, {
 				shape: "editor",
 				height: "240px"
 			}),
 			delay: 150
-		}), P = te()?.appContext.components.RouterLink, F = v(null), I = v(!1), L = v(!1), R = v(!1), z = v(!1), B = o(() => E.cell ? E.cell.data : E.value), V = o(() => E.title || E.column?.name || ""), H = o(() => E.tooltip || E.cell?.tooltip || ""), Te = o(() => E.icon || E.cell?.icon || ""), Ee = o(() => E.bold || !!E.cell?.isBold || E.column?.format === "name"), U = o(() => E.align ?? E.column?.textAlign), W = o(() => {
-			let e = E.href || E.cell?.link || "";
-			return e && E.resolveLink ? E.resolveLink(e) : e;
-		}), De = o(() => /^https?:\/\//.test(W.value)), G = o(() => P && W.value.startsWith("/") ? P : "a"), K = o(() => W.value ? De.value ? {
-			href: W.value,
+		}), je = ne()?.appContext.components.RouterLink, j = _(null), Me = _(!1), M = _(!1), N = _(!1), P = _(!1), F = s(() => T.cell ? T.cell.data : T.value), I = s(() => T.title || T.column?.name || ""), L = s(() => T.tooltip || T.cell?.tooltip || ""), Ne = s(() => T.icon || T.cell?.icon || ""), Pe = s(() => T.bold || !!T.cell?.isBold || T.column?.format === "name"), R = s(() => T.align ?? T.column?.textAlign), z = s(() => {
+			let e = T.href || T.cell?.link || "";
+			return e && T.resolveLink ? T.resolveLink(e) : e;
+		}), Fe = s(() => /^https?:\/\//.test(z.value)), B = s(() => je && z.value.startsWith("/") ? je : "a"), V = s(() => z.value ? Fe.value ? {
+			href: z.value,
 			target: "_blank",
 			rel: "noopener noreferrer"
-		} : G.value === "a" ? { href: W.value } : { to: W.value } : null), Oe = o(() => {
-			let e = (E.color || E.cell?.color || "").trim().split(/\s+/)[0].replace(/^is-/, "");
-			if (e) return k[e] ?? "default";
-			if (q.value !== "status") return null;
-			let t = String(B.value).trim().toLowerCase();
-			return A.find(([, e]) => e.test(t))?.[0] ?? "default";
-		}), q = o(() => {
-			let e = B.value;
-			if (Fe(e)) return "empty";
-			if (E.color || E.cell?.color) return "status";
-			if (E.type !== "auto") return E.type;
-			let t = typeof e == "object" ? void 0 : E.column?.type;
-			return t && t !== "auto" && t !== "object" ? t : typeof e == "boolean" ? "boolean" : typeof e == "number" ? "number" : Array.isArray(e) ? "array" : typeof e == "object" ? Ie(e) ? "labels" : "object" : typeof e == "string" && xe.test(e) && !Number.isNaN(Date.parse(e)) ? "date" : "string";
-		}), J = o(() => q.value === "date" ? Le(B.value) : null), Y = o(() => {
-			let e = B.value;
-			switch (q.value) {
+		} : B.value === "a" ? { href: z.value } : { to: z.value } : null), H = s(() => {
+			let t = (T.color || T.cell?.color || "").trim().split(/\s+/)[0].replace(/^is-/, "");
+			return t ? D[t] ?? "default" : W.value === "status" ? e(String(F.value)).tone : null;
+		}), U = s(() => W.value === "status" && e(String(F.value)).transient), W = s(() => {
+			let e = F.value;
+			if (Ue(e)) return "empty";
+			if (T.color || T.cell?.color) return "status";
+			if (T.type !== "auto") return T.type;
+			let t = typeof e == "object" ? void 0 : T.column?.type;
+			return t && t !== "auto" && t !== "object" ? t : typeof e == "boolean" ? "boolean" : typeof e == "number" ? "number" : Array.isArray(e) ? "array" : typeof e == "object" ? We(e) ? "labels" : "object" : typeof e == "string" && Ee.test(e) && !Number.isNaN(Date.parse(e)) ? "date" : "string";
+		}), G = s(() => W.value === "date" ? Ge(F.value) : null), K = s(() => {
+			let e = F.value;
+			switch (W.value) {
 				case "number":
 				case "integer": {
 					let t = typeof e == "number" ? e : Number(e);
-					return Number.isNaN(t) ? `${String(e)}${E.unit}` : `${(q.value === "integer" ? Ce : Se).format(t)}${E.unit}`;
+					return Number.isNaN(t) ? `${String(e)}${T.unit}` : `${(W.value === "integer" ? Oe : De).format(t)}${T.unit}`;
 				}
-				case "boolean": return $(e) ? "true" : "false";
-				case "date": return J.value ? E.relative ? Re(J.value, T.value) : N.format(J.value) : String(e);
-				case "object": return Be(e);
+				case "boolean": return Z(e) ? "true" : "false";
+				case "date": return G.value ? T.relative ? Q(G.value, w.value) : ke.format(G.value) : String(e);
+				case "object": return qe(e);
 				default: return typeof e == "object" ? JSON.stringify(e) : String(e);
 			}
-		}), X = o(() => J.value ? H.value || (E.relative ? N.format(J.value) : Re(J.value, T.value)) : H.value), ke = o(() => H.value || (I.value ? Y.value : "")), Z = o(() => {
-			let e = B.value;
-			return q.value === "labels" ? Object.entries(e).map(([e, t]) => ({
+		}), q = s(() => G.value ? L.value || (T.relative ? ke.format(G.value) : Q(G.value, w.value)) : L.value), Ie = s(() => L.value || (Me.value ? K.value : "")), J = s(() => {
+			let e = F.value;
+			return W.value === "labels" ? Object.entries(e).map(([e, t]) => ({
 				key: e,
 				value: String(t ?? ""),
 				text: `${e}=${t ?? ""}`
-			})) : q.value === "array" ? e.map((e) => {
-				let t = Ve(e);
+			})) : W.value === "array" ? e.map((e) => {
+				let t = Je(e);
 				return {
 					key: "",
 					value: t,
 					text: t
 				};
 			}) : [];
-		}), Ae = o(() => L.value ? Z.value : Z.value.slice(0, E.maxItems)), Q = o(() => Z.value.length - Math.min(Z.value.length, E.maxItems)), je = o(() => q.value === "object" || q.value === "array" && B.value.some((e) => typeof e == "object" && !!e)), Me = o(() => R.value ? JSON.stringify(B.value, null, 2) : ""), Ne = o(() => q.value === "number" || q.value === "integer" || q.value === "string" && M.test(Y.value)), Pe = o(() => q.value === "labels" ? "labels" : "items");
-		function Fe(e) {
-			return e == null ? !0 : typeof e == "string" ? D.has(e.trim()) : Array.isArray(e) ? e.length === 0 : typeof e == "object" && Object.keys(e).length === 0;
+		}), Le = s(() => M.value ? J.value : J.value.slice(0, T.maxItems)), Y = s(() => J.value.length - Math.min(J.value.length, T.maxItems)), Re = s(() => W.value === "object" || W.value === "array" && F.value.some((e) => typeof e == "object" && !!e)), ze = s(() => N.value ? JSON.stringify(F.value, null, 2) : ""), Be = s(() => W.value === "number" || W.value === "integer" || W.value === "string" && A.test(K.value)), X = s(() => O[H.value ?? "default"]), Ve = s(() => T.plain ? "rounded-4" : T.column?.shape === "Rectangle" ? "rounded-6" : "rounded-full"), He = s(() => W.value === "labels" ? "labels" : "items");
+		function Ue(e) {
+			return e == null ? !0 : typeof e == "string" ? E.has(e.trim()) : Array.isArray(e) ? e.length === 0 : typeof e == "object" && Object.keys(e).length === 0;
 		}
-		function Ie(e) {
+		function We(e) {
 			return Object.values(e).every((e) => e === null || [
 				"string",
 				"number",
 				"boolean"
 			].includes(typeof e));
 		}
-		function $(e) {
+		function Z(e) {
 			return e === !0 || String(e).toLowerCase() === "true";
 		}
-		function Le(e) {
+		function Ge(e) {
 			if (e instanceof Date) return Number.isNaN(e.getTime()) ? null : e;
 			if (typeof e == "number") return new Date(e < 0xe8d4a51000 ? e * 1e3 : e);
-			if (typeof e == "string" && /^\d+$/.test(e)) return Le(Number(e));
+			if (typeof e == "string" && /^\d+$/.test(e)) return Ge(Number(e));
 			let t = typeof e == "string" ? Date.parse(e) : NaN;
 			return Number.isNaN(t) ? null : new Date(t);
 		}
-		function Re(e, t) {
+		function Q(e, t) {
 			let n = Math.round((t - e.getTime()) / 1e3), r = Math.abs(n);
 			if (r < 45) return "just now";
 			let i = [
@@ -184,203 +199,223 @@ var M = /*@__PURE__*/ p({
 			let o = Math.floor(r / a[0]);
 			return n >= 0 ? `${o}${a[1]} ago` : `in ${o}${a[1]}`;
 		}
-		function ze(e) {
+		function Ke(e) {
 			return Array.isArray(e) ? `[${e.length}]` : typeof e == "object" && e ? "{…}" : typeof e == "string" ? e : String(e);
 		}
-		function Be(e) {
-			return Object.entries(e).map(([e, t]) => `${e}: ${ze(t)}`).join(", ");
+		function qe(e) {
+			return Object.entries(e).map(([e, t]) => `${e}: ${Ke(t)}`).join(", ");
 		}
-		function Ve(e) {
+		function Je(e) {
 			if (typeof e != "object" || !e) return String(e);
 			let t = e, n = t.name ?? t.Name ?? Object.values(t)[0];
 			return n === void 0 || typeof n == "object" ? "{…}" : String(n);
 		}
-		function He(e) {
-			F.value = e && "$el" in e ? e.$el : e;
+		function Ye(e) {
+			j.value = e && "$el" in e ? e.$el : e;
 		}
-		function Ue() {
-			let e = F.value;
-			I.value = !!e && e.scrollWidth > e.clientWidth + 1;
+		function $() {
+			let e = j.value;
+			Me.value = !!e && e.scrollWidth > e.clientWidth + 1;
 		}
-		function We() {
-			R.value = !0, z.value = !0;
+		function Xe() {
+			N.value = !0, P.value = !0;
 		}
-		return S(F, (e, t) => {
-			t && j(t), e && be(e, Ue);
-		}), S(Y, () => re(Ue)), S(() => q.value === "date", (e, t) => {
-			e && !t ? ye() : !e && t && O();
-		}), ae(() => {
-			q.value === "date" && ye();
-		}), ie(() => {
-			q.value === "date" && O(), F.value && j(F.value);
-		}), (o, f) => (_(), l("span", {
+		return x(j, (e, t) => {
+			t && k(t), e && Te(e, $);
+		}), x(K, () => ie($)), x(() => W.value === "date", (e, t) => {
+			e && !t ? Ce() : !e && t && we();
+		}), se(() => {
+			W.value === "date" && Ce();
+		}), oe(() => {
+			W.value === "date" && we(), j.value && k(j.value);
+		}), (e, s) => (g(), u("span", {
 			class: h(["max-w-full min-w-0 items-center gap-1.5 align-middle", [
-				U.value ? "flex w-full" : "inline-flex",
-				U.value === "center" && "justify-center",
-				U.value === "right" && "justify-end",
-				Ee.value && "font-semibold text-heading"
+				R.value ? "flex w-full" : "inline-flex",
+				R.value === "center" && "justify-center",
+				R.value === "right" && "justify-end",
+				Pe.value && "font-semibold text-heading"
 			]]),
 			"data-ac-ds": "",
 			"data-testid": "ac-cell-value"
-		}, [p.loading ? (_(), s(n, {
+		}, [p.loading ? (g(), c(r, {
 			key: 0,
 			width: "96px"
-		})) : (_(), l(a, { key: 1 }, [
-			Te.value ? (_(), l("img", {
+		})) : (g(), u(o, { key: 1 }, [
+			Ne.value ? (g(), u("img", {
 				key: 0,
-				src: Te.value,
+				src: Ne.value,
 				alt: "",
 				class: "size-4 shrink-0 object-contain"
-			}, null, 8, ue)) : c("", !0),
-			q.value === "empty" ? (_(), l("span", de, b(p.emptyText), 1)) : q.value === "status" && K.value ? (_(), s(y(G.value), m({ key: 2 }, K.value, {
-				class: "inline-flex rounded-6 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
-				onClick: f[0] ||= w(() => {}, ["stop"])
+			}, null, 8, fe)) : l("", !0),
+			W.value === "empty" ? (g(), u("span", pe, y(p.emptyText), 1)) : W.value === "status" && V.value ? (g(), c(v(B.value), m({ key: 2 }, V.value, {
+				class: ["inline-flex focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", [Ve.value, p.plain && "underline-offset-2 hover:underline"]],
+				onClick: s[0] ||= C(() => {}, ["stop"])
 			}), {
-				default: C(() => [d(e, {
-					label: Y.value,
-					color: Oe.value ?? "default",
+				default: S(() => [p.plain ? (g(), u("span", {
+					key: 0,
+					class: h(["inline-flex items-center gap-1.5 text-xs font-medium whitespace-nowrap", X.value[1]])
+				}, [d("span", me, [U.value ? (g(), u("span", {
+					key: 0,
+					class: h(["absolute inset-0 rounded-full opacity-60 motion-safe:animate-ping", X.value[0]])
+				}, null, 2)) : l("", !0), d("span", { class: h(["relative size-1.5 rounded-full", X.value[0]]) }, null, 2)]), f(y(K.value), 1)], 2)) : (g(), c(t, {
+					key: 1,
+					label: K.value,
+					color: H.value ?? "default",
 					variant: "light",
 					rounded: p.column?.shape !== "Rectangle",
-					dot: ""
+					dot: "",
+					pulse: U.value
 				}, null, 8, [
 					"label",
 					"color",
-					"rounded"
-				])]),
+					"rounded",
+					"pulse"
+				]))]),
 				_: 1
-			}, 16)) : q.value === "status" ? (_(), s(i, {
+			}, 16, ["class"])) : W.value === "status" ? (g(), c(a, {
 				key: 3,
-				content: H.value
+				content: L.value
 			}, {
-				default: C(() => [u("span", {
-					tabindex: H.value ? 0 : void 0,
-					class: "inline-flex rounded-6 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring"
-				}, [d(e, {
-					label: Y.value,
-					color: Oe.value ?? "default",
+				default: S(() => [d("span", {
+					tabindex: L.value ? 0 : void 0,
+					class: h(["inline-flex focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", Ve.value])
+				}, [p.plain ? (g(), u("span", {
+					key: 0,
+					class: h(["inline-flex items-center gap-1.5 text-xs font-medium whitespace-nowrap", X.value[1]])
+				}, [d("span", ge, [U.value ? (g(), u("span", {
+					key: 0,
+					class: h(["absolute inset-0 rounded-full opacity-60 motion-safe:animate-ping", X.value[0]])
+				}, null, 2)) : l("", !0), d("span", { class: h(["relative size-1.5 rounded-full", X.value[0]]) }, null, 2)]), f(y(K.value), 1)], 2)) : (g(), c(t, {
+					key: 1,
+					label: K.value,
+					color: H.value ?? "default",
 					variant: "light",
 					rounded: p.column?.shape !== "Rectangle",
-					dot: ""
+					dot: "",
+					pulse: U.value
 				}, null, 8, [
 					"label",
 					"color",
-					"rounded"
-				])], 8, fe)]),
+					"rounded",
+					"pulse"
+				]))], 10, he)]),
 				_: 1
-			}, 8, ["content"])) : q.value === "boolean" ? (_(), l("span", pe, [$(B.value) ? (_(), s(x(ce), {
+			}, 8, ["content"])) : W.value === "boolean" ? (g(), u("span", _e, [Z(F.value) ? (g(), c(b(ue), {
 				key: 0,
-				class: "size-3.5 text-success",
+				class: "size-3.5 text-success-strong",
 				"aria-hidden": "true"
-			})) : (_(), s(x(le), {
+			})) : (g(), c(b(de), {
 				key: 1,
 				class: "size-3.5 text-muted",
 				"aria-hidden": "true"
-			})), u("span", { class: h(!$(B.value) && "text-muted") }, b(Y.value), 3)])) : q.value === "date" ? (_(), s(i, {
+			})), d("span", { class: h(!Z(F.value) && "text-muted") }, y(K.value), 3)])) : W.value === "date" ? (g(), c(a, {
 				key: 5,
-				content: X.value
+				content: q.value
 			}, {
-				default: C(() => [K.value ? (_(), s(y(G.value), m({ key: 0 }, K.value, {
-					class: "font-medium whitespace-nowrap text-primary-20 tabular-nums underline-offset-2 hover:underline focus-visible:rounded-2 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
-					onClick: f[1] ||= w(() => {}, ["stop"])
+				default: S(() => [V.value ? (g(), c(v(B.value), m({ key: 0 }, V.value, {
+					class: "font-medium whitespace-nowrap text-primary-strong tabular-nums underline-offset-2 hover:underline focus-visible:rounded-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+					onClick: s[1] ||= C(() => {}, ["stop"])
 				}), {
-					default: C(() => [u("time", { datetime: J.value?.toISOString() }, b(Y.value), 9, me)]),
+					default: S(() => [d("time", { datetime: G.value?.toISOString() }, y(K.value), 9, ve)]),
 					_: 1
-				}, 16)) : (_(), l("time", {
+				}, 16)) : (g(), u("time", {
 					key: 1,
-					datetime: J.value?.toISOString(),
-					tabindex: X.value ? 0 : void 0,
-					class: h(["whitespace-nowrap tabular-nums focus-visible:rounded-2 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", X.value && "cursor-default decoration-border-dark decoration-dotted underline-offset-4 hover:underline"])
-				}, b(Y.value), 11, he))]),
+					datetime: G.value?.toISOString(),
+					tabindex: q.value ? 0 : void 0,
+					class: h(["whitespace-nowrap tabular-nums focus-visible:rounded-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", q.value && "cursor-default decoration-border-dark decoration-dotted underline-offset-4 hover:underline"])
+				}, y(K.value), 11, ye))]),
 				_: 1
-			}, 8, ["content"])) : q.value === "labels" || q.value === "array" ? (_(), l("span", {
+			}, 8, ["content"])) : W.value === "labels" || W.value === "array" ? (g(), u("span", {
 				key: 6,
-				class: "flex w-max min-w-0 flex-wrap items-center gap-1",
-				style: g({ maxWidth: p.maxWidth })
-			}, [(_(!0), l(a, null, oe(Ae.value, (e, t) => (_(), s(i, {
+				class: h(["flex w-max min-w-0 items-center gap-1", M.value ? "flex-wrap" : "flex-nowrap"]),
+				style: ae({ maxWidth: p.maxWidth })
+			}, [(g(!0), u(o, null, ce(Le.value, (e, t) => (g(), c(a, {
 				key: `${e.text}-${t}`,
-				content: e.text.length > 28 && !L.value ? e.text : "",
-				class: h(!L.value && "max-w-48")
+				content: e.text.length > 28 && !M.value ? e.text : "",
+				class: h(!M.value && "max-w-48 min-w-0")
 			}, {
-				default: C(() => [e.key ? (_(), s(r, {
+				default: S(() => [e.key ? (g(), c(i, {
 					key: 0,
 					"key-label": e.key,
-					"value-label": e.value
-				}, null, 8, ["key-label", "value-label"])) : (_(), s(r, {
+					"value-label": e.value,
+					rounded: ""
+				}, null, 8, ["key-label", "value-label"])) : (g(), c(i, {
 					key: 1,
-					label: e.value
+					label: e.value,
+					rounded: ""
 				}, null, 8, ["label"]))]),
 				_: 2
-			}, 1032, ["content", "class"]))), 128)), Q.value > 0 ? (_(), l("button", {
+			}, 1032, ["content", "class"]))), 128)), Y.value > 0 ? (g(), u("button", {
 				key: 0,
 				type: "button",
-				class: "inline-flex h-6 shrink-0 cursor-pointer items-center rounded-6 px-1.5 text-xs font-medium whitespace-nowrap text-label transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
-				"aria-expanded": L.value,
-				"aria-label": L.value ? `Show fewer ${Pe.value}` : `Show ${Q.value} more ${Pe.value}`,
-				onClick: f[2] ||= w((e) => L.value = !L.value, ["stop"])
-			}, b(L.value ? "Show less" : `+${Q.value} more`), 9, ge)) : c("", !0)], 4)) : (_(), s(i, {
+				class: "inline-flex h-6 shrink-0 cursor-pointer items-center rounded-full border border-dashed border-primary/40 px-2 text-xs font-medium whitespace-nowrap text-primary-strong transition-colors duration-200 hover:bg-primary/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+				"aria-expanded": M.value,
+				"aria-label": M.value ? `Show fewer ${He.value}` : `Show ${Y.value} more ${He.value}`,
+				onClick: s[2] ||= C((e) => M.value = !M.value, ["stop"])
+			}, y(M.value ? "Show less" : `+${Y.value} more`), 9, be)) : l("", !0)], 6)) : (g(), c(a, {
 				key: 7,
-				content: ke.value,
+				content: Ie.value,
 				class: "min-w-0"
 			}, {
-				default: C(() => [K.value ? (_(), s(y(G.value), m({
+				default: S(() => [V.value ? (g(), c(v(B.value), m({
 					key: 0,
-					ref: He
-				}, K.value, {
-					class: ["block truncate font-medium text-primary-20 underline-offset-2 hover:underline focus-visible:rounded-2 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", [(p.mono || q.value === "object") && "font-mono text-xs", Ne.value && "tabular-nums"]],
+					ref: Ye
+				}, V.value, {
+					class: ["block truncate font-medium text-primary-strong underline-offset-2 hover:underline focus-visible:rounded-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", [(p.mono || W.value === "object") && "font-mono text-xs", Be.value && "tabular-nums"]],
 					style: { maxWidth: p.maxWidth },
-					onClick: f[3] ||= w(() => {}, ["stop"])
+					onClick: s[3] ||= C(() => {}, ["stop"])
 				}), {
-					default: C(() => [ee(b(Y.value), 1)]),
+					default: S(() => [f(y(K.value), 1)]),
 					_: 1
-				}, 16, ["class", "style"])) : (_(), l("span", {
+				}, 16, ["class", "style"])) : (g(), u("span", {
 					key: 1,
-					ref: He,
-					tabindex: ke.value ? 0 : void 0,
-					class: h(["block truncate focus-visible:rounded-2 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", [
-						(p.mono || q.value === "object") && "font-mono text-xs",
-						Ne.value && "tabular-nums",
-						q.value === "object" && "text-label"
+					ref: Ye,
+					tabindex: Ie.value ? 0 : void 0,
+					class: h(["block truncate focus-visible:rounded-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", [
+						(p.mono || W.value === "object") && "font-mono text-xs",
+						Be.value && "tabular-nums",
+						W.value === "object" && "text-muted"
 					]]),
-					style: g({ maxWidth: p.maxWidth })
-				}, b(Y.value), 15, _e))]),
+					style: ae({ maxWidth: p.maxWidth })
+				}, y(K.value), 15, xe))]),
 				_: 1
 			}, 8, ["content"])),
-			je.value ? (_(), s(i, {
+			Re.value ? (g(), c(a, {
 				key: 8,
 				content: "View as JSON"
 			}, {
-				default: C(() => [u("button", {
+				default: S(() => [d("button", {
 					type: "button",
-					class: "inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-6 text-muted transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
-					"aria-label": V.value ? `View ${V.value} as JSON` : "View as JSON",
+					class: "inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-8 text-muted transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+					"aria-label": I.value ? `View ${I.value} as JSON` : "View as JSON",
 					"aria-haspopup": "dialog",
-					onClick: w(We, ["stop"])
-				}, [d(x(se), {
+					onClick: C(Xe, ["stop"])
+				}, [ee(b(le), {
 					class: "size-3.5",
 					"aria-hidden": "true"
-				})], 8, ve)]),
+				})], 8, Se)]),
 				_: 1
-			})) : c("", !0),
-			R.value ? (_(), s(t, {
+			})) : l("", !0),
+			N.value ? (g(), c(n, {
 				key: 9,
-				open: z.value,
-				"onUpdate:open": f[4] ||= (e) => z.value = e,
-				title: V.value || "Value",
+				open: P.value,
+				"onUpdate:open": s[4] ||= (e) => P.value = e,
+				title: I.value || "Value",
 				size: "medium"
 			}, {
-				default: C(() => [d(x(we), {
-					"model-value": Me.value,
+				default: S(() => [ee(b(Ae), {
+					"model-value": ze.value,
 					language: "json",
 					readonly: "",
 					copyable: "",
 					height: "auto",
 					"max-height": "60vh",
-					label: `${V.value || "Value"} as JSON`
+					label: `${I.value || "Value"} as JSON`
 				}, null, 8, ["model-value", "label"])]),
 				_: 1
-			}, 8, ["open", "title"])) : c("", !0)
+			}, 8, ["open", "title"])) : l("", !0)
 		], 64))], 2));
 	}
 });
 //#endregion
-export { M as default };
+export { A as default };

package/dist/lib/components/AcCheckBox.vue.d.ts

@@ -1,24 +1,38 @@
 import type { Option } from "./types";
 export interface Props<V> {
-    /** The checkboxes to render: `{ value, label, disabled? }`. */
-    options: Option<V>[];
+    /** The checkboxes to render: `{ value, label, description?, disabled? }`. A `description` shows in small muted text under the label. Leave it out for one checkbox bound with `v-model:checked`. */
+    options?: Option<V>[];
     /** Native `name` shared by every checkbox. */
     name?: string;
     /** Error text under the group. */
     errorMsg?: string;
+    /** Single checkbox: text beside the box. Leave it out for a bare box, and pass `aria-label` instead. */
+    label?: string;
+    /** Single checkbox: small muted text under the label. */
+    description?: string;
+    /** Single checkbox: can't be changed. */
+    disabled?: boolean;
+    /** Single checkbox: shows a dash for "some, but not all" (a select-all box). Ignored while checked. */
+    indeterminate?: boolean;
+    /** `small` is a 16px box for table cells and card headers; `normal` is 20px. */
+    size?: "small" | "normal";
 }
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props<T> & {
+        /** The checked options' values. Bind with `v-model`. */
         modelValue?: T[];
+        /** Single checkbox state, used when `options` is left out. Bind with `v-model:checked`. Old cloud-ui SelectionCheckbox `v-model`. */
+        checked?: boolean;
     }) & {
         "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
+        "onUpdate:checked"?: ((value: boolean) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: (event: "update:modelValue", value: T[]) => void;
+    emit: ((event: "update:modelValue", value: T[]) => void) & ((event: "update:checked", value: boolean) => void);
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };