vlite3 0.1.3 → 0.1.6

package/components/Button.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent as v, useSlots as x, computed as s, withDirectives as y, openBlock as r, createElementBlock as w, normalizeClass as i, createBlock as a, createCommentVNode as u, renderSlot as p, createTextVNode as k, toDisplayString as z, unref as B } from "vue";
-import l from "./Icon.vue.js";
+import c from "./Icon.vue.js";
 import { vRipple as C } from "../directives/vRipple.js";
 const R = ["type", "disabled"], D = /* @__PURE__ */ v({
   __name: "Button",
@@ -16,8 +16,8 @@ const R = ["type", "disabled"], D = /* @__PURE__ */ v({
     rounded: { default: "md" }
   },
   setup(e) {
-    const t = e, g = x(), c = s(() => t.icon && !t.text && !g.default), h = s(() => {
-      const n = "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-95 cursor-pointer gap-2", d = {
+    const t = e, g = x(), l = s(() => t.icon && !t.text && !g.default), h = s(() => {
+      const n = "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-95 cursor-pointer gap-2", d = {
         primary: "bg-primary text-primary-foreground hover:bg-primary/90",
         "primary-light": "bg-primary-light text-primary-fg-light hover:bg-primary/20",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
@@ -62,7 +62,7 @@ const R = ["type", "disabled"], D = /* @__PURE__ */ v({
         n,
         d[t.variant],
         m[t.rounded],
-        c.value ? b[t.size] : f[t.size],
+        l.value ? b[t.size] : f[t.size],
         t.class
       ].join(" ");
     }), o = s(() => ({
@@ -77,22 +77,22 @@ const R = ["type", "disabled"], D = /* @__PURE__ */ v({
       class: i(h.value),
       disabled: e.disabled || e.loading
     }, [
-      e.loading ? (r(), a(l, {
+      e.loading ? (r(), a(c, {
         key: 0,
         icon: "lucide:loader-2",
         class: i(["animate-spin", { [o.value]: !0 }])
-      }, null, 8, ["class"])) : e.icon ? (r(), a(l, {
+      }, null, 8, ["class"])) : e.icon ? (r(), a(c, {
         key: 1,
         icon: e.icon,
         class: i({
-          "mx-auto": c.value,
+          "mx-auto": l.value,
           [o.value]: !0
         })
       }, null, 8, ["icon", "class"])) : u("", !0),
       p(n.$slots, "default", {}, () => [
         k(z(e.text), 1)
       ]),
-      e.iconRight && !e.loading ? (r(), a(l, {
+      e.iconRight && !e.loading ? (r(), a(c, {
         key: 2,
         icon: e.iconRight,
         class: i([o.value, "h-4 w-4"])

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

@@ -32,10 +32,10 @@ declare const __VLS_component: import('vue').DefineComponent<DataTableProps, {},
     "onUpdate:selectedRows"?: (value: any[]) => any;
 }>, {
     search: string;
+    variant: "default" | "raised";
     loading: boolean;
     rows: any[];
     selectable: boolean;
-    emptyMessage: string;
     showSearch: boolean;
     showItemsPerPage: boolean;
     itemsPerPage: number;
@@ -47,9 +47,12 @@ declare const __VLS_component: import('vue').DefineComponent<DataTableProps, {},
     striped: boolean;
     selectedRows: any[];
     searchPlaceholder: string;
+    emptyTitle: string;
+    emptyDescription: string;
     emptyIcon: string;
     showPagination: boolean;
     bordered: boolean;
+    sortable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/components/DataTable/DataTable.vue.js

@@ -1,7 +1,7 @@
-import a from "./DataTable.vue2.js";
+import o from "./DataTable.vue2.js";
 /* empty css               */
-import o from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ o(a, [["__scopeId", "data-v-45a246be"]]);
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-896cd72f"]]);
 export {
   m as default
 };

package/components/DataTable/DataTable.vue2.js

@@ -1,28 +1,25 @@
-import { defineComponent as _, ref as g, computed as b, watch as p, onMounted as ee, openBlock as n, createElementBlock as i, createVNode as $, createSlots as V, withCtx as z, renderSlot as I, createBlock as j, createCommentVNode as k, createElementVNode as r, normalizeClass as E, Fragment as B, renderList as P, normalizeStyle as D, mergeProps as te, toDisplayString as le, createTextVNode as ae, unref as se } from "vue";
+import { defineComponent as ee, ref as g, computed as b, watch as p, onMounted as te, openBlock as r, createElementBlock as d, createVNode as C, createSlots as V, withCtx as T, renderSlot as S, createBlock as D, createCommentVNode as I, createElementVNode as n, normalizeClass as B, Fragment as R, renderList as $, normalizeStyle as A, mergeProps as le, toDisplayString as M, createTextVNode as ae, unref as se } from "vue";
 import oe from "../Icon.vue.js";
-import ne from "../CheckBox.vue.js";
-import re from "../Button.vue.js";
-import ie from "../ConfirmationModal.vue.js";
-import de from "../Pagination/Pagination.vue.js";
+import re from "../CheckBox.vue.js";
+import ne from "../Button.vue.js";
+import de from "../ConfirmationModal.vue.js";
+import ie from "../Pagination/Pagination.vue.js";
 import ue from "./DataTableHeader.vue.js";
 import ce from "./DataTableRow.vue.js";
 import me from "./DataTableToolbar.vue.js";
-const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve = {
-  key: 0,
-  style: { width: "48px" }
-}, ge = { class: "[&_tr]:border-b [&_tr]:border-border/70! bg-muted" }, pe = { class: "hover:bg-transparent" }, we = {
+const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve = { class: "hover:bg-transparent" }, ge = {
   key: 0,
   scope: "col",
   class: "w-[48px] px-0 text-center font-medium text-muted-foreground",
   style: { width: "48px" }
-}, ye = { class: "flex items-center justify-center" }, be = { class: "[&_tr:last-child]:border-0" }, ke = {
+}, pe = { class: "flex items-center justify-center" }, we = { class: "[&_tr:last-child]:border-0" }, ye = {
   key: 0,
   class: "w-[48px] px-0 py-4 align-middle text-center",
   style: { width: "48px" }
-}, Pe = { key: 2 }, xe = ["colspan"], Ce = { class: "flex flex-col items-center justify-center gap-2 text-muted-foreground p-8" }, Se = { class: "flex h-12 w-12 items-center justify-center rounded-full bg-muted/20" }, $e = { class: "mt-2 text-base font-semibold text-foreground" }, Ie = { class: "text-sm max-w-sm mx-auto" }, Be = {
+}, be = { key: 2 }, ke = ["colspan"], Pe = { class: "flex flex-col items-center justify-center gap-2 text-muted-foreground p-8" }, xe = { class: "flex h-12 w-12 items-center justify-center rounded-full bg-muted" }, Ce = { class: "mt-1 text-base font-semibold text-foreground" }, Se = { class: "text-sm max-w-sm mx-auto" }, Ie = {
   key: 0,
   class: "mt-4"
-}, Fe = { key: 0 }, Ae = /* @__PURE__ */ _({
+}, $e = { key: 0 }, Ve = /* @__PURE__ */ ee({
   __name: "DataTable",
   props: {
     rows: { default: () => [] },
@@ -34,7 +31,8 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve
     keyField: { default: "_id" },
     loading: { type: Boolean, default: !1 },
     selectable: { type: Boolean, default: !1 },
-    emptyMessage: { default: "No data available" },
+    emptyTitle: { default: "No data available" },
+    emptyDescription: { default: "No results found. Try adjusting your filters or search terms." },
     emptyIcon: { default: "lucide:inbox" },
     showPagination: { type: Boolean, default: !0 },
     pageInfo: {},
@@ -46,18 +44,20 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve
     bordered: { type: Boolean, default: !0 },
     compact: { type: Boolean, default: !1 },
     tableClass: {},
-    class: {}
+    class: {},
+    sortable: { type: Boolean, default: !1 },
+    variant: { default: "default" }
   },
   emits: ["change", "select", "rowClick", "update:itemsPerPage", "update:selectedRows", "delete"],
-  setup(s, { emit: A }) {
-    const U = (e, t) => t.split(".").reduce((l, c) => l?.[c], e), u = (e, t) => U(e, t), a = s, w = A, d = g({ field: "", order: "" }), x = g(a.itemsPerPage), h = g(a.pageInfo?.currentPage || 1), y = g(a.search || ""), C = g(!1), v = g("initial"), O = b(() => a.loading && (v.value === "initial" || v.value === "page"));
+  setup(a, { emit: U }) {
+    const O = (e, t) => t.split(".").reduce((s, c) => s?.[c], e), u = (e, t) => O(e, t), l = a, w = U, i = g({ field: "", order: "" }), k = g(l.itemsPerPage), h = g(l.pageInfo?.currentPage || 1), y = g(l.search || ""), P = g(!1), v = g("initial"), L = b(() => l.loading && (v.value === "initial" || v.value === "page"));
     p(
-      () => a.loading,
+      () => l.loading,
       (e, t) => {
         !e && t && (v.value = "idle");
       }
     ), p(
-      () => a.search,
+      () => l.search,
       (e) => {
         e !== void 0 && e !== y.value && (y.value = e);
       }
@@ -65,246 +65,250 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ve
     let F = null;
     p(y, (e) => {
       F && clearTimeout(F), F = setTimeout(() => {
-        h.value = 1, v.value = "search", S();
+        h.value = 1, v.value = "search", x();
       }, 300);
     }), p(
-      () => a.itemsPerPage,
+      () => l.itemsPerPage,
       (e) => {
-        x.value = e;
+        k.value = e;
       }
     ), p(
-      () => a.pageInfo?.currentPage,
+      () => l.pageInfo?.currentPage,
       (e) => {
         e && (h.value = e);
       }
     );
-    const M = (e) => u(e, a.keyField), o = g(/* @__PURE__ */ new Set());
+    const j = (e) => u(e, l.keyField), o = g(/* @__PURE__ */ new Set());
     p(
-      () => a.selectedRows,
+      () => l.selectedRows,
       (e) => {
-        const t = new Set((e || []).map((l) => u(l, a.keyField)));
-        (t.size !== o.value.size || [...t].some((l) => !o.value.has(l))) && (o.value = t);
+        const t = new Set((e || []).map((s) => u(s, l.keyField)));
+        (t.size !== o.value.size || [...t].some((s) => !o.value.has(s))) && (o.value = t);
       },
       { immediate: !0, deep: !0 }
     );
-    const R = b(() => a.rows.length === 0 ? !1 : a.rows.every((e) => o.value.has(u(e, a.keyField)))), N = b(() => o.value.size > 0 && !R.value), L = b(() => {
-      const e = [...a.selectedRows || [], ...a.rows], t = /* @__PURE__ */ new Map();
-      return e.forEach((l) => t.set(u(l, a.keyField), l)), Array.from(o.value).map((l) => t.get(l)).filter(Boolean);
-    }), W = (e) => {
-      e ? a.rows.forEach((t) => o.value.add(u(t, a.keyField))) : o.value.size > 0 && a.rows.forEach((t) => o.value.delete(u(t, a.keyField))), T();
-    }, q = (e) => {
-      o.value.has(e) ? o.value.delete(e) : o.value.add(e), T();
-    }, T = () => {
-      const e = a.selectedRows || [], t = /* @__PURE__ */ new Set(), l = [];
-      a.rows.forEach((m) => {
-        const f = u(m, a.keyField);
-        o.value.has(f) && (l.push(m), t.add(f));
+    const z = b(() => l.rows.length === 0 ? !1 : l.rows.every((e) => o.value.has(u(e, l.keyField)))), E = b(() => o.value.size > 0 && !z.value), W = b(() => {
+      const e = [...l.selectedRows || [], ...l.rows], t = /* @__PURE__ */ new Map();
+      return e.forEach((s) => t.set(u(s, l.keyField), s)), Array.from(o.value).map((s) => t.get(s)).filter(Boolean);
+    }), q = (e) => {
+      e ? l.rows.forEach((t) => o.value.add(u(t, l.keyField))) : o.value.size > 0 && l.rows.forEach((t) => o.value.delete(u(t, l.keyField))), N();
+    }, G = (e) => {
+      o.value.has(e) ? o.value.delete(e) : o.value.add(e), N();
+    }, N = () => {
+      const e = l.selectedRows || [], t = /* @__PURE__ */ new Set(), s = [];
+      l.rows.forEach((m) => {
+        const f = u(m, l.keyField);
+        o.value.has(f) && (s.push(m), t.add(f));
       }), e.forEach((m) => {
-        const f = u(m, a.keyField);
-        !t.has(f) && o.value.has(f) && (l.push(m), t.add(f));
+        const f = u(m, l.keyField);
+        !t.has(f) && o.value.has(f) && (s.push(m), t.add(f));
       });
       const c = {
-        selected: l,
-        all: R.value,
-        indeterminate: N.value
+        selected: s,
+        all: z.value,
+        indeterminate: E.value
       };
-      w("select", c), w("update:selectedRows", l);
-    }, G = (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"), h.value = 1, v.value = "sort", S();
+      w("select", c), w("update:selectedRows", s);
     }, H = (e) => {
-      h.value = e, v.value = "page", S();
+      i.value.field === e ? i.value.order === "asc" ? i.value.order = "desc" : i.value.order === "desc" ? (i.value.order = "", i.value.field = "") : i.value.order = "asc" : (i.value.field = e, i.value.order = "asc"), h.value = 1, v.value = "sort", x();
     }, J = (e) => {
-      x.value = e, h.value = 1, v.value = "limit", w("update:itemsPerPage", e), S();
+      h.value = e, v.value = "page", x();
     }, K = (e) => {
+      k.value = e, h.value = 1, v.value = "limit", w("update:itemsPerPage", e), x();
+    }, Q = (e) => {
       w("rowClick", e);
-    }, Q = () => {
-      const e = L.value;
-      w("delete", e), C.value = !1;
-    }, S = () => {
+    }, X = () => {
+      const e = W.value;
+      w("delete", e), P.value = !1;
+    }, x = () => {
       w("change", {
         pagination: {
           page: h.value,
-          limit: x.value
+          limit: k.value
         },
-        sorting: { ...d.value },
+        sorting: { ...i.value },
         search: y.value
       });
-    }, X = b(() => [
-      "w-full bg-background rounded border border-border/60  flex flex-col",
+    }, Y = b(() => [
+      "w-full flex flex-col",
+      l.variant === "raised" ? "bg-background shadow-sm p-2 rounded-lg" : "bg-background rounded",
       "overflow-hidden",
-      a.class
-    ].join(" ")), Y = b(() => ["w-full caption-bottom text-sm", a.tableClass].join(" ")), Z = (e) => e.width ? e.width : "auto";
+      l.bordered ? "border border-border/60" : "",
+      l.class
+    ].join(" ")), Z = b(() => ["w-full caption-bottom text-sm", l.tableClass].join(" ")), _ = (e) => e.width ? e.width : "auto";
     return p(
-      () => a.rows,
+      () => l.rows,
       () => {
-        const e = new Set(a.rows.map((t) => u(t, a.keyField)));
+        const e = new Set(l.rows.map((t) => u(t, l.keyField)));
         o.value = new Set([...o.value].filter((t) => e.has(t)));
       }
-    ), ee(() => {
-      S();
-    }), (e, t) => (n(), i("div", fe, [
-      $(me, {
+    ), te(() => {
+      x();
+    }), (e, t) => (r(), d("div", fe, [
+      C(me, {
         modelValue: y.value,
-        "onUpdate:modelValue": t[1] || (t[1] = (l) => y.value = l),
-        "show-search": s.showSearch,
-        placeholder: s.searchPlaceholder
+        "onUpdate:modelValue": t[1] || (t[1] = (s) => y.value = s),
+        "show-search": a.showSearch,
+        placeholder: a.searchPlaceholder
       }, V({ _: 2 }, [
         e.$slots?.["toolbar-left"] ? {
           name: "left",
-          fn: z(() => [
-            I(e.$slots, "toolbar-left", {}, void 0, !0)
+          fn: T(() => [
+            S(e.$slots, "toolbar-left", {}, void 0, !0)
           ]),
           key: "0"
         } : void 0,
         e.$slots?.["toolbar-right"] || o.value.size > 0 ? {
           name: "right",
-          fn: z(() => [
-            o.value.size > 0 ? (n(), j(re, {
+          fn: T(() => [
+            o.value.size > 0 ? (r(), D(ne, {
               key: 0,
               rounded: "full",
               variant: "ghost",
               icon: "lucide:trash-2",
               class: "text-destructive! bg-destructive/10 hover:bg-destructive/15",
-              onClick: t[0] || (t[0] = (l) => C.value = !0)
-            })) : k("", !0),
-            I(e.$slots, "toolbar-right", {}, void 0, !0)
+              onClick: t[0] || (t[0] = (s) => P.value = !0)
+            })) : I("", !0),
+            S(e.$slots, "toolbar-right", {}, void 0, !0)
           ]),
           key: "1"
         } : void 0
       ]), 1032, ["modelValue", "show-search", "placeholder"]),
-      r("div", {
-        class: E(X.value)
+      n("div", {
+        class: B(Y.value)
       }, [
-        r("div", he, [
-          r("table", {
-            class: E(Y.value)
+        n("div", he, [
+          n("table", {
+            class: B([Z.value, ""])
           }, [
-            r("colgroup", null, [
-              s.selectable ? (n(), i("col", ve)) : k("", !0),
-              (n(!0), i(B, null, P(s.headers, (l) => (n(), i("col", {
-                key: l.field,
-                style: D({
-                  width: Z(l)
-                })
-              }, null, 4))), 128))
-            ]),
-            r("thead", ge, [
-              r("tr", pe, [
-                s.selectable ? (n(), i("th", we, [
-                  r("div", ye, [
-                    $(ne, {
-                      "model-value": R.value,
-                      indeterminate: N.value,
+            n("thead", {
+              class: B([
+                "[&_tr]:border-b [&_tr]:border-border/70! bg-muted",
+                a.variant === "raised" ? "[&_th:first-child]:rounded-tl-lg [&_th:last-child]:rounded-tr-lg" : ""
+              ])
+            }, [
+              n("tr", ve, [
+                a.selectable ? (r(), d("th", ge, [
+                  n("div", pe, [
+                    C(re, {
+                      "model-value": z.value,
+                      indeterminate: E.value,
                       size: "xs",
-                      "onUpdate:modelValue": W
+                      "onUpdate:modelValue": q
                     }, null, 8, ["model-value", "indeterminate"])
                   ])
-                ])) : k("", !0),
-                (n(!0), i(B, null, P(s.headers, (l) => (n(), j(ue, {
-                  key: l.field,
-                  header: l,
-                  "sort-config": d.value,
-                  compact: s.compact,
-                  onSort: G
-                }, null, 8, ["header", "sort-config", "compact"]))), 128))
+                ])) : I("", !0),
+                (r(!0), d(R, null, $(a.headers, (s) => (r(), D(ue, {
+                  key: s.field,
+                  header: s,
+                  "sort-config": i.value,
+                  compact: a.compact,
+                  "table-sortable": a.sortable,
+                  onSort: H,
+                  class: "last:pr-5!",
+                  style: A({
+                    width: _(s)
+                  })
+                }, null, 8, ["header", "sort-config", "compact", "table-sortable", "style"]))), 128))
               ])
-            ]),
-            r("tbody", be, [
-              O.value ? (n(!0), i(B, { key: 0 }, P(Math.min(x.value, 15), (l) => (n(), i("tr", {
-                key: "skeleton-" + l,
+            ], 2),
+            n("tbody", we, [
+              L.value ? (r(!0), d(R, { key: 0 }, $(Math.min(k.value, 15), (s) => (r(), d("tr", {
+                key: "skeleton-" + s,
                 class: "border-b border-border/50 bg-background transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"
               }, [
-                s.selectable ? (n(), i("td", ke, [...t[4] || (t[4] = [
-                  r("div", { class: "flex items-center justify-center" }, [
-                    r("div", { class: "h-4 w-4 rounded-[4px] bg-muted/50 animate-pulse" })
+                a.selectable ? (r(), d("td", ye, [...t[4] || (t[4] = [
+                  n("div", { class: "flex items-center justify-center" }, [
+                    n("div", { class: "h-4 w-4 rounded-[4px] bg-muted/50 animate-pulse" })
                   ], -1)
-                ])])) : k("", !0),
-                (n(!0), i(B, null, P(s.headers, (c) => (n(), i("td", {
+                ])])) : I("", !0),
+                (r(!0), d(R, null, $(a.headers, (c) => (r(), d("td", {
                   key: c.field,
-                  class: E(["p-5! align-middle", [c.hideOnMobile ? "hidden md:table-cell" : ""]])
+                  class: B(["p-5! align-middle last:pr-6!", [c.hideOnMobile ? "hidden md:table-cell" : ""]])
                 }, [
-                  r("div", {
+                  n("div", {
                     class: "rounded-md bg-muted/50 animate-pulse h-4 w-full",
-                    style: D({
+                    style: A({
                       width: `${50 + Math.random() * 40}%`
                     })
                   }, null, 4)
                 ], 2))), 128))
-              ]))), 128)) : s.rows.length > 0 ? (n(!0), i(B, { key: 1 }, P(s.rows, (l, c) => (n(), j(ce, {
-                key: M(l),
-                row: l,
-                headers: s.headers,
+              ]))), 128)) : a.rows.length > 0 ? (r(!0), d(R, { key: 1 }, $(a.rows, (s, c) => (r(), D(ce, {
+                key: j(s),
+                row: s,
+                headers: a.headers,
                 index: c,
-                "key-field": s.keyField,
-                selectable: s.selectable,
-                "is-selected": o.value.has(M(l)),
-                hoverable: s.hoverable,
-                striped: s.striped,
-                compact: s.compact,
-                onSelect: q,
-                onRowClick: K
+                "key-field": a.keyField,
+                selectable: a.selectable,
+                "is-selected": o.value.has(j(s)),
+                hoverable: a.hoverable,
+                striped: a.striped,
+                compact: a.compact,
+                onSelect: G,
+                onRowClick: Q,
+                class: "[&_td:last-child]:pr-3.5!"
               }, V({ _: 2 }, [
-                P(s.headers, (m) => ({
+                $(a.headers, (m) => ({
                   name: m.field,
-                  fn: z((f) => [
-                    I(e.$slots, m.field, te({ ref_for: !0 }, f), void 0, !0)
+                  fn: T((f) => [
+                    S(e.$slots, m.field, le({ ref_for: !0 }, f), void 0, !0)
                   ])
                 }))
-              ]), 1032, ["row", "headers", "index", "key-field", "selectable", "is-selected", "hoverable", "striped", "compact"]))), 128)) : (n(), i("tr", Pe, [
-                r("td", {
-                  colspan: s.selectable ? s.headers.length + 1 : s.headers.length,
+              ]), 1032, ["row", "headers", "index", "key-field", "selectable", "is-selected", "hoverable", "striped", "compact"]))), 128)) : (r(), d("tr", be, [
+                n("td", {
+                  colspan: a.selectable ? a.headers.length + 1 : a.headers.length,
                   class: "h-96 text-center align-middle hover:bg-transparent"
                 }, [
-                  r("div", Ce, [
-                    r("div", Se, [
-                      $(oe, {
-                        icon: s.emptyIcon,
+                  n("div", Pe, [
+                    n("div", xe, [
+                      C(oe, {
+                        icon: a.emptyIcon,
                         class: "h-6 w-6 text-muted-foreground/80"
                       }, null, 8, ["icon"])
                     ]),
-                    r("h3", $e, le(s.emptyMessage), 1),
-                    r("p", Ie, [
-                      I(e.$slots, "empty-description", {}, () => [
-                        t[5] || (t[5] = ae(" No results found. Try adjusting your filters or search terms. ", -1))
+                    n("h3", Ce, M(a.emptyTitle), 1),
+                    n("p", Se, [
+                      S(e.$slots, "empty-description", {}, () => [
+                        ae(M(a.emptyDescription), 1)
                       ], !0)
                     ]),
-                    e.$slots["empty-action"] ? (n(), i("div", Be, [
-                      I(e.$slots, "empty-action", {}, void 0, !0)
-                    ])) : k("", !0)
+                    e.$slots["empty-action"] ? (r(), d("div", Ie, [
+                      S(e.$slots, "empty-action", {}, void 0, !0)
+                    ])) : I("", !0)
                   ])
-                ], 8, xe)
+                ], 8, ke)
               ]))
             ])
           ], 2)
         ])
       ], 2),
-      s.showPagination && s.pageInfo ? (n(), i("div", Fe, [
-        $(se(de), {
+      a.showPagination && a.pageInfo && a.pageInfo.totalItems > 0 ? (r(), d("div", $e, [
+        C(se(ie), {
           "current-page": h.value,
-          "total-pages": s.pageInfo.totalPages,
+          "total-pages": a.pageInfo.totalPages,
           "show-page-info": !1,
-          "show-items-per-page": s.showItemsPerPage,
-          "items-per-page": x.value,
-          "items-per-page-options": s.itemsPerPageOptions,
+          "show-items-per-page": a.showItemsPerPage,
+          "items-per-page": k.value,
+          "items-per-page-options": a.itemsPerPageOptions,
           "nav-type": "icon",
-          onChange: H,
-          "onUpdate:itemsPerPage": J
+          onChange: J,
+          "onUpdate:itemsPerPage": K
         }, null, 8, ["current-page", "total-pages", "show-items-per-page", "items-per-page", "items-per-page-options"])
-      ])) : k("", !0),
-      $(ie, {
-        show: C.value,
-        "onUpdate:show": t[2] || (t[2] = (l) => C.value = l),
+      ])) : I("", !0),
+      C(de, {
+        show: P.value,
+        "onUpdate:show": t[2] || (t[2] = (s) => P.value = s),
         title: "Confirm Deletion",
         description: "Are you sure you want to delete the selected items?",
         "confirm-text": "Delete",
         "cancel-text": "Cancel",
         variant: "danger",
-        onConfirm: Q,
-        onCancel: t[3] || (t[3] = (l) => C.value = !1)
+        onConfirm: X,
+        onCancel: t[3] || (t[3] = (s) => P.value = !1)
       }, null, 8, ["show"])
     ]));
   }
 });
 export {
-  Ae as default
+  Ve as default
 };

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

@@ -3,6 +3,7 @@ interface Props {
     header: TableHeader;
     sortConfig?: SortConfig;
     compact?: boolean;
+    tableSortable?: boolean;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     sort: (field: string) => any;
@@ -10,5 +11,6 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     onSort?: (field: string) => any;
 }>, {
     compact: boolean;
+    tableSortable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLTableCellElement>;
 export default _default;

package/components/DataTable/DataTableHeader.vue.js

@@ -1,25 +1,26 @@
-import { defineComponent as m, computed as o, openBlock as n, createElementBlock as a, normalizeClass as r, createElementVNode as s, toDisplayString as p, createVNode as g, createCommentVNode as x } from "vue";
-import y from "../Icon.vue.js";
-const C = { class: "text-xs font-bold! uppercase tracking-wider text-gray-900 truncate" }, b = {
+import { defineComponent as m, computed as o, openBlock as a, createElementBlock as n, normalizeClass as r, createElementVNode as l, toDisplayString as p, createVNode as g, createCommentVNode as x } from "vue";
+import b from "../Icon.vue.js";
+const y = { class: "text-xs font-bold! uppercase tracking-wider text-gray-900 truncate" }, C = {
   key: 0,
   class: "w-4 h-4 shrink-0"
-}, j = /* @__PURE__ */ m({
+}, S = /* @__PURE__ */ m({
   __name: "DataTableHeader",
   props: {
     header: {},
     sortConfig: {},
-    compact: { type: Boolean, default: !1 }
+    compact: { type: Boolean, default: !1 },
+    tableSortable: { type: Boolean, default: !0 }
   },
   emits: ["sort"],
-  setup(t, { emit: i }) {
-    const e = t, l = 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.header.sortable !== !1 && l("sort", e.header.field);
+  setup(t, { emit: s }) {
+    const e = t, i = s, 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 && i("sort", e.header.field);
     }, u = o(() => ({
       left: "justify-start text-left",
       center: "justify-center text-center",
       right: "justify-end text-right"
     })[e.header.align || "left"]);
-    return (h, v) => (n(), a("th", {
+    return (h, v) => (a(), n("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!",
@@ -28,12 +29,12 @@ const C = { class: "text-xs font-bold! uppercase tracking-wider text-gray-900 tr
       ]]),
       onClick: f
     }, [
-      s("div", {
+      l("div", {
         class: r(["flex items-center gap-2 space-x-2", u.value])
       }, [
-        s("span", C, p(t.header.title), 1),
-        t.header.sortable !== !1 ? (n(), a("span", b, [
-          g(y, {
+        l("span", y, p(t.header.title), 1),
+        t.tableSortable && t.header.sortable !== !1 ? (a(), n("span", C, [
+          g(b, {
             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"
@@ -45,5 +46,5 @@ const C = { class: "text-xs font-bold! uppercase tracking-wider text-gray-900 tr
   }
 });
 export {
-  j as default
+  S as default
 };