vlite3 0.6.10 → 0.6.11

package/components/ColorPicker/ColorIro.vue3.js

@@ -1,5 +1,5 @@
-import o from "./ColorIro.vue.js";
-/* empty css              */
+import o from "./ColorIro.vue2.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.vue.js";
-/* empty css              */
+import E from "./ColorIro.vue2.js";
+/* empty css             */
 import { useEyeDropper as P } from "@vueuse/core";
 const I = {
   key: 0,

package/components/Navbar/Navbar.vue.d.ts

@@ -29,12 +29,6 @@ declare function __VLS_template(): {
         logo?(_: {}): any;
         logo?(_: {}): any;
         logo?(_: {}): any;
-        logo?(_: {}): any;
-        logo?(_: {}): any;
-        logo?(_: {}): any;
-        logo?(_: {}): any;
-        logo?(_: {}): any;
-        logo?(_: {}): any;
         'mobile-trigger'?(_: {
             isOpen: any;
             toggle: () => boolean;

package/components/Navbar/Navbar.vue.js

@@ -1,60 +1,59 @@
-import { defineComponent as se, computed as b, ref as w, provide as oe, useSlots as te, onMounted as ae, onUnmounted as re, watch as W, openBlock as t, createElementBlock as a, createVNode as m, Transition as Y, withCtx as v, withDirectives as q, createElementVNode as r, normalizeClass as n, renderSlot as o, createCommentVNode as d, vShow as G, unref as c, createTextVNode as P, normalizeStyle as ie, Fragment as x, createBlock as $, resolveDynamicComponent as J, toDisplayString as K } from "vue";
-import { useRoute as ne } from "vue-router";
-import { useLocalStorage as de, onClickOutside as ue, useBreakpoints as fe, breakpointsTailwind as me } from "@vueuse/core";
-import B from "../Icon.vue.js";
-import R from "../SidePanel.vue.js";
-import Q from "../Logo.vue.js";
-import X from "./NavbarTabs.vue.js";
+import { defineComponent as _, computed as m, ref as w, provide as ee, useSlots as le, onMounted as se, onUnmounted as oe, watch as A, openBlock as r, createElementBlock as i, createVNode as b, Transition as W, withCtx as g, withDirectives as Y, createElementVNode as t, normalizeClass as n, renderSlot as s, createCommentVNode as u, vShow as q, unref as c, createTextVNode as L, normalizeStyle as te, Fragment as x, createBlock as G } from "vue";
+import { useRoute as ae } from "vue-router";
+import { useLocalStorage as re, onClickOutside as ie, useBreakpoints as ne, breakpointsTailwind as de } from "@vueuse/core";
+import z from "../Icon.vue.js";
+import P from "../SidePanel.vue.js";
+import J from "./NavbarTabs.vue.js";
 /* empty css                */
-import Z from "../Breadcrumb/Breadcrumb.vue.js";
+import K from "../Breadcrumb/Breadcrumb.vue.js";
 /* empty css                                */
-import { useBreadcrumb as be } from "../../composables/useBreadcrumb.js";
-const ve = {
+import { useBreadcrumb as ue } from "../../composables/useBreadcrumb.js";
+const fe = {
   key: 0,
   class: "vlite-app-layout flex flex-row w-full h-full bg-body overflow-hidden"
-}, ce = { class: "flex flex-col flex-1 min-w-0 h-full overflow-hidden" }, ge = {
+}, be = { class: "flex flex-col flex-1 min-w-0 h-full overflow-hidden" }, me = {
   key: 0,
   class: "w-full shrink-0 z-20 bg-background"
-}, pe = {
+}, ce = {
   key: 1,
   class: "flex-1 overflow-y-auto w-full relative h-full flex flex-col min-h-0"
-}, he = {
+}, ve = {
   key: 0,
   class: "shrink-0 w-full"
-}, ye = { class: "flex-1 overflow-y-auto w-full relative h-full" }, ke = { class: "flex flex-col h-full" }, we = { class: "flex-1 overflow-y-auto px-3.5 pt-4" }, xe = {
+}, ge = { class: "flex-1 overflow-y-auto w-full relative h-full" }, pe = { class: "flex flex-col h-full" }, he = { class: "flex-1 overflow-y-auto px-3.5 pt-4" }, ye = {
   key: 0,
   class: "mt-auto pt-2 border-t border-border px-3 py-2"
-}, $e = {
+}, ke = {
   key: 1,
   class: "vlite-app-layout flex flex-col w-full h-full bg-body overflow-hidden"
-}, Ce = {
+}, we = {
   key: 0,
   class: "w-full shrink-0 z-50 flex flex-col relative"
-}, Te = { class: "flex flex-1 w-full overflow-hidden relative" }, ze = { class: "flex items-center gap-4 shrink-0 z-10" }, Be = { key: 1 }, Se = { key: 2 }, Ve = {
+}, xe = { class: "flex flex-1 w-full overflow-hidden relative" }, $e = { class: "flex items-center gap-4 shrink-0 z-10" }, Ce = {
   key: 0,
   class: "flex-1 overflow-y-auto w-full relative h-full flex flex-col"
-}, Me = {
+}, Te = {
   key: 0,
   class: "shrink-0 w-full"
-}, Oe = { class: "flex-1 overflow-y-auto w-full relative h-full" }, Ne = { class: "flex flex-col max-h-[80vh] overflow-y-auto" }, Le = { class: "space-y-1 p-2" }, Pe = { class: "space-y-1 p-2" }, Re = { class: "flex flex-col space-y-6 pt-4 h-full" }, He = {
+}, ze = { class: "flex-1 overflow-y-auto w-full relative h-full" }, Se = { class: "flex flex-col max-h-[80vh] overflow-y-auto" }, Be = { class: "space-y-1 p-2" }, Ve = { class: "space-y-1 p-2" }, Me = { class: "flex flex-col space-y-6 pt-4 h-full" }, Oe = {
   key: 0,
   class: "flex flex-col space-y-1"
-}, je = {
+}, Ne = {
   key: 1,
   class: "flex flex-col space-y-4 flex-1 overflow-y-auto px-3.5!"
-}, Ie = {
+}, Le = {
   key: 2,
   class: "mt-auto pt-2 border-t border-border px-3! py-2!"
-}, Ue = { class: "flex items-center gap-4 shrink-0 z-10" }, Ae = { key: 1 }, De = { key: 2 }, Ee = { class: "flex flex-col max-h-[80vh] overflow-y-auto" }, Fe = { class: "space-y-1 p-2" }, We = { class: "space-y-1 p-2" }, Ye = { class: "flex flex-col space-y-6 pt-4 h-full" }, qe = {
+}, Pe = { class: "flex items-center gap-4 shrink-0 z-10" }, Re = { class: "flex flex-col max-h-[80vh] overflow-y-auto" }, He = { class: "space-y-1 p-2" }, je = { class: "space-y-1 p-2" }, Ie = { class: "flex flex-col space-y-6 pt-4 h-full" }, Ue = {
   key: 0,
   class: "flex flex-col space-y-1"
-}, Ge = {
+}, Ee = {
   key: 1,
   class: "flex flex-col space-y-4 flex-1 overflow-y-auto px-3.5!"
-}, Je = {
+}, De = {
   key: 2,
   class: "mt-auto pt-2 border-t border-border px-3! py-2!"
-}, nl = /* @__PURE__ */ se({
+}, el = /* @__PURE__ */ _({
   __name: "Navbar",
   props: {
     variant: { default: "header" },
@@ -88,118 +87,118 @@ const ve = {
     layoutMode: { default: "sidebar-first" }
   },
   emits: ["toggle-mobile"],
-  setup(g, { emit: Ke }) {
-    const l = g, h = l.breadcrumb ? be({
+  setup(v, { emit: Fe }) {
+    const l = v, h = l.breadcrumb ? ue({
       homeIcon: l.breadcrumbHomeIcon,
       labelMap: l.breadcrumbLabels || {}
-    }) : { items: b(() => []) }, y = w([]), k = w("");
-    oe("navbar-context", {
-      compact: b(() => l.compact),
-      renderNestedTabs: b(() => l.renderNestedTabs),
-      setNestedTabs: (e, s) => {
-        y.value = e, k.value = s;
+    }) : { items: m(() => []) }, y = w([]), k = w("");
+    ee("navbar-context", {
+      compact: m(() => l.compact),
+      renderNestedTabs: m(() => l.renderNestedTabs),
+      setNestedTabs: (e, o) => {
+        y.value = e, k.value = o;
       }
     });
-    const i = w(!1), S = w(!1), H = te(), V = w(null), C = w(null), T = de("vlite-navbar-sidebar-visible", !0), j = (e) => {
-      y.value.find((u) => u.value === e) && (typeof e == "string" && e.startsWith("/") ? import("vue-router").then(({ useRouter: u }) => {
-        u().push(e).catch(() => {
+    const a = w(!1), S = w(!1), R = le(), B = w(null), $ = w(null), C = re("vlite-navbar-sidebar-visible", !0), H = (e) => {
+      y.value.find((d) => d.value === e) && (typeof e == "string" && e.startsWith("/") ? import("vue-router").then(({ useRouter: d }) => {
+        d().push(e).catch(() => {
         });
       }) : k.value = e);
-    }, p = b(() => !!(H.header || H.main)), I = b(() => l.sidebarToggle && p.value), U = () => {
-      T.value = !T.value;
+    }, p = m(() => !!(R.header || R.main)), j = m(() => l.sidebarToggle && p.value), I = () => {
+      C.value = !C.value;
     };
-    ue(
-      V,
+    ie(
+      B,
       () => {
-        i.value = !1;
+        a.value = !1;
       },
-      { ignore: [C] }
+      { ignore: [$] }
     );
-    const A = () => {
+    const U = () => {
       S.value = window.scrollY > 10;
     };
-    ae(() => {
-      window.addEventListener("scroll", A, { passive: !0 });
-    }), re(() => {
-      window.removeEventListener("scroll", A);
+    se(() => {
+      window.addEventListener("scroll", U, { passive: !0 });
+    }), oe(() => {
+      window.removeEventListener("scroll", U);
     });
-    const D = b(() => {
-      const e = l.variant === "sidebar", s = {
+    const E = m(() => {
+      const e = l.variant === "sidebar", o = {
         fixed: p.value ? "relative z-40" : "fixed top-0 left-0 z-40",
         sticky: p.value ? "relative z-40" : "sticky top-0 z-40",
         relative: "relative z-10",
         absolute: p.value ? "relative z-40" : "absolute top-0 left-0 w-full z-40"
-      }, u = "bg-body", z = [
+      }, d = "bg-body", T = [
         l.glass && (S.value || e || l.floating) ? "backdrop-blur-md bg-background/80 supports-[backdrop-filter]:bg-background/60" : "bg-background",
         l.border && !l.floating ? e ? "border-r border-border" : "border-b border-border" : "",
         l.floating ? "m-4 rounded shadow-lg border border-border/50" : "",
         S.value && !l.floating && !e && l.position === "sticky" ? "shadow-sm" : ""
-      ], M = l.mobileBreakpoint || "md", O = {
+      ], V = l.mobileBreakpoint || "md", M = {
         sm: "max-sm:hidden",
         md: "max-md:hidden",
         lg: "max-lg:hidden",
         xl: "max-xl:hidden"
-      }, N = p.value && e ? O[M] : "";
-      let L = "";
-      return e ? L = f.value.sidebarLayout : L = `flex items-center gap-4 w-full px-4 sm:px-6 lg:px-8 ${l.height}`, [u, s[l.position], ...z, L, N, l.class].filter(Boolean).join(" ");
-    }), f = b(() => {
-      const e = l.mobileBreakpoint || "md", s = {
+      }, O = p.value && e ? M[V] : "";
+      let N = "";
+      return e ? N = f.value.sidebarLayout : N = `flex items-center gap-4 w-full px-4 sm:px-6 lg:px-8 ${l.height}`, [d, o[l.position], ...T, N, O, l.class].filter(Boolean).join(" ");
+    }), f = m(() => {
+      const e = l.mobileBreakpoint || "md", o = {
         sm: "sm:hidden",
         md: "md:hidden",
         lg: "lg:hidden",
         xl: "xl:hidden"
-      }, u = {
+      }, d = {
         sm: "hidden sm:flex",
         md: "hidden md:flex",
         lg: "hidden lg:flex",
         xl: "hidden xl:flex"
-      }, z = {
+      }, T = {
         sm: `flex flex-col max-sm:w-full ${l.compact ? "w-20" : ""} h-auto sm:h-full sm:max-h-screen shrink-0`,
         md: `flex flex-col max-md:w-full ${l.compact ? "w-20" : ""} h-auto md:h-full md:max-h-screen shrink-0`,
         lg: `flex flex-col max-lg:w-full ${l.compact ? "w-20" : ""} h-auto lg:h-full lg:max-h-screen shrink-0`,
         xl: `flex flex-col max-xl:w-full ${l.compact ? "w-20" : ""} h-auto xl:h-full xl:max-h-screen shrink-0`
-      }, M = {
+      }, V = {
         sm: "sm:hidden flex items-center justify-between px-4 py-3 shrink-0 bg-background",
         md: "md:hidden flex items-center justify-between px-4 py-3 shrink-0 bg-background",
         lg: "lg:hidden flex items-center justify-between px-4 py-3 shrink-0 bg-background",
         xl: "xl:hidden flex items-center justify-between px-4 py-3 shrink-0 bg-background"
-      }, O = {
+      }, M = {
         sm: "hidden sm:flex flex-col h-full w-full overflow-hidden",
         md: "hidden md:flex flex-col h-full w-full overflow-hidden",
         lg: "hidden lg:flex flex-col h-full w-full overflow-hidden",
         xl: "hidden xl:flex flex-col h-full w-full overflow-hidden"
-      }, N = {
+      }, O = {
         sm: "hidden sm:flex",
         md: "hidden md:flex",
         lg: "hidden lg:flex",
         xl: "hidden xl:flex"
       };
       return {
-        mobileTrigger: s[e],
-        desktopContent: u[e],
-        sidebarLayout: z[e],
-        mobileHeader: M[e],
-        desktopSidebar: O[e],
-        desktopOnly: N[e]
+        mobileTrigger: o[e],
+        desktopContent: d[e],
+        sidebarLayout: T[e],
+        mobileHeader: V[e],
+        desktopSidebar: M[e],
+        desktopOnly: O[e]
       };
-    }), E = b(() => {
+    }), D = m(() => {
       if (l.variant === "sidebar") return "flex-1 py-4 overflow-y-auto";
       if (l.centerPosition === "left")
         return "flex items-center justify-start";
-    }), _ = ne();
-    W(
-      () => _.path,
+    }), Q = ae();
+    A(
+      () => Q.path,
       () => {
-        i.value = !1;
+        a.value = !1;
       }
     );
-    const ee = fe(me).greater(l.mobileBreakpoint);
-    W(ee, (e) => {
-      e && (i.value = !1);
+    const X = ne(de).greater(l.mobileBreakpoint);
+    A(X, (e) => {
+      e && (a.value = !1);
     });
-    const F = b(() => I.value && !T.value), le = b(() => p.value && l.variant === "sidebar" && l.layoutMode === "sidebar-first");
-    return (e, s) => le.value ? (t(), a("div", ve, [
-      m(Y, {
+    const F = m(() => j.value && !C.value), Z = m(() => p.value && l.variant === "sidebar" && l.layoutMode === "sidebar-first");
+    return (e, o) => Z.value ? (r(), i("div", fe, [
+      b(W, {
         "enter-active-class": "transition-all duration-300 ease-in-out",
         "leave-active-class": "transition-all duration-300 ease-in-out",
         "enter-from-class": "opacity-0 -translate-x-2",
@@ -207,8 +206,8 @@ const ve = {
         "leave-from-class": "opacity-100 translate-x-0",
         "leave-to-class": "opacity-0 -translate-x-2"
       }, {
-        default: v(() => [
-          q(r("nav", {
+        default: g(() => [
+          Y(t("nav", {
             class: n([
               "shrink-0 h-full flex flex-col bg-background border-r border-border overflow-hidden z-30",
               f.value.mobileTrigger === "md:hidden" ? "max-md:hidden" : "",
@@ -217,61 +216,61 @@ const ve = {
             role: "navigation",
             "aria-label": "Sidebar"
           }, [
-            r("div", {
+            t("div", {
               class: n(["flex-1 overflow-y-auto overflow-x-hidden scrollbar-thin", l.contentClass])
             }, [
-              o(e.$slots, "default")
+              s(e.$slots, "default")
             ], 2),
-            e.$slots.right ? (t(), a("div", {
+            e.$slots.right ? (r(), i("div", {
               key: 0,
               class: n(["shrink-0 border-t border-border bg-background", l.rightClass])
             }, [
-              o(e.$slots, "right")
-            ], 2)) : d("", !0)
+              s(e.$slots, "right")
+            ], 2)) : u("", !0)
           ], 2), [
-            [G, !F.value]
+            [q, !F.value]
           ])
         ]),
         _: 3
       }),
-      r("div", ce, [
-        e.$slots.header ? (t(), a("header", ge, [
-          o(e.$slots, "header", {
-            isOpen: i.value,
-            toggle: () => i.value = !i.value,
-            sidebarVisible: c(T),
-            toggleSidebar: U,
+      t("div", be, [
+        e.$slots.header ? (r(), i("header", me, [
+          s(e.$slots, "header", {
+            isOpen: a.value,
+            toggle: () => a.value = !a.value,
+            sidebarVisible: c(C),
+            toggleSidebar: I,
             breadcrumbItems: c(h).items.value
           })
-        ])) : d("", !0),
-        e.$slots.main ? (t(), a("main", pe, [
-          l.renderNestedTabs && y.value.length > 0 ? (t(), a("div", he, [
-            m(X, {
+        ])) : u("", !0),
+        e.$slots.main ? (r(), i("main", ce, [
+          l.renderNestedTabs && y.value.length > 0 ? (r(), i("div", ve, [
+            b(J, {
               modelValue: k.value,
-              "onUpdate:modelValue": s[0] || (s[0] = (u) => k.value = u),
-              onChange: j,
+              "onUpdate:modelValue": o[0] || (o[0] = (d) => k.value = d),
+              onChange: H,
               items: y.value
             }, null, 8, ["modelValue", "items"])
-          ])) : d("", !0),
-          l.breadcrumb && l.breadcrumbPosition === "main" && c(h).items.value.length > 1 ? (t(), a("div", {
+          ])) : u("", !0),
+          l.breadcrumb && l.breadcrumbPosition === "main" && c(h).items.value.length > 1 ? (r(), i("div", {
             key: 1,
             class: n(["shrink-0 w-full border-b border-border px-6 py-2", l.breadcrumbClass])
           }, [
-            m(c(Z), {
+            b(c(K), {
               items: c(h).items.value,
               variant: l.breadcrumbVariant,
               separator: l.breadcrumbSeparator,
               size: l.breadcrumbSize
             }, null, 8, ["items", "variant", "separator", "size"])
-          ], 2)) : d("", !0),
-          r("div", ye, [
-            o(e.$slots, "main")
+          ], 2)) : u("", !0),
+          t("div", ge, [
+            s(e.$slots, "main")
           ])
-        ])) : d("", !0)
+        ])) : u("", !0)
       ]),
-      m(R, {
-        show: i.value,
-        "onUpdate:show": s[1] || (s[1] = (u) => i.value = u),
+      b(P, {
+        show: a.value,
+        "onUpdate:show": o[1] || (o[1] = (d) => a.value = d),
         position: "left",
         size: "sm",
         triggerClass: f.value.mobileTrigger,
@@ -279,35 +278,35 @@ const ve = {
         headerClass: "pl-3! pr-4.5! py-3!",
         bodyClass: "p-0!"
       }, {
-        header: v(() => [
-          o(e.$slots, "logo", {}, () => [
-            s[9] || (s[9] = P("Brand", -1))
+        header: g(() => [
+          s(e.$slots, "logo", {}, () => [
+            o[9] || (o[9] = L("Brand", -1))
           ])
         ]),
-        default: v(() => [
-          r("div", ke, [
-            r("div", we, [
-              o(e.$slots, "default")
+        default: g(() => [
+          t("div", pe, [
+            t("div", he, [
+              s(e.$slots, "default")
             ]),
-            e.$slots.right ? (t(), a("div", xe, [
-              o(e.$slots, "right")
-            ])) : d("", !0)
+            e.$slots.right ? (r(), i("div", ye, [
+              s(e.$slots, "right")
+            ])) : u("", !0)
           ])
         ]),
         _: 3
       }, 8, ["show", "triggerClass", "class"])
-    ])) : p.value ? (t(), a("div", $e, [
-      e.$slots.header ? (t(), a("header", Ce, [
-        o(e.$slots, "header", {
-          isOpen: i.value,
-          toggle: () => i.value = !i.value,
-          sidebarVisible: c(T),
-          toggleSidebar: U,
+    ])) : p.value ? (r(), i("div", ke, [
+      e.$slots.header ? (r(), i("header", we, [
+        s(e.$slots, "header", {
+          isOpen: a.value,
+          toggle: () => a.value = !a.value,
+          sidebarVisible: c(C),
+          toggleSidebar: I,
           breadcrumbItems: c(h).items.value
         })
-      ])) : d("", !0),
-      r("div", Te, [
-        m(Y, {
+      ])) : u("", !0),
+      t("div", xe, [
+        b(W, {
           "enter-active-class": "transition-all duration-300 ease-in-out overflow-hidden",
           "leave-active-class": "transition-all duration-300 ease-in-out overflow-hidden",
           "enter-from-class": "opacity-0",
@@ -315,179 +314,148 @@ const ve = {
           "leave-from-class": "opacity-100",
           "leave-to-class": "opacity-0"
         }, {
-          default: v(() => [
-            q(r("nav", {
-              class: n(D.value),
+          default: g(() => [
+            Y(t("nav", {
+              class: n(E.value),
               role: "navigation",
-              style: ie(I.value ? "transition: width 0.3s ease, opacity 0.3s ease;" : "")
+              style: te(j.value ? "transition: width 0.3s ease, opacity 0.3s ease;" : "")
             }, [
-              g.variant === "header" ? (t(), a(x, { key: 0 }, [
-                r("div", ze, [
-                  o(e.$slots, "mobile-trigger", {
-                    isOpen: i.value,
-                    toggle: () => i.value = !i.value
+              v.variant === "header" ? (r(), i(x, { key: 0 }, [
+                t("div", $e, [
+                  s(e.$slots, "mobile-trigger", {
+                    isOpen: a.value,
+                    toggle: () => a.value = !a.value
                   }, () => [
-                    r("button", {
+                    t("button", {
                       type: "button",
                       ref_key: "mobileTriggerRef",
-                      ref: C,
+                      ref: $,
                       class: n(["p-2 -ml-2 text-muted-foreground hover:bg-accent rounded-md shrink-0", [f.value.mobileTrigger, l.mobileTriggerClass]]),
-                      onClick: s[2] || (s[2] = (u) => i.value = !i.value)
+                      onClick: o[2] || (o[2] = (d) => a.value = !a.value)
                     }, [
-                      m(B, {
+                      b(z, {
                         icon: "lucide:menu",
                         class: "w-5 h-5"
                       }),
-                      s[10] || (s[10] = r("span", { class: "sr-only" }, "Open Menu", -1))
+                      o[10] || (o[10] = t("span", { class: "sr-only" }, "Open Menu", -1))
                     ], 2)
                   ]),
-                  e.$slots?.logo ? (t(), a("div", {
+                  e.$slots?.left ? (r(), i("div", {
                     key: 0,
-                    class: n(["shrink-0", l.logoClass])
-                  }, [
-                    o(e.$slots, "logo", {}, () => [
-                      (t(), $(J(l.logo ? "img" : "div"), {
-                        src: l.logo,
-                        class: "h-8 w-auto font-bold text-xl flex items-center gap-2"
-                      }, {
-                        default: v(() => [
-                          l.logo ? d("", !0) : (t(), $(Q, {
-                            key: 0,
-                            class: "h-6 w-6"
-                          })),
-                          !l.logo && l.logoAlt ? (t(), a("span", Be, K(l.logoAlt), 1)) : l.logo ? d("", !0) : (t(), a("span", Se, "Brand"))
-                        ]),
-                        _: 1
-                      }, 8, ["src"]))
-                    ])
-                  ], 2)) : d("", !0),
-                  e.$slots?.left ? (t(), a("div", {
-                    key: 1,
                     class: n(["items-center gap-1 overflow-x-auto no-scrollbar mask-gradient", f.value.desktopContent])
                   }, [
-                    o(e.$slots, "left")
-                  ], 2)) : d("", !0)
+                    s(e.$slots, "left")
+                  ], 2)) : u("", !0)
                 ]),
-                e.$slots?.center ? (t(), a("div", {
+                e.$slots?.center ? (r(), i("div", {
                   key: 0,
-                  class: n([E.value, "max-w-full", l.contentClass])
+                  class: n([D.value, "max-w-full", l.contentClass])
                 }, [
-                  o(e.$slots, "center")
-                ], 2)) : d("", !0),
-                r("div", {
+                  s(e.$slots, "center")
+                ], 2)) : u("", !0),
+                t("div", {
                   class: n(["flex items-center gap-2 shrink-0 max-w-[40%] z-10", [
-                    { "ml-auto": g.centerPosition === "left" || g.centerPosition === "center" },
+                    { "ml-auto": v.centerPosition === "left" || v.centerPosition === "center" },
                     l.rightClass
                   ]])
                 }, [
-                  o(e.$slots, "right")
+                  s(e.$slots, "right")
                 ], 2)
-              ], 64)) : (t(), a(x, { key: 1 }, [
-                e.$slots.header ? d("", !0) : (t(), a("div", {
+              ], 64)) : (r(), i(x, { key: 1 }, [
+                e.$slots.header ? u("", !0) : (r(), i("div", {
                   key: 0,
                   class: n(f.value.mobileHeader)
                 }, [
-                  e.$slots?.logo ? o(e.$slots, "logo", { key: 0 }, () => [
-                    s[11] || (s[11] = r("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
-                  ]) : d("", !0),
-                  o(e.$slots, "mobile-trigger", {
-                    isOpen: i.value,
-                    toggle: () => i.value = !i.value
+                  s(e.$slots, "mobile-trigger", {
+                    isOpen: a.value,
+                    toggle: () => a.value = !a.value
                   }, () => [
-                    r("button", {
+                    t("button", {
                       type: "button",
                       ref_key: "mobileTriggerRef",
-                      ref: C,
+                      ref: $,
                       class: n(["p-2 -mr-2 text-muted-foreground hover:bg-accent rounded-md", l.mobileTriggerClass]),
-                      onClick: s[3] || (s[3] = (u) => i.value = !i.value)
+                      onClick: o[3] || (o[3] = (d) => a.value = !a.value)
                     }, [
-                      m(B, {
+                      b(z, {
                         icon: "lucide:menu",
                         class: "w-5 h-5"
                       }),
-                      s[12] || (s[12] = r("span", { class: "sr-only" }, "Open Menu", -1))
+                      o[11] || (o[11] = t("span", { class: "sr-only" }, "Open Menu", -1))
                     ], 2)
                   ])
                 ], 2)),
-                r("div", {
+                t("div", {
                   class: n(f.value.desktopSidebar)
                 }, [
-                  e.$slots?.logo ? (t(), a("div", {
-                    key: 0,
-                    class: n(["py-4.5 flex items-center px-4.5 z-10", l.logoClass])
-                  }, [
-                    o(e.$slots, "logo", {}, () => [
-                      s[13] || (s[13] = r("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
-                    ])
-                  ], 2)) : d("", !0),
-                  r("div", {
+                  t("div", {
                     class: n(["flex-1 px-2.5 pt-0 pb-4 overflow-y-auto space-y-4 scrollbar-thin", l.contentClass])
                   }, [
-                    o(e.$slots, "left"),
-                    o(e.$slots, "default"),
-                    o(e.$slots, "center")
+                    s(e.$slots, "left"),
+                    s(e.$slots, "default"),
+                    s(e.$slots, "center")
                   ], 2),
-                  e.$slots?.right ? (t(), a("div", {
-                    key: 1,
+                  e.$slots?.right ? (r(), i("div", {
+                    key: 0,
                     class: n(["p-2 border-t border-border shrink-0 bg-background mt-auto", l.rightClass])
                   }, [
-                    o(e.$slots, "right")
-                  ], 2)) : d("", !0)
+                    s(e.$slots, "right")
+                  ], 2)) : u("", !0)
                 ], 2)
               ], 64))
             ], 6), [
-              [G, !F.value]
+              [q, !F.value]
             ])
           ]),
           _: 3
         }),
-        e.$slots.main ? (t(), a("main", Ve, [
-          l.renderNestedTabs && y.value.length > 0 ? (t(), a("div", Me, [
-            m(X, {
+        e.$slots.main ? (r(), i("main", Ce, [
+          l.renderNestedTabs && y.value.length > 0 ? (r(), i("div", Te, [
+            b(J, {
               modelValue: k.value,
-              "onUpdate:modelValue": s[4] || (s[4] = (u) => k.value = u),
-              onChange: j,
+              "onUpdate:modelValue": o[4] || (o[4] = (d) => k.value = d),
+              onChange: H,
               items: y.value
             }, null, 8, ["modelValue", "items"])
-          ])) : d("", !0),
-          l.breadcrumb && l.breadcrumbPosition === "main" && c(h).items.value.length > 1 ? (t(), a("div", {
+          ])) : u("", !0),
+          l.breadcrumb && l.breadcrumbPosition === "main" && c(h).items.value.length > 1 ? (r(), i("div", {
             key: 1,
             class: n(["shrink-0 w-full border-b border-border px-6 py-2", l.breadcrumbClass])
           }, [
-            m(c(Z), {
+            b(c(K), {
               items: c(h).items.value,
               variant: l.breadcrumbVariant,
               separator: l.breadcrumbSeparator,
               size: l.breadcrumbSize
             }, null, 8, ["items", "variant", "separator", "size"])
-          ], 2)) : d("", !0),
-          r("div", Oe, [
-            o(e.$slots, "main")
+          ], 2)) : u("", !0),
+          t("div", ze, [
+            s(e.$slots, "main")
           ])
-        ])) : d("", !0),
-        l.mobileMenuVariant === "dropdown" ? (t(), a(x, { key: 1 }, [
-          i.value ? (t(), a("div", {
+        ])) : u("", !0),
+        l.mobileMenuVariant === "dropdown" ? (r(), i(x, { key: 1 }, [
+          a.value ? (r(), i("div", {
             key: 0,
             ref_key: "mobileMenuRef",
-            ref: V,
+            ref: B,
             class: n(["absolute top-[calc(100%_+_1px)] left-0 w-full bg-body border border-border/50 shadow-xl z-50 flex flex-col transition-all duration-300 origin-top overflow-hidden will-change-transform", l.menuClass])
           }, [
-            r("div", Ne, [
-              o(e.$slots, "mobile-menu", {}, () => [
-                r("div", Le, [
-                  o(e.$slots, "left")
+            t("div", Se, [
+              s(e.$slots, "mobile-menu", {}, () => [
+                t("div", Be, [
+                  s(e.$slots, "left")
                 ]),
-                s[14] || (s[14] = r("div", { class: "h-px bg-border/50 my-1 mx-2" }, null, -1)),
-                r("div", Pe, [
-                  o(e.$slots, "center")
+                o[12] || (o[12] = t("div", { class: "h-px bg-border/50 my-1 mx-2" }, null, -1)),
+                t("div", Ve, [
+                  s(e.$slots, "center")
                 ])
               ])
             ])
-          ], 2)) : d("", !0)
-        ], 64)) : (t(), $(R, {
+          ], 2)) : u("", !0)
+        ], 64)) : (r(), G(P, {
           key: 2,
-          show: i.value,
-          "onUpdate:show": s[5] || (s[5] = (u) => i.value = u),
+          show: a.value,
+          "onUpdate:show": o[5] || (o[5] = (d) => a.value = d),
           position: "left",
           size: "sm",
           triggerClass: f.value.mobileTrigger,
@@ -495,173 +463,142 @@ const ve = {
           headerClass: "pl-3! pr-4.5! py-3!",
           bodyClass: "p-0!"
         }, {
-          header: v(() => [
-            o(e.$slots, "logo", {}, () => [
-              s[15] || (s[15] = P("Brand", -1))
+          header: g(() => [
+            s(e.$slots, "logo", {}, () => [
+              o[13] || (o[13] = L("Brand", -1))
             ])
           ]),
-          default: v(() => [
-            r("div", Re, [
-              g.variant === "header" ? (t(), a("div", He, [
-                o(e.$slots, "mobile-menu", {}, () => [
-                  o(e.$slots, "left"),
-                  s[16] || (s[16] = r("div", { class: "h-px bg-border my-2" }, null, -1)),
-                  o(e.$slots, "center")
+          default: g(() => [
+            t("div", Me, [
+              v.variant === "header" ? (r(), i("div", Oe, [
+                s(e.$slots, "mobile-menu", {}, () => [
+                  s(e.$slots, "left"),
+                  o[14] || (o[14] = t("div", { class: "h-px bg-border my-2" }, null, -1)),
+                  s(e.$slots, "center")
                 ])
-              ])) : (t(), a("div", je, [
-                o(e.$slots, "left"),
-                o(e.$slots, "default"),
-                o(e.$slots, "center")
+              ])) : (r(), i("div", Ne, [
+                s(e.$slots, "left"),
+                s(e.$slots, "default"),
+                s(e.$slots, "center")
               ])),
-              e.$slots?.right ? (t(), a("div", Ie, [
-                o(e.$slots, "right")
-              ])) : d("", !0)
+              e.$slots?.right ? (r(), i("div", Le, [
+                s(e.$slots, "right")
+              ])) : u("", !0)
             ])
           ]),
           _: 3
         }, 8, ["show", "triggerClass", "class"]))
       ])
-    ])) : (t(), a("nav", {
+    ])) : (r(), i("nav", {
       key: 2,
-      class: n(D.value),
+      class: n(E.value),
       role: "navigation"
     }, [
-      g.variant === "header" ? (t(), a(x, { key: 0 }, [
-        r("div", Ue, [
-          o(e.$slots, "mobile-trigger", {
-            isOpen: i.value,
-            toggle: () => i.value = !i.value
+      v.variant === "header" ? (r(), i(x, { key: 0 }, [
+        t("div", Pe, [
+          s(e.$slots, "mobile-trigger", {
+            isOpen: a.value,
+            toggle: () => a.value = !a.value
           }, () => [
-            r("button", {
+            t("button", {
               type: "button",
               ref_key: "mobileTriggerRef",
-              ref: C,
+              ref: $,
               class: n(["p-2 -ml-2 text-muted-foreground hover:bg-accent rounded-md shrink-0", [f.value.mobileTrigger, l.mobileTriggerClass]]),
-              onClick: s[6] || (s[6] = (u) => i.value = !i.value)
+              onClick: o[6] || (o[6] = (d) => a.value = !a.value)
             }, [
-              m(B, {
+              b(z, {
                 icon: "lucide:menu",
                 class: "w-5 h-5"
               }),
-              s[17] || (s[17] = r("span", { class: "sr-only" }, "Open Menu", -1))
+              o[15] || (o[15] = t("span", { class: "sr-only" }, "Open Menu", -1))
             ], 2)
           ]),
-          e.$slots?.logo ? (t(), a("div", {
+          e.$slots?.left ? (r(), i("div", {
             key: 0,
-            class: n(["shrink-0", l.logoClass])
-          }, [
-            o(e.$slots, "logo", {}, () => [
-              (t(), $(J(l.logo ? "img" : "div"), {
-                src: l.logo,
-                class: "h-8 w-auto font-bold text-xl flex items-center gap-2"
-              }, {
-                default: v(() => [
-                  l.logo ? d("", !0) : (t(), $(Q, {
-                    key: 0,
-                    class: "h-6 w-6"
-                  })),
-                  !l.logo && l.logoAlt ? (t(), a("span", Ae, K(l.logoAlt), 1)) : l.logo ? d("", !0) : (t(), a("span", De, "Brand"))
-                ]),
-                _: 1
-              }, 8, ["src"]))
-            ])
-          ], 2)) : d("", !0),
-          e.$slots?.left ? (t(), a("div", {
-            key: 1,
             class: n(["items-center gap-1 overflow-x-auto no-scrollbar mask-gradient", f.value.desktopContent])
           }, [
-            o(e.$slots, "left")
-          ], 2)) : d("", !0)
+            s(e.$slots, "left")
+          ], 2)) : u("", !0)
         ]),
-        e.$slots?.center ? (t(), a("div", {
+        e.$slots?.center ? (r(), i("div", {
           key: 0,
-          class: n([E.value, "max-w-full", l.contentClass])
+          class: n([D.value, "max-w-full", l.contentClass])
         }, [
-          o(e.$slots, "center")
-        ], 2)) : d("", !0),
-        r("div", {
+          s(e.$slots, "center")
+        ], 2)) : u("", !0),
+        t("div", {
           class: n(["flex items-center gap-2 shrink-0 max-w-[40%] z-10", [
-            { "ml-auto": g.centerPosition === "left" || g.centerPosition === "center" },
+            { "ml-auto": v.centerPosition === "left" || v.centerPosition === "center" },
             l.rightClass
           ]])
         }, [
-          o(e.$slots, "right")
+          s(e.$slots, "right")
         ], 2)
-      ], 64)) : (t(), a(x, { key: 1 }, [
-        r("div", {
+      ], 64)) : (r(), i(x, { key: 1 }, [
+        t("div", {
           class: n(f.value.mobileHeader)
         }, [
-          e.$slots?.logo ? o(e.$slots, "logo", { key: 0 }, () => [
-            s[18] || (s[18] = r("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
-          ]) : d("", !0),
-          o(e.$slots, "mobile-trigger", {
-            isOpen: i.value,
-            toggle: () => i.value = !i.value
+          s(e.$slots, "mobile-trigger", {
+            isOpen: a.value,
+            toggle: () => a.value = !a.value
           }, () => [
-            r("button", {
+            t("button", {
               type: "button",
               ref_key: "mobileTriggerRef",
-              ref: C,
+              ref: $,
               class: n(["p-2 -mr-2 text-muted-foreground hover:bg-accent rounded-md", l.mobileTriggerClass]),
-              onClick: s[7] || (s[7] = (u) => i.value = !i.value)
+              onClick: o[7] || (o[7] = (d) => a.value = !a.value)
             }, [
-              m(B, {
+              b(z, {
                 icon: "lucide:menu",
                 class: "w-5 h-5"
               }),
-              s[19] || (s[19] = r("span", { class: "sr-only" }, "Open Menu", -1))
+              o[16] || (o[16] = t("span", { class: "sr-only" }, "Open Menu", -1))
             ], 2)
           ])
         ], 2),
-        r("div", {
+        t("div", {
           class: n(f.value.desktopSidebar)
         }, [
-          e.$slots?.logo ? (t(), a("div", {
-            key: 0,
-            class: n(["py-4.5 flex items-center px-4.5 z-10", l.logoClass])
-          }, [
-            o(e.$slots, "logo", {}, () => [
-              s[20] || (s[20] = r("div", { class: "font-bold text-xl truncate" }, "Brand", -1))
-            ])
-          ], 2)) : d("", !0),
-          r("div", {
+          t("div", {
             class: n(["flex-1 px-2.5 pt-0 pb-4 overflow-y-auto space-y-4 scrollbar-thin", l.contentClass])
           }, [
-            o(e.$slots, "left"),
-            o(e.$slots, "default"),
-            o(e.$slots, "center")
+            s(e.$slots, "left"),
+            s(e.$slots, "default"),
+            s(e.$slots, "center")
           ], 2),
-          e.$slots?.right ? (t(), a("div", {
-            key: 1,
+          e.$slots?.right ? (r(), i("div", {
+            key: 0,
             class: n(["p-2 border-t border-border shrink-0 bg-background mt-auto", l.rightClass])
           }, [
-            o(e.$slots, "right")
-          ], 2)) : d("", !0)
+            s(e.$slots, "right")
+          ], 2)) : u("", !0)
         ], 2)
       ], 64)),
-      l.mobileMenuVariant === "dropdown" ? (t(), a(x, { key: 2 }, [
-        i.value ? (t(), a("div", {
+      l.mobileMenuVariant === "dropdown" ? (r(), i(x, { key: 2 }, [
+        a.value ? (r(), i("div", {
           key: 0,
           ref_key: "mobileMenuRef",
-          ref: V,
+          ref: B,
           class: n(["absolute top-[calc(100%_+_1px)] left-0 w-full bg-body border border-border/50 shadow-xl z-50 flex flex-col transition-all duration-300 origin-top overflow-hidden will-change-transform", l.menuClass])
         }, [
-          r("div", Ee, [
-            o(e.$slots, "mobile-menu", {}, () => [
-              r("div", Fe, [
-                o(e.$slots, "left")
+          t("div", Re, [
+            s(e.$slots, "mobile-menu", {}, () => [
+              t("div", He, [
+                s(e.$slots, "left")
               ]),
-              s[21] || (s[21] = r("div", { class: "h-px bg-border/50 my-1 mx-2" }, null, -1)),
-              r("div", We, [
-                o(e.$slots, "center")
+              o[17] || (o[17] = t("div", { class: "h-px bg-border/50 my-1 mx-2" }, null, -1)),
+              t("div", je, [
+                s(e.$slots, "center")
               ])
             ])
           ])
-        ], 2)) : d("", !0)
-      ], 64)) : (t(), $(R, {
+        ], 2)) : u("", !0)
+      ], 64)) : (r(), G(P, {
         key: 3,
-        show: i.value,
-        "onUpdate:show": s[8] || (s[8] = (u) => i.value = u),
+        show: a.value,
+        "onUpdate:show": o[8] || (o[8] = (d) => a.value = d),
         position: "left",
         size: "sm",
         triggerClass: f.value.mobileTrigger,
@@ -669,27 +606,27 @@ const ve = {
         headerClass: "pl-3! pr-4.5! py-3!",
         bodyClass: "p-0!"
       }, {
-        header: v(() => [
-          o(e.$slots, "logo", {}, () => [
-            s[22] || (s[22] = P("Brand", -1))
+        header: g(() => [
+          s(e.$slots, "logo", {}, () => [
+            o[18] || (o[18] = L("Brand", -1))
           ])
         ]),
-        default: v(() => [
-          r("div", Ye, [
-            g.variant === "header" ? (t(), a("div", qe, [
-              o(e.$slots, "mobile-menu", {}, () => [
-                o(e.$slots, "left"),
-                s[23] || (s[23] = r("div", { class: "h-px bg-border my-2" }, null, -1)),
-                o(e.$slots, "center")
+        default: g(() => [
+          t("div", Ie, [
+            v.variant === "header" ? (r(), i("div", Ue, [
+              s(e.$slots, "mobile-menu", {}, () => [
+                s(e.$slots, "left"),
+                o[19] || (o[19] = t("div", { class: "h-px bg-border my-2" }, null, -1)),
+                s(e.$slots, "center")
               ])
-            ])) : (t(), a("div", Ge, [
-              o(e.$slots, "left"),
-              o(e.$slots, "default"),
-              o(e.$slots, "center")
+            ])) : (r(), i("div", Ee, [
+              s(e.$slots, "left"),
+              s(e.$slots, "default"),
+              s(e.$slots, "center")
             ])),
-            e.$slots?.right ? (t(), a("div", Je, [
-              o(e.$slots, "right")
-            ])) : d("", !0)
+            e.$slots?.right ? (r(), i("div", De, [
+              s(e.$slots, "right")
+            ])) : u("", !0)
           ])
         ]),
         _: 3
@@ -698,5 +635,5 @@ const ve = {
   }
 });
 export {
-  nl as default
+  el as default
 };

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/SidebarMenu/SidebarMenu.vue.d.ts

@@ -20,5 +20,6 @@ declare const _default: import('vue').DefineComponent<SidebarMenuProps, {}, {},
     nestedMenuWidth: string;
     nestedMenuMaxHeight: string;
     showTooltip: boolean;
+    forceTreeView: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLElement>;
 export default _default;

package/components/SidebarMenu/SidebarMenu.vue.js

@@ -1,9 +1,9 @@
-import { defineComponent as E, inject as N, ref as w, computed as l, watch as T, reactive as P, provide as L, openBlock as x, createElementBlock as k, normalizeClass as O, Fragment as W, renderList as H, createBlock as A } from "vue";
+import { defineComponent as P, inject as N, ref as T, computed as l, watch as B, reactive as L, provide as O, openBlock as g, createElementBlock as k, normalizeClass as W, Fragment as H, renderList as R, createBlock as A } from "vue";
 import { useRoute as F } from "vue-router";
-import { useBreakpoints as R, breakpointsTailwind as _ } from "@vueuse/core";
+import { useBreakpoints as V, breakpointsTailwind as _ } from "@vueuse/core";
 import j from "./SidebarMenuItem.vue.js";
 /* empty css                     */
-const U = /* @__PURE__ */ E({
+const U = /* @__PURE__ */ P({
   __name: "SidebarMenu",
   props: {
     items: { default: () => [] },
@@ -26,121 +26,123 @@ const U = /* @__PURE__ */ E({
     menuOffset: { default: () => [0, 10] },
     orientation: { default: "vertical" },
     mobileBreakpoint: { default: "none" },
-    showTooltip: { type: Boolean, default: !0 }
+    showTooltip: { type: Boolean, default: !0 },
+    forceTreeView: { type: Boolean, default: !1 }
   },
   setup(m) {
-    const c = N("navbar-context", null), a = m, f = F(), B = R(_), o = w([...a.defaultExpanded]), v = w(null), y = l(() => !a.mobileBreakpoint || a.mobileBreakpoint === "none" ? !0 : B.greaterOrEqual(a.mobileBreakpoint).value), h = l(() => y.value && a.orientation || "vertical"), p = (e) => e.id || (typeof e.to == "string" ? e.to : null) || e.label, b = (e, n) => {
+    const d = N("navbar-context", null), t = m, f = F(), y = V(_), s = T([...t.defaultExpanded]), v = T(null), z = l(() => !t.mobileBreakpoint || t.mobileBreakpoint === "none" ? !0 : y.greaterOrEqual(t.mobileBreakpoint).value), h = l(() => z.value && t.orientation || "vertical"), x = l(() => t.forceTreeView ? !1 : !!d?.renderNestedTabs?.value), p = (e) => e.id || (typeof e.to == "string" ? e.to : null) || e.label, b = (e, n) => {
       if (!e.to) return !1;
-      const t = typeof e.to == "string" ? e.to : e.to.path;
-      if (!t) return !1;
-      if (n === t) return !0;
-      if (t !== "/" && t.length > 1 && n.startsWith(t)) {
-        const i = n[t.length];
+      const a = typeof e.to == "string" ? e.to : e.to.path;
+      if (!a) return !1;
+      if (n === a) return !0;
+      if (a !== "/" && a.length > 1 && n.startsWith(a)) {
+        const i = n[a.length];
         return !i || i === "/" || i === "?";
       }
       return !1;
-    }, g = (e, n, t = []) => {
+    }, w = (e, n, a = []) => {
       for (const i of e) {
         const u = p(i);
         if (i.children?.length) {
-          const r = g(i.children, n, [...t, u]);
+          const r = w(i.children, n, [...a, u]);
           if (r !== null)
-            return o.value.includes(u) || o.value.push(u), r;
+            return s.value.includes(u) || s.value.push(u), r;
         }
         if (b(i, n))
-          return t.forEach((r) => {
-            o.value.includes(r) || o.value.push(r);
+          return a.forEach((r) => {
+            s.value.includes(r) || s.value.push(r);
           }), u;
       }
       return null;
     }, C = (e, n) => {
-      for (const t of a.items) {
-        if (!t.children?.length || !(b(t, e) || t.children.some(
-          (s) => b(s, e) || s.children?.some((d) => b(d, e))
+      for (const a of t.items) {
+        if (!a.children?.length || !(b(a, e) || a.children.some(
+          (o) => b(o, e) || o.children?.some((c) => b(c, e))
         ))) continue;
-        const u = t.children.map((s) => ({
-          label: s.label,
-          labelI18n: s.labelI18n,
-          value: p(s),
-          icon: s.icon,
-          disabled: s.disabled,
-          to: s.to,
-          href: s.href
+        const u = a.children.map((o) => ({
+          label: o.label,
+          labelI18n: o.labelI18n,
+          value: p(o),
+          icon: o.icon,
+          disabled: o.disabled,
+          to: o.to,
+          href: o.href
         }));
         let r = u[0]?.value ?? "";
         if (n) {
-          const s = u.find((d) => d.value === n);
-          if (s)
-            r = s.value;
+          const o = u.find((c) => c.value === n);
+          if (o)
+            r = o.value;
           else {
-            const d = t.children.find(
-              (S) => S.children?.some((I) => p(I) === n)
+            const c = a.children.find(
+              (I) => I.children?.some((E) => p(E) === n)
             );
-            d && (r = p(d));
+            c && (r = p(c));
           }
         }
         return { tabs: u, activeTab: r };
       }
       return null;
     }, M = (e) => {
-      const n = g(a.items, e);
-      if (v.value = n, !c?.renderNestedTabs?.value) return;
-      const t = C(e, n);
-      t ? c.setNestedTabs(t.tabs, t.activeTab) : c.setNestedTabs([], "");
+      const n = w(t.items, e);
+      if (v.value = n, !x.value) return;
+      const a = C(e, n);
+      a ? d.setNestedTabs(a.tabs, a.activeTab) : d.setNestedTabs([], "");
     };
-    T(
+    B(
       () => f?.path,
       (e) => {
         e && M(e);
       },
       { immediate: !0 }
-    ), T(
-      () => a.items,
+    ), B(
+      () => t.items,
       () => {
         f?.path && M(f.path);
       },
       { deep: !0 }
     );
-    const z = P({
+    const S = L({
       activeItem: v,
-      expandedItems: o,
+      expandedItems: s,
       toggleExpand: (e) => {
-        o.value.includes(e) ? o.value = o.value.filter((t) => t !== e) : a.allowMultiple ? o.value.push(e) : o.value = [e];
+        s.value.includes(e) ? s.value = s.value.filter((a) => a !== e) : t.allowMultiple ? s.value.push(e) : s.value = [e];
       },
       setActive: (e) => {
-        if (v.value = e, c?.renderNestedTabs?.value && f?.path) {
+        if (v.value = e, x.value && f?.path) {
           const n = C(f.path, e);
-          n ? c.setNestedTabs(n.tabs, n.activeTab) : c.setNestedTabs([], "");
+          n ? d.setNestedTabs(n.tabs, n.activeTab) : d.setNestedTabs([], "");
         }
       },
-      indentSize: l(() => a.indentSize),
-      variant: l(() => a.variant),
-      renderMode: l(() => a.renderMode || "tree"),
-      renderNestedTabs: l(() => !!c?.renderNestedTabs?.value),
-      compact: l(() => a.compact),
-      showCompactLabels: l(() => a.showCompactLabels),
-      iconSize: l(() => a.iconSize),
-      compactIconSize: l(() => a.compactIconSize),
-      labelClass: l(() => a.labelClass),
-      compactLabelClass: l(() => a.compactLabelClass),
-      itemPadding: l(() => a.itemPadding),
-      compactItemPadding: l(() => a.compactItemPadding),
-      nestedMenuWidth: l(() => a.nestedMenuWidth),
-      nestedMenuMaxHeight: l(() => a.nestedMenuMaxHeight),
+      indentSize: l(() => t.indentSize),
+      variant: l(() => t.variant),
+      renderMode: l(() => t.renderMode || "tree"),
+      // Expose the effective value so SidebarMenuItem respects forceTreeView
+      renderNestedTabs: x,
+      compact: l(() => t.compact),
+      showCompactLabels: l(() => t.showCompactLabels),
+      iconSize: l(() => t.iconSize),
+      compactIconSize: l(() => t.compactIconSize),
+      labelClass: l(() => t.labelClass),
+      compactLabelClass: l(() => t.compactLabelClass),
+      itemPadding: l(() => t.itemPadding),
+      compactItemPadding: l(() => t.compactItemPadding),
+      nestedMenuWidth: l(() => t.nestedMenuWidth),
+      nestedMenuMaxHeight: l(() => t.nestedMenuMaxHeight),
       currentOrientation: h,
-      showTooltip: l(() => a.showTooltip)
+      showTooltip: l(() => t.showTooltip)
     });
-    return L("sidebar-menu-ctx", z), (e, n) => (x(), k("nav", {
-      class: O(["flex w-full transition-all duration-300", [
+    return O("sidebar-menu-ctx", S), (e, n) => (g(), k("nav", {
+      class: W(["flex w-full transition-all duration-300", [
         h.value === "horizontal" ? "flex-row flex-wrap gap-2 items-center" : "flex-col",
-        h.value === "vertical" && !a.compact ? "space-y-1" : ""
+        h.value === "vertical" && !t.compact ? "space-y-1" : ""
       ]]),
       role: "tree",
       "aria-label": "Sidebar Menu"
     }, [
-      (x(!0), k(W, null, H(m.items, (t) => (x(), A(j, {
-        key: t.id || t.label,
-        item: t,
+      (g(!0), k(H, null, R(m.items, (a) => (g(), A(j, {
+        key: a.id || a.label,
+        item: a,
         itemClass: m.itemClass,
         menuOffset: m.menuOffset
       }, null, 8, ["item", "itemClass", "menuOffset"]))), 128))

package/components/SidebarMenu/types.d.ts

@@ -38,6 +38,11 @@ export interface SidebarMenuProps {
     orientation?: 'vertical' | 'horizontal';
     mobileBreakpoint?: 'sm' | 'md' | 'lg' | 'xl' | 'none';
     showTooltip?: boolean;
+    /**
+     * When true, forces tree view rendering regardless of the navbar's renderNestedTabs context.
+     * Useful for showing the full tree on small screens even when renderNestedTabs is active.
+     */
+    forceTreeView?: boolean;
 }
 export interface SidebarMenuContext {
     activeItem: string | null;

package/package.json

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