@gxp-dev/mod-ui 2.0.0

package/dist/adapters/v2ToV1.js

@@ -0,0 +1,89 @@
+import { V2_TO_V1_CARD_TYPE as f } from "./cardTypeMap.js";
+import { v2ToV1FieldType as b } from "./fieldTypeMap.js";
+import { v2ColumnsToV1 as m, v2ConditionParamToV1 as v } from "./conditionMap.js";
+function V(t) {
+  var l;
+  const s = {
+    title: t.title,
+    breadCrumbs: t.breadCrumbs,
+    section: t.section
+  };
+  for (const i of [
+    "createConfig",
+    "updateConfig",
+    "deleteConfig",
+    "eventHandlers"
+  ])
+    t[i] !== void 0 && (s[i] = t[i]);
+  return (l = t.tabsList) != null && l.length ? s.tabsList = t.tabsList.map((i) => ({
+    title: i.title,
+    tabId: i.tabId,
+    cards: i.cards.map(
+      (n) => p(n, t.cards, t.elements)
+    )
+  })) : Object.keys(t.cards).length && (s.cards = Object.values(t.cards).map(
+    (i) => p(i, t.cards, t.elements)
+  )), s;
+}
+function p(t, s, l) {
+  const n = {
+    type: f[t.cardType] ?? t.cardType,
+    title: t.title,
+    subtitle: t.subtitle,
+    showCard: t.showCard,
+    classList: t.classList,
+    ...m(t),
+    conditionParams: c(t.conditionParams)
+  };
+  t.id !== void 0 && (n.id = t.id);
+  const a = t.elementList;
+  a != null && a.length && (n.fieldsList = a.map((e) => l[e]).filter((e) => !!e).map(T));
+  const d = t.cardList;
+  d != null && d.length && (n.cards = d.map((e) => s[e]).filter((e) => !!e).map((e) => p(e, s, l)));
+  const o = t.tabList;
+  o != null && o.length && (n.tabsList = o.map((e) => s[e]).filter((e) => !!e).map((e) => ({
+    title: e.title ?? "",
+    tabId: e.id,
+    cards: [p(e, s, l)]
+  })));
+  const u = t;
+  for (const e of [
+    "headers",
+    "options",
+    "listKey",
+    "createConfig",
+    "updateConfig",
+    "deleteConfig",
+    "tableTitle"
+  ])
+    u[e] !== void 0 && (n[e] = u[e]);
+  return n;
+}
+function T(t) {
+  const s = b(t.type), { id: l, type: i, name: n, label: a, defaultValue: d } = t, o = {
+    ...t
+  };
+  return delete o.type, delete o.columns, delete o.columnsSm, delete o.columnsMd, delete o.columnsLg, delete o.columnsXl, delete o.columnsXxl, delete o.conditionParams, o.selectOptions !== void 0 && o.options === void 0 && (o.options = o.selectOptions.map((e) => {
+    if (typeof e != "object" || e === null)
+      return e;
+    const r = e;
+    return r.text === void 0 && r.label !== void 0 ? { ...r, text: r.label } : r;
+  }), delete o.selectOptions), {
+    id: l,
+    type: s,
+    name: n ?? void 0,
+    label: a,
+    defaultValue: d,
+    ...m(t),
+    conditionParams: c(t.conditionParams),
+    ...o
+  };
+}
+function c(t) {
+  if (!(!t || t.length === 0))
+    return t.map(v);
+}
+export {
+  V as v2ToV1
+};
+//# sourceMappingURL=v2ToV1.js.map

package/dist/adapters/v2ToV1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"v2ToV1.js","sources":["../../src/adapters/v2ToV1.ts"],"sourcesContent":["/**\n * v2 → v1 schema adapter.\n *\n * Bidirectional pair of `v1ToV2`. Lets consumers serialise the\n * library's internal v2 shape back into the v1 docs-format JSON for\n * round-tripping with legacy backend endpoints / form-builder export.\n *\n * The conversion is lossy by design — v2 carries strictly more\n * information than v1 (style discriminator, separated element map).\n * For elements that have no clean v1 equivalent (`code/git-editor`,\n * `builder/object-builder`, ...) we fall back to the v2 `style`\n * string so the round-trip preserves enough to re-parse later.\n */\n\nimport type { CardElement } from \"@/definitions/elements\"\nimport type { DisplayCard } from \"@/definitions/cards\"\nimport type { ConditionParam } from \"@/definitions/shared/conditions\"\n\nimport { V2_TO_V1_CARD_TYPE } from \"./cardTypeMap\"\nimport { v2ToV1FieldType } from \"./fieldTypeMap\"\nimport { v2ColumnsToV1, v2ConditionParamToV1 } from \"./conditionMap\"\nimport type { V1CardConfig, V1FieldConfig, V1PageConfig, V2PageConfig } from \"./v1ToV2\"\n\nexport function v2ToV1(config: V2PageConfig): V1PageConfig {\n  const out: V1PageConfig = {\n    title: config.title,\n    breadCrumbs: config.breadCrumbs,\n    section: config.section,\n  }\n  for (const passthrough of [\n    \"createConfig\",\n    \"updateConfig\",\n    \"deleteConfig\",\n    \"eventHandlers\",\n  ] as const) {\n    if (config[passthrough] !== undefined) {\n      ;(out as Record<string, unknown>)[passthrough] = config[passthrough]\n    }\n  }\n\n  if (config.tabsList?.length) {\n    out.tabsList = config.tabsList.map((tab) => ({\n      title: tab.title,\n      tabId: tab.tabId,\n      cards: tab.cards.map((c) =>\n        cardToV1(c, config.cards, config.elements),\n      ),\n    }))\n  } else if (Object.keys(config.cards).length) {\n    out.cards = Object.values(config.cards).map((c) =>\n      cardToV1(c, config.cards, config.elements),\n    )\n  }\n\n  return out\n}\n\nfunction cardToV1(\n  card: DisplayCard,\n  allCards: Record<string, DisplayCard>,\n  elements: Record<string, CardElement>,\n): V1CardConfig {\n  const v1Type = V2_TO_V1_CARD_TYPE[card.cardType] ?? card.cardType\n\n  const v1: V1CardConfig = {\n    type: v1Type,\n    title: card.title,\n    subtitle: card.subtitle,\n    showCard: card.showCard,\n    classList: card.classList,\n    ...v2ColumnsToV1(card),\n    conditionParams: conditionParamsToV1(card.conditionParams),\n  }\n  if (card.id !== undefined) {\n    v1.id = card.id\n  }\n\n  // element-list → fields_list\n  const elementList = (card as unknown as Record<string, unknown>).elementList as\n    | string[]\n    | undefined\n  if (elementList?.length) {\n    v1.fieldsList = elementList\n      .map((id) => elements[id])\n      .filter((e): e is CardElement => Boolean(e))\n      .map(elementToV1)\n  }\n\n  // card-list / nested cards\n  const cardList = (card as unknown as Record<string, unknown>).cardList as\n    | string[]\n    | undefined\n  if (cardList?.length) {\n    v1.cards = cardList\n      .map((id) => allCards[id])\n      .filter((c): c is DisplayCard => Boolean(c))\n      .map((c) => cardToV1(c, allCards, elements))\n  }\n\n  // tab-list → tabs_list\n  const tabList = (card as unknown as Record<string, unknown>).tabList as\n    | string[]\n    | undefined\n  if (tabList?.length) {\n    v1.tabsList = tabList\n      .map((id) => allCards[id])\n      .filter((c): c is DisplayCard => Boolean(c))\n      .map((c) => ({\n        title: c.title ?? \"\",\n        tabId: c.id,\n        cards: [cardToV1(c, allCards, elements)],\n      }))\n  }\n\n  // datatable passthrough fields\n  const bag = card as unknown as Record<string, unknown>\n  for (const passthrough of [\n    \"headers\",\n    \"options\",\n    \"listKey\",\n    \"createConfig\",\n    \"updateConfig\",\n    \"deleteConfig\",\n    \"tableTitle\",\n  ] as const) {\n    if (bag[passthrough] !== undefined) {\n      ;(v1 as Record<string, unknown>)[passthrough] = bag[passthrough]\n    }\n  }\n\n  return v1\n}\n\nfunction elementToV1(element: CardElement): V1FieldConfig {\n  const v1Type = v2ToV1FieldType(element.type)\n  const { id, type, name, label, defaultValue } = element\n\n  const cleaned: Record<string, unknown> = {\n    ...(element as unknown as Record<string, unknown>),\n  }\n  delete cleaned.type\n  delete cleaned.columns\n  delete cleaned.columnsSm\n  delete cleaned.columnsMd\n  delete cleaned.columnsLg\n  delete cleaned.columnsXl\n  delete cleaned.columnsXxl\n  delete cleaned.conditionParams\n\n  // selectOptions → options\n  if (cleaned.selectOptions !== undefined && cleaned.options === undefined) {\n    cleaned.options = (cleaned.selectOptions as unknown[]).map((o) => {\n      if (typeof o !== \"object\" || o === null) {\n        return o\n      }\n      const opt = o as Record<string, unknown>\n      // Keep both `label` AND `text` to round-trip without information loss.\n      if (opt.text === undefined && opt.label !== undefined) {\n        return { ...opt, text: opt.label }\n      }\n      return opt\n    })\n    delete cleaned.selectOptions\n  }\n  void type\n\n  const out: V1FieldConfig = {\n    id,\n    type: v1Type,\n    name: name ?? undefined,\n    label,\n    defaultValue,\n    ...v2ColumnsToV1(element),\n    conditionParams: conditionParamsToV1(element.conditionParams),\n    ...cleaned,\n  }\n  return out\n}\n\nfunction conditionParamsToV1(\n  params: ConditionParam[] | undefined,\n): V1FieldConfig[\"conditionParams\"] {\n  if (!params || params.length === 0) {\n    return undefined\n  }\n  return params.map(v2ConditionParamToV1)\n}\n"],"names":["v2ToV1","config","out","passthrough","_a","tab","c","cardToV1","card","allCards","elements","v1","V2_TO_V1_CARD_TYPE","v2ColumnsToV1","conditionParamsToV1","elementList","id","elementToV1","cardList","tabList","bag","element","v1Type","v2ToV1FieldType","type","name","label","defaultValue","cleaned","o","opt","params","v2ConditionParamToV1"],"mappings":"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"}

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

@@ -0,0 +1,5 @@
+import f from "./CardListCard.vue2.js";
+export {
+  f as default
+};
+//# sourceMappingURL=CardListCard.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardListCard.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1,125 @@
+import { defineComponent as S, ref as D, computed as y, openBlock as t, createBlock as d, resolveDynamicComponent as h, unref as s, normalizeClass as k, withCtx as u, createTextVNode as p, toDisplayString as g, createCommentVNode as c, createElementBlock as n, normalizeStyle as E, Fragment as V, renderList as z, createVNode as G } from "vue";
+import L from "../../../engine/CardRenderer.vue.js";
+import "../../ui/card/index.js";
+import O from "../../ui/card/Card.vue.js";
+import X from "../../ui/card/CardHeader.vue.js";
+import Y from "../../ui/card/CardTitle.vue.js";
+import A from "../../ui/card/CardDescription.vue.js";
+import F from "../../ui/card/CardContent.vue.js";
+const I = {
+  key: 1,
+  class: "mb-3 flex flex-col gap-0.5"
+}, j = {
+  key: 0,
+  class: "text-base font-semibold"
+}, q = {
+  key: 1,
+  class: "text-sm text-muted-foreground"
+}, H = {
+  key: 0,
+  class: "text-sm text-muted-foreground italic",
+  "data-testid": "card-list-empty"
+}, J = ["draggable", "data-card-list-item-id", "onDragstart", "onDrop"], ee = /* @__PURE__ */ S({
+  __name: "CardListCard",
+  props: {
+    title: {},
+    subtitle: {},
+    showCard: { type: Boolean, default: !0 },
+    draggable: { type: Boolean, default: !1 },
+    dragTargetData: {},
+    gutterY: { default: "1rem" },
+    gutterX: { default: "1rem" },
+    cards: { default: () => [] },
+    item: { default: () => ({}) },
+    id: {}
+  },
+  emits: ["reorder"],
+  setup(e, { emit: C }) {
+    const r = e, T = C, x = D(null), v = y(
+      () => x.value ?? r.cards
+    ), f = y(() => r.showCard !== !1), w = y(() => ({
+      rowGap: r.gutterY,
+      columnGap: r.gutterX
+    })), o = D(null);
+    function $(a, m) {
+      r.draggable && (o.value = m, a.dataTransfer && (a.dataTransfer.effectAllowed = "move", a.dataTransfer.setData(
+        "text/plain",
+        r.dragTargetData ?? r.id ?? ""
+      )));
+    }
+    function B(a) {
+      r.draggable && (a.preventDefault(), a.dataTransfer && (a.dataTransfer.dropEffect = "move"));
+    }
+    function _(a, m) {
+      if (!r.draggable || o.value === null)
+        return;
+      a.preventDefault();
+      const l = [...v.value], [i] = l.splice(o.value, 1);
+      l.splice(m, 0, i), x.value = l, o.value = null, T("reorder", l);
+    }
+    function N() {
+      o.value = null;
+    }
+    return (a, m) => (t(), d(h(f.value ? s(O) : "section"), {
+      class: k([
+        "gxp-card-list",
+        f.value ? "" : "flex flex-col bg-transparent border-0 shadow-none"
+      ])
+    }, {
+      default: u(() => [
+        f.value && (e.title || e.subtitle) ? (t(), d(s(X), { key: 0 }, {
+          default: u(() => [
+            e.title ? (t(), d(s(Y), { key: 0 }, {
+              default: u(() => [
+                p(g(e.title), 1)
+              ]),
+              _: 1
+            })) : c("", !0),
+            e.subtitle ? (t(), d(s(A), { key: 1 }, {
+              default: u(() => [
+                p(g(e.subtitle), 1)
+              ]),
+              _: 1
+            })) : c("", !0)
+          ]),
+          _: 1
+        })) : e.title || e.subtitle ? (t(), n("header", I, [
+          e.title ? (t(), n("h3", j, g(e.title), 1)) : c("", !0),
+          e.subtitle ? (t(), n("p", q, g(e.subtitle), 1)) : c("", !0)
+        ])) : c("", !0),
+        (t(), d(h(f.value ? s(F) : "div"), {
+          class: "flex flex-col",
+          style: E(w.value)
+        }, {
+          default: u(() => [
+            v.value.length === 0 ? (t(), n("p", H, " No cards to display. ")) : (t(!0), n(V, { key: 1 }, z(v.value, (l, i) => (t(), n("div", {
+              key: l.id,
+              draggable: e.draggable === !0,
+              "data-card-list-item-id": l.id,
+              class: k([
+                "gxp-card-list__item",
+                e.draggable ? "cursor-move" : "",
+                o.value === i ? "opacity-50" : ""
+              ]),
+              onDragstart: (b) => $(b, i),
+              onDragover: B,
+              onDrop: (b) => _(b, i),
+              onDragend: N
+            }, [
+              G(L, {
+                card: l,
+                item: e.item
+              }, null, 8, ["card", "item"])
+            ], 42, J))), 128))
+          ]),
+          _: 1
+        }, 8, ["style"]))
+      ]),
+      _: 1
+    }, 8, ["class"]));
+  }
+});
+export {
+  ee as default
+};
+//# sourceMappingURL=CardListCard.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CardListCard.vue2.js","sources":["../../../../src/components/compositions/cards/CardListCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven `card-list` composition — renders a list of nested\n * DisplayCards via `CardRenderer`. Each child card is a fully-resolved\n * DisplayCard (not an ID lookup).\n *\n * Self-contained — directly mountable in any Vue app:\n *\n *   <CardListCard\n *     title=\"Settings\"\n *     :cards=\"[generalCard, advancedCard]\"\n *     :item=\"dataModel\"\n *   />\n *\n * Drag-and-drop reordering is a lightweight HTML5 implementation when\n * `draggable === true`; on drop the new card order is emitted as\n * `reorder` so a parent (e.g. the FormBuilder) can persist it.\n */\nimport { computed, ref } from \"vue\"\nimport type { DisplayCard } from \"@/definitions/cards\"\nimport CardRenderer from \"@/engine/CardRenderer.vue\"\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n} from \"@/components/ui/card\"\n\nexport interface CardListCardProps {\n  title?: string\n  subtitle?: string\n  showCard?: boolean\n  draggable?: boolean\n  dragTargetData?: string\n  gutterY?: string\n  gutterX?: string\n  /** Resolved child cards (NOT IDs). */\n  cards?: DisplayCard[]\n  /** Page-level data model passed through to child renderers. */\n  item?: Record<string, unknown>\n  /** Identifier used as a fallback drag payload when `dragTargetData` is unset. */\n  id?: string\n}\n\nconst props = withDefaults(defineProps<CardListCardProps>(), {\n  showCard: true,\n  draggable: false,\n  gutterY: \"1rem\",\n  gutterX: \"1rem\",\n  cards: () => [],\n  item: () => ({}),\n})\n\nconst emit = defineEmits<{\n  (e: \"reorder\", value: DisplayCard[]): void\n}>()\n\nconst internalOrder = ref<DisplayCard[] | null>(null)\n\nconst order = computed<DisplayCard[]>(\n  () => internalOrder.value ?? props.cards,\n)\n\nconst showChrome = computed<boolean>(() => props.showCard !== false)\n\nconst gridStyle = computed(() => ({\n  rowGap: props.gutterY,\n  columnGap: props.gutterX,\n}))\n\nconst dragIndex = ref<number | null>(null)\n\nfunction onDragStart(event: DragEvent, index: number): void {\n  if (!props.draggable) {\n    return\n  }\n  dragIndex.value = index\n  if (event.dataTransfer) {\n    event.dataTransfer.effectAllowed = \"move\"\n    event.dataTransfer.setData(\n      \"text/plain\",\n      props.dragTargetData ?? props.id ?? \"\",\n    )\n  }\n}\n\nfunction onDragOver(event: DragEvent): void {\n  if (!props.draggable) {\n    return\n  }\n  event.preventDefault()\n  if (event.dataTransfer) {\n    event.dataTransfer.dropEffect = \"move\"\n  }\n}\n\nfunction onDrop(event: DragEvent, targetIndex: number): void {\n  if (!props.draggable || dragIndex.value === null) {\n    return\n  }\n  event.preventDefault()\n  const next = [...order.value]\n  const [moved] = next.splice(dragIndex.value, 1)\n  next.splice(targetIndex, 0, moved)\n  internalOrder.value = next\n  dragIndex.value = null\n  emit(\"reorder\", next)\n}\n\nfunction onDragEnd(): void {\n  dragIndex.value = null\n}\n</script>\n\n<template>\n  <component\n    :is=\"showChrome ? Card : 'section'\"\n    :class=\"[\n      'gxp-card-list',\n      showChrome ? '' : 'flex flex-col bg-transparent border-0 shadow-none',\n    ]\"\n  >\n    <CardHeader v-if=\"showChrome && (title || subtitle)\">\n      <CardTitle v-if=\"title\">{{ title }}</CardTitle>\n      <CardDescription v-if=\"subtitle\">\n        {{ subtitle }}\n      </CardDescription>\n    </CardHeader>\n    <header\n      v-else-if=\"title || subtitle\"\n      class=\"mb-3 flex flex-col gap-0.5\"\n    >\n      <h3 v-if=\"title\" class=\"text-base font-semibold\">\n        {{ title }}\n      </h3>\n      <p v-if=\"subtitle\" class=\"text-sm text-muted-foreground\">\n        {{ subtitle }}\n      </p>\n    </header>\n\n    <component\n      :is=\"showChrome ? CardContent : 'div'\"\n      class=\"flex flex-col\"\n      :style=\"gridStyle\"\n    >\n      <template v-if=\"order.length === 0\">\n        <p\n          class=\"text-sm text-muted-foreground italic\"\n          data-testid=\"card-list-empty\"\n        >\n          No cards to display.\n        </p>\n      </template>\n      <template v-else>\n        <div\n          v-for=\"(child, index) in order\"\n          :key=\"child.id\"\n          :draggable=\"draggable === true\"\n          :data-card-list-item-id=\"child.id\"\n          :class=\"[\n            'gxp-card-list__item',\n            draggable ? 'cursor-move' : '',\n            dragIndex === index ? 'opacity-50' : '',\n          ]\"\n          @dragstart=\"onDragStart($event, index)\"\n          @dragover=\"onDragOver\"\n          @drop=\"onDrop($event, index)\"\n          @dragend=\"onDragEnd\"\n        >\n          <CardRenderer :card=\"child\" :item=\"item\" />\n        </div>\n      </template>\n    </component>\n  </component>\n</template>\n"],"names":["props","__props","emit","__emit","internalOrder","ref","order","computed","showChrome","gridStyle","dragIndex","onDragStart","event","index","onDragOver","onDrop","targetIndex","next","moved","onDragEnd","_createBlock","_resolveDynamicComponent","_unref","Card","_normalizeClass","CardHeader","CardTitle","CardDescription","_openBlock","_createElementBlock","_hoisted_1","_hoisted_2","_toDisplayString","_hoisted_3","CardContent","_hoisted_4","_Fragment","_renderList","child","$event","_createVNode","CardRenderer"],"mappings":"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"}

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

@@ -0,0 +1,5 @@
+import f from "./DataTableCard.vue2.js";
+export {
+  f as default
+};
+//# sourceMappingURL=DataTableCard.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableCard.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

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