vlite3 0.2.17 → 0.3.2

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

@@ -47,6 +47,8 @@ declare const __VLS_component: import('vue').DefineComponent<DataTableProps, {},
     striped: boolean;
     selectedRows: any[];
     searchPlaceholder: string;
+    toolbarClass: string;
+    toolbarSearchClass: string;
     emptyTitle: string;
     emptyDescription: string;
     emptyIcon: string;

package/components/DataTable/DataTable.vue.js

@@ -1,22 +1,22 @@
-import { defineComponent as ee, ref as v, computed as b, watch as p, onMounted as te, openBlock as n, createElementBlock as i, createVNode as C, createSlots as j, withCtx as B, renderSlot as S, createBlock as D, createCommentVNode as I, createElementVNode as r, normalizeClass as R, Fragment as F, renderList as $, normalizeStyle as A, mergeProps as le, toDisplayString as M, createTextVNode as ae, unref as se } from "vue";
+import { defineComponent as ee, ref as v, computed as w, watch as y, onMounted as te, openBlock as n, createElementBlock as i, createVNode as x, normalizeClass as S, createSlots as j, withCtx as R, renderSlot as I, createBlock as D, createCommentVNode as $, createElementVNode as r, Fragment as F, renderList as B, 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 ue from "./DataTableHeader.vue.js";
-import ce from "./DataTableRow.vue.js";
+import ce from "./DataTableHeader.vue.js";
+import ue from "./DataTableRow.vue.js";
 import me from "./DataTableToolbar.vue.js";
-const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ge = { class: "hover:bg-transparent" }, ve = {
+const fe = { class: "space-y-6.5" }, he = { class: "overflow-x-auto w-full" }, ge = { class: "hover:bg-transparent" }, ve = {
   key: 0,
   scope: "col",
   class: "w-[48px] px-0 text-center font-medium text-muted-foreground",
   style: { width: "48px" }
-}, pe = { class: "flex items-center justify-center" }, ye = { class: "[&_tr:last-child]:border-0" }, we = {
+}, ye = { class: "flex items-center justify-center" }, be = { class: "[&_tr:last-child]:border-0" }, pe = {
   key: 0,
   class: "w-[48px] px-0 py-4 align-middle text-center",
   style: { width: "48px" }
-}, 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 = {
+}, we = { key: 2 }, ke = ["colspan"], Pe = { class: "flex flex-col items-center justify-center gap-2 text-muted-foreground p-8" }, Ce = { class: "flex h-12 w-12 items-center justify-center rounded-full bg-muted" }, xe = { class: "mt-1 text-base font-semibold text-foreground" }, Se = { class: "text-sm max-w-sm mx-auto" }, Ie = {
   key: 0,
   class: "mt-4"
 }, $e = { key: 0 }, je = /* @__PURE__ */ ee({
@@ -27,6 +27,8 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ge
     search: { default: "" },
     showSearch: { type: Boolean, default: !0 },
     searchPlaceholder: { default: "Search..." },
+    toolbarClass: { default: "" },
+    toolbarSearchClass: { default: "" },
     headers: { default: () => [] },
     keyField: { default: "_id" },
     loading: { type: Boolean, default: !1 },
@@ -50,121 +52,123 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ge
     variant: { default: "default" }
   },
   emits: ["change", "select", "rowClick", "update:itemsPerPage", "update:selectedRows", "delete"],
-  setup(a, { emit: U }) {
+  setup(l, { emit: U }) {
     const O = (e, t) => {
       if (!(!e || !t))
-        return t.includes(".") ? t.split(".").reduce((s, c) => s?.[c], e) : e[t];
-    }, u = (e, t) => O(e, t), l = a, y = U, d = v({ field: "", order: "" }), k = v(l.itemsPerPage), h = v(l.pageInfo?.currentPage || 1), w = v(l.search || ""), P = v(!1), g = v("initial"), L = b(() => l.loading && (g.value === "initial" || g.value === "page"));
-    p(
-      () => l.loading,
+        return t.includes(".") ? t.split(".").reduce((s, u) => s?.[u], e) : e[t];
+    }, c = (e, t) => O(e, t), a = l, b = U, d = v({ field: "", order: "" }), k = v(a.itemsPerPage), h = v(a.pageInfo?.currentPage || 1), p = v(a.search || ""), P = v(!1), g = v("initial"), L = w(() => a.loading && (g.value === "initial" || g.value === "page"));
+    y(
+      () => a.loading,
       (e, t) => {
         !e && t && (g.value = "idle");
       }
-    ), p(
-      () => l.search,
+    ), y(
+      () => a.search,
       (e) => {
-        e !== void 0 && e !== w.value && (w.value = e);
+        e !== void 0 && e !== p.value && (p.value = e);
       }
     );
     let z = null;
-    p(w, (e) => {
+    y(p, (e) => {
       z && clearTimeout(z), z = setTimeout(() => {
-        h.value = 1, g.value = "search", x();
+        h.value = 1, g.value = "search", C();
       }, 300);
-    }), p(
-      () => l.itemsPerPage,
+    }), y(
+      () => a.itemsPerPage,
       (e) => {
         k.value = e;
       }
-    ), p(
-      () => l.pageInfo?.currentPage,
+    ), y(
+      () => a.pageInfo?.currentPage,
       (e) => {
         e && (h.value = e);
       }
     );
-    const E = (e) => u(e, l.keyField), o = v(/* @__PURE__ */ new Set());
-    p(
-      () => l.selectedRows,
+    const E = (e) => c(e, a.keyField), o = v(/* @__PURE__ */ new Set());
+    y(
+      () => a.selectedRows,
       (e) => {
-        const t = new Set((e || []).map((s) => u(s, l.keyField)));
+        const t = new Set((e || []).map((s) => c(s, a.keyField)));
         (t.size !== o.value.size || [...t].some((s) => !o.value.has(s))) && (o.value = t);
       },
       { immediate: !0, deep: !0 }
     );
-    const T = b(() => l.rows.length === 0 ? !1 : l.rows.every((e) => o.value.has(u(e, l.keyField)))), N = b(() => o.value.size > 0 && !T.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);
+    const T = w(() => a.rows.length === 0 ? !1 : a.rows.every((e) => o.value.has(c(e, a.keyField)))), N = w(() => o.value.size > 0 && !T.value), W = w(() => {
+      const e = [...a.selectedRows || [], ...a.rows], t = /* @__PURE__ */ new Map();
+      return e.forEach((s) => t.set(c(s, a.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))), V();
+      e ? a.rows.forEach((t) => o.value.add(c(t, a.keyField))) : o.value.size > 0 && a.rows.forEach((t) => o.value.delete(c(t, a.keyField))), V();
     }, G = (e) => {
       o.value.has(e) ? o.value.delete(e) : o.value.add(e), V();
     }, V = () => {
-      const e = l.selectedRows || [], t = /* @__PURE__ */ new Set(), s = [];
-      l.rows.forEach((m) => {
-        const f = u(m, l.keyField);
+      const e = a.selectedRows || [], t = /* @__PURE__ */ new Set(), s = [];
+      a.rows.forEach((m) => {
+        const f = c(m, a.keyField);
         o.value.has(f) && (s.push(m), t.add(f));
       }), e.forEach((m) => {
-        const f = u(m, l.keyField);
+        const f = c(m, a.keyField);
         !t.has(f) && o.value.has(f) && (s.push(m), t.add(f));
       });
-      const c = {
+      const u = {
         selected: s,
         all: T.value,
         indeterminate: N.value
       };
-      y("select", c), y("update:selectedRows", s);
+      b("select", u), b("update:selectedRows", s);
     }, H = (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, g.value = "sort", x();
+      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, g.value = "sort", C();
     }, J = (e) => {
-      h.value = e, g.value = "page", x();
+      h.value = e, g.value = "page", C();
     }, K = (e) => {
-      k.value = e, h.value = 1, g.value = "limit", y("update:itemsPerPage", e), x();
+      k.value = e, h.value = 1, g.value = "limit", b("update:itemsPerPage", e), C();
     }, Q = (e) => {
-      y("rowClick", e);
+      b("rowClick", e);
     }, X = () => {
       const e = W.value;
-      y("delete", e), P.value = !1;
-    }, x = () => {
-      y("change", {
+      b("delete", e), P.value = !1;
+    }, C = () => {
+      b("change", {
         pagination: {
           page: h.value,
           limit: k.value
         },
         sorting: { ...d.value },
-        search: w.value
+        search: p.value
       });
-    }, Y = b(() => [
+    }, Y = w(() => [
       "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/60" : "",
-      l.class
-    ].join(" ")), Z = b(() => ["w-full caption-bottom -text-fs-1", l.tableClass].join(" ")), _ = (e) => e.width ? e.width : "auto";
-    return p(
-      () => l.rows,
+      a.bordered ? "border border-border" : "",
+      a.class
+    ].join(" ")), Z = w(() => ["w-full caption-bottom -text-fs-1", a.tableClass].join(" ")), _ = (e) => e.width ? e.width : "auto";
+    return y(
+      () => a.rows,
       () => {
-        const e = new Set(l.rows.map((t) => u(t, l.keyField)));
+        const e = new Set(a.rows.map((t) => c(t, a.keyField)));
         o.value = new Set([...o.value].filter((t) => e.has(t)));
       }
     ), te(() => {
-      x();
+      C();
     }), (e, t) => (n(), i("div", fe, [
-      C(me, {
-        modelValue: w.value,
-        "onUpdate:modelValue": t[1] || (t[1] = (s) => w.value = s),
-        "show-search": a.showSearch,
-        placeholder: a.searchPlaceholder
+      x(me, {
+        modelValue: p.value,
+        "onUpdate:modelValue": t[1] || (t[1] = (s) => p.value = s),
+        "show-search": l.showSearch,
+        placeholder: l.searchPlaceholder,
+        class: S(l.toolbarClass),
+        "search-class": l.toolbarSearchClass
       }, j({ _: 2 }, [
         e.$slots?.["toolbar-left"] ? {
           name: "left",
-          fn: B(() => [
-            S(e.$slots, "toolbar-left")
+          fn: R(() => [
+            I(e.$slots, "toolbar-left")
           ]),
           key: "0"
         } : void 0,
         o.value.size > 0 ? {
           name: "delete",
-          fn: B(() => [
+          fn: R(() => [
             o.value.size > 0 ? (n(), D(re, {
               key: 0,
               rounded: "full",
@@ -172,48 +176,48 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ge
               size: "lg",
               icon: "lucide:trash-2",
               onClick: t[0] || (t[0] = (s) => P.value = !0)
-            })) : I("", !0)
+            })) : $("", !0)
           ]),
           key: "1"
         } : void 0,
         e.$slots?.["toolbar-right"] ? {
           name: "right",
-          fn: B(() => [
-            S(e.$slots, "toolbar-right")
+          fn: R(() => [
+            I(e.$slots, "toolbar-right")
           ]),
           key: "2"
         } : void 0
-      ]), 1032, ["modelValue", "show-search", "placeholder"]),
+      ]), 1032, ["modelValue", "show-search", "placeholder", "class", "search-class"]),
       r("div", {
-        class: R(Y.value)
+        class: S(Y.value)
       }, [
         r("div", he, [
           r("table", {
-            class: R([Z.value, "data-table"])
+            class: S([Z.value, "data-table"])
           }, [
             r("thead", {
-              class: R([
-                "[&_tr]:border-b [&_tr]:border-border/70! bg-muted",
-                a.variant === "raised" ? "[&_th:first-child]:rounded-tl-lg [&_th:last-child]:rounded-tr-lg" : ""
+              class: S([
+                "[&_tr]:border-b [&_tr]:border-border bg-muted",
+                l.variant === "raised" ? "[&_th:first-child]:rounded-tl-lg [&_th:last-child]:rounded-tr-lg" : ""
               ])
             }, [
               r("tr", ge, [
-                a.selectable ? (n(), i("th", ve, [
-                  r("div", pe, [
-                    C(ne, {
+                l.selectable ? (n(), i("th", ve, [
+                  r("div", ye, [
+                    x(ne, {
                       "model-value": T.value,
                       indeterminate: N.value,
                       size: "xs",
                       "onUpdate:modelValue": q
                     }, null, 8, ["model-value", "indeterminate"])
                   ])
-                ])) : I("", !0),
-                (n(!0), i(F, null, $(a.headers, (s) => (n(), D(ue, {
+                ])) : $("", !0),
+                (n(!0), i(F, null, B(l.headers, (s) => (n(), D(ce, {
                   key: s.field,
                   header: s,
                   "sort-config": d.value,
-                  compact: a.compact,
-                  "table-sortable": a.sortable,
+                  compact: l.compact,
+                  "table-sortable": l.sortable,
                   onSort: H,
                   class: "last:pr-5!",
                   style: A({
@@ -222,19 +226,19 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ge
                 }, null, 8, ["header", "sort-config", "compact", "table-sortable", "style"]))), 128))
               ])
             ], 2),
-            r("tbody", ye, [
-              L.value ? (n(!0), i(F, { key: 0 }, $(Math.min(k.value, 15), (s) => (n(), i("tr", {
+            r("tbody", be, [
+              L.value ? (n(!0), i(F, { key: 0 }, B(Math.min(k.value, 15), (s) => (n(), i("tr", {
                 key: "skeleton-" + s,
-                class: "border-b border-border/50 bg-background transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"
+                class: "border-b border-border/70 bg-background transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"
               }, [
-                a.selectable ? (n(), i("td", we, [...t[4] || (t[4] = [
+                l.selectable ? (n(), i("td", pe, [...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" })
                   ], -1)
-                ])])) : I("", !0),
-                (n(!0), i(F, null, $(a.headers, (c) => (n(), i("td", {
-                  key: c.field,
-                  class: R(["p-5! align-middle last:pr-6!", [c.hideOnMobile ? "hidden md:table-cell" : ""]])
+                ])])) : $("", !0),
+                (n(!0), i(F, null, B(l.headers, (u) => (n(), i("td", {
+                  key: u.field,
+                  class: S(["p-5! align-middle last:pr-6!", [u.hideOnMobile ? "hidden md:table-cell" : ""]])
                 }, [
                   r("div", {
                     class: "rounded-md bg-muted/50 animate-pulse h-4 w-full",
@@ -243,48 +247,48 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ge
                     })
                   }, null, 4)
                 ], 2))), 128))
-              ]))), 128)) : a.rows.length > 0 ? (n(!0), i(F, { key: 1 }, $(a.rows, (s, c) => (n(), D(ce, {
+              ]))), 128)) : l.rows.length > 0 ? (n(!0), i(F, { key: 1 }, B(l.rows, (s, u) => (n(), D(ue, {
                 key: E(s),
                 row: s,
-                headers: a.headers,
-                index: c,
-                "key-field": a.keyField,
-                selectable: a.selectable,
+                headers: l.headers,
+                index: u,
+                "key-field": l.keyField,
+                selectable: l.selectable,
                 "is-selected": o.value.has(E(s)),
-                hoverable: a.hoverable,
-                striped: a.striped,
-                compact: a.compact,
+                hoverable: l.hoverable,
+                striped: l.striped,
+                compact: l.compact,
                 onSelect: G,
                 onRowClick: Q,
                 class: "[&_td:last-child]:pr-3.5!"
               }, j({ _: 2 }, [
-                $(a.headers, (m) => ({
+                B(l.headers, (m) => ({
                   name: m.field,
-                  fn: B((f) => [
-                    S(e.$slots, m.field, le({ ref_for: !0 }, f))
+                  fn: R((f) => [
+                    I(e.$slots, m.field, le({ ref_for: !0 }, f))
                   ])
                 }))
-              ]), 1032, ["row", "headers", "index", "key-field", "selectable", "is-selected", "hoverable", "striped", "compact"]))), 128)) : (n(), i("tr", be, [
+              ]), 1032, ["row", "headers", "index", "key-field", "selectable", "is-selected", "hoverable", "striped", "compact"]))), 128)) : (n(), i("tr", we, [
                 r("td", {
-                  colspan: a.selectable ? a.headers.length + 1 : a.headers.length,
+                  colspan: l.selectable ? l.headers.length + 1 : l.headers.length,
                   class: "h-96 text-center align-middle hover:bg-transparent"
                 }, [
                   r("div", Pe, [
-                    r("div", xe, [
-                      C(oe, {
-                        icon: a.emptyIcon,
+                    r("div", Ce, [
+                      x(oe, {
+                        icon: l.emptyIcon,
                         class: "h-6 w-6 text-muted-foreground/80"
                       }, null, 8, ["icon"])
                     ]),
-                    r("h3", Ce, M(a.emptyTitle), 1),
+                    r("h3", xe, M(l.emptyTitle), 1),
                     r("p", Se, [
-                      S(e.$slots, "empty-description", {}, () => [
-                        ae(M(a.emptyDescription), 1)
+                      I(e.$slots, "empty-description", {}, () => [
+                        ae(M(l.emptyDescription), 1)
                       ])
                     ]),
                     e.$slots["empty-action"] ? (n(), i("div", Ie, [
-                      S(e.$slots, "empty-action")
-                    ])) : I("", !0)
+                      I(e.$slots, "empty-action")
+                    ])) : $("", !0)
                   ])
                 ], 8, ke)
               ]))
@@ -292,21 +296,21 @@ const fe = { class: "space-y-4" }, he = { class: "overflow-x-auto w-full" }, ge
           ], 2)
         ])
       ], 2),
-      a.showPagination && a.pageInfo && a.pageInfo.totalPages > 1 ? (n(), i("div", $e, [
-        C(se(de), {
+      l.showPagination && l.pageInfo && l.pageInfo.totalPages > 1 ? (n(), i("div", $e, [
+        x(se(de), {
           "current-page": h.value,
-          "total-pages": a.pageInfo.totalPages,
+          "total-pages": l.pageInfo.totalPages,
           "show-page-info": !1,
-          "show-items-per-page": a.showItemsPerPage,
+          "show-items-per-page": l.showItemsPerPage,
           "items-per-page": k.value,
-          "items-per-page-options": a.itemsPerPageOptions,
+          "items-per-page-options": l.itemsPerPageOptions,
           "nav-type": "icon",
-          alignment: l.paginationPosition,
+          alignment: a.paginationPosition,
           onChange: J,
           "onUpdate:itemsPerPage": K
         }, null, 8, ["current-page", "total-pages", "show-items-per-page", "items-per-page", "items-per-page-options", "alignment"])
-      ])) : I("", !0),
-      C(ie, {
+      ])) : $("", !0),
+      x(ie, {
         show: P.value,
         "onUpdate:show": t[2] || (t[2] = (s) => P.value = s),
         title: "Confirm Deletion",

package/components/DataTable/DataTableRow.vue.js

@@ -63,7 +63,7 @@ const L = ["data-state"], U = { class: "flex items-center justify-center" }, h =
       a("select", b.value);
     };
     return (e, t) => (c(), d("tr", {
-      class: u(["border-b border-border/70 transition-colors data-[state=selected]:bg-muted h-full", [
+      class: u(["border-b transition-colors data-[state=selected]:bg-muted h-full", [
         i.hoverable ? "hover:bg-muted/20" : "",
         i.striped && i.index % 2 === 1 ? "bg-muted/20" : "bg-background",
         i.isSelected ? "bg-muted! hover:bg-muted/30" : "",

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

@@ -2,6 +2,8 @@ interface Props {
     modelValue?: string;
     showSearch?: boolean;
     placeholder?: string;
+    class?: string;
+    searchClass?: string;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -19,9 +21,11 @@ declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {},
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     "onUpdate:modelValue"?: (value: string) => any;
 }>, {
+    class: string;
     placeholder: string;
     modelValue: string;
     showSearch: boolean;
+    searchClass: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/components/DataTable/DataTableToolbar.vue.js

@@ -1,48 +1,52 @@
-import { defineComponent as p, computed as f, openBlock as l, createElementBlock as o, renderSlot as a, createCommentVNode as d, createElementVNode as c, createVNode as h } from "vue";
-import V from "../Input.vue.js";
-const v = { class: "flex flex-col sm:flex-row items-center gap-4 p-1" }, _ = {
+import { defineComponent as h, computed as p, openBlock as a, createElementBlock as t, normalizeClass as d, renderSlot as o, createCommentVNode as u, createElementVNode as n, createVNode as V } from "vue";
+import v from "../Input.vue.js";
+const g = {
   key: 0,
   class: "flex items-center gap-3 mr-auto"
-}, g = { class: "ml-auto" }, w = {
-  key: 1,
-  class: "w-full sm:w-72!"
-}, b = { class: "flex items-center gap-3" }, S = /* @__PURE__ */ p({
+}, w = { class: "ml-auto" }, b = { class: "flex items-center gap-3" }, $ = /* @__PURE__ */ h({
   __name: "DataTableToolbar",
   props: {
     modelValue: { default: "" },
     showSearch: { type: Boolean, default: !0 },
-    placeholder: { default: "Search..." }
+    placeholder: { default: "Search..." },
+    class: { default: "" },
+    searchClass: { default: "" }
   },
   emits: ["update:modelValue"],
-  setup(t, { emit: n }) {
-    const u = t, m = n, s = f({
-      get: () => u.modelValue,
-      set: (e) => m("update:modelValue", e)
+  setup(l, { emit: m }) {
+    const s = l, i = m, r = p({
+      get: () => s.modelValue,
+      set: (e) => i("update:modelValue", e)
     });
-    return (e, r) => (l(), o("div", v, [
-      e.$slots?.left ? (l(), o("div", _, [
-        a(e.$slots, "left")
-      ])) : d("", !0),
-      c("div", g, [
-        a(e.$slots, "delete")
+    return (e, c) => (a(), t("div", {
+      class: d(["flex flex-col sm:flex-row items-center gap-4 p-1", s.class])
+    }, [
+      e.$slots?.left ? (a(), t("div", g, [
+        o(e.$slots, "left")
+      ])) : u("", !0),
+      n("div", w, [
+        o(e.$slots, "delete")
       ]),
-      t.showSearch ? (l(), o("div", w, [
-        h(V, {
-          modelValue: s.value,
-          "onUpdate:modelValue": r[0] || (r[0] = (i) => s.value = i),
-          placeholder: t.placeholder,
+      l.showSearch ? (a(), t("div", {
+        key: 1,
+        class: d(["w-full sm:w-72!", l.searchClass])
+      }, [
+        V(v, {
+          modelValue: r.value,
+          "onUpdate:modelValue": c[0] || (c[0] = (f) => r.value = f),
+          placeholder: l.placeholder,
           icon: "lucide:search",
           variant: "outline",
           class: "bg-background",
           "show-clear-button": !0
         }, null, 8, ["modelValue", "placeholder"])
-      ])) : d("", !0),
-      c("div", b, [
-        a(e.$slots, "right")
+      ], 2)) : u("", !0),
+      n("div", b, [
+        o(e.$slots, "right")
       ])
-    ]));
+    ], 2));
   }
 });
 export {
-  S as default
+  $ as default
 };

package/components/DataTable/types.d.ts

@@ -46,6 +46,8 @@ export interface DataTableProps {
     search?: string;
     showSearch?: boolean;
     searchPlaceholder?: string;
+    toolbarClass?: string;
+    toolbarSearchClass?: string;
     headers: TableHeader[];
     keyField?: string;
     loading?: boolean;

package/components/ThemeToggle.vue.d.ts

@@ -1,2 +1,27 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLButtonElement>;
+import { ButtonRounded, ButtonSize, ButtonVariant } from '../types';
+type __VLS_Props = {
+    class?: string;
+    rounded?: ButtonRounded;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            toggleTheme: () => void;
+            theme: "light" | "dark";
+        }): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/ThemeToggle.vue.js

@@ -1,18 +1,32 @@
-import { defineComponent as n, openBlock as i, createBlock as c, unref as e } from "vue";
+import { defineComponent as a, renderSlot as l, unref as e, createVNode as r, normalizeClass as s } from "vue";
 import { useTheme as m } from "../composables/useTheme.js";
-import r from "./Button.vue.js";
-const p = /* @__PURE__ */ n({
+import c from "./Button.vue.js";
+const g = /* @__PURE__ */ a({
   __name: "ThemeToggle",
-  setup(l) {
-    const { theme: o, toggleTheme: t } = m();
-    return (a, h) => (i(), c(r, {
-      icon: e(o) === "light" ? "lucide:sun" : "lucide:moon",
-      variant: "secondary",
-      title: e(o) === "light" ? "Switch to dark mode" : "Switch to light mode",
-      onClick: e(t)
-    }, null, 8, ["icon", "title", "onClick"]));
+  props: {
+    class: {},
+    rounded: {},
+    size: {},
+    variant: {}
+  },
+  setup(t) {
+    const { theme: o, toggleTheme: n } = m();
+    return (i, d) => l(i.$slots, "default", {
+      toggleTheme: e(n),
+      theme: e(o)
+    }, () => [
+      r(c, {
+        icon: e(o) === "light" ? "lucide:sun" : "lucide:moon",
+        variant: t.variant || "secondary",
+        rounded: t.rounded || "md",
+        size: t.size,
+        class: s(t.class),
+        title: e(o) === "light" ? "Switch to dark mode" : "Switch to light mode",
+        onClick: e(n)
+      }, null, 8, ["icon", "variant", "rounded", "size", "class", "title", "onClick"])
+    ]);
   }
 });
 export {
-  p as default
+  g as default
 };

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "description": "A Vue 3 UI component library built with Tailwind CSS.",
   "license": "MIT",
-  "version": "0.2.17",
+  "version": "0.3.2",
   "type": "module",
   "main": "index.js",
   "module": "index.js",
@@ -40,7 +40,7 @@
     "scrollreveal": "^4.0.9",
     "tailwindcss": "^4.1.18",
     "v-datepicker-lite": "^0.1.6",
-    "v-tooltip-lite": "^0.1.9",
+    "v-tooltip-lite": "^0.2.1",
     "vue-carousel-lite": "^0.2.7",
     "vue-draggable-plus": "^0.5.3",
     "vue3-google-signin": "^2.1.1"