@cypress-design/vue-docmenu 0.4.2 → 0.5.1

package/dist/index.es.mjs

@@ -1,10 +1,12 @@
-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 { defineComponent as A, ref as u, computed as P, inject as I, watch as C, openBlock as p, createElementBlock as f, Fragment as B, createBlock as M, resolveDynamicComponent as S, normalizeClass as h, unref as k, withCtx as D, createCommentVNode as $, createTextVNode as E, toDisplayString as G, createElementVNode as z, createVNode as x, onMounted as H, normalizeStyle as L, nextTick as N, renderList as V, provide as j } from "vue";
 import { IconChevronDownSmall as F } from "@cypress-design/vue-icon";
-const P = {
+const b = {
+  expandedIcon: "absolute left-0 transform transition-transform text-gray-400 dark:text-gray-700",
   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]"
-}, I = /* @__PURE__ */ y({
+  leafButton: "leading-[20px] text-[14px] pl-[48px]",
+  openListBorderLeft: "absolute left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900"
+}, R = /* @__PURE__ */ A({
   __name: "_DocGroup",
   props: {
     group: {},
@@ -13,72 +15,94 @@ const P = {
     linkComponent: {},
     depth: { default: 0 }
   },
-  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() {
+  emits: ["updateActivePosition", "updateMarkerPosition", "hideMarker"],
+  setup(g, { expose: c, emit: d }) {
+    const n = g, i = u(n.group.collapsed !== !0), v = u(), m = u(), s = P(
+      () => n.collapsible ? "button" : n.group.href ? "a" : "div"
+    ), e = d, o = P(
+      () => n.group.items.some((t) => "items" in t ? w(t.items, n.activePath) : t.href === n.activePath)
+    );
+    function a() {
       var t;
-      (t = u.value) == null || t.reTriggerSetActiveGroup();
+      (t = v.value) == null || t.reTriggerSetActiveGroup();
     }
-    const r = B(() => i.group.href === i.activePath);
-    return M(r, (t) => {
+    const l = P(() => n.group.href === n.activePath), y = I("transition-is-moving", u(!1));
+    return C(l, (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,
+    }), C(i, (t) => {
+      o.value ? t ? a() : e("hideMarker") : e("updateMarkerPosition");
+    }), c({
+      reTriggerSetActiveGroup: a
+    }), (t, r) => (p(), f(B, null, [
+      (p(), M(S(s.value), {
+        class: h([
+          k(b).button,
           {
-            [g(P).topButton]: t.depth === 0,
-            [g(P).leafButton]: t.depth,
-            "text-indigo-500": r.value
+            [k(b).topButton]: t.depth === 0,
+            [k(b).leafButton]: t.depth,
+            "text-indigo-500 dark:text-indigo-400": l.value,
+            "text-gray-900 dark:text-gray-100": o.value && !l.value,
+            "text-gray-800 dark:text-gray-200": !o.value && !l.value
           }
         ]),
         href: t.group.href,
-        onClick: a[0] || (a[0] = () => {
-          t.collapsible ? n.value = !n.value : e("updateActivePosition");
+        onClick: r[0] || (r[0] = () => {
+          t.collapsible ? i.value = !i.value : e("updateActivePosition");
         })
       }, {
-        default: S(() => [
-          i.collapsible ? (p(), b(g(F), {
+        default: D(() => [
+          n.collapsible ? (p(), M(k(F), {
             key: 0,
-            "stroke-color": "gray-400",
+            "stroke-color": "current",
             size: t.depth ? "8" : "16",
-            class: k(["absolute left-0 transform transition-transform", {
-              "rotate-0": n.value,
-              "-rotate-90": !n.value,
-              "ml-[16px]": t.depth
-            }])
-          }, null, 8, ["size", "class"])) : A("", !0),
-          D(" " + T(t.group.label), 1)
+            class: h([
+              k(b).expandedIcon,
+              {
+                "rotate-0": i.value,
+                "-rotate-90": !i.value,
+                "ml-[28px]": t.depth
+              }
+            ])
+          }, null, 8, ["size", "class"])) : $("", !0),
+          E(" " + G(t.group.label), 1)
         ]),
         _: 1
       }, 8, ["class", "href"])),
-      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]
-      ])
+      z("div", {
+        class: h(["grid transition-all relative", {
+          "grid-rows-[0fr]": !i.value && t.collapsible,
+          "grid-rows-[1fr]": i.value || !t.collapsible
+        }]),
+        ref_key: "$listWrapper",
+        ref: m,
+        onTransitionstart: r[4] || (r[4] = () => {
+          y.value = !0;
+        }),
+        onTransitionend: r[5] || (r[5] = () => {
+          y.value = !1, (i.value || !o.value) && e("updateMarkerPosition");
+        })
+      }, [
+        i.value && t.collapsible && t.depth === 0 ? (p(), f("div", {
+          key: 0,
+          class: h(k(b).openListBorderLeft)
+        }, null, 2)) : $("", !0),
+        x(U, {
+          ref_key: "$groupElements",
+          ref: v,
+          class: "overflow-hidden",
+          depth: t.depth,
+          items: t.group.items,
+          "active-path": t.activePath,
+          collapsible: t.collapsible,
+          "link-component": t.linkComponent,
+          onHideMarker: r[1] || (r[1] = (T) => e("hideMarker")),
+          onUpdateMarkerPosition: r[2] || (r[2] = () => e("updateMarkerPosition")),
+          onUpdateActivePosition: r[3] || (r[3] = (T) => i.value ? e("updateActivePosition", T) : null)
+        }, null, 8, ["depth", "items", "active-path", "collapsible", "link-component"])
+      ], 34)
     ], 64));
   }
-}), N = /* @__PURE__ */ y({
+}), O = /* @__PURE__ */ A({
   __name: "_DocLink",
   props: {
     item: {},
@@ -88,63 +112,68 @@ const P = {
     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,
+  setup(g, { expose: c, emit: d }) {
+    const n = g, i = d, v = u(), m = I("transition-is-moving", u(!1));
+    function s() {
+      n.active && N(() => {
+        var a;
+        const { top: e = 0, height: o = 36 } = ((a = v.value) == null ? void 0 : a.getBoundingClientRect()) ?? {};
+        i("update:active", n.active, {
+          top: e,
           height: o
         });
-      }
+      });
     }
     return H(() => {
-      M(
-        () => i.active,
+      C(
+        () => n.active,
         (e) => {
-          e ? l() : n("update:active", e);
+          e ? s() : i("update:active", e);
         },
         { immediate: !0 }
       );
-    }), v({
-      setActiveMarkerPosition: l
-    }), (e, s) => (p(), d("li", {
+    }), c({
+      setActiveMarkerPosition: s
+    }), (e, o) => (p(), f("li", {
       ref_key: "$container",
-      ref: u,
-      class: k(["list-none p-0", {
-        "pl-[16px]": e.depth >= 0
-      }])
+      ref: v,
+      class: "list-none p-0"
     }, [
-      (p(), b(w(e.linkComponent), {
-        class: k(["group relative block w-full pl-[24px]", {
-          "text-indigo-500": e.active,
+      (p(), M(S(e.linkComponent), {
+        class: h(["group relative block w-full pl-[24px]", {
+          "text-indigo-500 dark:text-indigo-400": e.active,
+          "text-gray-700 dark:text-gray-500": !e.active,
           "py-[8px] text-[16px] leading-[24px]": e.depth < 0,
           "leading-[20px] text-[14px] py-[12px]": e.depth >= 0
         }]),
+        style: L({
+          paddingLeft: e.depth >= 0 ? `${e.depth * 12 + 48}px` : void 0
+        }),
         href: e.item.href
       }, {
-        default: S(() => [
-          e.depth >= 0 ? (p(), d("div", {
+        default: D(() => [
+          e.depth >= 0 ? (p(), f("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)
+            class: h(["left-[6.5px] absolute top-[4px] bottom-[4px] w-[4px] z-10 rounded-full", {
+              hidden: !k(m) || !e.active,
+              "group-hover:block bg-gray-300": !e.active && e.collapsible,
+              "bg-indigo-500": e.active && k(m)
+            }])
+          }, null, 2)) : $("", !0),
+          E(" " + G(e.item.label), 1)
         ]),
         _: 1
-      }, 8, ["class", "href"]))
-    ], 2));
+      }, 8, ["class", "style", "href"]))
+    ], 512));
   }
-}), V = {
+}), W = { class: "list-none p-0" }, q = {
   key: 0,
   class: "relative list-none p-0"
-}, E = /* @__PURE__ */ y({
+};
+function w(g, c) {
+  return g.some((d) => "items" in d ? w(d.items, c) : d.href === c);
+}
+const U = /* @__PURE__ */ A({
   __name: "_DocGroupElements",
   props: {
     items: {},
@@ -153,63 +182,64 @@ const P = {
     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();
+  emits: ["updateActivePosition", "updateMarkerPosition", "hideMarker"],
+  setup(g, { expose: c, emit: d }) {
+    const n = g, i = d, v = u([]), m = u([]), s = P(
+      () => n.items.some((o) => "items" in o ? w(o.items, n.activePath) : o.href === n.activePath)
+    );
+    function e(o = -1) {
+      v.value.forEach((l) => {
+        l.setActiveMarkerPosition();
+      });
+      const a = o - // remove all the items that are not groups from the array and count them
+      n.items.slice(0, o).filter((l) => !("items" in l)).length;
+      m.value.slice(a + 1).forEach((l) => {
+        l.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, {
+    return c({
+      reTriggerSetActiveGroup: e
+    }), (o, a) => (p(), f("ul", W, [
+      (p(!0), f(B, null, V(o.items, (l, y) => (p(), f(B, null, [
+        l && "items" in l ? (p(), f("li", q, [
+          x(R, {
             ref_for: !0,
             ref_key: "$groups",
-            ref: l,
+            ref: m,
             "active-path": o.activePath,
-            group: t,
+            group: l,
             depth: o.depth + 1,
             collapsible: o.collapsible,
             "link-component": o.linkComponent,
-            onUpdateActivePosition: r[0] || (r[0] = (a) => {
-              n("updateActivePosition", a);
+            onUpdateActivePosition: a[0] || (a[0] = (t) => {
+              i("updateActivePosition", t);
             }),
-            onUpdateMarkerPosition: r[1] || (r[1] = () => {
-              e() ? s() : n("updateMarkerPosition");
-            })
-          }, null, 8, ["active-path", "group", "depth", "collapsible", "link-component"])
-        ])) : (p(), b(N, {
+            onUpdateMarkerPosition: () => {
+              s.value ? e(y) : i("updateMarkerPosition");
+            },
+            onHideMarker: a[1] || (a[1] = (t) => i("hideMarker"))
+          }, null, 8, ["active-path", "group", "depth", "collapsible", "link-component", "onUpdateMarkerPosition"])
+        ])) : (p(), M(O, {
           key: 1,
           ref_for: !0,
           ref_key: "$items",
-          ref: u,
-          item: t,
-          active: t.href === o.activePath,
+          ref: v,
+          item: l,
+          active: l.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);
+          "onUpdate:active": a[2] || (a[2] = (t, r) => {
+            if (r)
+              o.depth < 0 ? i("hideMarker") : i("updateActivePosition", r);
+            else
+              return;
           })
         }, null, 8, ["item", "active", "depth", "collapsible", "link-component"]))
       ], 64))), 256))
-    ], 2));
+    ]));
   }
-}), O = /* @__PURE__ */ y({
+}), Q = /* @__PURE__ */ A({
   __name: "DocMenu",
   props: {
     items: {},
@@ -217,42 +247,43 @@ const P = {
     collapsible: { type: Boolean, default: !0 },
     linkComponent: { type: [Object, Function, String], default: "a" }
   },
-  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;
+  setup(g) {
+    const c = u(), d = u(0), n = u(36), i = u(!1);
+    function v({ top: s, height: e } = { height: 0, top: 0 }) {
+      var a;
+      const o = ((a = c.value) == null ? void 0 : a.getBoundingClientRect().top) || 0;
+      d.value = s - o, n.value = e, i.value = !0;
     }
-    return (l, e) => (p(), d("div", {
+    const m = u(!1);
+    return j("transition-is-moving", m), (s, e) => (p(), f("div", {
       ref_key: "$container",
-      ref: v,
+      ref: c,
       class: "relative"
     }, [
-      n.value && l.collapsible ? (p(), d("div", {
+      i.value && s.collapsible && !m.value ? (p(), f("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`
+        style: L({
+          top: `${d.value}px`,
+          height: `${n.value - 8}px`
         })
-      }, null, 4)) : A("", !0),
-      C(E, {
-        items: l.items,
-        "active-path": l.activePath,
-        collapsible: l.collapsible,
-        "link-component": l.linkComponent,
+      }, null, 4)) : $("", !0),
+      x(U, {
+        items: s.items,
+        "active-path": s.activePath,
+        collapsible: s.collapsible,
+        "link-component": s.linkComponent,
         depth: -1,
-        onUpdateActivePosition: u,
-        onHideMarker: e[0] || (e[0] = (s) => n.value = !1)
+        onUpdateActivePosition: v,
+        onHideMarker: e[0] || (e[0] = (o) => i.value = !1)
       }, null, 8, ["items", "active-path", "collapsible", "link-component"])
     ], 512));
   }
 });
 export {
-  O as default
+  Q as default
 };
 //# sourceMappingURL=index.es.mjs.map
 
-/* <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]"> */
+/* <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] filter list-none p-0 text-indigo-500 dark:text-indigo-400 text-gray-900 dark:text-gray-100 text-gray-800 dark:text-gray-200 rotate-0 -rotate-90 ml-[28px] grid grid-rows-[0fr] grid-rows-[1fr] overflow-hidden text-indigo-400 text-gray-100 text-gray-200 icon-dark-current block w-full pl-[24px] text-gray-700 dark:text-gray-500 py-[8px] text-[16px] leading-[24px] leading-[20px] text-[14px] py-[12px] left-[6.5px] top-[4px] bottom-[4px] z-10 hidden group-hover:block bg-gray-300 text-gray-500 left-0 transform transition-transform text-gray-400 dark:text-gray-700 flex py-[10px] items-center text-start font-medium pl-[48px] left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900"> */

package/dist/index.es.mjs.map

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"index.es.mjs","sources":["../../constants/dist/index.js","../_DocGroup.vue","../_DocLink.vue","../_DocGroupElements.vue","../DocMenu.vue"],"sourcesContent":["export const classes = {\n    expandedIcon: 'absolute left-0 transform transition-transform text-gray-400 dark:text-gray-700',\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-[48px]',\n    openListBorderLeft: 'absolute left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900',\n};\n","<script lang=\"ts\" setup>\nimport { computed, type DefineComponent, ref, watch, inject } from 'vue'\nimport { IconChevronDownSmall } from '@cypress-design/vue-icon'\nimport { NavGroup, classes } from '@cypress-design/constants-docmenu'\nimport DocGroupElements, {\n  hasActiveItemRecursively,\n  type DocGroupEventsEmitted,\n} 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>()\nconst $listWrapper = ref<HTMLDivElement>()\n\nconst Head = computed(() =>\n  props.collapsible ? 'button' : props.group.href ? 'a' : 'div',\n)\n\nconst emit = defineEmits<DocGroupEventsEmitted>()\n\nconst hasActiveItem = computed(() =>\n  props.group.items.some((item) => {\n    if ('items' in item) {\n      return hasActiveItemRecursively(item.items, props.activePath)\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\nconst markerIsMoving = inject('transition-is-moving', ref(false))\n\nwatch(active, (active) => {\n  if (active) {\n    emit('hideMarker')\n  }\n})\n\nwatch(open, (open) => {\n  if (hasActiveItem.value) {\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 dark:text-indigo-400': active,\n        'text-gray-900 dark:text-gray-100': hasActiveItem && !active,\n        'text-gray-800 dark:text-gray-200': !hasActiveItem && !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=\"current\"\n      :size=\"depth ? '8' : '16'\"\n      :class=\"[\n        classes.expandedIcon,\n        {\n          'rotate-0': open,\n          '-rotate-90': !open,\n          'ml-[28px]': depth,\n        },\n      ]\"\n    />\n    {{ group.label }}\n  </component>\n  <div\n    class=\"grid transition-all relative\"\n    ref=\"$listWrapper\"\n    :class=\"{\n      'grid-rows-[0fr]': !open && collapsible,\n      'grid-rows-[1fr]': open || !collapsible,\n    }\"\n    @transitionstart=\"\n      () => {\n        markerIsMoving = true\n      }\n    \"\n    @transitionend=\"\n      () => {\n        markerIsMoving = false\n        if (open || !hasActiveItem) {\n          emit('updateMarkerPosition')\n        }\n      }\n    \"\n  >\n    <div\n      v-if=\"open && collapsible && depth === 0\"\n      :class=\"classes.openListBorderLeft\"\n    />\n    <DocGroupElements\n      ref=\"$groupElements\"\n      class=\"overflow-hidden\"\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=\"\n        (opts) => (open ? emit('updateActivePosition', opts) : null)\n      \"\n    />\n  </div>\n</template>\n","<script lang=\"ts\" setup>\nimport {\n  watch,\n  type DefineComponent,\n  ref,\n  onMounted,\n  inject,\n  nextTick,\n} 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\nconst markerIsMoving = inject('transition-is-moving', ref(false))\n\nfunction setActiveMarkerPosition() {\n  if (props.active) {\n    nextTick(() => {\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}\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 ref=\"$container\" class=\"list-none p-0\">\n    <component\n      :is=\"linkComponent\"\n      class=\"group relative block w-full pl-[24px]\"\n      :class=\"{\n        'text-indigo-500 dark:text-indigo-400': active,\n        'text-gray-700 dark:text-gray-500': !active,\n        'py-[8px] text-[16px] leading-[24px]': depth < 0,\n        'leading-[20px] text-[14px] py-[12px]': depth >= 0,\n      }\"\n      :style=\"{\n        paddingLeft: depth >= 0 ? `${depth * 12 + 48}px` : undefined,\n      }\"\n      :href=\"item.href\"\n    >\n      <div\n        v-if=\"depth >= 0\"\n        class=\"left-[6.5px] absolute top-[4px] bottom-[4px] w-[4px] z-10 rounded-full\"\n        :class=\"{\n          hidden: !markerIsMoving || !active,\n          'group-hover:block bg-gray-300': !active && collapsible,\n          'bg-indigo-500': active && markerIsMoving,\n        }\"\n      />\n      {{ item.label }}\n    </component>\n  </li>\n</template>\n","<script lang=\"ts\">\nexport function hasActiveItemRecursively(\n  items: (NavGroup | NavItemLink)[],\n  activePath?: string,\n): boolean {\n  return items.some((item) => {\n    if ('items' in item) {\n      return hasActiveItemRecursively(item.items, activePath)\n    }\n    return item.href === activePath\n  })\n}\n\nexport interface DocGroupEventsEmitted {\n  /**\n   * If the group is not collapsed, this event will emit the\n   * active marker position all the way to the menu component\n   */\n  (event: 'updateActivePosition', opts?: { top: number; height: number }): void\n  /**\n   * This event will trigger a re-render of the active marker\n   * to update its position if not in the current subtree\n   */\n  (event: 'updateMarkerPosition'): void\n  /**\n   * This event will bubble-up and hide the active marker\n   */\n  (event: 'hideMarker'): void\n}\n</script>\n\n<script lang=\"ts\" setup>\nimport { DefineComponent, computed, 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<DocGroupEventsEmitted>()\n\nconst $items = ref<(typeof DocLink)[]>([])\nconst $groups = ref<(typeof DocGroup)[]>([])\n\nconst hasActiveItem = computed(() =>\n  props.items.some((item) => {\n    if ('items' in item) {\n      return hasActiveItemRecursively(item.items, props.activePath)\n    }\n    return item.href === props.activePath\n  }),\n)\n\n/**\n * update the position of the marker when opening a group\n * @param index\n */\nfunction reTriggerSetActiveGroup(index = -1) {\n  $items.value.forEach((item) => {\n    item.setActiveMarkerPosition()\n  })\n\n  // calculate the index of the calling group in the list of groups\n  const indexGroup =\n    index -\n    // remove all the items that are not groups from the array and count them\n    props.items.slice(0, index).filter((item) => !('items' in item)).length\n\n  // only update groups that come after the toggled one\n  // others will not need to update the marker\n  // since they are \"before\" in the rendering tree\n  $groups.value.slice(indexGroup + 1).forEach((group) => {\n    group.reTriggerSetActiveGroup()\n  })\n}\n\ndefineExpose({\n  reTriggerSetActiveGroup,\n})\n</script>\n\n<template>\n  <ul class=\"list-none p-0\">\n    <template v-for=\"(item, index) 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 (hasActiveItem) {\n                reTriggerSetActiveGroup(index)\n              } else {\n                emit('updateMarkerPosition')\n              }\n            }\n          \"\n          @hide-marker=\"emit('hideMarker')\"\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) {\n              return\n            } else if (depth < 0) {\n              emit('hideMarker')\n            } else {\n              emit('updateActivePosition', opts)\n            }\n          }\n        \"\n      />\n    </template>\n  </ul>\n</template>\n","<script lang=\"ts\" setup>\nimport { ref, type DefineComponent, provide } 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\nconst markerIsMoving = ref(false)\n\nprovide('transition-is-moving', markerIsMoving)\n</script>\n\n<template>\n  <div ref=\"$container\" class=\"relative\">\n    <div\n      v-if=\"showMarker && collapsible && !markerIsMoving\"\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}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","$listWrapper","Head","computed","emit","__emit","hasActiveItem","item","hasActiveItemRecursively","reTriggerSetActiveGroup","_a","active","markerIsMoving","inject","watch","__expose","$container","setActiveMarkerPosition","nextTick","top","height","onMounted","items","activePath","$items","$groups","index","indexGroup","group","activeTop","activeHeight","showMarker","updateActiveMarkerPosition","containerTop","provide"],"mappings":";;AAAO,MAAMA,IAAU;AAAA,EACnB,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,oBAAoB;AACxB;;;;;;;;;;;ACGA,UAAMC,IAAQC,GAaRC,IAAOC,EAAIH,EAAM,MAAM,cAAc,EAAI,GACzCI,IAAiBD,KACjBE,IAAeF,KAEfG,IAAOC;AAAA,MAAS,MACpBP,EAAM,cAAc,WAAWA,EAAM,MAAM,OAAO,MAAM;AAAA,IAAA,GAGpDQ,IAAOC,GAEPC,IAAgBH;AAAA,MAAS,MAC7BP,EAAM,MAAM,MAAM,KAAK,CAACW,MAClB,WAAWA,IACNC,EAAyBD,EAAK,OAAOX,EAAM,UAAU,IAEvDW,EAAK,SAASX,EAAM,UAC5B;AAAA,IAAA;AAGH,aAASa,IAA0B;;AACjC,OAAAC,IAAAV,EAAe,UAAf,QAAAU,EAAsB;AAAA,IACxB;AAEA,UAAMC,IAASR,EAAS,MAAMP,EAAM,MAAM,SAASA,EAAM,UAAU,GAE7DgB,IAAiBC,EAAO,wBAAwBd,EAAI,EAAK,CAAC;AAE1D,WAAAe,EAAAH,GAAQ,CAACA,MAAW;AACxB,MAAIA,KACFP,EAAK,YAAY;AAAA,IACnB,CACD,GAEKU,EAAAhB,GAAM,CAACA,MAAS;AACpB,MAAIQ,EAAc,QACZR,IACsBW,MAExBL,EAAK,YAAY,IAGnBA,EAAK,sBAAsB;AAAA,IAC7B,CACD,GAEYW,EAAA;AAAA,MACX,yBAAAN;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC1DD,UAAMb,IAAQC,GAaRO,IAAOC,GAQPW,IAAajB,KAEba,IAAiBC,EAAO,wBAAwBd,EAAI,EAAK,CAAC;AAEhE,aAASkB,IAA0B;AACjC,MAAIrB,EAAM,UACRsB,EAAS,MAAM;;AACP,cAAA,EAAE,KAAAC,IAAM,GAAG,QAAAC,IAAS,SACxBV,IAAAM,EAAW,UAAX,gBAAAN,EAAkB,4BAA2B;AAE1C,QAAAN,EAAA,iBAAiBR,EAAM,QAAQ;AAAA,UAClC,KAAAuB;AAAA,UACA,QAAAC;AAAA,QAAA,CACD;AAAA,MAAA,CACF;AAAA,IAEL;AAEA,WAAAC,EAAU,MAAM;AACd,MAAAP;AAAA,QACE,MAAMlB,EAAM;AAAA,QACZ,CAACe,MAAW;AACV,UAAIA,IACsBM,MAExBb,EAAK,iBAAiBO,CAAM;AAAA,QAEhC;AAAA,QACA,EAAE,WAAW,GAAK;AAAA,MAAA;AAAA,IACpB,CACD,GAEYI,EAAA;AAAA,MACX,yBAAAE;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACjEe,SAAAT,EACdc,GACAC,GACS;AACF,SAAAD,EAAM,KAAK,CAACf,MACb,WAAWA,IACNC,EAAyBD,EAAK,OAAOgB,CAAU,IAEjDhB,EAAK,SAASgB,CACtB;AACH;;;;;;;;;;;;AA0BA,UAAM3B,IAAQC,GAQRO,IAAOC,GAEPmB,IAASzB,EAAwB,CAAA,CAAE,GACnC0B,IAAU1B,EAAyB,CAAA,CAAE,GAErCO,IAAgBH;AAAA,MAAS,MAC7BP,EAAM,MAAM,KAAK,CAACW,MACZ,WAAWA,IACNC,EAAyBD,EAAK,OAAOX,EAAM,UAAU,IAEvDW,EAAK,SAASX,EAAM,UAC5B;AAAA,IAAA;AAOM,aAAAa,EAAwBiB,IAAQ,IAAI;AACpC,MAAAF,EAAA,MAAM,QAAQ,CAACjB,MAAS;AAC7B,QAAAA,EAAK,wBAAwB;AAAA,MAAA,CAC9B;AAGD,YAAMoB,IACJD;AAAA,MAEA9B,EAAM,MAAM,MAAM,GAAG8B,CAAK,EAAE,OAAO,CAACnB,MAAS,EAAE,WAAWA,EAAK,EAAE;AAKnE,MAAAkB,EAAQ,MAAM,MAAME,IAAa,CAAC,EAAE,QAAQ,CAACC,MAAU;AACrD,QAAAA,EAAM,wBAAwB;AAAA,MAAA,CAC/B;AAAA,IACH;AAEa,WAAAb,EAAA;AAAA,MACX,yBAAAN;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACjED,UAAMO,IAAajB,KAEb8B,IAAY9B,EAAI,CAAC,GACjB+B,IAAe/B,EAAI,EAAE,GACrBgC,IAAahC,EAAI,EAAK;AAEnB,aAAAiC,EAA2B,EAAE,KAAAb,GAAK,QAAAC,EAAO,IAAI,EAAE,QAAQ,GAAG,KAAK,KAAK;;AAC3E,YAAMa,MAAevB,IAAAM,EAAW,UAAX,gBAAAN,EAAkB,wBAAwB,QAAO;AACtE,MAAAmB,EAAU,QAAQV,IAAMc,GACxBH,EAAa,QAAQV,GACrBW,EAAW,QAAQ;AAAA,IACrB;AAEM,UAAAnB,IAAiBb,EAAI,EAAK;AAEhC,WAAAmC,EAAQ,wBAAwBtB,CAAc;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.umd.js

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