@cypress-design/vue-docmenu 0.4.1 → 0.4.2

package/.turbo/turbo-build.log

@@ -7,8 +7,8 @@ transforming...
 ✓ 10 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.es.mjs  9.07 kB │ gzip: 2.73 kB │ map: 12.03 kB
-dist/index.umd.js  7.15 kB │ gzip: 2.40 kB │ map: 11.67 kB
-✓ built in 3.08s
+dist/index.es.mjs  9.09 kB │ gzip: 2.73 kB │ map: 12.04 kB
+dist/index.umd.js  7.17 kB │ gzip: 2.41 kB │ map: 11.68 kB
+✓ built in 3.61s
 $ yarn vue-tsc --project ./tsconfig.build.json
 $ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vue-tsc --project ./tsconfig.build.json

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @cypress-design/vue-docmenu
 
+## 0.4.2
+
+### Patch Changes
+
+- [`a58be93`](https://github.com/cypress-io/cypress-design/commit/a58be9322cfc64c64533ff8f8414a45ba90be751) Thanks [@elevatebart](https://github.com/elevatebart)! - fix(docgen): make buttons left-aligned (logical)
+
+- Updated dependencies [[`a58be93`](https://github.com/cypress-io/cypress-design/commit/a58be9322cfc64c64533ff8f8414a45ba90be751)]:
+  - @cypress-design/constants-docmenu@0.1.3
+
 ## 0.4.1
 
 ### Patch Changes

package/dist/index.es.mjs

@@ -1,7 +1,7 @@
 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",
+  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({
@@ -255,4 +255,4 @@ export {
 };
 //# 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 font-medium pl-[40px]"> */
+/* <wind-keep class="container relative absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px] list-none p-0 border-l border-gray-100 ml-[8px] text-indigo-500 left-0 transform transition-transform rotate-0 -rotate-90 ml-[16px] icon-dark-gray-400 pl-[16px] block w-full pl-[24px] py-[8px] text-[16px] leading-[24px] leading-[20px] text-[14px] py-[12px] h-[80%] top-[10%] z-10 hidden group-hover:block bg-gray-300 flex py-[10px] items-center text-start font-medium pl-[40px]"> */

package/dist/index.es.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.mjs","sources":["../../constants/dist/index.js","../_DocGroup.vue","../_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":"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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    button: 'flex leading-[24px] py-[10px] items-center relative w-full text-start',\n    topButton: 'leading-[24px] text-[16px] pl-[24px] font-medium',\n    leafButton: 'leading-[20px] text-[14px] pl-[40px]',\n};\n","<script lang=\"ts\" setup>\nimport { computed, type DefineComponent, ref, watch, nextTick } from 'vue'\nimport { IconChevronDownSmall } from '@cypress-design/vue-icon'\nimport { NavGroup, classes } from '@cypress-design/constants-docmenu'\nimport DocGroupElements from './_DocGroupElements.vue'\n\nconst props = withDefaults(\n  defineProps<{\n    group: NavGroup\n    activePath?: string\n    collapsible: boolean\n    linkComponent: DefineComponent | 'a'\n    depth?: number\n  }>(),\n  {\n    depth: 0,\n  },\n)\n\nconst open = ref(props.group.collapsed !== true)\nconst $groupElements = ref<typeof DocGroupElements>()\n\nconst Head = computed(() =>\n  props.collapsible ? 'button' : props.group.href ? 'a' : 'div',\n)\n\nconst emit = defineEmits<{\n  (event: 'updateActivePosition', opts?: { top: number; height: number }): void\n  (event: 'hideMarker'): void\n  (event: 'updateMarkerPosition'): void\n}>()\n\nfunction hasActiveItemRecursively(items = props.group.items): boolean {\n  return items.some((item) => {\n    if ('items' in item) {\n      return hasActiveItemRecursively(item.items)\n    }\n    return item.href === props.activePath\n  })\n}\n\nfunction reTriggerSetActiveGroup() {\n  $groupElements.value?.reTriggerSetActiveGroup()\n}\n\nconst active = computed(() => props.group.href === props.activePath)\n\nwatch(active, (active) => {\n  if (active) {\n    emit('hideMarker')\n  }\n})\n\nwatch(open, async (open) => {\n  await nextTick()\n  if (hasActiveItemRecursively()) {\n    if (open) {\n      reTriggerSetActiveGroup()\n    } else {\n      emit('hideMarker')\n    }\n  } else {\n    emit('updateMarkerPosition')\n  }\n})\n\ndefineExpose({\n  reTriggerSetActiveGroup,\n})\n</script>\n\n<template>\n  <component\n    :is=\"Head\"\n    :class=\"[\n      classes.button,\n      {\n        [classes.topButton]: depth === 0,\n        [classes.leafButton]: depth,\n        'text-indigo-500': active,\n      },\n    ]\"\n    :href=\"group.href\"\n    @click=\"\n      () => {\n        if (collapsible) {\n          open = !open\n        } else {\n          emit('updateActivePosition')\n        }\n      }\n    \"\n  >\n    <IconChevronDownSmall\n      v-if=\"props.collapsible\"\n      stroke-color=\"gray-400\"\n      :size=\"depth ? '8' : '16'\"\n      class=\"absolute left-0 transform transition-transform\"\n      :class=\"{\n        'rotate-0': open,\n        '-rotate-90': !open,\n        'ml-[16px]': depth,\n      }\"\n    />\n    {{ group.label }}\n  </component>\n  <DocGroupElements\n    ref=\"$groupElements\"\n    v-show=\"open\"\n    :depth=\"depth\"\n    :items=\"group.items\"\n    :active-path=\"activePath\"\n    :collapsible=\"collapsible\"\n    :link-component=\"linkComponent\"\n    @hide-marker=\"emit('hideMarker')\"\n    @update-marker-position=\"emit('updateMarkerPosition')\"\n    @update-active-position=\"(opts) => emit('updateActivePosition', opts)\"\n  />\n</template>\n","<script lang=\"ts\" setup>\nimport { watch, type DefineComponent, ref, onMounted } from 'vue'\nimport type { NavItemLink } from '@cypress-design/constants-docmenu'\n\nconst props = withDefaults(\n  defineProps<{\n    item: NavItemLink\n    active: boolean\n    collapsible: boolean\n    depth?: number\n    linkComponent: DefineComponent | 'a'\n  }>(),\n  {\n    depth: -1,\n  },\n)\n\nconst emit = defineEmits<{\n  (\n    event: 'update:active',\n    active: boolean,\n    opts?: { top: number; height: number },\n  ): void\n}>()\n\nconst $container = ref<HTMLLIElement>()\n\nfunction setActiveMarkerPosition() {\n  if (props.active) {\n    const { top = 0, height = 36 } =\n      $container.value?.getBoundingClientRect() ?? {}\n\n    emit('update:active', props.active, {\n      top,\n      height,\n    })\n  }\n}\n\nonMounted(() => {\n  watch(\n    () => props.active,\n    (active) => {\n      if (active) {\n        setActiveMarkerPosition()\n      } else {\n        emit('update:active', active)\n      }\n    },\n    { immediate: true },\n  )\n})\n\ndefineExpose({\n  setActiveMarkerPosition,\n})\n</script>\n\n<template>\n  <li\n    ref=\"$container\"\n    class=\"list-none p-0\"\n    :class=\"{\n      'pl-[16px]': depth >= 0,\n    }\"\n  >\n    <component\n      :is=\"linkComponent\"\n      class=\"group relative block w-full pl-[24px]\"\n      :class=\"{\n        'text-indigo-500': active,\n        'py-[8px] text-[16px] leading-[24px]': depth < 0,\n        'leading-[20px] text-[14px] py-[12px]': depth >= 0,\n      }\"\n      :href=\"item.href\"\n    >\n      <div\n        v-if=\"depth >= 0\"\n        class=\"absolute h-[80%] top-[10%] w-[4px] z-10 rounded-full hidden\"\n        :class=\"{\n          'group-hover:block bg-gray-300': !active && collapsible,\n        }\"\n        :style=\"{\n          left: `-${18.5 + depth * 7.5}px`,\n        }\"\n      />\n      {{ item.label }}\n    </component>\n  </li>\n</template>\n","<script lang=\"ts\" setup>\nimport { DefineComponent, ref } from 'vue'\nimport { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu'\nimport DocGroup from './_DocGroup.vue'\nimport DocLink from './_DocLink.vue'\n\nconst props = defineProps<{\n  items: (NavGroup | NavItemLink)[]\n  activePath?: string\n  collapsible: boolean\n  linkComponent: DefineComponent | 'a'\n  depth: number\n}>()\n\nconst emit = defineEmits<{\n  (event: 'updateActivePosition', opts?: { top: number; height: number }): void\n  (event: 'hideMarker'): void\n  (event: 'updateMarkerPosition'): void\n}>()\n\nconst $items = ref<(typeof DocLink)[]>([])\nconst $groups = ref<(typeof DocGroup)[]>([])\n\nfunction hasActiveItemRecursively(items = props.items): boolean {\n  return items.some((item) => {\n    if ('items' in item) {\n      return hasActiveItemRecursively(item.items)\n    }\n    return item.href === props.activePath\n  })\n}\n\nfunction reTriggerSetActiveGroup() {\n  $items.value.forEach((item) => {\n    item.setActiveMarkerPosition()\n  })\n  $groups.value.forEach((group) => {\n    group.reTriggerSetActiveGroup()\n  })\n}\n\ndefineExpose({\n  reTriggerSetActiveGroup,\n})\n</script>\n\n<template>\n  <ul\n    class=\"list-none p-0\"\n    :class=\"{\n      'border-l border-gray-100': depth === 0 && collapsible,\n      'ml-[8px]': depth >= 0,\n    }\"\n  >\n    <template v-for=\"item in items\">\n      <li class=\"relative list-none p-0\" v-if=\"item && 'items' in item\">\n        <DocGroup\n          ref=\"$groups\"\n          :active-path=\"activePath\"\n          :group=\"item\"\n          :depth=\"depth + 1\"\n          :collapsible=\"collapsible\"\n          :link-component=\"linkComponent\"\n          @update-active-position=\"\n            (opts) => {\n              emit('updateActivePosition', opts)\n            }\n          \"\n          @update-marker-position=\"\n            () => {\n              if (hasActiveItemRecursively()) {\n                reTriggerSetActiveGroup()\n              } else {\n                emit('updateMarkerPosition')\n              }\n            }\n          \"\n        />\n      </li>\n      <DocLink\n        v-else\n        ref=\"$items\"\n        :item=\"item\"\n        :active=\"item.href === activePath\"\n        :depth=\"depth\"\n        :collapsible=\"collapsible\"\n        :link-component=\"linkComponent\"\n        @update:active=\"\n          (_, opts) => {\n            if (!opts) return\n            emit('updateActivePosition', opts)\n          }\n        \"\n      />\n    </template>\n  </ul>\n</template>\n","<script lang=\"ts\" setup>\nimport { ref, type DefineComponent } from 'vue'\nimport { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu'\nimport DocGroupElements from './_DocGroupElements.vue'\n\nwithDefaults(\n  defineProps<{\n    items: (NavItemLink | NavGroup)[]\n    activePath?: string\n    collapsible?: boolean\n    linkComponent?: DefineComponent | 'a'\n  }>(),\n  {\n    linkComponent: 'a',\n    collapsible: true,\n    activePath: undefined,\n  },\n)\n\nconst $container = ref<HTMLDivElement>()\n\nconst activeTop = ref(0)\nconst activeHeight = ref(36)\nconst showMarker = ref(false)\n\nfunction updateActiveMarkerPosition({ top, height } = { height: 0, top: 0 }) {\n  const containerTop = $container.value?.getBoundingClientRect().top || 0\n  activeTop.value = top - containerTop\n  activeHeight.value = height\n  showMarker.value = true\n}\n</script>\n\n<template>\n  <div ref=\"$container\" class=\"relative\">\n    <div\n      v-if=\"showMarker && collapsible\"\n      data-cy=\"doc-menu-active-marker\"\n      class=\"absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 transition-all duration-300 ml-[6.5px] mt-[4px]\"\n      :style=\"{\n        top: `${activeTop + 4}px`,\n        height: `${activeHeight - 8}px`,\n      }\"\n    />\n    <DocGroupElements\n      :items=\"items\"\n      :active-path=\"activePath\"\n      :collapsible=\"collapsible\"\n      :link-component=\"linkComponent\"\n      :depth=\"-1\"\n      @update-active-position=\"updateActiveMarkerPosition\"\n      @hide-marker=\"showMarker = false\"\n    />\n  </div>\n</template>\n"],"names":["classes","props","__props","open","ref","$groupElements","Head","computed","emit","__emit","hasActiveItemRecursively","items","item","reTriggerSetActiveGroup","_a","active","watch","nextTick","__expose","$container","setActiveMarkerPosition","top","height","onMounted","$items","$groups","group","activeTop","activeHeight","showMarker","updateActiveMarkerPosition","containerTop"],"mappings":"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"}

package/dist/index.umd.js

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

package/dist/index.umd.js.map

@@ -1 +1 @@
-{"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"}
+{"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 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":"8TAAO,MAAMA,EAAU,CACnB,OAAQ,wEACR,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.4.1",
+  "version": "0.4.2",
   "files": [
     "*"
   ],
@@ -20,7 +20,7 @@
     "build:types": "yarn vue-tsc --project ./tsconfig.build.json"
   },
   "dependencies": {
-    "@cypress-design/constants-docmenu": "^0.1.2",
+    "@cypress-design/constants-docmenu": "^0.1.3",
     "@cypress-design/vue-icon": "^0.31.2"
   },
   "devDependencies": {