@gxp-dev/mod-ui 2.0.10 → 2.0.12

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

@@ -0,0 +1,109 @@
+import e from "../../../engine/ElementRenderer.js";
+import t from "../../../engine/CardRenderer.js";
+import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, openBlock as u, renderList as d, toDisplayString as f } from "vue";
+//#region src/components/compositions/cards/GridViewCard.vue?vue&type=script&setup=true&lang.ts
+var p = {
+	key: 0,
+	class: "mb-3 flex flex-col gap-0.5"
+}, m = {
+	key: 0,
+	class: "text-base font-semibold"
+}, h = {
+	key: 1,
+	class: "text-sm text-muted-foreground"
+}, g = ["data-grid-item-id"], _ = {
+	key: 2,
+	class: "text-sm text-muted-foreground italic",
+	"data-testid": "grid-view-empty"
+}, v = /* @__PURE__ */ s({
+	__name: "GridViewCard",
+	props: {
+		title: {},
+		subtitle: {},
+		showCard: {
+			type: Boolean,
+			default: !0
+		},
+		gridLayout: {},
+		rowHeight: { default: 150 },
+		margin: { default: () => [10, 10] },
+		containerPadding: { default: () => [10, 10] },
+		cols: {},
+		cards: { default: () => [] },
+		gridElements: { default: () => [] },
+		item: { default: () => ({}) }
+	},
+	setup(s) {
+		let v = s, y = [
+			"xxl",
+			"xl",
+			"lg",
+			"md",
+			"sm",
+			"xs",
+			"xxs"
+		], b = r(() => {
+			let e = v.gridLayout ?? {};
+			for (let t of y) {
+				let n = e[t];
+				if (n && n.length > 0) return n;
+			}
+			return [];
+		}), x = r(() => {
+			let e = v.cols ?? {};
+			for (let t of y) if (typeof e[t] == "number") return e[t];
+			return 12;
+		}), S = r(() => ({
+			display: "grid",
+			gridTemplateColumns: `repeat(${x.value}, minmax(0, 1fr))`,
+			gridAutoRows: `${v.rowHeight}px`,
+			columnGap: `${v.margin[0]}px`,
+			rowGap: `${v.margin[1]}px`,
+			padding: `${v.containerPadding[1]}px ${v.containerPadding[0]}px`
+		}));
+		function C(e) {
+			return {
+				gridColumn: `${e.x + 1} / span ${e.w}`,
+				gridRow: `${e.y + 1} / span ${e.h}`
+			};
+		}
+		let w = r(() => {
+			let e = {};
+			for (let t of v.cards) e[t.id] = t;
+			return e;
+		}), T = r(() => {
+			let e = {};
+			for (let t of v.gridElements) e[t.id] = t;
+			return e;
+		});
+		function E(e) {
+			return w.value[e];
+		}
+		function D(e) {
+			return T.value[e];
+		}
+		let O = r(() => v.showCard !== !1);
+		return (r, v) => (u(), o("section", { class: c(["gxp-grid-view", O.value ? "rounded-lg border bg-card text-card-foreground shadow-sm p-4" : ""]) }, [s.title || s.subtitle ? (u(), o("header", p, [s.title ? (u(), o("h3", m, f(s.title), 1)) : a("", !0), s.subtitle ? (u(), o("p", h, f(s.subtitle), 1)) : a("", !0)])) : a("", !0), b.value.length > 0 ? (u(), o("div", {
+			key: 1,
+			style: l(S.value),
+			"data-testid": "grid-view-container"
+		}, [(u(!0), o(n, null, d(b.value, (n) => (u(), o("div", {
+			key: n.i,
+			style: l(C(n)),
+			"data-grid-item-id": n.i,
+			class: c(["gxp-grid-view__cell", n.options?.displayBorder ? "border rounded-md p-2" : ""])
+		}, [E(n.i) ? (u(), i(t, {
+			key: 0,
+			card: E(n.i),
+			item: s.item
+		}, null, 8, ["card", "item"])) : D(n.i) ? (u(), i(e, {
+			key: 1,
+			element: D(n.i),
+			item: s.item
+		}, null, 8, ["element", "item"])) : a("", !0)], 14, g))), 128))], 4)) : (u(), o("p", _, " No grid items to display. "))], 2));
+	}
+});
+//#endregion
+export { v as default };
+
+//# sourceMappingURL=GridViewCard.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GridViewCard.vue_vue_type_script_setup_true_lang.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmDA,IAAM,IAAQ,GAUR,IAAwC;GAC5C;GACA;GACA;GACA;GACA;GACA;GACA;EACF,GAEM,IAAQ,QAA2B;GACvC,IAAM,IAAS,EAAM,cAAc,CAAC;GACpC,KAAK,IAAM,KAAM,GAAqB;IACpC,IAAM,IAAQ,EAAO;IACrB,IAAI,KAAS,EAAM,SAAS,GAC1B,OAAO;GAEX;GACA,OAAO,CAAC;EACV,CAAC,GAEK,IAAc,QAAuB;GACzC,IAAM,IAAO,EAAM,QAAQ,CAAC;GAC5B,KAAK,IAAM,KAAM,GACf,IAAI,OAAO,EAAK,MAAQ,UACtB,OAAO,EAAK;GAGhB,OAAO;EACT,CAAC,GAEK,IAAY,SAAgB;GAChC,SAAS;GACT,qBAAqB,UAAU,EAAY,MAAM;GACjD,cAAc,GAAG,EAAM,UAAU;GACjC,WAAW,GAAG,EAAM,OAAO,GAAG;GAC9B,QAAQ,GAAG,EAAM,OAAO,GAAG;GAC3B,SAAS,GAAG,EAAM,iBAAiB,GAAG,KAAK,EAAM,iBAAiB,GAAG;EACvE,EAAE;EAEF,SAAS,EAAU,GAAwC;GACzD,OAAO;IACL,YAAY,GAAG,EAAK,IAAI,EAAE,UAAU,EAAK;IACzC,SAAS,GAAG,EAAK,IAAI,EAAE,UAAU,EAAK;GACxC;EACF;EAEA,IAAM,IAAW,QAA4C;GAC3D,IAAM,IAAmC,CAAC;GAC1C,KAAK,IAAM,KAAK,EAAM,OACpB,EAAI,EAAE,MAAM;GAEd,OAAO;EACT,CAAC,GAEK,IAAc,QAA4C;GAC9D,IAAM,IAAmC,CAAC;GAC1C,KAAK,IAAM,KAAK,EAAM,cACpB,EAAI,EAAE,MAAM;GAEd,OAAO;EACT,CAAC;EAED,SAAS,EAAY,GAAqC;GACxD,OAAO,EAAS,MAAM;EACxB;EAEA,SAAS,EAAe,GAAqC;GAC3D,OAAO,EAAY,MAAM;EAC3B;EAEA,IAAM,IAAa,QAAwB,EAAM,aAAa,EAAK;yBAIjE,EAmDU,WAAA,EAlDP,OAAK,EAAA,CAAA,iBAAiC,EAAA,QAAA,iEAAA,EAAA,CAAA,EAAA,GAAA,CAQ/B,EAAA,SAAS,EAAA,YAAA,EAAA,GADjB,EAQS,UART,GAQS,CAJG,EAAA,SAAA,EAAA,GAAV,EAAiE,MAAjE,GAAiE,EAAb,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAChD,EAAA,YAAA,EAAA,GAAT,EAEI,KAFJ,GAEI,EADC,EAAA,QAAQ,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAIP,EAAA,MAAM,SAAM,KAAA,EAAA,GADpB,EA0BM,OAAA;;GAxBH,OAAK,EAAE,EAAA,KAAS;GACjB,eAAY;cAEZ,EAoBM,GAAA,MAAA,EAnBW,EAAA,QAAR,YADT,EAoBM,OAAA;GAlBH,KAAK,EAAK;GACV,OAAK,EAAE,EAAU,CAAI,CAAA;GACrB,qBAAmB,EAAK;GACxB,OAAK,EAAA,CAAA,uBAA+C,EAAK,SAAS,gBAAa,0BAAA,EAAA,CAAA;MAMxE,EAAY,EAAK,CAAC,KAAA,EAAA,GAD1B,EAIE,GAAA;;GAFC,MAAM,EAAY,EAAK,CAAC;GACxB,MAAM,EAAA;mCAGI,EAAe,EAAK,CAAC,KAAA,EAAA,GADlC,EAIE,GAAA;;GAFC,SAAS,EAAe,EAAK,CAAC;GAC9B,MAAM,EAAA;gFAIb,EAMI,KANJ,GAIC,6BAED,EAAA,GAAA,CAAA"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"InfoCard.js","names":[],"sources":["../../../../src/components/compositions/cards/InfoCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven `info-card` composition. Renders a read-only summary\n * tile: optional icon header, title, subtitle, and a list of\n * `{ label, value, icon? }` rows resolved from the data model.\n *\n * Self-contained — directly mountable in any Vue app:\n *\n *   <InfoCard\n *     title=\"Account summary\"\n *     icon=\"user\"\n *     :fields=\"[{ label: 'Name', value: 'user.name' }]\"\n *     :item=\"{ user: { name: 'Jane' } }\"\n *   />\n *\n * `field.value` is treated as a dot-path into `item`. When the path\n * resolves to `undefined` / `null` the row still renders so the label\n * remains visible — this matches v2 behaviour for info tiles.\n */\nimport { computed } from \"vue\"\nimport type { InfoCardField } from \"@/definitions/cards/InfoCard\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\n\nexport interface InfoCardProps {\n  title?: string\n  subtitle?: string\n  showCard?: boolean\n  icon?: string\n  iconColor?: string\n  headerImage?: string\n  defaultHeaderImage?: string\n  headerRatio?: string\n  fields?: InfoCardField[]\n  bodyClassList?: string[] | string\n  lessPadding?: boolean\n  /** Page-level data model used to resolve `field.value` dot-paths. */\n  item?: Record<string, unknown>\n}\n\nconst props = withDefaults(defineProps<InfoCardProps>(), {\n  showCard: true,\n  fields: () => [],\n  lessPadding: false,\n  item: () => ({}),\n})\n\nconst showChrome = computed<boolean>(() => props.showCard !== false)\n\nconst hasHeader = computed<boolean>(\n  () =>\n    Boolean(props.title) ||\n    Boolean(props.subtitle) ||\n    Boolean(props.icon),\n)\n\nconst fieldList = computed<InfoCardField[]>(() => props.fields ?? [])\n\nconst bodyClass = computed(() => {\n  const list = props.bodyClassList\n  if (!list) {\n    return \"\"\n  }\n  return Array.isArray(list) ? list.join(\" \") : list\n})\n\nfunction resolvePath(item: Record<string, unknown>, path: string): unknown {\n  if (!path) {\n    return undefined\n  }\n  const segments = path.split(\".\")\n  let cursor: unknown = item\n  for (const seg of segments) {\n    if (cursor === null || cursor === undefined) {\n      return undefined\n    }\n    if (typeof cursor !== \"object\") {\n      return undefined\n    }\n    cursor = (cursor as Record<string, unknown>)[seg]\n  }\n  return cursor\n}\n\nfunction fieldClass(field: InfoCardField): string {\n  const list = field.classList\n  if (!list) {\n    return \"\"\n  }\n  return Array.isArray(list) ? list.join(\" \") : list\n}\n\nfunction formatValue(field: InfoCardField, raw: unknown): string {\n  if (raw === undefined || raw === null || raw === \"\") {\n    return \"\"\n  }\n  const text = typeof raw === \"string\" ? raw : String(raw)\n  return `${field.prepend ?? \"\"}${text}${field.append ?? \"\"}`\n}\n\nfunction valueFor(field: InfoCardField): string {\n  return formatValue(field, resolvePath(props.item, field.value))\n}\n</script>\n\n<template>\n  <Card v-if=\"showChrome\" class=\"flex flex-col\">\n    <CardHeader v-if=\"hasHeader\" class=\"flex flex-row items-start gap-3\">\n      <span\n        v-if=\"icon\"\n        class=\"text-2xl leading-none\"\n        :style=\"{ color: iconColor ?? undefined }\"\n        :data-testid=\"`info-card-icon-${icon}`\"\n        aria-hidden=\"true\"\n      >\n        {{ icon }}\n      </span>\n      <div class=\"flex flex-col gap-1.5\">\n        <CardTitle v-if=\"title\">{{ title }}</CardTitle>\n        <CardDescription v-if=\"subtitle\">\n          {{ subtitle }}\n        </CardDescription>\n      </div>\n    </CardHeader>\n    <CardContent\n      :class=\"[\n        bodyClass,\n        lessPadding ? 'p-3' : '',\n        hasHeader ? '' : 'pt-6',\n      ]\"\n    >\n      <dl\n        v-if=\"fieldList.length\"\n        class=\"flex flex-col gap-2\"\n        data-testid=\"info-card-fields\"\n      >\n        <div\n          v-for=\"(field, index) in fieldList\"\n          :key=\"`${field.value}-${index}`\"\n          class=\"flex items-baseline justify-between gap-3\"\n          data-testid=\"info-card-field\"\n        >\n          <dt class=\"flex items-center gap-1.5 text-sm text-muted-foreground\">\n            <span\n              v-if=\"field.icon\"\n              class=\"text-base leading-none\"\n              :data-testid=\"`info-card-field-icon-${field.icon}`\"\n              aria-hidden=\"true\"\n            >\n              {{ field.icon }}\n            </span>\n            <span v-if=\"field.label\">{{ field.label }}</span>\n          </dt>\n          <dd\n            class=\"text-sm font-medium text-foreground\"\n            :class=\"fieldClass(field)\"\n            data-testid=\"info-card-field-value\"\n          >\n            {{ valueFor(field) }}\n          </dd>\n        </div>\n      </dl>\n    </CardContent>\n  </Card>\n  <section\n    v-else\n    class=\"flex flex-col gap-2\"\n    data-testid=\"info-card-bare\"\n  >\n    <header v-if=\"hasHeader\" class=\"flex flex-row items-start gap-3\">\n      <span\n        v-if=\"icon\"\n        class=\"text-2xl leading-none\"\n        :style=\"{ color: iconColor ?? undefined }\"\n        :data-testid=\"`info-card-icon-${icon}`\"\n        aria-hidden=\"true\"\n      >\n        {{ icon }}\n      </span>\n      <div class=\"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      </div>\n    </header>\n    <dl\n      v-if=\"fieldList.length\"\n      class=\"flex flex-col gap-2\"\n      data-testid=\"info-card-fields\"\n    >\n      <div\n        v-for=\"(field, index) in fieldList\"\n        :key=\"`${field.value}-${index}`\"\n        class=\"flex items-baseline justify-between gap-3\"\n        data-testid=\"info-card-field\"\n      >\n        <dt class=\"flex items-center gap-1.5 text-sm text-muted-foreground\">\n          <span\n            v-if=\"field.icon\"\n            class=\"text-base leading-none\"\n            :data-testid=\"`info-card-field-icon-${field.icon}`\"\n            aria-hidden=\"true\"\n          >\n            {{ field.icon }}\n          </span>\n          <span v-if=\"field.label\">{{ field.label }}</span>\n        </dt>\n        <dd\n          class=\"text-sm font-medium text-foreground\"\n          :class=\"fieldClass(field)\"\n          data-testid=\"info-card-field-value\"\n        >\n          {{ valueFor(field) }}\n        </dd>\n      </div>\n    </dl>\n  </section>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,145 @@
+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 { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode 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/InfoCard.vue?vue&type=script&setup=true&lang.ts
+var x = ["data-testid"], S = { class: "flex flex-col gap-1.5" }, C = {
+	key: 0,
+	class: "flex flex-col gap-2",
+	"data-testid": "info-card-fields"
+}, w = { class: "flex items-center gap-1.5 text-sm text-muted-foreground" }, T = ["data-testid"], E = { key: 1 }, D = {
+	key: 1,
+	class: "flex flex-col gap-2",
+	"data-testid": "info-card-bare"
+}, O = {
+	key: 0,
+	class: "flex flex-row items-start gap-3"
+}, k = ["data-testid"], A = { class: "flex flex-col gap-0.5" }, j = {
+	key: 0,
+	class: "text-base font-semibold"
+}, M = {
+	key: 1,
+	class: "text-sm text-muted-foreground"
+}, N = {
+	key: 1,
+	class: "flex flex-col gap-2",
+	"data-testid": "info-card-fields"
+}, P = { class: "flex items-center gap-1.5 text-sm text-muted-foreground" }, F = ["data-testid"], I = { key: 1 }, L = /* @__PURE__ */ p({
+	__name: "InfoCard",
+	props: {
+		title: {},
+		subtitle: {},
+		showCard: {
+			type: Boolean,
+			default: !0
+		},
+		icon: {},
+		iconColor: {},
+		headerImage: {},
+		defaultHeaderImage: {},
+		headerRatio: {},
+		fields: { default: () => [] },
+		bodyClassList: {},
+		lessPadding: {
+			type: Boolean,
+			default: !1
+		},
+		item: { default: () => ({}) }
+	},
+	setup(p) {
+		let L = p, R = o(() => L.showCard !== !1), z = o(() => !!L.title || !!L.subtitle || !!L.icon), B = o(() => L.fields ?? []), V = o(() => {
+			let e = L.bodyClassList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		});
+		function H(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 U(e) {
+			let t = e.classList;
+			return t ? Array.isArray(t) ? t.join(" ") : t : "";
+		}
+		function W(e, t) {
+			if (t == null || t === "") return "";
+			let n = typeof t == "string" ? t : String(t);
+			return `${e.prepend ?? ""}${n}${e.append ?? ""}`;
+		}
+		function G(e) {
+			return W(e, H(L.item, e.value));
+		}
+		return (o, L) => R.value ? (g(), s(y(e), {
+			key: 0,
+			class: "flex flex-col"
+		}, {
+			default: b(() => [z.value ? (g(), s(y(r), {
+				key: 0,
+				class: "flex flex-row items-start gap-3"
+			}, {
+				default: b(() => [p.icon ? (g(), l("span", {
+					key: 0,
+					class: "text-2xl leading-none",
+					style: h({ color: p.iconColor ?? void 0 }),
+					"data-testid": `info-card-icon-${p.icon}`,
+					"aria-hidden": "true"
+				}, v(p.icon), 13, x)) : c("", !0), u("div", S, [p.title ? (g(), s(y(i), { key: 0 }, {
+					default: b(() => [d(v(p.title), 1)]),
+					_: 1
+				})) : c("", !0), p.subtitle ? (g(), s(y(n), { key: 1 }, {
+					default: b(() => [d(v(p.subtitle), 1)]),
+					_: 1
+				})) : c("", !0)])]),
+				_: 1
+			})) : c("", !0), f(y(t), { class: m([
+				V.value,
+				p.lessPadding ? "p-3" : "",
+				z.value ? "" : "pt-6"
+			]) }, {
+				default: b(() => [B.value.length ? (g(), l("dl", C, [(g(!0), l(a, null, _(B.value, (e, t) => (g(), l("div", {
+					key: `${e.value}-${t}`,
+					class: "flex items-baseline justify-between gap-3",
+					"data-testid": "info-card-field"
+				}, [u("dt", w, [e.icon ? (g(), l("span", {
+					key: 0,
+					class: "text-base leading-none",
+					"data-testid": `info-card-field-icon-${e.icon}`,
+					"aria-hidden": "true"
+				}, v(e.icon), 9, T)) : c("", !0), e.label ? (g(), l("span", E, v(e.label), 1)) : c("", !0)]), u("dd", {
+					class: m(["text-sm font-medium text-foreground", U(e)]),
+					"data-testid": "info-card-field-value"
+				}, v(G(e)), 3)]))), 128))])) : c("", !0)]),
+				_: 1
+			}, 8, ["class"])]),
+			_: 1
+		})) : (g(), l("section", D, [z.value ? (g(), l("header", O, [p.icon ? (g(), l("span", {
+			key: 0,
+			class: "text-2xl leading-none",
+			style: h({ color: p.iconColor ?? void 0 }),
+			"data-testid": `info-card-icon-${p.icon}`,
+			"aria-hidden": "true"
+		}, v(p.icon), 13, k)) : c("", !0), u("div", A, [p.title ? (g(), l("h3", j, v(p.title), 1)) : c("", !0), p.subtitle ? (g(), l("p", M, v(p.subtitle), 1)) : c("", !0)])])) : c("", !0), B.value.length ? (g(), l("dl", N, [(g(!0), l(a, null, _(B.value, (e, t) => (g(), l("div", {
+			key: `${e.value}-${t}`,
+			class: "flex items-baseline justify-between gap-3",
+			"data-testid": "info-card-field"
+		}, [u("dt", P, [e.icon ? (g(), l("span", {
+			key: 0,
+			class: "text-base leading-none",
+			"data-testid": `info-card-field-icon-${e.icon}`,
+			"aria-hidden": "true"
+		}, v(e.icon), 9, F)) : c("", !0), e.label ? (g(), l("span", I, v(e.label), 1)) : c("", !0)]), u("dd", {
+			class: m(["text-sm font-medium text-foreground", U(e)]),
+			"data-testid": "info-card-field-value"
+		}, v(G(e)), 3)]))), 128))])) : c("", !0)]));
+	}
+});
+//#endregion
+export { L as default };
+
+//# sourceMappingURL=InfoCard.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InfoCard.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/compositions/cards/InfoCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven `info-card` composition. Renders a read-only summary\n * tile: optional icon header, title, subtitle, and a list of\n * `{ label, value, icon? }` rows resolved from the data model.\n *\n * Self-contained — directly mountable in any Vue app:\n *\n *   <InfoCard\n *     title=\"Account summary\"\n *     icon=\"user\"\n *     :fields=\"[{ label: 'Name', value: 'user.name' }]\"\n *     :item=\"{ user: { name: 'Jane' } }\"\n *   />\n *\n * `field.value` is treated as a dot-path into `item`. When the path\n * resolves to `undefined` / `null` the row still renders so the label\n * remains visible — this matches v2 behaviour for info tiles.\n */\nimport { computed } from \"vue\"\nimport type { InfoCardField } from \"@/definitions/cards/InfoCard\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\n\nexport interface InfoCardProps {\n  title?: string\n  subtitle?: string\n  showCard?: boolean\n  icon?: string\n  iconColor?: string\n  headerImage?: string\n  defaultHeaderImage?: string\n  headerRatio?: string\n  fields?: InfoCardField[]\n  bodyClassList?: string[] | string\n  lessPadding?: boolean\n  /** Page-level data model used to resolve `field.value` dot-paths. */\n  item?: Record<string, unknown>\n}\n\nconst props = withDefaults(defineProps<InfoCardProps>(), {\n  showCard: true,\n  fields: () => [],\n  lessPadding: false,\n  item: () => ({}),\n})\n\nconst showChrome = computed<boolean>(() => props.showCard !== false)\n\nconst hasHeader = computed<boolean>(\n  () =>\n    Boolean(props.title) ||\n    Boolean(props.subtitle) ||\n    Boolean(props.icon),\n)\n\nconst fieldList = computed<InfoCardField[]>(() => props.fields ?? [])\n\nconst bodyClass = computed(() => {\n  const list = props.bodyClassList\n  if (!list) {\n    return \"\"\n  }\n  return Array.isArray(list) ? list.join(\" \") : list\n})\n\nfunction resolvePath(item: Record<string, unknown>, path: string): unknown {\n  if (!path) {\n    return undefined\n  }\n  const segments = path.split(\".\")\n  let cursor: unknown = item\n  for (const seg of segments) {\n    if (cursor === null || cursor === undefined) {\n      return undefined\n    }\n    if (typeof cursor !== \"object\") {\n      return undefined\n    }\n    cursor = (cursor as Record<string, unknown>)[seg]\n  }\n  return cursor\n}\n\nfunction fieldClass(field: InfoCardField): string {\n  const list = field.classList\n  if (!list) {\n    return \"\"\n  }\n  return Array.isArray(list) ? list.join(\" \") : list\n}\n\nfunction formatValue(field: InfoCardField, raw: unknown): string {\n  if (raw === undefined || raw === null || raw === \"\") {\n    return \"\"\n  }\n  const text = typeof raw === \"string\" ? raw : String(raw)\n  return `${field.prepend ?? \"\"}${text}${field.append ?? \"\"}`\n}\n\nfunction valueFor(field: InfoCardField): string {\n  return formatValue(field, resolvePath(props.item, field.value))\n}\n</script>\n\n<template>\n  <Card v-if=\"showChrome\" class=\"flex flex-col\">\n    <CardHeader v-if=\"hasHeader\" class=\"flex flex-row items-start gap-3\">\n      <span\n        v-if=\"icon\"\n        class=\"text-2xl leading-none\"\n        :style=\"{ color: iconColor ?? undefined }\"\n        :data-testid=\"`info-card-icon-${icon}`\"\n        aria-hidden=\"true\"\n      >\n        {{ icon }}\n      </span>\n      <div class=\"flex flex-col gap-1.5\">\n        <CardTitle v-if=\"title\">{{ title }}</CardTitle>\n        <CardDescription v-if=\"subtitle\">\n          {{ subtitle }}\n        </CardDescription>\n      </div>\n    </CardHeader>\n    <CardContent\n      :class=\"[\n        bodyClass,\n        lessPadding ? 'p-3' : '',\n        hasHeader ? '' : 'pt-6',\n      ]\"\n    >\n      <dl\n        v-if=\"fieldList.length\"\n        class=\"flex flex-col gap-2\"\n        data-testid=\"info-card-fields\"\n      >\n        <div\n          v-for=\"(field, index) in fieldList\"\n          :key=\"`${field.value}-${index}`\"\n          class=\"flex items-baseline justify-between gap-3\"\n          data-testid=\"info-card-field\"\n        >\n          <dt class=\"flex items-center gap-1.5 text-sm text-muted-foreground\">\n            <span\n              v-if=\"field.icon\"\n              class=\"text-base leading-none\"\n              :data-testid=\"`info-card-field-icon-${field.icon}`\"\n              aria-hidden=\"true\"\n            >\n              {{ field.icon }}\n            </span>\n            <span v-if=\"field.label\">{{ field.label }}</span>\n          </dt>\n          <dd\n            class=\"text-sm font-medium text-foreground\"\n            :class=\"fieldClass(field)\"\n            data-testid=\"info-card-field-value\"\n          >\n            {{ valueFor(field) }}\n          </dd>\n        </div>\n      </dl>\n    </CardContent>\n  </Card>\n  <section\n    v-else\n    class=\"flex flex-col gap-2\"\n    data-testid=\"info-card-bare\"\n  >\n    <header v-if=\"hasHeader\" class=\"flex flex-row items-start gap-3\">\n      <span\n        v-if=\"icon\"\n        class=\"text-2xl leading-none\"\n        :style=\"{ color: iconColor ?? undefined }\"\n        :data-testid=\"`info-card-icon-${icon}`\"\n        aria-hidden=\"true\"\n      >\n        {{ icon }}\n      </span>\n      <div class=\"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      </div>\n    </header>\n    <dl\n      v-if=\"fieldList.length\"\n      class=\"flex flex-col gap-2\"\n      data-testid=\"info-card-fields\"\n    >\n      <div\n        v-for=\"(field, index) in fieldList\"\n        :key=\"`${field.value}-${index}`\"\n        class=\"flex items-baseline justify-between gap-3\"\n        data-testid=\"info-card-field\"\n      >\n        <dt class=\"flex items-center gap-1.5 text-sm text-muted-foreground\">\n          <span\n            v-if=\"field.icon\"\n            class=\"text-base leading-none\"\n            :data-testid=\"`info-card-field-icon-${field.icon}`\"\n            aria-hidden=\"true\"\n          >\n            {{ field.icon }}\n          </span>\n          <span v-if=\"field.label\">{{ field.label }}</span>\n        </dt>\n        <dd\n          class=\"text-sm font-medium text-foreground\"\n          :class=\"fieldClass(field)\"\n          data-testid=\"info-card-field-value\"\n        >\n          {{ valueFor(field) }}\n        </dd>\n      </div>\n    </dl>\n  </section>\n</template>\n"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabListCard.js","names":[],"sources":["../../../../src/components/compositions/cards/TabListCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven `tab-list` composition — renders the shadcn-vue Tabs\n * primitive where each panel is a nested DisplayCard rendered via\n * `CardRenderer`. Each tab is a fully-resolved DisplayCard (not an ID\n * lookup).\n *\n * Self-contained — directly mountable in any Vue app:\n *\n *   <TabListCard\n *     v-model=\"activeTab\"\n *     :tabs=\"[generalCard, advancedCard]\"\n *     :item=\"dataModel\"\n *   />\n *\n * The tab label comes from the child card's `title`, falling back to\n * the card's `id`. The first child is the default active tab.\n */\nimport { computed, ref, watch } from \"vue\"\nimport type { DisplayCard } from \"@/definitions/cards\"\nimport type { TabListCardStyle } from \"@/definitions/cards/TabListCard\"\nimport CardRenderer from \"@/engine/CardRenderer.vue\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/components/ui/tabs\"\n\nexport interface TabListCardProps {\n  title?: string\n  subtitle?: string\n  showCard?: boolean\n  /** Resolved tab cards (NOT IDs). */\n  tabs?: DisplayCard[]\n  /** Page-level data model passed through to child renderers. */\n  item?: Record<string, unknown>\n  /** Initial active tab id. Falls back to the first tab. */\n  defaultTab?: string\n  /** Vertical or horizontal nav layout. */\n  style?: TabListCardStyle\n  /** Force the nav bar to render above the panel content. */\n  navOnTop?: boolean\n  /** Hide the nav bar entirely (used when an external nav controls the tabs). */\n  hideNav?: boolean\n}\n\nconst props = withDefaults(defineProps<TabListCardProps>(), {\n  tabs: () => [],\n  item: () => ({}),\n  style: \"default\",\n  navOnTop: false,\n  hideNav: false,\n})\n\nconst activeTab = defineModel<string>(\"modelValue\")\n\nconst tabList = computed<DisplayCard[]>(() => props.tabs ?? [])\n\nconst tabIds = computed<string[]>(() => tabList.value.map((t) => t.id))\n\nfunction labelFor(card: DisplayCard): string {\n  if (card.title) {\n    return card.title\n  }\n  return card.id\n}\n\nconst internalActive = ref<string>(\n  activeTab.value ?? props.defaultTab ?? tabIds.value[0] ?? \"\",\n)\n\nwatch(\n  () => activeTab.value,\n  (next) => {\n    if (next !== undefined && next !== internalActive.value) {\n      internalActive.value = next\n    }\n  },\n)\n\nwatch(\n  () => tabIds.value,\n  (next) => {\n    if (!next.includes(internalActive.value)) {\n      internalActive.value = next[0] ?? \"\"\n      if (activeTab.value !== internalActive.value) {\n        activeTab.value = internalActive.value\n      }\n    }\n  },\n)\n\nfunction onTabChange(value: string | number): void {\n  const id = String(value)\n  internalActive.value = id\n  activeTab.value = id\n}\n\nconst navOnTopComputed = computed<boolean>(\n  () => props.style === \"horizontal\" || props.navOnTop === true,\n)\n\nconst wrapperClass = computed(() => [\n  \"gxp-tab-list\",\n  navOnTopComputed.value ? \"flex flex-col gap-3\" : \"flex flex-row gap-3\",\n])\n</script>\n\n<template>\n  <header v-if=\"title || subtitle\" class=\"mb-3 flex flex-col gap-0.5\">\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  <Tabs\n    v-if=\"tabList.length > 0\"\n    :model-value=\"internalActive\"\n    :default-value=\"defaultTab ?? tabIds[0]\"\n    :class=\"wrapperClass\"\n    :orientation=\"navOnTopComputed ? 'horizontal' : 'vertical'\"\n    @update:model-value=\"onTabChange\"\n  >\n    <TabsList\n      v-if=\"!hideNav\"\n      :class=\"[\n        'inline-flex items-center rounded-md bg-muted p-1',\n        navOnTopComputed ? 'flex-row' : 'flex-col h-auto',\n      ]\"\n    >\n      <TabsTrigger\n        v-for=\"tab in tabList\"\n        :key=\"tab.id\"\n        :value=\"tab.id\"\n        :data-tab-id=\"tab.id\"\n        class=\"rounded-sm px-3 py-1.5 text-sm font-medium data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm\"\n      >\n        {{ labelFor(tab) }}\n      </TabsTrigger>\n    </TabsList>\n    <div class=\"flex-1\">\n      <TabsContent\n        v-for=\"tab in tabList\"\n        :key=\"tab.id\"\n        :value=\"tab.id\"\n        :data-tab-panel-id=\"tab.id\"\n      >\n        <CardRenderer :card=\"tab\" :item=\"item\" />\n      </TabsContent>\n    </div>\n  </Tabs>\n  <p\n    v-else\n    class=\"text-sm text-muted-foreground italic\"\n    data-testid=\"tab-list-empty\"\n  >\n    No tabs to display.\n  </p>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,106 @@
+import e from "../../ui/tabs/Tabs.js";
+import t from "../../ui/tabs/TabsContent.js";
+import n from "../../ui/tabs/TabsList.js";
+import r from "../../ui/tabs/TabsTrigger.js";
+import "../../ui/tabs/index.js";
+import i from "../../../engine/CardRenderer.js";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, mergeModels as m, normalizeClass as h, openBlock as g, ref as _, renderList as v, toDisplayString as y, unref as b, useModel as x, watch as S, withCtx as C } from "vue";
+//#region src/components/compositions/cards/TabListCard.vue?vue&type=script&setup=true&lang.ts
+var w = {
+	key: 0,
+	class: "mb-3 flex flex-col gap-0.5"
+}, T = {
+	key: 0,
+	class: "text-base font-semibold"
+}, E = {
+	key: 1,
+	class: "text-sm text-muted-foreground"
+}, D = { class: "flex-1" }, O = {
+	key: 2,
+	class: "text-sm text-muted-foreground italic",
+	"data-testid": "tab-list-empty"
+}, k = /* @__PURE__ */ p({
+	__name: "TabListCard",
+	props: /* @__PURE__ */ m({
+		title: {},
+		subtitle: {},
+		showCard: { type: Boolean },
+		tabs: { default: () => [] },
+		item: { default: () => ({}) },
+		defaultTab: {},
+		style: { default: "default" },
+		navOnTop: {
+			type: Boolean,
+			default: !1
+		},
+		hideNav: {
+			type: Boolean,
+			default: !1
+		}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(p) {
+		let m = p, k = x(p, "modelValue"), A = o(() => m.tabs ?? []), j = o(() => A.value.map((e) => e.id));
+		function M(e) {
+			return e.title ? e.title : e.id;
+		}
+		let N = _(k.value ?? m.defaultTab ?? j.value[0] ?? "");
+		S(() => k.value, (e) => {
+			e !== void 0 && e !== N.value && (N.value = e);
+		}), S(() => j.value, (e) => {
+			e.includes(N.value) || (N.value = e[0] ?? "", k.value !== N.value && (k.value = N.value));
+		});
+		function P(e) {
+			let t = String(e);
+			N.value = t, k.value = t;
+		}
+		let F = o(() => m.style === "horizontal" || m.navOnTop === !0), I = o(() => ["gxp-tab-list", F.value ? "flex flex-col gap-3" : "flex flex-row gap-3"]);
+		return (o, m) => (g(), l(a, null, [p.title || p.subtitle ? (g(), l("header", w, [p.title ? (g(), l("h3", T, y(p.title), 1)) : c("", !0), p.subtitle ? (g(), l("p", E, y(p.subtitle), 1)) : c("", !0)])) : c("", !0), A.value.length > 0 ? (g(), s(b(e), {
+			key: 1,
+			"model-value": N.value,
+			"default-value": p.defaultTab ?? j.value[0],
+			class: h(I.value),
+			orientation: F.value ? "horizontal" : "vertical",
+			"onUpdate:modelValue": P
+		}, {
+			default: C(() => [p.hideNav ? c("", !0) : (g(), s(b(n), {
+				key: 0,
+				class: h(["inline-flex items-center rounded-md bg-muted p-1", F.value ? "flex-row" : "flex-col h-auto"])
+			}, {
+				default: C(() => [(g(!0), l(a, null, v(A.value, (e) => (g(), s(b(r), {
+					key: e.id,
+					value: e.id,
+					"data-tab-id": e.id,
+					class: "rounded-sm px-3 py-1.5 text-sm font-medium data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
+				}, {
+					default: C(() => [d(y(M(e)), 1)]),
+					_: 2
+				}, 1032, ["value", "data-tab-id"]))), 128))]),
+				_: 1
+			}, 8, ["class"])), u("div", D, [(g(!0), l(a, null, v(A.value, (e) => (g(), s(b(t), {
+				key: e.id,
+				value: e.id,
+				"data-tab-panel-id": e.id
+			}, {
+				default: C(() => [f(i, {
+					card: e,
+					item: p.item
+				}, null, 8, ["card", "item"])]),
+				_: 2
+			}, 1032, ["value", "data-tab-panel-id"]))), 128))])]),
+			_: 1
+		}, 8, [
+			"model-value",
+			"default-value",
+			"class",
+			"orientation"
+		])) : (g(), l("p", O, " No tabs to display. "))], 64));
+	}
+});
+//#endregion
+export { k as default };
+
+//# sourceMappingURL=TabListCard.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabListCard.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../src/components/compositions/cards/TabListCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven `tab-list` composition — renders the shadcn-vue Tabs\n * primitive where each panel is a nested DisplayCard rendered via\n * `CardRenderer`. Each tab is a fully-resolved DisplayCard (not an ID\n * lookup).\n *\n * Self-contained — directly mountable in any Vue app:\n *\n *   <TabListCard\n *     v-model=\"activeTab\"\n *     :tabs=\"[generalCard, advancedCard]\"\n *     :item=\"dataModel\"\n *   />\n *\n * The tab label comes from the child card's `title`, falling back to\n * the card's `id`. The first child is the default active tab.\n */\nimport { computed, ref, watch } from \"vue\"\nimport type { DisplayCard } from \"@/definitions/cards\"\nimport type { TabListCardStyle } from \"@/definitions/cards/TabListCard\"\nimport CardRenderer from \"@/engine/CardRenderer.vue\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/components/ui/tabs\"\n\nexport interface TabListCardProps {\n  title?: string\n  subtitle?: string\n  showCard?: boolean\n  /** Resolved tab cards (NOT IDs). */\n  tabs?: DisplayCard[]\n  /** Page-level data model passed through to child renderers. */\n  item?: Record<string, unknown>\n  /** Initial active tab id. Falls back to the first tab. */\n  defaultTab?: string\n  /** Vertical or horizontal nav layout. */\n  style?: TabListCardStyle\n  /** Force the nav bar to render above the panel content. */\n  navOnTop?: boolean\n  /** Hide the nav bar entirely (used when an external nav controls the tabs). */\n  hideNav?: boolean\n}\n\nconst props = withDefaults(defineProps<TabListCardProps>(), {\n  tabs: () => [],\n  item: () => ({}),\n  style: \"default\",\n  navOnTop: false,\n  hideNav: false,\n})\n\nconst activeTab = defineModel<string>(\"modelValue\")\n\nconst tabList = computed<DisplayCard[]>(() => props.tabs ?? [])\n\nconst tabIds = computed<string[]>(() => tabList.value.map((t) => t.id))\n\nfunction labelFor(card: DisplayCard): string {\n  if (card.title) {\n    return card.title\n  }\n  return card.id\n}\n\nconst internalActive = ref<string>(\n  activeTab.value ?? props.defaultTab ?? tabIds.value[0] ?? \"\",\n)\n\nwatch(\n  () => activeTab.value,\n  (next) => {\n    if (next !== undefined && next !== internalActive.value) {\n      internalActive.value = next\n    }\n  },\n)\n\nwatch(\n  () => tabIds.value,\n  (next) => {\n    if (!next.includes(internalActive.value)) {\n      internalActive.value = next[0] ?? \"\"\n      if (activeTab.value !== internalActive.value) {\n        activeTab.value = internalActive.value\n      }\n    }\n  },\n)\n\nfunction onTabChange(value: string | number): void {\n  const id = String(value)\n  internalActive.value = id\n  activeTab.value = id\n}\n\nconst navOnTopComputed = computed<boolean>(\n  () => props.style === \"horizontal\" || props.navOnTop === true,\n)\n\nconst wrapperClass = computed(() => [\n  \"gxp-tab-list\",\n  navOnTopComputed.value ? \"flex flex-col gap-3\" : \"flex flex-row gap-3\",\n])\n</script>\n\n<template>\n  <header v-if=\"title || subtitle\" class=\"mb-3 flex flex-col gap-0.5\">\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  <Tabs\n    v-if=\"tabList.length > 0\"\n    :model-value=\"internalActive\"\n    :default-value=\"defaultTab ?? tabIds[0]\"\n    :class=\"wrapperClass\"\n    :orientation=\"navOnTopComputed ? 'horizontal' : 'vertical'\"\n    @update:model-value=\"onTabChange\"\n  >\n    <TabsList\n      v-if=\"!hideNav\"\n      :class=\"[\n        'inline-flex items-center rounded-md bg-muted p-1',\n        navOnTopComputed ? 'flex-row' : 'flex-col h-auto',\n      ]\"\n    >\n      <TabsTrigger\n        v-for=\"tab in tabList\"\n        :key=\"tab.id\"\n        :value=\"tab.id\"\n        :data-tab-id=\"tab.id\"\n        class=\"rounded-sm px-3 py-1.5 text-sm font-medium data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm\"\n      >\n        {{ labelFor(tab) }}\n      </TabsTrigger>\n    </TabsList>\n    <div class=\"flex-1\">\n      <TabsContent\n        v-for=\"tab in tabList\"\n        :key=\"tab.id\"\n        :value=\"tab.id\"\n        :data-tab-panel-id=\"tab.id\"\n      >\n        <CardRenderer :card=\"tab\" :item=\"item\" />\n      </TabsContent>\n    </div>\n  </Tabs>\n  <p\n    v-else\n    class=\"text-sm text-muted-foreground italic\"\n    data-testid=\"tab-list-empty\"\n  >\n    No tabs to display.\n  </p>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CA,IAAM,IAAQ,GAQR,IAAY,EAAmB,GAAC,YAAY,GAE5C,IAAU,QAA8B,EAAM,QAAQ,CAAC,CAAC,GAExD,IAAS,QAAyB,EAAQ,MAAM,KAAK,MAAM,EAAE,EAAE,CAAC;EAEtE,SAAS,EAAS,GAA2B;GAI3C,OAHI,EAAK,QACA,EAAK,QAEP,EAAK;EACd;EAEA,IAAM,IAAiB,EACrB,EAAU,SAAS,EAAM,cAAc,EAAO,MAAM,MAAM,EAC5D;EAWA,AATA,QACQ,EAAU,QACf,MAAS;GACR,AAAI,MAAS,KAAA,KAAa,MAAS,EAAe,UAChD,EAAe,QAAQ;EAE3B,CACF,GAEA,QACQ,EAAO,QACZ,MAAS;GACR,AAAK,EAAK,SAAS,EAAe,KAAK,MACrC,EAAe,QAAQ,EAAK,MAAM,IAC9B,EAAU,UAAU,EAAe,UACrC,EAAU,QAAQ,EAAe;EAGvC,CACF;EAEA,SAAS,EAAY,GAA8B;GACjD,IAAM,IAAK,OAAO,CAAK;GAEvB,AADA,EAAe,QAAQ,GACvB,EAAU,QAAQ;EACpB;EAEA,IAAM,IAAmB,QACjB,EAAM,UAAU,gBAAgB,EAAM,aAAa,EAC3D,GAEM,IAAe,QAAe,CAClC,gBACA,EAAiB,QAAQ,wBAAwB,qBACnD,CAAC;qCAIe,EAAA,SAAS,EAAA,YAAA,EAAA,GAAvB,EAKS,UALT,GAKS,CAJG,EAAA,SAAA,EAAA,GAAV,EAAiE,MAAjE,GAAiE,EAAb,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAChD,EAAA,YAAA,EAAA,GAAT,EAEI,KAFJ,GAEI,EADC,EAAA,QAAQ,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA,GAIP,EAAA,MAAQ,SAAM,KAAA,EAAA,GADtB,EAmCO,EAAA,CAAA,GAAA;;GAjCJ,eAAa,EAAA;GACb,iBAAe,EAAA,cAAc,EAAA,MAAM;GACnC,OAAK,EAAE,EAAA,KAAY;GACnB,aAAa,EAAA,QAAgB,eAAA;GAC7B,uBAAoB;;oBAkBV,CAfF,EAAA,uBAAA,EAAA,GADT,EAgBW,EAAA,CAAA,GAAA;;IAdR,OAAK,EAAA,CAAA,oDAAwE,EAAA,QAAgB,aAAA,iBAAA,CAAA;;qBAMtE,EAAA,EAAA,EAAA,GADxB,EAQc,GAAA,MAAA,EAPE,EAAA,QAAP,YADT,EAQc,EAAA,CAAA,GAAA;KANX,KAAK,EAAI;KACT,OAAO,EAAI;KACX,eAAa,EAAI;KAClB,OAAM;;sBAEa,CAAA,EAAA,EAAhB,EAAS,CAAG,CAAA,GAAA,CAAA,CAAA,CAAA;;;;sBAGnB,EASM,OATN,GASM,EAAA,EAAA,EAAA,GARJ,EAOc,GAAA,MAAA,EANE,EAAA,QAAP,YADT,EAOc,EAAA,CAAA,GAAA;IALX,KAAK,EAAI;IACT,OAAO,EAAI;IACX,qBAAmB,EAAI;;qBAEiB,CAAzC,EAAyC,GAAA;KAA1B,MAAM;KAAM,MAAM,EAAA;;;;;;;;;;cAIvC,EAMI,KANJ,GAIC,uBAED,EAAA,GAAA,EAAA"}

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

@@ -1,20 +1,17 @@
-import { computed as n } from "vue";
-function c(r) {
-  return { rows: n(() => {
-    const u = r.item.value, t = r.options.value, e = r.listKey.value, a = r.listData.value;
-    if (t != null && t.searchRoute)
-      return console.debug(
-        "[DataTableCard] searchRoute fetch is stubbed; returning empty rows.",
-        t.searchRoute
-      ), [];
-    if (e) {
-      const s = u[e];
-      return Array.isArray(s) ? s : [];
-    }
-    return Array.isArray(a) ? a : [];
-  }) };
+import { computed as e } from "vue";
+//#region src/components/compositions/cards/useDataTableData.ts
+function t(t) {
+	return { rows: e(() => {
+		let e = t.item.value, n = t.options.value, r = t.listKey.value, i = t.listData.value;
+		if (n?.searchRoute) return console.debug("[DataTableCard] searchRoute fetch is stubbed; returning empty rows.", n.searchRoute), [];
+		if (r) {
+			let t = e[r];
+			return Array.isArray(t) ? t : [];
+		}
+		return Array.isArray(i) ? i : [];
+	}) };
 }
-export {
-  c as useDataTableData
-};
-//# sourceMappingURL=useDataTableData.js.map
+//#endregion
+export { t as useDataTableData };
+
+//# sourceMappingURL=useDataTableData.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useDataTableData.js","sources":["../../../../src/components/compositions/cards/useDataTableData.ts"],"sourcesContent":["/**\n * Source-of-rows composable for `DataTableCard`.\n *\n * Resolves the row array from one of three sources, in priority order:\n *\n *   1. `searchRoute` — remote fetch. Currently a STUB that logs a debug\n *      message and returns `[]`. Real HTTP integration (axios) lands in\n *      a follow-up task.\n *   2. `listKey` — nested array read off `item[listKey]`.\n *   3. `listData` — inline static rows on the card.\n *\n * Falls back to an empty array when no source is configured.\n *\n * Exposed as a composable so tests can intercept the row source\n * without mocking the network layer.\n */\nimport { computed, type ComputedRef, type Ref } from \"vue\"\nimport type { DataTableOptions } from \"@/definitions/cards/DataTableCard\"\n\nexport interface UseDataTableDataOptions {\n  listKey: Ref<string | undefined> | ComputedRef<string | undefined>\n  listData: Ref<unknown[] | undefined> | ComputedRef<unknown[] | undefined>\n  options: Ref<DataTableOptions | undefined> | ComputedRef<DataTableOptions | undefined>\n  item: Ref<Record<string, unknown>> | ComputedRef<Record<string, unknown>>\n}\n\nexport interface UseDataTableDataReturn {\n  rows: ComputedRef<Record<string, unknown>[]>\n}\n\nexport function useDataTableData(\n  opts: UseDataTableDataOptions,\n): UseDataTableDataReturn {\n  const rows = computed<Record<string, unknown>[]>(() => {\n    const i = opts.item.value\n    const o = opts.options.value\n    const listKey = opts.listKey.value\n    const listData = opts.listData.value\n\n    if (o?.searchRoute) {\n      // eslint-disable-next-line no-console\n      console.debug(\n        \"[DataTableCard] searchRoute fetch is stubbed; returning empty rows.\",\n        o.searchRoute,\n      )\n      return []\n    }\n\n    if (listKey) {\n      const raw = i[listKey]\n      if (Array.isArray(raw)) {\n        return raw as Record<string, unknown>[]\n      }\n      return []\n    }\n\n    if (Array.isArray(listData)) {\n      return listData as Record<string, unknown>[]\n    }\n\n    return []\n  })\n\n  return { rows }\n}\n"],"names":["useDataTableData","opts","computed","i","o","listKey","listData","raw"],"mappings":";AA8BO,SAASA,EACdC,GACwB;AA+BxB,SAAO,EAAE,MA9BIC,EAAoC,MAAM;AACrD,UAAMC,IAAIF,EAAK,KAAK,OACdG,IAAIH,EAAK,QAAQ,OACjBI,IAAUJ,EAAK,QAAQ,OACvBK,IAAWL,EAAK,SAAS;AAE/B,QAAIG,KAAA,QAAAA,EAAG;AAEL,qBAAQ;AAAA,QACN;AAAA,QACAA,EAAE;AAAA,MAAA,GAEG,CAAA;AAGT,QAAIC,GAAS;AACX,YAAME,IAAMJ,EAAEE,CAAO;AACrB,aAAI,MAAM,QAAQE,CAAG,IACZA,IAEF,CAAA;AAAA,IACT;AAEA,WAAI,MAAM,QAAQD,CAAQ,IACjBA,IAGF,CAAA;AAAA,EACT,CAAC,EAEQ;AACX;"}
+{"version":3,"file":"useDataTableData.js","names":[],"sources":["../../../../src/components/compositions/cards/useDataTableData.ts"],"sourcesContent":["/**\n * Source-of-rows composable for `DataTableCard`.\n *\n * Resolves the row array from one of three sources, in priority order:\n *\n *   1. `searchRoute` — remote fetch. Currently a STUB that logs a debug\n *      message and returns `[]`. Real HTTP integration (axios) lands in\n *      a follow-up task.\n *   2. `listKey` — nested array read off `item[listKey]`.\n *   3. `listData` — inline static rows on the card.\n *\n * Falls back to an empty array when no source is configured.\n *\n * Exposed as a composable so tests can intercept the row source\n * without mocking the network layer.\n */\nimport { computed, type ComputedRef, type Ref } from \"vue\"\nimport type { DataTableOptions } from \"@/definitions/cards/DataTableCard\"\n\nexport interface UseDataTableDataOptions {\n  listKey: Ref<string | undefined> | ComputedRef<string | undefined>\n  listData: Ref<unknown[] | undefined> | ComputedRef<unknown[] | undefined>\n  options: Ref<DataTableOptions | undefined> | ComputedRef<DataTableOptions | undefined>\n  item: Ref<Record<string, unknown>> | ComputedRef<Record<string, unknown>>\n}\n\nexport interface UseDataTableDataReturn {\n  rows: ComputedRef<Record<string, unknown>[]>\n}\n\nexport function useDataTableData(\n  opts: UseDataTableDataOptions,\n): UseDataTableDataReturn {\n  const rows = computed<Record<string, unknown>[]>(() => {\n    const i = opts.item.value\n    const o = opts.options.value\n    const listKey = opts.listKey.value\n    const listData = opts.listData.value\n\n    if (o?.searchRoute) {\n      // eslint-disable-next-line no-console\n      console.debug(\n        \"[DataTableCard] searchRoute fetch is stubbed; returning empty rows.\",\n        o.searchRoute,\n      )\n      return []\n    }\n\n    if (listKey) {\n      const raw = i[listKey]\n      if (Array.isArray(raw)) {\n        return raw as Record<string, unknown>[]\n      }\n      return []\n    }\n\n    if (Array.isArray(listData)) {\n      return listData as Record<string, unknown>[]\n    }\n\n    return []\n  })\n\n  return { rows }\n}\n"],"mappings":";;AA8BA,SAAgB,EACd,GACwB;CA+BxB,OAAO,EAAE,MA9BI,QAA0C;EACrD,IAAM,IAAI,EAAK,KAAK,OACd,IAAI,EAAK,QAAQ,OACjB,IAAU,EAAK,QAAQ,OACvB,IAAW,EAAK,SAAS;EAE/B,IAAI,GAAG,aAML,OAJA,QAAQ,MACN,uEACA,EAAE,WACJ,GACO,CAAC;EAGV,IAAI,GAAS;GACX,IAAM,IAAM,EAAE;GAId,OAHI,MAAM,QAAQ,CAAG,IACZ,IAEF,CAAC;EACV;EAMA,OAJI,MAAM,QAAQ,CAAQ,IACjB,IAGF,CAAC;CACV,CAES,EAAK;AAChB"}

package/dist/components/compositions/elements/action/ButtonAction.js

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

package/dist/components/compositions/elements/action/ButtonAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonAction.js","names":[],"sources":["../../../../../src/components/compositions/elements/action/ButtonAction.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven button composition. Composes the shadcn `Button`\n * primitive with click / href / emit / confirm behaviour.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <ButtonAction label=\"Save\" variant=\"default\" @click=\"save\" />\n *   <ButtonAction label=\"Docs\" href=\"https://example.com\" target=\"_blank\" />\n *   <ButtonAction label=\"Delete\" variant=\"destructive\" confirm @action=\"onDelete\" />\n *\n * Action elements do NOT use FieldFrame — they're not form inputs and\n * don't need label/help/error chrome.\n */\nimport { computed, ref } from \"vue\"\nimport * as LucideIcons from \"@lucide/vue\"\nimport type { FunctionalComponent } from \"vue\"\n\ntype LucideIcon = FunctionalComponent\n\nimport { Button, type ButtonVariants } from \"@/components/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@/components/ui/dialog\"\n\nexport type ButtonActionVariant =\n  | \"default\"\n  | \"secondary\"\n  | \"destructive\"\n  | \"outline\"\n  | \"ghost\"\n  | \"link\"\n  | \"success\"\n  | \"warning\"\n  | \"info\"\n\nexport type ButtonActionSize = \"sm\" | \"md\" | \"lg\"\n\nexport interface ButtonActionProps {\n  label?: string\n  variant?: ButtonActionVariant\n  size?: ButtonActionSize\n  /** Lucide icon name rendered before the label. */\n  icon?: string\n  /** Navigation target — renders as an anchor when set and confirm is false. */\n  href?: string\n  target?: \"_self\" | \"_blank\" | \"_parent\" | \"_top\"\n  /** Custom event name emitted via `action` when clicked. */\n  emit?: string\n  /** Show a confirmation dialog before firing. */\n  confirm?: boolean\n  /** Confirmation message displayed in the dialog. */\n  confirmMessage?: string\n  disabled?: boolean\n  /** Render full width. */\n  block?: boolean\n  /** HTML name attribute. */\n  name?: string\n  /** HTML id attribute. */\n  id?: string\n}\n\nconst props = withDefaults(defineProps<ButtonActionProps>(), {\n  variant: \"default\",\n  size: \"md\",\n  target: \"_self\",\n})\n\nconst emit = defineEmits<{\n  (e: \"click\", event: MouseEvent): void\n  (e: \"action\", payload: { name: string }): void\n}>()\n\nconst sizeMap: Record<ButtonActionSize, ButtonVariants[\"size\"]> = {\n  sm: \"sm\",\n  md: \"default\",\n  lg: \"lg\",\n}\n\nconst mappedSize = computed<ButtonVariants[\"size\"]>(\n  () => sizeMap[props.size] ?? \"default\",\n)\n\nconst iconLibrary = LucideIcons as unknown as Record<string, LucideIcon>\nfunction resolveIcon(name: string | undefined): LucideIcon | undefined {\n  if (!name) {\n    return undefined\n  }\n  const pascal = name\n    .split(/[-_\\s]/)\n    .filter(Boolean)\n    .map((s) => s.charAt(0).toUpperCase() + s.slice(1))\n    .join(\"\")\n  return iconLibrary[pascal] ?? iconLibrary[name]\n}\nconst icon = computed(() => resolveIcon(props.icon))\n\nconst confirmOpen = ref(false)\n\nfunction performAction(): void {\n  if (props.href) {\n    if (props.target === \"_blank\") {\n      window.open(props.href, \"_blank\")\n    } else {\n      window.location.assign(props.href)\n    }\n    return\n  }\n  if (props.emit) {\n    emit(\"action\", { name: props.emit })\n  }\n}\n\nfunction onClick(event: MouseEvent): void {\n  emit(\"click\", event)\n  if (props.confirm) {\n    event.preventDefault()\n    confirmOpen.value = true\n    return\n  }\n  if (!props.href && props.emit) {\n    event.preventDefault()\n    performAction()\n    return\n  }\n  if (!props.href && !props.emit) {\n    event.preventDefault()\n  }\n}\n\nfunction confirmYes(): void {\n  confirmOpen.value = false\n  performAction()\n}\n\nfunction confirmNo(): void {\n  confirmOpen.value = false\n}\n\nconst renderAs = computed<\"a\" | \"button\">(() =>\n  props.href && !props.confirm ? \"a\" : \"button\",\n)\n</script>\n\n<template>\n  <Button\n    :id=\"id\"\n    :as=\"renderAs\"\n    :variant=\"variant\"\n    :size=\"mappedSize\"\n    :disabled=\"disabled\"\n    :class=\"block ? 'w-full' : ''\"\n    :data-action-name=\"emit ?? label\"\n    :data-element-name=\"name ?? undefined\"\n    :href=\"renderAs === 'a' ? href : undefined\"\n    :target=\"renderAs === 'a' ? target : undefined\"\n    @click=\"onClick\"\n  >\n    <component :is=\"icon\" v-if=\"icon\" class=\"h-4 w-4\" />\n    <span v-if=\"label\">{{ label }}</span>\n  </Button>\n\n  <Dialog v-if=\"confirm\" v-model:open=\"confirmOpen\">\n    <DialogContent>\n      <DialogHeader>\n        <DialogTitle>Confirm action</DialogTitle>\n        <DialogDescription>\n          {{ confirmMessage ?? \"Are you sure you want to continue?\" }}\n        </DialogDescription>\n      </DialogHeader>\n      <DialogFooter>\n        <Button variant=\"outline\" type=\"button\" @click=\"confirmNo\">\n          Cancel\n        </Button>\n        <Button variant=\"default\" type=\"button\" @click=\"confirmYes\">\n          Confirm\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n"],"mappings":""}