@ac-design/design-system 1.0.3 → 2.1.0

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

@@ -1,33 +1,37 @@
-import e from "./AcBadge.js";
-import t from "./AcModal.js";
-import n from "./AcSkeleton.js";
-import r from "./AcTag.js";
+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 "./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 { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as ee, defineAsyncComponent as te, defineComponent as f, getCurrentInstance as ne, h as re, mergeProps as p, nextTick as ie, normalizeClass as m, normalizeStyle as ae, onBeforeUnmount as oe, onMounted as se, openBlock as h, ref as g, renderList as ce, resolveDynamicComponent as _, toDisplayString as v, unref as y, watch as b, withCtx as x, withModifiers as S } from "vue";
+import { Braces as le, Check as ue, LoaderCircle as de, Minus as fe, Tag as pe } from "@lucide/vue";
 //#region src/lib/components/AcCellValue.vue?vue&type=script&setup=true&lang.ts
-var ue = ["src"], de = {
+var me = ["src"], he = {
 	key: 1,
 	class: "text-muted"
-}, fe = ["tabindex"], pe = {
+}, ge = ["tabindex"], _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 = {
+	class: "inline-flex max-w-full items-center gap-1 rounded-4 bg-primary/10 px-1.5 py-1 text-xs leading-4 whitespace-nowrap text-primary-strong",
+	"data-ac-ds": "",
+	"data-testid": "ac-cell-value-chip"
+}, xe = { class: "truncate" }, Se = ["aria-expanded", "aria-label"], Ce = ["tabindex"], we = ["aria-label"], C = g(Date.now()), w = 0, T;
+function Te() {
+	w++ === 0 && (T = setInterval(() => C.value = Date.now(), 3e4));
 }
-function O() {
-	--E === 0 && clearInterval(D);
+function E() {
+	--w === 0 && clearInterval(T);
 }
-var k = /* @__PURE__ */ new WeakMap(), A;
-function be(e, t) {
+var D = /* @__PURE__ */ new WeakMap(), O;
+function Ee(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__*/ f({
 	__name: "AcCellValue",
 	props: {
 		value: { default: void 0 },
@@ -63,17 +67,21 @@ var M = /*@__PURE__*/ p({
 		loading: {
 			type: Boolean,
 			default: !1
+		},
+		plain: {
+			type: Boolean,
+			default: !1
 		}
 	},
-	setup(p) {
-		let E = p, D = /* @__PURE__ */ new Set([
+	setup(f) {
+		let w = f, T = /* @__PURE__ */ new Set([
 			"",
 			"<none>",
 			"<unknown>",
 			"<nil>",
 			"null",
 			"undefined"
-		]), k = {
+		]), D = {
 			primary: "primary",
 			secondary: "secondary",
 			info: "info",
@@ -81,6 +89,7 @@ var M = /*@__PURE__*/ p({
 			success: "success",
 			warning: "warning",
 			danger: "danger",
+			pending: "pending",
 			dark: "dark",
 			black: "dark",
 			light: "default",
@@ -88,72 +97,79 @@ 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}$/, De = /^\d{4}-\d{2}-\d{2}[T ]\d{2}:\d{2}/, Oe = new Intl.NumberFormat(void 0, { maximumFractionDigits: 2 }), ke = new Intl.NumberFormat(void 0, { maximumFractionDigits: 0 }), Ae = new Intl.DateTimeFormat(void 0, {
 			dateStyle: "medium",
 			timeStyle: "long"
-		}), we = f({
+		}), je = 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,
+		}), Me = ne()?.appContext.components.RouterLink, j = g(null), Ne = g(!1), M = g(!1), N = g(!1), P = g(!1), F = o(() => w.cell ? w.cell.data : w.value), I = o(() => w.title || w.column?.name || ""), L = o(() => w.tooltip || w.cell?.tooltip || ""), Pe = o(() => w.icon || w.cell?.icon || ""), Fe = o(() => w.bold || !!w.cell?.isBold || w.column?.format === "name"), R = o(() => w.align ?? w.column?.textAlign), z = o(() => {
+			let e = w.href || w.cell?.link || "";
+			return e && w.resolveLink ? w.resolveLink(e) : e;
+		}), Ie = o(() => /^https?:\/\//.test(z.value)), B = o(() => Me && z.value.startsWith("/") ? Me : "a"), V = o(() => z.value ? Ie.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 = o(() => {
+			let e = (w.color || w.cell?.color || "").trim().split(/\s+/)[0].replace(/^is-/, "");
+			return e ? D[e] ?? "default" : void 0;
+		}), U = o(() => G.value === "status" ? e(String(F.value)) : null), W = o(() => !!U.value?.transient), Le = o(() => H.value ? H.value : U.value ? W.value ? "primary" : U.value.tone : null), Re = o(() => !H.value && !!U.value?.hollow), G = o(() => {
+			let e = F.value;
+			if (Ke(e)) return "empty";
+			if (w.color || w.cell?.color) return "status";
+			if (w.type !== "auto") return w.type;
+			let t = typeof e == "object" ? void 0 : w.column?.type;
+			return t && t !== "auto" && t !== "object" ? t : typeof e == "boolean" ? "boolean" : typeof e == "number" ? "number" : Array.isArray(e) ? "array" : typeof e == "object" ? qe(e) ? "labels" : "object" : typeof e == "string" && De.test(e) && !Number.isNaN(Date.parse(e)) ? "date" : "string";
+		}), K = o(() => G.value === "date" ? Je(F.value) : null), q = o(() => {
+			let e = F.value;
+			switch (G.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)}${w.unit}` : `${(G.value === "integer" ? ke : Oe).format(t)}${w.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 "date": return K.value ? w.relative ? Ye(K.value, C.value) : Ae.format(K.value) : String(e);
+				case "object": return Ze(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]) => ({
+		}), J = o(() => K.value ? L.value || (w.relative ? Ae.format(K.value) : Ye(K.value, C.value)) : L.value), ze = o(() => L.value || (Ne.value ? q.value : "")), Y = o(() => {
+			let e = F.value;
+			return G.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);
+			})) : G.value === "array" ? e.map((e) => {
+				let t = Qe(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;
+		}), Be = o(() => {
+			if (w.emptyText !== "—") return w.emptyText;
+			let e = F.value, t = typeof e == "object" && !!e && !Array.isArray(e) && !(e instanceof Date);
+			return w.type === "labels" || w.column?.type === "labels" || t && /^(labels?|tags?)$/i.test(I.value) ? "No labels" : w.emptyText;
+		}), Ve = o(() => M.value ? Y.value : Y.value.slice(0, w.maxItems)), X = o(() => Y.value.length - Math.min(Y.value.length, w.maxItems)), He = o(() => G.value === "object" || G.value === "array" && F.value.some((e) => typeof e == "object" && !!e)), Ue = o(() => N.value ? JSON.stringify(F.value, null, 2) : ""), Z = o(() => G.value === "number" || G.value === "integer" || G.value === "string" && A.test(q.value)), Q = o(() => O[Le.value ?? "default"]), We = o(() => w.plain ? "rounded-4" : w.column?.shape === "Rectangle" ? "rounded-6" : "rounded-full"), Ge = o(() => G.value === "labels" ? "labels" : "items");
+		function Ke(e) {
+			return e == null ? !0 : typeof e == "string" ? T.has(e.trim()) : Array.isArray(e) ? e.length === 0 : typeof e == "object" && Object.keys(e).length === 0;
 		}
-		function Ie(e) {
+		function qe(e) {
 			return Object.values(e).every((e) => e === null || [
 				"string",
 				"number",
@@ -163,14 +179,14 @@ var M = /*@__PURE__*/ p({
 		function $(e) {
 			return e === !0 || String(e).toLowerCase() === "true";
 		}
-		function Le(e) {
+		function Je(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 Je(Number(e));
 			let t = typeof e == "string" ? Date.parse(e) : NaN;
 			return Number.isNaN(t) ? null : new Date(t);
 		}
-		function Re(e, t) {
+		function Ye(e, t) {
 			let n = Math.round((t - e.getTime()) / 1e3), r = Math.abs(n);
 			if (r < 45) return "just now";
 			let i = [
@@ -184,198 +200,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 Xe(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 Ze(e) {
+			return Object.entries(e).map(([e, t]) => `${e}: ${Xe(t)}`).join(", ");
 		}
-		function Ve(e) {
+		function Qe(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 $e(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 et() {
+			let e = j.value;
+			Ne.value = !!e && e.scrollWidth > e.clientWidth + 1;
 		}
-		function We() {
-			R.value = !0, z.value = !0;
+		function tt() {
+			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", {
-			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"
+		return b(j, (e, t) => {
+			t && k(t), e && Ee(e, et);
+		}), b(q, () => ie(et)), b(() => G.value === "date", (e, t) => {
+			e && !t ? Te() : !e && t && E();
+		}), se(() => {
+			G.value === "date" && Te();
+		}), oe(() => {
+			G.value === "date" && E(), j.value && k(j.value);
+		}), (e, o) => (h(), l("span", {
+			class: m(["max-w-full min-w-0 items-center gap-1.5 align-middle", [
+				R.value ? "flex w-full" : "inline-flex",
+				R.value === "center" && "justify-center",
+				R.value === "right" && "justify-end",
+				Fe.value && "font-semibold text-heading"
 			]]),
 			"data-ac-ds": "",
 			"data-testid": "ac-cell-value"
-		}, [p.loading ? (_(), s(n, {
+		}, [f.loading ? (h(), s(r, {
 			key: 0,
 			width: "96px"
-		})) : (_(), l(a, { key: 1 }, [
-			Te.value ? (_(), l("img", {
+		})) : (h(), l(a, { key: 1 }, [
+			Pe.value ? (h(), l("img", {
 				key: 0,
-				src: Te.value,
+				src: Pe.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, me)) : c("", !0),
+			G.value === "empty" ? (h(), l("span", he, v(Be.value), 1)) : G.value === "status" && V.value ? (h(), s(_(B.value), p({ key: 2 }, V.value, {
+				class: ["inline-flex focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", [We.value, f.plain && "underline-offset-2 hover:underline"]],
+				onClick: o[0] ||= S(() => {}, ["stop"])
 			}), {
-				default: C(() => [d(e, {
-					label: Y.value,
-					color: Oe.value ?? "default",
+				default: x(() => [f.plain ? (h(), l("span", {
+					key: 0,
+					class: m(["inline-flex items-center gap-1.5 text-xs font-medium whitespace-nowrap", Q.value[1]])
+				}, [W.value ? (h(), s(y(de), {
+					key: 0,
+					class: "size-3 shrink-0 motion-safe:animate-spin",
+					"aria-hidden": "true"
+				})) : (h(), l("span", {
+					key: 1,
+					class: m(["size-1.5 shrink-0 rounded-full", Re.value ? "border border-muted bg-transparent" : Q.value[0]]),
+					"aria-hidden": "true"
+				}, null, 2)), d(v(q.value), 1)], 2)) : (h(), s(t, {
+					key: 1,
+					status: String(F.value),
+					label: q.value,
+					color: H.value,
 					variant: "light",
-					rounded: p.column?.shape !== "Rectangle",
+					rounded: f.column?.shape !== "Rectangle",
 					dot: ""
 				}, null, 8, [
+					"status",
 					"label",
 					"color",
 					"rounded"
-				])]),
+				]))]),
 				_: 1
-			}, 16)) : q.value === "status" ? (_(), s(i, {
+			}, 16, ["class"])) : G.value === "status" ? (h(), s(i, {
 				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: x(() => [u("span", {
+					tabindex: L.value ? 0 : void 0,
+					class: m(["inline-flex focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", We.value])
+				}, [f.plain ? (h(), l("span", {
+					key: 0,
+					class: m(["inline-flex items-center gap-1.5 text-xs font-medium whitespace-nowrap", Q.value[1]])
+				}, [W.value ? (h(), s(y(de), {
+					key: 0,
+					class: "size-3 shrink-0 motion-safe:animate-spin",
+					"aria-hidden": "true"
+				})) : (h(), l("span", {
+					key: 1,
+					class: m(["size-1.5 shrink-0 rounded-full", Re.value ? "border border-muted bg-transparent" : Q.value[0]]),
+					"aria-hidden": "true"
+				}, null, 2)), d(v(q.value), 1)], 2)) : (h(), s(t, {
+					key: 1,
+					status: String(F.value),
+					label: q.value,
+					color: H.value,
 					variant: "light",
-					rounded: p.column?.shape !== "Rectangle",
+					rounded: f.column?.shape !== "Rectangle",
 					dot: ""
 				}, null, 8, [
+					"status",
 					"label",
 					"color",
 					"rounded"
-				])], 8, fe)]),
+				]))], 10, ge)]),
 				_: 1
-			}, 8, ["content"])) : q.value === "boolean" ? (_(), l("span", pe, [$(B.value) ? (_(), s(x(ce), {
+			}, 8, ["content"])) : G.value === "boolean" ? (h(), l("span", _e, [$(F.value) ? (h(), s(y(ue), {
 				key: 0,
-				class: "size-3.5 text-success",
+				class: "size-3.5 text-success-strong",
 				"aria-hidden": "true"
-			})) : (_(), s(x(le), {
+			})) : (h(), s(y(fe), {
 				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, {
+			})), u("span", { class: m(!$(F.value) && "text-muted") }, v(q.value), 3)])) : G.value === "date" ? (h(), s(i, {
 				key: 5,
-				content: X.value
+				content: J.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: x(() => [V.value ? (h(), s(_(B.value), p({ 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: o[1] ||= S(() => {}, ["stop"])
 				}), {
-					default: C(() => [u("time", { datetime: J.value?.toISOString() }, b(Y.value), 9, me)]),
+					default: x(() => [u("time", { datetime: K.value?.toISOString() }, v(q.value), 9, ve)]),
 					_: 1
-				}, 16)) : (_(), l("time", {
+				}, 16)) : (h(), l("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: K.value?.toISOString(),
+					tabindex: J.value ? 0 : void 0,
+					class: m(["whitespace-nowrap tabular-nums focus-visible:rounded-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", J.value && "cursor-default decoration-border-dark decoration-dotted underline-offset-4 hover:underline"])
+				}, v(q.value), 11, ye))]),
 				_: 1
-			}, 8, ["content"])) : q.value === "labels" || q.value === "array" ? (_(), l("span", {
+			}, 8, ["content"])) : G.value === "labels" || G.value === "array" ? (h(), l("span", {
 				key: 6,
-				class: h(["flex w-max min-w-0 items-center gap-1", L.value ? "flex-wrap" : "flex-nowrap"]),
-				style: g({ maxWidth: p.maxWidth })
-			}, [(_(!0), l(a, null, oe(Ae.value, (e, t) => (_(), s(i, {
+				class: m(["flex w-max min-w-0 items-center gap-2", M.value ? "flex-wrap" : "flex-nowrap"]),
+				style: ae({ maxWidth: f.maxWidth })
+			}, [(h(!0), l(a, null, ce(Ve.value, (e, t) => (h(), s(i, {
 				key: `${e.text}-${t}`,
-				content: e.text.length > 28 && !L.value ? e.text : "",
-				class: h(!L.value && "max-w-48 min-w-0")
+				content: e.text.length > 28 && !M.value ? e.text : "",
+				class: m(!M.value && "max-w-48 min-w-0")
 			}, {
-				default: C(() => [e.key ? (_(), s(r, {
+				default: x(() => [u("span", be, [G.value === "labels" ? (h(), s(y(pe), {
 					key: 0,
-					"key-label": e.key,
-					"value-label": e.value
-				}, null, 8, ["key-label", "value-label"])) : (_(), s(r, {
-					key: 1,
-					label: e.value
-				}, null, 8, ["label"]))]),
+					class: "size-3 shrink-0",
+					"aria-hidden": "true"
+				})) : c("", !0), u("span", xe, v(e.text), 1)])]),
 				_: 2
-			}, 1032, ["content", "class"]))), 128)), Q.value > 0 ? (_(), l("button", {
+			}, 1032, ["content", "class"]))), 128)), X.value > 0 ? (h(), l("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)], 6)) : (_(), s(i, {
+				class: "inline-flex shrink-0 cursor-pointer items-center rounded-4 border border-dashed border-primary/40 px-1.5 py-1 text-xs leading-4 font-medium whitespace-nowrap text-primary-strong underline-offset-2 transition-colors duration-200 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+				"aria-expanded": M.value,
+				"aria-label": M.value ? `Show fewer ${Ge.value}` : `Show ${X.value} more ${Ge.value}`,
+				onClick: o[2] ||= S((e) => M.value = !M.value, ["stop"])
+			}, v(M.value ? "Show less" : `+${X.value} more`), 9, Se)) : c("", !0)], 6)) : (h(), s(i, {
 				key: 7,
-				content: ke.value,
+				content: ze.value,
 				class: "min-w-0"
 			}, {
-				default: C(() => [K.value ? (_(), s(y(G.value), m({
+				default: x(() => [V.value ? (h(), s(_(B.value), p({
 					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"]],
-					style: { maxWidth: p.maxWidth },
-					onClick: f[3] ||= w(() => {}, ["stop"])
+					ref: $e
+				}, 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", [(f.mono || G.value === "object") && "font-mono text-xs", Z.value && "tabular-nums"]],
+					style: { maxWidth: f.maxWidth },
+					onClick: o[3] ||= S(() => {}, ["stop"])
 				}), {
-					default: C(() => [ee(b(Y.value), 1)]),
+					default: x(() => [d(v(q.value), 1)]),
 					_: 1
-				}, 16, ["class", "style"])) : (_(), l("span", {
+				}, 16, ["class", "style"])) : (h(), l("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: $e,
+					tabindex: ze.value ? 0 : void 0,
+					class: m(["block truncate focus-visible:rounded-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", [
+						(f.mono || G.value === "object") && "font-mono text-xs",
+						Z.value && "tabular-nums",
+						G.value === "object" && "text-muted"
 					]]),
-					style: g({ maxWidth: p.maxWidth })
-				}, b(Y.value), 15, _e))]),
+					style: ae({ maxWidth: f.maxWidth })
+				}, v(q.value), 15, Ce))]),
 				_: 1
 			}, 8, ["content"])),
-			je.value ? (_(), s(i, {
+			He.value ? (h(), s(i, {
 				key: 8,
 				content: "View as JSON"
 			}, {
-				default: C(() => [u("button", {
+				default: x(() => [u("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: S(tt, ["stop"])
+				}, [ee(y(le), {
 					class: "size-3.5",
 					"aria-hidden": "true"
-				})], 8, ve)]),
+				})], 8, we)]),
 				_: 1
 			})) : c("", !0),
-			R.value ? (_(), s(t, {
+			N.value ? (h(), s(n, {
 				key: 9,
-				open: z.value,
-				"onUpdate:open": f[4] ||= (e) => z.value = e,
-				title: V.value || "Value",
+				open: P.value,
+				"onUpdate:open": o[4] ||= (e) => P.value = e,
+				title: I.value || "Value",
 				size: "medium"
 			}, {
-				default: C(() => [d(x(we), {
-					"model-value": Me.value,
+				default: x(() => [ee(y(je), {
+					"model-value": Ue.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)
@@ -383,4 +424,4 @@ var M = /*@__PURE__*/ p({
 	}
 });
 //#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 an 18px box for table cells and card headers; `normal` is a 24px box for forms. */
+    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>>;
 };