vlite3 1.4.40 → 1.5.0

package/components/DataTable/DataTableRow.vue.d.ts

@@ -21,6 +21,11 @@ interface Props {
     treeLoading?: boolean;
     isLastSibling?: boolean;
     ancestorLastFlags?: boolean[];
+    /**
+     * Small-screen card layout (driven by DataTable `responsive` + breakpoint).
+     * Skips tree connector overlays; keeps expand + indent on the primary cell.
+     */
+    stacked?: boolean;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -29,9 +34,24 @@ declare function __VLS_template(): {
         row: any;
         index: number;
         field: string;
+    }) => any>> & Partial<Record<string, (_: {
+        value: any;
+        row: any;
+        index: number;
+        field: string;
+    }) => any>> & Partial<Record<string, (_: {
+        value: any;
+        row: any;
+        index: number;
+        field: string;
+    }) => any>> & Partial<Record<string, (_: {
+        value: any;
+        row: any;
+        index: number;
+        field: string;
     }) => any>>;
     refs: {};
-    rootEl: HTMLTableRowElement;
+    rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
@@ -52,6 +72,7 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     size: "xs" | "sm" | "md" | "lg";
     compact: boolean;
     striped: boolean;
+    stacked: boolean;
     selectable: boolean;
     isSelected: boolean;
     depth: number;
@@ -65,7 +86,7 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     expandable: boolean;
     expanded: boolean;
     treeLoading: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLTableRowElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/components/DataTable/DataTableRow.vue.js

@@ -1,200 +1,7 @@
-import { defineComponent as D, computed as g, openBlock as o, createElementBlock as d, normalizeClass as x, withModifiers as I, createElementVNode as b, createVNode as v, createCommentVNode as w, Fragment as p, renderList as U, normalizeStyle as y, unref as c, createBlock as u, renderSlot as V } from "vue";
-import R from "../CheckBox.vue.js";
-import h from "../Icon.vue.js";
-import G from "../Price/Price.vue.js";
-import P from "../DateTime/DateTime.vue.js";
-import O from "../TreeConnectors/TreeConnectors.vue.js";
-import { DEFAULT_TOGGLE_SIZE as H, DEFAULT_TREE_CONTENT_GAP as k, DEFAULT_TREE_LEAF_INSET as E, DEFAULT_TREE_LEADING as j } from "../TreeConnectors/geometry.js";
-const Z = ["data-state"], q = { class: "flex items-center justify-center" }, J = ["aria-expanded"], K = ["title", "innerHTML"], le = /* @__PURE__ */ D({
-  __name: "DataTableRow",
-  props: {
-    row: {},
-    headers: {},
-    index: {},
-    keyField: { default: "_id" },
-    selectable: { type: Boolean, default: !1 },
-    isSelected: { type: Boolean, default: !1 },
-    isIndeterminate: { type: Boolean, default: !1 },
-    hoverable: { type: Boolean, default: !0 },
-    striped: { type: Boolean, default: !1 },
-    compact: { type: Boolean, default: !1 },
-    size: { default: "md" },
-    cellBordered: { type: Boolean },
-    treeMode: { type: Boolean, default: !1 },
-    depth: { default: 0 },
-    treeIndent: { default: 20 },
-    expandable: { type: Boolean, default: !1 },
-    expanded: { type: Boolean, default: !1 },
-    treeLoading: { type: Boolean, default: !1 },
-    isLastSibling: { type: Boolean, default: !1 },
-    ancestorLastFlags: { default: () => [] }
-  },
-  emits: ["select", "rowClick", "toggleExpand"],
-  setup(e, { emit: C }) {
-    const s = e, f = C, a = (n, l) => {
-      if (!(!n || !l))
-        return l.includes(".") ? l.split(".").reduce((t, i) => t?.[i], n) : n[l];
-    }, S = (n, l, t) => n.format ? n.format(l, t) : l == null ? "-" : n.type === "number" ? new Intl.NumberFormat("en-US").format(Number(l)) : String(l), L = (n, l, t) => {
-      const i = [];
-      if (n.width && /(?:^|\s|:)w-/.test(n.width) && i.push(n.width), n.minWidth && /(?:^|\s|:)min-w-/.test(n.minWidth) && i.push(n.minWidth), n.capitalize && i.push("capitalize"), n.addStatusColor) {
-        const r = B(l);
-        r && i.push(r);
-      }
-      if (typeof n.class == "function") {
-        const r = n.class(l, t);
-        r && i.push(r);
-      } else n.class && i.push(n.class);
-      return i.join(" ");
-    }, B = (n) => {
-      const l = {
-        active: "text-success font-medium",
-        inactive: "text-muted-foreground",
-        pending: "text-warning font-medium",
-        completed: "text-success font-medium",
-        cancelled: "text-destructive font-medium",
-        failed: "text-destructive font-medium",
-        success: "text-success font-medium",
-        error: "text-destructive font-medium",
-        warning: "text-warning font-medium",
-        info: "text-info font-medium",
-        high: "text-destructive font-medium",
-        medium: "text-warning font-medium",
-        low: "text-muted-foreground"
-      }, t = String(n).toLowerCase().replace(/[-_\s]/g, "");
-      return l[t] || "";
-    }, T = (n) => ({
-      left: "text-left",
-      center: "text-center",
-      right: "text-right"
-    })[n.align || "left"], M = g(() => a(s.row, s.keyField)), F = () => {
-      const { size: n, compact: l, cellBordered: t } = s;
-      return n === "xs" || l ? `py-1.5! -text-fs-1.5! ${t ? "px-3!" : "pr-4 max-sm:pr-10!"}` : n === "sm" ? `py-2! -text-fs-1.5! ${t ? "px-3!" : "pr-5 max-sm:pr-10!"}` : n === "lg" ? `py-4! text-base ${t ? "px-4!" : "pr-7 max-sm:pr-12!"}` : `py-3! -text-fs-1.5! ${t ? "px-3.5!" : "pr-6! max-sm:pr-10!"}`;
-    }, m = j, z = g(
-      () => s.treeMode ? m + s.depth * s.treeIndent : 0
-    ), N = g(() => {
-      const n = m + s.depth * s.treeIndent;
-      return s.expandable ? n + H + k : n + E;
-    }), $ = () => {
-      f("rowClick", { row: s.row, index: s.index });
-    }, A = () => {
-      f("select", M.value);
-    }, W = (n) => {
-      n.stopPropagation(), f("toggleExpand");
-    };
-    return (n, l) => (o(), d("tr", {
-      class: x(["border-b data-[state=selected]:bg-muted h-full", [
-        e.hoverable ? "hover:bg-muted/20" : "",
-        e.striped && e.index % 2 === 1 ? "bg-muted/20" : "bg-background",
-        e.isSelected ? "bg-muted! hover:bg-muted/30" : "",
-        "group"
-      ]]),
-      "data-state": e.isSelected ? "selected" : void 0,
-      onClick: $
-    }, [
-      e.selectable ? (o(), d("td", {
-        key: 0,
-        class: "px-0! py-1! align-middle text-center",
-        onClick: l[0] || (l[0] = I(() => {
-        }, ["stop"]))
-      }, [
-        b("div", q, [
-          v(R, {
-            "model-value": e.isSelected,
-            indeterminate: e.isIndeterminate,
-            size: "xs",
-            "onUpdate:modelValue": A
-          }, null, 8, ["model-value", "indeterminate"])
-        ])
-      ])) : w("", !0),
-      (o(!0), d(p, null, U(e.headers, (t, i) => (o(), d("td", {
-        key: t.field,
-        class: x(["align-middle whitespace-normal wrap-break-word", [
-          F(),
-          T(t),
-          t.hideOnMobile ? "hidden md:table-cell" : "",
-          e.treeMode ? "max-w-none min-w-0" : "max-w-[400px]",
-          // Keep overflow clip on data cells; last column (actions) must stay visible
-          i === e.headers.length - 1 ? "overflow-visible" : "overflow-hidden",
-          // Tree chrome overlays the whole first cell (incl. padding) so branch
-          // lines join seamlessly across rows. overflow-visible lets the connector
-          // overlay bleed across the collapsed row border for continuous trunks.
-          e.treeMode && i === 0 ? "relative pl-0! overflow-visible!" : "",
-          L(t, a(e.row, t.field), e.row)
-        ]]),
-        style: y(
-          e.treeMode ? void 0 : {
-            ...t.width && !/(?:^|\s|:)w-/.test(t.width) ? { width: t.width } : {},
-            ...t.minWidth && !/(?:^|\s|:)min-w-/.test(t.minWidth) ? { minWidth: t.minWidth } : {}
-          }
-        )
-      }, [
-        e.treeMode && i === 0 ? (o(), d(p, { key: 0 }, [
-          v(c(O), {
-            depth: e.depth,
-            "is-last-sibling": e.isLastSibling,
-            "ancestor-last-flags": e.ancestorLastFlags,
-            "has-toggle": e.expandable,
-            indent: e.treeIndent,
-            "base-inset": c(m),
-            "content-gap": c(k),
-            "leaf-has-spacer": !1,
-            "leaf-inset": c(E),
-            "bleed-y": ""
-          }, null, 8, ["depth", "is-last-sibling", "ancestor-last-flags", "has-toggle", "indent", "base-inset", "content-gap", "leaf-inset"]),
-          e.expandable ? (o(), d("button", {
-            key: 0,
-            type: "button",
-            class: "absolute z-10 top-1/2 -translate-y-1/2 flex h-6 w-6 items-center justify-center rounded-sm text-muted-foreground hover:bg-muted hover:text-foreground transition-colors focus:outline-none",
-            style: y({ left: z.value + "px" }),
-            "aria-expanded": e.expanded,
-            onClick: W
-          }, [
-            e.treeLoading ? (o(), u(h, {
-              key: 0,
-              icon: "lucide:loader-2",
-              class: "h-4 w-4 animate-spin"
-            })) : (o(), u(h, {
-              key: 1,
-              icon: e.expanded ? "lucide:chevron-down" : "lucide:chevron-right",
-              class: "h-4 w-4"
-            }, null, 8, ["icon"]))
-          ], 12, J)) : w("", !0)
-        ], 64)) : w("", !0),
-        b("div", {
-          class: x([
-            "w-full min-w-0",
-            e.treeMode && i === 0 ? "relative flex items-center min-h-[28px] max-h-[80px] overflow-y-auto scrollbar-hide" : i === e.headers.length - 1 ? "overflow-visible" : "max-h-[80px] overflow-y-auto scrollbar-hide"
-          ]),
-          style: y(e.treeMode && i === 0 ? { paddingLeft: N.value + "px" } : void 0)
-        }, [
-          V(n.$slots, t.field, {
-            value: a(e.row, t.field),
-            row: e.row,
-            index: e.index,
-            field: t.field
-          }, () => [
-            t.type === "price" ? (o(), u(G, {
-              key: 0,
-              value: a(e.row, t.field),
-              class: "block",
-              title: String(a(e.row, t.field))
-            }, null, 8, ["value", "title"])) : t.type === "date" ? (o(), u(P, {
-              key: 1,
-              value: a(e.row, t.field),
-              class: "block",
-              title: String(a(e.row, t.field))
-            }, null, 8, ["value", "title"])) : (o(), d("span", {
-              key: 2,
-              class: "block",
-              title: String(a(e.row, t.field)),
-              innerHTML: S(t, a(e.row, t.field), e.row)
-            }, null, 8, K))
-          ])
-        ], 6)
-      ], 6))), 128))
-    ], 10, Z));
-  }
-});
+import o from "./DataTableRow.vue2.js";
+/* empty css                  */
+import a from "../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ a(o, [["__scopeId", "data-v-af551256"]]);
 export {
-  le as default
+  m as default
 };

package/components/DataTable/DataTableRow.vue2.js

@@ -1,4 +1,362 @@
-import f from "./DataTableRow.vue.js";
+import { defineComponent as q, computed as w, openBlock as i, createElementBlock as o, normalizeStyle as k, normalizeClass as m, createElementVNode as g, withModifiers as x, createVNode as B, createCommentVNode as c, createBlock as u, renderSlot as S, Fragment as C, renderList as $, toDisplayString as J, unref as H } from "vue";
+import j from "../CheckBox.vue.js";
+import L from "../Icon.vue.js";
+import z from "../Price/Price.vue.js";
+import I from "../DateTime/DateTime.vue.js";
+import K from "../TreeConnectors/TreeConnectors.vue.js";
+import { DEFAULT_TOGGLE_SIZE as Q, DEFAULT_TREE_CONTENT_GAP as A, DEFAULT_TREE_LEAF_INSET as R, DEFAULT_TREE_LEADING as X } from "../TreeConnectors/geometry.js";
+import { $t as Y } from "../../utils/i18n.js";
+import { useRtl as _ } from "../../composables/useRtl.js";
+import { splitStackedHeaders as ee } from "./dataTableHeaders.js";
+const te = ["data-state"], le = ["aria-expanded"], ie = ["title", "innerHTML"], ne = {
+  key: 0,
+  class: "text-[11px] font-semibold uppercase tracking-wider text-muted-foreground shrink-0 pt-0.5 max-w-[40%]"
+}, ae = ["title", "innerHTML"], oe = ["innerHTML"], de = ["data-state"], se = { class: "flex items-center justify-center" }, re = ["onClick"], ue = ["aria-expanded"], ce = ["title", "innerHTML"], Ce = /* @__PURE__ */ q({
+  __name: "DataTableRow",
+  props: {
+    row: {},
+    headers: {},
+    index: {},
+    keyField: { default: "_id" },
+    selectable: { type: Boolean, default: !1 },
+    isSelected: { type: Boolean, default: !1 },
+    isIndeterminate: { type: Boolean, default: !1 },
+    hoverable: { type: Boolean, default: !0 },
+    striped: { type: Boolean, default: !1 },
+    compact: { type: Boolean, default: !1 },
+    size: { default: "md" },
+    cellBordered: { type: Boolean },
+    treeMode: { type: Boolean, default: !1 },
+    depth: { default: 0 },
+    treeIndent: { default: 20 },
+    expandable: { type: Boolean, default: !1 },
+    expanded: { type: Boolean, default: !1 },
+    treeLoading: { type: Boolean, default: !1 },
+    isLastSibling: { type: Boolean, default: !1 },
+    ancestorLastFlags: { default: () => [] },
+    stacked: { type: Boolean, default: !1 }
+  },
+  emits: ["select", "rowClick", "toggleExpand"],
+  setup(e, { emit: U }) {
+    const V = _(), r = e, M = U, n = (l, a) => {
+      if (!(!l || !a))
+        return a.includes(".") ? a.split(".").reduce((t, s) => t?.[s], l) : l[a];
+    }, y = (l, a, t) => l.format ? l.format(a, t) : a == null ? "-" : l.type === "number" ? new Intl.NumberFormat("en-US").format(Number(a)) : String(a), v = (l, a, t) => {
+      const s = [];
+      if (l.width && /(?:^|\s|:)w-/.test(l.width) && s.push(l.width), l.minWidth && /(?:^|\s|:)min-w-/.test(l.minWidth) && s.push(l.minWidth), l.capitalize && s.push("capitalize"), l.addStatusColor) {
+        const f = W(a);
+        f && s.push(f);
+      }
+      if (typeof l.class == "function") {
+        const f = l.class(a, t);
+        f && s.push(f);
+      } else l.class && s.push(l.class);
+      return s.join(" ");
+    }, W = (l) => {
+      const a = {
+        active: "text-success font-medium",
+        inactive: "text-muted-foreground",
+        pending: "text-warning font-medium",
+        completed: "text-success font-medium",
+        cancelled: "text-destructive font-medium",
+        failed: "text-destructive font-medium",
+        success: "text-success font-medium",
+        error: "text-destructive font-medium",
+        warning: "text-warning font-medium",
+        info: "text-info font-medium",
+        high: "text-destructive font-medium",
+        medium: "text-warning font-medium",
+        low: "text-muted-foreground"
+      }, t = String(l).toLowerCase().replace(/[-_\s]/g, "");
+      return a[t] || "";
+    }, G = (l) => ({
+      left: "text-left",
+      center: "text-center",
+      right: "text-right"
+    })[l.align || "left"], P = w(() => n(r.row, r.keyField)), d = w(() => ee(r.headers)), T = (l) => l.titleI18n ? Y(l.titleI18n) : l.title, p = () => {
+      const { size: l, compact: a, cellBordered: t } = r;
+      return l === "xs" || a ? `py-1.5! -text-fs-1.5! ${t ? "px-3!" : "pr-4 max-sm:pr-10!"}` : l === "sm" ? `py-2! -text-fs-1.5! ${t ? "px-3!" : "pr-5 max-sm:pr-10!"}` : l === "lg" ? `py-4! text-base ${t ? "px-4!" : "pr-7 max-sm:pr-12!"}` : `py-3! -text-fs-1.5! ${t ? "px-3.5!" : "pr-6! max-sm:pr-10!"}`;
+    }, E = X, O = w(
+      () => r.treeMode ? E + r.depth * r.treeIndent : 0
+    ), Z = w(() => {
+      const l = E + r.depth * r.treeIndent;
+      return r.expandable ? l + Q + A : l + R;
+    }), F = w(
+      () => r.treeMode ? r.depth * Math.min(r.treeIndent, 16) : 0
+    ), b = () => {
+      M("rowClick", { row: r.row, index: r.index });
+    }, N = () => {
+      M("select", P.value);
+    }, h = (l) => {
+      l?.stopPropagation(), l?.preventDefault(), M("toggleExpand");
+    }, D = w(
+      () => V.value ? "lucide:chevron-left" : "lucide:chevron-right"
+    );
+    return (l, a) => e.stacked ? (i(), o("div", {
+      key: 0,
+      class: m(["data-table-row--stacked border rounded-lg overflow-hidden min-w-0 bg-background", [
+        e.hoverable && !e.isSelected ? "hover:bg-muted/30" : "",
+        e.striped && e.index % 2 === 1 && !e.isSelected ? "bg-muted/20" : "",
+        // Selected: primary outline (Design.md active state) + soft muted wash — no faint ring.
+        e.isSelected ? "border-primary bg-muted" : "",
+        "group transition-colors"
+      ]]),
+      "data-state": e.isSelected ? "selected" : void 0,
+      style: k(F.value ? { marginInlineStart: F.value + "px" } : void 0),
+      onClick: b
+    }, [
+      g("div", {
+        class: "flex items-center gap-3 px-3 py-3 border-b min-w-0",
+        onClick: a[1] || (a[1] = x(() => {
+        }, ["stop"]))
+      }, [
+        e.selectable ? (i(), o("div", {
+          key: 0,
+          class: "shrink-0 self-center",
+          onClick: a[0] || (a[0] = x(() => {
+          }, ["stop"]))
+        }, [
+          B(j, {
+            "model-value": e.isSelected,
+            indeterminate: e.isIndeterminate,
+            size: "xs",
+            "onUpdate:modelValue": N
+          }, null, 8, ["model-value", "indeterminate"])
+        ])) : c("", !0),
+        e.treeMode && e.expandable ? (i(), o("button", {
+          key: 1,
+          type: "button",
+          class: "tree-expand-toggle shrink-0 flex h-7 w-7 items-center justify-center rounded-sm text-muted-foreground hover:bg-muted hover:text-foreground transition-colors focus:outline-none",
+          "aria-expanded": e.expanded,
+          onClick: h
+        }, [
+          e.treeLoading ? (i(), u(L, {
+            key: 0,
+            icon: "lucide:loader-2",
+            class: "h-4 w-4 animate-spin"
+          })) : (i(), u(L, {
+            key: 1,
+            icon: e.expanded ? "lucide:chevron-down" : D.value,
+            class: "h-4 w-4"
+          }, null, 8, ["icon"]))
+        ], 8, le)) : c("", !0),
+        d.value.primaryHeader ? (i(), o("div", {
+          key: 2,
+          class: m(["min-w-0 flex-1", v(d.value.primaryHeader, n(e.row, d.value.primaryHeader.field), e.row)]),
+          onClick: b
+        }, [
+          S(l.$slots, d.value.primaryHeader.field, {
+            value: n(e.row, d.value.primaryHeader.field),
+            row: e.row,
+            index: e.index,
+            field: d.value.primaryHeader.field
+          }, () => [
+            d.value.primaryHeader.type === "price" ? (i(), u(z, {
+              key: 0,
+              value: n(e.row, d.value.primaryHeader.field),
+              class: "block",
+              title: String(n(e.row, d.value.primaryHeader.field))
+            }, null, 8, ["value", "title"])) : d.value.primaryHeader.type === "date" ? (i(), u(I, {
+              key: 1,
+              value: n(e.row, d.value.primaryHeader.field),
+              class: "block",
+              title: String(n(e.row, d.value.primaryHeader.field))
+            }, null, 8, ["value", "title"])) : (i(), o("span", {
+              key: 2,
+              class: "block text-sm font-semibold truncate",
+              title: String(n(e.row, d.value.primaryHeader.field)),
+              innerHTML: y(
+                d.value.primaryHeader,
+                n(e.row, d.value.primaryHeader.field),
+                e.row
+              )
+            }, null, 8, ie))
+          ], !0)
+        ], 2)) : c("", !0)
+      ]),
+      d.value.bodyHeaders.length ? (i(), o("div", {
+        key: 0,
+        class: "flex flex-col gap-2.5 px-3 py-3 min-w-0",
+        onClick: b
+      }, [
+        (i(!0), o(C, null, $(d.value.bodyHeaders, (t) => (i(), o("div", {
+          key: t.field,
+          class: "flex items-start justify-between gap-7 min-w-0"
+        }, [
+          T(t) ? (i(), o("span", ne, J(T(t)), 1)) : c("", !0),
+          g("div", {
+            class: m(["stacked-cell-value min-w-0 flex-1 text-sm text-right flex justify-end items-start", [
+              v(t, n(e.row, t.field), e.row),
+              T(t) ? "" : "w-full text-left justify-start"
+            ]])
+          }, [
+            S(l.$slots, t.field, {
+              value: n(e.row, t.field),
+              row: e.row,
+              index: e.index,
+              field: t.field
+            }, () => [
+              t.type === "price" ? (i(), u(z, {
+                key: 0,
+                value: n(e.row, t.field),
+                class: "block",
+                title: String(n(e.row, t.field))
+              }, null, 8, ["value", "title"])) : t.type === "date" ? (i(), u(I, {
+                key: 1,
+                value: n(e.row, t.field),
+                class: "block",
+                title: String(n(e.row, t.field))
+              }, null, 8, ["value", "title"])) : (i(), o("span", {
+                key: 2,
+                class: "block",
+                title: String(n(e.row, t.field)),
+                innerHTML: y(t, n(e.row, t.field), e.row)
+              }, null, 8, ae))
+            ], !0)
+          ], 2)
+        ]))), 128))
+      ])) : c("", !0),
+      d.value.actionHeaders.length ? (i(), o("div", {
+        key: 1,
+        class: "flex items-center justify-end gap-1 flex-wrap px-2 py-2 border-t",
+        onClick: a[2] || (a[2] = x(() => {
+        }, ["stop"]))
+      }, [
+        (i(!0), o(C, null, $(d.value.actionHeaders, (t) => (i(), o("div", {
+          key: t.field,
+          class: m(["min-w-0 flex items-center justify-end gap-0.5", v(t, n(e.row, t.field), e.row)])
+        }, [
+          S(l.$slots, t.field, {
+            value: n(e.row, t.field),
+            row: e.row,
+            index: e.index,
+            field: t.field
+          }, () => [
+            g("span", {
+              class: "block",
+              innerHTML: y(t, n(e.row, t.field), e.row)
+            }, null, 8, oe)
+          ], !0)
+        ], 2))), 128))
+      ])) : c("", !0)
+    ], 14, te)) : (i(), o("tr", {
+      key: 1,
+      class: m(["border-b data-[state=selected]:bg-muted h-full", [
+        e.hoverable ? "hover:bg-muted/20" : "",
+        e.striped && e.index % 2 === 1 ? "bg-muted/20" : "bg-background",
+        e.isSelected ? "bg-muted! hover:bg-muted/30" : "",
+        "group"
+      ]]),
+      "data-state": e.isSelected ? "selected" : void 0,
+      onClick: b
+    }, [
+      e.selectable ? (i(), o("td", {
+        key: 0,
+        class: "px-0! py-1! align-middle text-center",
+        onClick: a[3] || (a[3] = x(() => {
+        }, ["stop"]))
+      }, [
+        g("div", se, [
+          B(j, {
+            "model-value": e.isSelected,
+            indeterminate: e.isIndeterminate,
+            size: "xs",
+            "onUpdate:modelValue": N
+          }, null, 8, ["model-value", "indeterminate"])
+        ])
+      ])) : c("", !0),
+      (i(!0), o(C, null, $(e.headers, (t, s) => (i(), o("td", {
+        key: t.field,
+        class: m(["align-middle whitespace-normal wrap-break-word", [
+          p(),
+          G(t),
+          t.hideOnMobile ? "hidden md:table-cell" : "",
+          e.treeMode ? "max-w-none min-w-0" : "max-w-[400px]",
+          // Keep overflow clip on data cells; last column (actions) must stay visible
+          s === e.headers.length - 1 ? "overflow-visible" : "overflow-hidden",
+          // Tree chrome overlays the whole first cell (incl. padding) so branch
+          // lines join seamlessly across rows. overflow-visible lets the connector
+          // overlay bleed across the collapsed row border for continuous trunks.
+          e.treeMode && s === 0 ? "relative ps-0! overflow-visible!" : "",
+          v(t, n(e.row, t.field), e.row)
+        ]]),
+        style: k(
+          e.treeMode ? void 0 : {
+            ...t.width && !/(?:^|\s|:)w-/.test(t.width) ? { width: t.width } : {},
+            ...t.minWidth && !/(?:^|\s|:)min-w-/.test(t.minWidth) ? { minWidth: t.minWidth } : {}
+          }
+        ),
+        onClick: (f) => e.treeMode && s === 0 && e.expandable ? h(f) : void 0
+      }, [
+        e.treeMode && s === 0 ? (i(), o(C, { key: 0 }, [
+          B(H(K), {
+            depth: e.depth,
+            "is-last-sibling": e.isLastSibling,
+            "ancestor-last-flags": e.ancestorLastFlags,
+            "has-toggle": e.expandable,
+            indent: e.treeIndent,
+            "base-inset": H(E),
+            "content-gap": H(A),
+            "leaf-has-spacer": !1,
+            "leaf-inset": H(R),
+            "bleed-y": ""
+          }, null, 8, ["depth", "is-last-sibling", "ancestor-last-flags", "has-toggle", "indent", "base-inset", "content-gap", "leaf-inset"]),
+          e.expandable ? (i(), o("button", {
+            key: 0,
+            type: "button",
+            class: "tree-expand-toggle absolute z-20 top-1/2 -translate-y-1/2 flex h-7 w-7 items-center justify-center rounded-sm text-muted-foreground hover:bg-muted hover:text-foreground transition-colors focus:outline-none",
+            style: k({ insetInlineStart: O.value + "px" }),
+            "aria-expanded": e.expanded,
+            onClick: x(h, ["stop"])
+          }, [
+            e.treeLoading ? (i(), u(L, {
+              key: 0,
+              icon: "lucide:loader-2",
+              class: "h-4 w-4 animate-spin"
+            })) : (i(), u(L, {
+              key: 1,
+              icon: e.expanded ? "lucide:chevron-down" : D.value,
+              class: "h-4 w-4"
+            }, null, 8, ["icon"]))
+          ], 12, ue)) : c("", !0)
+        ], 64)) : c("", !0),
+        g("div", {
+          class: m([
+            "tree-row-content w-full min-w-0",
+            e.treeMode && s === 0 ? "relative z-10 flex items-center min-h-[28px] max-h-[80px] overflow-y-auto scrollbar-hide" : s === e.headers.length - 1 ? "overflow-visible" : "max-h-[80px] overflow-y-auto scrollbar-hide"
+          ]),
+          style: k(
+            e.treeMode && s === 0 ? { paddingInlineStart: Z.value + "px" } : void 0
+          )
+        }, [
+          S(l.$slots, t.field, {
+            value: n(e.row, t.field),
+            row: e.row,
+            index: e.index,
+            field: t.field
+          }, () => [
+            t.type === "price" ? (i(), u(z, {
+              key: 0,
+              value: n(e.row, t.field),
+              class: "block",
+              title: String(n(e.row, t.field))
+            }, null, 8, ["value", "title"])) : t.type === "date" ? (i(), u(I, {
+              key: 1,
+              value: n(e.row, t.field),
+              class: "block",
+              title: String(n(e.row, t.field))
+            }, null, 8, ["value", "title"])) : (i(), o("span", {
+              key: 2,
+              class: "block",
+              title: String(n(e.row, t.field)),
+              innerHTML: y(t, n(e.row, t.field), e.row)
+            }, null, 8, ce))
+          ], !0)
+        ], 6)
+      ], 14, re))), 128))
+    ], 10, de));
+  }
+});
 export {
-  f as default
+  Ce as default
 };

package/components/DataTable/dataTableHeaders.d.ts

@@ -0,0 +1,18 @@
+import { TableHeader } from './types';
+/** Action columns (`action` / `actions`) render in the stacked card footer. */
+export declare const isActionHeader: (header: TableHeader) => boolean;
+/** Headers visible in stacked (mobile) card mode. */
+export declare const getStackedVisibleHeaders: (headers: TableHeader[]) => TableHeader[];
+export interface StackedHeaderGroups {
+    primaryHeader: TableHeader | undefined;
+    bodyHeaders: TableHeader[];
+    actionHeaders: TableHeader[];
+    visible: TableHeader[];
+}
+/**
+ * Split headers for the stacked card layout:
+ * - primary: first non-action visible column (card toolbar)
+ * - body: remaining non-action columns (labeled rows)
+ * - action: action/actions columns (card footer)
+ */
+export declare const splitStackedHeaders: (headers: TableHeader[]) => StackedHeaderGroups;

package/components/DataTable/dataTableHeaders.js

@@ -0,0 +1,9 @@
+const i = (e) => /^actions?$/i.test(e.field), d = (e) => e.filter((t) => !t.hideOnMobile), n = (e) => {
+  const t = d(e), r = t.filter(i), s = t.filter((o) => !i(o)), a = s[0], c = s.slice(1);
+  return { primaryHeader: a, bodyHeaders: c, actionHeaders: r, visible: t };
+};
+export {
+  d as getStackedVisibleHeaders,
+  i as isActionHeader,
+  n as splitStackedHeaders
+};

package/components/DataTable/types.d.ts

@@ -88,6 +88,12 @@ export interface DataTableProps {
      * @default 20
      */
     treeIndent?: number;
+    /**
+     * When `true` (default), viewports below the Tailwind `md` breakpoint render
+     * stacked labeled cards instead of the multi-column table.
+     * Set to `false` to keep the always-table + horizontal-scroll layout.
+     */
+    responsive?: boolean;
 }
 export interface SelectionState {
     selected: any[];