vlite3 0.8.2 → 0.8.4

package/components/Screen/Screen.vue.js

@@ -1,40 +1,40 @@
-import { defineComponent as Ve, useSlots as Re, computed as i, ref as y, markRaw as H, provide as K, watch as J, resolveComponent as Ee, openBlock as a, createElementBlock as s, normalizeClass as N, createElementVNode as w, renderSlot as p, toDisplayString as m, createBlock as c, withCtx as d, createVNode as u, createCommentVNode as f, unref as x, resolveDynamicComponent as Q, Fragment as P, mergeProps as v, createTextVNode as B, renderList as Ae } from "vue";
-import je from "../Input.vue.js";
+import { defineComponent as Re, useSlots as Ee, computed as i, ref as y, markRaw as H, provide as K, watch as J, resolveComponent as je, openBlock as a, createElementBlock as d, normalizeClass as N, createElementVNode as p, renderSlot as w, toDisplayString as m, createBlock as c, withCtx as s, createVNode as u, createCommentVNode as f, unref as x, resolveDynamicComponent as Q, Fragment as S, mergeProps as v, createTextVNode as k, renderList as Ae } from "vue";
+import Oe from "../Input.vue.js";
 /* empty css            */
 import h from "../Button.vue.js";
 import F from "../Icon.vue.js";
-import Oe from "../Tooltip.vue.js";
+import Ne from "../Tooltip.vue.js";
 import X from "../Modal.vue.js";
-import Ne from "../ConfirmationModal.vue.js";
-import Fe from "../Pagination/Pagination.vue.js";
-import Me from "../Empty/Empty.vue.js";
-import Le from "./ScreenFilter.vue.js";
-import Ue from "../Dropdown/Dropdown.vue.js";
-import qe from "../ExportData/ExportData.vue.js";
-import ze from "../ImportData/ImportData.vue.js";
-import { usePersistentState as He } from "../../utils/usePersistentState.js";
-import { useVLiteConfig as Ke } from "../../core/config.js";
+import Fe from "../ConfirmationModal.vue.js";
+import Me from "../Pagination/Pagination.vue.js";
+import Le from "../Empty/Empty.vue.js";
+import Ue from "./ScreenFilter.vue.js";
+import qe from "../Dropdown/Dropdown.vue.js";
+import ze from "../ExportData/ExportData.vue.js";
+import He from "../ImportData/ImportData.vue.js";
+import { usePersistentState as Ke } from "../../utils/usePersistentState.js";
+import { useVLiteConfig as Je } from "../../core/config.js";
 import { $t as r } from "../../utils/i18n.js";
-import { SCREEN_CONTEXT_KEY as Je } from "../DataTable/types.js";
-const Qe = { class: "flex flex-col w-full space-y-8" }, Xe = { class: "flex flex-col shrink-0" }, Ye = {
+import { SCREEN_CONTEXT_KEY as Qe } from "../DataTable/types.js";
+const Xe = { class: "flex flex-col w-full space-y-8" }, Ye = { class: "flex flex-col shrink-0" }, Ge = {
   key: 0,
   class: "flex items-center! gap-2"
-}, Ge = { class: "text-fs-7.5 font-bold text-foreground" }, We = {
+}, We = { class: "text-fs-7.5 font-bold text-foreground" }, Ze = {
   key: 0,
   class: "text-sm text-gray-700 mt-1 md:max-w-[450px]"
-}, Ze = { class: "flex flex-col sm:flex-row items-start sm:items-center gap-2.5 w-full justify-end" }, _e = { class: "flex items-center gap-2 w-full sm:w-auto flex-1 md:flex-none justify-start sm:justify-end" }, et = {
+}, _e = { class: "flex flex-col sm:flex-row items-start sm:items-center gap-2.5 w-full justify-end" }, et = { class: "flex items-center gap-2 w-full sm:w-auto flex-1 md:flex-none justify-start sm:justify-end" }, tt = {
   key: 1,
   class: "flex items-center p-1 rounded-md border border-border shrink-0"
-}, tt = ["title"], lt = ["title"], at = {
+}, lt = ["title"], at = ["title"], nt = {
   key: 4,
   class: "w-full md:w-60! max-sm:order-last"
-}, nt = { class: "flex items-center gap-3 max-sm:w-full sm:w-auto max-sm:order-last" }, ot = ["href", "target"], it = ["href", "target"], rt = {
+}, ot = { class: "flex items-center gap-3 max-sm:w-full sm:w-auto max-sm:order-last" }, it = ["href", "target"], rt = ["href", "target"], dt = {
   key: 4,
   class: "p-8 text-center text-muted-foreground border border-dashed border-border rounded-lg"
-}, dt = {
+}, st = {
   key: 2,
   class: "-mt-2"
-}, st = { class: "px-1 py-1 text-sm" }, ct = { class: "font-medium mb-3 text-muted-foreground" }, ut = { class: "space-y-3" }, ft = { key: 4 }, Rt = /* @__PURE__ */ Ve({
+}, ct = { class: "px-1 py-1 text-sm" }, ut = { class: "font-medium mb-3 text-muted-foreground" }, ft = { class: "space-y-3" }, mt = { key: 4 }, Et = /* @__PURE__ */ Re({
   __name: "Screen",
   props: {
     name: { default: "" },
@@ -84,31 +84,37 @@ const Qe = { class: "flex flex-col w-full space-y-8" }, Xe = { class: "flex flex
   },
   emits: ["add", "delete"],
   setup(t, { emit: ne }) {
-    const l = t, S = Ke(), Y = ne, V = Re(), oe = i(() => l.name || l.title || "default-screen"), k = He(
+    const l = t, I = Je(), Y = ne, R = Ee(), oe = i(() => l.name || l.title || "default-screen"), C = Ke(
       `view-mode-${oe.value}`,
-      l.table || V.table ? "table" : "list"
-    ), $ = y(""), R = y({}), G = y({ field: "", order: "" }), I = y(l.pageInfo?.currentPage || 1), M = y(l.pageInfo?.itemsPerPage || l.paginationProps?.itemsPerPage || 10), g = y([]), E = y([]), T = y(!1), A = i(() => l.addComponent ? H(l.addComponent) : void 0), W = i(() => l.addBtn?.modal ? H(l.addBtn.modal) : void 0), Z = i(() => {
+      l.table || R.table ? "table" : "list"
+    ), D = y(""), b = y({}), G = y({ field: "", order: "" }), T = y(l.pageInfo?.currentPage || 1), M = y(l.pageInfo?.itemsPerPage || l.paginationProps?.itemsPerPage || 10), g = y([]), E = y([]), V = y(!1), j = i(
+      () => l.addComponent ? H(l.addComponent) : void 0
+    ), W = i(
+      () => l.addBtn?.modal ? H(l.addBtn.modal) : void 0
+    ), Z = i(() => {
       let e;
-      return k.value === "table" ? e = l.table || !!V.table : e = l.list || !!V.list || !!V.grid, typeof e == "object" && e !== null ? H(e) : e;
-    }), ie = {
+      return C.value === "table" ? e = l.table || !!R.table : e = l.list || !!R.list || !!R.grid, typeof e == "object" && e !== null ? H(e) : e;
+    }), ie = i(() => D.value && D.value.trim() !== "" ? !0 : b.value ? Object.keys(b.value).some(
+      (e) => b.value[e] !== "" && b.value[e] !== null && b.value[e] !== void 0
+    ) : !1), re = {
       disableSearch: !0,
       forceSelectable: l.canSelectRows,
       onTableChange: (e) => {
-        G.value = { field: e.sort.field, order: e.sort.order }, C();
+        G.value = { field: e.sort.field, order: e.sort.order }, P();
       }
     };
-    K(Je, ie), K("screen-selected-rows", g), K("screen-request-delete", (e) => D(e));
-    const D = (e) => {
-      E.value = e, T.value = !0;
-    }, re = () => {
-      Y("delete", E.value), T.value = !1, g.value = [];
-    }, de = (e) => {
+    K(Qe, re), K("screen-selected-rows", g), K("screen-request-delete", (e) => $(e));
+    const $ = (e) => {
+      E.value = e, V.value = !0;
+    }, de = () => {
+      Y("delete", E.value), V.value = !1, g.value = [];
+    }, se = (e) => {
       Y("delete", e), g.value = [];
     };
     J(
       () => l.pageInfo?.currentPage,
       (e) => {
-        e && (I.value = e);
+        e && (T.value = e);
       }
     ), J(
       () => l.pageInfo?.itemsPerPage,
@@ -117,55 +123,55 @@ const Qe = { class: "flex flex-col w-full space-y-8" }, Xe = { class: "flex flex
       }
     );
     let L = null;
-    J($, () => {
+    J(D, () => {
       L && clearTimeout(L), L = setTimeout(() => {
-        I.value = 1, C();
+        T.value = 1, P();
       }, 300);
     });
-    const se = (e) => {
-      I.value = e, C();
-    }, ce = (e) => {
-      M.value = e, I.value = 1, C();
-    }, C = () => {
+    const ce = (e) => {
+      T.value = e, P();
+    }, ue = (e) => {
+      M.value = e, T.value = 1, P();
+    }, P = () => {
       l.refetch && l.refetch({
-        pagination: { page: I.value, limit: M.value },
-        search: $.value,
+        pagination: { page: T.value, limit: M.value },
+        search: D.value,
         sort: { ...G.value },
-        filter: { ...R.value }
+        filter: { ...b.value }
       });
-    }, ue = i(() => l.data && l.data.length > 0), _ = i(() => l.titleI18n ? r(l.titleI18n) : l.title), ee = i(
+    }, fe = i(() => l.data && l.data.length > 0), _ = i(() => l.titleI18n ? r(l.titleI18n) : l.title), ee = i(
       () => l.descriptionI18n ? r(l.descriptionI18n) : l.description
-    ), fe = i(() => {
+    ), me = i(() => {
       const e = r("vlite.screen.deleteSelected");
       return e !== "vlite.screen.deleteSelected" ? e : "Delete Selected";
-    }), me = i(() => {
+    }), ve = i(() => {
       const e = r("vlite.screen.listView");
       return e !== "vlite.screen.listView" ? e : "List View";
-    }), ve = i(() => {
+    }), ge = i(() => {
       const e = r("vlite.screen.tableView");
       return e !== "vlite.screen.tableView" ? e : "Table View";
-    }), ge = i(() => {
+    }), he = i(() => {
       const e = r("vlite.screen.refresh");
       return e !== "vlite.screen.refresh" ? e : "Refresh";
-    }), he = i(() => {
+    }), ye = i(() => {
       const e = r("vlite.screen.searchPlaceholder");
       return e !== "vlite.screen.searchPlaceholder" ? e : "Search...";
-    }), ye = i(() => {
+    }), pe = i(() => {
       const e = r("vlite.screen.confirmDeleteTitle");
       return e !== "vlite.screen.confirmDeleteTitle" ? e : "Confirm Deletion";
     }), we = i(() => {
       const e = r("vlite.screen.confirmDeleteDesc", { count: E.value.length });
       return e !== "vlite.screen.confirmDeleteDesc" ? e : `Are you sure you want to delete the selected ${E.value.length > 1 ? "items" : "item"}?`;
-    }), pe = i(() => {
+    }), xe = i(() => {
       const e = r("vlite.screen.confirmDeleteBtn");
       return e !== "vlite.screen.confirmDeleteBtn" ? e : "Delete";
-    }), xe = i(() => {
+    }), be = i(() => {
       const e = r("vlite.screen.cancelBtn");
       return e !== "vlite.screen.cancelBtn" ? e : "Cancel";
-    }), be = i(() => {
+    }), Be = i(() => {
       const e = r("vlite.screen.missingView");
       return e !== "vlite.screen.missingView" ? e : "Please provide a `:list` or `:table` component or slot.";
-    }), b = i(() => {
+    }), B = i(() => {
       if (l.addBtn?.labelI18n) return r(l.addBtn.labelI18n);
       if (l.addBtn?.label) return l.addBtn.label;
       const e = r("vlite.screen.addNew");
@@ -178,23 +184,23 @@ const Qe = { class: "flex flex-col w-full space-y-8" }, Xe = { class: "flex flex
     }), le = i(() => {
       const e = r("vlite.screen.importData");
       return e !== "vlite.screen.importData" ? e : "Import Data";
-    }), Be = i(() => {
+    }), ke = i(() => {
       const e = [];
       return l.exportProps !== !1 && e.push({ value: "export", label: U.value, icon: "lucide:download" }), l.importProps !== !1 && e.push({ value: "import", label: le.value, icon: "lucide:upload" }), e;
-    }), q = y(null), ke = y(null), j = y(!1), z = y(!1), Ce = (e) => {
-      e.value === "export" ? j.value = !0 : e.value === "import" && (z.value = !0);
-    }, De = i(
+    }), q = y(null), Ce = y(null), A = y(!1), z = y(!1), De = (e) => {
+      e.value === "export" ? A.value = !0 : e.value === "import" && (z.value = !0);
+    }, Pe = i(
       () => (l.exportSchema || []).map((e) => ({
         field: e.name || e.field,
         title: e.label || e.title || e.name || e.field
       }))
-    ), Pe = i(
+    ), Se = i(
       () => (l.importSchema || []).map((e) => ({
         field: e.name || e.field,
         title: e.label || e.title || e.name || e.field,
         required: e.required || !1
       }))
-    ), Se = async (e) => S?.services?.importApi && l.importType ? await S.services.importApi(l.importType, e) : (console.warn(
+    ), $e = async (e) => I?.services?.importApi && l.importType ? await I.services.importApi(l.importType, e) : (console.warn(
       "VLite Screen: No importApi configured or no importType provided for generic import."
     ), {
       processed: e.data.length,
@@ -203,35 +209,35 @@ const Qe = { class: "flex flex-col w-full space-y-8" }, Xe = { class: "flex flex
       skipped: 0,
       failed: 0,
       errors: []
-    }), $e = () => C(), Ie = i(
-      () => l.exportMode || S?.exportData?.mode || "frontend"
-    ), Te = async (e) => {
-      S?.services?.exportApi && l.exportType ? await S.services.exportApi(l.exportType, {
+    }), Ie = () => P(), Te = i(
+      () => l.exportMode || I?.exportData?.mode || "frontend"
+    ), Ve = async (e) => {
+      I?.services?.exportApi && l.exportType ? await I.services.exportApi(l.exportType, {
         format: e,
-        search: $.value,
-        filter: R.value
+        search: D.value,
+        filter: b.value
       }) : console.warn(
         "VLite Screen: No exportApi configured or no exportType provided for generic backend export."
       );
     };
     return (e, n) => {
-      const ae = Ee("router-link");
-      return a(), s("div", Qe, [
-        t.customHeader ? p(e.$slots, "custom-header", { key: 1 }) : (a(), s("div", {
+      const ae = je("router-link");
+      return a(), d("div", Xe, [
+        t.customHeader ? w(e.$slots, "custom-header", { key: 1 }) : (a(), d("div", {
           key: 0,
           class: N([t.headerClass, "flex flex-col md:flex-row sm:items-start md:items-center justify-between gap-4"])
         }, [
-          w("div", Xe, [
-            p(e.$slots, "title", {}, () => [
-              _.value ? (a(), s("div", Ye, [
-                w("h1", Ge, m(_.value), 1),
-                t.info || t.infoI18n ? (a(), c(Oe, {
+          p("div", Ye, [
+            w(e.$slots, "title", {}, () => [
+              _.value ? (a(), d("div", Ge, [
+                p("h1", We, m(_.value), 1),
+                t.info || t.infoI18n ? (a(), c(Ne, {
                   key: 0,
                   content: t.info,
                   "content-i18n": t.infoI18n,
                   placement: "right"
                 }, {
-                  default: d(() => [
+                  default: s(() => [
                     u(F, {
                       icon: "lucide:info",
                       class: "w-[18px] h-[18px] mt-3! text-muted-foreground hover:text-foreground cursor-pointer transition-colors outline-none"
@@ -241,82 +247,82 @@ const Qe = { class: "flex flex-col w-full space-y-8" }, Xe = { class: "flex flex
                 }, 8, ["content", "content-i18n"])) : f("", !0)
               ])) : f("", !0)
             ]),
-            p(e.$slots, "description", {}, () => [
-              ee.value ? (a(), s("p", We, m(ee.value), 1)) : f("", !0)
+            w(e.$slots, "description", {}, () => [
+              ee.value ? (a(), d("p", Ze, m(ee.value), 1)) : f("", !0)
             ])
           ]),
-          w("div", Ze, [
-            w("div", _e, [
+          p("div", _e, [
+            p("div", et, [
               g.value.length > 0 && t.canSelectRows ? (a(), c(h, {
                 key: 0,
                 variant: "outline",
                 class: "hover:bg-destructive/10 shrink-0 h-9! w-9!",
                 icon: "lucide:trash-2",
-                title: fe.value,
-                onClick: n[0] || (n[0] = (o) => D(g.value))
+                title: me.value,
+                onClick: n[0] || (n[0] = (o) => $(g.value))
               }, null, 8, ["title"])) : f("", !0),
-              (t.table || e.$slots.table) && (t.list || e.$slots.list || e.$slots.grid) ? (a(), s("div", et, [
-                w("button", {
-                  onClick: n[1] || (n[1] = (o) => k.value = "list"),
+              (t.table || e.$slots.table) && (t.list || e.$slots.list || e.$slots.grid) ? (a(), d("div", tt, [
+                p("button", {
+                  onClick: n[1] || (n[1] = (o) => C.value = "list"),
                   class: N(["p-1.5 rounded", [
-                    x(k) === "list" ? "bg-secondary/85 dark:bg-secondary shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"
+                    x(C) === "list" ? "bg-secondary/85 dark:bg-secondary shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"
                   ]]),
-                  title: me.value
+                  title: ve.value
                 }, [
                   u(F, {
                     icon: "lucide:layout-grid",
                     class: "w-4 h-4"
                   })
-                ], 10, tt),
-                w("button", {
-                  onClick: n[2] || (n[2] = (o) => k.value = "table"),
+                ], 10, lt),
+                p("button", {
+                  onClick: n[2] || (n[2] = (o) => C.value = "table"),
                   class: N(["p-1.5 rounded", [
-                    x(k) === "table" ? "bg-secondary/85 dark:bg-secondary shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"
+                    x(C) === "table" ? "bg-secondary/85 dark:bg-secondary shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"
                   ]]),
-                  title: ve.value
+                  title: ge.value
                 }, [
                   u(F, {
                     icon: "lucide:list",
                     class: "w-4 h-4"
                   })
-                ], 10, lt)
+                ], 10, at)
               ])) : f("", !0),
-              p(e.$slots, "before-search"),
+              w(e.$slots, "before-search"),
               t.showRefresh ? (a(), c(h, {
                 key: 2,
                 variant: "outline",
                 icon: "lucide:refresh-cw",
                 size: "lg",
                 class: "shrink-0 h-9! w-9!",
-                title: ge.value,
+                title: he.value,
                 disabled: t.loading,
-                onClick: C
+                onClick: P
               }, null, 8, ["title", "disabled"])) : f("", !0),
-              t.filterSchema && t.filterSchema.length > 0 ? (a(), c(Le, {
+              t.filterSchema && t.filterSchema.length > 0 ? (a(), c(Ue, {
                 key: 3,
                 schema: t.filterSchema,
                 type: t.filterType,
-                modelValue: R.value,
-                "onUpdate:modelValue": n[3] || (n[3] = (o) => R.value = o),
-                onChange: C
+                modelValue: b.value,
+                "onUpdate:modelValue": n[3] || (n[3] = (o) => b.value = o),
+                onChange: P
               }, null, 8, ["schema", "type", "modelValue"])) : f("", !0),
-              t.canSearch ? (a(), s("div", at, [
-                u(je, {
+              t.canSearch ? (a(), d("div", nt, [
+                u(Oe, {
                   lazy: "",
-                  modelValue: $.value,
-                  "onUpdate:modelValue": n[4] || (n[4] = (o) => $.value = o),
+                  modelValue: D.value,
+                  "onUpdate:modelValue": n[4] || (n[4] = (o) => D.value = o),
                   icon: "lucide:search",
-                  placeholder: he.value,
+                  placeholder: ye.value,
                   variant: "outline",
                   class: "bg-background w-full",
                   "show-clear-button": !0
                 }, null, 8, ["modelValue", "placeholder"])
               ])) : f("", !0)
             ]),
-            w("div", nt, [
-              p(e.$slots, "actions", {}, () => [
-                A.value ? (a(), c(Q(A.value), { key: 0 })) : t.canAdd ? (a(), s(P, { key: 1 }, [
-                  t.addBtn ? (a(), s(P, { key: 0 }, [
+            p("div", ot, [
+              w(e.$slots, "actions", {}, () => [
+                j.value ? (a(), c(Q(j.value), { key: 0 })) : t.canAdd ? (a(), d(S, { key: 1 }, [
+                  t.addBtn ? (a(), d(S, { key: 0 }, [
                     t.addBtn.modal ? (a(), c(X, v({
                       key: 0,
                       body: W.value
@@ -326,14 +332,14 @@ const Qe = { class: "flex flex-col w-full space-y-8" }, Xe = { class: "flex flex
                       triggerClass: "w-full",
                       loading: t.loading
                     }), {
-                      trigger: d(() => [
+                      trigger: s(() => [
                         u(h, v({
                           class: "w-full",
                           icon: t.addBtn.icon || "fluent:add-16-filled",
                           variant: t.addBtn.variant || "primary"
                         }, t.addBtn.buttonProps), {
-                          default: d(() => [
-                            B(m(b.value), 1)
+                          default: s(() => [
+                            k(m(B.value), 1)
                           ]),
                           _: 1
                         }, 16, ["icon", "variant"])
@@ -344,20 +350,20 @@ const Qe = { class: "flex flex-col w-full space-y-8" }, Xe = { class: "flex flex
                       to: t.addBtn.to,
                       class: "inline-flex w-full sm:w-auto"
                     }, {
-                      default: d(() => [
+                      default: s(() => [
                         u(h, v({
                           class: "w-full",
                           icon: t.addBtn.icon || "fluent:add-16-filled",
                           variant: t.addBtn.variant || "primary"
                         }, t.addBtn.buttonProps), {
-                          default: d(() => [
-                            B(m(b.value), 1)
+                          default: s(() => [
+                            k(m(B.value), 1)
                           ]),
                           _: 1
                         }, 16, ["icon", "variant"])
                       ]),
                       _: 1
-                    }, 8, ["to"])) : t.addBtn.href ? (a(), s("a", {
+                    }, 8, ["to"])) : t.addBtn.href ? (a(), d("a", {
                       key: 2,
                       href: t.addBtn.href,
                       target: t.addBtn.target,
@@ -368,12 +374,12 @@ const Qe = { class: "flex flex-col w-full space-y-8" }, Xe = { class: "flex flex
                         icon: t.addBtn.icon || "fluent:add-16-filled",
                         variant: t.addBtn.variant || "primary"
                       }, t.addBtn.buttonProps), {
-                        default: d(() => [
-                          B(m(b.value), 1)
+                        default: s(() => [
+                          k(m(B.value), 1)
                         ]),
                         _: 1
                       }, 16, ["icon", "variant"])
-                    ], 8, ot)) : (a(), c(h, v({
+                    ], 8, it)) : (a(), c(h, v({
                       key: 3,
                       class: "w-full sm:w-auto",
                       icon: t.addBtn.icon || "fluent:add-16-filled",
@@ -381,22 +387,22 @@ const Qe = { class: "flex flex-col w-full space-y-8" }, Xe = { class: "flex flex
                     }, t.addBtn.buttonProps, {
                       onClick: n[5] || (n[5] = (o) => t.addBtn.onClick ? t.addBtn.onClick() : e.$emit("add"))
                     }), {
-                      default: d(() => [
-                        B(m(b.value), 1)
+                      default: s(() => [
+                        k(m(B.value), 1)
                       ]),
                       _: 1
                     }, 16, ["icon", "variant"]))
                   ], 64)) : f("", !0)
                 ], 64)) : f("", !0)
               ]),
-              te.value ? (a(), c(Ue, {
+              te.value ? (a(), c(qe, {
                 key: 0,
                 closeOnSelect: "",
                 position: "bottom-end",
-                options: Be.value,
-                onOnSelect: Ce
+                options: ke.value,
+                onOnSelect: De
               }, {
-                trigger: d(() => [
+                trigger: s(() => [
                   u(h, {
                     variant: "outline",
                     icon: "lucide:more-vertical",
@@ -406,123 +412,125 @@ const Qe = { class: "flex flex-col w-full space-y-8" }, Xe = { class: "flex flex
                 ]),
                 _: 1
               }, 8, ["options"])) : f("", !0),
-              p(e.$slots, "after-add")
+              w(e.$slots, "after-add")
             ])
           ])
         ], 2)),
-        p(e.$slots, "sub-header"),
-        w("div", {
+        w(e.$slots, "sub-header"),
+        p("div", {
           class: N(["flex-1 w-full relative", t.containerClass])
         }, [
-          !ue.value && !t.loading ? p(e.$slots, "empty", { key: 0 }, () => [
-            u(x(Me), {
+          !fe.value && !t.loading ? w(e.$slots, "empty", { key: 0 }, () => [
+            u(x(Le), {
               title: t.emptyTitle,
               titleI18n: t.emptyTitleI18n,
               description: t.emptyDescription,
               descriptionI18n: t.emptyDescriptionI18n,
               icon: t.emptyIcon
             }, {
-              action: d(() => [
-                A.value ? (a(), c(Q(A.value), { key: 0 })) : t.canAdd ? (a(), s(P, { key: 1 }, [
-                  t.addBtn ? (a(), s(P, { key: 0 }, [
-                    t.addBtn.modal ? (a(), c(X, v({
-                      key: 0,
-                      body: W.value
-                    }, t.addBtn.modalProps), {
-                      trigger: d(() => [
-                        u(h, v({
-                          icon: t.addBtn.icon || "fluent:add-16-filled",
-                          variant: t.addBtn.variant || "primary",
-                          rounded: "full",
-                          class: "px-6!"
-                        }, t.addBtn.buttonProps), {
-                          default: d(() => [
-                            B(m(b.value), 1)
-                          ]),
-                          _: 1
-                        }, 16, ["icon", "variant"])
-                      ]),
-                      _: 1
-                    }, 16, ["body"])) : t.addBtn.to ? (a(), c(ae, {
-                      key: 1,
-                      to: t.addBtn.to,
-                      class: "inline-flex"
-                    }, {
-                      default: d(() => [
+              action: s(() => [
+                ie.value ? f("", !0) : (a(), d(S, { key: 0 }, [
+                  j.value ? (a(), c(Q(j.value), { key: 0 })) : t.canAdd ? (a(), d(S, { key: 1 }, [
+                    t.addBtn ? (a(), d(S, { key: 0 }, [
+                      t.addBtn.modal ? (a(), c(X, v({
+                        key: 0,
+                        body: W.value
+                      }, t.addBtn.modalProps), {
+                        trigger: s(() => [
+                          u(h, v({
+                            icon: t.addBtn.icon || "fluent:add-16-filled",
+                            variant: "secondary",
+                            rounded: "full",
+                            class: "px-6!"
+                          }, t.addBtn.buttonProps), {
+                            default: s(() => [
+                              k(m(B.value), 1)
+                            ]),
+                            _: 1
+                          }, 16, ["icon"])
+                        ]),
+                        _: 1
+                      }, 16, ["body"])) : t.addBtn.to ? (a(), c(ae, {
+                        key: 1,
+                        to: t.addBtn.to,
+                        class: "inline-flex"
+                      }, {
+                        default: s(() => [
+                          u(h, v({
+                            icon: t.addBtn.icon || "fluent:add-16-filled",
+                            variant: "secondary"
+                          }, t.addBtn.buttonProps), {
+                            default: s(() => [
+                              k(m(B.value), 1)
+                            ]),
+                            _: 1
+                          }, 16, ["icon"])
+                        ]),
+                        _: 1
+                      }, 8, ["to"])) : t.addBtn.href ? (a(), d("a", {
+                        key: 2,
+                        href: t.addBtn.href,
+                        target: t.addBtn.target,
+                        class: "inline-flex"
+                      }, [
                         u(h, v({
-                          icon: t.addBtn.icon || "fluent:add-16-filled",
-                          variant: t.addBtn.variant || "outline"
+                          icon: t.addBtn.icon || "lucide:plus",
+                          variant: "secondary"
                         }, t.addBtn.buttonProps), {
-                          default: d(() => [
-                            B(m(b.value), 1)
+                          default: s(() => [
+                            k(m(B.value), 1)
                           ]),
                           _: 1
-                        }, 16, ["icon", "variant"])
-                      ]),
-                      _: 1
-                    }, 8, ["to"])) : t.addBtn.href ? (a(), s("a", {
-                      key: 2,
-                      href: t.addBtn.href,
-                      target: t.addBtn.target,
-                      class: "inline-flex"
-                    }, [
-                      u(h, v({
+                        }, 16, ["icon"])
+                      ], 8, rt)) : (a(), c(h, v({
+                        key: 3,
                         icon: t.addBtn.icon || "lucide:plus",
-                        variant: t.addBtn.variant || "outline"
-                      }, t.addBtn.buttonProps), {
-                        default: d(() => [
-                          B(m(b.value), 1)
+                        variant: "secondary"
+                      }, t.addBtn.buttonProps, {
+                        onClick: n[6] || (n[6] = (o) => t.addBtn.onClick ? t.addBtn.onClick() : e.$emit("add"))
+                      }), {
+                        default: s(() => [
+                          k(m(B.value), 1)
                         ]),
                         _: 1
-                      }, 16, ["icon", "variant"])
-                    ], 8, it)) : (a(), c(h, v({
-                      key: 3,
-                      icon: t.addBtn.icon || "lucide:plus",
-                      variant: t.addBtn.variant || "outline"
-                    }, t.addBtn.buttonProps, {
-                      onClick: n[6] || (n[6] = (o) => t.addBtn.onClick ? t.addBtn.onClick() : e.$emit("add"))
-                    }), {
-                      default: d(() => [
-                        B(m(b.value), 1)
+                      }, 16, ["icon"]))
+                    ], 64)) : (a(), c(h, {
+                      key: 1,
+                      icon: "lucide:plus",
+                      variant: "secondary",
+                      onClick: n[7] || (n[7] = (o) => e.$emit("add"))
+                    }, {
+                      default: s(() => [
+                        k(m(B.value), 1)
                       ]),
                       _: 1
-                    }, 16, ["icon", "variant"]))
-                  ], 64)) : (a(), c(h, {
-                    key: 1,
-                    icon: "lucide:plus",
-                    variant: "outline",
-                    onClick: n[7] || (n[7] = (o) => e.$emit("add"))
-                  }, {
-                    default: d(() => [
-                      B(m(b.value), 1)
-                    ]),
-                    _: 1
-                  }))
-                ], 64)) : f("", !0)
+                    }))
+                  ], 64)) : f("", !0)
+                ], 64))
               ]),
               _: 1
             }, 8, ["title", "titleI18n", "description", "descriptionI18n", "icon"])
-          ]) : (a(), s(P, { key: 1 }, [
-            x(k) === "table" && e.$slots.table ? p(e.$slots, "table", {
+          ]) : (a(), d(S, { key: 1 }, [
+            x(C) === "table" && e.$slots.table ? w(e.$slots, "table", {
               key: 0,
               data: t.data,
               loading: t.loading,
               selectedRows: g.value,
-              delete: D,
+              delete: $,
               updateSelectedRows: (o) => g.value = o
-            }) : x(k) === "list" && e.$slots.list ? p(e.$slots, "list", {
+            }) : x(C) === "list" && e.$slots.list ? w(e.$slots, "list", {
               key: 1,
               data: t.data,
               loading: t.loading,
               selectedRows: g.value,
-              delete: D,
+              delete: $,
               updateSelectedRows: (o) => g.value = o
-            }) : x(k) === "list" && e.$slots.grid ? p(e.$slots, "grid", {
+            }) : x(C) === "list" && e.$slots.grid ? w(e.$slots, "grid", {
               key: 2,
               data: t.data,
               loading: t.loading,
               selectedRows: g.value,
-              delete: D,
+              delete: $,
               updateSelectedRows: (o) => g.value = o
             }) : Z.value ? (a(), c(Q(Z.value), v({
               key: 3,
@@ -531,55 +539,55 @@ const Qe = { class: "flex flex-col w-full space-y-8" }, Xe = { class: "flex flex
               refetch: t.refetch,
               selectedRows: g.value,
               "onUpdate:selectedRows": n[8] || (n[8] = (o) => g.value = o),
-              delete: D,
-              onDelete: de
-            }, t.viewProps), null, 16, ["data", "loading", "refetch", "selectedRows"])) : (a(), s("div", rt, m(be.value), 1))
+              delete: $,
+              onDelete: se
+            }, t.viewProps), null, 16, ["data", "loading", "refetch", "selectedRows"])) : (a(), d("div", dt, m(Be.value), 1))
           ], 64))
         ], 2),
-        t.pagination && t.pageInfo && t.pageInfo.totalPages > 1 ? (a(), s("div", dt, [
-          u(x(Fe), v({
+        t.pagination && t.pageInfo && t.pageInfo.totalPages > 1 ? (a(), d("div", st, [
+          u(x(Me), v({
             "current-page": t.pageInfo.currentPage,
             "total-pages": t.pageInfo.totalPages,
             "total-items": t.pageInfo.totalItems
           }, t.paginationProps, {
-            onChange: se,
-            "onUpdate:itemsPerPage": ce
+            onChange: ce,
+            "onUpdate:itemsPerPage": ue
           }), null, 16, ["current-page", "total-pages", "total-items"])
         ])) : f("", !0),
-        u(Ne, {
-          show: T.value,
-          "onUpdate:show": n[9] || (n[9] = (o) => T.value = o),
-          title: ye.value,
+        u(Fe, {
+          show: V.value,
+          "onUpdate:show": n[9] || (n[9] = (o) => V.value = o),
+          title: pe.value,
           description: we.value,
-          "confirm-text": pe.value,
-          "cancel-text": xe.value,
+          "confirm-text": xe.value,
+          "cancel-text": be.value,
           variant: "danger",
-          onConfirm: re,
-          onCancel: n[10] || (n[10] = (o) => T.value = !1)
+          onConfirm: de,
+          onCancel: n[10] || (n[10] = (o) => V.value = !1)
         }, null, 8, ["show", "title", "description", "confirm-text", "cancel-text"]),
-        j.value ? (a(), c(X, {
+        A.value ? (a(), c(X, {
           key: 3,
-          show: j.value,
-          "onUpdate:show": n[11] || (n[11] = (o) => j.value = o),
+          show: A.value,
+          "onUpdate:show": n[11] || (n[11] = (o) => A.value = o),
           title: U.value,
           "max-width": "sm:max-w-[400px]"
         }, {
-          default: d(({ close: o }) => [
-            u(qe, v({
+          default: s(({ close: o }) => [
+            u(ze, v({
               ref_key: "exportDataRef",
               ref: q,
               data: t.data || [],
-              fields: De.value,
-              mode: Ie.value,
-              "on-export": Te
+              fields: Pe.value,
+              mode: Te.value,
+              "on-export": Ve
             }, typeof t.exportProps == "object" ? t.exportProps : {}, {
               title: U.value,
               class: "hidden!"
             }), null, 16, ["data", "fields", "mode", "title"]),
-            w("div", st, [
-              w("h6", ct, m(x(r)("vlite.exportData.selectFormat") !== "vlite.exportData.selectFormat" ? x(r)("vlite.exportData.selectFormat") : "Select Export Format"), 1),
-              w("div", ut, [
-                (a(!0), s(P, null, Ae(q.value?.availableFormats || [
+            p("div", ct, [
+              p("h6", ut, m(x(r)("vlite.exportData.selectFormat") !== "vlite.exportData.selectFormat" ? x(r)("vlite.exportData.selectFormat") : "Select Export Format"), 1),
+              p("div", ft, [
+                (a(!0), d(S, null, Ae(q.value?.availableFormats || [
                   { value: "excel", label: "Excel (.xlsx)", icon: "lucide:file-spreadsheet" },
                   { value: "csv", label: "CSV (.csv)", icon: "lucide:file-text" },
                   { value: "json", label: "JSON (.json)", icon: "lucide:file-json" }
@@ -587,14 +595,14 @@ const Qe = { class: "flex flex-col w-full space-y-8" }, Xe = { class: "flex flex
                   key: O.value,
                   variant: "outline",
                   class: "w-full flex items-center justify-start gap-3 h-12",
-                  onClick: (mt) => q.value?.exportData(O.value, o)
+                  onClick: (vt) => q.value?.exportData(O.value, o)
                 }, {
-                  default: d(() => [
+                  default: s(() => [
                     u(F, {
                       icon: O.icon,
                       class: "text-muted-foreground h-5 w-5"
                     }, null, 8, ["icon"]),
-                    w("span", null, m(O.label), 1)
+                    p("span", null, m(O.label), 1)
                   ]),
                   _: 2
                 }, 1032, ["onClick"]))), 128))
@@ -603,15 +611,15 @@ const Qe = { class: "flex flex-col w-full space-y-8" }, Xe = { class: "flex flex
           ]),
           _: 1
         }, 8, ["show", "title"])) : f("", !0),
-        te.value ? (a(), s("div", ft, [
-          u(ze, v({
+        te.value ? (a(), d("div", mt, [
+          u(He, v({
             show: z.value,
             "onUpdate:show": n[12] || (n[12] = (o) => z.value = o),
             ref_key: "importDataRef",
-            ref: ke,
-            fields: Pe.value,
-            processBatch: Se,
-            onComplete: $e
+            ref: Ce,
+            fields: Se.value,
+            processBatch: $e,
+            onComplete: Ie
           }, typeof t.importProps == "object" ? t.importProps : {}, {
             title: le.value,
             class: "hidden!"
@@ -622,5 +630,5 @@ const Qe = { class: "flex flex-col w-full space-y-8" }, Xe = { class: "flex flex
   }
 });
 export {
-  Rt as default
+  Et as default
 };