feat: show group name when ctx cross group

close vuejs#758
kecrily · Jun 9, 2022 · 3369959 · 3369959
1 parent 94704c9
commit 3369959
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 10 deletions.
diff --git a/src/client/theme-default/components/VPDocFooter.vue b/src/client/theme-default/components/VPDocFooter.vue
@@ -35,13 +35,13 @@ const hasLastUpdated = computed(() => {
 
     <div class="prev-next">
       <div class="pager">
-        <a v-if="control.prev" class="pager-link prev" :href="normalizeLink(control.prev.link)">
+        <a v-if="control.prev.link" class="pager-link prev" :href="normalizeLink(control.prev.link)">
           <span class="desc">Previous page</span>
           <span class="title">{{ control.prev.text }} </span>
         </a>
       </div>
       <div class="pager" :class="{ 'has-prev': control.prev }">
-        <a v-if="control.next" class="pager-link next" :href="normalizeLink(control.next.link)">
+        <a v-if="control.next.link" class="pager-link next" :href="normalizeLink(control.next.link)">
           <span class="desc">Next page</span>
           <span class="title">{{ control.next.text }}</span>
         </a>

diff --git a/src/client/theme-default/composables/prev-next.ts b/src/client/theme-default/composables/prev-next.ts
@@ -8,15 +8,18 @@ export function usePrevNext() {
 
   return computed(() => {
     const sidebar = getSidebar(theme.value.sidebar, page.value.relativePath)
-    const candidates = getFlatSideBarLinks(sidebar)
+    const { links: candidates, edges } = getFlatSideBarLinks(sidebar)
 
     const index = candidates.findIndex((link) => {
       return isActive(page.value.relativePath, link.link)
     })
 
-    return {
-      prev: candidates[index - 1],
-      next: candidates[index + 1]
-    }
+    const prev = { text: candidates[index - 1]?.text, link: candidates[index - 1]?.link }
+    const next = { text: candidates[index + 1]?.text, link: candidates[index + 1]?.link }
+
+    if (edges.includes(index - 1)) prev.text += ` | ${sidebar[edges.indexOf(index - 1) + 1]?.text}`
+    else if (edges.includes(index)) next.text += ` | ${sidebar[edges.indexOf(index) + 1]?.text}`
+
+    return { prev, next }
   })
 }
diff --git a/src/client/theme-default/support/sidebar.ts b/src/client/theme-default/support/sidebar.ts
@@ -29,14 +29,16 @@ export function getSidebar(
 
 export function getFlatSideBarLinks(
   sidebar: DefaultTheme.SidebarGroup[]
-): DefaultTheme.SidebarItem[] {
+): { links: DefaultTheme.SidebarItem[], edges: number[] } {
   const links: DefaultTheme.SidebarItem[] = []
+  const edges: number[] = []
 
   for (const group of sidebar) {
     for (const link of group.items) {
       links.push(link)
     }
+    edges.push(links.length - 1)
   }
-
-  return links
+  
+  return { links, edges }
 }