vlite3 0.6.1 → 0.6.4

package/components/Modal.vue2.js

@@ -1,14 +1,14 @@
-import { defineComponent as N, ref as u, watch as g, provide as P, nextTick as V, onUnmounted as j, computed as x, openBlock as s, createElementBlock as r, Fragment as K, createElementVNode as d, mergeProps as C, withModifiers as w, renderSlot as f, createCommentVNode as c, createBlock as $, Teleport as M, createVNode as B, Transition as R, withCtx as W, normalizeClass as a, toDisplayString as T, resolveDynamicComponent as A } from "vue";
-import F from "./Button.vue.js";
-import { useKeyStroke as U } from "../composables/useKeyStroke.js";
-import { $t as I } from "../utils/i18n.js";
-const q = {
+import { defineComponent as M, ref as f, inject as N, watch as x, provide as P, nextTick as V, onMounted as K, onUnmounted as R, computed as C, openBlock as n, createElementBlock as d, Fragment as W, createElementVNode as c, mergeProps as w, withModifiers as T, renderSlot as m, createCommentVNode as u, createBlock as $, Teleport as A, createVNode as B, Transition as F, withCtx as U, normalizeClass as a, toDisplayString as I, resolveDynamicComponent as q } from "vue";
+import G from "./Button.vue.js";
+import { useKeyStroke as H } from "../composables/useKeyStroke.js";
+import { $t as S } from "../utils/i18n.js";
+const J = {
   key: 0,
   class: "flex-none flex flex-col space-y-1.5 pb-0 border-b border-border/90"
-}, G = { class: "text-lg font-semibold leading-none tracking-tight" }, H = {
+}, L = { class: "text-lg font-semibold leading-none tracking-tight" }, Q = {
   key: 0,
   class: "text-sm text-muted-foreground mb-6.5"
-}, Y = /* @__PURE__ */ N({
+}, ee = /* @__PURE__ */ M({
   inheritAttrs: !1,
   __name: "Modal",
   props: {
@@ -28,51 +28,54 @@ const q = {
     bodyProps: {}
   },
   emits: ["close", "update:show", "onOpen"],
-  setup(t, { emit: S }) {
-    const o = t, m = S, n = u(o.show), b = u(!1), y = u(!1), p = u(null);
+  setup(o, { emit: O }) {
+    const t = o, y = O, l = f(t.show), p = f(!1), b = f(!1), v = f(null);
     let i = null;
-    g(
-      () => o.show,
+    const r = N("dropdown-context", null);
+    x(
+      () => t.show,
       (e) => {
-        n.value = e, e && m("onOpen");
+        l.value = e, e && (y("onOpen"), r?.close());
       }
     );
-    const O = () => {
-      n.value = !0;
+    const j = () => {
+      l.value = !0, r?.close();
     }, z = (e) => {
-      b.value = e;
-    }, l = () => {
-      if (b.value) {
-        y.value = !0, i && clearTimeout(i), i = setTimeout(() => {
-          y.value = !1;
+      p.value = e;
+    }, s = () => {
+      if (p.value) {
+        b.value = !0, i && clearTimeout(i), i = setTimeout(() => {
+          b.value = !1;
         }, 1e3);
         return;
       }
-      n.value = !1, m("update:show", !1), m("close");
+      l.value = !1, y("update:show", !1), y("close");
     };
-    P("modal-context", { close: l, setSubmitting: z });
+    P("modal-context", { close: s, setSubmitting: z });
     const D = () => {
-      o.closeOutside && l();
-    }, { onKeyStroke: E } = U();
-    E("Escape", l), g(n, async (e) => {
-      e ? (document.body.style.overflow = "hidden", await V(), p.value?.focus()) : document.body.style.overflow = "";
-    }), j(() => {
-      document.body.style.overflow = "", i && clearTimeout(i);
+      t.closeOutside && s();
+    }, { onKeyStroke: E } = H();
+    E("Escape", s), x(l, async (e) => {
+      r?.onChildToggle?.(e), e ? (document.body.style.overflow = "hidden", await V(), v.value?.focus()) : document.body.style.overflow = "";
+    }), K(() => {
+      l.value && r?.onChildToggle?.(!0);
+    }), R(() => {
+      l.value && r?.onChildToggle?.(!1), document.body.style.overflow = "", i && clearTimeout(i);
     });
-    const v = x(() => o.titleI18n ? I(o.titleI18n) : o.title), h = x(
-      () => o.descriptionI18n ? I(o.descriptionI18n) : o.description
+    const h = C(() => t.titleI18n ? S(t.titleI18n) : t.title), g = C(
+      () => t.descriptionI18n ? S(t.descriptionI18n) : t.description
     );
-    return (e, k) => (s(), r(K, null, [
-      d("span", C({
-        onClick: w(O, ["stop"]),
-        class: `${t.triggerClass}`
+    return (e, k) => (n(), d(W, null, [
+      c("span", w({
+        onClick: T(j, ["stop"]),
+        class: `${o.triggerClass}`
       }, e.$attrs), [
-        f(e.$slots, "trigger", {}, () => [
-          t.body ? f(e.$slots, "default", { key: 0 }, void 0, !0) : c("", !0)
+        m(e.$slots, "trigger", {}, () => [
+          o.body ? m(e.$slots, "default", { key: 0 }, void 0, !0) : u("", !0)
         ], !0)
       ], 16),
-      (s(), $(M, { to: "body" }, [
-        B(R, {
+      (n(), $(A, { to: "body" }, [
+        B(F, {
           "enter-active-class": "transition duration-200 ease-out",
           "enter-from-class": "opacity-0",
           "enter-to-class": "opacity-100",
@@ -80,52 +83,52 @@ const q = {
           "leave-from-class": "opacity-100",
           "leave-to-class": "opacity-0"
         }, {
-          default: W(() => [
-            n.value ? (s(), r("div", {
+          default: U(() => [
+            l.value ? (n(), d("div", {
               key: 0,
-              class: a(["fixed inset-0 z-50 flex items-center justify-center bg-[#00000051] p-4", t.backdrop && "backdrop-blur-[2px]"]),
+              class: a(["fixed inset-0 z-50 flex items-center justify-center bg-[#00000051] p-4 v-modal-overlay", o.backdrop && "backdrop-blur-[2px]"]),
               onClick: D
             }, [
-              d("div", {
+              c("div", {
                 ref_key: "modalRef",
-                ref: p,
+                ref: v,
                 tabindex: "-1",
-                class: a(["modal-body relative w-full rounded border border-border/60 bg-body shadow-lg text-foreground flex flex-col max-h-[85vh] sm:max-h-[90vh] focus:outline-none", [t.maxWidth]]),
-                onClick: k[0] || (k[0] = w(() => {
+                class: a(["modal-body relative w-full rounded border border-border/60 bg-body shadow-lg text-foreground flex flex-col max-h-[85vh] sm:max-h-[90vh] focus:outline-none", [o.maxWidth]]),
+                onClick: k[0] || (k[0] = T(() => {
                 }, ["stop"]))
               }, [
-                v.value ? (s(), r("div", q, [
-                  d("div", {
-                    class: a(["flex items-center justify-between py-2 px-4 rounded-t-md", t.headerClass])
+                h.value ? (n(), d("div", J, [
+                  c("div", {
+                    class: a(["flex items-center justify-between py-2 px-4 rounded-t-md", o.headerClass])
                   }, [
-                    d("h3", G, T(v.value), 1),
-                    B(F, {
+                    c("h3", L, I(h.value), 1),
+                    B(G, {
                       rounded: "full",
                       size: "sm",
                       icon: "lucide:x",
                       variant: "ghost",
-                      class: a(["hover:bg-gray-250/25! transition-all", { "blink-bg": y.value }]),
-                      onClick: l
+                      class: a(["hover:bg-gray-250/25! transition-all", { "blink-bg": b.value }]),
+                      onClick: s
                     }, null, 8, ["class"])
                   ], 2)
-                ])) : c("", !0),
-                d("div", {
-                  class: a(["flex-1 overflow-y-auto px-4 pt-4 pb-3.5 min-h-0", t.bodyClass])
+                ])) : u("", !0),
+                c("div", {
+                  class: a(["flex-1 overflow-y-auto px-4 pt-4 pb-3.5 min-h-0", o.bodyClass])
                 }, [
-                  h.value ? (s(), r("p", H, T(h.value), 1)) : c("", !0),
-                  t.body ? (s(), $(A(t.body), C({ key: 1 }, { ...t.bodyProps, ...e.$attrs }, { close: l }), null, 16)) : f(e.$slots, "default", {
+                  g.value ? (n(), d("p", Q, I(g.value), 1)) : u("", !0),
+                  o.body ? (n(), $(q(o.body), w({ key: 1 }, { ...o.bodyProps, ...e.$attrs }, { close: s }), null, 16)) : m(e.$slots, "default", {
                     key: 2,
-                    close: l
+                    close: s
                   }, void 0, !0)
                 ], 2),
-                e.$slots.footer ? (s(), r("div", {
+                e.$slots.footer ? (n(), d("div", {
                   key: 1,
-                  class: a([t.footerClass, "flex-none flex items-center px-4 py-3 border-t border-border/75 rounded-b-xl bg-body"])
+                  class: a([o.footerClass, "flex-none flex items-center px-4 py-3 border-t border-border/75 rounded-b-xl bg-body"])
                 }, [
-                  f(e.$slots, "footer", { close: l }, void 0, !0)
-                ], 2)) : c("", !0)
+                  m(e.$slots, "footer", { close: s }, void 0, !0)
+                ], 2)) : u("", !0)
               ], 2)
-            ], 2)) : c("", !0)
+            ], 2)) : u("", !0)
           ]),
           _: 3
         })
@@ -134,5 +137,5 @@ const q = {
   }
 });
 export {
-  Y as default
+  ee as default
 };

package/components/Navbar/NavbarTabs.vue.js

@@ -70,9 +70,9 @@ const U = {
       ghost: "bg-accent text-accent-foreground"
     }, V = {
       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/60",
-      solid: "text-muted-foreground hover:text-foreground hover:bg-accent",
-      ghost: "text-muted-foreground hover:text-foreground hover:bg-accent/60"
+      pill: "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+      solid: "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+      ghost: "text-muted-foreground hover:text-foreground hover:bg-accent/50"
     }, x = (o) => {
       const t = h.path;
       if (!o.to) return !1;

package/components/Pagination/Pagination.vue.d.ts

@@ -10,6 +10,7 @@ declare const _default: import('vue').DefineComponent<PaginationProps, {}, {}, {
     "onUpdate:itemsPerPage"?: (value: number) => any;
     "onChange:itemsPerPage"?: (value: number) => any;
 }>, {
+    rounded: import('.').PaginationRounded;
     disabled: boolean;
     itemsPerPage: number;
     currentPage: number;
@@ -19,5 +20,6 @@ declare const _default: import('vue').DefineComponent<PaginationProps, {}, {}, {
     showItemsPerPage: boolean;
     itemsPerPageOptions: number[];
     navType: "text" | "icon";
+    activeVariant: import('.').PaginationVariant;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/components/Pagination/Pagination.vue.js

@@ -1,26 +1,26 @@
-import { defineComponent as A, computed as u, openBlock as i, createElementBlock as r, normalizeClass as z, createElementVNode as g, toDisplayString as l, Fragment as b, renderList as j, createVNode as x, createCommentVNode as f, createTextVNode as y, createBlock as w, withCtx as I } from "vue";
-import F from "../Icon.vue.js";
-import d from "../Button.vue.js";
-import { $t as h } from "../../utils/i18n.js";
-const q = {
+import { defineComponent as q, computed as u, openBlock as r, createElementBlock as l, normalizeClass as i, createElementVNode as m, toDisplayString as o, Fragment as k, renderList as D, createVNode as C, createCommentVNode as h, createTextVNode as b, createBlock as x, withCtx as z } from "vue";
+import G from "../Icon.vue.js";
+import c from "../Button.vue.js";
+import { $t as y } from "../../utils/i18n.js";
+const H = {
   key: 0,
   class: "flex flex-wrap items-center justify-center md:justify-start gap-4 order-2 md:order-1"
-}, G = {
+}, J = {
   key: 0,
   class: "flex items-center gap-2 text-sm text-muted-foreground"
-}, H = { class: "whitespace-nowrap" }, J = { class: "relative" }, K = ["value", "disabled"], Q = ["value"], U = { class: "whitespace-nowrap" }, W = {
+}, K = { class: "whitespace-nowrap" }, Q = { class: "relative" }, U = ["value", "disabled"], W = ["value"], X = { class: "whitespace-nowrap" }, Y = {
   key: 1,
   class: "hidden md:block w-px h-4 bg-border"
-}, X = {
+}, Z = {
   key: 2,
   class: "text-sm text-muted-foreground whitespace-nowrap"
-}, Y = { class: "font-medium text-foreground" }, Z = { class: "font-medium text-foreground" }, p = {
+}, p = { class: "font-medium text-foreground" }, _ = { class: "font-medium text-foreground" }, ee = {
   class: "flex items-center justify-center gap-1 order-1 md:order-2",
   "aria-label": "Pagination"
-}, _ = {
+}, te = {
   key: 0,
-  class: "px-2 text-gray-400 select-none"
-}, se = /* @__PURE__ */ A({
+  class: "px-2 text-muted-foreground select-none"
+}, le = /* @__PURE__ */ q({
   __name: "Pagination",
   props: {
     currentPage: { default: 1 },
@@ -33,38 +33,40 @@ const q = {
     itemsPerPage: { default: 10 },
     itemsPerPageOptions: { default: () => [10, 25, 50, 100] },
     navType: { default: "text" },
-    alignment: {}
+    alignment: {},
+    activeVariant: { default: "solid" },
+    rounded: { default: "full" }
   },
   emits: ["update:currentPage", "change", "update:itemsPerPage", "change:itemsPerPage"],
-  setup(e, { emit: T }) {
-    const s = e, c = T, o = (t) => {
-      s.disabled || t < 1 || t > s.totalPages || t !== s.currentPage && (c("update:currentPage", t), c("change", t));
-    }, D = (t) => {
-      const n = t.target, a = parseInt(n.value);
-      c("update:itemsPerPage", a), c("change:itemsPerPage", a), c("update:currentPage", 1), c("change", 1);
-    }, N = u(() => {
-      if (s.totalItems * 2 + 5 >= s.totalPages)
-        return k(1, s.totalPages);
-      const n = Math.max(s.currentPage - s.totalItems, 1), a = Math.min(s.currentPage + s.totalItems, s.totalPages), m = n > 2, P = a < s.totalPages - 2, C = 1, S = s.totalPages;
-      if (!m && P) {
-        let v = 3 + 2 * s.totalItems;
-        return [...k(1, v), "DOTS", S];
+  setup(e, { emit: N }) {
+    const n = e, f = N, g = (t) => {
+      n.disabled || t < 1 || t > n.totalPages || t !== n.currentPage && (f("update:currentPage", t), f("change", t));
+    }, O = (t) => {
+      const s = t.target, a = parseInt(s.value);
+      f("update:itemsPerPage", a), f("change:itemsPerPage", a), f("update:currentPage", 1), f("change", 1);
+    }, B = u(() => {
+      if (n.totalItems * 2 + 5 >= n.totalPages)
+        return I(1, n.totalPages);
+      const s = Math.max(n.currentPage - n.totalItems, 1), a = Math.min(n.currentPage + n.totalItems, n.totalPages), v = s > 2, P = a < n.totalPages - 2, $ = 1, j = n.totalPages;
+      if (!v && P) {
+        const w = 3 + 2 * n.totalItems;
+        return [...I(1, w), "DOTS", j];
       }
-      if (m && !P) {
-        let v = 3 + 2 * s.totalItems, $ = k(s.totalPages - v + 1, s.totalPages);
-        return [C, "DOTS", ...$];
+      if (v && !P) {
+        const w = 3 + 2 * n.totalItems, T = I(n.totalPages - w + 1, n.totalPages);
+        return [$, "DOTS", ...T];
       }
-      if (m && P) {
-        let v = k(n, a);
-        return [C, "DOTS", ...v, "DOTS", S];
+      if (v && P) {
+        const w = I(s, a);
+        return [$, "DOTS", ...w, "DOTS", j];
       }
       return [];
-    }), k = (t, n) => {
-      let a = n - t + 1;
-      return Array.from({ length: a }, (m, P) => P + t);
-    }, O = u(() => {
-      if (s.alignment)
-        switch (s.alignment) {
+    }), I = (t, s) => {
+      const a = s - t + 1;
+      return Array.from({ length: a }, (v, P) => P + t);
+    }, R = u(() => {
+      if (n.alignment)
+        switch (n.alignment) {
           case "start":
             return "justify-start";
           case "end":
@@ -74,156 +76,199 @@ const q = {
           default:
             return "justify-center";
         }
-      return s.showPageInfo || s.showItemsPerPage ? "justify-between" : "justify-center";
-    }), B = u(() => {
-      const t = h("vlite.pagination.show");
+      return n.showPageInfo || n.showItemsPerPage ? "justify-between" : "justify-center";
+    }), d = u(() => {
+      switch (n.rounded) {
+        case "none":
+          return "rounded-none";
+        case "sm":
+          return "rounded-sm";
+        case "lg":
+          return "rounded-lg";
+        case "full":
+          return "rounded-full";
+        default:
+          return "rounded-md";
+      }
+    }), S = u(() => {
+      switch (n.activeVariant) {
+        case "solid":
+          return {
+            variant: "primary",
+            extraClass: "pointer-events-none z-10"
+          };
+        case "ghost":
+          return {
+            variant: "ghost",
+            extraClass: "bg-accent text-accent-foreground pointer-events-none z-10 font-semibold"
+          };
+        default:
+          return {
+            variant: "outline",
+            extraClass: "bg-white text-primary border-primary ring-1 ring-primary pointer-events-none z-10"
+          };
+      }
+    }), V = u(() => {
+      const t = y("vlite.pagination.show");
       return t !== "vlite.pagination.show" ? t : "Show";
-    }), R = u(() => {
-      const t = h("vlite.pagination.perPage");
-      return t !== "vlite.pagination.perPage" ? t : "per page";
     }), E = u(() => {
-      const t = h("vlite.pagination.page");
+      const t = y("vlite.pagination.perPage");
+      return t !== "vlite.pagination.perPage" ? t : "per page";
+    }), A = u(() => {
+      const t = y("vlite.pagination.page");
       return t !== "vlite.pagination.page" ? t : "Page";
-    }), V = u(() => {
-      const t = h("vlite.pagination.of");
-      return t !== "vlite.pagination.of" ? t : "of";
     }), L = u(() => {
-      const t = h("vlite.pagination.previous");
-      return t !== "vlite.pagination.previous" ? t : "Previous";
+      const t = y("vlite.pagination.of");
+      return t !== "vlite.pagination.of" ? t : "of";
     }), M = u(() => {
-      const t = h("vlite.pagination.next");
+      const t = y("vlite.pagination.previous");
+      return t !== "vlite.pagination.previous" ? t : "Previous";
+    }), F = u(() => {
+      const t = y("vlite.pagination.next");
       return t !== "vlite.pagination.next" ? t : "Next";
     });
-    return (t, n) => (i(), r("div", {
-      class: z(["flex flex-col md:flex-row items-center gap-4 w-full", [O.value]])
+    return (t, s) => (r(), l("div", {
+      class: i(["flex flex-col md:flex-row items-center gap-4 w-full", [R.value]])
     }, [
-      e.showPageInfo || e.showItemsPerPage ? (i(), r("div", q, [
-        e.showItemsPerPage ? (i(), r("div", G, [
-          g("span", H, l(B.value), 1),
-          g("div", J, [
-            g("select", {
+      e.showPageInfo || e.showItemsPerPage ? (r(), l("div", H, [
+        e.showItemsPerPage ? (r(), l("div", J, [
+          m("span", K, o(V.value), 1),
+          m("div", Q, [
+            m("select", {
               value: e.itemsPerPage,
               class: "appearance-none bg-background border border-border hover:border-accent text-foreground py-1 pl-2 pr-6 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-sm cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
               disabled: e.disabled,
-              onChange: D
+              onChange: O
             }, [
-              (i(!0), r(b, null, j(e.itemsPerPageOptions, (a) => (i(), r("option", {
+              (r(!0), l(k, null, D(e.itemsPerPageOptions, (a) => (r(), l("option", {
                 key: a,
                 value: a
-              }, l(a), 9, Q))), 128))
-            ], 40, K),
-            x(F, {
+              }, o(a), 9, W))), 128))
+            ], 40, U),
+            C(G, {
               icon: "lucide:chevron-down",
               class: "absolute right-1.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground pointer-events-none"
             })
           ]),
-          g("span", U, l(R.value), 1)
-        ])) : f("", !0),
-        e.showItemsPerPage && e.showPageInfo ? (i(), r("div", W)) : f("", !0),
-        e.showPageInfo ? (i(), r("span", X, [
-          y(l(E.value) + " ", 1),
-          g("span", Y, l(e.currentPage), 1),
-          y(" " + l(V.value) + " ", 1),
-          g("span", Z, l(e.totalPages), 1)
-        ])) : f("", !0)
-      ])) : f("", !0),
-      g("nav", p, [
-        e.showEdges ? (i(), w(d, {
+          m("span", X, o(E.value), 1)
+        ])) : h("", !0),
+        e.showItemsPerPage && e.showPageInfo ? (r(), l("div", Y)) : h("", !0),
+        e.showPageInfo ? (r(), l("span", Z, [
+          b(o(A.value) + " ", 1),
+          m("span", p, o(e.currentPage), 1),
+          b(" " + o(L.value) + " ", 1),
+          m("span", _, o(e.totalPages), 1)
+        ])) : h("", !0)
+      ])) : h("", !0),
+      m("nav", ee, [
+        e.showEdges ? (r(), x(c, {
           key: 0,
           variant: "ghost",
           size: "sm",
           icon: "lucide:chevrons-left",
+          class: i(d.value),
           disabled: e.disabled || e.currentPage === 1,
-          onClick: n[0] || (n[0] = (a) => o(1))
-        }, null, 8, ["disabled"])) : f("", !0),
-        e.navType === "icon" ? (i(), w(d, {
+          onClick: s[0] || (s[0] = (a) => g(1))
+        }, null, 8, ["class", "disabled"])) : h("", !0),
+        e.navType === "icon" ? (r(), x(c, {
           key: 1,
           variant: "ghost",
           size: "sm",
           icon: "lucide:chevron-left",
+          class: i(d.value),
           disabled: e.disabled || e.currentPage === 1,
-          onClick: n[1] || (n[1] = (a) => o(e.currentPage - 1))
-        }, null, 8, ["disabled"])) : (i(), r(b, { key: 2 }, [
-          x(d, {
+          onClick: s[1] || (s[1] = (a) => g(e.currentPage - 1))
+        }, null, 8, ["class", "disabled"])) : (r(), l(k, { key: 2 }, [
+          C(c, {
             variant: "ghost",
             size: "sm",
-            class: "hidden sm:flex",
+            class: i(["hidden sm:flex", d.value]),
             disabled: e.disabled || e.currentPage === 1,
-            onClick: n[2] || (n[2] = (a) => o(e.currentPage - 1))
+            onClick: s[2] || (s[2] = (a) => g(e.currentPage - 1))
           }, {
-            default: I(() => [
-              y(l(L.value), 1)
+            default: z(() => [
+              b(o(M.value), 1)
             ]),
             _: 1
-          }, 8, ["disabled"]),
-          x(d, {
+          }, 8, ["class", "disabled"]),
+          C(c, {
             variant: "ghost",
             size: "sm",
             icon: "lucide:chevron-left",
-            class: "flex sm:hidden",
+            class: i(["flex sm:hidden", d.value]),
             disabled: e.disabled || e.currentPage === 1,
-            onClick: n[3] || (n[3] = (a) => o(e.currentPage - 1))
-          }, null, 8, ["disabled"])
+            onClick: s[3] || (s[3] = (a) => g(e.currentPage - 1))
+          }, null, 8, ["class", "disabled"])
         ], 64)),
-        (i(!0), r(b, null, j(N.value, (a, m) => (i(), r(b, { key: m }, [
-          a === "DOTS" ? (i(), r("div", _, "...")) : (i(), w(d, {
+        (r(!0), l(k, null, D(B.value, (a, v) => (r(), l(k, { key: v }, [
+          a === "DOTS" ? (r(), l("div", te, "...")) : a === e.currentPage ? (r(), x(c, {
             key: 1,
             size: "sm",
-            variant: a === e.currentPage ? "outline" : "ghost",
-            class: z({
-              "bg-white text-primary border-primary ring-1 ring-primary pointer-events-none z-10": a === e.currentPage,
-              "text-gray-600 hover:bg-gray-100": a !== e.currentPage
-            }),
+            variant: S.value.variant,
+            class: i([S.value.extraClass, d.value]),
+            disabled: e.disabled
+          }, {
+            default: z(() => [
+              b(o(a), 1)
+            ]),
+            _: 2
+          }, 1032, ["variant", "class", "disabled"])) : (r(), x(c, {
+            key: 2,
+            size: "sm",
+            variant: "ghost",
+            class: i(["text-gray-600 hover:bg-gray-100", d.value]),
             disabled: e.disabled,
-            onClick: (P) => o(a)
+            onClick: (P) => g(a)
           }, {
-            default: I(() => [
-              y(l(a), 1)
+            default: z(() => [
+              b(o(a), 1)
             ]),
             _: 2
-          }, 1032, ["variant", "class", "disabled", "onClick"]))
+          }, 1032, ["class", "disabled", "onClick"]))
         ], 64))), 128)),
-        e.navType === "icon" ? (i(), w(d, {
+        e.navType === "icon" ? (r(), x(c, {
           key: 3,
           variant: "ghost",
           size: "sm",
           icon: "lucide:chevron-right",
+          class: i(d.value),
           disabled: e.disabled || e.currentPage === e.totalPages,
-          onClick: n[4] || (n[4] = (a) => o(e.currentPage + 1))
-        }, null, 8, ["disabled"])) : (i(), r(b, { key: 4 }, [
-          x(d, {
+          onClick: s[4] || (s[4] = (a) => g(e.currentPage + 1))
+        }, null, 8, ["class", "disabled"])) : (r(), l(k, { key: 4 }, [
+          C(c, {
             variant: "ghost",
             size: "sm",
-            class: "hidden sm:flex",
+            class: i(["hidden sm:flex", d.value]),
             disabled: e.disabled || e.currentPage === e.totalPages,
-            onClick: n[5] || (n[5] = (a) => o(e.currentPage + 1))
+            onClick: s[5] || (s[5] = (a) => g(e.currentPage + 1))
           }, {
-            default: I(() => [
-              y(l(M.value), 1)
+            default: z(() => [
+              b(o(F.value), 1)
             ]),
             _: 1
-          }, 8, ["disabled"]),
-          x(d, {
+          }, 8, ["class", "disabled"]),
+          C(c, {
             variant: "ghost",
             size: "sm",
             icon: "lucide:chevron-right",
-            class: "flex sm:hidden",
+            class: i(["flex sm:hidden", d.value]),
             disabled: e.disabled || e.currentPage === e.totalPages,
-            onClick: n[6] || (n[6] = (a) => o(e.currentPage + 1))
-          }, null, 8, ["disabled"])
+            onClick: s[6] || (s[6] = (a) => g(e.currentPage + 1))
+          }, null, 8, ["class", "disabled"])
         ], 64)),
-        e.showEdges ? (i(), w(d, {
+        e.showEdges ? (r(), x(c, {
           key: 5,
           variant: "ghost",
           size: "sm",
           icon: "lucide:chevrons-right",
+          class: i(d.value),
           disabled: e.disabled || e.currentPage === e.totalPages,
-          onClick: n[7] || (n[7] = (a) => o(e.totalPages))
-        }, null, 8, ["disabled"])) : f("", !0)
+          onClick: s[7] || (s[7] = (a) => g(e.totalPages))
+        }, null, 8, ["class", "disabled"])) : h("", !0)
       ])
     ], 2));
   }
 });
 export {
-  se as default
+  le as default
 };

package/components/Pagination/index.d.ts

@@ -5,6 +5,8 @@ export interface PageInfo {
     totalItems?: number;
     itemsPerPage?: number;
 }
+export type PaginationVariant = 'outline' | 'solid' | 'ghost';
+export type PaginationRounded = 'none' | 'sm' | 'md' | 'lg' | 'full';
 export interface PaginationProps {
     currentPage?: number;
     totalPages: number;
@@ -17,4 +19,8 @@ export interface PaginationProps {
     itemsPerPageOptions?: number[];
     navType?: 'text' | 'icon';
     alignment?: 'start' | 'center' | 'end' | 'between';
+    /** Visual style for the active page button. @default 'outline' */
+    activeVariant?: PaginationVariant;
+    /** Border radius for page buttons. @default 'md' */
+    rounded?: PaginationRounded;
 }

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                        */