From e2350a3d419ca457842cd8301777738eeaf4967b Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Mon, 4 Sep 2023 23:56:21 +1000
Subject: [PATCH] docs: separate route path and link in api explorer nav item

---
 packages/docs/src/components/app/list/List.vue | 12 ++++++++++--
 packages/docs/src/components/doc/Explorer.vue  |  2 +-
 packages/docs/src/data/nav.json                |  7 ++++++-
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/docs/src/components/app/list/List.vue b/packages/docs/src/components/app/list/List.vue
index 0128c925e93..a2be6d8d78d 100644
--- a/packages/docs/src/components/app/list/List.vue
+++ b/packages/docs/src/components/app/list/List.vue
@@ -76,6 +76,8 @@
     href?: string
     subfolder?: string
     disabled?: boolean
+    routeMatch?: string
+    routePath?: string
   }
 
   function generateApiItems (locale: string) {
@@ -101,13 +103,19 @@
 
       if (litem.subfolder) path = litem.subfolder
 
-      const route = routes.find((route: { path: string }) => route.path.endsWith(`/${locale}/${path}/${litem.title}/`))
+      const route = litem.routeMatch
+        ? routes.find((route: { path: string }) => route.path.endsWith(`/${locale}/${path}/${litem.routeMatch}/`))
+        : routes.find((route: { path: string }) => route.path.endsWith(`/${locale}/${path}/${litem.title}/`))
+
+      const to = litem.routePath
+        ? `/${locale}/${path}/${litem.routePath}/`
+        : route?.path
 
       return {
         title: route?.meta?.nav ?? route?.meta?.title ?? litem.title,
         subtitle: litem.subtitle && te(litem.subtitle) ? t(litem.subtitle) : litem.subtitle,
         emphasized: route?.meta?.emphasized ?? false,
-        to: route?.path,
+        to,
         disabled: !route,
       }
     } else if (item.divider) {
diff --git a/packages/docs/src/components/doc/Explorer.vue b/packages/docs/src/components/doc/Explorer.vue
index f8729e9359d..fe3a685e72a 100644
--- a/packages/docs/src/components/doc/Explorer.vue
+++ b/packages/docs/src/components/doc/Explorer.vue
@@ -96,7 +96,7 @@
   }, [])
 
   const name = route.params.name?.replace('/', '')
-  const pascalName = name && `${name.charAt(0).toUpperCase()}${camelize(name.slice(1))}`
+  const pascalName = name ? `${name.charAt(0).toUpperCase()}${camelize(name.slice(1))}` : undefined
   const model = ref(components.some(v => v.value === name) ? name : pascalName)
 
   const sections = ['props', 'events', 'slots', 'exposed', 'sass', 'options', 'argument', 'modifiers']
diff --git a/packages/docs/src/data/nav.json b/packages/docs/src/data/nav.json
index 46e6108dca9..a19779c5d86 100644
--- a/packages/docs/src/data/nav.json
+++ b/packages/docs/src/data/nav.json
@@ -75,7 +75,12 @@
     "activeIcon": "mdi-view-dashboard",
     "items": [
       "all",
-      { "title": "explorer", "subtitle": "browse-components" },
+      {
+        "title": "explorer",
+        "routeMatch": "explorer/:name(.*)",
+        "routePath": "explorer",
+        "subtitle": "browse-components"
+      },
       { "divider": true },
       { "subheader": "containment" },
       "buttons",