@gxp-dev/mod-ui 2.0.8 → 2.0.12

package/dist/components/compositions/cards/DataTableCard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,317 @@
+import e from "../../ui/button/Button.js";
+import "../../ui/button/index.js";
+import t from "../../ui/input/Input.js";
+import "../../ui/input/index.js";
+import n from "../../ui/table/Table.js";
+import r from "../../ui/table/TableBody.js";
+import i from "../../ui/table/TableCell.js";
+import a from "../../ui/table/TableHead.js";
+import o from "../../ui/table/TableHeader.js";
+import s from "../../ui/table/TableRow.js";
+import "../../ui/table/index.js";
+import { useDataTableData as c } from "./useDataTableData.js";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, normalizeClass as v, normalizeStyle as y, openBlock as b, ref as x, renderList as S, toDisplayString as C, toRef as w, unref as T, watch as E, withCtx as D } from "vue";
+//#region src/components/compositions/cards/DataTableCard.vue?vue&type=script&setup=true&lang.ts
+var O = {
+	key: 0,
+	class: "flex flex-col gap-0.5"
+}, k = {
+	key: 0,
+	class: "text-base font-semibold"
+}, A = {
+	key: 1,
+	class: "text-sm text-muted-foreground"
+}, ee = {
+	key: 1,
+	class: "flex flex-wrap items-center justify-between gap-2"
+}, te = {
+	key: 0,
+	class: "flex items-center gap-2",
+	"data-testid": "datatable-exports"
+}, ne = {
+	key: 1,
+	class: "ml-auto w-full max-w-xs"
+}, re = ["data-testid", "onClick"], ie = { class: "text-xs" }, ae = { key: 1 }, oe = {
+	key: 0,
+	"data-testid": "cell-timestamp"
+}, se = ["aria-label"], ce = ["src", "alt"], le = {
+	key: 3,
+	class: "inline-flex items-center gap-2"
+}, ue = { key: 4 }, de = { class: "inline-flex items-center justify-end gap-1" }, fe = { "data-testid": "datatable-empty" }, pe = {
+	key: 2,
+	class: "flex items-center justify-between gap-2",
+	"data-testid": "datatable-pagination"
+}, j = { class: "text-sm text-muted-foreground" }, M = { class: "flex items-center gap-2" }, N = /* @__PURE__ */ _({
+	__name: "DataTableCard",
+	props: {
+		tableTitle: {},
+		title: {},
+		subtitle: {},
+		showCard: {
+			type: Boolean,
+			default: !0
+		},
+		classList: {},
+		headers: { default: () => [] },
+		options: {},
+		listKey: {},
+		listData: {},
+		actions: {},
+		selectable: {
+			type: Boolean,
+			default: !1
+		},
+		bulkActions: {},
+		emptyMessage: {},
+		item: { default: () => ({}) },
+		createConfig: {},
+		updateConfig: {},
+		deleteConfig: {}
+	},
+	emits: ["action", "export"],
+	setup(_, { emit: N }) {
+		let P = _, F = N, I = x(P.options?.defaultSortBy ? {
+			key: P.options.defaultSortBy,
+			direction: P.options.defaultSortDirection ?? "asc"
+		} : null), L = x(""), R = x(1), z = u(() => {
+			let e = P.options;
+			return e?.perPage ?? e?.defaultItemsPerPage ?? 25;
+		}), B = u(() => P.options?.paginated === !0), V = u(() => (P.headers ?? []).filter((e) => e.visible !== !1)), me = u(() => P.emptyMessage ?? P.options?.emptyText ?? "No results"), H = u(() => P.options?.exports ?? []), U = u(() => {
+			let e = P.actions ?? [], t = P.options?.additionalActions ?? [];
+			return [...e, ...t];
+		}), W = u(() => {
+			let e = P.options?.searchRoute;
+			return !(e && e.hide);
+		}), { rows: G } = c({
+			listKey: w(P, "listKey"),
+			listData: w(P, "listData"),
+			options: w(P, "options"),
+			item: w(P, "item")
+		});
+		function K(e, t) {
+			if (!t) return;
+			let n = t.split("."), r = e;
+			for (let e of n) {
+				if (typeof r != "object" || !r) return;
+				r = r[e];
+			}
+			return r;
+		}
+		function q(e) {
+			return e == null ? "" : typeof e == "number" ? e : typeof e == "boolean" ? +!!e : e instanceof Date ? e.getTime() : String(e).toLowerCase();
+		}
+		let J = u(() => {
+			let e = L.value.trim().toLowerCase();
+			return e ? G.value.filter((t) => V.value.some((n) => {
+				let r = K(t, n.key);
+				return r == null ? !1 : String(r).toLowerCase().includes(e);
+			})) : G.value;
+		}), Y = u(() => {
+			let e = I.value;
+			if (!e) return J.value;
+			let t = e.direction === "asc" ? 1 : -1;
+			return [...J.value].sort((n, r) => {
+				let i = q(K(n, e.key)), a = q(K(r, e.key));
+				return i < a ? -1 * t : i > a ? 1 * t : 0;
+			});
+		}), X = u(() => B.value ? Math.max(1, Math.ceil(Y.value.length / z.value)) : 1), Z = u(() => {
+			if (!B.value) return Y.value;
+			let e = (R.value - 1) * z.value;
+			return Y.value.slice(e, e + z.value);
+		});
+		E([J, z], () => {
+			R.value > X.value && (R.value = 1);
+		});
+		function he(e) {
+			if (!e.sortable) return;
+			let t = I.value;
+			if (!t || t.key !== e.key) {
+				I.value = {
+					key: e.key,
+					direction: "asc"
+				};
+				return;
+			}
+			if (t.direction === "asc") {
+				I.value = {
+					key: e.key,
+					direction: "desc"
+				};
+				return;
+			}
+			I.value = null;
+		}
+		function ge(e) {
+			let t = I.value;
+			return !t || t.key !== e.key ? "" : t.direction === "asc" ? "↑" : "↓";
+		}
+		function Q(e) {
+			let t = e.align;
+			return t === "center" ? "text-center" : t === "end" || t === "right" ? "text-right" : "text-left";
+		}
+		function $() {
+			R.value > 1 && --R.value;
+		}
+		function _e() {
+			R.value < X.value && (R.value += 1);
+		}
+		function ve(e) {
+			if (e == null) return "";
+			let t = e instanceof Date ? e : new Date(typeof e == "number" ? e : String(e));
+			return Number.isNaN(t.getTime()) ? String(e) : new Intl.DateTimeFormat(void 0, {
+				year: "numeric",
+				month: "short",
+				day: "numeric",
+				hour: "numeric",
+				minute: "numeric"
+			}).format(t);
+		}
+		function ye(e) {
+			let t = String(e ?? "").toLowerCase();
+			return t === "success" || t === "active" || t === "ok" || t === "paid" ? "bg-green-500" : t === "warning" || t === "pending" ? "bg-yellow-500" : t === "danger" || t === "error" || t === "failed" || t === "unpaid" ? "bg-red-500" : t === "info" ? "bg-blue-500" : "bg-gray-400";
+		}
+		function be(e, t) {
+			F("action", {
+				action: e,
+				row: t
+			});
+		}
+		function xe(e) {
+			F("export", { export: e });
+		}
+		return (c, u) => (b(), p("section", {
+			class: v(["gxp-datatable-card flex flex-col gap-3", _.showCard === !1 ? "" : "rounded-lg border bg-card text-card-foreground shadow-sm p-4"]),
+			"data-testid": "datatable-card"
+		}, [
+			_.tableTitle || _.title || _.subtitle ? (b(), p("header", O, [_.tableTitle || _.title ? (b(), p("h3", k, C(_.tableTitle ?? _.title), 1)) : f("", !0), _.subtitle ? (b(), p("p", A, C(_.subtitle), 1)) : f("", !0)])) : f("", !0),
+			H.value.length > 0 || W.value ? (b(), p("div", ee, [H.value.length > 0 ? (b(), p("div", te, [(b(!0), p(l, null, S(H.value, (t, n) => (b(), d(T(e), {
+				key: n,
+				variant: "outline",
+				size: "sm",
+				type: "button",
+				onClick: (e) => xe(t)
+			}, {
+				default: D(() => [h(C(t.label ?? "Export"), 1)]),
+				_: 2
+			}, 1032, ["onClick"]))), 128))])) : f("", !0), W.value ? (b(), p("div", ne, [g(T(t), {
+				modelValue: L.value,
+				"onUpdate:modelValue": u[0] ||= (e) => L.value = e,
+				type: "search",
+				placeholder: "Search...",
+				"data-testid": "datatable-search"
+			}, null, 8, ["modelValue"])])) : f("", !0)])) : f("", !0),
+			g(T(n), null, {
+				default: D(() => [g(T(o), null, {
+					default: D(() => [g(T(s), null, {
+						default: D(() => [(b(!0), p(l, null, S(V.value, (e) => (b(), d(T(a), {
+							key: e.key,
+							class: v(Q(e)),
+							style: y(e.width ? { width: e.width } : void 0)
+						}, {
+							default: D(() => [e.sortable ? (b(), p("button", {
+								key: 0,
+								type: "button",
+								class: "inline-flex items-center gap-1 hover:text-foreground",
+								"data-testid": `sort-${e.key}`,
+								onClick: (t) => he(e)
+							}, [m("span", null, C(e.title ?? e.key), 1), m("span", ie, C(ge(e)), 1)], 8, re)) : (b(), p("span", ae, C(e.title ?? e.key), 1))]),
+							_: 2
+						}, 1032, ["class", "style"]))), 128)), U.value.length > 0 ? (b(), d(T(a), {
+							key: 0,
+							class: "text-right"
+						}, {
+							default: D(() => [...u[1] ||= [h(" Actions ", -1)]]),
+							_: 1
+						})) : f("", !0)]),
+						_: 1
+					})]),
+					_: 1
+				}), g(T(r), null, {
+					default: D(() => [Z.value.length > 0 ? (b(!0), p(l, { key: 0 }, S(Z.value, (t, n) => (b(), d(T(s), {
+						key: n,
+						"data-testid": `datatable-row-${n}`
+					}, {
+						default: D(() => [(b(!0), p(l, null, S(V.value, (e) => (b(), d(T(i), {
+							key: e.key,
+							class: v(Q(e))
+						}, {
+							default: D(() => [e.type === "timestamp" || e.type === "laravel-timestamp" ? (b(), p("span", oe, C(ve(K(t, e.key))), 1)) : e.type === "boolean" ? (b(), p("span", {
+								key: 1,
+								"data-testid": "cell-boolean",
+								class: v(K(t, e.key) ? "text-green-600" : "text-red-600"),
+								"aria-label": K(t, e.key) ? "true" : "false"
+							}, C(K(t, e.key) ? "✓" : "✗"), 11, se)) : e.type === "image" ? (b(), p("img", {
+								key: 2,
+								"data-testid": "cell-image",
+								src: String(K(t, e.key) ?? ""),
+								alt: e.title ?? e.key,
+								class: "h-8 w-8 rounded object-cover"
+							}, null, 8, ce)) : e.type === "status_circle" ? (b(), p("span", le, [m("span", {
+								"data-testid": "cell-status-circle",
+								class: v(["inline-block h-2.5 w-2.5 rounded-full", ye(K(t, e.key))])
+							}, null, 2), m("span", null, C(K(t, e.key)), 1)])) : (b(), p("span", ue, [
+								e.prepend ? (b(), p(l, { key: 0 }, [h(C(e.prepend), 1)], 64)) : f("", !0),
+								h(" " + C(K(t, e.key) ?? "") + " ", 1),
+								e.append ? (b(), p(l, { key: 1 }, [h(C(e.append), 1)], 64)) : f("", !0)
+							]))]),
+							_: 2
+						}, 1032, ["class"]))), 128)), U.value.length > 0 ? (b(), d(T(i), {
+							key: 0,
+							class: "text-right"
+						}, {
+							default: D(() => [m("div", de, [(b(!0), p(l, null, S(U.value, (n, r) => (b(), d(T(e), {
+								key: r,
+								variant: "ghost",
+								size: "sm",
+								type: "button",
+								"data-testid": `datatable-action-${n.slug ?? r}`,
+								onClick: (e) => be(n, t)
+							}, {
+								default: D(() => [h(C(n.label ?? n.tooltip ?? n.slug ?? "Action"), 1)]),
+								_: 2
+							}, 1032, ["data-testid", "onClick"]))), 128))])]),
+							_: 2
+						}, 1024)) : f("", !0)]),
+						_: 2
+					}, 1032, ["data-testid"]))), 128)) : (b(), d(T(s), { key: 1 }, {
+						default: D(() => [g(T(i), {
+							colspan: V.value.length + +(U.value.length > 0),
+							class: "text-center text-muted-foreground"
+						}, {
+							default: D(() => [m("span", fe, C(me.value), 1)]),
+							_: 1
+						}, 8, ["colspan"])]),
+						_: 1
+					}))]),
+					_: 1
+				})]),
+				_: 1
+			}),
+			B.value && Y.value.length > 0 ? (b(), p("footer", pe, [m("span", j, " Page " + C(R.value) + " of " + C(X.value), 1), m("div", M, [g(T(e), {
+				variant: "outline",
+				size: "sm",
+				type: "button",
+				disabled: R.value <= 1,
+				"data-testid": "datatable-prev",
+				onClick: $
+			}, {
+				default: D(() => [...u[2] ||= [h(" Previous ", -1)]]),
+				_: 1
+			}, 8, ["disabled"]), g(T(e), {
+				variant: "outline",
+				size: "sm",
+				type: "button",
+				disabled: R.value >= X.value,
+				"data-testid": "datatable-next",
+				onClick: _e
+			}, {
+				default: D(() => [...u[3] ||= [h(" Next ", -1)]]),
+				_: 1
+			}, 8, ["disabled"])])])) : f("", !0)
+		], 2));
+	}
+});
+//#endregion
+export { N as default };
+
+//# sourceMappingURL=DataTableCard.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/cards/DataTableCard.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableCard.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/compositions/cards/DataTableCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven `datatable` composition.\n *\n * Renders a paginated, searchable, sortable table from `headers` + a\n * row source determined in priority order:\n *\n *   1. `options.searchRoute` — remote fetch (stubbed; future HTTP).\n *   2. `listKey` — read sub-array from `item[listKey]` (nested).\n *   3. `listData` — inline static rows.\n *   4. Otherwise: empty.\n *\n * Sorting, search, and pagination all run client-side over the\n * resolved rows. Column rendering branches on `header.type`.\n *\n * Self-contained — directly mountable in any Vue app:\n *\n *   <DataTableCard\n *     :headers=\"[{ key: 'name', sortable: true }]\"\n *     :list-data=\"rows\"\n *     @action=\"onRowAction\"\n *   />\n */\nimport { computed, ref, watch, toRef } from \"vue\"\nimport type {\n  CreateConfig,\n  DeleteConfig,\n  UpdateConfig,\n} from \"@/definitions/shared/crud\"\nimport type {\n  DataTableColumn,\n  DataTableOptions,\n  ExportConfig,\n  TableAction,\n} from \"@/definitions/cards/DataTableCard\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { useDataTableData } from \"./useDataTableData\"\n\nexport interface DataTableCardProps {\n  /** Title rendered above the table. Falls back to the more generic `title`. */\n  tableTitle?: string\n  title?: string\n  subtitle?: string\n  showCard?: boolean\n  classList?: string[] | string\n  /** Column definitions. */\n  headers?: DataTableColumn[]\n  /** Behaviour and toolbar configuration. */\n  options?: DataTableOptions\n  /** Sub-array path on `item` when rendering nested tables. */\n  listKey?: string\n  /** Static (non-paginated) row source. */\n  listData?: unknown[]\n  /** Per-row action buttons (also merged with `options.additionalActions`). */\n  actions?: TableAction[]\n  /** Enable row selection. */\n  selectable?: boolean\n  /** Bulk action buttons. */\n  bulkActions?: TableAction[]\n  /** Empty-state message. */\n  emptyMessage?: string\n  /** Page-level data model. Used as the row source when `listKey` is set. */\n  item?: Record<string, unknown>\n  /** Create-modal configuration. */\n  createConfig?: CreateConfig\n  /** Inline update configuration. */\n  updateConfig?: UpdateConfig\n  /** Delete configuration. */\n  deleteConfig?: DeleteConfig\n}\n\nconst props = withDefaults(defineProps<DataTableCardProps>(), {\n  headers: () => [],\n  selectable: false,\n  showCard: true,\n  item: () => ({}),\n})\n\nconst emit = defineEmits<{\n  (e: \"action\", payload: { action: TableAction; row: Record<string, unknown> }): void\n  (e: \"export\", payload: { export: ExportConfig }): void\n}>()\n\nconst sortState = ref<{ key: string; direction: \"asc\" | \"desc\" } | null>(\n  props.options?.defaultSortBy\n    ? {\n        key: props.options.defaultSortBy,\n        direction: props.options.defaultSortDirection ?? \"asc\",\n      }\n    : null,\n)\n\nconst searchQuery = ref(\"\")\nconst currentPage = ref(1)\n\nconst perPage = computed<number>(() => {\n  const opts = props.options\n  return (\n    opts?.perPage ??\n    opts?.defaultItemsPerPage ??\n    25\n  )\n})\n\nconst paginated = computed<boolean>(() => props.options?.paginated === true)\n\nconst visibleHeaders = computed<DataTableColumn[]>(() =>\n  (props.headers ?? []).filter((h) => h.visible !== false),\n)\n\nconst emptyMessageText = computed<string>(() => {\n  return (\n    props.emptyMessage ??\n    props.options?.emptyText ??\n    \"No results\"\n  )\n})\n\nconst exports = computed<ExportConfig[]>(\n  () => props.options?.exports ?? [],\n)\n\nconst tableActions = computed<TableAction[]>(() => {\n  const base = props.actions ?? []\n  const additional = props.options?.additionalActions ?? []\n  return [...base, ...additional]\n})\n\nconst showSearch = computed<boolean>(() => {\n  const sr = props.options?.searchRoute\n  if (sr && sr.hide) {\n    return false\n  }\n  // Always show search when there is any data source (client-side filter).\n  return true\n})\n\n/** Underlying row source — composable that can be mocked in tests. */\nconst { rows: sourceRows } = useDataTableData({\n  listKey: toRef(props, \"listKey\"),\n  listData: toRef(props, \"listData\"),\n  options: toRef(props, \"options\"),\n  item: toRef(props, \"item\"),\n})\n\n/** Read a dot-notation path on a row, returning unknown. */\nfunction readPath(row: Record<string, unknown>, path: string): unknown {\n  if (!path) {\n    return undefined\n  }\n  const segments = path.split(\".\")\n  let value: unknown = row\n  for (const seg of segments) {\n    if (value == null || typeof value !== \"object\") {\n      return undefined\n    }\n    value = (value as Record<string, unknown>)[seg]\n  }\n  return value\n}\n\nfunction toComparable(value: unknown): number | string {\n  if (value == null) {\n    return \"\"\n  }\n  if (typeof value === \"number\") {\n    return value\n  }\n  if (typeof value === \"boolean\") {\n    return value ? 1 : 0\n  }\n  if (value instanceof Date) {\n    return value.getTime()\n  }\n  return String(value).toLowerCase()\n}\n\nconst filteredRows = computed<Record<string, unknown>[]>(() => {\n  const query = searchQuery.value.trim().toLowerCase()\n  if (!query) {\n    return sourceRows.value\n  }\n  return sourceRows.value.filter((row) => {\n    return visibleHeaders.value.some((h) => {\n      const v = readPath(row, h.key)\n      if (v == null) {\n        return false\n      }\n      return String(v).toLowerCase().includes(query)\n    })\n  })\n})\n\nconst sortedRows = computed<Record<string, unknown>[]>(() => {\n  const state = sortState.value\n  if (!state) {\n    return filteredRows.value\n  }\n  const dir = state.direction === \"asc\" ? 1 : -1\n  return [...filteredRows.value].sort((a, b) => {\n    const av = toComparable(readPath(a, state.key))\n    const bv = toComparable(readPath(b, state.key))\n    if (av < bv) {\n      return -1 * dir\n    }\n    if (av > bv) {\n      return 1 * dir\n    }\n    return 0\n  })\n})\n\nconst pageCount = computed<number>(() => {\n  if (!paginated.value) {\n    return 1\n  }\n  return Math.max(1, Math.ceil(sortedRows.value.length / perPage.value))\n})\n\nconst pagedRows = computed<Record<string, unknown>[]>(() => {\n  if (!paginated.value) {\n    return sortedRows.value\n  }\n  const start = (currentPage.value - 1) * perPage.value\n  return sortedRows.value.slice(start, start + perPage.value)\n})\n\n// Reset pagination if filtering shrinks the result below the current page.\nwatch([filteredRows, perPage], () => {\n  if (currentPage.value > pageCount.value) {\n    currentPage.value = 1\n  }\n})\n\nfunction toggleSort(header: DataTableColumn): void {\n  if (!header.sortable) {\n    return\n  }\n  const state = sortState.value\n  if (!state || state.key !== header.key) {\n    sortState.value = { key: header.key, direction: \"asc\" }\n    return\n  }\n  if (state.direction === \"asc\") {\n    sortState.value = { key: header.key, direction: \"desc\" }\n    return\n  }\n  sortState.value = null\n}\n\nfunction sortIndicator(header: DataTableColumn): string {\n  const state = sortState.value\n  if (!state || state.key !== header.key) {\n    return \"\"\n  }\n  return state.direction === \"asc\" ? \"↑\" : \"↓\"\n}\n\nfunction alignClass(header: DataTableColumn): string {\n  const a = header.align\n  if (a === \"center\") {\n    return \"text-center\"\n  }\n  if (a === \"end\" || a === \"right\") {\n    return \"text-right\"\n  }\n  return \"text-left\"\n}\n\nfunction previousPage(): void {\n  if (currentPage.value > 1) {\n    currentPage.value -= 1\n  }\n}\n\nfunction nextPage(): void {\n  if (currentPage.value < pageCount.value) {\n    currentPage.value += 1\n  }\n}\n\nfunction formatTimestamp(value: unknown): string {\n  if (value == null) {\n    return \"\"\n  }\n  const date =\n    value instanceof Date\n      ? value\n      : new Date(typeof value === \"number\" ? value : String(value))\n  if (Number.isNaN(date.getTime())) {\n    return String(value)\n  }\n  return new Intl.DateTimeFormat(undefined, {\n    year: \"numeric\",\n    month: \"short\",\n    day: \"numeric\",\n    hour: \"numeric\",\n    minute: \"numeric\",\n  }).format(date)\n}\n\nfunction statusColor(value: unknown): string {\n  const s = String(value ?? \"\").toLowerCase()\n  if (s === \"success\" || s === \"active\" || s === \"ok\" || s === \"paid\") {\n    return \"bg-green-500\"\n  }\n  if (s === \"warning\" || s === \"pending\") {\n    return \"bg-yellow-500\"\n  }\n  if (s === \"danger\" || s === \"error\" || s === \"failed\" || s === \"unpaid\") {\n    return \"bg-red-500\"\n  }\n  if (s === \"info\") {\n    return \"bg-blue-500\"\n  }\n  return \"bg-gray-400\"\n}\n\nfunction onAction(action: TableAction, row: Record<string, unknown>): void {\n  emit(\"action\", { action, row })\n}\n\nfunction onExport(config: ExportConfig): void {\n  emit(\"export\", { export: config })\n}\n</script>\n\n<template>\n  <section\n    :class=\"[\n      'gxp-datatable-card flex flex-col gap-3',\n      showCard !== false\n        ? 'rounded-lg border bg-card text-card-foreground shadow-sm p-4'\n        : '',\n    ]\"\n    data-testid=\"datatable-card\"\n  >\n    <header\n      v-if=\"tableTitle || title || subtitle\"\n      class=\"flex flex-col gap-0.5\"\n    >\n      <h3\n        v-if=\"tableTitle || title\"\n        class=\"text-base font-semibold\"\n      >\n        {{ tableTitle ?? title }}\n      </h3>\n      <p\n        v-if=\"subtitle\"\n        class=\"text-sm text-muted-foreground\"\n      >\n        {{ subtitle }}\n      </p>\n    </header>\n\n    <div\n      v-if=\"exports.length > 0 || showSearch\"\n      class=\"flex flex-wrap items-center justify-between gap-2\"\n    >\n      <div\n        v-if=\"exports.length > 0\"\n        class=\"flex items-center gap-2\"\n        data-testid=\"datatable-exports\"\n      >\n        <Button\n          v-for=\"(ex, i) in exports\"\n          :key=\"i\"\n          variant=\"outline\"\n          size=\"sm\"\n          type=\"button\"\n          @click=\"onExport(ex)\"\n        >\n          {{ ex.label ?? \"Export\" }}\n        </Button>\n      </div>\n\n      <div v-if=\"showSearch\" class=\"ml-auto w-full max-w-xs\">\n        <Input\n          v-model=\"searchQuery\"\n          type=\"search\"\n          placeholder=\"Search...\"\n          data-testid=\"datatable-search\"\n        />\n      </div>\n    </div>\n\n    <Table>\n      <TableHeader>\n        <TableRow>\n          <TableHead\n            v-for=\"h in visibleHeaders\"\n            :key=\"h.key\"\n            :class=\"alignClass(h)\"\n            :style=\"h.width ? { width: h.width } : undefined\"\n          >\n            <button\n              v-if=\"h.sortable\"\n              type=\"button\"\n              class=\"inline-flex items-center gap-1 hover:text-foreground\"\n              :data-testid=\"`sort-${h.key}`\"\n              @click=\"toggleSort(h)\"\n            >\n              <span>{{ h.title ?? h.key }}</span>\n              <span class=\"text-xs\">{{ sortIndicator(h) }}</span>\n            </button>\n            <span v-else>{{ h.title ?? h.key }}</span>\n          </TableHead>\n          <TableHead\n            v-if=\"tableActions.length > 0\"\n            class=\"text-right\"\n          >\n            Actions\n          </TableHead>\n        </TableRow>\n      </TableHeader>\n      <TableBody>\n        <template v-if=\"pagedRows.length > 0\">\n          <TableRow\n            v-for=\"(row, ri) in pagedRows\"\n            :key=\"ri\"\n            :data-testid=\"`datatable-row-${ri}`\"\n          >\n            <TableCell\n              v-for=\"h in visibleHeaders\"\n              :key=\"h.key\"\n              :class=\"alignClass(h)\"\n            >\n              <template v-if=\"h.type === 'timestamp' || h.type === 'laravel-timestamp'\">\n                <span data-testid=\"cell-timestamp\">{{ formatTimestamp(readPath(row, h.key)) }}</span>\n              </template>\n              <template v-else-if=\"h.type === 'boolean'\">\n                <span\n                  data-testid=\"cell-boolean\"\n                  :class=\"readPath(row, h.key) ? 'text-green-600' : 'text-red-600'\"\n                  :aria-label=\"readPath(row, h.key) ? 'true' : 'false'\"\n                >\n                  {{ readPath(row, h.key) ? \"✓\" : \"✗\" }}\n                </span>\n              </template>\n              <template v-else-if=\"h.type === 'image'\">\n                <img\n                  data-testid=\"cell-image\"\n                  :src=\"String(readPath(row, h.key) ?? '')\"\n                  :alt=\"h.title ?? h.key\"\n                  class=\"h-8 w-8 rounded object-cover\"\n                >\n              </template>\n              <template v-else-if=\"h.type === 'status_circle'\">\n                <span class=\"inline-flex items-center gap-2\">\n                  <span\n                    data-testid=\"cell-status-circle\"\n                    :class=\"['inline-block h-2.5 w-2.5 rounded-full', statusColor(readPath(row, h.key))]\"\n                  />\n                  <span>{{ readPath(row, h.key) }}</span>\n                </span>\n              </template>\n              <template v-else>\n                <span>\n                  <template v-if=\"h.prepend\">{{ h.prepend }}</template>\n                  {{ readPath(row, h.key) ?? \"\" }}\n                  <template v-if=\"h.append\">{{ h.append }}</template>\n                </span>\n              </template>\n            </TableCell>\n            <TableCell\n              v-if=\"tableActions.length > 0\"\n              class=\"text-right\"\n            >\n              <div class=\"inline-flex items-center justify-end gap-1\">\n                <Button\n                  v-for=\"(action, ai) in tableActions\"\n                  :key=\"ai\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  type=\"button\"\n                  :data-testid=\"`datatable-action-${action.slug ?? ai}`\"\n                  @click=\"onAction(action, row)\"\n                >\n                  {{ action.label ?? action.tooltip ?? action.slug ?? \"Action\" }}\n                </Button>\n              </div>\n            </TableCell>\n          </TableRow>\n        </template>\n        <template v-else>\n          <TableRow>\n            <TableCell\n              :colspan=\"visibleHeaders.length + (tableActions.length > 0 ? 1 : 0)\"\n              class=\"text-center text-muted-foreground\"\n            >\n              <span data-testid=\"datatable-empty\">{{ emptyMessageText }}</span>\n            </TableCell>\n          </TableRow>\n        </template>\n      </TableBody>\n    </Table>\n\n    <footer\n      v-if=\"paginated && sortedRows.length > 0\"\n      class=\"flex items-center justify-between gap-2\"\n      data-testid=\"datatable-pagination\"\n    >\n      <span class=\"text-sm text-muted-foreground\">\n        Page {{ currentPage }} of {{ pageCount }}\n      </span>\n      <div class=\"flex items-center gap-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          type=\"button\"\n          :disabled=\"currentPage <= 1\"\n          data-testid=\"datatable-prev\"\n          @click=\"previousPage\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          type=\"button\"\n          :disabled=\"currentPage >= pageCount\"\n          data-testid=\"datatable-next\"\n          @click=\"nextPage\"\n        >\n          Next\n        </Button>\n      </div>\n    </footer>\n  </section>\n</template>\n"],"mappings":"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"}

package/dist/components/compositions/cards/ElementDisplayCard.js

@@ -0,0 +1,7 @@
+import e from "./ElementDisplayCard.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/cards/ElementDisplayCard.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=ElementDisplayCard.js.map

package/dist/components/compositions/cards/ElementDisplayCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementDisplayCard.js","names":[],"sources":["../../../../src/components/compositions/cards/ElementDisplayCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven `element-display` composition. Renders a single\n * CardElement standalone (no label, no column wrapping, no card chrome\n * by default).\n *\n * Self-contained — directly mountable in any Vue app:\n *\n *   <ElementDisplayCard\n *     :element=\"myChartElement\"\n *     :item=\"dataModel\"\n *     title=\"Featured widget\"\n *     show-card\n *   />\n *\n * Renders nothing when `element` is not provided — keeps a missing\n * reference from breaking the page. ID resolution happens upstream in\n * `CardRenderer`.\n */\nimport { computed } from \"vue\"\nimport type { CardElement } from \"@/definitions/elements\"\nimport ElementRenderer from \"@/engine/ElementRenderer.vue\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\n\nexport interface ElementDisplayCardProps {\n  title?: string\n  subtitle?: string\n  showCard?: boolean\n  /** Resolved element to render. */\n  element?: CardElement\n  /** Page-level data model passed through to the element renderer. */\n  item?: Record<string, unknown>\n}\n\nconst props = withDefaults(defineProps<ElementDisplayCardProps>(), {\n  showCard: false,\n  item: () => ({}),\n})\n\nconst showChrome = computed<boolean>(() => props.showCard === true)\n\nconst hasHeader = computed<boolean>(\n  () => Boolean(props.title) || Boolean(props.subtitle),\n)\n</script>\n\n<template>\n  <Card v-if=\"showChrome && element\" class=\"flex flex-col\">\n    <CardHeader v-if=\"hasHeader\">\n      <CardTitle v-if=\"title\">{{ title }}</CardTitle>\n      <CardDescription v-if=\"subtitle\">\n        {{ subtitle }}\n      </CardDescription>\n    </CardHeader>\n    <CardContent :class=\"[hasHeader ? '' : 'pt-6']\">\n      <ElementRenderer :element=\"element\" :item=\"item\" />\n    </CardContent>\n  </Card>\n  <ElementRenderer\n    v-else-if=\"element\"\n    :element=\"element\"\n    :item=\"item\"\n  />\n</template>\n"],"mappings":""}

package/dist/components/compositions/cards/ElementDisplayCard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,55 @@
+import e from "../../ui/card/Card.js";
+import t from "../../ui/card/CardContent.js";
+import n from "../../ui/card/CardDescription.js";
+import r from "../../ui/card/CardHeader.js";
+import i from "../../ui/card/CardTitle.js";
+import "../../ui/card/index.js";
+import a from "../../../engine/ElementRenderer.js";
+import { computed as o, createBlock as s, createCommentVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, normalizeClass as f, openBlock as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
+//#region src/components/compositions/cards/ElementDisplayCard.vue?vue&type=script&setup=true&lang.ts
+var _ = /* @__PURE__ */ d({
+	__name: "ElementDisplayCard",
+	props: {
+		title: {},
+		subtitle: {},
+		showCard: {
+			type: Boolean,
+			default: !1
+		},
+		element: {},
+		item: { default: () => ({}) }
+	},
+	setup(d) {
+		let _ = d, v = o(() => _.showCard === !0), y = o(() => !!_.title || !!_.subtitle);
+		return (o, _) => v.value && d.element ? (p(), s(h(e), {
+			key: 0,
+			class: "flex flex-col"
+		}, {
+			default: g(() => [y.value ? (p(), s(h(r), { key: 0 }, {
+				default: g(() => [d.title ? (p(), s(h(i), { key: 0 }, {
+					default: g(() => [l(m(d.title), 1)]),
+					_: 1
+				})) : c("", !0), d.subtitle ? (p(), s(h(n), { key: 1 }, {
+					default: g(() => [l(m(d.subtitle), 1)]),
+					_: 1
+				})) : c("", !0)]),
+				_: 1
+			})) : c("", !0), u(h(t), { class: f([y.value ? "" : "pt-6"]) }, {
+				default: g(() => [u(a, {
+					element: d.element,
+					item: d.item
+				}, null, 8, ["element", "item"])]),
+				_: 1
+			}, 8, ["class"])]),
+			_: 1
+		})) : d.element ? (p(), s(a, {
+			key: 1,
+			element: d.element,
+			item: d.item
+		}, null, 8, ["element", "item"])) : c("", !0);
+	}
+});
+//#endregion
+export { _ as default };
+
+//# sourceMappingURL=ElementDisplayCard.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/cards/ElementDisplayCard.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementDisplayCard.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/compositions/cards/ElementDisplayCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven `element-display` composition. Renders a single\n * CardElement standalone (no label, no column wrapping, no card chrome\n * by default).\n *\n * Self-contained — directly mountable in any Vue app:\n *\n *   <ElementDisplayCard\n *     :element=\"myChartElement\"\n *     :item=\"dataModel\"\n *     title=\"Featured widget\"\n *     show-card\n *   />\n *\n * Renders nothing when `element` is not provided — keeps a missing\n * reference from breaking the page. ID resolution happens upstream in\n * `CardRenderer`.\n */\nimport { computed } from \"vue\"\nimport type { CardElement } from \"@/definitions/elements\"\nimport ElementRenderer from \"@/engine/ElementRenderer.vue\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\n\nexport interface ElementDisplayCardProps {\n  title?: string\n  subtitle?: string\n  showCard?: boolean\n  /** Resolved element to render. */\n  element?: CardElement\n  /** Page-level data model passed through to the element renderer. */\n  item?: Record<string, unknown>\n}\n\nconst props = withDefaults(defineProps<ElementDisplayCardProps>(), {\n  showCard: false,\n  item: () => ({}),\n})\n\nconst showChrome = computed<boolean>(() => props.showCard === true)\n\nconst hasHeader = computed<boolean>(\n  () => Boolean(props.title) || Boolean(props.subtitle),\n)\n</script>\n\n<template>\n  <Card v-if=\"showChrome && element\" class=\"flex flex-col\">\n    <CardHeader v-if=\"hasHeader\">\n      <CardTitle v-if=\"title\">{{ title }}</CardTitle>\n      <CardDescription v-if=\"subtitle\">\n        {{ subtitle }}\n      </CardDescription>\n    </CardHeader>\n    <CardContent :class=\"[hasHeader ? '' : 'pt-6']\">\n      <ElementRenderer :element=\"element\" :item=\"item\" />\n    </CardContent>\n  </Card>\n  <ElementRenderer\n    v-else-if=\"element\"\n    :element=\"element\"\n    :item=\"item\"\n  />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAwCA,IAAM,IAAQ,GAKR,IAAa,QAAwB,EAAM,aAAa,EAAI,GAE5D,IAAY,QACV,EAAQ,EAAM,SAAU,EAAQ,EAAM,QAC9C;mBAIc,EAAA,SAAc,EAAA,WAAA,EAAA,GAA1B,EAUO,EAAA,CAAA,GAAA;;GAV4B,OAAM;;oBAM1B,CALK,EAAA,SAAA,EAAA,GAAlB,EAKa,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;qBAJoC,CAA9B,EAAA,SAAA,EAAA,GAAjB,EAA+C,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;sBAAZ,CAAA,EAAA,EAAR,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;qBACT,EAAA,YAAA,EAAA,GAAvB,EAEkB,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;sBADF,CAAA,EAAA,EAAX,EAAA,QAAQ,GAAA,CAAA,CAAA,CAAA;;;;oBAGf,EAEc,EAAA,CAAA,GAAA,EAFA,OAAK,EAAA,CAAG,EAAA,QAAS,KAAA,MAAA,CAAA,EAAA,GAAA;qBACsB,CAAnD,EAAmD,GAAA;KAAjC,SAAS,EAAA;KAAU,MAAM,EAAA;;;;;QAIlC,EAAA,WAAA,EAAA,GADb,EAIE,GAAA;;GAFC,SAAS,EAAA;GACT,MAAM,EAAA"}

package/dist/components/compositions/cards/ElementListCard.js

@@ -0,0 +1,7 @@
+import e from "./ElementListCard.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/cards/ElementListCard.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=ElementListCard.js.map

package/dist/components/compositions/cards/ElementListCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementListCard.js","names":[],"sources":["../../../../src/components/compositions/cards/ElementListCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven `element-list` card. Renders a vertical stack of\n * resolved CardElements via `ElementRenderer`.\n *\n * Self-contained — directly mountable in any Vue app:\n *\n *   <ElementListCard\n *     title=\"Personal details\"\n *     :elements=\"[firstName, lastName]\"\n *     :item=\"{ first_name: 'Jane' }\"\n *   />\n *\n * The JSON-driven engine reaches this composition via `CardRenderer`,\n * which is responsible for resolving the card's `elementList: string[]`\n * IDs against the page-level `elements` map and forwarding the\n * resolved CardElement array as the `elements` prop here.\n */\nimport { computed } from \"vue\"\nimport type { CardElement } from \"@/definitions/elements\"\nimport ElementRenderer from \"@/engine/ElementRenderer.vue\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\n\nexport interface ElementListCardProps {\n  title?: string\n  subtitle?: string\n  showCard?: boolean\n  gutterY?: string\n  gutterX?: string\n  classList?: string[] | string\n  /** Resolved child elements (NOT IDs). */\n  elements?: CardElement[]\n  /** Page-level data model passed through to child renderers. */\n  item?: Record<string, unknown>\n}\n\nconst props = withDefaults(defineProps<ElementListCardProps>(), {\n  showCard: true,\n  gutterY: \"1rem\",\n  gutterX: \"1rem\",\n  elements: () => [],\n  item: () => ({}),\n})\n\nconst showChrome = computed<boolean>(() => props.showCard !== false)\n\nconst hasHeader = computed<boolean>(\n  () => Boolean(props.title) || Boolean(props.subtitle),\n)\n\nconst bodyStyle = computed(() => ({\n  rowGap: props.gutterY,\n  columnGap: props.gutterX,\n}))\n</script>\n\n<template>\n  <Card v-if=\"showChrome\" class=\"flex flex-col\">\n    <CardHeader v-if=\"hasHeader\">\n      <CardTitle v-if=\"title\">{{ title }}</CardTitle>\n      <CardDescription v-if=\"subtitle\">\n        {{ subtitle }}\n      </CardDescription>\n    </CardHeader>\n    <CardContent\n      class=\"flex flex-col\"\n      :class=\"[hasHeader ? '' : 'pt-6']\"\n      :style=\"bodyStyle\"\n    >\n      <ElementRenderer\n        v-for=\"element in elements\"\n        :key=\"element.id\"\n        :element=\"element\"\n        :item=\"item\"\n      />\n    </CardContent>\n  </Card>\n  <section\n    v-else\n    class=\"flex flex-col\"\n    :style=\"bodyStyle\"\n    data-testid=\"element-list-bare\"\n  >\n    <header v-if=\"hasHeader\" class=\"mb-3 flex flex-col gap-0.5\">\n      <h3 v-if=\"title\" class=\"text-base font-semibold\">\n        {{ title }}\n      </h3>\n      <p v-if=\"subtitle\" class=\"text-sm text-muted-foreground\">\n        {{ subtitle }}\n      </p>\n    </header>\n    <ElementRenderer\n      v-for=\"element in elements\"\n      :key=\"element.id\"\n      :element=\"element\"\n      :item=\"item\"\n    />\n  </section>\n</template>\n"],"mappings":""}

package/dist/components/compositions/cards/ElementListCard.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,79 @@
+import e from "../../ui/card/Card.js";
+import t from "../../ui/card/CardContent.js";
+import n from "../../ui/card/CardDescription.js";
+import r from "../../ui/card/CardHeader.js";
+import i from "../../ui/card/CardTitle.js";
+import "../../ui/card/index.js";
+import a from "../../../engine/ElementRenderer.js";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createTextVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, normalizeStyle as h, openBlock as g, renderList as _, toDisplayString as v, unref as y, withCtx as b } from "vue";
+//#region src/components/compositions/cards/ElementListCard.vue?vue&type=script&setup=true&lang.ts
+var x = {
+	key: 0,
+	class: "mb-3 flex flex-col gap-0.5"
+}, S = {
+	key: 0,
+	class: "text-base font-semibold"
+}, C = {
+	key: 1,
+	class: "text-sm text-muted-foreground"
+}, w = /* @__PURE__ */ p({
+	__name: "ElementListCard",
+	props: {
+		title: {},
+		subtitle: {},
+		showCard: {
+			type: Boolean,
+			default: !0
+		},
+		gutterY: { default: "1rem" },
+		gutterX: { default: "1rem" },
+		classList: {},
+		elements: { default: () => [] },
+		item: { default: () => ({}) }
+	},
+	setup(p) {
+		let w = p, T = s(() => w.showCard !== !1), E = s(() => !!w.title || !!w.subtitle), D = s(() => ({
+			rowGap: w.gutterY,
+			columnGap: w.gutterX
+		}));
+		return (s, w) => T.value ? (g(), c(y(e), {
+			key: 0,
+			class: "flex flex-col"
+		}, {
+			default: b(() => [E.value ? (g(), c(y(r), { key: 0 }, {
+				default: b(() => [p.title ? (g(), c(y(i), { key: 0 }, {
+					default: b(() => [d(v(p.title), 1)]),
+					_: 1
+				})) : l("", !0), p.subtitle ? (g(), c(y(n), { key: 1 }, {
+					default: b(() => [d(v(p.subtitle), 1)]),
+					_: 1
+				})) : l("", !0)]),
+				_: 1
+			})) : l("", !0), f(y(t), {
+				class: m(["flex flex-col", [E.value ? "" : "pt-6"]]),
+				style: h(D.value)
+			}, {
+				default: b(() => [(g(!0), u(o, null, _(p.elements, (e) => (g(), c(a, {
+					key: e.id,
+					element: e,
+					item: p.item
+				}, null, 8, ["element", "item"]))), 128))]),
+				_: 1
+			}, 8, ["class", "style"])]),
+			_: 1
+		})) : (g(), u("section", {
+			key: 1,
+			class: "flex flex-col",
+			style: h(D.value),
+			"data-testid": "element-list-bare"
+		}, [E.value ? (g(), u("header", x, [p.title ? (g(), u("h3", S, v(p.title), 1)) : l("", !0), p.subtitle ? (g(), u("p", C, v(p.subtitle), 1)) : l("", !0)])) : l("", !0), (g(!0), u(o, null, _(p.elements, (e) => (g(), c(a, {
+			key: e.id,
+			element: e,
+			item: p.item
+		}, null, 8, ["element", "item"]))), 128))], 4));
+	}
+});
+//#endregion
+export { w as default };
+
+//# sourceMappingURL=ElementListCard.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/cards/ElementListCard.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementListCard.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/compositions/cards/ElementListCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven `element-list` card. Renders a vertical stack of\n * resolved CardElements via `ElementRenderer`.\n *\n * Self-contained — directly mountable in any Vue app:\n *\n *   <ElementListCard\n *     title=\"Personal details\"\n *     :elements=\"[firstName, lastName]\"\n *     :item=\"{ first_name: 'Jane' }\"\n *   />\n *\n * The JSON-driven engine reaches this composition via `CardRenderer`,\n * which is responsible for resolving the card's `elementList: string[]`\n * IDs against the page-level `elements` map and forwarding the\n * resolved CardElement array as the `elements` prop here.\n */\nimport { computed } from \"vue\"\nimport type { CardElement } from \"@/definitions/elements\"\nimport ElementRenderer from \"@/engine/ElementRenderer.vue\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\n\nexport interface ElementListCardProps {\n  title?: string\n  subtitle?: string\n  showCard?: boolean\n  gutterY?: string\n  gutterX?: string\n  classList?: string[] | string\n  /** Resolved child elements (NOT IDs). */\n  elements?: CardElement[]\n  /** Page-level data model passed through to child renderers. */\n  item?: Record<string, unknown>\n}\n\nconst props = withDefaults(defineProps<ElementListCardProps>(), {\n  showCard: true,\n  gutterY: \"1rem\",\n  gutterX: \"1rem\",\n  elements: () => [],\n  item: () => ({}),\n})\n\nconst showChrome = computed<boolean>(() => props.showCard !== false)\n\nconst hasHeader = computed<boolean>(\n  () => Boolean(props.title) || Boolean(props.subtitle),\n)\n\nconst bodyStyle = computed(() => ({\n  rowGap: props.gutterY,\n  columnGap: props.gutterX,\n}))\n</script>\n\n<template>\n  <Card v-if=\"showChrome\" class=\"flex flex-col\">\n    <CardHeader v-if=\"hasHeader\">\n      <CardTitle v-if=\"title\">{{ title }}</CardTitle>\n      <CardDescription v-if=\"subtitle\">\n        {{ subtitle }}\n      </CardDescription>\n    </CardHeader>\n    <CardContent\n      class=\"flex flex-col\"\n      :class=\"[hasHeader ? '' : 'pt-6']\"\n      :style=\"bodyStyle\"\n    >\n      <ElementRenderer\n        v-for=\"element in elements\"\n        :key=\"element.id\"\n        :element=\"element\"\n        :item=\"item\"\n      />\n    </CardContent>\n  </Card>\n  <section\n    v-else\n    class=\"flex flex-col\"\n    :style=\"bodyStyle\"\n    data-testid=\"element-list-bare\"\n  >\n    <header v-if=\"hasHeader\" class=\"mb-3 flex flex-col gap-0.5\">\n      <h3 v-if=\"title\" class=\"text-base font-semibold\">\n        {{ title }}\n      </h3>\n      <p v-if=\"subtitle\" class=\"text-sm text-muted-foreground\">\n        {{ subtitle }}\n      </p>\n    </header>\n    <ElementRenderer\n      v-for=\"element in elements\"\n      :key=\"element.id\"\n      :element=\"element\"\n      :item=\"item\"\n    />\n  </section>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0CA,IAAM,IAAQ,GAQR,IAAa,QAAwB,EAAM,aAAa,EAAK,GAE7D,IAAY,QACV,EAAQ,EAAM,SAAU,EAAQ,EAAM,QAC9C,GAEM,IAAY,SAAgB;GAChC,QAAQ,EAAM;GACd,WAAW,EAAM;EACnB,EAAE;mBAIY,EAAA,SAAA,EAAA,GAAZ,EAmBO,EAAA,CAAA,GAAA;;GAnBiB,OAAM;;oBAMf,CALK,EAAA,SAAA,EAAA,GAAlB,EAKa,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;qBAJoC,CAA9B,EAAA,SAAA,EAAA,GAAjB,EAA+C,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;sBAAZ,CAAA,EAAA,EAAR,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;qBACT,EAAA,YAAA,EAAA,GAAvB,EAEkB,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;sBADF,CAAA,EAAA,EAAX,EAAA,QAAQ,GAAA,CAAA,CAAA,CAAA;;;;oBAGf,EAWc,EAAA,CAAA,GAAA;IAVZ,OAAK,EAAA,CAAC,iBAAe,CACZ,EAAA,QAAS,KAAA,MAAA,CAAA,CAAA;IACjB,OAAK,EAAE,EAAA,KAAS;;qBAGY,EAAA,EAAA,EAAA,GAD7B,EAKE,GAAA,MAAA,EAJkB,EAAA,WAAX,YADT,EAKE,GAAA;KAHC,KAAK,EAAQ;KACJ;KACT,MAAM,EAAA;;;;;cAIb,EAoBU,WAAA;;GAlBR,OAAM;GACL,OAAK,EAAE,EAAA,KAAS;GACjB,eAAY;MAEE,EAAA,SAAA,EAAA,GAAd,EAOS,UAPT,GAOS,CANG,EAAA,SAAA,EAAA,GAAV,EAEK,MAFL,GAEK,EADA,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAED,EAAA,YAAA,EAAA,GAAT,EAEI,KAFJ,GAEI,EADC,EAAA,QAAQ,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,IAAA,EAAA,EAAA,GAGf,EAKE,GAAA,MAAA,EAJkB,EAAA,WAAX,YADT,EAKE,GAAA;GAHC,KAAK,EAAQ;GACJ;GACT,MAAM,EAAA"}

package/dist/components/compositions/cards/GridViewCard.js

@@ -0,0 +1,7 @@
+import e from "./GridViewCard.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/cards/GridViewCard.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=GridViewCard.js.map

package/dist/components/compositions/cards/GridViewCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridViewCard.js","names":[],"sources":["../../../../src/components/compositions/cards/GridViewCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven `grid-view` composition — a responsive CSS-grid layout\n * driven by `gridLayout`. Each `GridItem.i` is matched to one of the\n * resolved `cards` (or `gridElements`) by `id` and rendered into a CSS\n * grid cell using the item's `x`, `y`, `w`, `h` coordinates.\n *\n * Self-contained — directly mountable in any Vue app:\n *\n *   <GridViewCard\n *     :grid-layout=\"layout\"\n *     :cards=\"[chartCard, feedCard]\"\n *     :item=\"dataModel\"\n *   />\n *\n * The full vue-grid-layout drag/resize behaviour from v2 is not yet\n * implemented; this composition focuses on the static visual layout.\n */\nimport { computed } from \"vue\"\nimport type { CardElement } from \"@/definitions/elements\"\nimport type { DisplayCard } from \"@/definitions/cards\"\nimport type {\n  GridBreakpoint,\n  GridItem,\n  GridLayout,\n} from \"@/definitions/cards/GridViewCard\"\nimport CardRenderer from \"@/engine/CardRenderer.vue\"\nimport ElementRenderer from \"@/engine/ElementRenderer.vue\"\n\nexport interface GridViewCardProps {\n  title?: string\n  subtitle?: string\n  showCard?: boolean\n  /** Per-breakpoint item layout map. */\n  gridLayout?: GridLayout\n  /** Pixel height of a single grid row. */\n  rowHeight?: number\n  /** Horizontal and vertical gap between items, in pixels. */\n  margin?: [number, number]\n  /** Padding around the entire grid container, in pixels. */\n  containerPadding?: [number, number]\n  /** Column count per breakpoint. */\n  cols?: Partial<Record<GridBreakpoint, number>>\n  /** Resolved nested cards (NOT IDs). */\n  cards?: DisplayCard[]\n  /** Resolved nested elements (NOT IDs) for grid items that target elements. */\n  gridElements?: CardElement[]\n  /** Page-level data model passed through to child renderers. */\n  item?: Record<string, unknown>\n}\n\nconst props = withDefaults(defineProps<GridViewCardProps>(), {\n  showCard: true,\n  rowHeight: 150,\n  margin: () => [10, 10] as [number, number],\n  containerPadding: () => [10, 10] as [number, number],\n  cards: () => [],\n  gridElements: () => [],\n  item: () => ({}),\n})\n\nconst BREAKPOINT_PRIORITY: GridBreakpoint[] = [\n  \"xxl\",\n  \"xl\",\n  \"lg\",\n  \"md\",\n  \"sm\",\n  \"xs\",\n  \"xxs\",\n]\n\nconst items = computed<GridItem[]>(() => {\n  const layout = props.gridLayout ?? {}\n  for (const bp of BREAKPOINT_PRIORITY) {\n    const entry = layout[bp]\n    if (entry && entry.length > 0) {\n      return entry\n    }\n  }\n  return []\n})\n\nconst columnCount = computed<number>(() => {\n  const cols = props.cols ?? {}\n  for (const bp of BREAKPOINT_PRIORITY) {\n    if (typeof cols[bp] === \"number\") {\n      return cols[bp] as number\n    }\n  }\n  return 12\n})\n\nconst gridStyle = computed(() => ({\n  display: \"grid\",\n  gridTemplateColumns: `repeat(${columnCount.value}, minmax(0, 1fr))`,\n  gridAutoRows: `${props.rowHeight}px`,\n  columnGap: `${props.margin[0]}px`,\n  rowGap: `${props.margin[1]}px`,\n  padding: `${props.containerPadding[1]}px ${props.containerPadding[0]}px`,\n}))\n\nfunction cellStyle(slot: GridItem): Record<string, string> {\n  return {\n    gridColumn: `${slot.x + 1} / span ${slot.w}`,\n    gridRow: `${slot.y + 1} / span ${slot.h}`,\n  }\n}\n\nconst cardById = computed<Record<string, DisplayCard>>(() => {\n  const out: Record<string, DisplayCard> = {}\n  for (const c of props.cards) {\n    out[c.id] = c\n  }\n  return out\n})\n\nconst elementById = computed<Record<string, CardElement>>(() => {\n  const out: Record<string, CardElement> = {}\n  for (const e of props.gridElements) {\n    out[e.id] = e\n  }\n  return out\n})\n\nfunction resolveCard(id: string): DisplayCard | undefined {\n  return cardById.value[id]\n}\n\nfunction resolveElement(id: string): CardElement | undefined {\n  return elementById.value[id]\n}\n\nconst showChrome = computed<boolean>(() => props.showCard !== false)\n</script>\n\n<template>\n  <section\n    :class=\"[\n      'gxp-grid-view',\n      showChrome\n        ? 'rounded-lg border bg-card text-card-foreground shadow-sm p-4'\n        : '',\n    ]\"\n  >\n    <header\n      v-if=\"title || subtitle\"\n      class=\"mb-3 flex flex-col gap-0.5\"\n    >\n      <h3 v-if=\"title\" class=\"text-base font-semibold\">{{ title }}</h3>\n      <p v-if=\"subtitle\" class=\"text-sm text-muted-foreground\">\n        {{ subtitle }}\n      </p>\n    </header>\n    <div\n      v-if=\"items.length > 0\"\n      :style=\"gridStyle\"\n      data-testid=\"grid-view-container\"\n    >\n      <div\n        v-for=\"slot in items\"\n        :key=\"slot.i\"\n        :style=\"cellStyle(slot)\"\n        :data-grid-item-id=\"slot.i\"\n        :class=\"[\n          'gxp-grid-view__cell',\n          slot.options?.displayBorder ? 'border rounded-md p-2' : '',\n        ]\"\n      >\n        <CardRenderer\n          v-if=\"resolveCard(slot.i)\"\n          :card=\"resolveCard(slot.i)!\"\n          :item=\"item\"\n        />\n        <ElementRenderer\n          v-else-if=\"resolveElement(slot.i)\"\n          :element=\"resolveElement(slot.i)!\"\n          :item=\"item\"\n        />\n      </div>\n    </div>\n    <p\n      v-else\n      class=\"text-sm text-muted-foreground italic\"\n      data-testid=\"grid-view-empty\"\n    >\n      No grid items to display.\n    </p>\n  </section>\n</template>\n"],"mappings":""}