@cypress-design/vue-docmenu 0.4.0 → 0.4.2

package/dist/_DocGroupElements.vue.d.ts

@@ -0,0 +1,43 @@
+import { DefineComponent } from 'vue';
+import { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu';
+declare function reTriggerSetActiveGroup(): void;
+declare const _default: DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    items: (NavGroup | NavItemLink)[];
+    activePath?: string | undefined;
+    collapsible: boolean;
+    linkComponent: DefineComponent | 'a';
+    depth: number;
+}>, {
+    reTriggerSetActiveGroup: typeof reTriggerSetActiveGroup;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    updateActivePosition: (opts?: {
+        top: number;
+        height: number;
+    } | undefined) => void;
+    hideMarker: () => void;
+    updateMarkerPosition: () => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    items: (NavGroup | NavItemLink)[];
+    activePath?: string | undefined;
+    collapsible: boolean;
+    linkComponent: DefineComponent | 'a';
+    depth: number;
+}>>> & {
+    onUpdateActivePosition?: ((opts?: {
+        top: number;
+        height: number;
+    } | undefined) => any) | undefined;
+    onHideMarker?: (() => any) | undefined;
+    onUpdateMarkerPosition?: (() => any) | undefined;
+}, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+//# sourceMappingURL=_DocGroupElements.vue.d.ts.map

package/dist/_DocGroupElements.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_DocGroupElements.vue.d.ts","sourceRoot":"","sources":["../_DocGroupElements.vue.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAO,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAgCzE,iBAAS,uBAAuB,SAO/B;;WAoJQ,CAAC,QAAQ,GAAG,WAAW,CAAC,EAAE;;iBAEpB,OAAO;mBACL,eAAe,GAAG,GAAG;WAC7B,MAAM;;;;;;;;;;;WAJN,CAAC,QAAQ,GAAG,WAAW,CAAC,EAAE;;iBAEpB,OAAO;mBACL,eAAe,GAAG,GAAG;WAC7B,MAAM;;;;;;;;;AAXf,wBAcG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}

package/dist/_DocLink.vue.d.ts

@@ -1,20 +1,35 @@
-import type { DefineComponent } from 'vue';
+import { type DefineComponent } from 'vue';
 import type { NavItemLink } from '@cypress-design/constants-docmenu';
+declare function setActiveMarkerPosition(): void;
 declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     item: NavItemLink;
+    active: boolean;
     collapsible: boolean;
     depth?: number | undefined;
     linkComponent: DefineComponent | 'a';
 }>, {
     depth: number;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}>, {
+    setActiveMarkerPosition: typeof setActiveMarkerPosition;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:active": (active: boolean, opts?: {
+        top: number;
+        height: number;
+    } | undefined) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     item: NavItemLink;
+    active: boolean;
     collapsible: boolean;
     depth?: number | undefined;
     linkComponent: DefineComponent | 'a';
 }>, {
     depth: number;
-}>>>, {
+}>>> & {
+    "onUpdate:active"?: ((active: boolean, opts?: {
+        top: number;
+        height: number;
+    } | undefined) => any) | undefined;
+}, {
     depth: number;
 }, {}>;
 export default _default;

package/dist/_DocLink.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"_DocLink.vue.d.ts","sourceRoot":"","sources":["../_DocLink.vue.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,KAAK,CAAA;AAC1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;;UA+G1D,WAAW;iBACJ,OAAO;;mBAEL,eAAe,GAAG,GAAG;;;;UAH9B,WAAW;iBACJ,OAAO;;mBAEL,eAAe,GAAG,GAAG;;;;WAD5B,MAAM;;AARlB,wBAWG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"_DocLink.vue.d.ts","sourceRoot":"","sources":["../_DocLink.vue.ts"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,eAAe,EAAkB,MAAM,KAAK,CAAA;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AA2BpE,iBAAS,uBAAuB,SAU/B;;UA4HS,WAAW;YACT,OAAO;iBACF,OAAO;;mBAEL,eAAe,GAAG,GAAG;;;;;;;;;;;UAJ9B,WAAW;YACT,OAAO;iBACF,OAAO;;mBAEL,eAAe,GAAG,GAAG;;;;;;;;;WAD5B,MAAM;;AAVlB,wBAcG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/index.es.mjs

@@ -1,179 +1,258 @@
-import { defineComponent as v, openBlock as t, createElementBlock as p, normalizeClass as a, createBlock as u, resolveDynamicComponent as x, withCtx as B, normalizeStyle as w, createCommentVNode as k, createTextVNode as $, toDisplayString as D, ref as C, computed as g, Fragment as d, unref as m, withDirectives as G, createElementVNode as H, renderList as z, createVNode as S, vShow as L } from "vue";
-import { IconChevronDownSmall as M } from "@cypress-design/vue-icon";
-const b = {
-  button: "flex leading-[24px] py-[10px] items-center relative w-full",
+import { defineComponent as y, ref as c, computed as B, watch as M, nextTick as G, openBlock as p, createElementBlock as d, Fragment as $, createBlock as b, resolveDynamicComponent as w, normalizeClass as k, unref as g, withCtx as S, createCommentVNode as A, createTextVNode as D, toDisplayString as T, withDirectives as U, createVNode as C, vShow as x, onMounted as H, normalizeStyle as z, renderList as R } from "vue";
+import { IconChevronDownSmall as F } from "@cypress-design/vue-icon";
+const P = {
+  button: "flex leading-[24px] py-[10px] items-center relative w-full text-start",
   topButton: "leading-[24px] text-[16px] pl-[24px] font-medium",
   leafButton: "leading-[20px] text-[14px] pl-[40px]"
-}, N = /* @__PURE__ */ v({
-  __name: "_DocLink",
-  props: {
-    item: {},
-    collapsible: { type: Boolean },
-    depth: { default: -1 },
-    linkComponent: {}
-  },
-  setup(h) {
-    return (l, o) => (t(), p("li", {
-      class: a(["list-none p-0", {
-        "pl-[16px]": l.depth >= 0
-      }])
-    }, [
-      (t(), u(x(l.linkComponent), {
-        class: a(["group relative block w-full pl-[24px]", {
-          "text-indigo-500": l.item.active,
-          "py-[8px] text-[16px] leading-[24px]": l.depth < 0,
-          "leading-[20px] text-[14px] py-[12px]": l.depth >= 0
-        }]),
-        href: l.item.href
-      }, {
-        default: B(() => [
-          l.depth >= 0 ? (t(), p("div", {
-            key: 0,
-            class: a(["absolute h-[80%] top-[10%] w-[4px] z-10 rounded-full hidden", {
-              "group-hover:block bg-gray-300": !l.item.active && l.collapsible
-            }]),
-            style: w({
-              left: `-${18.5 + l.depth * 7.5}px`
-            })
-          }, null, 6)) : k("", !0),
-          $(" " + D(l.item.label), 1)
-        ]),
-        _: 1
-      }, 8, ["class", "href"]))
-    ], 2));
-  }
-}), O = {
-  key: 0,
-  class: "relative list-none p-0"
-}, V = /* @__PURE__ */ v({
+}, I = /* @__PURE__ */ y({
   __name: "_DocGroup",
   props: {
     group: {},
+    activePath: {},
     collapsible: { type: Boolean },
     linkComponent: {},
     depth: { default: 0 }
   },
-  setup(h, { expose: l }) {
-    const o = h, n = C(o.depth === 0), c = C([]), I = g(() => c.value && n.value ? c.value.reduce(
-      (e, { height: i }) => e + i,
-      o.group.items.length
-    ) : 0);
-    l({
-      height: I
-    });
-    const E = g(() => {
-      var y;
-      const e = o.group.items.findIndex(
-        (s) => "href" in s && s.active
-      );
-      let i = o.group.items.filter(
-        (s, f) => !("href" in s) && f < e
-      ).length;
-      const r = (y = c.value) == null ? void 0 : y.reduce((s, f) => i < -1 ? s : (i--, s + f.height), 0);
-      return (e + r) * 44;
-    }), F = g(
-      () => o.collapsible ? "button" : o.group.href ? "a" : "div"
-    );
-    return (e, i) => (t(), p(d, null, [
-      (t(), u(x(F.value), {
-        class: a([
-          m(b).button,
+  emits: ["updateActivePosition", "hideMarker", "updateMarkerPosition"],
+  setup(f, { expose: v, emit: m }) {
+    const i = f, n = c(i.group.collapsed !== !0), u = c(), l = B(
+      () => i.collapsible ? "button" : i.group.href ? "a" : "div"
+    ), e = m;
+    function s(t = i.group.items) {
+      return t.some((a) => "items" in a ? s(a.items) : a.href === i.activePath);
+    }
+    function o() {
+      var t;
+      (t = u.value) == null || t.reTriggerSetActiveGroup();
+    }
+    const r = B(() => i.group.href === i.activePath);
+    return M(r, (t) => {
+      t && e("hideMarker");
+    }), M(n, async (t) => {
+      await G(), s() ? t ? o() : e("hideMarker") : e("updateMarkerPosition");
+    }), v({
+      reTriggerSetActiveGroup: o
+    }), (t, a) => (p(), d($, null, [
+      (p(), b(w(l.value), {
+        class: k([
+          g(P).button,
           {
-            [m(b).topButton]: e.depth === 0,
-            [m(b).leafButton]: e.depth,
-            "text-indigo-500": o.group.active
+            [g(P).topButton]: t.depth === 0,
+            [g(P).leafButton]: t.depth,
+            "text-indigo-500": r.value
           }
         ]),
-        href: o.group.href,
-        onClick: i[0] || (i[0] = () => {
-          e.collapsible && (n.value = !n.value);
+        href: t.group.href,
+        onClick: a[0] || (a[0] = () => {
+          t.collapsible ? n.value = !n.value : e("updateActivePosition");
         })
       }, {
-        default: B(() => [
-          o.collapsible ? (t(), u(m(M), {
+        default: S(() => [
+          i.collapsible ? (p(), b(g(F), {
             key: 0,
             "stroke-color": "gray-400",
-            size: e.depth ? "8" : "16",
-            class: a(["absolute left-0 transform transition-transform", {
+            size: t.depth ? "8" : "16",
+            class: k(["absolute left-0 transform transition-transform", {
               "rotate-0": n.value,
               "-rotate-90": !n.value,
-              "ml-[16px]": e.depth
+              "ml-[16px]": t.depth
             }])
-          }, null, 8, ["size", "class"])) : k("", !0),
-          $(" " + D(e.group.label), 1)
+          }, null, 8, ["size", "class"])) : A("", !0),
+          D(" " + T(t.group.label), 1)
         ]),
         _: 1
       }, 8, ["class", "href"])),
-      o.collapsible && e.depth >= 0 && n.value && e.group.items.some((r) => "href" in r && r.active) ? (t(), p("div", {
-        key: 0,
-        class: "absolute h-[36px] w-[4px] z-10 rounded-full bg-indigo-500 transition-all duration-300 ml-[6px] mt-[48px]",
-        style: w({
-          top: `${E.value}px`,
-          left: `-${e.depth === 0 ? 0 : e.depth * 7.5 + 1}px`
-        })
-      }, null, 4)) : k("", !0),
-      G(H("ul", {
-        class: a(["list-none p-0 ml-[7.5px]", {
-          "border-l border-gray-100": e.depth === 0 && o.collapsible
-        }])
-      }, [
-        (t(!0), p(d, null, z(e.group.items, (r) => (t(), p(d, null, [
-          r && "items" in r ? (t(), p("li", O, [
-            S(V, {
-              ref_for: !0,
-              ref_key: "$groups",
-              ref: c,
-              group: r,
-              depth: e.depth + 1,
-              collapsible: o.collapsible,
-              "link-component": o.linkComponent
-            }, null, 8, ["group", "depth", "collapsible", "link-component"])
-          ])) : (t(), u(N, {
-            key: 1,
-            item: r,
-            depth: e.depth,
-            collapsible: e.collapsible,
-            "link-component": o.linkComponent
-          }, null, 8, ["item", "depth", "collapsible", "link-component"]))
-        ], 64))), 256))
-      ], 2), [
-        [L, n.value]
+      U(C(E, {
+        ref_key: "$groupElements",
+        ref: u,
+        depth: t.depth,
+        items: t.group.items,
+        "active-path": t.activePath,
+        collapsible: t.collapsible,
+        "link-component": t.linkComponent,
+        onHideMarker: a[1] || (a[1] = (h) => e("hideMarker")),
+        onUpdateMarkerPosition: a[2] || (a[2] = (h) => e("updateMarkerPosition")),
+        onUpdateActivePosition: a[3] || (a[3] = (h) => e("updateActivePosition", h))
+      }, null, 8, ["depth", "items", "active-path", "collapsible", "link-component"]), [
+        [x, n.value]
       ])
     ], 64));
   }
-}), T = { class: "overflow-y-hidden list-none p-0" }, j = {
+}), N = /* @__PURE__ */ y({
+  __name: "_DocLink",
+  props: {
+    item: {},
+    active: { type: Boolean },
+    collapsible: { type: Boolean },
+    depth: { default: -1 },
+    linkComponent: {}
+  },
+  emits: ["update:active"],
+  setup(f, { expose: v, emit: m }) {
+    const i = f, n = m, u = c();
+    function l() {
+      var e;
+      if (i.active) {
+        const { top: s = 0, height: o = 36 } = ((e = u.value) == null ? void 0 : e.getBoundingClientRect()) ?? {};
+        n("update:active", i.active, {
+          top: s,
+          height: o
+        });
+      }
+    }
+    return H(() => {
+      M(
+        () => i.active,
+        (e) => {
+          e ? l() : n("update:active", e);
+        },
+        { immediate: !0 }
+      );
+    }), v({
+      setActiveMarkerPosition: l
+    }), (e, s) => (p(), d("li", {
+      ref_key: "$container",
+      ref: u,
+      class: k(["list-none p-0", {
+        "pl-[16px]": e.depth >= 0
+      }])
+    }, [
+      (p(), b(w(e.linkComponent), {
+        class: k(["group relative block w-full pl-[24px]", {
+          "text-indigo-500": e.active,
+          "py-[8px] text-[16px] leading-[24px]": e.depth < 0,
+          "leading-[20px] text-[14px] py-[12px]": e.depth >= 0
+        }]),
+        href: e.item.href
+      }, {
+        default: S(() => [
+          e.depth >= 0 ? (p(), d("div", {
+            key: 0,
+            class: k(["absolute h-[80%] top-[10%] w-[4px] z-10 rounded-full hidden", {
+              "group-hover:block bg-gray-300": !e.active && e.collapsible
+            }]),
+            style: z({
+              left: `-${18.5 + e.depth * 7.5}px`
+            })
+          }, null, 6)) : A("", !0),
+          D(" " + T(e.item.label), 1)
+        ]),
+        _: 1
+      }, 8, ["class", "href"]))
+    ], 2));
+  }
+}), V = {
   key: 0,
   class: "relative list-none p-0"
-}, A = /* @__PURE__ */ v({
+}, E = /* @__PURE__ */ y({
+  __name: "_DocGroupElements",
+  props: {
+    items: {},
+    activePath: {},
+    collapsible: { type: Boolean },
+    linkComponent: { type: [Object, Function, String] },
+    depth: {}
+  },
+  emits: ["updateActivePosition", "hideMarker", "updateMarkerPosition"],
+  setup(f, { expose: v, emit: m }) {
+    const i = f, n = m, u = c([]), l = c([]);
+    function e(o = i.items) {
+      return o.some((r) => "items" in r ? e(r.items) : r.href === i.activePath);
+    }
+    function s() {
+      u.value.forEach((o) => {
+        o.setActiveMarkerPosition();
+      }), l.value.forEach((o) => {
+        o.reTriggerSetActiveGroup();
+      });
+    }
+    return v({
+      reTriggerSetActiveGroup: s
+    }), (o, r) => (p(), d("ul", {
+      class: k(["list-none p-0", {
+        "border-l border-gray-100": o.depth === 0 && o.collapsible,
+        "ml-[8px]": o.depth >= 0
+      }])
+    }, [
+      (p(!0), d($, null, R(o.items, (t) => (p(), d($, null, [
+        t && "items" in t ? (p(), d("li", V, [
+          C(I, {
+            ref_for: !0,
+            ref_key: "$groups",
+            ref: l,
+            "active-path": o.activePath,
+            group: t,
+            depth: o.depth + 1,
+            collapsible: o.collapsible,
+            "link-component": o.linkComponent,
+            onUpdateActivePosition: r[0] || (r[0] = (a) => {
+              n("updateActivePosition", a);
+            }),
+            onUpdateMarkerPosition: r[1] || (r[1] = () => {
+              e() ? s() : n("updateMarkerPosition");
+            })
+          }, null, 8, ["active-path", "group", "depth", "collapsible", "link-component"])
+        ])) : (p(), b(N, {
+          key: 1,
+          ref_for: !0,
+          ref_key: "$items",
+          ref: u,
+          item: t,
+          active: t.href === o.activePath,
+          depth: o.depth,
+          collapsible: o.collapsible,
+          "link-component": o.linkComponent,
+          "onUpdate:active": r[2] || (r[2] = (a, h) => {
+            h && n("updateActivePosition", h);
+          })
+        }, null, 8, ["item", "active", "depth", "collapsible", "link-component"]))
+      ], 64))), 256))
+    ], 2));
+  }
+}), O = /* @__PURE__ */ y({
   __name: "DocMenu",
   props: {
     items: {},
+    activePath: { default: void 0 },
     collapsible: { type: Boolean, default: !0 },
     linkComponent: { type: [Object, Function, String], default: "a" }
   },
-  setup(h) {
-    return (l, o) => (t(), p("ul", T, [
-      (t(!0), p(d, null, z(l.items, (n) => (t(), p(d, null, [
-        "items" in n ? (t(), p("li", j, [
-          S(V, {
-            group: n,
-            depth: 0,
-            collapsible: l.collapsible,
-            "link-component": l.linkComponent
-          }, null, 8, ["group", "collapsible", "link-component"])
-        ])) : (t(), u(N, {
-          key: 1,
-          item: n,
-          collapsible: l.collapsible,
-          "link-component": l.linkComponent
-        }, null, 8, ["item", "collapsible", "link-component"]))
-      ], 64))), 256))
-    ]));
+  setup(f) {
+    const v = c(), m = c(0), i = c(36), n = c(!1);
+    function u({ top: l, height: e } = { height: 0, top: 0 }) {
+      var o;
+      const s = ((o = v.value) == null ? void 0 : o.getBoundingClientRect().top) || 0;
+      m.value = l - s, i.value = e, n.value = !0;
+    }
+    return (l, e) => (p(), d("div", {
+      ref_key: "$container",
+      ref: v,
+      class: "relative"
+    }, [
+      n.value && l.collapsible ? (p(), d("div", {
+        key: 0,
+        "data-cy": "doc-menu-active-marker",
+        class: "absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px]",
+        style: z({
+          top: `${m.value + 4}px`,
+          height: `${i.value - 8}px`
+        })
+      }, null, 4)) : A("", !0),
+      C(E, {
+        items: l.items,
+        "active-path": l.activePath,
+        collapsible: l.collapsible,
+        "link-component": l.linkComponent,
+        depth: -1,
+        onUpdateActivePosition: u,
+        onHideMarker: e[0] || (e[0] = (s) => n.value = !1)
+      }, null, 8, ["items", "active-path", "collapsible", "link-component"])
+    ], 512));
   }
 });
 export {
-  A as default
+  O as default
 };
 //# sourceMappingURL=index.es.mjs.map
 
-/* <wind-keep class="overflow-y-hidden list-none p-0 relative filter text-indigo-500 absolute left-0 transform transition-transform rotate-0 -rotate-90 ml-[16px] h-[36px] w-[4px] z-10 rounded-full bg-indigo-500 transition-all duration-300 ml-[6px] mt-[48px] ml-[7.5px] border-l border-gray-100 icon-dark-gray-400 pl-[16px] block w-full pl-[24px] py-[8px] text-[16px] leading-[24px] leading-[20px] text-[14px] py-[12px] h-[80%] top-[10%] hidden group-hover:block bg-gray-300 flex py-[10px] items-center font-medium pl-[40px]"> */
+/* <wind-keep class="container relative absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px] list-none p-0 border-l border-gray-100 ml-[8px] text-indigo-500 left-0 transform transition-transform rotate-0 -rotate-90 ml-[16px] icon-dark-gray-400 pl-[16px] block w-full pl-[24px] py-[8px] text-[16px] leading-[24px] leading-[20px] text-[14px] py-[12px] h-[80%] top-[10%] z-10 hidden group-hover:block bg-gray-300 flex py-[10px] items-center text-start font-medium pl-[40px]"> */

package/dist/index.es.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.mjs","sources":["../../constants/dist/index.js","../_DocGroup.vue"],"sourcesContent":["export const classes = {\n    button: 'flex leading-[24px] py-[10px] items-center relative w-full',\n    topButton: 'leading-[24px] text-[16px] pl-[24px] font-medium',\n    leafButton: 'leading-[20px] text-[14px] pl-[40px]',\n};\n","<script lang=\"ts\" setup>\nimport { computed, type DefineComponent, Ref, ref } from 'vue'\nimport { IconChevronDownSmall } from '@cypress-design/vue-icon'\nimport { NavGroup, classes } from '@cypress-design/constants-docmenu'\nimport DocLink from './_DocLink.vue'\nimport DocGroup from './_DocGroup.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    group: NavGroup\n    collapsible: boolean\n    linkComponent: DefineComponent | 'a'\n    depth?: number\n  }>(),\n  {\n    depth: 0,\n  },\n)\n\nconst open = ref(props.depth === 0)\n\nconst $groups = ref<{ height: number }[]>([])\n\nconst height = computed(() => {\n  return $groups.value && open.value\n    ? $groups.value.reduce(\n        (acc, { height: h }) => acc + h,\n        props.group.items.length,\n      )\n    : 0\n})\n\ndefineExpose<{\n  height: Ref<number>\n}>({\n  height,\n})\n\nconst activeMarkerTop = computed(() => {\n  const activeIndex = props.group.items.findIndex(\n    (item) => 'href' in item && item.active,\n  )\n\n  // how many groups are before the active element?\n  let numberOfGroups = props.group.items.filter(\n    (item, index) => !('href' in item) && index < activeIndex,\n  ).length\n\n  // if there is any open group before the active element\n  // compensate for the height\n  const groupHeight = $groups.value?.reduce((acc, group) => {\n    if (numberOfGroups < -1) return acc\n    numberOfGroups--\n    return acc + group.height\n  }, 0)\n  return (activeIndex + groupHeight) * 44\n})\n\nconst Head = computed(() =>\n  props.collapsible ? 'button' : props.group.href ? 'a' : 'div',\n)\n</script>\n\n<template>\n  <component\n    :is=\"Head\"\n    :class=\"[\n      classes.button,\n      {\n        [classes.topButton]: depth === 0,\n        [classes.leafButton]: depth,\n        'text-indigo-500': props.group.active,\n      },\n    ]\"\n    :href=\"props.group.href\"\n    @click=\"\n      () => {\n        if (collapsible) {\n          open = !open\n        }\n      }\n    \"\n  >\n    <IconChevronDownSmall\n      v-if=\"props.collapsible\"\n      stroke-color=\"gray-400\"\n      :size=\"depth ? '8' : '16'\"\n      class=\"absolute left-0 transform transition-transform\"\n      :class=\"{\n        'rotate-0': open,\n        '-rotate-90': !open,\n        'ml-[16px]': depth,\n      }\"\n    />\n    {{ group.label }}\n  </component>\n  <div\n    v-if=\"\n      props.collapsible &&\n      depth >= 0 &&\n      open &&\n      group.items.some((item) => 'href' in item && item.active)\n    \"\n    class=\"absolute h-[36px] w-[4px] z-10 rounded-full bg-indigo-500 transition-all duration-300 ml-[6px] mt-[48px]\"\n    :style=\"{\n      top: `${activeMarkerTop}px`,\n      left: `-${depth === 0 ? 0 : depth * 7.5 + 1}px`,\n    }\"\n  />\n  <ul\n    v-show=\"open\"\n    class=\"list-none p-0 ml-[7.5px]\"\n    :class=\"{\n      'border-l border-gray-100': depth === 0 && props.collapsible,\n    }\"\n  >\n    <template v-for=\"item in group.items\">\n      <li class=\"relative list-none p-0\" v-if=\"item && 'items' in item\">\n        <DocGroup\n          ref=\"$groups\"\n          :group=\"item\"\n          :depth=\"depth + 1\"\n          :collapsible=\"props.collapsible\"\n          :link-component=\"props.linkComponent\"\n        />\n      </li>\n      <DocLink\n        v-else\n        :item=\"item\"\n        :depth=\"depth\"\n        :collapsible=\"collapsible\"\n        :link-component=\"props.linkComponent\"\n      />\n    </template>\n  </ul>\n</template>\n"],"names":["classes","props","__props","open","ref","$groups","height","computed","acc","h","__expose","activeMarkerTop","activeIndex","item","numberOfGroups","index","groupHeight","_a","group","Head"],"mappings":";;AAAO,MAAMA,IAAU;AAAA,EACnB,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,YAAY;AAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACGA,UAAMC,IAAQC,GAYRC,IAAOC,EAAIH,EAAM,UAAU,CAAC,GAE5BI,IAAUD,EAA0B,CAAA,CAAE,GAEtCE,IAASC,EAAS,MACfF,EAAQ,SAASF,EAAK,QACzBE,EAAQ,MAAM;AAAA,MACZ,CAACG,GAAK,EAAE,QAAQC,QAAQD,IAAMC;AAAA,MAC9BR,EAAM,MAAM,MAAM;AAAA,IAEpB,IAAA,CACL;AAIE,IAAAS,EAAA;AAAA,MACD,QAAAJ;AAAA,IAAA,CACD;AAEK,UAAAK,IAAkBJ,EAAS,MAAM;;AAC/B,YAAAK,IAAcX,EAAM,MAAM,MAAM;AAAA,QACpC,CAACY,MAAS,UAAUA,KAAQA,EAAK;AAAA,MAAA;AAI/B,UAAAC,IAAiBb,EAAM,MAAM,MAAM;AAAA,QACrC,CAACY,GAAME,MAAU,EAAE,UAAUF,MAASE,IAAQH;AAAA,MAC9C,EAAA;AAIF,YAAMI,KAAcC,IAAAZ,EAAQ,UAAR,gBAAAY,EAAe,OAAO,CAACT,GAAKU,MAC1CJ,IAAiB,KAAWN,KAChCM,KACON,IAAMU,EAAM,SAClB;AACH,cAAQN,IAAcI,KAAe;AAAA,IAAA,CACtC,GAEKG,IAAOZ;AAAA,MAAS,MACpBN,EAAM,cAAc,WAAWA,EAAM,MAAM,OAAO,MAAM;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.es.mjs","sources":["../../constants/dist/index.js","../_DocGroup.vue","../_DocLink.vue","../_DocGroupElements.vue","../DocMenu.vue"],"sourcesContent":["export const classes = {\n    button: 'flex leading-[24px] py-[10px] items-center relative w-full text-start',\n    topButton: 'leading-[24px] text-[16px] pl-[24px] font-medium',\n    leafButton: 'leading-[20px] text-[14px] pl-[40px]',\n};\n","<script lang=\"ts\" setup>\nimport { computed, type DefineComponent, ref, watch, nextTick } from 'vue'\nimport { IconChevronDownSmall } from '@cypress-design/vue-icon'\nimport { NavGroup, classes } from '@cypress-design/constants-docmenu'\nimport DocGroupElements from './_DocGroupElements.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    group: NavGroup\n    activePath?: string\n    collapsible: boolean\n    linkComponent: DefineComponent | 'a'\n    depth?: number\n  }>(),\n  {\n    depth: 0,\n  },\n)\n\nconst open = ref(props.group.collapsed !== true)\nconst $groupElements = ref<typeof DocGroupElements>()\n\nconst Head = computed(() =>\n  props.collapsible ? 'button' : props.group.href ? 'a' : 'div',\n)\n\nconst emit = defineEmits<{\n  (event: 'updateActivePosition', opts?: { top: number; height: number }): void\n  (event: 'hideMarker'): void\n  (event: 'updateMarkerPosition'): void\n}>()\n\nfunction hasActiveItemRecursively(items = props.group.items): boolean {\n  return items.some((item) => {\n    if ('items' in item) {\n      return hasActiveItemRecursively(item.items)\n    }\n    return item.href === props.activePath\n  })\n}\n\nfunction reTriggerSetActiveGroup() {\n  $groupElements.value?.reTriggerSetActiveGroup()\n}\n\nconst active = computed(() => props.group.href === props.activePath)\n\nwatch(active, (active) => {\n  if (active) {\n    emit('hideMarker')\n  }\n})\n\nwatch(open, async (open) => {\n  await nextTick()\n  if (hasActiveItemRecursively()) {\n    if (open) {\n      reTriggerSetActiveGroup()\n    } else {\n      emit('hideMarker')\n    }\n  } else {\n    emit('updateMarkerPosition')\n  }\n})\n\ndefineExpose({\n  reTriggerSetActiveGroup,\n})\n</script>\n\n<template>\n  <component\n    :is=\"Head\"\n    :class=\"[\n      classes.button,\n      {\n        [classes.topButton]: depth === 0,\n        [classes.leafButton]: depth,\n        'text-indigo-500': active,\n      },\n    ]\"\n    :href=\"group.href\"\n    @click=\"\n      () => {\n        if (collapsible) {\n          open = !open\n        } else {\n          emit('updateActivePosition')\n        }\n      }\n    \"\n  >\n    <IconChevronDownSmall\n      v-if=\"props.collapsible\"\n      stroke-color=\"gray-400\"\n      :size=\"depth ? '8' : '16'\"\n      class=\"absolute left-0 transform transition-transform\"\n      :class=\"{\n        'rotate-0': open,\n        '-rotate-90': !open,\n        'ml-[16px]': depth,\n      }\"\n    />\n    {{ group.label }}\n  </component>\n  <DocGroupElements\n    ref=\"$groupElements\"\n    v-show=\"open\"\n    :depth=\"depth\"\n    :items=\"group.items\"\n    :active-path=\"activePath\"\n    :collapsible=\"collapsible\"\n    :link-component=\"linkComponent\"\n    @hide-marker=\"emit('hideMarker')\"\n    @update-marker-position=\"emit('updateMarkerPosition')\"\n    @update-active-position=\"(opts) => emit('updateActivePosition', opts)\"\n  />\n</template>\n","<script lang=\"ts\" setup>\nimport { watch, type DefineComponent, ref, onMounted } from 'vue'\nimport type { NavItemLink } from '@cypress-design/constants-docmenu'\n\nconst props = withDefaults(\n  defineProps<{\n    item: NavItemLink\n    active: boolean\n    collapsible: boolean\n    depth?: number\n    linkComponent: DefineComponent | 'a'\n  }>(),\n  {\n    depth: -1,\n  },\n)\n\nconst emit = defineEmits<{\n  (\n    event: 'update:active',\n    active: boolean,\n    opts?: { top: number; height: number },\n  ): void\n}>()\n\nconst $container = ref<HTMLLIElement>()\n\nfunction setActiveMarkerPosition() {\n  if (props.active) {\n    const { top = 0, height = 36 } =\n      $container.value?.getBoundingClientRect() ?? {}\n\n    emit('update:active', props.active, {\n      top,\n      height,\n    })\n  }\n}\n\nonMounted(() => {\n  watch(\n    () => props.active,\n    (active) => {\n      if (active) {\n        setActiveMarkerPosition()\n      } else {\n        emit('update:active', active)\n      }\n    },\n    { immediate: true },\n  )\n})\n\ndefineExpose({\n  setActiveMarkerPosition,\n})\n</script>\n\n<template>\n  <li\n    ref=\"$container\"\n    class=\"list-none p-0\"\n    :class=\"{\n      'pl-[16px]': depth >= 0,\n    }\"\n  >\n    <component\n      :is=\"linkComponent\"\n      class=\"group relative block w-full pl-[24px]\"\n      :class=\"{\n        'text-indigo-500': active,\n        'py-[8px] text-[16px] leading-[24px]': depth < 0,\n        'leading-[20px] text-[14px] py-[12px]': depth >= 0,\n      }\"\n      :href=\"item.href\"\n    >\n      <div\n        v-if=\"depth >= 0\"\n        class=\"absolute h-[80%] top-[10%] w-[4px] z-10 rounded-full hidden\"\n        :class=\"{\n          'group-hover:block bg-gray-300': !active && collapsible,\n        }\"\n        :style=\"{\n          left: `-${18.5 + depth * 7.5}px`,\n        }\"\n      />\n      {{ item.label }}\n    </component>\n  </li>\n</template>\n","<script lang=\"ts\" setup>\nimport { DefineComponent, ref } from 'vue'\nimport { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu'\nimport DocGroup from './_DocGroup.vue'\nimport DocLink from './_DocLink.vue'\n\nconst props = defineProps<{\n  items: (NavGroup | NavItemLink)[]\n  activePath?: string\n  collapsible: boolean\n  linkComponent: DefineComponent | 'a'\n  depth: number\n}>()\n\nconst emit = defineEmits<{\n  (event: 'updateActivePosition', opts?: { top: number; height: number }): void\n  (event: 'hideMarker'): void\n  (event: 'updateMarkerPosition'): void\n}>()\n\nconst $items = ref<(typeof DocLink)[]>([])\nconst $groups = ref<(typeof DocGroup)[]>([])\n\nfunction hasActiveItemRecursively(items = props.items): boolean {\n  return items.some((item) => {\n    if ('items' in item) {\n      return hasActiveItemRecursively(item.items)\n    }\n    return item.href === props.activePath\n  })\n}\n\nfunction reTriggerSetActiveGroup() {\n  $items.value.forEach((item) => {\n    item.setActiveMarkerPosition()\n  })\n  $groups.value.forEach((group) => {\n    group.reTriggerSetActiveGroup()\n  })\n}\n\ndefineExpose({\n  reTriggerSetActiveGroup,\n})\n</script>\n\n<template>\n  <ul\n    class=\"list-none p-0\"\n    :class=\"{\n      'border-l border-gray-100': depth === 0 && collapsible,\n      'ml-[8px]': depth >= 0,\n    }\"\n  >\n    <template v-for=\"item in items\">\n      <li class=\"relative list-none p-0\" v-if=\"item && 'items' in item\">\n        <DocGroup\n          ref=\"$groups\"\n          :active-path=\"activePath\"\n          :group=\"item\"\n          :depth=\"depth + 1\"\n          :collapsible=\"collapsible\"\n          :link-component=\"linkComponent\"\n          @update-active-position=\"\n            (opts) => {\n              emit('updateActivePosition', opts)\n            }\n          \"\n          @update-marker-position=\"\n            () => {\n              if (hasActiveItemRecursively()) {\n                reTriggerSetActiveGroup()\n              } else {\n                emit('updateMarkerPosition')\n              }\n            }\n          \"\n        />\n      </li>\n      <DocLink\n        v-else\n        ref=\"$items\"\n        :item=\"item\"\n        :active=\"item.href === activePath\"\n        :depth=\"depth\"\n        :collapsible=\"collapsible\"\n        :link-component=\"linkComponent\"\n        @update:active=\"\n          (_, opts) => {\n            if (!opts) return\n            emit('updateActivePosition', opts)\n          }\n        \"\n      />\n    </template>\n  </ul>\n</template>\n","<script lang=\"ts\" setup>\nimport { ref, type DefineComponent } from 'vue'\nimport { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu'\nimport DocGroupElements from './_DocGroupElements.vue'\n\nwithDefaults(\n  defineProps<{\n    items: (NavItemLink | NavGroup)[]\n    activePath?: string\n    collapsible?: boolean\n    linkComponent?: DefineComponent | 'a'\n  }>(),\n  {\n    linkComponent: 'a',\n    collapsible: true,\n    activePath: undefined,\n  },\n)\n\nconst $container = ref<HTMLDivElement>()\n\nconst activeTop = ref(0)\nconst activeHeight = ref(36)\nconst showMarker = ref(false)\n\nfunction updateActiveMarkerPosition({ top, height } = { height: 0, top: 0 }) {\n  const containerTop = $container.value?.getBoundingClientRect().top || 0\n  activeTop.value = top - containerTop\n  activeHeight.value = height\n  showMarker.value = true\n}\n</script>\n\n<template>\n  <div ref=\"$container\" class=\"relative\">\n    <div\n      v-if=\"showMarker && collapsible\"\n      data-cy=\"doc-menu-active-marker\"\n      class=\"absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px]\"\n      :style=\"{\n        top: `${activeTop + 4}px`,\n        height: `${activeHeight - 8}px`,\n      }\"\n    />\n    <DocGroupElements\n      :items=\"items\"\n      :active-path=\"activePath\"\n      :collapsible=\"collapsible\"\n      :link-component=\"linkComponent\"\n      :depth=\"-1\"\n      @update-active-position=\"updateActiveMarkerPosition\"\n      @hide-marker=\"showMarker = false\"\n    />\n  </div>\n</template>\n"],"names":["classes","props","__props","open","ref","$groupElements","Head","computed","emit","__emit","hasActiveItemRecursively","items","item","reTriggerSetActiveGroup","_a","active","watch","nextTick","__expose","$container","setActiveMarkerPosition","top","height","onMounted","$items","$groups","group","activeTop","activeHeight","showMarker","updateActiveMarkerPosition","containerTop"],"mappings":"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"}

package/dist/index.umd.js

@@ -1,4 +1,4 @@
-(function(e,a){typeof exports=="object"&&typeof module<"u"?module.exports=a(require("vue"),require("@cypress-design/vue-icon")):typeof define=="function"&&define.amd?define(["vue","@cypress-design/vue-icon"],a):(e=typeof globalThis<"u"?globalThis:e||self,e.DocMenu=a(e.Vue,e.CyIcon))})(this,function(e,a){"use strict";const c={button:"flex leading-[24px] py-[10px] items-center relative w-full",topButton:"leading-[24px] text-[16px] pl-[24px] font-medium",leafButton:"leading-[20px] text-[14px] pl-[40px]"},f=e.defineComponent({__name:"_DocLink",props:{item:{},collapsible:{type:Boolean},depth:{default:-1},linkComponent:{}},setup(d){return(o,n)=>(e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass(["list-none p-0",{"pl-[16px]":o.depth>=0}])},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.linkComponent),{class:e.normalizeClass(["group relative block w-full pl-[24px]",{"text-indigo-500":o.item.active,"py-[8px] text-[16px] leading-[24px]":o.depth<0,"leading-[20px] text-[14px] py-[12px]":o.depth>=0}]),href:o.item.href},{default:e.withCtx(()=>[o.depth>=0?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["absolute h-[80%] top-[10%] w-[4px] z-10 rounded-full hidden",{"group-hover:block bg-gray-300":!o.item.active&&o.collapsible}]),style:e.normalizeStyle({left:`-${18.5+o.depth*7.5}px`})},null,6)):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(o.item.label),1)]),_:1},8,["class","href"]))],2))}}),u={key:0,class:"relative list-none p-0"},k=e.defineComponent({__name:"_DocGroup",props:{group:{},collapsible:{type:Boolean},linkComponent:{},depth:{default:0}},setup(d,{expose:o}){const n=d,t=e.ref(n.depth===0),s=e.ref([]),b=e.computed(()=>s.value&&t.value?s.value.reduce((l,{height:r})=>l+r,n.group.items.length):0);o({height:b});const y=e.computed(()=>{var h;const l=n.group.items.findIndex(i=>"href"in i&&i.active);let r=n.group.items.filter((i,m)=>!("href"in i)&&m<l).length;const p=(h=s.value)==null?void 0:h.reduce((i,m)=>r<-1?i:(r--,i+m.height),0);return(l+p)*44}),C=e.computed(()=>n.collapsible?"button":n.group.href?"a":"div");return(l,r)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(C.value),{class:e.normalizeClass([e.unref(c).button,{[e.unref(c).topButton]:l.depth===0,[e.unref(c).leafButton]:l.depth,"text-indigo-500":n.group.active}]),href:n.group.href,onClick:r[0]||(r[0]=()=>{l.collapsible&&(t.value=!t.value)})},{default:e.withCtx(()=>[n.collapsible?(e.openBlock(),e.createBlock(e.unref(a.IconChevronDownSmall),{key:0,"stroke-color":"gray-400",size:l.depth?"8":"16",class:e.normalizeClass(["absolute left-0 transform transition-transform",{"rotate-0":t.value,"-rotate-90":!t.value,"ml-[16px]":l.depth}])},null,8,["size","class"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(l.group.label),1)]),_:1},8,["class","href"])),n.collapsible&&l.depth>=0&&t.value&&l.group.items.some(p=>"href"in p&&p.active)?(e.openBlock(),e.createElementBlock("div",{key:0,class:"absolute h-[36px] w-[4px] z-10 rounded-full bg-indigo-500 transition-all duration-300 ml-[6px] mt-[48px]",style:e.normalizeStyle({top:`${y.value}px`,left:`-${l.depth===0?0:l.depth*7.5+1}px`})},null,4)):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("ul",{class:e.normalizeClass(["list-none p-0 ml-[7.5px]",{"border-l border-gray-100":l.depth===0&&n.collapsible}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.group.items,p=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[p&&"items"in p?(e.openBlock(),e.createElementBlock("li",u,[e.createVNode(k,{ref_for:!0,ref_key:"$groups",ref:s,group:p,depth:l.depth+1,collapsible:n.collapsible,"link-component":n.linkComponent},null,8,["group","depth","collapsible","link-component"])])):(e.openBlock(),e.createBlock(f,{key:1,item:p,depth:l.depth,collapsible:l.collapsible,"link-component":n.linkComponent},null,8,["item","depth","collapsible","link-component"]))],64))),256))],2),[[e.vShow,t.value]])],64))}}),g={class:"overflow-y-hidden list-none p-0"},B={key:0,class:"relative list-none p-0"};return e.defineComponent({__name:"DocMenu",props:{items:{},collapsible:{type:Boolean,default:!0},linkComponent:{type:[Object,Function,String],default:"a"}},setup(d){return(o,n)=>(e.openBlock(),e.createElementBlock("ul",g,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.items,t=>(e.openBlock(),e.createElementBlock(e.Fragment,null,["items"in t?(e.openBlock(),e.createElementBlock("li",B,[e.createVNode(k,{group:t,depth:0,collapsible:o.collapsible,"link-component":o.linkComponent},null,8,["group","collapsible","link-component"])])):(e.openBlock(),e.createBlock(f,{key:1,item:t,collapsible:o.collapsible,"link-component":o.linkComponent},null,8,["item","collapsible","link-component"]))],64))),256))]))}})});
+(function(e,k){typeof exports=="object"&&typeof module<"u"?module.exports=k(require("vue"),require("@cypress-design/vue-icon")):typeof define=="function"&&define.amd?define(["vue","@cypress-design/vue-icon"],k):(e=typeof globalThis<"u"?globalThis:e||self,e.DocMenu=k(e.Vue,e.CyIcon))})(this,function(e,k){"use strict";const h={button:"flex leading-[24px] py-[10px] items-center relative w-full text-start",topButton:"leading-[24px] text-[16px] pl-[24px] font-medium",leafButton:"leading-[20px] text-[14px] pl-[40px]"},y=e.defineComponent({__name:"_DocGroup",props:{group:{},activePath:{},collapsible:{type:Boolean},linkComponent:{},depth:{default:0}},emits:["updateActivePosition","hideMarker","updateMarkerPosition"],setup(f,{expose:d,emit:m}){const i=f,l=e.ref(i.group.collapsed!==!0),c=e.ref(),r=e.computed(()=>i.collapsible?"button":i.group.href?"a":"div"),t=m;function s(o=i.group.items){return o.some(a=>"items"in a?s(a.items):a.href===i.activePath)}function n(){var o;(o=c.value)==null||o.reTriggerSetActiveGroup()}const p=e.computed(()=>i.group.href===i.activePath);return e.watch(p,o=>{o&&t("hideMarker")}),e.watch(l,async o=>{await e.nextTick(),s()?o?n():t("hideMarker"):t("updateMarkerPosition")}),d({reTriggerSetActiveGroup:n}),(o,a)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.value),{class:e.normalizeClass([e.unref(h).button,{[e.unref(h).topButton]:o.depth===0,[e.unref(h).leafButton]:o.depth,"text-indigo-500":p.value}]),href:o.group.href,onClick:a[0]||(a[0]=()=>{o.collapsible?l.value=!l.value:t("updateActivePosition")})},{default:e.withCtx(()=>[i.collapsible?(e.openBlock(),e.createBlock(e.unref(k.IconChevronDownSmall),{key:0,"stroke-color":"gray-400",size:o.depth?"8":"16",class:e.normalizeClass(["absolute left-0 transform transition-transform",{"rotate-0":l.value,"-rotate-90":!l.value,"ml-[16px]":o.depth}])},null,8,["size","class"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(o.group.label),1)]),_:1},8,["class","href"])),e.withDirectives(e.createVNode(g,{ref_key:"$groupElements",ref:c,depth:o.depth,items:o.group.items,"active-path":o.activePath,collapsible:o.collapsible,"link-component":o.linkComponent,onHideMarker:a[1]||(a[1]=u=>t("hideMarker")),onUpdateMarkerPosition:a[2]||(a[2]=u=>t("updateMarkerPosition")),onUpdateActivePosition:a[3]||(a[3]=u=>t("updateActivePosition",u))},null,8,["depth","items","active-path","collapsible","link-component"]),[[e.vShow,l.value]])],64))}}),b=e.defineComponent({__name:"_DocLink",props:{item:{},active:{type:Boolean},collapsible:{type:Boolean},depth:{default:-1},linkComponent:{}},emits:["update:active"],setup(f,{expose:d,emit:m}){const i=f,l=m,c=e.ref();function r(){var t;if(i.active){const{top:s=0,height:n=36}=((t=c.value)==null?void 0:t.getBoundingClientRect())??{};l("update:active",i.active,{top:s,height:n})}}return e.onMounted(()=>{e.watch(()=>i.active,t=>{t?r():l("update:active",t)},{immediate:!0})}),d({setActiveMarkerPosition:r}),(t,s)=>(e.openBlock(),e.createElementBlock("li",{ref_key:"$container",ref:c,class:e.normalizeClass(["list-none p-0",{"pl-[16px]":t.depth>=0}])},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.linkComponent),{class:e.normalizeClass(["group relative block w-full pl-[24px]",{"text-indigo-500":t.active,"py-[8px] text-[16px] leading-[24px]":t.depth<0,"leading-[20px] text-[14px] py-[12px]":t.depth>=0}]),href:t.item.href},{default:e.withCtx(()=>[t.depth>=0?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["absolute h-[80%] top-[10%] w-[4px] z-10 rounded-full hidden",{"group-hover:block bg-gray-300":!t.active&&t.collapsible}]),style:e.normalizeStyle({left:`-${18.5+t.depth*7.5}px`})},null,6)):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(t.item.label),1)]),_:1},8,["class","href"]))],2))}}),B={key:0,class:"relative list-none p-0"},g=e.defineComponent({__name:"_DocGroupElements",props:{items:{},activePath:{},collapsible:{type:Boolean},linkComponent:{type:[Object,Function,String]},depth:{}},emits:["updateActivePosition","hideMarker","updateMarkerPosition"],setup(f,{expose:d,emit:m}){const i=f,l=m,c=e.ref([]),r=e.ref([]);function t(n=i.items){return n.some(p=>"items"in p?t(p.items):p.href===i.activePath)}function s(){c.value.forEach(n=>{n.setActiveMarkerPosition()}),r.value.forEach(n=>{n.reTriggerSetActiveGroup()})}return d({reTriggerSetActiveGroup:s}),(n,p)=>(e.openBlock(),e.createElementBlock("ul",{class:e.normalizeClass(["list-none p-0",{"border-l border-gray-100":n.depth===0&&n.collapsible,"ml-[8px]":n.depth>=0}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.items,o=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[o&&"items"in o?(e.openBlock(),e.createElementBlock("li",B,[e.createVNode(y,{ref_for:!0,ref_key:"$groups",ref:r,"active-path":n.activePath,group:o,depth:n.depth+1,collapsible:n.collapsible,"link-component":n.linkComponent,onUpdateActivePosition:p[0]||(p[0]=a=>{l("updateActivePosition",a)}),onUpdateMarkerPosition:p[1]||(p[1]=()=>{t()?s():l("updateMarkerPosition")})},null,8,["active-path","group","depth","collapsible","link-component"])])):(e.openBlock(),e.createBlock(b,{key:1,ref_for:!0,ref_key:"$items",ref:c,item:o,active:o.href===n.activePath,depth:n.depth,collapsible:n.collapsible,"link-component":n.linkComponent,"onUpdate:active":p[2]||(p[2]=(a,u)=>{u&&l("updateActivePosition",u)})},null,8,["item","active","depth","collapsible","link-component"]))],64))),256))],2))}});return e.defineComponent({__name:"DocMenu",props:{items:{},activePath:{default:void 0},collapsible:{type:Boolean,default:!0},linkComponent:{type:[Object,Function,String],default:"a"}},setup(f){const d=e.ref(),m=e.ref(0),i=e.ref(36),l=e.ref(!1);function c({top:r,height:t}={height:0,top:0}){var n;const s=((n=d.value)==null?void 0:n.getBoundingClientRect().top)||0;m.value=r-s,i.value=t,l.value=!0}return(r,t)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"$container",ref:d,class:"relative"},[l.value&&r.collapsible?(e.openBlock(),e.createElementBlock("div",{key:0,"data-cy":"doc-menu-active-marker",class:"absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px]",style:e.normalizeStyle({top:`${m.value+4}px`,height:`${i.value-8}px`})},null,4)):e.createCommentVNode("",!0),e.createVNode(g,{items:r.items,"active-path":r.activePath,collapsible:r.collapsible,"link-component":r.linkComponent,depth:-1,onUpdateActivePosition:c,onHideMarker:t[0]||(t[0]=s=>l.value=!1)},null,8,["items","active-path","collapsible","link-component"])],512))}})});
 //# sourceMappingURL=index.umd.js.map
 
-/* <wind-keep class="overflow-y-hidden list-none p-0 relative filter text-indigo-500 absolute left-0 transform transition-transform rotate-0 -rotate-90 ml-[16px] h-[36px] w-[4px] z-10 rounded-full bg-indigo-500 transition-all duration-300 ml-[6px] mt-[48px] ml-[7.5px] border-l border-gray-100 icon-dark-gray-400 pl-[16px] block w-full pl-[24px] py-[8px] text-[16px] leading-[24px] leading-[20px] text-[14px] py-[12px] h-[80%] top-[10%] hidden group-hover:block bg-gray-300 flex py-[10px] items-center font-medium pl-[40px]"> */
+/* <wind-keep class="container relative absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px] list-none p-0 border-l border-gray-100 ml-[8px] text-indigo-500 left-0 transform transition-transform rotate-0 -rotate-90 ml-[16px] icon-dark-gray-400 pl-[16px] block w-full pl-[24px] py-[8px] text-[16px] leading-[24px] leading-[20px] text-[14px] py-[12px] h-[80%] top-[10%] z-10 hidden group-hover:block bg-gray-300 flex py-[10px] items-center text-start font-medium pl-[40px]"> */