vlite3 0.7.6 → 0.7.8

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

@@ -1,4 +1,4 @@
-import { DataTableProps, SelectionState, RowClickPayload, TableState } from './types';
+import { DataTableProps, SelectionState, RowClickPayload, TableState, TableHeader } from './types';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Partial<Record<string, (_: {
@@ -39,7 +39,7 @@ declare const __VLS_component: import('vue').DefineComponent<DataTableProps, {},
     rows: any[];
     selectable: boolean;
     showSearch: boolean;
-    headers: import('./types').TableHeader[];
+    headers: TableHeader[];
     paginationProps: import('./types').DataTablePaginationProps;
     emptyIcon: string;
     showPagination: boolean;

package/components/DataTable/DataTable.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as me, inject as ve, computed as n, ref as b, watch as g, openBlock as r, createElementBlock as u, createBlock as R, normalizeClass as S, createSlots as M, withCtx as T, renderSlot as D, createCommentVNode as x, createElementVNode as f, createVNode as z, Fragment as A, renderList as $, normalizeStyle as L, mergeProps as Y, unref as W } from "vue";
+import { defineComponent as me, inject as ve, computed as r, ref as b, watch as h, openBlock as i, createElementBlock as u, createBlock as N, normalizeClass as C, createSlots as V, withCtx as k, renderSlot as I, createVNode as S, createCommentVNode as $, createElementVNode as f, Fragment as B, renderList as T, normalizeStyle as j, mergeProps as O, unref as L } from "vue";
 import he from "../CheckBox.vue.js";
 import ge from "../Button.vue.js";
 import pe from "../ConfirmationModal.vue.js";
@@ -7,7 +7,7 @@ import ye from "../Empty/Empty.vue.js";
 import we from "./DataTableHeader.vue.js";
 import Pe from "./DataTableRow.vue.js";
 import Ce from "./DataTableToolbar.vue.js";
-import { $t as P } from "../../utils/i18n.js";
+import { $t as y } from "../../utils/i18n.js";
 import { SCREEN_CONTEXT_KEY as ke } from "./types.js";
 const Ie = { class: "space-y-6.5" }, Se = { class: "overflow-x-auto w-full" }, Te = { class: "hover:bg-transparent" }, De = {
   key: 0,
@@ -57,286 +57,245 @@ const Ie = { class: "space-y-6.5" }, Se = { class: "overflow-x-auto w-full" }, T
     variant: { default: "default" }
   },
   emits: ["change", "select", "rowClick", "update:itemsPerPage", "update:selectedRows", "delete"],
-  setup(o, { emit: X }) {
-    const q = (e, t) => {
+  setup(o, { emit: Y }) {
+    const W = (e, t) => {
       if (!(!e || !t))
-        return t.includes(".") ? t.split(".").reduce((a, c) => a?.[c], e) : e[t];
-    }, m = (e, t) => q(e, t), G = (e, t) => {
-      const a = ["id", "_id"];
+        return t.includes(".") ? t.split(".").reduce((l, s) => l?.[s], e) : e[t];
+    }, m = (e, t) => W(e, t), X = (e, t) => {
+      const l = ["id", "_id"];
       if (t && t !== "auto") return t;
       if (e && e.length > 0) {
-        for (const c of a)
-          if (c in e[0]) return c;
+        for (const s of l)
+          if (s in e[0]) return s;
       }
       return "_id";
-    }, l = o, y = X, j = ve(ke, null), O = n(() => j?.disableSearch ? !1 : l.showSearch), B = n(() => !!(l.selectable || j?.forceSelectable)), i = n(() => G(l.rows, l.keyField)), d = b({ field: "", order: "" }), C = b(
-      l.pageInfo?.itemsPerPage || l.paginationProps?.itemsPerPage || 10
-    ), p = b(l.pageInfo?.currentPage || 1), w = b(l.search || ""), k = b(!1), I = b("initial"), H = n(() => l.loading);
-    g(
-      () => l.loading,
-      (e, t) => {
-        !e && t && (I.value = "idle");
-      }
-    ), g(
-      () => l.search,
+    }, q = (e) => e.sortKey || e.field, a = o, g = Y, E = ve(ke, null), U = r(() => E?.disableSearch ? !1 : a.showSearch), D = r(() => a.selectable || !!E?.forceSelectable), d = r(() => X(a.rows, a.keyField)), c = b({ field: "", order: "" }), w = b(
+      a.pageInfo?.itemsPerPage || a.paginationProps?.itemsPerPage || 10
+    ), v = b(a.pageInfo?.currentPage || 1), p = b(a.search || ""), P = b(!1), G = r(() => a.loading);
+    h(
+      () => a.search,
       (e) => {
-        e !== void 0 && e !== w.value && (w.value = e);
+        e !== void 0 && e !== p.value && (p.value = e);
       }
     );
-    let N = null;
-    g(w, () => {
-      N && clearTimeout(N), N = setTimeout(() => {
-        p.value = 1, I.value = "search", E();
+    let R = null;
+    h(p, () => {
+      R && clearTimeout(R), R = setTimeout(() => {
+        v.value = 1, x();
       }, 300);
-    }), g(
-      () => l.pageInfo?.itemsPerPage,
-      (e) => {
-        e !== void 0 && (C.value = e);
-      }
-    ), g(
-      () => l.paginationProps?.itemsPerPage,
-      (e) => {
-        e !== void 0 && (C.value = e);
-      }
-    ), g(
-      () => l.pageInfo?.currentPage,
-      (e) => {
-        e && (p.value = e);
-      }
-    );
-    const s = b(/* @__PURE__ */ new Set());
-    g(
-      () => l.selectedRows,
+    }), h(() => a.pageInfo?.itemsPerPage, (e) => {
+      e !== void 0 && (w.value = e);
+    }), h(() => a.paginationProps?.itemsPerPage, (e) => {
+      e !== void 0 && (w.value = e);
+    }), h(() => a.pageInfo?.currentPage, (e) => {
+      e && (v.value = e);
+    });
+    const n = b(/* @__PURE__ */ new Set());
+    h(
+      () => a.selectedRows,
       (e) => {
-        const t = new Set(
-          (e || []).map((a) => m(a, i.value))
-        );
-        (t.size !== s.value.size || [...t].some((a) => !s.value.has(a))) && (s.value = t);
+        const t = new Set((e || []).map((l) => m(l, d.value)));
+        (t.size !== n.value.size || [...t].some((l) => !n.value.has(l))) && (n.value = t);
       },
       { immediate: !0, deep: !0 }
     );
-    const U = n(() => l.rows.length === 0 ? !1 : l.rows.every(
-      (e) => s.value.has(m(e, i.value))
-    )), V = n(
-      () => s.value.size > 0 && !U.value
-    ), J = n(() => {
-      const e = [...l.selectedRows || [], ...l.rows], t = /* @__PURE__ */ new Map();
-      return e.forEach((a) => t.set(m(a, i.value), a)), Array.from(s.value).map((a) => t.get(a)).filter(Boolean);
-    }), Q = (e) => {
-      e ? l.rows.forEach(
-        (t) => s.value.add(m(t, i.value))
-      ) : s.value.size > 0 && l.rows.forEach(
-        (t) => s.value.delete(m(t, i.value))
-      ), K();
-    }, Z = (e) => {
-      s.value.has(e) ? s.value.delete(e) : s.value.add(e), K();
+    const z = r(
+      () => a.rows.length > 0 && a.rows.every((e) => n.value.has(m(e, d.value)))
+    ), F = r(() => n.value.size > 0 && !z.value), H = r(() => {
+      const e = [...a.selectedRows || [], ...a.rows], t = /* @__PURE__ */ new Map();
+      return e.forEach((l) => t.set(m(l, d.value), l)), Array.from(n.value).map((l) => t.get(l)).filter(Boolean);
+    }), J = (e) => {
+      e ? a.rows.forEach((t) => n.value.add(m(t, d.value))) : a.rows.forEach((t) => n.value.delete(m(t, d.value))), K();
+    }, Q = (e) => {
+      n.value.has(e) ? n.value.delete(e) : n.value.add(e), K();
     }, K = () => {
-      const e = l.selectedRows || [], t = /* @__PURE__ */ new Set(), a = [];
-      l.rows.forEach((v) => {
-        const h = m(v, i.value);
-        s.value.has(h) && (a.push(v), t.add(h));
-      }), e.forEach((v) => {
-        const h = m(v, i.value);
-        !t.has(h) && s.value.has(h) && (a.push(v), t.add(h));
-      });
-      const c = {
-        selected: a,
-        all: U.value,
-        indeterminate: V.value
-      };
-      y("select", c), y("update:selectedRows", a);
+      const e = /* @__PURE__ */ new Set(), t = [];
+      a.rows.forEach((l) => {
+        const s = m(l, d.value);
+        n.value.has(s) && (t.push(l), e.add(s));
+      }), (a.selectedRows || []).forEach((l) => {
+        const s = m(l, d.value);
+        !e.has(s) && n.value.has(s) && (t.push(l), e.add(s));
+      }), g("select", { selected: t, all: z.value, indeterminate: F.value }), g("update:selectedRows", t);
+    }, Z = (e) => {
+      const t = a.headers.find((s) => s.field === e), l = t ? q(t) : e;
+      c.value.field === l ? c.value.order === "asc" ? c.value.order = "desc" : c.value.order === "desc" ? (c.value.order = "", c.value.field = "") : c.value.order = "asc" : (c.value.field = l, c.value.order = "asc"), v.value = 1, x();
     }, _ = (e) => {
-      d.value.field === e ? d.value.order === "asc" ? d.value.order = "desc" : d.value.order === "desc" ? (d.value.order = "", d.value.field = "") : d.value.order = "asc" : (d.value.field = e, d.value.order = "asc"), p.value = 1, I.value = "sort", E();
+      v.value = e, x();
     }, ee = (e) => {
-      p.value = e, I.value = "page", E();
-    }, te = (e) => {
-      C.value = e, p.value = 1, I.value = "limit", y("update:itemsPerPage", e), E();
-    }, le = (e) => {
-      y("rowClick", e);
-    }, ae = () => {
-      const e = J.value;
-      y("delete", e), k.value = !1;
+      w.value = e, v.value = 1, g("update:itemsPerPage", e), x();
+    }, te = (e) => g("rowClick", e), le = () => {
+      g("delete", H.value), P.value = !1;
     };
-    let F = null;
-    const E = () => {
-      F && clearTimeout(F), F = setTimeout(() => {
-        y("change", {
-          pagination: {
-            page: p.value,
-            limit: C.value
-          },
-          sort: { ...d.value },
-          search: w.value,
+    let A = null;
+    const x = () => {
+      A && clearTimeout(A), A = setTimeout(() => {
+        const e = {
+          pagination: { page: v.value, limit: w.value },
+          sort: { ...c.value },
+          search: p.value,
           filter: {}
-        });
+        };
+        g("change", e), E?.onTableChange?.(e);
       }, 10);
     };
-    g(
-      () => l.rows,
+    h(
+      () => a.rows,
       () => {
-        const e = new Set(
-          l.rows.map((t) => m(t, i.value))
-        );
-        s.value = new Set([...s.value].filter((t) => e.has(t)));
+        const e = new Set(a.rows.map((t) => m(t, d.value)));
+        n.value = new Set([...n.value].filter((t) => e.has(t)));
       }
     );
-    const oe = n(() => [
+    const ae = r(() => [
       "w-full flex flex-col",
-      l.variant === "raised" ? "bg-background shadow-sm p-2 rounded-lg" : "bg-background rounded",
+      a.variant === "raised" ? "bg-background shadow-sm p-2 rounded-lg" : "bg-background rounded",
       "overflow-hidden",
-      l.bordered ? "border border-border" : "",
-      l.class
-    ].join(" ")), se = n(
-      () => ["w-full caption-bottom -text-fs-1", l.tableClass].join(" ")
-    ), ne = (e) => e.width || "auto", re = n(
-      () => l.emptyTitleI18n ? P(l.emptyTitleI18n) : l.emptyTitle
-    ), ie = n(
-      () => l.emptyDescriptionI18n ? P(l.emptyDescriptionI18n) : l.emptyDescription
-    ), de = n(() => {
-      const e = P("vlite.dataTable.confirmDeleteTitle");
+      a.bordered ? "border border-border" : "",
+      a.class
+    ].join(" ")), oe = r(() => ["w-full caption-bottom -text-fs-1", a.tableClass].join(" ")), se = (e) => e.width || "auto", ne = r(() => a.emptyTitleI18n ? y(a.emptyTitleI18n) : a.emptyTitle), re = r(() => a.emptyDescriptionI18n ? y(a.emptyDescriptionI18n) : a.emptyDescription), ie = r(() => {
+      const e = y("vlite.dataTable.confirmDeleteTitle");
       return e !== "vlite.dataTable.confirmDeleteTitle" ? e : "Confirm Deletion";
-    }), ce = n(() => {
-      const e = P("vlite.dataTable.confirmDeleteDesc");
+    }), de = r(() => {
+      const e = y("vlite.dataTable.confirmDeleteDesc");
       return e !== "vlite.dataTable.confirmDeleteDesc" ? e : "Are you sure you want to delete the selected items?";
-    }), ue = n(() => {
-      const e = P("vlite.dataTable.deleteBtn");
+    }), ce = r(() => {
+      const e = y("vlite.dataTable.deleteBtn");
       return e !== "vlite.dataTable.deleteBtn" ? e : "Delete";
-    }), fe = n(() => {
-      const e = P("vlite.dataTable.cancelBtn");
+    }), ue = r(() => {
+      const e = y("vlite.dataTable.cancelBtn");
       return e !== "vlite.dataTable.cancelBtn" ? e : "Cancel";
     });
-    return (e, t) => (r(), u("div", Ie, [
-      O.value || e.$slots?.["toolbar-left"] || e.$slots?.["toolbar-right"] ? (r(), R(Ce, {
+    return (e, t) => (i(), u("div", Ie, [
+      U.value || e.$slots?.["toolbar-left"] || e.$slots?.["toolbar-right"] ? (i(), N(Ce, {
         key: 0,
-        modelValue: w.value,
-        "onUpdate:modelValue": t[1] || (t[1] = (a) => w.value = a),
-        "show-search": O.value,
+        modelValue: p.value,
+        "onUpdate:modelValue": t[1] || (t[1] = (l) => p.value = l),
+        "show-search": U.value,
         placeholder: o.searchPlaceholder,
         placeholderI18n: o.searchPlaceholderI18n,
-        class: S(o.toolbarClass),
+        class: C(o.toolbarClass),
         "search-class": o.toolbarSearchClass
-      }, M({ _: 2 }, [
+      }, V({ _: 2 }, [
         e.$slots?.["toolbar-left"] ? {
           name: "left",
-          fn: T(() => [
-            D(e.$slots, "toolbar-left")
+          fn: k(() => [
+            I(e.$slots, "toolbar-left")
           ]),
           key: "0"
         } : void 0,
-        s.value.size > 0 ? {
+        n.value.size > 0 ? {
           name: "delete",
-          fn: T(() => [
-            s.value.size > 0 ? (r(), R(ge, {
-              key: 0,
+          fn: k(() => [
+            S(ge, {
               rounded: "full",
               variant: "outline",
               size: "lg",
               icon: "lucide:trash-2",
-              onClick: t[0] || (t[0] = (a) => k.value = !0)
-            })) : x("", !0)
+              onClick: t[0] || (t[0] = (l) => P.value = !0)
+            })
           ]),
           key: "1"
         } : void 0,
         e.$slots?.["toolbar-right"] ? {
           name: "right",
-          fn: T(() => [
-            D(e.$slots, "toolbar-right")
+          fn: k(() => [
+            I(e.$slots, "toolbar-right")
           ]),
           key: "2"
         } : void 0
-      ]), 1032, ["modelValue", "show-search", "placeholder", "placeholderI18n", "class", "search-class"])) : x("", !0),
+      ]), 1032, ["modelValue", "show-search", "placeholder", "placeholderI18n", "class", "search-class"])) : $("", !0),
       f("div", {
-        class: S(oe.value)
+        class: C(ae.value)
       }, [
         f("div", Se, [
           f("table", {
-            class: S([se.value, "data-table"])
+            class: C([oe.value, "data-table"])
           }, [
             f("thead", {
-              class: S([
+              class: C([
                 "[&_tr]:border-b [&_tr]:border-border bg-muted",
                 o.variant === "raised" ? "[&_th:first-child]:rounded-tl-lg [&_th:last-child]:rounded-tr-lg" : ""
               ])
             }, [
               f("tr", Te, [
-                B.value ? (r(), u("th", De, [
+                D.value ? (i(), u("th", De, [
                   f("div", xe, [
-                    z(he, {
-                      "model-value": U.value,
-                      indeterminate: V.value,
+                    S(he, {
+                      "model-value": z.value,
+                      indeterminate: F.value,
                       size: "xs",
-                      "onUpdate:modelValue": Q
+                      "onUpdate:modelValue": J
                     }, null, 8, ["model-value", "indeterminate"])
                   ])
-                ])) : x("", !0),
-                (r(!0), u(A, null, $(o.headers, (a) => (r(), R(we, {
-                  key: a.field,
-                  header: a,
-                  "sort-config": d.value,
+                ])) : $("", !0),
+                (i(!0), u(B, null, T(o.headers, (l) => (i(), N(we, {
+                  key: l.field,
+                  header: l,
+                  "sort-config": c.value,
                   compact: o.compact,
                   "table-sortable": o.sortable,
-                  onSort: _,
+                  onSort: Z,
                   class: "last:pr-5!",
-                  style: L({ width: ne(a) })
+                  style: j({ width: se(l) })
                 }, null, 8, ["header", "sort-config", "compact", "table-sortable", "style"]))), 128))
               ])
             ], 2),
             f("tbody", $e, [
-              H.value ? (r(!0), u(A, { key: 0 }, $(Math.min(C.value, 15), (a) => (r(), u("tr", {
-                key: "skeleton-" + a,
+              G.value ? (i(!0), u(B, { key: 0 }, T(Math.min(w.value, 15), (l) => (i(), u("tr", {
+                key: "skeleton-" + l,
                 class: "border-b border-border/70 bg-background transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"
               }, [
-                B.value ? (r(), u("td", Be, [...t[4] || (t[4] = [
+                D.value ? (i(), u("td", Be, [...t[4] || (t[4] = [
                   f("div", { class: "flex items-center justify-center" }, [
                     f("div", { class: "h-4 w-4 rounded-[4px] bg-muted/50 animate-pulse" })
                   ], -1)
-                ])])) : x("", !0),
-                (r(!0), u(A, null, $(o.headers, (c) => (r(), u("td", {
-                  key: c.field,
-                  class: S(["p-5! align-middle last:pr-6!", [c.hideOnMobile ? "hidden md:table-cell" : ""]])
+                ])])) : $("", !0),
+                (i(!0), u(B, null, T(o.headers, (s) => (i(), u("td", {
+                  key: s.field,
+                  class: C(["p-5! align-middle last:pr-6!", [s.hideOnMobile ? "hidden md:table-cell" : ""]])
                 }, [
                   f("div", {
-                    class: "rounded-md bg-muted/50 animate-pulse h-4 w-full",
-                    style: L({ width: `${50 + Math.random() * 40}%` })
+                    class: "rounded-md bg-muted/50 animate-pulse h-4",
+                    style: j({ width: `${50 + Math.random() * 40}%` })
                   }, null, 4)
                 ], 2))), 128))
-              ]))), 128)) : o.rows.length > 0 ? (r(!0), u(A, { key: 1 }, $(o.rows, (a, c) => (r(), R(Pe, {
-                key: m(a, i.value),
-                row: a,
+              ]))), 128)) : o.rows.length > 0 ? (i(!0), u(B, { key: 1 }, T(o.rows, (l, s) => (i(), N(Pe, {
+                key: m(l, d.value),
+                row: l,
                 headers: o.headers,
-                index: c,
-                "key-field": i.value,
-                selectable: B.value,
-                "is-selected": s.value.has(m(a, i.value)),
+                index: s,
+                "key-field": d.value,
+                selectable: D.value,
+                "is-selected": n.value.has(m(l, d.value)),
                 hoverable: o.hoverable,
                 striped: o.striped,
                 compact: o.compact,
-                onSelect: Z,
-                onRowClick: le,
+                onSelect: Q,
+                onRowClick: te,
                 class: "[&_td:last-child]:pr-3.5!"
-              }, M({ _: 2 }, [
-                $(o.headers, (v) => ({
-                  name: v.field,
-                  fn: T((h) => [
-                    D(e.$slots, v.field, Y({ ref_for: !0 }, h))
+              }, V({ _: 2 }, [
+                T(o.headers, (M) => ({
+                  name: M.field,
+                  fn: k((fe) => [
+                    I(e.$slots, M.field, O({ ref_for: !0 }, fe))
                   ])
                 }))
-              ]), 1032, ["row", "headers", "index", "key-field", "selectable", "is-selected", "hoverable", "striped", "compact"]))), 128)) : (r(), u("tr", Ee, [
+              ]), 1032, ["row", "headers", "index", "key-field", "selectable", "is-selected", "hoverable", "striped", "compact"]))), 128)) : (i(), u("tr", Ee, [
                 f("td", {
-                  colspan: B.value ? o.headers.length + 1 : o.headers.length,
+                  colspan: D.value ? o.headers.length + 1 : o.headers.length,
                   class: "align-middle hover:bg-transparent"
                 }, [
-                  D(e.$slots, "empty", {}, () => [
-                    z(W(ye), {
-                      title: re.value,
-                      description: ie.value,
+                  I(e.$slots, "empty", {}, () => [
+                    S(L(ye), {
+                      title: ne.value,
+                      description: re.value,
                       icon: o.emptyIcon,
                       class: "border-none! bg-transparent! py-16!"
-                    }, M({ _: 2 }, [
+                    }, V({ _: 2 }, [
                       e.$slots["empty-action"] ? {
                         name: "action",
-                        fn: T(() => [
-                          D(e.$slots, "empty-action")
+                        fn: k(() => [
+                          I(e.$slots, "empty-action")
                         ]),
                         key: "0"
                       } : void 0
@@ -348,26 +307,26 @@ const Ie = { class: "space-y-6.5" }, Se = { class: "overflow-x-auto w-full" }, T
           ], 2)
         ])
       ], 2),
-      o.showPagination && o.pageInfo && o.pageInfo.totalPages > 1 ? (r(), u("div", ze, [
-        z(W(be), Y({
-          "current-page": p.value,
+      o.showPagination && o.pageInfo && o.pageInfo.totalPages > 1 ? (i(), u("div", ze, [
+        S(L(be), O({
+          "current-page": v.value,
           "total-pages": o.pageInfo.totalPages,
           "total-items": o.pageInfo.totalItems
         }, o.paginationProps, {
-          onChange: ee,
-          "onUpdate:itemsPerPage": te
+          onChange: _,
+          "onUpdate:itemsPerPage": ee
         }), null, 16, ["current-page", "total-pages", "total-items"])
-      ])) : x("", !0),
-      z(pe, {
-        show: k.value,
-        "onUpdate:show": t[2] || (t[2] = (a) => k.value = a),
-        title: de.value,
-        description: ce.value,
-        "confirm-text": ue.value,
-        "cancel-text": fe.value,
+      ])) : $("", !0),
+      S(pe, {
+        show: P.value,
+        "onUpdate:show": t[2] || (t[2] = (l) => P.value = l),
+        title: ie.value,
+        description: de.value,
+        "confirm-text": ce.value,
+        "cancel-text": ue.value,
         variant: "danger",
-        onConfirm: ae,
-        onCancel: t[3] || (t[3] = (a) => k.value = !1)
+        onConfirm: le,
+        onCancel: t[3] || (t[3] = (l) => P.value = !1)
       }, null, 8, ["show", "title", "description", "confirm-text", "cancel-text"])
     ]));
   }

package/components/DataTable/DataTableHeader.vue.js

@@ -1,10 +1,10 @@
-import { defineComponent as p, computed as o, openBlock as a, createElementBlock as n, normalizeClass as r, createElementVNode as l, toDisplayString as g, createVNode as x, createCommentVNode as b } from "vue";
-import y from "../Icon.vue.js";
+import { defineComponent as g, computed as o, openBlock as n, createElementBlock as l, normalizeClass as r, createElementVNode as s, toDisplayString as b, createVNode as x, createCommentVNode as y } from "vue";
+import v from "../Icon.vue.js";
 import { $t as C } from "../../utils/i18n.js";
-const v = { class: "text-xs font-bold! uppercase tracking-wider text-gray-900 truncate" }, w = {
+const w = { class: "text-xs font-bold! uppercase tracking-wider text-gray-900 truncate" }, S = {
   key: 0,
   class: "w-4 h-4 shrink-0"
-}, I = /* @__PURE__ */ p({
+}, M = /* @__PURE__ */ g({
   __name: "DataTableHeader",
   props: {
     header: {},
@@ -14,38 +14,40 @@ const v = { class: "text-xs font-bold! uppercase tracking-wider text-gray-900 tr
   },
   emits: ["sort"],
   setup(t, { emit: i }) {
-    const e = t, s = i, c = o(() => e.sortConfig?.field === e.header.field && e.sortConfig?.order), d = o(() => !e.sortConfig || e.sortConfig.field !== e.header.field ? "lucide:chevrons-up-down" : e.sortConfig.order === "asc" ? "lucide:arrow-up" : e.sortConfig.order === "desc" ? "lucide:arrow-down" : "lucide:chevrons-up-down"), f = () => {
-      e.tableSortable && e.header.sortable !== !1 && s("sort", e.header.field);
-    }, u = o(() => ({
+    const e = t, c = i, a = o(() => e.header.sortKey || e.header.field), d = o(
+      () => e.sortConfig?.field === a.value && e.sortConfig?.order
+    ), f = o(() => !e.sortConfig || e.sortConfig.field !== a.value ? "lucide:chevrons-up-down" : e.sortConfig.order === "asc" ? "lucide:arrow-up" : e.sortConfig.order === "desc" ? "lucide:arrow-down" : "lucide:chevrons-up-down"), u = () => {
+      e.tableSortable && e.header.sortable !== !1 && c("sort", e.header.field);
+    }, h = o(() => ({
       left: "justify-start text-left",
       center: "justify-center text-center",
       right: "justify-end text-right"
-    })[e.header.align || "left"]), h = o(() => e.header.titleI18n ? C(e.header.titleI18n) : e.header.title);
-    return (m, k) => (a(), n("th", {
+    })[e.header.align || "left"]), m = o(
+      () => e.header.titleI18n ? C(e.header.titleI18n) : e.header.title
+    );
+    return (p, k) => (n(), l("th", {
       scope: "col",
       class: r(["h-10 px-3 text-left align-middle font-medium text-muted-foreground transition-colors [&:has([role=checkbox])]:pr-0 overflow-hidden", [
         t.compact ? "py-2" : "py-3!",
-        t.header.sortable !== !1 ? "cursor-pointer hover:bg-muted/50" : "",
+        t.header.sortable !== !1 && t.tableSortable ? "cursor-pointer hover:bg-muted/50" : "",
         t.header.hideOnMobile ? "hidden md:table-cell" : ""
       ]]),
-      onClick: f
+      onClick: u
     }, [
-      l("div", {
-        class: r(["flex items-center gap-2 space-x-2", u.value])
+      s("div", {
+        class: r(["flex items-center gap-2 space-x-2", h.value])
       }, [
-        l("span", v, g(h.value), 1),
-        t.tableSortable && t.header.sortable !== !1 ? (a(), n("span", w, [
-          x(y, {
-            icon: d.value,
-            class: r(["w-3.5 h-3.5 transition-all text-muted-foreground mt-0.5", [
-              c.value ? "opacity-100 text-foreground" : "opacity-0 group-hover:opacity-100"
-            ]])
+        s("span", w, b(m.value), 1),
+        t.tableSortable && t.header.sortable !== !1 ? (n(), l("span", S, [
+          x(v, {
+            icon: f.value,
+            class: r(["w-3.5 h-3.5 transition-all text-muted-foreground mt-0.5", [d.value ? "opacity-100 text-foreground" : "opacity-0 group-hover:opacity-100"]])
           }, null, 8, ["icon", "class"])
-        ])) : b("", !0)
+        ])) : y("", !0)
       ], 2)
     ], 2));
   }
 });
 export {
-  I as default
+  M as default
 };

package/components/DataTable/types.d.ts

@@ -27,6 +27,13 @@ export interface TableHeader {
     field: string;
     title: string;
     titleI18n?: string;
+    /**
+     * The key sent to the backend when sorting this column.
+     * Defaults to `field` when not provided.
+     * Use this when the display field differs from the database column name,
+     * e.g. field: 'employee' (a custom slot) but sortKey: 'employeeName'.
+     */
+    sortKey?: string;
     width?: string;
     minWidth?: string;
     sortable?: boolean;
@@ -50,10 +57,7 @@ export interface DataTableProps {
     headers: TableHeader[];
     /**
      * Unique row identifier field.
-     * When set to the sentinel value 'auto' (the internal default), DataTable will
-     * automatically pick the first matching key from ['id', '_id'] found on the
-     * first row. Explicitly passing 'id' or '_id' (or any other string) pins the
-     * field to that exact value.
+     * 'auto' → picks first of ['id','_id'] found on first row, fallback '_id'.
      */
     keyField?: string;
     loading?: boolean;
@@ -84,11 +88,18 @@ export interface RowClickPayload {
     row: any;
     index: number;
 }
-/** Shape provided by Screen to deeply nested components */
+/**
+ * Shape provided by Screen to all deeply nested components via provide/inject.
+ *
+ * - disableSearch    → DataTable hides its own search toolbar (Screen owns search)
+ * - forceSelectable  → DataTable enables row selection for bulk-delete
+ * - onTableChange    → DataTable calls this whenever sort/pagination/search changes
+ *                      so Screen can merge the state and call its own refetch.
+ *                      Undefined when DataTable is used standalone (outside Screen).
+ */
 export interface ScreenContext {
-    /** When true, DataTable should hide its own search toolbar */
     disableSearch: boolean;
-    /** When true, DataTable should enable row selection */
     forceSelectable: boolean;
+    onTableChange?: (state: TableState) => void;
 }
 export declare const SCREEN_CONTEXT_KEY: unique symbol;