@cypress-design/vue-docmenu 0.4.0 → 0.4.2

package/.turbo/turbo-build.log

@@ -4,11 +4,11 @@ $ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vite build
 The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
 vite v5.0.4 building for production...
 transforming...
-✓ 8 modules transformed.
+✓ 10 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.es.mjs  6.51 kB │ gzip: 2.08 kB │ map: 4.97 kB
-dist/index.umd.js  5.42 kB │ gzip: 1.83 kB │ map: 4.77 kB
-✓ built in 3.04s
+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,23 @@
 # @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
+
+- [#353](https://github.com/cypress-io/cypress-design/pull/353) [`b382b9e`](https://github.com/cypress-io/cypress-design/commit/b382b9ecc99e3ab6288eee406831199edb661c19) Thanks [@elevatebart](https://github.com/elevatebart)! - feat: Docgen wrapping active links
+
+- Updated dependencies [[`b382b9e`](https://github.com/cypress-io/cypress-design/commit/b382b9ecc99e3ab6288eee406831199edb661c19)]:
+  - @cypress-design/constants-docmenu@0.1.2
+
 ## 0.4.0
 
 ### Minor Changes

package/DocMenu.vue

@@ -1,39 +1,55 @@
 <script lang="ts" setup>
-import type { DefineComponent } from 'vue'
+import { ref, type DefineComponent } from 'vue'
 import { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu'
-import DocGroup from './_DocGroup.vue'
-import DocLink from './_DocLink.vue'
+import DocGroupElements from './_DocGroupElements.vue'
 
 withDefaults(
   defineProps<{
     items: (NavItemLink | NavGroup)[]
+    activePath?: string
     collapsible?: boolean
     linkComponent?: DefineComponent | 'a'
   }>(),
   {
     linkComponent: 'a',
     collapsible: true,
+    activePath: undefined,
   },
 )
+
+const $container = ref<HTMLDivElement>()
+
+const activeTop = ref(0)
+const activeHeight = ref(36)
+const showMarker = ref(false)
+
+function updateActiveMarkerPosition({ top, height } = { height: 0, top: 0 }) {
+  const containerTop = $container.value?.getBoundingClientRect().top || 0
+  activeTop.value = top - containerTop
+  activeHeight.value = height
+  showMarker.value = true
+}
 </script>
 
 <template>
-  <ul class="overflow-y-hidden list-none p-0">
-    <template v-for="item in items">
-      <li v-if="'items' in item" class="relative list-none p-0">
-        <DocGroup
-          :group="item"
-          :depth="0"
-          :collapsible="collapsible"
-          :link-component="linkComponent"
-        />
-      </li>
-      <DocLink
-        v-else
-        :item="item"
-        :collapsible="collapsible"
-        :link-component="linkComponent"
-      />
-    </template>
-  </ul>
+  <div ref="$container" class="relative">
+    <div
+      v-if="showMarker && collapsible"
+      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`,
+        height: `${activeHeight - 8}px`,
+      }"
+    />
+    <DocGroupElements
+      :items="items"
+      :active-path="activePath"
+      :collapsible="collapsible"
+      :link-component="linkComponent"
+      :depth="-1"
+      @update-active-position="updateActiveMarkerPosition"
+      @hide-marker="showMarker = false"
+    />
+  </div>
 </template>

package/DocMenuVue.cy.tsx

@@ -37,13 +37,13 @@ describe('<DocMenu/>', () => {
         linkComponent={CustomLinkVue}
       />
     ))
-    cy.findByText('Bar').click()
+
     cy.findByText('Foo + href: /foo', { selector: 'div' }).should('be.visible')
   })
 
-  function mountStory(items: (NavItemLink | NavGroup)[] = []) {
+  function mountStory(items: (NavItemLink | NavGroup)[] = [], activePath = '') {
     mount(() => {
-      return <DocMenu items={items} />
+      return <DocMenu items={items} activePath={activePath} />
     })
   }
   assertions(mountStory)

package/ReadMe.md

@@ -20,22 +20,22 @@ import DocMenu from '@cypress-design/vue-docmenu'
 
 ```vue live
 <DocMenu
+  activePath="#group-item-3"
   :items="[
     {
       label: 'Get Started',
-      href: '#',
+      href: '#get-started',
     },
     {
       label: 'Overview',
       items: [
         {
           label: 'Overview Item 1',
-          href: '#',
+          href: '#overview-item-1',
         },
         {
           label: 'Overview Item 2',
-          href: '#',
-          active: true,
+          href: '#overview-item-2',
         },
       ],
     },
@@ -44,33 +44,32 @@ import DocMenu from '@cypress-design/vue-docmenu'
       items: [
         {
           label: 'Item 1',
-          href: '#',
+          href: '#item-1',
         },
         {
           label: 'Group',
           items: [
             {
               label: 'Item 1',
-              href: '#',
+              href: '#group-item-1',
             },
             {
               label: 'Item 2',
-              href: '#',
+              href: '#group-item-2',
             },
             {
               label: 'Item 3',
-              href: '#',
+              href: '#group-item-3',
             },
             {
               label: 'Item 4',
-              href: '#',
+              href: '#group-item-4',
             },
           ],
         },
         {
           label: 'Item 5',
           href: '#',
-          active: true,
         },
       ],
     },

package/_DocGroup.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { computed, type DefineComponent, Ref, ref } from 'vue'
+import { computed, type DefineComponent, ref, watch, nextTick } from 'vue'
 import { IconChevronDownSmall } from '@cypress-design/vue-icon'
 import { NavGroup, classes } from '@cypress-design/constants-docmenu'
-import DocLink from './_DocLink.vue'
-import DocGroup from './_DocGroup.vue'
+import DocGroupElements from './_DocGroupElements.vue'
 
 const props = withDefaults(
   defineProps<{
     group: NavGroup
+    activePath?: string
     collapsible: boolean
     linkComponent: DefineComponent | 'a'
     depth?: number
@@ -17,48 +17,56 @@ const props = withDefaults(
   },
 )
 
-const open = ref(props.depth === 0)
+const open = ref(props.group.collapsed !== true)
+const $groupElements = ref<typeof DocGroupElements>()
 
-const $groups = ref<{ height: number }[]>([])
+const Head = computed(() =>
+  props.collapsible ? 'button' : props.group.href ? 'a' : 'div',
+)
 
-const height = computed(() => {
-  return $groups.value && open.value
-    ? $groups.value.reduce(
-        (acc, { height: h }) => acc + h,
-        props.group.items.length,
-      )
-    : 0
-})
+const emit = defineEmits<{
+  (event: 'updateActivePosition', opts?: { top: number; height: number }): void
+  (event: 'hideMarker'): void
+  (event: 'updateMarkerPosition'): void
+}>()
 
-defineExpose<{
-  height: Ref<number>
-}>({
-  height,
-})
+function hasActiveItemRecursively(items = props.group.items): boolean {
+  return items.some((item) => {
+    if ('items' in item) {
+      return hasActiveItemRecursively(item.items)
+    }
+    return item.href === props.activePath
+  })
+}
 
-const activeMarkerTop = computed(() => {
-  const activeIndex = props.group.items.findIndex(
-    (item) => 'href' in item && item.active,
-  )
+function reTriggerSetActiveGroup() {
+  $groupElements.value?.reTriggerSetActiveGroup()
+}
 
-  // how many groups are before the active element?
-  let numberOfGroups = props.group.items.filter(
-    (item, index) => !('href' in item) && index < activeIndex,
-  ).length
+const active = computed(() => props.group.href === props.activePath)
 
-  // if there is any open group before the active element
-  // compensate for the height
-  const groupHeight = $groups.value?.reduce((acc, group) => {
-    if (numberOfGroups < -1) return acc
-    numberOfGroups--
-    return acc + group.height
-  }, 0)
-  return (activeIndex + groupHeight) * 44
+watch(active, (active) => {
+  if (active) {
+    emit('hideMarker')
+  }
 })
 
-const Head = computed(() =>
-  props.collapsible ? 'button' : props.group.href ? 'a' : 'div',
-)
+watch(open, async (open) => {
+  await nextTick()
+  if (hasActiveItemRecursively()) {
+    if (open) {
+      reTriggerSetActiveGroup()
+    } else {
+      emit('hideMarker')
+    }
+  } else {
+    emit('updateMarkerPosition')
+  }
+})
+
+defineExpose({
+  reTriggerSetActiveGroup,
+})
 </script>
 
 <template>
@@ -69,14 +77,16 @@ const Head = computed(() =>
       {
         [classes.topButton]: depth === 0,
         [classes.leafButton]: depth,
-        'text-indigo-500': props.group.active,
+        'text-indigo-500': active,
       },
     ]"
-    :href="props.group.href"
+    :href="group.href"
     @click="
       () => {
         if (collapsible) {
           open = !open
+        } else {
+          emit('updateActivePosition')
         }
       }
     "
@@ -94,43 +104,16 @@ const Head = computed(() =>
     />
     {{ group.label }}
   </component>
-  <div
-    v-if="
-      props.collapsible &&
-      depth >= 0 &&
-      open &&
-      group.items.some((item) => 'href' in item && item.active)
-    "
-    class="absolute h-[36px] w-[4px] z-10 rounded-full bg-indigo-500 transition-all duration-300 ml-[6px] mt-[48px]"
-    :style="{
-      top: `${activeMarkerTop}px`,
-      left: `-${depth === 0 ? 0 : depth * 7.5 + 1}px`,
-    }"
-  />
-  <ul
+  <DocGroupElements
+    ref="$groupElements"
     v-show="open"
-    class="list-none p-0 ml-[7.5px]"
-    :class="{
-      'border-l border-gray-100': depth === 0 && props.collapsible,
-    }"
-  >
-    <template v-for="item in group.items">
-      <li class="relative list-none p-0" v-if="item && 'items' in item">
-        <DocGroup
-          ref="$groups"
-          :group="item"
-          :depth="depth + 1"
-          :collapsible="props.collapsible"
-          :link-component="props.linkComponent"
-        />
-      </li>
-      <DocLink
-        v-else
-        :item="item"
-        :depth="depth"
-        :collapsible="collapsible"
-        :link-component="props.linkComponent"
-      />
-    </template>
-  </ul>
+    :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)"
+  />
 </template>

package/_DocGroupElements.vue

@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+import { DefineComponent, ref } from 'vue'
+import { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu'
+import DocGroup from './_DocGroup.vue'
+import DocLink from './_DocLink.vue'
+
+const props = defineProps<{
+  items: (NavGroup | NavItemLink)[]
+  activePath?: string
+  collapsible: boolean
+  linkComponent: DefineComponent | 'a'
+  depth: number
+}>()
+
+const emit = defineEmits<{
+  (event: 'updateActivePosition', opts?: { top: number; height: number }): void
+  (event: 'hideMarker'): void
+  (event: 'updateMarkerPosition'): void
+}>()
+
+const $items = ref<(typeof DocLink)[]>([])
+const $groups = ref<(typeof DocGroup)[]>([])
+
+function hasActiveItemRecursively(items = props.items): boolean {
+  return items.some((item) => {
+    if ('items' in item) {
+      return hasActiveItemRecursively(item.items)
+    }
+    return item.href === props.activePath
+  })
+}
+
+function reTriggerSetActiveGroup() {
+  $items.value.forEach((item) => {
+    item.setActiveMarkerPosition()
+  })
+  $groups.value.forEach((group) => {
+    group.reTriggerSetActiveGroup()
+  })
+}
+
+defineExpose({
+  reTriggerSetActiveGroup,
+})
+</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">
+      <li class="relative list-none p-0" v-if="item && 'items' in item">
+        <DocGroup
+          ref="$groups"
+          :active-path="activePath"
+          :group="item"
+          :depth="depth + 1"
+          :collapsible="collapsible"
+          :link-component="linkComponent"
+          @update-active-position="
+            (opts) => {
+              emit('updateActivePosition', opts)
+            }
+          "
+          @update-marker-position="
+            () => {
+              if (hasActiveItemRecursively()) {
+                reTriggerSetActiveGroup()
+              } else {
+                emit('updateMarkerPosition')
+              }
+            }
+          "
+        />
+      </li>
+      <DocLink
+        v-else
+        ref="$items"
+        :item="item"
+        :active="item.href === activePath"
+        :depth="depth"
+        :collapsible="collapsible"
+        :link-component="linkComponent"
+        @update:active="
+          (_, opts) => {
+            if (!opts) return
+            emit('updateActivePosition', opts)
+          }
+        "
+      />
+    </template>
+  </ul>
+</template>

package/_DocLink.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
-import type { DefineComponent } from 'vue'
+import { watch, type DefineComponent, ref, onMounted } from 'vue'
 import type { NavItemLink } from '@cypress-design/constants-docmenu'
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     item: NavItemLink
+    active: boolean
     collapsible: boolean
     depth?: number
     linkComponent: DefineComponent | 'a'
@@ -13,10 +14,51 @@ withDefaults(
     depth: -1,
   },
 )
+
+const emit = defineEmits<{
+  (
+    event: 'update:active',
+    active: boolean,
+    opts?: { top: number; height: number },
+  ): void
+}>()
+
+const $container = ref<HTMLLIElement>()
+
+function setActiveMarkerPosition() {
+  if (props.active) {
+    const { top = 0, height = 36 } =
+      $container.value?.getBoundingClientRect() ?? {}
+
+    emit('update:active', props.active, {
+      top,
+      height,
+    })
+  }
+}
+
+onMounted(() => {
+  watch(
+    () => props.active,
+    (active) => {
+      if (active) {
+        setActiveMarkerPosition()
+      } else {
+        emit('update:active', active)
+      }
+    },
+    { immediate: true },
+  )
+})
+
+defineExpose({
+  setActiveMarkerPosition,
+})
 </script>
 
 <template>
   <li
+    ref="$container"
     class="list-none p-0"
     :class="{
       'pl-[16px]': depth >= 0,
@@ -26,7 +68,7 @@ withDefaults(
       :is="linkComponent"
       class="group relative block w-full pl-[24px]"
       :class="{
-        'text-indigo-500': item.active,
+        'text-indigo-500': active,
         'py-[8px] text-[16px] leading-[24px]': depth < 0,
         'leading-[20px] text-[14px] py-[12px]': depth >= 0,
       }"
@@ -36,7 +78,7 @@ withDefaults(
         v-if="depth >= 0"
         class="absolute h-[80%] top-[10%] w-[4px] z-10 rounded-full hidden"
         :class="{
-          'group-hover:block bg-gray-300': !item.active && collapsible,
+          'group-hover:block bg-gray-300': !active && collapsible,
         }"
         :style="{
           left: `-${18.5 + depth * 7.5}px`,

package/dist/DocMenu.vue.d.ts

@@ -1,20 +1,25 @@
-import type { DefineComponent } from 'vue';
+import { type DefineComponent } from 'vue';
 import { NavGroup, NavItemLink } from '@cypress-design/constants-docmenu';
 declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     items: (NavItemLink | NavGroup)[];
+    activePath?: string | undefined;
     collapsible?: boolean | undefined;
     linkComponent?: DefineComponent | "a" | undefined;
 }>, {
     linkComponent: string;
     collapsible: boolean;
+    activePath: undefined;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     items: (NavItemLink | NavGroup)[];
+    activePath?: string | undefined;
     collapsible?: boolean | undefined;
     linkComponent?: DefineComponent | "a" | undefined;
 }>, {
     linkComponent: string;
     collapsible: boolean;
+    activePath: undefined;
 }>>>, {
+    activePath: string;
     collapsible: boolean;
     linkComponent: DefineComponent | 'a';
 }, {}>;

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,KAAK,EAAE,eAAe,EAAE,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;;WAyH9D,CAAC,WAAW,GAAG,QAAQ,CAAC,EAAE;;;;;;;WAA1B,CAAC,WAAW,GAAG,QAAQ,CAAC,EAAE;;;;;;;iBACnB,OAAO;mBACL,eAAe,GAAG,GAAG;;AARzC,wBAUG;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,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"}

package/dist/_DocGroup.vue.d.ts

@@ -1,22 +1,39 @@
-import { type DefineComponent, Ref } from 'vue';
+import { type DefineComponent } from 'vue';
 import { NavGroup } from '@cypress-design/constants-docmenu';
+declare function reTriggerSetActiveGroup(): void;
 declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     group: NavGroup;
+    activePath?: string | undefined;
     collapsible: boolean;
     linkComponent: DefineComponent | 'a';
     depth?: number | undefined;
 }>, {
     depth: number;
 }>, {
-    height: Ref<number>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    reTriggerSetActiveGroup: typeof reTriggerSetActiveGroup;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    updateActivePosition: (opts?: {
+        top: number;
+        height: number;
+    } | undefined) => void;
+    hideMarker: () => void;
+    updateMarkerPosition: () => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     group: NavGroup;
+    activePath?: string | undefined;
     collapsible: boolean;
     linkComponent: DefineComponent | 'a';
     depth?: number | undefined;
 }>, {
     depth: number;
-}>>>, {
+}>>> & {
+    onUpdateActivePosition?: ((opts?: {
+        top: number;
+        height: number;
+    } | undefined) => any) | undefined;
+    onHideMarker?: (() => any) | undefined;
+    onUpdateMarkerPosition?: (() => any) | undefined;
+}, {
     depth: number;
 }, {}>;
 export default _default;

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,EAAE,GAAG,EAAO,MAAM,KAAK,CAAA;AAE9D,OAAO,EAAE,QAAQ,EAAW,MAAM,mCAAmC,CAAA;;WAyQ1D,QAAQ;iBACF,OAAO;mBACL,eAAe,GAAG,GAAG;;;;;;;WAF7B,QAAQ;iBACF,OAAO;mBACL,eAAe,GAAG,GAAG;;;;;WAC5B,MAAM;;AAVlB,wBAYG;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,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"}