@ac-design/design-system 2.3.0 → 2.4.0

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

@@ -1,41 +1,52 @@
-import e from "./AcCellValue.js";
-import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, mergeModels as u, normalizeClass as d, normalizeStyle as f, openBlock as p, renderList as m, renderSlot as h, resolveDynamicComponent as g, toDisplayString as _, unref as v, useId as ee, useModel as y, withModifiers as b } from "vue";
-import { Check as x, ChevronDown as te, ChevronRight as ne, ChevronUp as re, Minus as S } from "@lucide/vue";
+import e from "./AcTooltip.js";
+import t from "./AcCellValue.js";
+import n from "./AcPagination.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, getCurrentInstance as f, mergeModels as p, mergeProps as ee, normalizeClass as m, normalizeStyle as h, openBlock as g, renderList as _, renderSlot as v, resolveDynamicComponent as y, toDisplayString as b, unref as x, useId as te, useModel as S, useSlots as ne, watch as re, withCtx as C, withModifiers as w } from "vue";
+import { Check as T, ChevronDown as ie, ChevronRight as ae, ChevronUp as oe, Minus as se } from "@lucide/vue";
 //#region src/lib/components/AcTable.vue?vue&type=script&setup=true&lang.ts
-var C = { class: "ac-scrollbar" }, w = { class: "w-full border-separate border-spacing-0 text-base" }, T = { class: "relative flex size-[18px]" }, E = [
+var ce = { class: "ac-scrollbar" }, le = { class: "w-full border-separate border-spacing-0 text-base" }, ue = { class: "relative flex size-[18px]" }, de = [
 	"checked",
 	"indeterminate",
 	"disabled"
-], ie = ["aria-sort", "onClick"], ae = { class: "inline-flex items-center gap-2" }, oe = {
+], fe = ["aria-sort", "onClick"], pe = { class: "inline-flex items-center gap-2" }, me = {
 	key: 0,
 	class: "h-11 border-b border-border pl-4 [tr:last-child_&]:border-0"
-}, se = {
+}, he = {
 	key: 1,
 	class: "h-11 border-b border-border pl-4 [tr:last-child_&]:border-0"
-}, ce = [
+}, ge = {
+	key: 2,
+	class: "h-11 border-b border-border [tr:last-child_&]:border-0"
+}, _e = [
 	"aria-current",
 	"aria-disabled",
 	"onClick"
-], le = [
+], ve = [
 	"aria-expanded",
 	"aria-controls",
 	"aria-label",
 	"onClick"
-], ue = { class: "relative flex size-[18px]" }, de = [
+], ye = { class: "relative flex size-[18px]" }, be = [
 	"checked",
 	"disabled",
 	"aria-label",
 	"onChange"
-], fe = {
+], xe = {
+	key: 2,
+	class: "flex min-w-0 items-center"
+}, Se = {
+	key: 1,
+	class: "block truncate"
+}, Ce = {
 	key: 0,
 	class: "group",
 	"data-testid": "ac-table-detail"
-}, pe = ["colspan"], me = ["id", "aria-label"], he = {
+}, we = ["colspan"], Te = ["id", "aria-label"], Ee = {
 	key: 0,
 	class: "px-6 py-12 text-center text-muted"
-}, D = "border-border", O = "peer size-[18px] cursor-pointer appearance-none rounded-4 border border-muted/70 bg-background align-middle transition-colors duration-150 hover:border-primary/60 checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", k = /*@__PURE__*/ l({
+}, E = "border-border", D = "peer size-[18px] cursor-pointer appearance-none rounded-4 border border-muted/70 bg-background align-middle transition-colors duration-150 hover:border-primary/60 checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", O = /*@__PURE__*/ d({
 	__name: "AcTable",
-	props: /*@__PURE__*/ u({
+	props: /*@__PURE__*/ p({
 		columns: {},
 		rows: {},
 		rowKey: { default: "id" },
@@ -92,183 +103,249 @@ var C = { class: "ac-scrollbar" }, w = { class: "w-full border-separate border-s
 		resolveLink: {
 			type: Function,
 			default: void 0
-		}
+		},
+		search: { default: void 0 },
+		pageSize: { default: void 0 },
+		relaxed: {
+			type: Boolean,
+			default: !1
+		},
+		truncate: { default: void 0 },
+		placeholder: { default: "" },
+		placeholderFor: { default: "empty" }
 	}, {
 		selected: { default: () => [] },
 		selectedModifiers: {},
 		expanded: { default: () => [] },
 		expandedModifiers: {},
+		page: { default: 1 },
+		pageModifiers: {},
 		sortBy: { default: null },
 		sortByModifiers: {}
 	}),
-	emits: /*@__PURE__*/ u(["row-click", "sort"], [
+	emits: /*@__PURE__*/ p(["row-click", "sort"], [
 		"update:selected",
 		"update:expanded",
+		"update:page",
 		"update:sortBy"
 	]),
-	setup(l, { emit: u }) {
-		let k = l, A = y(l, "selected"), j = y(l, "expanded"), M = u, N = ee(), P = y(l, "sortBy"), F = n(() => P.value?.key ?? ""), I = n(() => P.value?.mode ?? "asc"), L = (e) => {
+	setup(d, { emit: p }) {
+		let O = d, k = S(d, "selected"), A = S(d, "expanded"), j = S(d, "page"), M = p, N = ne(), P = f()?.appContext.components.RouterLink, De = te(), F = S(d, "sortBy"), I = i(() => F.value?.key ?? ""), L = i(() => F.value?.mode ?? "asc"), Oe = (e) => {
 			if (!e.sortable) return;
-			let t = F.value === e.key && I.value === "asc" ? "desc" : "asc";
-			P.value = {
+			let t = I.value === e.key && L.value === "asc" ? "desc" : "asc";
+			F.value = {
 				key: e.key,
 				mode: t
 			}, M("sort", e.key, t);
-		}, ge = n(() => {
-			if (!F.value || k.manualSort) return k.rows;
-			let e = F.value, t = I.value === "asc" ? 1 : -1;
-			return [...k.rows].sort((n, r) => String(z(n[e]) ?? "").localeCompare(String(z(r[e]) ?? ""), void 0, { numeric: !0 }) * t);
+		}, R = i(() => {
+			let e = O.search ?? [];
+			return e.length ? O.rows.filter((t) => e.every((e) => {
+				let n = W(t[e.key]);
+				return n != null && String(n).toLowerCase().includes(e.searchText.toLowerCase());
+			})) : O.rows;
+		}), z = i(() => {
+			if (!I.value || O.manualSort) return R.value;
+			let e = I.value, t = L.value === "asc" ? 1 : -1, n = O.columns.find((t) => t.key === e)?.sortType;
+			return n ? [...R.value].sort((r, i) => {
+				let a = W(r[e]), o = W(i[e]);
+				return a == null ? 1 : o == null ? -1 : Ae(a, o, n) * t;
+			}) : [...R.value].sort((n, r) => String(W(n[e]) ?? "").localeCompare(String(W(r[e]) ?? ""), void 0, { numeric: !0 }) * t);
+		}), B = i(() => O.pageSize ? Math.max(1, Math.ceil(z.value.length / O.pageSize)) : 1), V = i(() => Math.min(Math.max(1, j.value), B.value)), H = i(() => {
+			if (!O.pageSize) return z.value;
+			let e = (V.value - 1) * O.pageSize;
+			return z.value.slice(e, e + O.pageSize);
 		});
-		function R(e) {
+		function U(e) {
 			return typeof e == "object" && !!e && !Array.isArray(e) && "data" in e;
 		}
-		function z(e) {
-			return R(e) ? e.sort ?? e.data : e;
+		function W(e) {
+			return U(e) ? e.sort ?? e.data : e;
+		}
+		function ke(e) {
+			return O.placeholderFor === "falsy" ? !e : e === null || e === "";
 		}
-		let B = (e) => !!k.rowDisabled?.(e), V = (e) => !B(e) && (!k.rowSelectable || k.rowSelectable(e)), H = n(() => k.rows.filter(V).map((e) => e[k.rowKey])), U = n(() => new Set(A.value)), W = n(() => H.value.length > 0 && H.value.every((e) => U.value.has(e))), G = n(() => !W.value && H.value.some((e) => U.value.has(e)));
-		function _e() {
-			let e = new Set(H.value);
-			A.value = W.value ? A.value.filter((t) => !e.has(t)) : [...A.value, ...H.value.filter((e) => !U.value.has(e))];
+		function Ae(e, t, n) {
+			return n === "number" ? Number(e) - Number(t) : n === "date" ? new Date(String(e)).getTime() - new Date(String(t)).getTime() : String(e).toLowerCase().localeCompare(String(t).toLowerCase());
 		}
-		function ve(e) {
-			let t = e[k.rowKey];
-			A.value = U.value.has(t) ? A.value.filter((e) => e !== t) : [...A.value, t];
+		let G = (e) => !!O.rowDisabled?.(e), je = (e) => !G(e) && (!O.rowSelectable || O.rowSelectable(e)), K = i(() => H.value.filter(je).map((e) => e[O.rowKey])), q = i(() => new Set(k.value)), J = i(() => K.value.length > 0 && K.value.every((e) => q.value.has(e))), Me = i(() => !J.value && K.value.some((e) => q.value.has(e)));
+		function Ne() {
+			let e = new Set(K.value);
+			k.value = J.value ? k.value.filter((t) => !e.has(t)) : [...k.value, ...K.value.filter((e) => !q.value.has(e))];
 		}
-		let K = n(() => new Set(j.value)), q = (e) => k.expandable && K.value.has(e[k.rowKey]), J = (e) => !k.canExpand || k.canExpand(e), Y = (e) => `${N}-detail-${String(e[k.rowKey])}`, ye = n(() => k.columns.length + +!!k.selectable + +!!k.expandable);
-		function X(e) {
-			let t = e[k.rowKey];
-			j.value = K.value.has(t) ? j.value.filter((e) => e !== t) : [...j.value, t];
+		function Pe(e) {
+			let t = e[O.rowKey];
+			k.value = q.value.has(t) ? k.value.filter((e) => e !== t) : [...k.value, t];
+		}
+		let Fe = i(() => new Set(A.value)), Y = (e) => O.expandable && Fe.value.has(e[O.rowKey]), Ie = (e) => !O.canExpand || O.canExpand(e), Le = (e) => `${De}-detail-${String(e[O.rowKey])}`, X = i(() => !!N.actions), Re = i(() => O.columns.length + +!!O.selectable + +!!O.expandable + +!!X.value);
+		function ze(e) {
+			let t = e[O.rowKey];
+			A.value = Fe.value.has(t) ? A.value.filter((e) => e !== t) : [...A.value, t];
 		}
 		function Z(e) {
-			let t = e[k.columns[0]?.key ?? ""], n = R(t) ? t.data : t;
-			return typeof n == "string" || typeof n == "number" ? n : String(e[k.rowKey]);
+			let t = e[O.columns[0]?.key ?? ""], n = U(t) ? t.data : t;
+			return typeof n == "string" || typeof n == "number" ? n : String(e[O.rowKey]);
+		}
+		let Be = i(() => O.expandable ? "py-3 [tbody_&]:h-[51px]" : "py-3"), Ve = (e) => e.wrap ?? O.relaxed ? "whitespace-normal" : "whitespace-nowrap";
+		function He(e) {
+			return !!(e.link || O.truncate || O.placeholder || N[`before-${e.key}`]);
+		}
+		function Ue(e) {
+			let t = String(e ?? "");
+			return O.truncate && t.length > O.truncate ? `${t.slice(0, O.truncate)}...` : t;
+		}
+		function We(e, t) {
+			let n = e[t.link] || t.linkFallback;
+			return typeof n != "string" || !n ? {
+				is: "span",
+				attrs: {}
+			} : P && !/^https?:/.test(n) ? {
+				is: P,
+				attrs: { to: n }
+			} : {
+				is: "a",
+				attrs: { href: n }
+			};
 		}
-		let Q = (e) => ({
+		let Ge = i(() => ["overflow-hidden bg-surface", !O.flat && "rounded-10 border border-border"]), Q = (e) => ({
 			left: "text-left",
 			center: "text-center",
 			right: "text-right"
 		})[e.align ?? "left"], $ = (e) => e.compact ? "px-2" : "px-6";
-		return (n, u) => (p(), a("div", {
-			class: d(["w-full overflow-hidden bg-surface", !l.flat && "rounded-10 border border-border"]),
+		return re(() => `${JSON.stringify(O.search?.map((e) => [e.key, e.searchText]) ?? [])}|${I.value}|${L.value}`, () => {
+			O.pageSize && (j.value = 1);
+		}), (i, f) => (g(), s("div", {
+			class: m(["w-full", !d.pageSize && Ge.value]),
 			"data-ac-ds": "",
 			"data-testid": "ac-table"
-		}, [o("div", C, [o("table", w, [o("thead", null, [o("tr", null, [
-			l.expandable ? (p(), a("th", {
+		}, [c("div", { class: m(!!d.pageSize && Ge.value) }, [c("div", ce, [c("table", le, [c("thead", null, [c("tr", null, [
+			d.expandable ? (g(), s("th", {
 				key: 0,
 				scope: "col",
-				class: d(["h-11 w-10 border-b bg-surface-sunken/50 pr-0 pl-4", [D, !l.flat && "first:rounded-tl-10"]])
-			}, [...u[2] ||= [o("span", { class: "sr-only" }, "Expand", -1)]], 2)) : i("", !0),
-			l.selectable ? (p(), a("th", {
+				class: m(["h-11 w-10 border-b bg-surface-sunken/50 pr-0 pl-4", [E, !d.flat && "first:rounded-tl-10"]])
+			}, [...f[4] ||= [c("span", { class: "sr-only" }, "Expand", -1)]], 2)) : o("", !0),
+			d.selectable ? (g(), s("th", {
 				key: 1,
 				scope: "col",
-				class: d(["h-11 w-10 border-b bg-surface-sunken/50 pr-1 pl-4", [D, !l.flat && "first:rounded-tl-10"]])
-			}, [o("span", T, [o("input", {
+				class: m(["h-11 w-10 border-b bg-surface-sunken/50 pr-1 pl-4", [E, !d.flat && "first:rounded-tl-10"]])
+			}, [c("span", ue, [c("input", {
 				type: "checkbox",
-				class: d(O),
-				checked: W.value,
-				indeterminate: G.value,
-				disabled: l.loading || !H.value.length,
+				class: m(D),
+				checked: J.value,
+				indeterminate: Me.value,
+				disabled: d.loading || !K.value.length,
 				"aria-label": "Select all rows",
-				onChange: _e
-			}, null, 40, E), (p(), r(g(G.value ? v(S) : v(x)), {
+				onChange: Ne
+			}, null, 40, de), (g(), a(y(Me.value ? x(se) : x(T)), {
 				class: "pointer-events-none absolute inset-0 m-auto size-3.5 text-white opacity-0 peer-checked:opacity-100 peer-indeterminate:opacity-100",
 				"stroke-width": 3,
 				"aria-hidden": "true"
-			}))])], 2)) : i("", !0),
-			(p(!0), a(t, null, m(l.columns, (e) => (p(), a("th", {
+			}))])], 2)) : o("", !0),
+			(g(!0), s(r, null, _(d.columns, (e) => (g(), s("th", {
 				key: e.key,
 				scope: "col",
-				class: d(["h-11 border-b bg-surface-sunken/50 text-base font-semibold whitespace-nowrap text-muted", [
-					D,
-					!l.flat && "first:rounded-tl-10 last:rounded-tr-10",
+				class: m(["h-11 border-b bg-surface-sunken/50 text-base font-semibold whitespace-nowrap text-muted", [
+					E,
+					!d.flat && "first:rounded-tl-10 last:rounded-tr-10",
 					$(e),
 					Q(e),
+					d.relaxed && "py-3",
 					e.class,
 					e.sortable && "cursor-pointer select-none transition-colors hover:text-heading"
 				]]),
-				style: f(e.width ? { width: e.width } : void 0),
-				"aria-sort": F.value === e.key ? I.value === "asc" ? "ascending" : "descending" : void 0,
-				onClick: (t) => L(e)
-			}, [o("span", ae, [h(n.$slots, `header-${e.key}`, { column: e }, () => [s(_(e.label), 1)]), e.sortable ? (p(), r(g(F.value === e.key && I.value === "asc" ? v(re) : v(te)), {
+				style: h(e.width ? { width: e.width } : void 0),
+				"aria-sort": I.value === e.key ? L.value === "asc" ? "ascending" : "descending" : void 0,
+				onClick: (t) => Oe(e)
+			}, [c("span", pe, [v(i.$slots, `header-${e.key}`, { column: e }, () => [l(b(e.label), 1)]), e.sortable ? (g(), a(y(I.value === e.key && L.value === "asc" ? x(oe) : x(ie)), {
 				key: 0,
-				class: d(["size-4 shrink-0", F.value === e.key ? "text-primary-strong" : "text-muted"]),
+				class: m(["size-4 shrink-0", I.value === e.key ? "text-primary-strong" : "text-muted"]),
 				"aria-hidden": "true"
-			}, null, 8, ["class"])) : i("", !0)])], 14, ie))), 128))
-		])]), o("tbody", null, [l.loading ? (p(!0), a(t, { key: 0 }, m(l.loaderRows, (e) => (p(), a("tr", { key: `loader-${e}` }, [
-			l.expandable ? (p(), a("td", oe)) : i("", !0),
-			l.selectable ? (p(), a("td", se)) : i("", !0),
-			(p(!0), a(t, null, m(l.columns, (t, n) => (p(), a("td", {
+			}, null, 8, ["class"])) : o("", !0)])], 14, fe))), 128)),
+			X.value ? (g(), s("th", {
+				key: 2,
+				scope: "col",
+				class: m(["h-11 w-20 border-b bg-surface-sunken/50 px-2 lg:w-[120px]", [
+					E,
+					!d.flat && "last:rounded-tr-10",
+					d.relaxed && "py-3"
+				]])
+			}, [...f[5] ||= [c("span", { class: "sr-only" }, "Actions", -1)]], 2)) : o("", !0)
+		])]), c("tbody", null, [d.loading ? (g(!0), s(r, { key: 0 }, _(d.loaderRows, (e) => (g(), s("tr", { key: `loader-${e}` }, [
+			d.expandable ? (g(), s("td", me)) : o("", !0),
+			d.selectable ? (g(), s("td", he)) : o("", !0),
+			(g(!0), s(r, null, _(d.columns, (t, n) => (g(), s("td", {
 				key: t.key,
-				class: d(["h-11 border-b border-border [tr:last-child_&]:border-0", [$(t), t.class]])
-			}, [o("span", {
+				class: m(["h-11 border-b border-border [tr:last-child_&]:border-0", [$(t), t.class]])
+			}, [c("span", {
 				class: "block h-2.5 animate-pulse rounded-full bg-surface-sunken",
-				style: f({ width: `${50 + (e * 17 + n * 23) % 40}%` })
-			}, null, 4)], 2))), 128))
-		]))), 128)) : (p(!0), a(t, { key: 1 }, m(ge.value, (f, g) => (p(), a(t, { key: String(f[l.rowKey] ?? g) }, [o("tr", {
+				style: h({ width: `${50 + (e * 17 + n * 23) % 40}%` })
+			}, null, 4)], 2))), 128)),
+			X.value ? (g(), s("td", ge)) : o("", !0)
+		]))), 128)) : (g(!0), s(r, { key: 1 }, _(H.value, (n, p) => (g(), s(r, { key: String(n[d.rowKey] ?? p) }, [c("tr", {
 			"data-testid": "ac-table-row",
-			class: d(["group transition-colors duration-150", [
-				l.clickable && "cursor-pointer hover:bg-surface-sunken/40",
-				(l.rowActive?.(f) || l.selectable && U.value.has(f[l.rowKey])) && "bg-primary/5",
-				l.rowActive?.(f) && "shadow-[inset_0_0_0_1px_var(--color-primary)]",
-				B(f) && "pointer-events-none cursor-not-allowed opacity-50",
-				l.rowClass?.(f)
+			class: m(["group transition-colors duration-150", [
+				d.clickable && "cursor-pointer hover:bg-surface-sunken/40",
+				(d.rowActive?.(n) || d.selectable && q.value.has(n[d.rowKey])) && "bg-primary/5",
+				d.rowActive?.(n) && "shadow-[inset_0_0_0_1px_var(--color-primary)]",
+				G(n) && "pointer-events-none cursor-not-allowed opacity-50",
+				d.rowClass?.(n)
 			]]),
-			"aria-current": l.rowActive?.(f) ? "true" : void 0,
-			"aria-disabled": B(f) || void 0,
-			onClick: (e) => l.clickable && !B(f) && M("row-click", f)
+			"aria-current": d.rowActive?.(n) ? "true" : void 0,
+			"aria-disabled": G(n) || void 0,
+			onClick: (e) => d.clickable && !G(n) && M("row-click", n)
 		}, [
-			l.expandable ? (p(), a("td", {
+			d.expandable ? (g(), s("td", {
 				key: 0,
 				class: "h-11 w-10 border-b border-border pr-0 pl-4 group-last:border-0",
-				onClick: u[0] ||= b(() => {}, ["stop"])
-			}, [J(f) ? (p(), a("button", {
+				onClick: f[0] ||= w(() => {}, ["stop"])
+			}, [Ie(n) ? (g(), s("button", {
 				key: 0,
 				type: "button",
 				class: "inline-flex size-7 cursor-pointer items-center justify-center rounded-8 text-muted transition-colors hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
-				"aria-expanded": q(f),
-				"aria-controls": Y(f),
-				"aria-label": `${q(f) ? "Collapse" : "Expand"} ${Z(f)}`,
+				"aria-expanded": Y(n),
+				"aria-controls": Le(n),
+				"aria-label": `${Y(n) ? "Collapse" : "Expand"} ${Z(n)}`,
 				"data-testid": "ac-table-expand",
-				onClick: (e) => X(f)
-			}, [c(v(ne), {
-				class: d(["size-4 transition-transform duration-150 motion-reduce:transition-none", q(f) && "rotate-90"]),
+				onClick: (e) => ze(n)
+			}, [u(x(ae), {
+				class: m(["size-4 transition-transform duration-150 motion-reduce:transition-none", Y(n) && "rotate-90"]),
 				"aria-hidden": "true"
-			}, null, 8, ["class"])], 8, le)) : i("", !0)])) : i("", !0),
-			l.selectable ? (p(), a("td", {
+			}, null, 8, ["class"])], 8, ve)) : o("", !0)])) : o("", !0),
+			d.selectable ? (g(), s("td", {
 				key: 1,
 				class: "h-11 w-10 border-b border-border pr-1 pl-4 group-last:border-0",
-				onClick: u[1] ||= b(() => {}, ["stop"])
-			}, [o("span", ue, [o("input", {
+				onClick: f[1] ||= w(() => {}, ["stop"])
+			}, [c("span", ye, [c("input", {
 				type: "checkbox",
-				class: d(O),
-				checked: U.value.has(f[l.rowKey]),
-				disabled: !V(f),
-				"aria-label": `Select ${Z(f)}`,
-				onChange: (e) => ve(f)
-			}, null, 40, de), c(v(x), {
+				class: m(D),
+				checked: q.value.has(n[d.rowKey]),
+				disabled: !je(n),
+				"aria-label": `Select ${Z(n)}`,
+				onChange: (e) => Pe(n)
+			}, null, 40, be), u(x(T), {
 				class: "pointer-events-none absolute inset-0 m-auto size-3.5 text-white opacity-0 peer-checked:opacity-100",
 				"stroke-width": 3,
 				"aria-hidden": "true"
-			})])])) : i("", !0),
-			(p(!0), a(t, null, m(l.columns, (i) => (p(), a("td", {
-				key: i.key,
-				class: d(["h-11 border-b border-border text-body tabular-nums group-last:border-0", [
-					$(i),
-					i.wrap ? "whitespace-normal" : "whitespace-nowrap",
-					Q(i),
-					i.class
+			})])])) : o("", !0),
+			(g(!0), s(r, null, _(d.columns, (o) => (g(), s("td", {
+				key: o.key,
+				class: m(["h-11 border-b border-border text-body tabular-nums group-last:border-0", [
+					$(o),
+					Ve(o),
+					d.relaxed && Be.value,
+					Q(o),
+					o.class
 				]])
-			}, [h(n.$slots, `cell-${i.key}`, {
-				row: f,
-				value: f[i.key]
-			}, () => [i.type || i.descriptor ? (p(), r(e, {
+			}, [v(i.$slots, `cell-${o.key}`, {
+				row: n,
+				value: n[o.key]
+			}, () => [o.type || o.descriptor ? (g(), a(t, {
 				key: 0,
-				value: R(f[i.key]) ? void 0 : f[i.key],
-				cell: R(f[i.key]) ? f[i.key] : void 0,
-				column: i.descriptor,
-				type: i.type,
-				title: i.label,
-				"resolve-link": l.resolveLink
+				value: U(n[o.key]) ? void 0 : n[o.key],
+				cell: U(n[o.key]) ? n[o.key] : void 0,
+				column: o.descriptor,
+				type: o.type,
+				title: o.label,
+				"resolve-link": d.resolveLink
 			}, null, 8, [
 				"value",
 				"cell",
@@ -276,17 +353,48 @@ var C = { class: "ac-scrollbar" }, w = { class: "w-full border-separate border-s
 				"type",
 				"title",
 				"resolve-link"
-			])) : (p(), a(t, { key: 1 }, [s(_(f[i.key]), 1)], 64))])], 2))), 128))
-		], 10, ce), q(f) && J(f) ? (p(), a("tr", fe, [o("td", {
-			colspan: ye.value,
-			class: d(["border-b border-border p-0 group-last:border-0", !l.expandedBare && "bg-surface-muted"])
-		}, [o("div", {
-			id: Y(f),
+			])) : He(o) && n[o.key] === void 0 ? (g(), s(r, { key: 1 }, [], 64)) : He(o) ? (g(), s("span", xe, [v(i.$slots, `before-${o.key}`, { row: n }), !o.link && ke(n[o.key]) ? (g(), s(r, { key: 0 }, [l(b(d.placeholder), 1)], 64)) : (g(), a(e, {
+				key: 1,
+				content: String(n[o.key]),
+				disabled: !d.truncate,
+				placement: "top"
+			}, {
+				default: C(() => [o.link ? (g(), a(y(We(n, o).is), ee({
+					key: 0,
+					ref_for: !0
+				}, We(n, o).attrs, { class: "cursor-pointer truncate font-medium text-primary-strong no-underline hover:underline" }), {
+					default: C(() => [l(b(Ue(n[o.key])), 1)]),
+					_: 2
+				}, 1040)) : (g(), s("span", Se, b(Ue(n[o.key])), 1))]),
+				_: 2
+			}, 1032, ["content", "disabled"]))])) : (g(), s(r, { key: 3 }, [l(b(n[o.key]), 1)], 64))])], 2))), 128)),
+			X.value ? (g(), s("td", {
+				key: 2,
+				class: m(["h-11 w-20 border-b border-border px-2 group-last:border-0 lg:w-[120px]", d.relaxed ? [Be.value, "whitespace-normal"] : "whitespace-nowrap"]),
+				onClick: f[2] ||= w(() => {}, ["stop"])
+			}, [v(i.$slots, "actions", { row: n })], 2)) : o("", !0)
+		], 10, _e), Y(n) && Ie(n) ? (g(), s("tr", Ce, [c("td", {
+			colspan: Re.value,
+			class: m(["border-b border-border p-0 group-last:border-0", !d.expandedBare && "bg-surface-muted"])
+		}, [c("div", {
+			id: Le(n),
 			role: "region",
-			"aria-label": `Details for ${Z(f)}`,
-			class: d(["text-body", !l.expandedBare && "px-6 py-4"])
-		}, [h(n.$slots, "expanded", { row: f })], 10, me)], 10, pe)])) : i("", !0)], 64))), 128))])])]), !l.loading && !l.rows.length ? (p(), a("div", he, [h(n.$slots, "empty", {}, () => [s(_(l.emptyText), 1)])])) : i("", !0)], 2));
+			"aria-label": `Details for ${Z(n)}`,
+			class: m(["text-body", !d.expandedBare && "px-6 py-4"])
+		}, [v(i.$slots, "expanded", { row: n })], 10, Te)], 10, we)])) : o("", !0)], 64))), 128))])])]), !d.loading && !z.value.length ? (g(), s("div", Ee, [v(i.$slots, "empty", {}, () => [l(b(d.emptyText), 1)])])) : o("", !0)], 2), d.pageSize && B.value > 1 && !d.loading ? (g(), a(n, {
+			key: 0,
+			page: V.value,
+			"page-size": d.pageSize,
+			total: z.value.length,
+			"hide-page-size": "",
+			class: "border-t border-border px-6 py-4",
+			"onUpdate:page": f[3] ||= (e) => j.value = e
+		}, null, 8, [
+			"page",
+			"page-size",
+			"total"
+		])) : o("", !0)], 2));
 	}
 });
 //#endregion
-export { k as default };
+export { O as default };

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

@@ -1,6 +1,6 @@
 export interface Props {
-    /** Label above the field. Also the accessible name of the input and of the list of values. */
-    label: string;
+    /** Label above the field. Also the accessible name of the input and of the list of values. Without one, pass `aria-label`. */
+    label?: string;
     /** Native `name` attribute of the text input. */
     name?: string;
     /** Example value shown in the empty input, e.g. "e.g. 10.0.0.0/16". Defaults to "Add item and press Enter". */
@@ -31,14 +31,24 @@ export interface Props {
     disabled?: boolean;
     /** Shows the input on a muted fill and the chips without remove buttons. Was `is-read-only` in cloud-ui. */
     readonly?: boolean;
+    /** Puts new values first instead of last, as cloud-ui's list field did. */
+    prepend?: boolean;
+    /** Error shown when a `required` field is left with no values: on leaving the input, or after removing the last value. Cleared by typing or adding. E.g. "This field is required. Please input at least one". */
+    requiredMessage?: string;
 }
 type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Content before the label text, such as a 14px icon. Was `icon` in cloud-ui. */
+    "label-icon"?: () => unknown;
+    /** Content after the label text, such as an info tooltip. Was `labelInfo` in cloud-ui. */
+    "label-extra"?: () => unknown;
+};
 type __VLS_ModelProps = {
     /** The values, in the order they were added. Replaced with a new array on every change. */
     modelValue?: string[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     /** Moves focus to the text input. */
     focus: () => void | undefined;
     /** Adds the typed text now, e.g. before submitting. Returns `false` when text was rejected and is still in the input. */
@@ -55,6 +65,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     onRemove?: ((value: string, index: number) => any) | undefined;
 }>, {
     required: boolean;
+    label: string;
     disabled: boolean;
     name: string;
     transform: (value: string) => string;
@@ -66,9 +77,17 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     placeholder: string;
     errorMsg: string;
     mono: boolean;
+    requiredMessage: string;
     allowDuplicates: boolean;
     showClear: boolean;
     addOnBlur: boolean;
+    prepend: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};