vlite3 0.7.3 → 0.7.6

package/components/DataTable/DataTable.vue.js

@@ -165,8 +165,9 @@ const Ie = { class: "space-y-6.5" }, Se = { class: "overflow-x-auto w-full" }, T
             page: p.value,
             limit: C.value
           },
-          sorting: { ...d.value },
-          search: w.value
+          sort: { ...d.value },
+          search: w.value,
+          filter: {}
         });
       }, 10);
     };

package/components/DataTable/types.d.ts

@@ -10,16 +10,17 @@ export interface SortConfig {
 }
 export interface TableState {
     pagination: PaginationConfig;
-    sorting: SortConfig;
+    sort: SortConfig;
     search: string;
+    filter: Record<string, any>;
 }
 export interface FilterConfig {
-    search: string;
-    sorting: SortConfig;
     [key: string]: any;
 }
 export interface TableFilter {
     pagination: PaginationConfig;
+    search: string;
+    sort: SortConfig;
     filter: FilterConfig;
 }
 export interface TableHeader {

package/components/Navbar/NavbarTabs.vue.js

@@ -1,13 +1,14 @@
-import { defineComponent as N, ref as f, onMounted as T, nextTick as y, onUnmounted as W, watch as I, openBlock as s, createElementBlock as b, normalizeClass as c, createVNode as v, Transition as L, withCtx as k, createElementVNode as l, createCommentVNode as g, Fragment as j, renderList as A, createBlock as w, unref as _, withModifiers as D, toDisplayString as F } from "vue";
+import { defineComponent as T, ref as f, onMounted as W, nextTick as y, onUnmounted as j, watch as z, openBlock as s, createElementBlock as b, normalizeClass as c, createVNode as v, Transition as L, withCtx as k, createElementVNode as l, createCommentVNode as g, Fragment as A, renderList as _, createBlock as w, unref as S, withModifiers as D, toDisplayString as F } from "vue";
 import { useRoute as H, RouterLink as P } from "vue-router";
 import p from "../Icon.vue.js";
-const U = {
+import { $t as U } from "../../utils/i18n.js";
+const q = {
   key: 0,
   class: "absolute left-0 top-0 bottom-0 z-10 flex items-center pointer-events-none"
-}, q = { class: "truncate" }, G = {
+}, G = { class: "truncate" }, J = {
   key: 0,
   class: "absolute right-0 top-0 bottom-0 z-10 flex items-center justify-end pointer-events-none"
-}, Q = /* @__PURE__ */ N({
+}, Y = /* @__PURE__ */ T({
   __name: "NavbarTabs",
   props: {
     items: {},
@@ -18,32 +19,32 @@ const U = {
     class: { default: "" }
   },
   setup(a) {
-    const n = a, i = f(null), C = f(!1), R = f(!1), u = () => {
+    const n = a, i = f(null), C = f(!1), I = f(!1), u = () => {
       const o = i.value;
-      o && (C.value = o.scrollLeft > 2, R.value = o.scrollLeft + o.clientWidth < o.scrollWidth - 2);
-    }, z = (o) => {
+      o && (C.value = o.scrollLeft > 2, I.value = o.scrollLeft + o.clientWidth < o.scrollWidth - 2);
+    }, R = (o) => {
       const t = i.value;
       if (!t) return;
       const e = t.clientWidth * 0.6;
       t.scrollBy({ left: o === "right" ? e : -e, behavior: "smooth" });
     };
-    T(() => {
+    W(() => {
       y(() => {
         u(), i.value?.addEventListener("scroll", u, { passive: !0 });
       });
-    }), W(() => {
+    }), j(() => {
       i.value?.removeEventListener("scroll", u);
     });
     const h = H();
-    I(
+    z(
       () => h.path,
       () => y(u)
     );
-    const m = f(/* @__PURE__ */ new Map()), S = (o, t) => {
+    const m = f(/* @__PURE__ */ new Map()), $ = (o, t) => {
       const e = o?.$el ?? o;
       e instanceof HTMLElement ? m.value.set(t, e) : m.value.delete(t);
     };
-    I(
+    z(
       () => h.path,
       (o) => {
         y(() => {
@@ -59,16 +60,16 @@ const U = {
       pill: "flex gap-1 p-1 bg-secondary/80 rounded-lg",
       solid: "flex gap-0",
       ghost: "flex gap-1"
-    }, $ = {
+    }, E = {
       sm: "px-2.5 py-1.5 text-xs",
       md: "px-3.5 py-2 text-sm",
       lg: "px-5 py-2.5 text-base"
-    }, E = {
+    }, V = {
       line: "text-primary border-b-2 border-primary -mb-px",
       pill: "bg-background text-foreground shadow-sm",
       solid: "bg-primary-light text-primary-dark",
       ghost: "bg-accent text-accent-foreground"
-    }, V = {
+    }, M = {
       line: "text-muted-foreground border-b-2 border-transparent hover:text-foreground hover:border-border",
       pill: "text-muted-foreground hover:text-foreground hover:bg-accent/50",
       solid: "text-muted-foreground hover:text-foreground hover:bg-accent/50",
@@ -86,23 +87,23 @@ const U = {
         return r === "/" || r === "?" || r === "#" || r === void 0;
       }
       return !1;
-    }, M = (o) => {
-      const t = "group relative inline-flex items-center justify-center gap-2 font-medium whitespace-nowrap shrink-0 select-none cursor-pointer outline-none   focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1", e = o.disabled ? "opacity-50 pointer-events-none cursor-not-allowed" : "", d = x(o) ? n.activeClass || E[n.variant] : n.inactiveClass || V[n.variant];
-      return [t, $[n.size], d, e].filter(Boolean).join(" ");
+    }, N = (o) => {
+      const t = "group relative inline-flex items-center justify-center gap-2 font-medium whitespace-nowrap shrink-0 select-none cursor-pointer outline-none   focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-1", e = o.disabled ? "opacity-50 pointer-events-none cursor-not-allowed" : "", d = x(o) ? n.activeClass || V[n.variant] : n.inactiveClass || M[n.variant];
+      return [t, E[n.size], d, e].filter(Boolean).join(" ");
     };
     return (o, t) => (s(), b("div", {
       class: c(["relative flex items-center w-full min-w-0 border-b", n.class])
     }, [
       v(L, { name: "fade-x" }, {
         default: k(() => [
-          C.value ? (s(), b("div", U, [
+          C.value ? (s(), b("div", q, [
             t[2] || (t[2] = l("div", { class: "w-8 h-full bg-gradient-to-r from-background to-transparent" }, null, -1)),
             l("button", {
               type: "button",
               class: "pointer-events-auto absolute left-0 h-full px-1 flex items-center text-muted-foreground hover:text-foreground transition-colors",
               "aria-label": "Scroll tabs left",
               tabindex: "-1",
-              onClick: t[0] || (t[0] = (e) => z("left"))
+              onClick: t[0] || (t[0] = (e) => R("left"))
             }, [
               v(p, {
                 icon: "lucide:chevron-left",
@@ -123,16 +124,16 @@ const U = {
         ]),
         "aria-label": "Page tabs"
       }, [
-        (s(!0), b(j, null, A(a.items, (e, r) => (s(), w(_(P), {
+        (s(!0), b(A, null, _(a.items, (e, r) => (s(), w(S(P), {
           key: r,
           ref_for: !0,
-          ref: (d) => S(d, r),
+          ref: (d) => $(d, r),
           to: e.to || "",
           role: "tab",
           "aria-selected": x(e),
           "aria-disabled": e.disabled || void 0,
           tabindex: e.disabled ? -1 : 0,
-          class: c(M(e)),
+          class: c(N(e)),
           onClick: D((d) => !e.disabled && e.to && o.$router.push(e.to), ["prevent"])
         }, {
           default: k(() => [
@@ -141,7 +142,7 @@ const U = {
               icon: e.icon,
               class: c(["shrink-0", a.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4"])
             }, null, 8, ["icon", "class"])) : g("", !0),
-            l("span", q, F(e.label), 1),
+            l("span", G, F(e.labelI18n ? S(U)(e.labelI18n) : e.label), 1),
             e.iconRight ? (s(), w(p, {
               key: 1,
               icon: e.iconRight,
@@ -153,14 +154,14 @@ const U = {
       ], 2),
       v(L, { name: "fade-x" }, {
         default: k(() => [
-          R.value ? (s(), b("div", G, [
+          I.value ? (s(), b("div", J, [
             t[3] || (t[3] = l("div", { class: "w-8 h-full bg-gradient-to-l from-background to-transparent" }, null, -1)),
             l("button", {
               type: "button",
               class: "pointer-events-auto absolute right-0 h-full px-1 flex items-center text-muted-foreground hover:text-foreground transition-colors",
               "aria-label": "Scroll tabs right",
               tabindex: "-1",
-              onClick: t[1] || (t[1] = (e) => z("right"))
+              onClick: t[1] || (t[1] = (e) => R("right"))
             }, [
               v(p, {
                 icon: "lucide:chevron-right",
@@ -175,5 +176,5 @@ const U = {
   }
 });
 export {
-  Q as default
+  Y as default
 };

package/components/Screen/Screen.vue.js

@@ -1,10 +1,10 @@
-import { defineComponent as Pe, provide as q, useSlots as Ie, computed as i, ref as x, watch as z, resolveComponent as $e, openBlock as l, createElementBlock as s, normalizeClass as A, createElementVNode as y, renderSlot as p, toDisplayString as f, createBlock as c, withCtx as d, createVNode as u, createCommentVNode as m, unref as w, resolveDynamicComponent as H, Fragment as I, mergeProps as g, createTextVNode as B, renderList as Se } from "vue";
+import { defineComponent as Pe, provide as z, useSlots as Ie, computed as i, ref as x, watch as H, resolveComponent as $e, openBlock as l, createElementBlock as s, normalizeClass as A, createElementVNode as y, renderSlot as p, toDisplayString as f, createBlock as c, withCtx as d, createVNode as u, createCommentVNode as m, unref as w, resolveDynamicComponent as K, Fragment as P, mergeProps as h, createTextVNode as B, renderList as Se } from "vue";
 import Te from "../Input.vue.js";
 /* empty css            */
-import h from "../Button.vue.js";
+import g from "../Button.vue.js";
 import N from "../Icon.vue.js";
 import Ve from "../Tooltip.vue.js";
-import K from "../Modal.vue.js";
+import J from "../Modal.vue.js";
 import Re from "../ConfirmationModal.vue.js";
 import Ee from "../Pagination/Pagination.vue.js";
 import Oe from "../Empty/Empty.vue.js";
@@ -81,60 +81,57 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
     headerClass: {}
   },
   emits: ["add", "delete"],
-  setup(t, { emit: _ }) {
-    const a = t, $ = Me(), J = _;
-    q(Ue, {
+  setup(t, { emit: ee }) {
+    const a = t, I = Me(), Q = ee;
+    z(Ue, {
       disableSearch: !0,
       forceSelectable: !0
     });
-    const ee = Ie(), te = i(() => a.name || a.title || "default-screen"), k = Le(
+    const V = Ie(), te = i(() => a.name || a.title || "default-screen"), k = Le(
       `view-mode-${te.value}`,
-      a.table || ee.table ? "table" : "list"
-    ), S = x(""), V = x({}), C = x(a.pageInfo?.currentPage || 1), R = x(a.pageInfo?.itemsPerPage || a.paginationProps?.itemsPerPage || 10), v = x([]), E = x([]), T = x(!1);
-    q("screen-selected-rows", v), q("screen-request-delete", (e) => D(e));
-    const D = (e) => {
+      a.table || V.table ? "table" : "list"
+    ), $ = x(""), R = x({}), S = x(a.pageInfo?.currentPage || 1), F = x(a.pageInfo?.itemsPerPage || a.paginationProps?.itemsPerPage || 10), v = x([]), E = x([]), T = x(!1);
+    z("screen-selected-rows", v), z("screen-request-delete", (e) => C(e));
+    const C = (e) => {
       E.value = e, T.value = !0;
     }, ae = () => {
-      J("delete", E.value), T.value = !1, v.value = [];
+      Q("delete", E.value), T.value = !1, v.value = [];
     }, le = (e) => {
-      J("delete", e), v.value = [];
+      Q("delete", e), v.value = [];
     };
-    z(
+    H(
       () => a.pageInfo?.currentPage,
       (e) => {
-        e && (C.value = e);
+        e && (S.value = e);
       }
-    ), z(
+    ), H(
       () => a.pageInfo?.itemsPerPage,
       (e) => {
-        e && (R.value = e);
+        e && (F.value = e);
       }
     );
-    let F = null;
-    z(S, () => {
-      F && clearTimeout(F), F = setTimeout(() => {
-        C.value = 1, P();
+    let L = null;
+    H($, () => {
+      L && clearTimeout(L), L = setTimeout(() => {
+        S.value = 1, D();
       }, 300);
     });
     const ne = (e) => {
-      C.value = e, P();
+      S.value = e, D();
     }, oe = (e) => {
-      R.value = e, C.value = 1, P();
-    }, P = () => {
+      F.value = e, S.value = 1, D();
+    }, D = () => {
       const e = {
-        pageinfo: {
-          page: C.value,
-          limit: R.value
-        },
         pagination: {
-          page: C.value,
-          limit: R.value
+          page: S.value,
+          limit: F.value
         },
-        search: S.value,
-        filter: V.value
+        search: $.value,
+        sort: {},
+        filter: R.value
       };
       a.refetch && a.refetch(e);
-    }, Q = i(() => k.value === "table" && a.table ? a.table : a.list), ie = i(() => a.data && a.data.length > 0), X = i(() => a.titleI18n ? r(a.titleI18n) : a.title), Y = i(
+    }, X = i(() => k.value === "table" ? a.table || !!V.table : a.list || !!V.list || !!V.grid), ie = i(() => a.data && a.data.length > 0), Y = i(() => a.titleI18n ? r(a.titleI18n) : a.title), G = i(
       () => a.descriptionI18n ? r(a.descriptionI18n) : a.description
     ), re = i(() => {
       const e = r("vlite.screen.deleteSelected");
@@ -160,10 +157,10 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
     }), ve = i(() => {
       const e = r("vlite.screen.confirmDeleteBtn");
       return e !== "vlite.screen.confirmDeleteBtn" ? e : "Delete";
-    }), ge = i(() => {
+    }), he = i(() => {
       const e = r("vlite.screen.cancelBtn");
       return e !== "vlite.screen.cancelBtn" ? e : "Cancel";
-    }), he = i(() => {
+    }), ge = i(() => {
       const e = r("vlite.screen.missingView");
       return e !== "vlite.screen.missingView" ? e : "Please provide a `:list` or `:table` component or slot.";
     }), b = i(() => {
@@ -171,20 +168,20 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
       if (a.addBtn?.label) return a.addBtn.label;
       const e = r("vlite.screen.addNew");
       return e !== "vlite.screen.addNew" ? e : "Add New";
-    }), G = i(() => {
+    }), W = i(() => {
       const e = a.exportSchema && a.exportSchema.length > 0 && a.exportProps !== !1, n = a.importSchema && a.importSchema.length > 0 && a.importProps !== !1;
       return e || n;
-    }), L = i(() => {
+    }), M = i(() => {
       const e = r("vlite.screen.exportData");
       return e !== "vlite.screen.exportData" ? e : "Export Data";
-    }), W = i(() => {
+    }), Z = i(() => {
       const e = r("vlite.screen.importData");
       return e !== "vlite.screen.importData" ? e : "Import Data";
     }), ye = i(() => {
       const e = [];
-      return a.exportProps !== !1 && e.push({ value: "export", label: L.value, icon: "lucide:download" }), a.importProps !== !1 && e.push({ value: "import", label: W.value, icon: "lucide:upload" }), e;
-    }), M = x(null), xe = x(null), O = x(!1), U = x(!1), pe = (e) => {
-      e.value === "export" ? O.value = !0 : e.value === "import" && (U.value = !0);
+      return a.exportProps !== !1 && e.push({ value: "export", label: M.value, icon: "lucide:download" }), a.importProps !== !1 && e.push({ value: "import", label: Z.value, icon: "lucide:upload" }), e;
+    }), U = x(null), xe = x(null), O = x(!1), q = x(!1), pe = (e) => {
+      e.value === "export" ? O.value = !0 : e.value === "import" && (q.value = !0);
     }, we = i(() => a.exportSchema ? a.exportSchema.map((e) => ({
       field: e.name || e.field,
       title: e.label || e.title || e.name || e.field
@@ -192,7 +189,7 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
       field: e.name || e.field,
       title: e.label || e.title || e.name || e.field,
       required: e.required || !1
-    })) : []), Be = async (e) => $?.services?.importApi && a.importType ? await $.services.importApi(a.importType, e) : (console.warn(
+    })) : []), Be = async (e) => I?.services?.importApi && a.importType ? await I.services.importApi(a.importType, e) : (console.warn(
       "VLite Screen: No importApi configured or no importType provided for generic import."
     ), {
       processed: e.data.length,
@@ -202,22 +199,22 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
       failed: 0,
       errors: []
     }), ke = () => {
-      P();
-    }, Ce = i(() => a.exportMode || $?.exportData?.mode || "frontend"), De = async (e) => {
-      if ($?.services?.exportApi && a.exportType) {
+      D();
+    }, Ce = i(() => a.exportMode || I?.exportData?.mode || "frontend"), De = async (e) => {
+      if (I?.services?.exportApi && a.exportType) {
         const n = {
           format: e,
-          search: S.value,
-          filter: V.value
+          search: $.value,
+          filter: R.value
         };
-        await $.services.exportApi(a.exportType, n);
+        await I.services.exportApi(a.exportType, n);
       } else
         console.warn(
           "VLite Screen: No exportApi configured or no exportType provided for generic backend export."
         );
     };
     return (e, n) => {
-      const Z = $e("router-link");
+      const _ = $e("router-link");
       return l(), s("div", qe, [
         t.customHeader ? p(e.$slots, "custom-header", { key: 1 }) : (l(), s("div", {
           key: 0,
@@ -225,8 +222,8 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
         }, [
           y("div", ze, [
             p(e.$slots, "title", {}, () => [
-              X.value ? (l(), s("div", He, [
-                y("h1", Ke, f(X.value), 1),
+              Y.value ? (l(), s("div", He, [
+                y("h1", Ke, f(Y.value), 1),
                 t.info || t.infoI18n ? (l(), c(Ve, {
                   key: 0,
                   content: t.info,
@@ -244,18 +241,18 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
               ])) : m("", !0)
             ]),
             p(e.$slots, "description", {}, () => [
-              Y.value ? (l(), s("p", Je, f(Y.value), 1)) : m("", !0)
+              G.value ? (l(), s("p", Je, f(G.value), 1)) : m("", !0)
             ])
           ]),
           y("div", Qe, [
             y("div", Xe, [
-              v.value.length > 0 ? (l(), c(h, {
+              v.value.length > 0 ? (l(), c(g, {
                 key: 0,
                 variant: "outline",
                 class: "hover:bg-destructive/10 shrink-0 h-9! w-9!",
                 icon: "lucide:trash-2",
                 title: re.value,
-                onClick: n[0] || (n[0] = (o) => D(v.value))
+                onClick: n[0] || (n[0] = (o) => C(v.value))
               }, null, 8, ["title"])) : m("", !0),
               (t.table || e.$slots.table) && (t.list || e.$slots.list || e.$slots.grid) ? (l(), s("div", Ye, [
                 y("button", {
@@ -284,7 +281,7 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
                 ], 10, We)
               ])) : m("", !0),
               p(e.$slots, "before-search"),
-              t.showRefresh ? (l(), c(h, {
+              t.showRefresh ? (l(), c(g, {
                 key: 2,
                 variant: "outline",
                 icon: "lucide:refresh-cw",
@@ -292,21 +289,21 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
                 class: "shrink-0 h-9! w-9!",
                 title: ce.value,
                 disabled: t.loading,
-                onClick: P
+                onClick: D
               }, null, 8, ["title", "disabled"])) : m("", !0),
               t.filterSchema && t.filterSchema.length > 0 ? (l(), c(je, {
                 key: 3,
                 schema: t.filterSchema,
                 type: t.filterType,
-                modelValue: V.value,
-                "onUpdate:modelValue": n[3] || (n[3] = (o) => V.value = o),
-                onChange: P
+                modelValue: R.value,
+                "onUpdate:modelValue": n[3] || (n[3] = (o) => R.value = o),
+                onChange: D
               }, null, 8, ["schema", "type", "modelValue"])) : m("", !0),
               t.canSearch ? (l(), s("div", Ze, [
                 u(Te, {
                   lazy: "",
-                  modelValue: S.value,
-                  "onUpdate:modelValue": n[4] || (n[4] = (o) => S.value = o),
+                  modelValue: $.value,
+                  "onUpdate:modelValue": n[4] || (n[4] = (o) => $.value = o),
                   icon: "lucide:search",
                   placeholder: ue.value,
                   variant: "outline",
@@ -317,9 +314,9 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
             ]),
             y("div", _e, [
               p(e.$slots, "actions", {}, () => [
-                t.addComponent ? (l(), c(H(t.addComponent), { key: 0 })) : t.canAdd ? (l(), s(I, { key: 1 }, [
-                  t.addBtn ? (l(), s(I, { key: 0 }, [
-                    t.addBtn.modal ? (l(), c(K, g({
+                t.addComponent ? (l(), c(K(t.addComponent), { key: 0 })) : t.canAdd ? (l(), s(P, { key: 1 }, [
+                  t.addBtn ? (l(), s(P, { key: 0 }, [
+                    t.addBtn.modal ? (l(), c(J, h({
                       key: 0,
                       body: t.addBtn.modal
                     }, t.addBtn.modalProps, {
@@ -329,7 +326,7 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
                       loading: t.loading
                     }), {
                       trigger: d(() => [
-                        u(h, g({
+                        u(g, h({
                           class: "w-full",
                           icon: t.addBtn.icon || "fluent:add-16-filled",
                           variant: t.addBtn.variant || "primary"
@@ -341,13 +338,13 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
                         }, 16, ["icon", "variant"])
                       ]),
                       _: 1
-                    }, 16, ["body", "refetch", "data", "loading"])) : t.addBtn.to ? (l(), c(Z, {
+                    }, 16, ["body", "refetch", "data", "loading"])) : t.addBtn.to ? (l(), c(_, {
                       key: 1,
                       to: t.addBtn.to,
                       class: "inline-flex w-full sm:w-auto"
                     }, {
                       default: d(() => [
-                        u(h, g({
+                        u(g, h({
                           class: "w-full",
                           icon: t.addBtn.icon || "fluent:add-16-filled",
                           variant: t.addBtn.variant || "primary"
@@ -365,7 +362,7 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
                       target: t.addBtn.target,
                       class: "inline-flex w-full sm:w-auto"
                     }, [
-                      u(h, g({
+                      u(g, h({
                         class: "w-full",
                         icon: t.addBtn.icon || "fluent:add-16-filled",
                         variant: t.addBtn.variant || "primary"
@@ -375,7 +372,7 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
                         ]),
                         _: 1
                       }, 16, ["icon", "variant"])
-                    ], 8, et)) : (l(), c(h, g({
+                    ], 8, et)) : (l(), c(g, h({
                       key: 3,
                       class: "w-full sm:w-auto",
                       icon: t.addBtn.icon || "fluent:add-16-filled",
@@ -391,7 +388,7 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
                   ], 64)) : m("", !0)
                 ], 64)) : m("", !0)
               ]),
-              G.value ? (l(), c(Ae, {
+              W.value ? (l(), c(Ae, {
                 key: 0,
                 closeOnSelect: "",
                 position: "bottom-end",
@@ -399,7 +396,7 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
                 onOnSelect: pe
               }, {
                 trigger: d(() => [
-                  u(h, {
+                  u(g, {
                     variant: "outline",
                     icon: "lucide:more-vertical",
                     class: "px-2!",
@@ -425,14 +422,14 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
               icon: t.emptyIcon
             }, {
               action: d(() => [
-                t.addComponent ? (l(), c(H(t.addComponent), { key: 0 })) : t.canAdd ? (l(), s(I, { key: 1 }, [
-                  t.addBtn ? (l(), s(I, { key: 0 }, [
-                    t.addBtn.modal ? (l(), c(K, g({
+                t.addComponent ? (l(), c(K(t.addComponent), { key: 0 })) : t.canAdd ? (l(), s(P, { key: 1 }, [
+                  t.addBtn ? (l(), s(P, { key: 0 }, [
+                    t.addBtn.modal ? (l(), c(J, h({
                       key: 0,
                       body: t.addBtn.modal
                     }, t.addBtn.modalProps), {
                       trigger: d(() => [
-                        u(h, g({
+                        u(g, h({
                           icon: t.addBtn.icon || "fluent:add-16-filled",
                           variant: t.addBtn.variant || "primary",
                           rounded: "full",
@@ -445,13 +442,13 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
                         }, 16, ["icon", "variant"])
                       ]),
                       _: 1
-                    }, 16, ["body"])) : t.addBtn.to ? (l(), c(Z, {
+                    }, 16, ["body"])) : t.addBtn.to ? (l(), c(_, {
                       key: 1,
                       to: t.addBtn.to,
                       class: "inline-flex"
                     }, {
                       default: d(() => [
-                        u(h, g({
+                        u(g, h({
                           icon: t.addBtn.icon || "fluent:add-16-filled",
                           variant: t.addBtn.variant || "outline"
                         }, t.addBtn.buttonProps), {
@@ -468,7 +465,7 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
                       target: t.addBtn.target,
                       class: "inline-flex"
                     }, [
-                      u(h, g({
+                      u(g, h({
                         icon: t.addBtn.icon || "lucide:plus",
                         variant: t.addBtn.variant || "outline"
                       }, t.addBtn.buttonProps), {
@@ -477,7 +474,7 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
                         ]),
                         _: 1
                       }, 16, ["icon", "variant"])
-                    ], 8, tt)) : (l(), c(h, g({
+                    ], 8, tt)) : (l(), c(g, h({
                       key: 3,
                       icon: t.addBtn.icon || "lucide:plus",
                       variant: t.addBtn.variant || "outline"
@@ -489,7 +486,7 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
                       ]),
                       _: 1
                     }, 16, ["icon", "variant"]))
-                  ], 64)) : (l(), c(h, {
+                  ], 64)) : (l(), c(g, {
                     key: 1,
                     icon: "lucide:plus",
                     variant: "outline",
@@ -504,42 +501,42 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
               ]),
               _: 1
             }, 8, ["title", "titleI18n", "description", "descriptionI18n", "icon"])
-          ]) : (l(), s(I, { key: 1 }, [
+          ]) : (l(), s(P, { key: 1 }, [
             w(k) === "table" && e.$slots.table ? p(e.$slots, "table", {
               key: 0,
               data: t.data,
               loading: t.loading,
               selectedRows: v.value,
-              delete: D,
+              delete: C,
               updateSelectedRows: (o) => v.value = o
             }) : w(k) === "list" && e.$slots.list ? p(e.$slots, "list", {
               key: 1,
               data: t.data,
               loading: t.loading,
               selectedRows: v.value,
-              delete: D,
+              delete: C,
               updateSelectedRows: (o) => v.value = o
             }) : w(k) === "list" && e.$slots.grid ? p(e.$slots, "grid", {
               key: 2,
               data: t.data,
               loading: t.loading,
               selectedRows: v.value,
-              delete: D,
+              delete: C,
               updateSelectedRows: (o) => v.value = o
-            }) : Q.value ? (l(), c(H(Q.value), {
+            }) : X.value ? (l(), c(K(X.value), {
               key: 3,
               data: t.data,
               loading: t.loading,
               refetch: t.refetch,
               selectedRows: v.value,
               "onUpdate:selectedRows": n[8] || (n[8] = (o) => v.value = o),
-              delete: D,
+              delete: C,
               onDelete: le
-            }, null, 40, ["data", "loading", "refetch", "selectedRows"])) : (l(), s("div", at, f(he.value), 1))
+            }, null, 40, ["data", "loading", "refetch", "selectedRows"])) : (l(), s("div", at, f(ge.value), 1))
           ], 64))
         ], 2),
         t.pagination && t.pageInfo && t.pageInfo.totalPages > 1 ? (l(), s("div", lt, [
-          u(w(Ee), g({
+          u(w(Ee), h({
             "current-page": t.pageInfo.currentPage,
             "total-pages": t.pageInfo.totalPages,
             "total-items": t.pageInfo.totalItems
@@ -554,42 +551,42 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
           title: me.value,
           description: fe.value,
           "confirm-text": ve.value,
-          "cancel-text": ge.value,
+          "cancel-text": he.value,
           variant: "danger",
           onConfirm: ae,
           onCancel: n[10] || (n[10] = (o) => T.value = !1)
         }, null, 8, ["show", "title", "description", "confirm-text", "cancel-text"]),
-        O.value ? (l(), c(K, {
+        O.value ? (l(), c(J, {
           key: 3,
           show: O.value,
           "onUpdate:show": n[11] || (n[11] = (o) => O.value = o),
-          title: L.value,
+          title: M.value,
           "max-width": "sm:max-w-[400px]"
         }, {
           default: d(({ close: o }) => [
-            u(Ne, g({
+            u(Ne, h({
               ref_key: "exportDataRef",
-              ref: M,
+              ref: U,
               data: t.data || [],
               fields: we.value,
               mode: Ce.value,
               "on-export": De
             }, typeof t.exportProps == "object" ? t.exportProps : {}, {
-              title: L.value,
+              title: M.value,
               class: "hidden!"
             }), null, 16, ["data", "fields", "mode", "title"]),
             y("div", nt, [
               y("h6", ot, f(w(r)("vlite.exportData.selectFormat") !== "vlite.exportData.selectFormat" ? w(r)("vlite.exportData.selectFormat") : "Select Export Format"), 1),
               y("div", it, [
-                (l(!0), s(I, null, Se(M.value?.availableFormats || [
+                (l(!0), s(P, null, Se(U.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" }
-                ], (j) => (l(), c(h, {
+                ], (j) => (l(), c(g, {
                   key: j.value,
                   variant: "outline",
                   class: "w-full flex items-center justify-start gap-3 h-12",
-                  onClick: (st) => M.value?.exportData(j.value, o)
+                  onClick: (st) => U.value?.exportData(j.value, o)
                 }, {
                   default: d(() => [
                     u(N, {
@@ -605,17 +602,17 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
           ]),
           _: 1
         }, 8, ["show", "title"])) : m("", !0),
-        G.value ? (l(), s("div", rt, [
-          u(Fe, g({
-            show: U.value,
-            "onUpdate:show": n[12] || (n[12] = (o) => U.value = o),
+        W.value ? (l(), s("div", rt, [
+          u(Fe, h({
+            show: q.value,
+            "onUpdate:show": n[12] || (n[12] = (o) => q.value = o),
             ref_key: "importDataRef",
             ref: xe,
             fields: be.value,
             processBatch: Be,
             onComplete: ke
           }, typeof t.importProps == "object" ? t.importProps : {}, {
-            title: W.value,
+            title: Z.value,
             class: "hidden!"
           }), null, 16, ["show", "fields", "title"])
         ])) : m("", !0)

package/components/Screen/types.d.ts

@@ -31,15 +31,12 @@ export interface ScreenProps {
     data?: any[];
     loading?: boolean;
     refetch?: (payload: {
-        pageinfo: {
-            page: number;
-            limit: number;
-        };
         pagination: {
             page: number;
             limit: number;
         };
         search: string;
+        sort: Record<string, any>;
         filter: Record<string, any>;
     }) => void;
     paginationProps?: ScreenPaginationProps;

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "description": "A Vue 3 UI component library built with Tailwind CSS.",
   "license": "MIT",
-  "version": "0.7.3",
+  "version": "0.7.6",
   "type": "module",
   "main": "index.js",
   "module": "index.js",