@cypress-design/vue-docmenu 0.3.0 → 0.4.1

package/dist/index.es.mjs

@@ -1,169 +1,258 @@
-import { defineComponent as y, openBlock as t, createElementBlock as r, normalizeClass as i, createElementVNode as B, normalizeStyle as w, createCommentVNode as v, createTextVNode as $, toDisplayString as C, ref as x, computed as g, Fragment as u, createBlock as h, resolveDynamicComponent as E, unref as c, withCtx as G, withDirectives as H, renderList as D, createVNode as z, vShow as L } from "vue";
-import { IconChevronDownSmall as M } from "@cypress-design/vue-icon";
-const b = {
+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",
   topButton: "leading-[24px] text-[16px] pl-[24px] font-medium",
   leafButton: "leading-[20px] text-[14px] pl-[40px]"
-}, T = ["href"], _ = /* @__PURE__ */ y({
-  __name: "_DocLink",
-  props: {
-    item: {},
-    depth: { default: -1 },
-    collapsible: { type: Boolean }
-  },
-  setup(f) {
-    return (l, o) => (t(), r("li", {
-      class: i(["list-none p-0", {
-        "pl-[16px]": l.depth >= 0
-      }])
-    }, [
-      B("a", {
-        class: i(["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
-      }, [
-        l.depth >= 0 ? (t(), r("div", {
-          key: 0,
-          class: i(["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)) : v("", !0),
-        $(" " + C(l.item.text), 1)
-      ], 10, T)
-    ], 2));
-  }
-}), F = {
-  key: 0,
-  class: "relative list-none p-0"
-}, N = /* @__PURE__ */ y({
+}, I = /* @__PURE__ */ y({
   __name: "_DocGroup",
   props: {
     group: {},
+    activePath: {},
     collapsible: { type: Boolean },
+    linkComponent: {},
     depth: { default: 0 }
   },
-  setup(f, { expose: l }) {
-    const o = f, p = x(o.depth === 0), d = x([]), S = g(() => d.value && p.value ? d.value.reduce(
-      (e, { height: s }) => e + s,
-      o.group.items.length
-    ) : 0);
-    l({
-      height: S
-    });
-    const V = g(() => {
-      var k;
-      const e = o.group.items.findIndex(
-        (a) => "href" in a && a.active
-      );
-      let s = o.group.items.filter(
-        (a, m) => !("href" in a) && m < e
-      ).length;
-      const n = (k = d.value) == null ? void 0 : k.reduce((a, m) => s < -1 ? a : (s--, a + m.height), 0);
-      return (e + n) * 44;
-    }), I = g(
-      () => o.collapsible ? "button" : o.group.href ? "a" : "div"
-    );
-    return (e, s) => (t(), r(u, null, [
-      (t(), h(E(I.value), {
-        class: i([
-          c(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,
           {
-            [c(b).topButton]: e.depth === 0,
-            [c(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: s[0] || (s[0] = () => {
-          e.collapsible && (p.value = !p.value);
+        href: t.group.href,
+        onClick: a[0] || (a[0] = () => {
+          t.collapsible ? n.value = !n.value : e("updateActivePosition");
         })
       }, {
-        default: G(() => [
-          o.collapsible ? (t(), h(c(M), {
+        default: S(() => [
+          i.collapsible ? (p(), b(g(F), {
             key: 0,
             "stroke-color": "gray-400",
-            size: e.depth ? "8" : "16",
-            class: i(["absolute left-0 transform transition-transform", {
-              "rotate-0": p.value,
-              "-rotate-90": !p.value,
-              "ml-[16px]": e.depth
+            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"])) : v("", !0),
-          $(" " + C(e.group.text), 1)
+          }, null, 8, ["size", "class"])) : A("", !0),
+          D(" " + T(t.group.label), 1)
         ]),
         _: 1
       }, 8, ["class", "href"])),
-      o.collapsible && e.depth >= 0 && p.value && e.group.items.some((n) => "href" in n && n.active) ? (t(), r("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: `${V.value}px`,
-          left: `-${e.depth === 0 ? 0 : e.depth * 7.5 + 1}px`
-        })
-      }, null, 4)) : v("", !0),
-      H(B("ul", {
-        class: i(["list-none p-0 ml-[7.5px]", {
-          "border-l border-gray-100": e.depth === 0 && o.collapsible
-        }])
-      }, [
-        (t(!0), r(u, null, D(e.group.items, (n) => (t(), r(u, null, [
-          n && "items" in n ? (t(), r("li", F, [
-            z(N, {
-              ref_for: !0,
-              ref_key: "$groups",
-              ref: d,
-              group: n,
-              depth: e.depth + 1,
-              collapsible: o.collapsible
-            }, null, 8, ["group", "depth", "collapsible"])
-          ])) : (t(), h(_, {
-            key: 1,
-            item: n,
-            depth: e.depth,
-            collapsible: e.collapsible
-          }, null, 8, ["item", "depth", "collapsible"]))
-        ], 64))), 256))
-      ], 2), [
-        [L, p.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));
   }
-}), O = { 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"
-}, J = /* @__PURE__ */ y({
-  __name: "DocMenu",
+}, E = /* @__PURE__ */ y({
+  __name: "_DocGroupElements",
   props: {
     items: {},
-    collapsible: { type: Boolean, default: !0 }
+    activePath: {},
+    collapsible: { type: Boolean },
+    linkComponent: { type: [Object, Function, String] },
+    depth: {}
   },
-  setup(f) {
-    return (l, o) => (t(), r("ul", O, [
-      (t(!0), r(u, null, D(l.items, (p) => (t(), r(u, null, [
-        "items" in p ? (t(), r("li", j, [
-          z(N, {
-            group: p,
-            depth: 0,
-            collapsible: l.collapsible
-          }, null, 8, ["group", "collapsible"])
-        ])) : (t(), h(_, {
+  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,
-          item: p,
-          collapsible: l.collapsible
-        }, null, 8, ["item", "collapsible"]))
+          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(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 {
-  J 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 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, 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    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.text }}\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        />\n      </li>\n      <DocLink v-else :item=\"item\" :depth=\"depth\" :collapsible=\"collapsible\" />\n    </template>\n  </ul>\n</template>\n"],"names":["classes","open","ref","props","$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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBCcMC,IAAOC,EAAIC,EAAM,UAAU,CAAC,GAE5BC,IAAUF,EAA0B,CAAA,CAAE,GAEtCG,IAASC,EAAS,MACfF,EAAQ,SAASH,EAAK,QACzBG,EAAQ,MAAM;AAAA,MACZ,CAACG,GAAK,EAAE,QAAQC,QAAQD,IAAMC;AAAA,MAC9BL,EAAM,MAAM,MAAM;AAAA,IAEpB,IAAA,CACL;AAIE,IAAAM,EAAA;AAAA,MACD,QAAAJ;AAAA,IAAA,CACD;AAEK,UAAAK,IAAkBJ,EAAS,MAAM;;AAC/B,YAAAK,IAAcR,EAAM,MAAM,MAAM;AAAA,QACpC,CAACS,MAAS,UAAUA,KAAQA,EAAK;AAAA,MAAA;AAI/B,UAAAC,IAAiBV,EAAM,MAAM,MAAM;AAAA,QACrC,CAACS,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,MACpBH,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',\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":";;AAAO,MAAMA,IAAU;AAAA,EACnB,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,YAAY;AAChB;;;;;;;;;;;ACEA,UAAMC,IAAQC,GAaRC,IAAOC,EAAIH,EAAM,MAAM,cAAc,EAAI,GACzCI,IAAiBD,KAEjBE,IAAOC;AAAA,MAAS,MACpBN,EAAM,cAAc,WAAWA,EAAM,MAAM,OAAO,MAAM;AAAA,IAAA,GAGpDO,IAAOC;AAMb,aAASC,EAAyBC,IAAQV,EAAM,MAAM,OAAgB;AAC7D,aAAAU,EAAM,KAAK,CAACC,MACb,WAAWA,IACNF,EAAyBE,EAAK,KAAK,IAErCA,EAAK,SAASX,EAAM,UAC5B;AAAA,IACH;AAEA,aAASY,IAA0B;;AACjC,OAAAC,IAAAT,EAAe,UAAf,QAAAS,EAAsB;AAAA,IACxB;AAEA,UAAMC,IAASR,EAAS,MAAMN,EAAM,MAAM,SAASA,EAAM,UAAU;AAE7D,WAAAe,EAAAD,GAAQ,CAACA,MAAW;AACxB,MAAIA,KACFP,EAAK,YAAY;AAAA,IACnB,CACD,GAEKQ,EAAAb,GAAM,OAAOA,MAAS;AAC1B,YAAMc,EAAS,GACXP,MACEP,IACsBU,MAExBL,EAAK,YAAY,IAGnBA,EAAK,sBAAsB;AAAA,IAC7B,CACD,GAEYU,EAAA;AAAA,MACX,yBAAAL;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AChED,UAAMZ,IAAQC,GAaRM,IAAOC,GAQPU,IAAaf;AAEnB,aAASgB,IAA0B;;AACjC,UAAInB,EAAM,QAAQ;AACV,cAAA,EAAE,KAAAoB,IAAM,GAAG,QAAAC,IAAS,SACxBR,IAAAK,EAAW,UAAX,gBAAAL,EAAkB,4BAA2B;AAE1C,QAAAN,EAAA,iBAAiBP,EAAM,QAAQ;AAAA,UAClC,KAAAoB;AAAA,UACA,QAAAC;AAAA,QAAA,CACD;AAAA,MACH;AAAA,IACF;AAEA,WAAAC,EAAU,MAAM;AACd,MAAAP;AAAA,QACE,MAAMf,EAAM;AAAA,QACZ,CAACc,MAAW;AACV,UAAIA,IACsBK,MAExBZ,EAAK,iBAAiBO,CAAM;AAAA,QAEhC;AAAA,QACA,EAAE,WAAW,GAAK;AAAA,MAAA;AAAA,IACpB,CACD,GAEYG,EAAA;AAAA,MACX,yBAAAE;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACjDD,UAAMnB,IAAQC,GAQRM,IAAOC,GAMPe,IAASpB,EAAwB,CAAA,CAAE,GACnCqB,IAAUrB,EAAyB,CAAA,CAAE;AAElC,aAAAM,EAAyBC,IAAQV,EAAM,OAAgB;AACvD,aAAAU,EAAM,KAAK,CAACC,MACb,WAAWA,IACNF,EAAyBE,EAAK,KAAK,IAErCA,EAAK,SAASX,EAAM,UAC5B;AAAA,IACH;AAEA,aAASY,IAA0B;AAC1B,MAAAW,EAAA,MAAM,QAAQ,CAACZ,MAAS;AAC7B,QAAAA,EAAK,wBAAwB;AAAA,MAAA,CAC9B,GACOa,EAAA,MAAM,QAAQ,CAACC,MAAU;AAC/B,QAAAA,EAAM,wBAAwB;AAAA,MAAA,CAC/B;AAAA,IACH;AAEa,WAAAR,EAAA;AAAA,MACX,yBAAAL;AAAA,IAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACxBD,UAAMM,IAAaf,KAEbuB,IAAYvB,EAAI,CAAC,GACjBwB,IAAexB,EAAI,EAAE,GACrByB,IAAazB,EAAI,EAAK;AAEnB,aAAA0B,EAA2B,EAAE,KAAAT,GAAK,QAAAC,EAAO,IAAI,EAAE,QAAQ,GAAG,KAAK,KAAK;;AAC3E,YAAMS,MAAejB,IAAAK,EAAW,UAAX,gBAAAL,EAAkB,wBAAwB,QAAO;AACtE,MAAAa,EAAU,QAAQN,IAAMU,GACxBH,EAAa,QAAQN,GACrBO,EAAW,QAAQ;AAAA,IACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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]"},g=["href"],f=e.defineComponent({__name:"_DocLink",props:{item:{},depth:{default:-1},collapsible:{type:Boolean}},setup(d){return(o,t)=>(e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass(["list-none p-0",{"pl-[16px]":o.depth>=0}])},[e.createElementVNode("a",{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},[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.text),1)],10,g)],2))}}),k={key:0,class:"relative list-none p-0"},h=e.defineComponent({__name:"_DocGroup",props:{group:{},collapsible:{type:Boolean},depth:{default:0}},setup(d,{expose:o}){const t=d,n=e.ref(t.depth===0),i=e.ref([]),y=e.computed(()=>i.value&&n.value?i.value.reduce((l,{height:p})=>l+p,t.group.items.length):0);o({height:y});const x=e.computed(()=>{var u;const l=t.group.items.findIndex(s=>"href"in s&&s.active);let p=t.group.items.filter((s,m)=>!("href"in s)&&m<l).length;const r=(u=i.value)==null?void 0:u.reduce((s,m)=>p<-1?s:(p--,s+m.height),0);return(l+r)*44}),C=e.computed(()=>t.collapsible?"button":t.group.href?"a":"div");return(l,p)=>(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":t.group.active}]),href:t.group.href,onClick:p[0]||(p[0]=()=>{l.collapsible&&(n.value=!n.value)})},{default:e.withCtx(()=>[t.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":n.value,"-rotate-90":!n.value,"ml-[16px]":l.depth}])},null,8,["size","class"])):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString(l.group.text),1)]),_:1},8,["class","href"])),t.collapsible&&l.depth>=0&&n.value&&l.group.items.some(r=>"href"in r&&r.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:`${x.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&&t.collapsible}])},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.group.items,r=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[r&&"items"in r?(e.openBlock(),e.createElementBlock("li",k,[e.createVNode(h,{ref_for:!0,ref_key:"$groups",ref:i,group:r,depth:l.depth+1,collapsible:t.collapsible},null,8,["group","depth","collapsible"])])):(e.openBlock(),e.createBlock(f,{key:1,item:r,depth:l.depth,collapsible:l.collapsible},null,8,["item","depth","collapsible"]))],64))),256))],2),[[e.vShow,n.value]])],64))}}),B={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}},setup(d){return(o,t)=>(e.openBlock(),e.createElementBlock("ul",B,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.items,n=>(e.openBlock(),e.createElementBlock(e.Fragment,null,["items"in n?(e.openBlock(),e.createElementBlock("li",b,[e.createVNode(h,{group:n,depth:0,collapsible:o.collapsible},null,8,["group","collapsible"])])):(e.openBlock(),e.createBlock(f,{key:1,item:n,collapsible:o.collapsible},null,8,["item","collapsible"]))],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",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 font-medium pl-[40px]"> */

package/dist/index.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.umd.js","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, 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    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.text }}\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        />\n      </li>\n      <DocLink v-else :item=\"item\" :depth=\"depth\" :collapsible=\"collapsible\" />\n    </template>\n  </ul>\n</template>\n"],"names":["classes","open","ref","props","$groups","height","computed","acc","h","__expose","activeMarkerTop","activeIndex","item","numberOfGroups","index","groupHeight","_a","group","Head"],"mappings":"8TAAO,MAAMA,EAAU,CACnB,OAAQ,6DACR,UAAW,mDACX,WAAY,sCAChB,ghCCcMC,EAAOC,EAAA,IAAIC,EAAM,QAAU,CAAC,EAE5BC,EAAUF,MAA0B,CAAA,CAAE,EAEtCG,EAASC,EAAAA,SAAS,IACfF,EAAQ,OAASH,EAAK,MACzBG,EAAQ,MAAM,OACZ,CAACG,EAAK,CAAE,OAAQC,KAAQD,EAAMC,EAC9BL,EAAM,MAAM,MAAM,MAEpB,EAAA,CACL,EAIEM,EAAA,CACD,OAAAJ,CAAA,CACD,EAEK,MAAAK,EAAkBJ,EAAAA,SAAS,IAAM,OAC/B,MAAAK,EAAcR,EAAM,MAAM,MAAM,UACnCS,GAAS,SAAUA,GAAQA,EAAK,MAAA,EAI/B,IAAAC,EAAiBV,EAAM,MAAM,MAAM,OACrC,CAACS,EAAME,IAAU,EAAE,SAAUF,IAASE,EAAQH,CAC9C,EAAA,OAIF,MAAMI,GAAcC,EAAAZ,EAAQ,QAAR,YAAAY,EAAe,OAAO,CAACT,EAAKU,IAC1CJ,EAAiB,GAAWN,GAChCM,IACON,EAAMU,EAAM,QAClB,GACH,OAAQN,EAAcI,GAAe,EAAA,CACtC,EAEKG,EAAOZ,EAAA,SAAS,IACpBH,EAAM,YAAc,SAAWA,EAAM,MAAM,KAAO,IAAM,KAAA"}
+{"version":3,"file":"index.umd.js","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',\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":"8TAAO,MAAMA,EAAU,CACnB,OAAQ,6DACR,UAAW,mDACX,WAAY,sCAChB,qOCEA,MAAMC,EAAQC,EAaRC,EAAOC,EAAAA,IAAIH,EAAM,MAAM,YAAc,EAAI,EACzCI,EAAiBD,EAAAA,MAEjBE,EAAOC,EAAA,SAAS,IACpBN,EAAM,YAAc,SAAWA,EAAM,MAAM,KAAO,IAAM,KAAA,EAGpDO,EAAOC,EAMb,SAASC,EAAyBC,EAAQV,EAAM,MAAM,MAAgB,CAC7D,OAAAU,EAAM,KAAMC,GACb,UAAWA,EACNF,EAAyBE,EAAK,KAAK,EAErCA,EAAK,OAASX,EAAM,UAC5B,CACH,CAEA,SAASY,GAA0B,QACjCC,EAAAT,EAAe,QAAf,MAAAS,EAAsB,yBACxB,CAEA,MAAMC,EAASR,EAAS,SAAA,IAAMN,EAAM,MAAM,OAASA,EAAM,UAAU,EAE7De,OAAAA,QAAAD,EAASA,GAAW,CACpBA,GACFP,EAAK,YAAY,CACnB,CACD,EAEKQ,QAAAb,EAAM,MAAOA,GAAS,CAC1B,MAAMc,EAAS,SAAA,EACXP,IACEP,EACsBU,IAExBL,EAAK,YAAY,EAGnBA,EAAK,sBAAsB,CAC7B,CACD,EAEYU,EAAA,CACX,wBAAAL,CAAA,CACD,i7CChED,MAAMZ,EAAQC,EAaRM,EAAOC,EAQPU,EAAaf,EAAAA,MAEnB,SAASgB,GAA0B,OACjC,GAAInB,EAAM,OAAQ,CACV,KAAA,CAAE,IAAAoB,EAAM,EAAG,OAAAC,EAAS,MACxBR,EAAAK,EAAW,QAAX,YAAAL,EAAkB,0BAA2B,GAE1CN,EAAA,gBAAiBP,EAAM,OAAQ,CAClC,IAAAoB,EACA,OAAAC,CAAA,CACD,CACH,CACF,CAEAC,OAAAA,EAAAA,UAAU,IAAM,CACdP,EAAA,MACE,IAAMf,EAAM,OACXc,GAAW,CACNA,EACsBK,IAExBZ,EAAK,gBAAiBO,CAAM,CAEhC,EACA,CAAE,UAAW,EAAK,CAAA,CACpB,CACD,EAEYG,EAAA,CACX,wBAAAE,CAAA,CACD,ynCCjDD,MAAMnB,EAAQC,EAQRM,EAAOC,EAMPe,EAASpB,MAAwB,CAAA,CAAE,EACnCqB,EAAUrB,MAAyB,CAAA,CAAE,EAElC,SAAAM,EAAyBC,EAAQV,EAAM,MAAgB,CACvD,OAAAU,EAAM,KAAMC,GACb,UAAWA,EACNF,EAAyBE,EAAK,KAAK,EAErCA,EAAK,OAASX,EAAM,UAC5B,CACH,CAEA,SAASY,GAA0B,CAC1BW,EAAA,MAAM,QAASZ,GAAS,CAC7BA,EAAK,wBAAwB,CAAA,CAC9B,EACOa,EAAA,MAAM,QAASC,GAAU,CAC/BA,EAAM,wBAAwB,CAAA,CAC/B,CACH,CAEa,OAAAR,EAAA,CACX,wBAAAL,CAAA,CACD,8vCCxBD,MAAMM,EAAaf,EAAAA,MAEbuB,EAAYvB,MAAI,CAAC,EACjBwB,EAAexB,MAAI,EAAE,EACrByB,EAAazB,MAAI,EAAK,EAEnB,SAAA0B,EAA2B,CAAE,IAAAT,EAAK,OAAAC,CAAO,EAAI,CAAE,OAAQ,EAAG,IAAK,GAAK,OAC3E,MAAMS,IAAejB,EAAAK,EAAW,QAAX,YAAAL,EAAkB,wBAAwB,MAAO,EACtEa,EAAU,MAAQN,EAAMU,EACxBH,EAAa,MAAQN,EACrBO,EAAW,MAAQ,EACrB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cypress-design/vue-docmenu",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "files": [
     "*"
   ],
@@ -20,8 +20,8 @@
     "build:types": "yarn vue-tsc --project ./tsconfig.build.json"
   },
   "dependencies": {
-    "@cypress-design/constants-docmenu": "^0.1.0",
-    "@cypress-design/vue-icon": "^0.23.2"
+    "@cypress-design/constants-docmenu": "^0.1.2",
+    "@cypress-design/vue-icon": "^0.31.2"
   },
   "devDependencies": {
     "@cypress-design/rollup-plugin-tailwind-keep": "*"

package/DocMenu.rootstory.tsx

@@ -1,6 +0,0 @@
-import type { NavGroup, NavItemLink } from '../constants'
-import DocMenu from './DocMenu.vue'
-
-export default ({ items }: { items: (NavGroup | NavItemLink)[] }) => {
-  return <DocMenu items={items} />
-}