vlite3 1.1.2 → 1.1.5

package/components/SidebarMenu/SidebarMenu.vue.js

@@ -1,9 +1,16 @@
-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 V, breakpointsTailwind as _ } from "@vueuse/core";
-import j from "./SidebarMenuItem.vue.js";
+import { defineComponent as Y, inject as Z, ref as y, computed as r, watch as I, reactive as ee, provide as te, openBlock as d, createElementBlock as m, normalizeClass as V, createVNode as D, TransitionGroup as le, withCtx as ne, createBlock as B, createCommentVNode as S, createElementVNode as R, toDisplayString as ae, Fragment as W, renderList as H } from "vue";
+import { useRoute as re, useRouter as oe } from "vue-router";
+import { useBreakpoints as ie, breakpointsTailwind as se } from "@vueuse/core";
+import F from "./SidebarMenuItem.vue.js";
 /* empty css                     */
-const U = /* @__PURE__ */ P({
+import $ from "../Icon.vue.js";
+const ue = {
+  key: 0,
+  class: "w-full sidebar-drilldown-container relative overflow-hidden"
+}, ce = { class: "truncate font-semibold text-foreground" }, de = {
+  key: 1,
+  class: "h-px bg-border/60 mx-1 mb-1.5"
+}, ge = /* @__PURE__ */ Y({
   __name: "SidebarMenu",
   props: {
     items: { default: () => [] },
@@ -29,126 +36,220 @@ const U = /* @__PURE__ */ P({
     showTooltip: { type: Boolean, default: !1 },
     forceTreeView: { type: Boolean, default: !1 }
   },
-  setup(m) {
-    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) => {
+  setup(v) {
+    const b = Z("navbar-context", null), l = v, p = re();
+    oe();
+    const j = ie(se), c = y([...l.defaultExpanded]), C = y(null), o = y([]), g = y("forward"), w = r(() => o.value.length > 0), M = r(() => o.value.length === 0 ? l.items : o.value[o.value.length - 1].items), q = r(() => o.value.length === 0 ? "" : o.value[o.value.length - 1].label), P = r(() => {
+      if (o.value.length !== 0)
+        return o.value[o.value.length - 1].icon;
+    }), A = (e) => {
+      e.children?.length && (g.value = "forward", o.value = [
+        ...o.value,
+        { items: e.children, label: e.label, icon: e.icon }
+      ]);
+    }, z = () => {
+      o.value.length !== 0 && (g.value = "backward", o.value = o.value.slice(0, -1));
+    }, G = r(() => !l.mobileBreakpoint || l.mobileBreakpoint === "none" ? !0 : j.greaterOrEqual(l.mobileBreakpoint).value), x = r(() => G.value && l.orientation || "vertical"), T = r(() => l.forceTreeView ? !1 : !!b?.renderNestedTabs?.value), k = (e) => e.id || (typeof e.to == "string" ? e.to : null) || e.label, f = (e, n) => {
       if (!e.to) return !1;
-      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 === "?";
+      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 a = n[t.length];
+        return !a || a === "/" || a === "?";
       }
       return !1;
-    }, w = (e, n, a = []) => {
-      for (const i of e) {
-        const u = p(i);
-        if (i.children?.length) {
-          const r = w(i.children, n, [...a, u]);
-          if (r !== null)
-            return s.value.includes(u) || s.value.push(u), r;
+    }, N = (e, n, t = []) => {
+      for (const a of e) {
+        const u = k(a);
+        if (a.children?.length) {
+          const s = N(a.children, n, [...t, u]);
+          if (s !== null)
+            return c.value.includes(u) || c.value.push(u), s;
         }
-        if (b(i, n))
-          return a.forEach((r) => {
-            s.value.includes(r) || s.value.push(r);
+        if (f(a, n))
+          return t.forEach((s) => {
+            c.value.includes(s) || c.value.push(s);
           }), u;
       }
       return null;
-    }, C = (e, n) => {
-      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))
+    }, E = (e, n) => {
+      for (const t of l.items) {
+        if (!t.children?.length || !(f(t, e) || t.children.some(
+          (i) => f(i, e) || i.children?.some((h) => f(h, e))
         ))) continue;
-        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
+        const u = t.children.map((i) => ({
+          label: i.label,
+          labelI18n: i.labelI18n,
+          value: k(i),
+          icon: i.icon,
+          disabled: i.disabled,
+          to: i.to,
+          href: i.href
         }));
-        let r = u[0]?.value ?? "";
+        let s = u[0]?.value ?? "";
         if (n) {
-          const o = u.find((c) => c.value === n);
-          if (o)
-            r = o.value;
+          const i = u.find((h) => h.value === n);
+          if (i)
+            s = i.value;
           else {
-            const c = a.children.find(
-              (I) => I.children?.some((E) => p(E) === n)
+            const h = t.children.find(
+              (U) => U.children?.some((X) => k(X) === n)
             );
-            c && (r = p(c));
+            h && (s = k(h));
           }
         }
-        return { tabs: u, activeTab: r };
+        return { tabs: u, activeTab: s };
       }
       return null;
-    }, M = (e) => {
-      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([], "");
+    }, O = (e) => {
+      const n = N(l.items, e);
+      if (C.value = n, !T.value) return;
+      const t = E(e, n);
+      t ? b.setNestedTabs(t.tabs, t.activeTab) : b.setNestedTabs([], "");
     };
-    B(
-      () => f?.path,
+    I(
+      () => p?.path,
       (e) => {
-        e && M(e);
+        e && O(e);
       },
       { immediate: !0 }
-    ), B(
-      () => t.items,
+    ), I(
+      () => l.items,
       () => {
-        f?.path && M(f.path);
+        p?.path && O(p.path);
       },
       { deep: !0 }
     );
-    const S = L({
-      activeItem: v,
-      expandedItems: s,
-      toggleExpand: (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, x.value && f?.path) {
-          const n = C(f.path, e);
-          n ? d.setNestedTabs(n.tabs, n.activeTab) : d.setNestedTabs([], "");
+    const J = (e) => {
+      c.value.includes(e) ? c.value = c.value.filter((t) => t !== e) : l.allowMultiple ? c.value.push(e) : c.value = [e];
+    }, K = (e) => {
+      if (C.value = e, T.value && p?.path) {
+        const n = E(p.path, e);
+        n ? b.setNestedTabs(n.tabs, n.activeTab) : b.setNestedTabs([], "");
+      }
+    }, L = (e, n, t = []) => {
+      for (const a of e) {
+        if (t.length === 0 && f(a, n)) return null;
+        if (a.children?.length) {
+          const u = [
+            ...t,
+            { items: a.children, label: a.label, icon: a.icon }
+          ];
+          for (const i of a.children)
+            if (f(i, n)) return u;
+          const s = L(a.children, n, u);
+          if (s) return s;
         }
-      },
-      indentSize: l(() => t.indentSize),
-      variant: l(() => t.variant),
-      renderMode: l(() => t.renderMode || "tree"),
+      }
+      return null;
+    }, _ = (e, n) => {
+      for (const t of e)
+        if (f(t, n)) return !0;
+      return !1;
+    };
+    I(
+      () => p?.path,
+      (e) => {
+        if (!e || (l.renderMode || "tree") !== "drilldown") return;
+        const t = M.value;
+        if (_(t, e)) return;
+        if (_(l.items, e)) {
+          o.value.length > 0 && (g.value = "backward", o.value = []);
+          return;
+        }
+        const a = L(l.items, e);
+        a && a.length > 0 && (g.value = "forward", o.value = a);
+      }
+    );
+    const Q = ee({
+      activeItem: C,
+      expandedItems: c,
+      toggleExpand: J,
+      setActive: K,
+      indentSize: r(() => l.indentSize),
+      variant: r(() => l.variant),
+      renderMode: r(() => l.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(() => t.showTooltip)
+      renderNestedTabs: T,
+      compact: r(() => l.compact),
+      showCompactLabels: r(() => l.showCompactLabels),
+      iconSize: r(() => l.iconSize),
+      compactIconSize: r(() => l.compactIconSize),
+      labelClass: r(() => l.labelClass),
+      compactLabelClass: r(() => l.compactLabelClass),
+      itemPadding: r(() => l.itemPadding),
+      compactItemPadding: r(() => l.compactItemPadding),
+      nestedMenuWidth: r(() => l.nestedMenuWidth),
+      nestedMenuMaxHeight: r(() => l.nestedMenuMaxHeight),
+      currentOrientation: x,
+      showTooltip: r(() => l.showTooltip),
+      drilldownStack: o,
+      drillInto: A,
+      drillBack: z,
+      drilldownItems: M,
+      isDrilldown: w
     });
-    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" && !t.compact ? "space-y-1" : ""
+    return te("sidebar-menu-ctx", Q), (e, n) => (d(), m("nav", {
+      class: V(["flex w-full transition-all duration-300", [
+        x.value === "horizontal" ? "flex-row flex-wrap gap-2 items-center" : "flex-col",
+        x.value === "vertical" && !l.compact ? "space-y-1" : ""
       ]]),
       role: "tree",
       "aria-label": "Sidebar Menu"
     }, [
-      (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
+      (l.renderMode || "tree") === "drilldown" && x.value === "vertical" ? (d(), m("div", ue, [
+        D(le, {
+          name: g.value === "forward" ? "drill-forward" : "drill-backward",
+          tag: "div",
+          class: "relative w-full"
+        }, {
+          default: ne(() => [
+            (d(), m("div", {
+              key: o.value.length,
+              class: "w-full"
+            }, [
+              w.value ? (d(), m("button", {
+                key: 0,
+                type: "button",
+                class: "flex items-center gap-2 w-full px-2 py-2.5 mb-1 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-accent/60 rounded-md transition-all duration-150 group cursor-pointer",
+                onClick: z
+              }, [
+                D($, {
+                  icon: "lucide:chevron-left",
+                  class: "w-4 h-4 shrink-0 transition-transform duration-200 group-hover:-translate-x-0.5"
+                }),
+                P.value ? (d(), B($, {
+                  key: 0,
+                  icon: P.value,
+                  class: "w-4 h-4 shrink-0 opacity-70"
+                }, null, 8, ["icon"])) : S("", !0),
+                R("span", ce, ae(q.value), 1)
+              ])) : S("", !0),
+              w.value ? (d(), m("div", de)) : S("", !0),
+              R("div", {
+                class: V(w.value ? "space-y-0.5" : "space-y-1")
+              }, [
+                (d(!0), m(W, null, H(M.value, (t) => (d(), B(F, {
+                  key: t.id || t.label,
+                  item: t,
+                  itemClass: v.itemClass,
+                  menuOffset: v.menuOffset
+                }, null, 8, ["item", "itemClass", "menuOffset"]))), 128))
+              ], 2)
+            ]))
+          ]),
+          _: 1
+        }, 8, ["name"])
+      ])) : (d(!0), m(W, { key: 1 }, H(v.items, (t) => (d(), B(F, {
+        key: t.id || t.label,
+        item: t,
+        itemClass: v.itemClass,
+        menuOffset: v.menuOffset
       }, null, 8, ["item", "itemClass", "menuOffset"]))), 128))
     ], 2));
   }
 });
 export {
-  U as default
+  ge as default
 };

package/components/SidebarMenu/SidebarMenu.vue3.js

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