vlite3 0.4.8 → 0.5.2

package/components/Screen/Screen.vue.js

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