@cypress-design/vue-docmenu 0.3.0 → 0.4.1

package/.turbo/turbo-build.log

@@ -1,13 +1,14 @@
 $ yarn build:module && yarn build:types
 $ yarn vite build
 $ /home/runner/work/cypress-design/cypress-design/node_modules/.bin/vite build
-vite v4.3.9 building for production...
+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.04 kB │ gzip: 2.03 kB │ map: 4.72 kB
-dist/index.umd.js  5.04 kB │ gzip: 1.78 kB │ map: 4.53 kB
-✓ built in 4.51s
+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
 $ 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,27 @@
 # @cypress-design/vue-docmenu
 
+## 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
+
+- [#350](https://github.com/cypress-io/cypress-design/pull/350) [`abc414d`](https://github.com/cypress-io/cypress-design/commit/abc414da149eb6fe0cfa61497a0aa8630d8d8d6e) Thanks [@elevatebart](https://github.com/elevatebart)! - feat: allow usage of a custom link component
+
+### Patch Changes
+
+- [#347](https://github.com/cypress-io/cypress-design/pull/347) [`de67952`](https://github.com/cypress-io/cypress-design/commit/de679522ea2269854ec8ac8de925fcf930ce96e4) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: docmenu docusaurus style items structure
+
+- Updated dependencies [[`de67952`](https://github.com/cypress-io/cypress-design/commit/de679522ea2269854ec8ac8de925fcf930ce96e4)]:
+  - @cypress-design/constants-docmenu@0.1.1
+
 ## 0.3.0
 
 ### Minor Changes

package/DocMenu.vue

@@ -1,26 +1,55 @@
 <script lang="ts" setup>
+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" />
-      </li>
-      <DocLink v-else :item="item" :collapsible="collapsible" />
-    </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

@@ -1,12 +1,50 @@
 /// <reference types="cypress" />
+import { type DefineComponent, defineComponent } from 'vue'
 import { mount } from 'cypress/vue'
 import assertions from '../assertions'
 import type { NavGroup, NavItemLink } from '../constants'
-import DocMenuStory from './DocMenu.rootstory'
+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/>', () => {
-  function mountStory(items: (NavItemLink | NavGroup)[] = []) {
-    mount(() => <DocMenuStory items={items} />)
+  it('renders', () => {
+    mount(() => <DocMenu items={[{ href: '/foo', label: 'Foo' }]} />)
+    cy.get('ul').should('exist')
+  })
+
+  it('renders the custom link components', () => {
+    mount(() => (
+      <DocMenu
+        items={[
+          {
+            label: 'Baaaaaaz',
+            items: [{ label: 'Bar', items: [{ href: '/foo', label: 'Foo' }] }],
+          },
+        ]}
+        linkComponent={CustomLinkVue}
+      />
+    ))
+
+    cy.findByText('Foo + href: /foo', { selector: 'div' }).should('be.visible')
+  })
+
+  function mountStory(items: (NavItemLink | NavGroup)[] = [], activePath = '') {
+    mount(() => {
+      return <DocMenu items={items} activePath={activePath} />
+    })
   }
   assertions(mountStory)
 })

package/ReadMe.md

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

package/_DocGroup.vue

@@ -1,63 +1,72 @@
 <script lang="ts" setup>
-import { computed, 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
   }>(),
   {
     depth: 0,
-  }
+  },
 )
 
-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>
@@ -68,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')
         }
       }
     "
@@ -91,38 +102,18 @@ const Head = computed(() =>
         'ml-[16px]': depth,
       }"
     />
-    {{ group.text }}
+    {{ 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"
-        />
-      </li>
-      <DocLink v-else :item="item" :depth="depth" :collapsible="collapsible" />
-    </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,29 +1,74 @@
 <script lang="ts" setup>
+import { watch, type DefineComponent, ref, onMounted } from 'vue'
 import type { NavItemLink } from '@cypress-design/constants-docmenu'
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     item: NavItemLink
-    depth?: number
+    active: boolean
     collapsible: boolean
+    depth?: number
+    linkComponent: DefineComponent | 'a'
   }>(),
   {
     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,
     }"
   >
-    <a
+    <component
+      :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,
       }"
@@ -33,13 +78,13 @@ 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`,
         }"
       />
-      {{ item.text }}
-    </a>
+      {{ item.label }}
+    </component>
   </li>
 </template>