vlite3 0.6.7 → 0.6.9

package/components/SidebarMenu/SidebarMenu.vue.js

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

package/components/SidebarMenu/SidebarMenuItem.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as X, inject as Y, computed as c, resolveComponent as Z, openBlock as r, createElementBlock as f, normalizeClass as u, createBlock as h, unref as n, withCtx as b, createElementVNode as p, normalizeStyle as M, createCommentVNode as d, toDisplayString as g, createVNode as S, resolveDynamicComponent as B, mergeProps as D, createTextVNode as ee, Fragment as V, withKeys as te, withModifiers as ae, Transition as ne, renderList as ie } from "vue";
+import { defineComponent as X, inject as Y, computed as s, resolveComponent as Z, openBlock as r, createElementBlock as f, normalizeClass as u, createBlock as h, unref as n, withCtx as b, createElementVNode as v, normalizeStyle as M, createCommentVNode as d, toDisplayString as g, createVNode as S, resolveDynamicComponent as B, mergeProps as D, createTextVNode as ee, Fragment as V, withKeys as te, withModifiers as ae, Transition as ne, renderList as ie } from "vue";
 import { useRouter as oe } from "vue-router";
 import w from "../Icon.vue.js";
 import K from "../Tooltip.vue.js";
@@ -8,7 +8,7 @@ import { $t as O } from "../../utils/i18n.js";
 const re = {
   key: 0,
   class: "px-3 py-1.5 text-sm flex items-center gap-2 font-medium border-b bg-muted-light rounded-t-md text-center truncate"
-}, se = { class: "w-full" }, ce = { class: "flex items-center w-full gap-2 text-sm" }, ue = { class: "truncate flex-1 font-medium" }, de = ["onKeydown"], me = {
+}, ce = { class: "w-full" }, se = { class: "flex items-center w-full gap-2 text-sm" }, ue = { class: "truncate flex-1 font-medium" }, de = ["onKeydown"], me = {
   key: 0,
   class: "overflow-hidden transition-all duration-300 ease-in-out relative"
 }, fe = { class: "mt-0.5 space-y-0.5" }, we = /* @__PURE__ */ X({
@@ -19,13 +19,13 @@ const re = {
     menuOffset: {},
     itemClass: {}
   },
-  setup(s) {
-    const t = s, e = Y("sidebar-menu-ctx"), k = oe();
+  setup(c) {
+    const t = c, e = Y("sidebar-menu-ctx"), k = oe();
     if (!e)
       throw new Error("SidebarMenuItem must be used within a SidebarMenu");
-    const i = c(
+    const i = s(
       () => e.currentOrientation === "horizontal" && t.depth === 0
-    ), v = c(() => !!t.item.children?.length), R = c(() => i.value && v.value || e.compact && v.value ? "popover" : t.item.renderMode || e.renderMode || "tree"), I = c(() => e.renderNestedTabs && t.depth === 0 ? !1 : R.value === "popover" && v.value), y = c(() => t.item.id ? t.item.id : t.item.to && typeof t.item.to == "string" ? t.item.to : t.item.label), E = c(() => I.value || e.renderNestedTabs && t.depth === 0 ? !1 : e.expandedItems.includes(y.value)), j = c(() => !(!v.value || e.renderNestedTabs && t.depth === 0)), z = c(() => e.activeItem === y.value), L = (o) => {
+    ), p = s(() => !!t.item.children?.length), R = s(() => i.value && p.value || e.compact && p.value ? "popover" : t.item.renderMode || e.renderMode || "tree"), I = s(() => e.renderNestedTabs && t.depth === 0 ? !1 : R.value === "popover" && p.value), y = s(() => t.item.id ? t.item.id : t.item.to && typeof t.item.to == "string" ? t.item.to : t.item.label), E = s(() => I.value || e.renderNestedTabs && t.depth === 0 ? !1 : e.expandedItems.includes(y.value)), j = s(() => !(!p.value || e.renderNestedTabs && t.depth === 0)), z = s(() => e.activeItem === y.value), L = (o) => {
       if (!t.item.disabled) {
         if (e.renderNestedTabs && t.depth === 0) {
           if (t.item.action && t.item.action(t.item), t.item.to)
@@ -33,7 +33,7 @@ const re = {
             });
           else if (t.item.href)
             window.open(t.item.href, "_blank");
-          else if (v.value) {
+          else if (p.value) {
             const a = t.item.children?.[0];
             a && (a.to ? k.push(a.to).catch(() => {
             }) : a.href && window.open(a.href, "_blank"));
@@ -41,7 +41,7 @@ const re = {
           e.setActive(y.value);
           return;
         }
-        v.value && !t.item.to && !t.item.href && (I.value || e.toggleExpand(y.value)), t.item.action && t.item.action(t.item), (!v.value || t.item.to) && e.setActive(y.value);
+        p.value && !t.item.to && !t.item.href && (I.value || e.toggleExpand(y.value)), t.item.action && t.item.action(t.item), (!p.value || t.item.to) && e.setActive(y.value);
       }
     }, N = (o) => {
       if (o.stopPropagation(), e.renderNestedTabs && t.depth === 0) {
@@ -50,7 +50,7 @@ const re = {
           });
         else if (t.item.href)
           window.open(t.item.href, "_blank");
-        else if (v.value) {
+        else if (p.value) {
           const a = t.item.children?.[0];
           a && (a.to ? k.push(a.to).catch(() => {
           }) : a.href && window.open(a.href, "_blank"));
@@ -59,14 +59,14 @@ const re = {
         return;
       }
       I.value || e.toggleExpand(y.value);
-    }, $ = c(() => e.indentSize || 12), T = c(() => i.value ? {} : e.compact ? { width: "100%" } : {
+    }, $ = s(() => e.indentSize || 12), T = s(() => i.value ? {} : e.compact ? { width: "100%" } : {
       marginLeft: `${t.depth * $.value}px`,
       width: `calc(100% - ${t.depth * $.value}px)`
-    }), _ = c(() => {
-      const a = `group flex items-center justify-between font-medium rounded-md transition-all duration-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 relative border border-transparent select-none cursor-pointer ${i.value ? "w-auto" : "w-full"} ${t?.itemClass || ""} ${e.labelClass}`, x = e.compact ? `justify-center ${e.compactItemPadding}` : `justify-between ${e.itemPadding}`;
+    }), _ = s(() => {
+      const a = `group flex items-center justify-between font-medium rounded-md  focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 relative border border-transparent select-none cursor-pointer ${i.value ? "w-auto" : "w-full"} ${t?.itemClass || ""} ${e.labelClass}`, x = e.compact ? `justify-center ${e.compactItemPadding}` : `justify-between ${e.itemPadding}`;
       let l = "";
       return z.value ? l = "bg-primary-light text-primary-fg-light" : l = "text-muted hover:bg-accent/80 hover:text-foreground", t.item.disabled && (l = "opacity-50 cursor-not-allowed pointer-events-none"), `${a} ${x} ${l} ${t.item.class || ""}`;
-    }), m = c(() => e.compact && e.showCompactLabels), C = c(
+    }), m = s(() => e.compact && e.showCompactLabels), C = s(
       () => t.item.labelI18n ? O(t.item.labelI18n) : t.item.label
     ), A = (o) => ({
       label: o.labelI18n ? O(o.labelI18n) : o.label,
@@ -75,7 +75,7 @@ const re = {
       disabled: o.disabled,
       children: o.children ? o.children.map(A) : void 0,
       data: o
-    }), F = c(() => t.item.children ? t.item.children.map(A) : []), W = (o) => {
+    }), F = s(() => t.item.children ? t.item.children.map(A) : []), W = (o) => {
       const a = o.data;
       if (a) {
         a.action && a.action(a);
@@ -98,7 +98,7 @@ const re = {
     }, U = (o) => {
       const a = o;
       a.style.height = "0", a.style.opacity = "0";
-    }, H = c(() => t.item.to ? "router-link" : t.item.href ? "a" : "button"), P = c(() => t.item.to ? { to: t.item.to } : t.item.href ? {
+    }, H = s(() => t.item.to ? "router-link" : t.item.href ? "a" : "button"), P = s(() => t.item.to ? { to: t.item.to } : t.item.href ? {
       href: t.item.href,
       target: "_blank",
       rel: "noopener noreferrer"
@@ -111,7 +111,7 @@ const re = {
         I.value ? (r(), h(n(le), {
           key: 0,
           position: i.value ? "bottom-start" : "right-start",
-          offset: s.menuOffset,
+          offset: c.menuOffset,
           class: "w-full block",
           searchable: !1,
           width: n(e).nestedMenuWidth,
@@ -121,9 +121,9 @@ const re = {
         }, {
           header: b(() => [
             n(e).compact && !i.value ? (r(), f("div", re, [
-              s.item.icon ? (r(), h(w, {
+              c.item.icon ? (r(), h(w, {
                 key: 0,
-                icon: s.item.icon,
+                icon: c.item.icon,
                 class: "shrink-0 transition-colors opacity-80 group-hover:opacity-100"
               }, null, 8, ["icon"])) : d("", !0),
               ee(" " + g(C.value), 1)
@@ -138,7 +138,7 @@ const re = {
               class: "w-full block"
             }, {
               default: b(() => [
-                p("div", se, [
+                v("div", ce, [
                   (r(), h(B(H.value), D(P.value, {
                     class: [_.value, l ? "bg-muted text-foreground" : ""],
                     style: T.value,
@@ -147,36 +147,36 @@ const re = {
                     onClick: L
                   }), {
                     default: b(() => [
-                      p("div", {
+                      v("div", {
                         class: u(["min-w-0 flex-1 flex", [
                           m.value && !i.value ? "flex-col items-center justify-center gap-1" : n(e).compact && !i.value ? "justify-center" : "items-center gap-2.5"
                         ]])
                       }, [
-                        s.item.icon ? (r(), h(w, {
+                        c.item.icon ? (r(), h(w, {
                           key: 0,
-                          icon: s.item.icon,
+                          icon: c.item.icon,
                           class: u(["shrink-0 transition-colors opacity-80 group-hover:opacity-100", [z.value || l ? "opacity-100" : ""]]),
                           style: M({
                             width: n(e).compact && !i.value ? n(e).compactIconSize : n(e).iconSize,
                             height: n(e).compact && !i.value ? n(e).compactIconSize : n(e).iconSize
                           })
                         }, null, 8, ["icon", "class", "style"])) : d("", !0),
-                        p("span", {
-                          class: u(["truncate leading-none pt-0.5", {
+                        v("span", {
+                          class: u(["truncate leading-none pt-0.5 text-wrap", {
                             [n(e).compactLabelClass]: m.value && !i.value,
                             hidden: n(e).compact && !m.value && !i.value,
                             "md:hidden": n(e).compact && !m.value && !i.value
                           }])
                         }, g(C.value), 3),
-                        s.item.badge && (!n(e).compact || !m.value || i.value) ? (r(), f("span", {
+                        c.item.badge && (!n(e).compact || !m.value || i.value) ? (r(), f("span", {
                           key: 1,
                           class: u(["ml-auto inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium", [
-                            s.item.badgeClass || "bg-muted text-muted-foreground",
+                            c.item.badgeClass || "bg-muted text-muted-foreground",
                             { "md:hidden": n(e).compact && !i.value }
                           ]])
-                        }, g(s.item.badge), 3)) : d("", !0)
+                        }, g(c.item.badge), 3)) : d("", !0)
                       ], 2),
-                      p("div", {
+                      v("div", {
                         class: u(["ml-1.5 flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground", { "md:hidden": n(e).compact && !i.value }])
                       }, [
                         S(w, {
@@ -193,14 +193,14 @@ const re = {
             }, 1032, ["content", "placement", "disabled"])
           ]),
           item: b(({ option: l }) => [
-            p("div", ce, [
+            v("div", se, [
               l.icon ? (r(), h(w, {
                 key: 0,
                 icon: l.icon,
                 class: "shrink-0 opacity-80",
                 style: M({ width: n(e).iconSize, height: n(e).iconSize })
               }, null, 8, ["icon", "style"])) : d("", !0),
-              p("span", ue, g(l.label), 1),
+              v("span", ue, g(l.label), 1),
               l.data?.badge ? (r(), f("span", {
                 key: 1,
                 class: u(["ml-auto inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium", l.data?.badgeClass || "bg-muted text-muted-foreground"])
@@ -224,34 +224,34 @@ const re = {
                 onClick: L
               }), {
                 default: b(() => [
-                  p("div", {
+                  v("div", {
                     class: u(["min-w-0 flex-1 flex py-0.5", [
                       m.value && !i.value ? "flex-col items-center justify-center gap-1" : n(e).compact && !i.value ? "justify-center" : "items-center gap-2.5"
                     ]])
                   }, [
-                    s.item.icon ? (r(), h(w, {
+                    c.item.icon ? (r(), h(w, {
                       key: 0,
-                      icon: s.item.icon,
+                      icon: c.item.icon,
                       class: u(["shrink-0 transition-colors opacity-80 group-hover:opacity-100", [z.value ? "opacity-100" : ""]]),
                       style: M({
                         width: n(e).compact && !i.value ? n(e).compactIconSize : n(e).iconSize,
                         height: n(e).compact && !i.value ? n(e).compactIconSize : n(e).iconSize
                       })
                     }, null, 8, ["icon", "class", "style"])) : d("", !0),
-                    p("span", {
+                    v("span", {
                       class: u(["truncate leading-none pt-0.5 wrap-break-word flex-wrap text-wrap", {
                         [n(e).compactLabelClass]: m.value && !i.value,
                         hidden: n(e).compact && !m.value && !i.value,
                         "md:hidden": n(e).compact && !m.value && !i.value
                       }])
                     }, g(C.value), 3),
-                    s.item.badge && (!n(e).compact || !m.value || i.value) ? (r(), f("span", {
+                    c.item.badge && (!n(e).compact || !m.value || i.value) ? (r(), f("span", {
                       key: 1,
                       class: u(["ml-auto inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium", [
-                        s.item.badgeClass || "bg-muted text-muted-foreground",
+                        c.item.badgeClass || "bg-muted text-muted-foreground",
                         { "md:hidden": n(e).compact && !i.value }
                       ]])
-                    }, g(s.item.badge), 3)) : d("", !0)
+                    }, g(c.item.badge), 3)) : d("", !0)
                   ], 2),
                   j.value ? (r(), f("div", {
                     key: 0,
@@ -281,19 +281,19 @@ const re = {
             onLeave: U
           }, {
             default: b(() => [
-              v.value && E.value && !i.value ? (r(), f("div", me, [
+              p.value && E.value && !i.value ? (r(), f("div", me, [
                 n(e).variant === "default" ? (r(), f("div", {
                   key: 0,
                   class: "absolute top-0 bottom-2 w-px bg-border",
                   style: M({
-                    left: `${(s.depth + 1) * $.value - $.value / 2}px`
+                    left: `${(c.depth + 1) * $.value - $.value / 2}px`
                   })
                 }, null, 4)) : d("", !0),
-                p("div", fe, [
-                  (r(!0), f(V, null, ie(s.item.children, (l) => (r(), h(x, {
+                v("div", fe, [
+                  (r(!0), f(V, null, ie(c.item.children, (l) => (r(), h(x, {
                     key: l.id || l.label,
                     item: l,
-                    depth: s.depth + 1
+                    depth: c.depth + 1
                   }, null, 8, ["item", "depth"]))), 128))
                 ])
               ])) : d("", !0)

package/components/Tabes/Tabes.vue.d.ts

@@ -6,6 +6,11 @@ interface Props {
     variant?: TabesVariant;
     block?: boolean;
     textClass?: string;
+    /**
+     * When true, tabs wrap to multiple rows on small screens instead of scrolling.
+     * Default: false (horizontal scroll behavior)
+     */
+    wrap?: boolean;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     change: (value: string | number) => any;
@@ -17,6 +22,7 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     variant: TabesVariant;
     size: TabesSize;
     block: boolean;
+    wrap: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     containerRef: HTMLDivElement;
 }, HTMLDivElement>;