vlite3 0.7.4 → 0.7.6

package/components/ColorPicker/ColorIro.vue3.js

@@ -1,5 +1,5 @@
-import o from "./ColorIro.vue2.js";
-/* empty css             */
+import o from "./ColorIro.vue.js";
+/* empty css              */
 export {
   o as default
 };

package/components/ColorPicker/ColorPicker.vue.js

@@ -5,8 +5,8 @@ import O from "../Input.vue.js";
 /* empty css            */
 import "../../core/config.js";
 import y from "../Button.vue.js";
-import E from "./ColorIro.vue2.js";
-/* empty css             */
+import E from "./ColorIro.vue.js";
+/* empty css              */
 import { useEyeDropper as P } from "@vueuse/core";
 const I = {
   key: 0,

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,8 +1,8 @@
-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 N, 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 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 F from "../Icon.vue.js";
+import g from "../Button.vue.js";
+import N from "../Icon.vue.js";
 import Ve from "../Tooltip.vue.js";
 import J from "../Modal.vue.js";
 import Re from "../ConfirmationModal.vue.js";
@@ -82,7 +82,7 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
   },
   emits: ["add", "delete"],
   setup(t, { emit: ee }) {
-    const a = t, $ = Me(), Q = ee;
+    const a = t, I = Me(), Q = ee;
     z(Ue, {
       disableSearch: !0,
       forceSelectable: !0
@@ -90,47 +90,44 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
     const V = Ie(), te = i(() => a.name || a.title || "default-screen"), k = Le(
       `view-mode-${te.value}`,
       a.table || V.table ? "table" : "list"
-    ), S = x(""), R = x({}), C = x(a.pageInfo?.currentPage || 1), E = x(a.pageInfo?.itemsPerPage || a.paginationProps?.itemsPerPage || 10), v = x([]), O = x([]), T = x(!1);
-    z("screen-selected-rows", v), z("screen-request-delete", (e) => D(e));
-    const D = (e) => {
-      O.value = e, T.value = !0;
+    ), $ = 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 = () => {
-      Q("delete", O.value), T.value = !1, v.value = [];
+      Q("delete", E.value), T.value = !1, v.value = [];
     }, le = (e) => {
       Q("delete", e), v.value = [];
     };
     H(
       () => a.pageInfo?.currentPage,
       (e) => {
-        e && (C.value = e);
+        e && (S.value = e);
       }
     ), H(
       () => a.pageInfo?.itemsPerPage,
       (e) => {
-        e && (E.value = e);
+        e && (F.value = e);
       }
     );
     let L = null;
-    H(S, () => {
+    H($, () => {
       L && clearTimeout(L), L = setTimeout(() => {
-        C.value = 1, P();
+        S.value = 1, D();
       }, 300);
     });
     const ne = (e) => {
-      C.value = e, P();
+      S.value = e, D();
     }, oe = (e) => {
-      E.value = e, C.value = 1, P();
-    }, P = () => {
+      F.value = e, S.value = 1, D();
+    }, D = () => {
       const e = {
-        pageinfo: {
-          page: C.value,
-          limit: E.value
-        },
         pagination: {
-          page: C.value,
-          limit: E.value
+          page: S.value,
+          limit: F.value
         },
-        search: S.value,
+        search: $.value,
+        sort: {},
         filter: R.value
       };
       a.refetch && a.refetch(e);
@@ -155,15 +152,15 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
       const e = r("vlite.screen.confirmDeleteTitle");
       return e !== "vlite.screen.confirmDeleteTitle" ? e : "Confirm Deletion";
     }), fe = i(() => {
-      const e = r("vlite.screen.confirmDeleteDesc", { count: O.value.length });
-      return e !== "vlite.screen.confirmDeleteDesc" ? e : `Are you sure you want to delete the selected ${O.value.length > 1 ? "items" : "item"}?`;
+      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"}?`;
     }), 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(() => {
@@ -183,8 +180,8 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
     }), ye = i(() => {
       const e = [];
       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), j = x(!1), q = x(!1), pe = (e) => {
-      e.value === "export" ? j.value = !0 : e.value === "import" && (q.value = !0);
+    }), 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,15 +199,15 @@ 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,
+          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."
@@ -221,7 +218,7 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
       return l(), s("div", qe, [
         t.customHeader ? p(e.$slots, "custom-header", { key: 1 }) : (l(), s("div", {
           key: 0,
-          class: N([t.headerClass, "flex flex-col md:flex-row sm:items-start md:items-center justify-between gap-4"])
+          class: A([t.headerClass, "flex flex-col md:flex-row sm:items-start md:items-center justify-between gap-4"])
         }, [
           y("div", ze, [
             p(e.$slots, "title", {}, () => [
@@ -234,7 +231,7 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
                   placement: "right"
                 }, {
                   default: d(() => [
-                    u(F, {
+                    u(N, {
                       icon: "lucide:info",
                       class: "w-[18px] h-[18px] mt-3! text-muted-foreground hover:text-foreground cursor-pointer transition-colors outline-none"
                     })
@@ -249,42 +246,42 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
           ]),
           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", {
                   onClick: n[1] || (n[1] = (o) => k.value = "list"),
-                  class: N(["p-1.5 rounded", [
+                  class: A(["p-1.5 rounded", [
                     w(k) === "list" ? "bg-secondary/85 dark:bg-secondary shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"
                   ]]),
                   title: de.value
                 }, [
-                  u(F, {
+                  u(N, {
                     icon: "lucide:layout-grid",
                     class: "w-4 h-4"
                   })
                 ], 10, Ge),
                 y("button", {
                   onClick: n[2] || (n[2] = (o) => k.value = "table"),
-                  class: N(["p-1.5 rounded", [
+                  class: A(["p-1.5 rounded", [
                     w(k) === "table" ? "bg-secondary/85 dark:bg-secondary shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"
                   ]]),
                   title: se.value
                 }, [
-                  u(F, {
+                  u(N, {
                     icon: "lucide:list",
                     class: "w-4 h-4"
                   })
                 ], 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,7 +289,7 @@ 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,
@@ -300,13 +297,13 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
                 type: t.filterType,
                 modelValue: R.value,
                 "onUpdate:modelValue": n[3] || (n[3] = (o) => R.value = o),
-                onChange: P
+                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(K(t.addComponent), { key: 0 })) : t.canAdd ? (l(), s(I, { key: 1 }, [
-                  t.addBtn ? (l(), s(I, { key: 0 }, [
-                    t.addBtn.modal ? (l(), c(J, 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"
@@ -347,7 +344,7 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
                       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",
@@ -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!",
@@ -414,7 +411,7 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
         ], 2)),
         p(e.$slots, "sub-header"),
         y("div", {
-          class: N(["flex-1 w-full relative", t.containerClass])
+          class: A(["flex-1 w-full relative", t.containerClass])
         }, [
           !ie.value && !t.loading ? p(e.$slots, "empty", { key: 0 }, () => [
             u(w(Oe), {
@@ -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(K(t.addComponent), { key: 0 })) : t.canAdd ? (l(), s(I, { key: 1 }, [
-                  t.addBtn ? (l(), s(I, { key: 0 }, [
-                    t.addBtn.modal ? (l(), c(J, 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",
@@ -451,7 +448,7 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
                       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,27 +501,27 @@ 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
             }) : X.value ? (l(), c(K(X.value), {
               key: 3,
@@ -533,13 +530,13 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
               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,20 +551,20 @@ 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"]),
-        j.value ? (l(), c(J, {
+        O.value ? (l(), c(J, {
           key: 3,
-          show: j.value,
-          "onUpdate:show": n[11] || (n[11] = (o) => j.value = o),
+          show: O.value,
+          "onUpdate:show": n[11] || (n[11] = (o) => O.value = o),
           title: M.value,
           "max-width": "sm:max-w-[400px]"
         }, {
           default: d(({ close: o }) => [
-            u(Ne, g({
+            u(Ne, h({
               ref_key: "exportDataRef",
               ref: U,
               data: t.data || [],
@@ -581,22 +578,22 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
             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(U.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" }
-                ], (A) => (l(), c(h, {
-                  key: A.value,
+                ], (j) => (l(), c(g, {
+                  key: j.value,
                   variant: "outline",
                   class: "w-full flex items-center justify-start gap-3 h-12",
-                  onClick: (st) => U.value?.exportData(A.value, o)
+                  onClick: (st) => U.value?.exportData(j.value, o)
                 }, {
                   default: d(() => [
-                    u(F, {
-                      icon: A.icon,
+                    u(N, {
+                      icon: j.icon,
                       class: "text-muted-foreground h-5 w-5"
                     }, null, 8, ["icon"]),
-                    y("span", null, f(A.label), 1)
+                    y("span", null, f(j.label), 1)
                   ]),
                   _: 2
                 }, 1032, ["onClick"]))), 128))
@@ -606,7 +603,7 @@ const qe = { class: "flex flex-col w-full space-y-8" }, ze = { class: "flex flex
           _: 1
         }, 8, ["show", "title"])) : m("", !0),
         W.value ? (l(), s("div", rt, [
-          u(Fe, g({
+          u(Fe, h({
             show: q.value,
             "onUpdate:show": n[12] || (n[12] = (o) => q.value = o),
             ref_key: "importDataRef",

package/components/Screen/ScreenFilter.vue.js

@@ -11,7 +11,7 @@ import "v-datepicker-lite";
 import "v-datepicker-lite/style.css";
 import "@jaames/iro";
 import "@vueuse/core";
-/* empty css                          */
+/* empty css                           */
 import "iconify-icon-picker";
 import "iconify-icon-picker/style.css";
 /* empty css                        */

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.4",
+  "version": "0.7.6",
   "type": "module",
   "main": "index.js",
   "module": "index.js",