vlite3 0.2.7 → 0.2.9

package/components/Carousel/Carousel.vue.d.ts

@@ -50,6 +50,7 @@ declare function __VLS_template(): {
                 readonly autoFocus: boolean;
                 readonly wheelOptions: import('vue-carousel-lite/types').WheelOptions;
                 readonly paginationPosition?: import('vue-carousel-lite').PaginationPosition | import('vue-carousel-lite').PaginationPosition[];
+                readonly updateKey?: string | number;
                 readonly paginationBackground?: boolean;
                 readonly "onSlide-change"?: ((index: number) => any) | undefined;
             } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "direction" | "pagination" | "paginationSize" | "paginationVisibility" | "paginationHoverInitialTimeout" | "paginationHoverEdgeThreshold" | "autoPlay" | "draggable" | "autoPlayInterval" | "itemsToShow" | "gap" | "speed" | "easing" | "mousewheel" | "loop" | "currentItem" | "bufferSize" | "maxDomElements" | "autoFocus" | "wheelOptions">;
@@ -147,6 +148,9 @@ declare function __VLS_template(): {
                     type: import('vue').PropType<number>;
                     default: number;
                 };
+                updateKey: {
+                    type: import('vue').PropType<string | number>;
+                };
                 autoFocus: {
                     type: import('vue').PropType<boolean>;
                     default: boolean;
@@ -325,6 +329,9 @@ declare function __VLS_template(): {
                 type: import('vue').PropType<number>;
                 default: number;
             };
+            updateKey: {
+                type: import('vue').PropType<string | number>;
+            };
             autoFocus: {
                 type: import('vue').PropType<boolean>;
                 default: boolean;
@@ -469,6 +476,7 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
             readonly autoFocus: boolean;
             readonly wheelOptions: import('vue-carousel-lite/types').WheelOptions;
             readonly paginationPosition?: import('vue-carousel-lite').PaginationPosition | import('vue-carousel-lite').PaginationPosition[];
+            readonly updateKey?: string | number;
             readonly paginationBackground?: boolean;
             readonly "onSlide-change"?: ((index: number) => any) | undefined;
         } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "direction" | "pagination" | "paginationSize" | "paginationVisibility" | "paginationHoverInitialTimeout" | "paginationHoverEdgeThreshold" | "autoPlay" | "draggable" | "autoPlayInterval" | "itemsToShow" | "gap" | "speed" | "easing" | "mousewheel" | "loop" | "currentItem" | "bufferSize" | "maxDomElements" | "autoFocus" | "wheelOptions">;
@@ -566,6 +574,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
                 type: import('vue').PropType<number>;
                 default: number;
             };
+            updateKey: {
+                type: import('vue').PropType<string | number>;
+            };
             autoFocus: {
                 type: import('vue').PropType<boolean>;
                 default: boolean;
@@ -744,6 +755,9 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
             type: import('vue').PropType<number>;
             default: number;
         };
+        updateKey: {
+            type: import('vue').PropType<string | number>;
+        };
         autoFocus: {
             type: import('vue').PropType<boolean>;
             default: boolean;

package/components/DataTable/DataTable.vue.js

@@ -1,7 +1,319 @@
-import o from "./DataTable.vue2.js";
-/* empty css               */
-import t from "../../_virtual/_plugin-vue_export-helper.js";
-const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-53f1fe21"]]);
+import { defineComponent as ee, ref as g, computed as b, watch as p, onMounted as te, openBlock as n, createElementBlock as i, createVNode as C, createSlots as j, withCtx as T, renderSlot as S, createBlock as D, createCommentVNode as I, createElementVNode as r, 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 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 = { class: "hover:bg-transparent" }, ge = {
+  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" }, we = { class: "[&_tr:last-child]:border-0" }, ye = {
+  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 = {
+  key: 0,
+  class: "mt-4"
+}, $e = { key: 0 }, je = /* @__PURE__ */ ee({
+  __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 },
+    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 },
+    paginationPosition: {},
+    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: {},
+    sortable: { type: Boolean, default: !1 },
+    variant: { default: "default" }
+  },
+  emits: ["change", "select", "rowClick", "update:itemsPerPage", "update:selectedRows", "delete"],
+  setup(a, { 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, w = U, d = 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(
+      () => l.loading,
+      (e, t) => {
+        !e && t && (v.value = "idle");
+      }
+    ), p(
+      () => l.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", x();
+      }, 300);
+    }), p(
+      () => l.itemsPerPage,
+      (e) => {
+        k.value = e;
+      }
+    ), p(
+      () => l.pageInfo?.currentPage,
+      (e) => {
+        e && (h.value = e);
+      }
+    );
+    const E = (e) => u(e, l.keyField), o = g(/* @__PURE__ */ new Set());
+    p(
+      () => l.selectedRows,
+      (e) => {
+        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 z = b(() => l.rows.length === 0 ? !1 : l.rows.every((e) => o.value.has(u(e, l.keyField)))), N = 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))), 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);
+        o.value.has(f) && (s.push(m), t.add(f));
+      }), e.forEach((m) => {
+        const f = u(m, l.keyField);
+        !t.has(f) && o.value.has(f) && (s.push(m), t.add(f));
+      });
+      const c = {
+        selected: s,
+        all: z.value,
+        indeterminate: N.value
+      };
+      w("select", c), w("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, v.value = "sort", x();
+    }, J = (e) => {
+      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);
+    }, X = () => {
+      const e = W.value;
+      w("delete", e), P.value = !1;
+    }, x = () => {
+      w("change", {
+        pagination: {
+          page: h.value,
+          limit: k.value
+        },
+        sorting: { ...d.value },
+        search: y.value
+      });
+    }, Y = b(() => [
+      "w-full flex flex-col",
+      l.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-sm", l.tableClass].join(" ")), _ = (e) => e.width ? e.width : "auto";
+    return p(
+      () => l.rows,
+      () => {
+        const e = new Set(l.rows.map((t) => u(t, l.keyField)));
+        o.value = new Set([...o.value].filter((t) => e.has(t)));
+      }
+    ), te(() => {
+      x();
+    }), (e, t) => (n(), i("div", fe, [
+      C(me, {
+        modelValue: y.value,
+        "onUpdate:modelValue": t[1] || (t[1] = (s) => y.value = s),
+        "show-search": a.showSearch,
+        placeholder: a.searchPlaceholder
+      }, j({ _: 2 }, [
+        e.$slots?.["toolbar-left"] ? {
+          name: "left",
+          fn: T(() => [
+            S(e.$slots, "toolbar-left")
+          ]),
+          key: "0"
+        } : void 0,
+        e.$slots?.["toolbar-right"] || o.value.size > 0 ? {
+          name: "right",
+          fn: T(() => [
+            o.value.size > 0 ? (n(), D(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] = (s) => P.value = !0)
+            })) : I("", !0),
+            S(e.$slots, "toolbar-right")
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["modelValue", "show-search", "placeholder"]),
+      r("div", {
+        class: B(Y.value)
+      }, [
+        r("div", he, [
+          r("table", {
+            class: B([Z.value, "data-table"])
+          }, [
+            r("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" : ""
+              ])
+            }, [
+              r("tr", ve, [
+                a.selectable ? (n(), i("th", ge, [
+                  r("div", pe, [
+                    C(ne, {
+                      "model-value": z.value,
+                      indeterminate: N.value,
+                      size: "xs",
+                      "onUpdate:modelValue": q
+                    }, null, 8, ["model-value", "indeterminate"])
+                  ])
+                ])) : I("", !0),
+                (n(!0), i(R, null, $(a.headers, (s) => (n(), D(ue, {
+                  key: s.field,
+                  header: s,
+                  "sort-config": d.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))
+              ])
+            ], 2),
+            r("tbody", we, [
+              L.value ? (n(!0), i(R, { key: 0 }, $(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"
+              }, [
+                a.selectable ? (n(), i("td", ye, [...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(R, null, $(a.headers, (c) => (n(), i("td", {
+                  key: c.field,
+                  class: B(["p-5! align-middle last:pr-6!", [c.hideOnMobile ? "hidden md:table-cell" : ""]])
+                }, [
+                  r("div", {
+                    class: "rounded-md bg-muted/50 animate-pulse h-4 w-full",
+                    style: A({
+                      width: `${50 + Math.random() * 40}%`
+                    })
+                  }, null, 4)
+                ], 2))), 128))
+              ]))), 128)) : a.rows.length > 0 ? (n(!0), i(R, { key: 1 }, $(a.rows, (s, c) => (n(), D(ce, {
+                key: E(s),
+                row: s,
+                headers: a.headers,
+                index: c,
+                "key-field": a.keyField,
+                selectable: a.selectable,
+                "is-selected": o.value.has(E(s)),
+                hoverable: a.hoverable,
+                striped: a.striped,
+                compact: a.compact,
+                onSelect: G,
+                onRowClick: Q,
+                class: "[&_td:last-child]:pr-3.5!"
+              }, j({ _: 2 }, [
+                $(a.headers, (m) => ({
+                  name: m.field,
+                  fn: T((f) => [
+                    S(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, [
+                r("td", {
+                  colspan: a.selectable ? a.headers.length + 1 : a.headers.length,
+                  class: "h-96 text-center align-middle hover:bg-transparent"
+                }, [
+                  r("div", Pe, [
+                    r("div", xe, [
+                      C(oe, {
+                        icon: a.emptyIcon,
+                        class: "h-6 w-6 text-muted-foreground/80"
+                      }, null, 8, ["icon"])
+                    ]),
+                    r("h3", Ce, M(a.emptyTitle), 1),
+                    r("p", Se, [
+                      S(e.$slots, "empty-description", {}, () => [
+                        ae(M(a.emptyDescription), 1)
+                      ])
+                    ]),
+                    e.$slots["empty-action"] ? (n(), i("div", Ie, [
+                      S(e.$slots, "empty-action")
+                    ])) : I("", !0)
+                  ])
+                ], 8, ke)
+              ]))
+            ])
+          ], 2)
+        ])
+      ], 2),
+      a.showPagination && a.pageInfo && a.pageInfo.totalItems > 0 ? (n(), i("div", $e, [
+        C(se(de), {
+          "current-page": h.value,
+          "total-pages": a.pageInfo.totalPages,
+          "show-page-info": !1,
+          "show-items-per-page": a.showItemsPerPage,
+          "items-per-page": k.value,
+          "items-per-page-options": a.itemsPerPageOptions,
+          "nav-type": "icon",
+          alignment: l.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, {
+        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: X,
+        onCancel: t[3] || (t[3] = (s) => P.value = !1)
+      }, null, 8, ["show"])
+    ]));
+  }
+});
 export {
-  e as default
+  je as default
 };