vlite3 0.7.7 → 0.7.9

package/components/ColorPicker/ColorIro.vue3.js

@@ -1,5 +1,5 @@
-import o from "./ColorIro.vue2.js";
-/* empty css             */
+import o from "./ColorIro.vue.js";
+/* empty css              */
 export {
   o as default
 };

package/components/ColorPicker/ColorPicker.vue.js

@@ -5,8 +5,8 @@ import O from "../Input.vue.js";
 /* empty css            */
 import "../../core/config.js";
 import y from "../Button.vue.js";
-import E from "./ColorIro.vue2.js";
-/* empty css             */
+import E from "./ColorIro.vue.js";
+/* empty css              */
 import { useEyeDropper as P } from "@vueuse/core";
 const I = {
   key: 0,

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

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;