vlite3 0.4.4 → 0.4.7

package/components/DataTable/DataTable.vue.js

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

package/components/DataTable/DataTableHeader.vue.js

@@ -1,9 +1,10 @@
-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 = {
+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 { $t as C } from "../../utils/i18n.js";
+const v = { class: "text-xs font-bold! uppercase tracking-wider text-gray-900 truncate" }, w = {
   key: 0,
   class: "w-4 h-4 shrink-0"
-}, S = /* @__PURE__ */ m({
+}, I = /* @__PURE__ */ p({
   __name: "DataTableHeader",
   props: {
     header: {},
@@ -12,15 +13,15 @@ const y = { class: "text-xs font-bold! uppercase tracking-wider text-gray-900 tr
     tableSortable: { type: Boolean, default: !0 }
   },
   emits: ["sort"],
-  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);
+  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(() => ({
       left: "justify-start text-left",
       center: "justify-center text-center",
       right: "justify-end text-right"
-    })[e.header.align || "left"]);
-    return (h, v) => (a(), n("th", {
+    })[e.header.align || "left"]), h = o(() => e.header.titleI18n ? C(e.header.titleI18n) : e.header.title);
+    return (m, k) => (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!",
@@ -32,19 +33,19 @@ const y = { class: "text-xs font-bold! uppercase tracking-wider text-gray-900 tr
       l("div", {
         class: r(["flex items-center gap-2 space-x-2", u.value])
       }, [
-        l("span", y, p(t.header.title), 1),
-        t.tableSortable && t.header.sortable !== !1 ? (a(), n("span", C, [
-          g(b, {
+        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"
             ]])
           }, null, 8, ["icon", "class"])
-        ])) : x("", !0)
+        ])) : b("", !0)
       ], 2)
     ], 2));
   }
 });
 export {
-  S as default
+  I as default
 };

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

@@ -2,6 +2,7 @@ interface Props {
     modelValue?: string;
     showSearch?: boolean;
     placeholder?: string;
+    placeholderI18n?: string;
     class?: string;
     searchClass?: string;
 }
@@ -22,7 +23,6 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
     "onUpdate:modelValue"?: (value: string) => any;
 }>, {
     class: string;
-    placeholder: string;
     modelValue: string;
     showSearch: boolean;
     searchClass: string;