vlite3 0.1.0 → 0.1.2

package/components/DataTable/DataTable.vue2.js

@@ -0,0 +1,310 @@
+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 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 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 = {
+  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 = {
+  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 = {
+  key: 0,
+  class: "mt-4"
+}, Fe = { key: 0 }, Ae = /* @__PURE__ */ _({
+  __name: "DataTable",
+  props: {
+    rows: { default: () => [] },
+    selectedRows: { default: () => [] },
+    search: { default: "" },
+    showSearch: { type: Boolean, default: !0 },
+    searchPlaceholder: { default: "Search..." },
+    headers: { default: () => [] },
+    keyField: { default: "_id" },
+    loading: { type: Boolean, default: !1 },
+    selectable: { type: Boolean, default: !1 },
+    emptyMessage: { default: "No data available" },
+    emptyIcon: { default: "lucide:inbox" },
+    showPagination: { type: Boolean, default: !0 },
+    pageInfo: {},
+    itemsPerPage: { default: 10 },
+    itemsPerPageOptions: { default: () => [10, 25, 50, 100] },
+    showItemsPerPage: { type: Boolean, default: !0 },
+    striped: { type: Boolean, default: !1 },
+    hoverable: { type: Boolean, default: !0 },
+    bordered: { type: Boolean, default: !0 },
+    compact: { type: Boolean, default: !1 },
+    tableClass: {},
+    class: {}
+  },
+  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"));
+    p(
+      () => a.loading,
+      (e, t) => {
+        !e && t && (v.value = "idle");
+      }
+    ), p(
+      () => a.search,
+      (e) => {
+        e !== void 0 && e !== y.value && (y.value = e);
+      }
+    );
+    let F = null;
+    p(y, (e) => {
+      F && clearTimeout(F), F = setTimeout(() => {
+        h.value = 1, v.value = "search", S();
+      }, 300);
+    }), p(
+      () => a.itemsPerPage,
+      (e) => {
+        x.value = e;
+      }
+    ), p(
+      () => a.pageInfo?.currentPage,
+      (e) => {
+        e && (h.value = e);
+      }
+    );
+    const M = (e) => u(e, a.keyField), o = g(/* @__PURE__ */ new Set());
+    p(
+      () => a.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);
+      },
+      { 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));
+      }), e.forEach((m) => {
+        const f = u(m, a.keyField);
+        !t.has(f) && o.value.has(f) && (l.push(m), t.add(f));
+      });
+      const c = {
+        selected: l,
+        all: R.value,
+        indeterminate: N.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();
+    }, H = (e) => {
+      h.value = e, v.value = "page", S();
+    }, J = (e) => {
+      x.value = e, h.value = 1, v.value = "limit", w("update:itemsPerPage", e), S();
+    }, K = (e) => {
+      w("rowClick", e);
+    }, Q = () => {
+      const e = L.value;
+      w("delete", e), C.value = !1;
+    }, S = () => {
+      w("change", {
+        pagination: {
+          page: h.value,
+          limit: x.value
+        },
+        sorting: { ...d.value },
+        search: y.value
+      });
+    }, X = b(() => [
+      "w-full bg-background rounded border border-border/60  flex flex-col",
+      "overflow-hidden",
+      a.class
+    ].join(" ")), Y = b(() => ["w-full caption-bottom text-sm", a.tableClass].join(" ")), Z = (e) => e.width ? e.width : "auto";
+    return p(
+      () => a.rows,
+      () => {
+        const e = new Set(a.rows.map((t) => u(t, a.keyField)));
+        o.value = new Set([...o.value].filter((t) => e.has(t)));
+      }
+    ), ee(() => {
+      S();
+    }), (e, t) => (n(), i("div", fe, [
+      $(me, {
+        modelValue: y.value,
+        "onUpdate:modelValue": t[1] || (t[1] = (l) => y.value = l),
+        "show-search": s.showSearch,
+        placeholder: s.searchPlaceholder
+      }, V({ _: 2 }, [
+        e.$slots?.["toolbar-left"] ? {
+          name: "left",
+          fn: z(() => [
+            I(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, {
+              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)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["modelValue", "show-search", "placeholder"]),
+      r("div", {
+        class: E(X.value)
+      }, [
+        r("div", he, [
+          r("table", {
+            class: E(Y.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,
+                      size: "xs",
+                      "onUpdate:modelValue": W
+                    }, 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))
+              ])
+            ]),
+            r("tbody", be, [
+              O.value ? (n(!0), i(B, { key: 0 }, P(Math.min(x.value, 15), (l) => (n(), i("tr", {
+                key: "skeleton-" + l,
+                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" })
+                  ], -1)
+                ])])) : k("", !0),
+                (n(!0), i(B, null, P(s.headers, (c) => (n(), i("td", {
+                  key: c.field,
+                  class: E(["p-5! align-middle", [c.hideOnMobile ? "hidden md:table-cell" : ""]])
+                }, [
+                  r("div", {
+                    class: "rounded-md bg-muted/50 animate-pulse h-4 w-full",
+                    style: D({
+                      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,
+                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
+              }, V({ _: 2 }, [
+                P(s.headers, (m) => ({
+                  name: m.field,
+                  fn: z((f) => [
+                    I(e.$slots, m.field, te({ 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,
+                  class: "h-96 text-center align-middle hover:bg-transparent"
+                }, [
+                  r("div", Ce, [
+                    r("div", Se, [
+                      $(oe, {
+                        icon: s.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))
+                      ], !0)
+                    ]),
+                    e.$slots["empty-action"] ? (n(), i("div", Be, [
+                      I(e.$slots, "empty-action", {}, void 0, !0)
+                    ])) : k("", !0)
+                  ])
+                ], 8, xe)
+              ]))
+            ])
+          ], 2)
+        ])
+      ], 2),
+      s.showPagination && s.pageInfo ? (n(), i("div", Fe, [
+        $(se(de), {
+          "current-page": h.value,
+          "total-pages": s.pageInfo.totalPages,
+          "show-page-info": !1,
+          "show-items-per-page": s.showItemsPerPage,
+          "items-per-page": x.value,
+          "items-per-page-options": s.itemsPerPageOptions,
+          "nav-type": "icon",
+          onChange: H,
+          "onUpdate:itemsPerPage": J
+        }, 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),
+        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)
+      }, null, 8, ["show"])
+    ]));
+  }
+});
+export {
+  Ae as default
+};

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

@@ -0,0 +1,14 @@
+import { TableHeader, SortConfig } from './types';
+interface Props {
+    header: TableHeader;
+    sortConfig?: SortConfig;
+    compact?: boolean;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    sort: (field: string) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onSort?: (field: string) => any;
+}>, {
+    compact: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLTableCellElement>;
+export default _default;

package/components/DataTable/DataTableHeader.vue.js

@@ -0,0 +1,49 @@
+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 = {
+  key: 0,
+  class: "w-4 h-4 shrink-0"
+}, j = /* @__PURE__ */ m({
+  __name: "DataTableHeader",
+  props: {
+    header: {},
+    sortConfig: {},
+    compact: { type: Boolean, default: !1 }
+  },
+  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);
+    }, 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", {
+      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.hideOnMobile ? "hidden md:table-cell" : ""
+      ]]),
+      onClick: f
+    }, [
+      s("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, {
+            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)
+      ], 2)
+    ], 2));
+  }
+});
+export {
+  j as default
+};

package/components/DataTable/DataTableHeader.vue2.js

@@ -0,0 +1,4 @@
+import f from "./DataTableHeader.vue.js";
+export {
+  f as default
+};

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

@@ -0,0 +1,51 @@
+import { TableHeader } from './types';
+interface Props {
+    row: any;
+    headers: TableHeader[];
+    index: number;
+    keyField: string;
+    selectable?: boolean;
+    isSelected?: boolean;
+    hoverable?: boolean;
+    striped?: boolean;
+    compact?: boolean;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Partial<Record<string, (_: {
+        value: any;
+        row: any;
+        index: number;
+        field: string;
+    }) => any>>;
+    refs: {};
+    rootEl: HTMLTableRowElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    select: (id: any) => any;
+    rowClick: (payload: {
+        row: any;
+        index: number;
+    }) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onSelect?: (id: any) => any;
+    onRowClick?: (payload: {
+        row: any;
+        index: number;
+    }) => any;
+}>, {
+    isSelected: boolean;
+    selectable: boolean;
+    compact: boolean;
+    keyField: string;
+    hoverable: boolean;
+    striped: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLTableRowElement>;
+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/DataTable/DataTableRow.vue.js

@@ -0,0 +1,114 @@
+import { defineComponent as p, computed as k, openBlock as c, createElementBlock as a, normalizeClass as u, withModifiers as v, createElementVNode as m, createVNode as h, createCommentVNode as N, Fragment as B, renderList as M, renderSlot as V } from "vue";
+import z from "../CheckBox.vue.js";
+const F = ["data-state"], L = { class: "flex items-center justify-center" }, U = ["title", "innerHTML"], T = /* @__PURE__ */ p({
+  __name: "DataTableRow",
+  props: {
+    row: {},
+    headers: {},
+    index: {},
+    keyField: { default: "_id" },
+    selectable: { type: Boolean, default: !1 },
+    isSelected: { type: Boolean, default: !1 },
+    hoverable: { type: Boolean, default: !0 },
+    striped: { type: Boolean, default: !1 },
+    compact: { type: Boolean, default: !1 }
+  },
+  emits: ["select", "rowClick"],
+  setup(t, { emit: f }) {
+    const s = t, d = f, r = (e, n) => n.split(".").reduce((i, l) => i?.[l], e), g = (e, n, i) => e.format ? e.format(n, i) : n == null ? "-" : e.type === "price" ? new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD"
+    }).format(Number(n)) : e.type === "date" ? new Date(n).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric"
+    }) : e.type === "number" ? new Intl.NumberFormat("en-US").format(Number(n)) : String(n), x = (e, n, i) => {
+      const l = [];
+      if (e.capitalize && l.push("capitalize"), e.addStatusColor) {
+        const o = w(n);
+        o && l.push(o);
+      }
+      if (typeof e.class == "function") {
+        const o = e.class(n, i);
+        o && l.push(o);
+      } else e.class && l.push(e.class);
+      return l.join(" ");
+    }, w = (e) => {
+      const n = {
+        active: "text-success font-medium",
+        inactive: "text-muted-foreground",
+        pending: "text-warning font-medium",
+        completed: "text-success font-medium",
+        cancelled: "text-destructive font-medium",
+        failed: "text-destructive font-medium",
+        success: "text-success font-medium",
+        error: "text-destructive font-medium",
+        warning: "text-warning font-medium",
+        info: "text-info font-medium",
+        high: "text-destructive font-medium",
+        medium: "text-warning font-medium",
+        low: "text-muted-foreground"
+      }, i = String(e).toLowerCase().replace(/[-_\s]/g, "");
+      return n[i] || "";
+    }, b = (e) => ({
+      left: "text-left",
+      center: "text-center",
+      right: "text-right"
+    })[e.align || "left"], y = k(() => r(s.row, s.keyField)), C = () => {
+      d("rowClick", { row: s.row, index: s.index });
+    }, S = () => {
+      d("select", y.value);
+    };
+    return (e, n) => (c(), a("tr", {
+      class: u(["border-b border-border/70 transition-colors data-[state=selected]:bg-muted h-full", [
+        t.hoverable ? "hover:bg-muted/80" : "",
+        t.striped && t.index % 2 === 1 ? "bg-muted/20" : "bg-background",
+        t.isSelected ? "bg-muted! hover:bg-muted/30" : "",
+        "group"
+      ]]),
+      "data-state": t.isSelected ? "selected" : void 0,
+      onClick: C
+    }, [
+      t.selectable ? (c(), a("td", {
+        key: 0,
+        class: "w-[48px] px-0 py-3 align-middle text-center",
+        style: { width: "48px" },
+        onClick: n[0] || (n[0] = v(() => {
+        }, ["stop"]))
+      }, [
+        m("div", L, [
+          h(z, {
+            "model-value": t.isSelected,
+            size: "xs",
+            "onUpdate:modelValue": S
+          }, null, 8, ["model-value"])
+        ])
+      ])) : N("", !0),
+      (c(!0), a(B, null, M(t.headers, (i) => (c(), a("td", {
+        key: i.field,
+        class: u(["align-middle overflow-hidden", [
+          t.compact ? "p-2 text-xs" : "py-3! px-3 text-sm",
+          b(i),
+          i.hideOnMobile ? "hidden md:table-cell" : "",
+          x(i, r(t.row, i.field), t.row)
+        ]])
+      }, [
+        V(e.$slots, i.field, {
+          value: t.row,
+          row: t.row,
+          index: t.index,
+          field: i.field
+        }, () => [
+          m("span", {
+            class: "truncate block",
+            title: String(r(t.row, i.field)),
+            innerHTML: g(i, r(t.row, i.field), t.row)
+          }, null, 8, U)
+        ])
+      ], 2))), 128))
+    ], 10, F));
+  }
+});
+export {
+  T as default
+};

package/components/DataTable/DataTableRow.vue2.js

@@ -0,0 +1,4 @@
+import f from "./DataTableRow.vue.js";
+export {
+  f as default
+};

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

@@ -0,0 +1,31 @@
+interface Props {
+    modelValue?: string;
+    showSearch?: boolean;
+    placeholder?: string;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        left?(_: {}): any;
+        right?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: (value: string) => any;
+}>, {
+    placeholder: string;
+    modelValue: string;
+    showSearch: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+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/DataTable/DataTableToolbar.vue.js

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

package/components/DataTable/DataTableToolbar.vue2.js

@@ -0,0 +1,4 @@
+import f from "./DataTableToolbar.vue.js";
+export {
+  f as default
+};

package/components/DataTable/index.d.ts

@@ -0,0 +1,4 @@
+export { default as DataTable } from './DataTable.vue';
+export { default as DataTableHeader } from './DataTableHeader.vue';
+export { default as DataTableRow } from './DataTableRow.vue';
+export * from './types';