@cypress-design/vue-docmenu 0.4.1 → 0.5.0

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  11.16 kB │ gzip: 3.23 kB │ map: 15.79 kB
+dist/index.umd.js  8.74 kB │ gzip: 2.80 kB │ map: 15.34 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,25 @@
 # @cypress-design/vue-docmenu
 
+## 0.5.0
+
+### Minor Changes
+
+- [#357](https://github.com/cypress-io/cypress-design/pull/357) [`d0ed7c5`](https://github.com/cypress-io/cypress-design/commit/d0ed7c513df09d24639895ae1c7f2633eab8c254) Thanks [@elevatebart](https://github.com/elevatebart)! - feat: add transition when open/close collapsible menu
+
+### Patch Changes
+
+- Updated dependencies [[`d0ed7c5`](https://github.com/cypress-io/cypress-design/commit/d0ed7c513df09d24639895ae1c7f2633eab8c254)]:
+  - @cypress-design/constants-docmenu@0.2.0
+
+## 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/DocMenu.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, type DefineComponent } from 'vue'
+import { ref, type DefineComponent, provide } from 'vue'
 import { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu'
 import DocGroupElements from './_DocGroupElements.vue'
 
@@ -29,16 +29,20 @@ function updateActiveMarkerPosition({ top, height } = { height: 0, top: 0 }) {
   activeHeight.value = height
   showMarker.value = true
 }
+
+const markerIsMoving = ref(false)
+
+provide('transition-is-moving', markerIsMoving)
 </script>
 
 <template>
   <div ref="$container" class="relative">
     <div
-      v-if="showMarker && collapsible"
+      v-if="showMarker && collapsible && !markerIsMoving"
       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="{
-        top: `${activeTop + 4}px`,
+        top: `${activeTop}px`,
         height: `${activeHeight - 8}px`,
       }"
     />

package/DocMenuVue.cy.tsx

@@ -1,24 +1,10 @@
 /// <reference types="cypress" />
-import { type DefineComponent, defineComponent } from 'vue'
+import { type DefineComponent, defineComponent, ref } from 'vue'
 import { mount } from 'cypress/vue'
 import assertions from '../assertions'
 import type { NavGroup, NavItemLink } from '../constants'
 import DocMenu from './DocMenu.vue'
 
-const CustomLinkVue: DefineComponent<{ href: StringConstructor }> =
-  defineComponent({
-    props: {
-      href: String,
-    },
-    setup(props, { slots }) {
-      return () => (
-        <div>
-          {slots.default?.()} + href: {props.href}
-        </div>
-      )
-    },
-  })
-
 describe('<DocMenu/>', () => {
   it('renders', () => {
     mount(() => <DocMenu items={[{ href: '/foo', label: 'Foo' }]} />)
@@ -26,19 +12,43 @@ describe('<DocMenu/>', () => {
   })
 
   it('renders the custom link components', () => {
+    const selectedHref = ref<string | undefined>()
+    const CustomLinkVue: DefineComponent<{ href: StringConstructor }> =
+      defineComponent({
+        props: {
+          href: String,
+        },
+        setup(props, { slots, emit }) {
+          return () => (
+            <span onClick={() => (selectedHref.value = props.href)}>
+              {slots.default?.()} + href: {props.href}
+            </span>
+          )
+        },
+      })
     mount(() => (
       <DocMenu
+        activePath={selectedHref.value}
         items={[
           {
             label: 'Baaaaaaz',
-            items: [{ label: 'Bar', items: [{ href: '/foo', label: 'Foo' }] }],
+            items: [
+              {
+                label: 'Bar',
+                items: [
+                  { href: '/foo', label: 'Foo' },
+                  { href: '/box', label: 'Box' },
+                ],
+              },
+              { label: 'Baz', href: '/baz' },
+            ],
           },
         ]}
         linkComponent={CustomLinkVue}
       />
     ))
 
-    cy.findByText('Foo + href: /foo', { selector: 'div' }).should('be.visible')
+    cy.findByText('Foo + href: /foo').should('be.visible')
   })
 
   function mountStory(items: (NavItemLink | NavGroup)[] = [], activePath = '') {

package/_DocGroup.vue

@@ -1,8 +1,11 @@
 <script lang="ts" setup>
-import { computed, type DefineComponent, ref, watch, nextTick } from 'vue'
+import { computed, type DefineComponent, ref, watch, inject } from 'vue'
 import { IconChevronDownSmall } from '@cypress-design/vue-icon'
 import { NavGroup, classes } from '@cypress-design/constants-docmenu'
-import DocGroupElements from './_DocGroupElements.vue'
+import DocGroupElements, {
+  hasActiveItemRecursively,
+  type DocGroupEventsEmitted,
+} from './_DocGroupElements.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -19,25 +22,22 @@ const props = withDefaults(
 
 const open = ref(props.group.collapsed !== true)
 const $groupElements = ref<typeof DocGroupElements>()
+const $listWrapper = ref<HTMLDivElement>()
 
 const Head = computed(() =>
   props.collapsible ? 'button' : props.group.href ? 'a' : 'div',
 )
 
-const emit = defineEmits<{
-  (event: 'updateActivePosition', opts?: { top: number; height: number }): void
-  (event: 'hideMarker'): void
-  (event: 'updateMarkerPosition'): void
-}>()
+const emit = defineEmits<DocGroupEventsEmitted>()
 
-function hasActiveItemRecursively(items = props.group.items): boolean {
-  return items.some((item) => {
+const hasActiveItem = computed(() =>
+  props.group.items.some((item) => {
     if ('items' in item) {
-      return hasActiveItemRecursively(item.items)
+      return hasActiveItemRecursively(item.items, props.activePath)
     }
     return item.href === props.activePath
-  })
-}
+  }),
+)
 
 function reTriggerSetActiveGroup() {
   $groupElements.value?.reTriggerSetActiveGroup()
@@ -45,15 +45,37 @@ function reTriggerSetActiveGroup() {
 
 const active = computed(() => props.group.href === props.activePath)
 
+const markerIsMoving = inject('transition-is-moving', ref(false))
+
+watch(open, () => {
+  $listWrapper.value?.addEventListener(
+    'transitionstart',
+    () => {
+      markerIsMoving.value = true
+    },
+    { once: true },
+  )
+
+  $listWrapper.value?.addEventListener(
+    'transitionend',
+    () => {
+      markerIsMoving.value = false
+      if (open.value || !hasActiveItem.value) {
+        emit('updateMarkerPosition')
+      }
+    },
+    { once: true },
+  )
+})
+
 watch(active, (active) => {
   if (active) {
     emit('hideMarker')
   }
 })
 
-watch(open, async (open) => {
-  await nextTick()
-  if (hasActiveItemRecursively()) {
+watch(open, (open) => {
+  if (hasActiveItem.value) {
     if (open) {
       reTriggerSetActiveGroup()
     } else {
@@ -78,6 +100,10 @@ defineExpose({
         [classes.topButton]: depth === 0,
         [classes.leafButton]: depth,
         'text-indigo-500': active,
+        'text-gray-900 dark:text-gray-200':
+          !hasActiveItem && !active && depth === 0,
+        'text-gray-700 dark:text-gray-500':
+          !hasActiveItem && !active && depth >= 0,
       },
     ]"
     :href="group.href"
@@ -93,27 +119,44 @@ defineExpose({
   >
     <IconChevronDownSmall
       v-if="props.collapsible"
-      stroke-color="gray-400"
+      stroke-color="current"
       :size="depth ? '8' : '16'"
-      class="absolute left-0 transform transition-transform"
-      :class="{
-        'rotate-0': open,
-        '-rotate-90': !open,
-        'ml-[16px]': depth,
-      }"
+      :class="[
+        classes.expandedIcon,
+        {
+          'rotate-0': open,
+          '-rotate-90': !open,
+          'ml-[28px]': depth,
+        },
+      ]"
     />
     {{ group.label }}
   </component>
-  <DocGroupElements
-    ref="$groupElements"
-    v-show="open"
-    :depth="depth"
-    :items="group.items"
-    :active-path="activePath"
-    :collapsible="collapsible"
-    :link-component="linkComponent"
-    @hide-marker="emit('hideMarker')"
-    @update-marker-position="emit('updateMarkerPosition')"
-    @update-active-position="(opts) => emit('updateActivePosition', opts)"
-  />
+  <div
+    class="grid transition-all relative"
+    ref="$listWrapper"
+    :class="{
+      'grid-rows-[0fr]': !open && collapsible,
+      'grid-rows-[1fr]': open || !collapsible,
+    }"
+  >
+    <div
+      v-if="open && collapsible && depth === 0"
+      :class="classes.openListBorderLeft"
+    />
+    <DocGroupElements
+      ref="$groupElements"
+      class="overflow-hidden"
+      :depth="depth"
+      :items="group.items"
+      :active-path="activePath"
+      :collapsible="collapsible"
+      :link-component="linkComponent"
+      @hide-marker="emit('hideMarker')"
+      @update-marker-position="() => emit('updateMarkerPosition')"
+      @update-active-position="
+        (opts) => (open ? emit('updateActivePosition', opts) : null)
+      "
+    />
+  </div>
 </template>

package/_DocGroupElements.vue

@@ -1,5 +1,36 @@
+<script lang="ts">
+export function hasActiveItemRecursively(
+  items: (NavGroup | NavItemLink)[],
+  activePath?: string,
+): boolean {
+  return items.some((item) => {
+    if ('items' in item) {
+      return hasActiveItemRecursively(item.items, activePath)
+    }
+    return item.href === activePath
+  })
+}
+
+export interface DocGroupEventsEmitted {
+  /**
+   * If the group is not collapsed, this event will emit the
+   * active marker position all the way to the menu component
+   */
+  (event: 'updateActivePosition', opts?: { top: number; height: number }): void
+  /**
+   * This event will trigger a re-render of the active marker
+   * to update its position if not in the current subtree
+   */
+  (event: 'updateMarkerPosition'): void
+  /**
+   * This event will bubble-up and hide the active marker
+   */
+  (event: 'hideMarker'): void
+}
+</script>
+
 <script lang="ts" setup>
-import { DefineComponent, ref } from 'vue'
+import { DefineComponent, computed, ref } from 'vue'
 import { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu'
 import DocGroup from './_DocGroup.vue'
 import DocLink from './_DocLink.vue'
@@ -12,29 +43,39 @@ const props = defineProps<{
   depth: number
 }>()
 
-const emit = defineEmits<{
-  (event: 'updateActivePosition', opts?: { top: number; height: number }): void
-  (event: 'hideMarker'): void
-  (event: 'updateMarkerPosition'): void
-}>()
+const emit = defineEmits<DocGroupEventsEmitted>()
 
 const $items = ref<(typeof DocLink)[]>([])
 const $groups = ref<(typeof DocGroup)[]>([])
 
-function hasActiveItemRecursively(items = props.items): boolean {
-  return items.some((item) => {
+const hasActiveItem = computed(() =>
+  props.items.some((item) => {
     if ('items' in item) {
-      return hasActiveItemRecursively(item.items)
+      return hasActiveItemRecursively(item.items, props.activePath)
     }
     return item.href === props.activePath
-  })
-}
+  }),
+)
 
-function reTriggerSetActiveGroup() {
+/**
+ * update the position of the marker when opening a group
+ * @param index
+ */
+function reTriggerSetActiveGroup(index = -1) {
   $items.value.forEach((item) => {
     item.setActiveMarkerPosition()
   })
-  $groups.value.forEach((group) => {
+
+  // calculate the index of the calling group in the list of groups
+  const indexGroup =
+    index -
+    // remove all the items that are not groups from the array and count them
+    props.items.slice(0, index).filter((item) => !('items' in item)).length
+
+  // only update groups that come after the toggled one
+  // others will not need to update the marker
+  // since they are "before" in the rendering tree
+  $groups.value.slice(indexGroup + 1).forEach((group) => {
     group.reTriggerSetActiveGroup()
   })
 }
@@ -45,14 +86,8 @@ defineExpose({
 </script>
 
 <template>
-  <ul
-    class="list-none p-0"
-    :class="{
-      'border-l border-gray-100': depth === 0 && collapsible,
-      'ml-[8px]': depth >= 0,
-    }"
-  >
-    <template v-for="item in items">
+  <ul class="list-none p-0">
+    <template v-for="(item, index) in items">
       <li class="relative list-none p-0" v-if="item && 'items' in item">
         <DocGroup
           ref="$groups"
@@ -68,13 +103,14 @@ defineExpose({
           "
           @update-marker-position="
             () => {
-              if (hasActiveItemRecursively()) {
-                reTriggerSetActiveGroup()
+              if (hasActiveItem) {
+                reTriggerSetActiveGroup(index)
               } else {
                 emit('updateMarkerPosition')
               }
             }
           "
+          @hide-marker="emit('hideMarker')"
         />
       </li>
       <DocLink
@@ -87,8 +123,13 @@ defineExpose({
         :link-component="linkComponent"
         @update:active="
           (_, opts) => {
-            if (!opts) return
-            emit('updateActivePosition', opts)
+            if (!opts) {
+              return
+            } else if (depth < 0) {
+              emit('hideMarker')
+            } else {
+              emit('updateActivePosition', opts)
+            }
           }
         "
       />

package/_DocLink.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { watch, type DefineComponent, ref, onMounted } from 'vue'
+import { watch, type DefineComponent, ref, onMounted, inject } from 'vue'
 import type { NavItemLink } from '@cypress-design/constants-docmenu'
 
 const props = withDefaults(
@@ -25,6 +25,8 @@ const emit = defineEmits<{
 
 const $container = ref<HTMLLIElement>()
 
+const markerIsMoving = inject('transition-is-moving', ref(false))
+
 function setActiveMarkerPosition() {
   if (props.active) {
     const { top = 0, height = 36 } =
@@ -57,31 +59,28 @@ defineExpose({
 </script>
 
 <template>
-  <li
-    ref="$container"
-    class="list-none p-0"
-    :class="{
-      'pl-[16px]': depth >= 0,
-    }"
-  >
+  <li ref="$container" class="list-none p-0">
     <component
       :is="linkComponent"
       class="group relative block w-full pl-[24px]"
       :class="{
         'text-indigo-500': active,
+        'text-gray-700 dark:text-gray-500': !active,
         'py-[8px] text-[16px] leading-[24px]': depth < 0,
         'leading-[20px] text-[14px] py-[12px]': depth >= 0,
       }"
+      :style="{
+        paddingLeft: depth >= 0 ? `${depth * 12 + 48}px` : undefined,
+      }"
       :href="item.href"
     >
       <div
         v-if="depth >= 0"
-        class="absolute h-[80%] top-[10%] w-[4px] z-10 rounded-full hidden"
+        class="left-[6.5px] absolute top-[4px] bottom-[4px] w-[4px] z-10 rounded-full"
         :class="{
+          hidden: !markerIsMoving || !active,
           'group-hover:block bg-gray-300': !active && collapsible,
-        }"
-        :style="{
-          left: `-${18.5 + depth * 7.5}px`,
+          'bg-indigo-500': active && markerIsMoving,
         }"
       />
       {{ item.label }}

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

@@ -1 +1 @@
-{"version":3,"file":"DocMenu.vue.d.ts","sourceRoot":"","sources":["../DocMenu.vue.ts"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,eAAe,EAAE,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;;WAyI9D,CAAC,WAAW,GAAG,QAAQ,CAAC,EAAE;;;;;;;;;WAA1B,CAAC,WAAW,GAAG,QAAQ,CAAC,EAAE;;;;;;;;;gBACpB,MAAM;iBACL,OAAO;mBACL,eAAe,GAAG,GAAG;;AATzC,wBAWG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"DocMenu.vue.d.ts","sourceRoot":"","sources":["../DocMenu.vue.ts"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,eAAe,EAAW,MAAM,KAAK,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;;WA8I9D,CAAC,WAAW,GAAG,QAAQ,CAAC,EAAE;;;;;;;;;WAA1B,CAAC,WAAW,GAAG,QAAQ,CAAC,EAAE;;;;;;;;;gBACpB,MAAM;iBACL,OAAO;mBACL,eAAe,GAAG,GAAG;;AATzC,wBAWG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/_DocGroup.vue.d.ts

@@ -16,8 +16,8 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
         top: number;
         height: number;
     } | undefined) => void;
-    hideMarker: () => void;
     updateMarkerPosition: () => void;
+    hideMarker: () => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     group: NavGroup;
     activePath?: string | undefined;
@@ -31,8 +31,8 @@ declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRunt
         top: number;
         height: number;
     } | undefined) => any) | undefined;
-    onHideMarker?: (() => any) | undefined;
     onUpdateMarkerPosition?: (() => any) | undefined;
+    onHideMarker?: (() => any) | undefined;
 }, {
     depth: number;
 }, {}>;

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

@@ -1 +1 @@
-{"version":3,"file":"_DocGroup.vue.d.ts","sourceRoot":"","sources":["../_DocGroup.vue.ts"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,eAAe,EAAwB,MAAM,KAAK,CAAA;AAE1E,OAAO,EAAE,QAAQ,EAAW,MAAM,mCAAmC,CAAA;AAwCrE,iBAAS,uBAAuB,SAE/B;;WAuLU,QAAQ;;iBAEF,OAAO;mBACL,eAAe,GAAG,GAAG;;;;;;;;;;;;;;WAH7B,QAAQ;;iBAEF,OAAO;mBACL,eAAe,GAAG,GAAG;;;;;;;;;;;;WAC5B,MAAM;;AAXlB,wBAcG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
+{"version":3,"file":"_DocGroup.vue.d.ts","sourceRoot":"","sources":["../_DocGroup.vue.ts"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,eAAe,EAAsB,MAAM,KAAK,CAAA;AAExE,OAAO,EAAE,QAAQ,EAAW,MAAM,mCAAmC,CAAA;AAwCrE,iBAAS,uBAAuB,SAE/B;;WAmQU,QAAQ;;iBAEF,OAAO;mBACL,eAAe,GAAG,GAAG;;;;;;;;;;;;;;WAH7B,QAAQ;;iBAEF,OAAO;mBACL,eAAe,GAAG,GAAG;;;;;;;;;;;;WAC5B,MAAM;;AAXlB,wBAcG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}

package/dist/_DocGroupElements.vue.d.ts

@@ -1,6 +1,25 @@
 import { DefineComponent } from 'vue';
 import { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu';
-declare function reTriggerSetActiveGroup(): void;
+export declare function hasActiveItemRecursively(items: (NavGroup | NavItemLink)[], activePath?: string): boolean;
+export interface DocGroupEventsEmitted {
+    /**
+     * If the group is not collapsed, this event will emit the
+     * active marker position all the way to the menu component
+     */
+    (event: 'updateActivePosition', opts?: {
+        top: number;
+        height: number;
+    }): void;
+    /**
+     * This event will trigger a re-render of the active marker
+     * to update its position if not in the current subtree
+     */
+    (event: 'updateMarkerPosition'): void;
+    /**
+     * This event will bubble-up and hide the active marker
+     */
+    (event: 'hideMarker'): void;
+}
 declare const _default: DefineComponent<__VLS_TypePropsToRuntimeProps<{
     items: (NavGroup | NavItemLink)[];
     activePath?: string | undefined;
@@ -8,14 +27,14 @@ declare const _default: DefineComponent<__VLS_TypePropsToRuntimeProps<{
     linkComponent: DefineComponent | 'a';
     depth: number;
 }>, {
-    reTriggerSetActiveGroup: typeof reTriggerSetActiveGroup;
+    reTriggerSetActiveGroup: (index?: number) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     updateActivePosition: (opts?: {
         top: number;
         height: number;
     } | undefined) => void;
-    hideMarker: () => void;
     updateMarkerPosition: () => void;
+    hideMarker: () => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     items: (NavGroup | NavItemLink)[];
     activePath?: string | undefined;
@@ -27,8 +46,8 @@ declare const _default: DefineComponent<__VLS_TypePropsToRuntimeProps<{
         top: number;
         height: number;
     } | undefined) => any) | undefined;
-    onHideMarker?: (() => any) | undefined;
     onUpdateMarkerPosition?: (() => any) | undefined;
+    onHideMarker?: (() => any) | undefined;
 }, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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

@@ -1 +1 @@
-{"version":3,"file":"_DocGroupElements.vue.d.ts","sourceRoot":"","sources":["../_DocGroupElements.vue.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAO,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAgCzE,iBAAS,uBAAuB,SAO/B;;WAoJQ,CAAC,QAAQ,GAAG,WAAW,CAAC,EAAE;;iBAEpB,OAAO;mBACL,eAAe,GAAG,GAAG;WAC7B,MAAM;;;;;;;;;;;WAJN,CAAC,QAAQ,GAAG,WAAW,CAAC,EAAE;;iBAEpB,OAAO;mBACL,eAAe,GAAG,GAAG;WAC7B,MAAM;;;;;;;;;AAXf,wBAcG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}
+{"version":3,"file":"_DocGroupElements.vue.d.ts","sourceRoot":"","sources":["../_DocGroupElements.vue.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAiB,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAMzE,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,CAAC,QAAQ,GAAG,WAAW,CAAC,EAAE,EACjC,UAAU,CAAC,EAAE,MAAM,GAClB,OAAO,CAOT;AAED,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,CAAC,KAAK,EAAE,sBAAsB,EAAE,IAAI,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;IAC7E;;;OAGG;IACH,CAAC,KAAK,EAAE,sBAAsB,GAAG,IAAI,CAAA;IACrC;;OAEG;IACH,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAA;CAC5B;;WAyMQ,CAAC,QAAQ,GAAG,WAAW,CAAC,EAAE;;iBAEpB,OAAO;mBACL,eAAe,GAAG,GAAG;WAC7B,MAAM;;;;;;;;;;;WAJN,CAAC,QAAQ,GAAG,WAAW,CAAC,EAAE;;iBAEpB,OAAO;mBACL,eAAe,GAAG,GAAG;WAC7B,MAAM;;;;;;;;;AA5Mf,wBAgNI;AAAA,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACrE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}

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

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