@ac-design/design-system 2.2.1 → 2.4.0

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

@@ -9,9 +9,26 @@ export interface Column {
     type?: CellType;
     /** A server-side column descriptor. Shows values with AcCellValue; a row value may be a server cell `{ data, link, color }`. */
     descriptor?: ResourceColumn;
+    /** Extra classes for the column's header and cells, e.g. `w-20 lg:w-[120px]` for an actions column. */
+    class?: string | string[] | Record<string, boolean>;
+    /** Lets cell text wrap onto more lines. Cells stay on one line by default. */
+    wrap?: boolean;
+    /** Pads the header and cells 8px a side instead of 24px, e.g. for a column of icon buttons. */
+    compact?: boolean;
+    /** How the table compares values when it sorts this column: `string` (case-insensitive text, as cloud-ui's BasicTable), `number` or `date`. `null` and missing values go last either way. Leave it out for natural text order. */
+    sortType?: "string" | "number" | "date";
+    /** Row field holding the cell's link, e.g. `"link"`: the value shows as a primary link (a `RouterLink` when the app has vue-router). */
+    link?: string;
+    /** With `link`, the target used when the row's link field is empty, e.g. `"#"` to keep such names looking and acting as links. Without it they show as plain styled text. */
+    linkFallback?: string;
+}
+/** One client-side filter: rows stay when the `key` value contains `searchText`, ignoring case. */
+export interface TableSearch {
+    key: string;
+    searchText: string;
 }
 export interface Props<R> {
-    /** Column definitions: `{ key, label, sortable?, align?, width?, type?, descriptor? }`. `type` or `descriptor` shows values with AcCellValue. */
+    /** Column definitions: `{ key, label, sortable?, align?, width?, type?, descriptor?, class?, wrap?, compact? }`. `type` or `descriptor` shows values with AcCellValue. */
     columns: Column[];
     /** Row objects. Each column's `key` is read from the row. */
     rows: R[];
@@ -35,19 +52,39 @@ export interface Props<R> {
     rowActive?: (row: R) => boolean;
     /** Greys a row out: it ignores clicks and its checkbox is disabled. */
     rowDisabled?: (row: R) => boolean;
+    /** With `selectable`, decides per row whether it can be chosen. Other rows keep their look, links and clicks; only their checkbox is disabled, and the header checkbox skips them. */
+    rowSelectable?: (row: R) => boolean;
+    /** Extra classes for a row, e.g. `(row) => ({ "bg-danger/5": row.failed })`. */
+    rowClass?: (row: R) => string | string[] | Record<string, boolean>;
     /** The table doesn't reorder rows itself: sort the whole list outside (all pages, or on the server) when `sort` fires or `v-model:sortBy` changes. Headers still show the arrow. */
     manualSort?: boolean;
     /** Drops the table's own frame (border, rounded corners, shadow) so it sits flush inside a card or section that already has one. Without it a table in a card draws a second box. */
     flat?: boolean;
+    /** Drops the detail area's padding (24px a side, 16px above and below) and tinted fill, for an `expanded` slot that brings its own. */
+    expandedBare?: boolean;
     /** Turns a server cell's link template into a URL, e.g. to fill `${username}` and `${clustername}` from the current route. */
     resolveLink?: (link: string) => string;
+    /** Filters rows in the table: a row stays when every entry's `searchText` appears in its `key` value, ignoring case. Rows whose value is `null` or missing drop out, even for an empty `searchText`. */
+    search?: TableSearch[];
+    /** Splits rows into pages of this size, with a pager under the table once there's more than one page. Bind the page with `v-model:page`. Sorting and `search` work across every page. */
+    pageSize?: number;
+    /** Pads body cells 12px above and below and lets their text wrap, so rows holding buttons or badges stand 52px tall, as cloud-ui's BasicTable. */
+    relaxed?: boolean;
+    /** Cuts plain cell text longer than this many characters to that length plus "...", and shows the full value in a tooltip. */
+    truncate?: number;
+    /** Text for a plain cell whose value is `null` or `""`, e.g. `"-"`. A missing (`undefined`) value stays blank. */
+    placeholder?: string;
+    /** Which values get the `placeholder`: `empty` (`null` or `""`) or `falsy` (also `0` and `false`, as cloud-ui's BasicTable). A missing (`undefined`) value stays blank either way, and `link` columns never show it. */
+    placeholderFor?: "empty" | "falsy";
 }
-declare const __VLS_export: <Row extends Record<string, unknown>>(__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<{
+declare const __VLS_export: <Row extends Record<string, unknown>, Key = unknown>(__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<Row> & {
         /** `rowKey` values of the chosen rows. Bind with `v-model:selected`. Rows that leave `rows` (another page, a search) stay chosen. */
-        selected?: unknown[];
+        selected?: Key[];
         /** `rowKey` values of the rows that are open. Bind with `v-model:expanded`. */
         expanded?: unknown[];
+        /** The current page with `page-size`, starting at 1. Bind with `v-model:page`. A search or sort goes back to page 1. */
+        page?: number;
         /** The sorted column and direction, or `null`. Bind with `v-model:sortBy` to set it from outside, e.g. to keep it across pages or in the URL. */
         sortBy?: {
             key: string;
@@ -55,8 +92,9 @@ declare const __VLS_export: <Row extends Record<string, unknown>>(__VLS_props: N
         } | null;
     }) & {
         onSort?: ((key: string, mode: "desc" | "asc") => any) | undefined;
+        "onUpdate:page"?: ((value: number) => any) | undefined;
         "onRow-click"?: ((row: Row) => any) | undefined;
-        "onUpdate:selected"?: ((value: unknown[]) => any) | undefined;
+        "onUpdate:selected"?: ((value: Key[]) => any) | undefined;
         "onUpdate:expanded"?: ((value: unknown[]) => any) | undefined;
         "onUpdate:sortBy"?: ((value: {
             key: string;
@@ -75,14 +113,21 @@ declare const __VLS_export: <Row extends Record<string, unknown>>(__VLS_props: N
         [key: `header-${string}`]: (props: {
             column: Column;
         }) => unknown;
+        [key: `before-${string}`]: (props: {
+            row: Row;
+        }) => unknown;
         /** Detail area under an open row, for tables with `expandable`: `#expanded="{ row }"`. */
         expanded?: (props: {
             row: Row;
         }) => unknown;
         /** Content shown when `rows` is empty. */
         empty?: () => unknown;
+        /** Row actions, e.g. edit and delete buttons: `#actions="{ row }"`. Adds a narrow last column, 80px wide (120px from 1024px). */
+        actions?: (props: {
+            row: Row;
+        }) => unknown;
     };
-    emit: (((evt: "sort", key: string, mode: "desc" | "asc") => void) & ((evt: "row-click", row: Row) => void)) & (((event: "update:selected", value: unknown[]) => void) & ((event: "update:expanded", value: unknown[]) => void) & ((event: "update:sortBy", value: {
+    emit: (((evt: "sort", key: string, mode: "desc" | "asc") => void) & ((evt: "row-click", row: Row) => void)) & (((event: "update:page", value: number) => void) & ((event: "update:selected", value: Key[]) => void) & ((event: "update:expanded", value: unknown[]) => void) & ((event: "update:sortBy", value: {
         key: string;
         mode: "asc" | "desc";
     } | null) => void));

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 S, ChevronRight as C, ChevronUp as w, Minus as te } 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 ne = { class: "ac-scrollbar" }, re = { class: "w-full border-separate border-spacing-0 text-base" }, ie = { class: "relative flex size-[18px]" }, ae = [
+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"
-], oe = ["aria-sort", "onClick"], se = { class: "inline-flex items-center gap-2" }, ce = {
+], 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"
-}, T = {
+}, he = {
 	key: 1,
 	class: "h-11 border-b border-border pl-4 [tr:last-child_&]:border-0"
-}, E = [
+}, 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]" }, D = [
+], ye = { class: "relative flex size-[18px]" }, be = [
 	"checked",
 	"disabled",
 	"aria-label",
 	"onChange"
-], O = {
+], 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"
-}, k = ["colspan"], de = ["id", "aria-label"], fe = {
+}, we = ["colspan"], Te = ["id", "aria-label"], Ee = {
 	key: 0,
 	class: "px-6 py-12 text-center text-muted"
-}, A = "border-border", j = "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", M = /*@__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" },
@@ -69,6 +80,14 @@ var ne = { class: "ac-scrollbar" }, re = { class: "w-full border-separate border
 			type: Function,
 			default: void 0
 		},
+		rowSelectable: {
+			type: Function,
+			default: void 0
+		},
+		rowClass: {
+			type: Function,
+			default: void 0
+		},
 		manualSort: {
 			type: Boolean,
 			default: !1
@@ -77,178 +96,256 @@ var ne = { class: "ac-scrollbar" }, re = { class: "w-full border-separate border
 			type: Boolean,
 			default: !1
 		},
+		expandedBare: {
+			type: Boolean,
+			default: !1
+		},
 		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 M = l, N = y(l, "selected"), P = y(l, "expanded"), F = u, I = ee(), L = y(l, "sortBy"), R = n(() => L.value?.key ?? ""), z = n(() => L.value?.mode ?? "asc"), B = (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 = R.value === e.key && z.value === "asc" ? "desc" : "asc";
-			L.value = {
+			let t = I.value === e.key && L.value === "asc" ? "desc" : "asc";
+			F.value = {
 				key: e.key,
 				mode: t
-			}, F("sort", e.key, t);
-		}, pe = n(() => {
-			if (!R.value || M.manualSort) return M.rows;
-			let e = R.value, t = z.value === "asc" ? 1 : -1;
-			return [...M.rows].sort((n, r) => String(H(n[e]) ?? "").localeCompare(String(H(r[e]) ?? ""), void 0, { numeric: !0 }) * t);
+			}, M("sort", e.key, 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 V(e) {
+		function U(e) {
 			return typeof e == "object" && !!e && !Array.isArray(e) && "data" in e;
 		}
-		function H(e) {
-			return V(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 === "";
+		}
+		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());
 		}
-		let U = (e) => !!M.rowDisabled?.(e), W = n(() => M.rows.filter((e) => !U(e)).map((e) => e[M.rowKey])), G = n(() => new Set(N.value)), K = n(() => W.value.length > 0 && W.value.every((e) => G.value.has(e))), q = n(() => !K.value && W.value.some((e) => G.value.has(e)));
-		function me() {
-			let e = new Set(W.value);
-			N.value = K.value ? N.value.filter((t) => !e.has(t)) : [...N.value, ...W.value.filter((e) => !G.value.has(e))];
+		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))];
 		}
-		function he(e) {
-			let t = e[M.rowKey];
-			N.value = G.value.has(t) ? N.value.filter((e) => e !== t) : [...N.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 J = n(() => new Set(P.value)), Y = (e) => M.expandable && J.value.has(e[M.rowKey]), X = (e) => !M.canExpand || M.canExpand(e), Z = (e) => `${I}-detail-${String(e[M.rowKey])}`, ge = n(() => M.columns.length + +!!M.selectable + +!!M.expandable);
-		function _e(e) {
-			let t = e[M.rowKey];
-			P.value = J.value.has(t) ? P.value.filter((e) => e !== t) : [...P.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 Q(e) {
-			let t = e[M.columns[0]?.key ?? ""], n = V(t) ? t.data : t;
-			return typeof n == "string" || typeof n == "number" ? n : String(e[M.rowKey]);
+		function Z(e) {
+			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 $ = (e) => ({
+		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 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"];
-		return (n, u) => (p(), a("div", {
-			class: d(["w-full overflow-hidden bg-surface", !l.flat && "rounded-10 border border-border"]),
+		})[e.align ?? "left"], $ = (e) => e.compact ? "px-2" : "px-6";
+		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", ne, [o("table", re, [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", [A, !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", [A, !l.flat && "first:rounded-tl-10"]])
-			}, [o("span", ie, [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(j),
-				checked: K.value,
-				indeterminate: q.value,
-				disabled: l.loading || !l.rows.length,
+				class: m(D),
+				checked: J.value,
+				indeterminate: Me.value,
+				disabled: d.loading || !K.value.length,
 				"aria-label": "Select all rows",
-				onChange: me
-			}, null, 40, ae), (p(), r(g(q.value ? v(te) : 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 px-6 text-base font-semibold whitespace-nowrap text-muted", [
-					A,
-					!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": R.value === e.key ? z.value === "asc" ? "ascending" : "descending" : void 0,
-				onClick: (t) => B(e)
-			}, [o("span", se, [h(n.$slots, `header-${e.key}`, { column: e }, () => [s(_(e.label), 1)]), e.sortable ? (p(), r(g(R.value === e.key && z.value === "asc" ? v(w) : v(S)), {
+				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", R.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, oe))), 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", ce)) : i("", !0),
-			l.selectable ? (p(), a("td", T)) : 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: "h-11 border-b border-border px-6 [tr:last-child_&]:border-0"
-			}, [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)]))), 128))
-		]))), 128)) : (p(!0), a(t, { key: 1 }, m(pe.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 && G.value.has(f[l.rowKey])) && "bg-primary/5",
-				l.rowActive?.(f) && "shadow-[inset_0_0_0_1px_var(--color-primary)]",
-				U(f) && "pointer-events-none cursor-not-allowed opacity-50"
+			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": U(f) || void 0,
-			onClick: (e) => l.clickable && !U(f) && F("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"])
-			}, [X(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": Y(f),
-				"aria-controls": Z(f),
-				"aria-label": `${Y(f) ? "Collapse" : "Expand"} ${Q(f)}`,
+				"aria-expanded": Y(n),
+				"aria-controls": Le(n),
+				"aria-label": `${Y(n) ? "Collapse" : "Expand"} ${Z(n)}`,
 				"data-testid": "ac-table-expand",
-				onClick: (e) => _e(f)
-			}, [c(v(C), {
-				class: d(["size-4 transition-transform duration-150 motion-reduce:transition-none", Y(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(j),
-				checked: G.value.has(f[l.rowKey]),
-				disabled: U(f),
-				"aria-label": `Select ${Q(f)}`,
-				onChange: (e) => he(f)
-			}, null, 40, D), 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 px-6 whitespace-nowrap text-body tabular-nums group-last:border-0", $(i)])
-			}, [h(n.$slots, `cell-${i.key}`, {
-				row: f,
-				value: f[i.key]
-			}, () => [i.type || i.descriptor ? (p(), r(e, {
+			})])])) : 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
+				]])
+			}, [v(i.$slots, `cell-${o.key}`, {
+				row: n,
+				value: n[o.key]
+			}, () => [o.type || o.descriptor ? (g(), a(t, {
 				key: 0,
-				value: V(f[i.key]) ? void 0 : f[i.key],
-				cell: V(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",
@@ -256,17 +353,48 @@ var ne = { class: "ac-scrollbar" }, re = { class: "w-full border-separate border
 				"type",
 				"title",
 				"resolve-link"
-			])) : (p(), a(t, { key: 1 }, [s(_(f[i.key]), 1)], 64))])], 2))), 128))
-		], 10, E), Y(f) && X(f) ? (p(), a("tr", O, [o("td", {
-			colspan: ge.value,
-			class: "border-b border-border bg-surface-muted p-0 group-last:border-0"
-		}, [o("div", {
-			id: Z(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 ${Q(f)}`,
-			class: "px-6 py-4 text-body"
-		}, [h(n.$slots, "expanded", { row: f })], 8, de)], 8, k)])) : i("", !0)], 64))), 128))])])]), !l.loading && !l.rows.length ? (p(), a("div", fe, [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 { M as default };
+export { O as default };