@gxp-dev/mod-ui 2.0.0 → 2.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"GridViewCard.vue2.js","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"],"names":["props","__props","BREAKPOINT_PRIORITY","items","computed","layout","bp","entry","columnCount","cols","gridStyle","cellStyle","slot","cardById","out","c","elementById","e","resolveCard","id","resolveElement","showChrome","_createElementBlock","_normalizeClass","_openBlock","_hoisted_1","_hoisted_2","_toDisplayString","_hoisted_3","_Fragment","_renderList","_normalizeStyle","_a","_createBlock","CardRenderer","ElementRenderer","_hoisted_5"],"mappings":"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"}
+{"version":3,"file":"GridViewCard.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/compositions/cards/InfoCard.vue.d.ts

@@ -0,0 +1,24 @@
+import { InfoCardField } from '../../../definitions/cards/InfoCard';
+export interface InfoCardProps {
+    title?: string;
+    subtitle?: string;
+    showCard?: boolean;
+    icon?: string;
+    iconColor?: string;
+    headerImage?: string;
+    defaultHeaderImage?: string;
+    headerRatio?: string;
+    fields?: InfoCardField[];
+    bodyClassList?: string[] | string;
+    lessPadding?: boolean;
+    /** Page-level data model used to resolve `field.value` dot-paths. */
+    item?: Record<string, unknown>;
+}
+declare const _default: import('vue').DefineComponent<InfoCardProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<InfoCardProps> & Readonly<{}>, {
+    showCard: boolean;
+    lessPadding: boolean;
+    fields: InfoCardField[];
+    item: Record<string, unknown>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=InfoCard.vue.d.ts.map

package/dist/components/compositions/cards/InfoCard.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoCard.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/cards/InfoCard.vue"],"names":[],"mappings":"AAuPA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAA;AASjE,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,aAAa,EAAE,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAAA;IACjC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAC/B;;cAXY,OAAO;iBAQJ,OAAO;YAFZ,aAAa,EAAE;UAIjB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;AAkThC,wBAOG"}

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

@@ -1,5 +1,186 @@
-import f from "./InfoCard.vue2.js";
+import { defineComponent as A, computed as x, openBlock as t, createBlock as y, unref as u, withCtx as f, createElementBlock as s, normalizeStyle as k, toDisplayString as l, createCommentVNode as i, createElementVNode as c, createTextVNode as _, createVNode as N, normalizeClass as g, Fragment as $, renderList as C } from "vue";
+import "../../ui/card/index.js";
+import w from "../../ui/card/Card.vue.js";
+import I from "../../ui/card/CardHeader.vue.js";
+import P from "../../ui/card/CardTitle.vue.js";
+import S from "../../ui/card/CardDescription.vue.js";
+import z from "../../ui/card/CardContent.vue.js";
+const E = ["data-testid"], F = { class: "flex flex-col gap-1.5" }, H = {
+  key: 0,
+  class: "flex flex-col gap-2",
+  "data-testid": "info-card-fields"
+}, D = { class: "flex items-center gap-1.5 text-sm text-muted-foreground" }, R = ["data-testid"], T = { key: 1 }, q = {
+  key: 1,
+  class: "flex flex-col gap-2",
+  "data-testid": "info-card-bare"
+}, G = {
+  key: 0,
+  class: "flex flex-row items-start gap-3"
+}, J = ["data-testid"], K = { class: "flex flex-col gap-0.5" }, M = {
+  key: 0,
+  class: "text-base font-semibold"
+}, O = {
+  key: 1,
+  class: "text-sm text-muted-foreground"
+}, Q = {
+  key: 1,
+  class: "flex flex-col gap-2",
+  "data-testid": "info-card-fields"
+}, U = { class: "flex items-center gap-1.5 text-sm text-muted-foreground" }, W = ["data-testid"], X = { key: 1 }, ne = /* @__PURE__ */ A({
+  __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(a) {
+    const r = a, p = x(() => r.showCard !== !1), h = x(
+      () => !!r.title || !!r.subtitle || !!r.icon
+    ), m = x(() => r.fields ?? []), B = x(() => {
+      const o = r.bodyClassList;
+      return o ? Array.isArray(o) ? o.join(" ") : o : "";
+    });
+    function j(o, n) {
+      if (!n)
+        return;
+      const e = n.split(".");
+      let d = o;
+      for (const V of e) {
+        if (d == null || typeof d != "object")
+          return;
+        d = d[V];
+      }
+      return d;
+    }
+    function v(o) {
+      const n = o.classList;
+      return n ? Array.isArray(n) ? n.join(" ") : n : "";
+    }
+    function L(o, n) {
+      if (n == null || n === "")
+        return "";
+      const e = typeof n == "string" ? n : String(n);
+      return `${o.prepend ?? ""}${e}${o.append ?? ""}`;
+    }
+    function b(o) {
+      return L(o, j(r.item, o.value));
+    }
+    return (o, n) => p.value ? (t(), y(u(w), {
+      key: 0,
+      class: "flex flex-col"
+    }, {
+      default: f(() => [
+        h.value ? (t(), y(u(I), {
+          key: 0,
+          class: "flex flex-row items-start gap-3"
+        }, {
+          default: f(() => [
+            a.icon ? (t(), s("span", {
+              key: 0,
+              class: "text-2xl leading-none",
+              style: k({ color: a.iconColor ?? void 0 }),
+              "data-testid": `info-card-icon-${a.icon}`,
+              "aria-hidden": "true"
+            }, l(a.icon), 13, E)) : i("", !0),
+            c("div", F, [
+              a.title ? (t(), y(u(P), { key: 0 }, {
+                default: f(() => [
+                  _(l(a.title), 1)
+                ]),
+                _: 1
+              })) : i("", !0),
+              a.subtitle ? (t(), y(u(S), { key: 1 }, {
+                default: f(() => [
+                  _(l(a.subtitle), 1)
+                ]),
+                _: 1
+              })) : i("", !0)
+            ])
+          ]),
+          _: 1
+        })) : i("", !0),
+        N(u(z), {
+          class: g([
+            B.value,
+            a.lessPadding ? "p-3" : "",
+            h.value ? "" : "pt-6"
+          ])
+        }, {
+          default: f(() => [
+            m.value.length ? (t(), s("dl", H, [
+              (t(!0), s($, null, C(m.value, (e, d) => (t(), s("div", {
+                key: `${e.value}-${d}`,
+                class: "flex items-baseline justify-between gap-3",
+                "data-testid": "info-card-field"
+              }, [
+                c("dt", D, [
+                  e.icon ? (t(), s("span", {
+                    key: 0,
+                    class: "text-base leading-none",
+                    "data-testid": `info-card-field-icon-${e.icon}`,
+                    "aria-hidden": "true"
+                  }, l(e.icon), 9, R)) : i("", !0),
+                  e.label ? (t(), s("span", T, l(e.label), 1)) : i("", !0)
+                ]),
+                c("dd", {
+                  class: g(["text-sm font-medium text-foreground", v(e)]),
+                  "data-testid": "info-card-field-value"
+                }, l(b(e)), 3)
+              ]))), 128))
+            ])) : i("", !0)
+          ]),
+          _: 1
+        }, 8, ["class"])
+      ]),
+      _: 1
+    })) : (t(), s("section", q, [
+      h.value ? (t(), s("header", G, [
+        a.icon ? (t(), s("span", {
+          key: 0,
+          class: "text-2xl leading-none",
+          style: k({ color: a.iconColor ?? void 0 }),
+          "data-testid": `info-card-icon-${a.icon}`,
+          "aria-hidden": "true"
+        }, l(a.icon), 13, J)) : i("", !0),
+        c("div", K, [
+          a.title ? (t(), s("h3", M, l(a.title), 1)) : i("", !0),
+          a.subtitle ? (t(), s("p", O, l(a.subtitle), 1)) : i("", !0)
+        ])
+      ])) : i("", !0),
+      m.value.length ? (t(), s("dl", Q, [
+        (t(!0), s($, null, C(m.value, (e, d) => (t(), s("div", {
+          key: `${e.value}-${d}`,
+          class: "flex items-baseline justify-between gap-3",
+          "data-testid": "info-card-field"
+        }, [
+          c("dt", U, [
+            e.icon ? (t(), s("span", {
+              key: 0,
+              class: "text-base leading-none",
+              "data-testid": `info-card-field-icon-${e.icon}`,
+              "aria-hidden": "true"
+            }, l(e.icon), 9, W)) : i("", !0),
+            e.label ? (t(), s("span", X, l(e.label), 1)) : i("", !0)
+          ]),
+          c("dd", {
+            class: g(["text-sm font-medium text-foreground", v(e)]),
+            "data-testid": "info-card-field-value"
+          }, l(b(e)), 3)
+        ]))), 128))
+      ])) : i("", !0)
+    ]));
+  }
+});
 export {
-  f as default
+  ne as default
 };
 //# sourceMappingURL=InfoCard.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InfoCard.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"InfoCard.vue.js","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"],"names":["props","__props","showChrome","computed","hasHeader","fieldList","bodyClass","list","resolvePath","item","path","segments","cursor","seg","fieldClass","field","formatValue","raw","text","valueFor","_createBlock","_unref","Card","CardHeader","_createElementBlock","_normalizeStyle","_hoisted_1","_createElementVNode","_hoisted_2","CardTitle","CardDescription","_createVNode","CardContent","_normalizeClass","_openBlock","_hoisted_3","_Fragment","_renderList","index","_hoisted_4","_toDisplayString","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","_hoisted_16"],"mappings":"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"}

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

@@ -1,186 +1,5 @@
-import { defineComponent as A, computed as x, openBlock as t, createBlock as y, unref as u, withCtx as f, createElementBlock as s, normalizeStyle as k, toDisplayString as l, createCommentVNode as i, createElementVNode as c, createTextVNode as _, createVNode as N, normalizeClass as g, Fragment as $, renderList as C } from "vue";
-import "../../ui/card/index.js";
-import w from "../../ui/card/Card.vue.js";
-import I from "../../ui/card/CardHeader.vue.js";
-import P from "../../ui/card/CardTitle.vue.js";
-import S from "../../ui/card/CardDescription.vue.js";
-import z from "../../ui/card/CardContent.vue.js";
-const E = ["data-testid"], F = { class: "flex flex-col gap-1.5" }, H = {
-  key: 0,
-  class: "flex flex-col gap-2",
-  "data-testid": "info-card-fields"
-}, D = { class: "flex items-center gap-1.5 text-sm text-muted-foreground" }, R = ["data-testid"], T = { key: 1 }, q = {
-  key: 1,
-  class: "flex flex-col gap-2",
-  "data-testid": "info-card-bare"
-}, G = {
-  key: 0,
-  class: "flex flex-row items-start gap-3"
-}, J = ["data-testid"], K = { class: "flex flex-col gap-0.5" }, M = {
-  key: 0,
-  class: "text-base font-semibold"
-}, O = {
-  key: 1,
-  class: "text-sm text-muted-foreground"
-}, Q = {
-  key: 1,
-  class: "flex flex-col gap-2",
-  "data-testid": "info-card-fields"
-}, U = { class: "flex items-center gap-1.5 text-sm text-muted-foreground" }, W = ["data-testid"], X = { key: 1 }, ne = /* @__PURE__ */ A({
-  __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(a) {
-    const r = a, p = x(() => r.showCard !== !1), h = x(
-      () => !!r.title || !!r.subtitle || !!r.icon
-    ), m = x(() => r.fields ?? []), B = x(() => {
-      const o = r.bodyClassList;
-      return o ? Array.isArray(o) ? o.join(" ") : o : "";
-    });
-    function j(o, n) {
-      if (!n)
-        return;
-      const e = n.split(".");
-      let d = o;
-      for (const V of e) {
-        if (d == null || typeof d != "object")
-          return;
-        d = d[V];
-      }
-      return d;
-    }
-    function v(o) {
-      const n = o.classList;
-      return n ? Array.isArray(n) ? n.join(" ") : n : "";
-    }
-    function L(o, n) {
-      if (n == null || n === "")
-        return "";
-      const e = typeof n == "string" ? n : String(n);
-      return `${o.prepend ?? ""}${e}${o.append ?? ""}`;
-    }
-    function b(o) {
-      return L(o, j(r.item, o.value));
-    }
-    return (o, n) => p.value ? (t(), y(u(w), {
-      key: 0,
-      class: "flex flex-col"
-    }, {
-      default: f(() => [
-        h.value ? (t(), y(u(I), {
-          key: 0,
-          class: "flex flex-row items-start gap-3"
-        }, {
-          default: f(() => [
-            a.icon ? (t(), s("span", {
-              key: 0,
-              class: "text-2xl leading-none",
-              style: k({ color: a.iconColor ?? void 0 }),
-              "data-testid": `info-card-icon-${a.icon}`,
-              "aria-hidden": "true"
-            }, l(a.icon), 13, E)) : i("", !0),
-            c("div", F, [
-              a.title ? (t(), y(u(P), { key: 0 }, {
-                default: f(() => [
-                  _(l(a.title), 1)
-                ]),
-                _: 1
-              })) : i("", !0),
-              a.subtitle ? (t(), y(u(S), { key: 1 }, {
-                default: f(() => [
-                  _(l(a.subtitle), 1)
-                ]),
-                _: 1
-              })) : i("", !0)
-            ])
-          ]),
-          _: 1
-        })) : i("", !0),
-        N(u(z), {
-          class: g([
-            B.value,
-            a.lessPadding ? "p-3" : "",
-            h.value ? "" : "pt-6"
-          ])
-        }, {
-          default: f(() => [
-            m.value.length ? (t(), s("dl", H, [
-              (t(!0), s($, null, C(m.value, (e, d) => (t(), s("div", {
-                key: `${e.value}-${d}`,
-                class: "flex items-baseline justify-between gap-3",
-                "data-testid": "info-card-field"
-              }, [
-                c("dt", D, [
-                  e.icon ? (t(), s("span", {
-                    key: 0,
-                    class: "text-base leading-none",
-                    "data-testid": `info-card-field-icon-${e.icon}`,
-                    "aria-hidden": "true"
-                  }, l(e.icon), 9, R)) : i("", !0),
-                  e.label ? (t(), s("span", T, l(e.label), 1)) : i("", !0)
-                ]),
-                c("dd", {
-                  class: g(["text-sm font-medium text-foreground", v(e)]),
-                  "data-testid": "info-card-field-value"
-                }, l(b(e)), 3)
-              ]))), 128))
-            ])) : i("", !0)
-          ]),
-          _: 1
-        }, 8, ["class"])
-      ]),
-      _: 1
-    })) : (t(), s("section", q, [
-      h.value ? (t(), s("header", G, [
-        a.icon ? (t(), s("span", {
-          key: 0,
-          class: "text-2xl leading-none",
-          style: k({ color: a.iconColor ?? void 0 }),
-          "data-testid": `info-card-icon-${a.icon}`,
-          "aria-hidden": "true"
-        }, l(a.icon), 13, J)) : i("", !0),
-        c("div", K, [
-          a.title ? (t(), s("h3", M, l(a.title), 1)) : i("", !0),
-          a.subtitle ? (t(), s("p", O, l(a.subtitle), 1)) : i("", !0)
-        ])
-      ])) : i("", !0),
-      m.value.length ? (t(), s("dl", Q, [
-        (t(!0), s($, null, C(m.value, (e, d) => (t(), s("div", {
-          key: `${e.value}-${d}`,
-          class: "flex items-baseline justify-between gap-3",
-          "data-testid": "info-card-field"
-        }, [
-          c("dt", U, [
-            e.icon ? (t(), s("span", {
-              key: 0,
-              class: "text-base leading-none",
-              "data-testid": `info-card-field-icon-${e.icon}`,
-              "aria-hidden": "true"
-            }, l(e.icon), 9, W)) : i("", !0),
-            e.label ? (t(), s("span", X, l(e.label), 1)) : i("", !0)
-          ]),
-          c("dd", {
-            class: g(["text-sm font-medium text-foreground", v(e)]),
-            "data-testid": "info-card-field-value"
-          }, l(b(e)), 3)
-        ]))), 128))
-      ])) : i("", !0)
-    ]));
-  }
-});
+import f from "./InfoCard.vue.js";
 export {
-  ne as default
+  f as default
 };
 //# sourceMappingURL=InfoCard.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InfoCard.vue2.js","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"],"names":["props","__props","showChrome","computed","hasHeader","fieldList","bodyClass","list","resolvePath","item","path","segments","cursor","seg","fieldClass","field","formatValue","raw","text","valueFor","_createBlock","_unref","Card","CardHeader","_createElementBlock","_normalizeStyle","_hoisted_1","_createElementVNode","_hoisted_2","CardTitle","CardDescription","_createVNode","CardContent","_normalizeClass","_openBlock","_hoisted_3","_Fragment","_renderList","index","_hoisted_4","_toDisplayString","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","_hoisted_16"],"mappings":"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"}
+{"version":3,"file":"InfoCard.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/compositions/cards/TabListCard.vue.d.ts

@@ -0,0 +1,36 @@
+import { DisplayCard } from '../../../definitions/cards';
+import { TabListCardStyle } from '../../../definitions/cards/TabListCard';
+export interface TabListCardProps {
+    title?: string;
+    subtitle?: string;
+    showCard?: boolean;
+    /** Resolved tab cards (NOT IDs). */
+    tabs?: DisplayCard[];
+    /** Page-level data model passed through to child renderers. */
+    item?: Record<string, unknown>;
+    /** Initial active tab id. Falls back to the first tab. */
+    defaultTab?: string;
+    /** Vertical or horizontal nav layout. */
+    style?: TabListCardStyle;
+    /** Force the nav bar to render above the panel content. */
+    navOnTop?: boolean;
+    /** Hide the nav bar entirely (used when an external nav controls the tabs). */
+    hideNav?: boolean;
+}
+type __VLS_Props = TabListCardProps;
+type __VLS_PublicProps = {
+    "modelValue"?: string;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    style: TabListCardStyle;
+    tabs: DisplayCard[];
+    navOnTop: boolean;
+    hideNav: boolean;
+    item: Record<string, unknown>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=TabListCard.vue.d.ts.map

package/dist/components/compositions/cards/TabListCard.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabListCard.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/cards/TabListCard.vue"],"names":[],"mappings":"AAoLA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAA;AASvE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oCAAoC;IACpC,IAAI,CAAC,EAAE,WAAW,EAAE,CAAA;IACpB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC9B,0DAA0D;IAC1D,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,yCAAyC;IACzC,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACxB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,KAAK,WAAW,GAAG,gBAAgB,CAAC;AAwEpC,KAAK,iBAAiB,GAAG;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,WAAW,CAAC;;;;;;WAjFN,gBAAgB;UANjB,WAAW,EAAE;cAQT,OAAO;aAER,OAAO;UARV,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;AA+PhC,wBAQG"}

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

@@ -1,5 +1,127 @@
-import f from "./TabListCard.vue2.js";
+import { defineComponent as V, useModel as w, computed as n, ref as N, watch as y, openBlock as a, createElementBlock as u, Fragment as x, toDisplayString as h, createCommentVNode as r, createBlock as c, unref as m, normalizeClass as g, withCtx as f, renderList as k, createTextVNode as B, createElementVNode as $, createVNode as z, mergeModels as L } from "vue";
+import M from "../../../engine/CardRenderer.vue.js";
+import "../../ui/tabs/index.js";
+import O from "../../ui/tabs/Tabs.vue.js";
+import E from "../../ui/tabs/TabsList.vue.js";
+import F from "../../ui/tabs/TabsTrigger.vue.js";
+import S from "../../ui/tabs/TabsContent.vue.js";
+const A = {
+  key: 0,
+  class: "mb-3 flex flex-col gap-0.5"
+}, D = {
+  key: 0,
+  class: "text-base font-semibold"
+}, I = {
+  key: 1,
+  class: "text-sm text-muted-foreground"
+}, U = { class: "flex-1" }, j = {
+  key: 2,
+  class: "text-sm text-muted-foreground italic",
+  "data-testid": "tab-list-empty"
+}, R = /* @__PURE__ */ V({
+  __name: "TabListCard",
+  props: /* @__PURE__ */ L({
+    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(t) {
+    const d = t, i = w(t, "modelValue"), s = n(() => d.tabs ?? []), v = n(() => s.value.map((e) => e.id));
+    function T(e) {
+      return e.title ? e.title : e.id;
+    }
+    const o = N(
+      i.value ?? d.defaultTab ?? v.value[0] ?? ""
+    );
+    y(
+      () => i.value,
+      (e) => {
+        e !== void 0 && e !== o.value && (o.value = e);
+      }
+    ), y(
+      () => v.value,
+      (e) => {
+        e.includes(o.value) || (o.value = e[0] ?? "", i.value !== o.value && (i.value = o.value));
+      }
+    );
+    function _(e) {
+      const p = String(e);
+      o.value = p, i.value = p;
+    }
+    const b = n(
+      () => d.style === "horizontal" || d.navOnTop === !0
+    ), C = n(() => [
+      "gxp-tab-list",
+      b.value ? "flex flex-col gap-3" : "flex flex-row gap-3"
+    ]);
+    return (e, p) => (a(), u(x, null, [
+      t.title || t.subtitle ? (a(), u("header", A, [
+        t.title ? (a(), u("h3", D, h(t.title), 1)) : r("", !0),
+        t.subtitle ? (a(), u("p", I, h(t.subtitle), 1)) : r("", !0)
+      ])) : r("", !0),
+      s.value.length > 0 ? (a(), c(m(O), {
+        key: 1,
+        "model-value": o.value,
+        "default-value": t.defaultTab ?? v.value[0],
+        class: g(C.value),
+        orientation: b.value ? "horizontal" : "vertical",
+        "onUpdate:modelValue": _
+      }, {
+        default: f(() => [
+          t.hideNav ? r("", !0) : (a(), c(m(E), {
+            key: 0,
+            class: g([
+              "inline-flex items-center rounded-md bg-muted p-1",
+              b.value ? "flex-row" : "flex-col h-auto"
+            ])
+          }, {
+            default: f(() => [
+              (a(!0), u(x, null, k(s.value, (l) => (a(), c(m(F), {
+                key: l.id,
+                value: l.id,
+                "data-tab-id": l.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: f(() => [
+                  B(h(T(l)), 1)
+                ]),
+                _: 2
+              }, 1032, ["value", "data-tab-id"]))), 128))
+            ]),
+            _: 1
+          }, 8, ["class"])),
+          $("div", U, [
+            (a(!0), u(x, null, k(s.value, (l) => (a(), c(m(S), {
+              key: l.id,
+              value: l.id,
+              "data-tab-panel-id": l.id
+            }, {
+              default: f(() => [
+                z(M, {
+                  card: l,
+                  item: t.item
+                }, null, 8, ["card", "item"])
+              ]),
+              _: 2
+            }, 1032, ["value", "data-tab-panel-id"]))), 128))
+          ])
+        ]),
+        _: 1
+      }, 8, ["model-value", "default-value", "class", "orientation"])) : (a(), u("p", j, " No tabs to display. "))
+    ], 64));
+  }
+});
 export {
-  f as default
+  R as default
 };
 //# sourceMappingURL=TabListCard.vue.js.map