fix(client): custom tab view active state

vuejs · Dec 19, 2023 · 1cecb35 · 1cecb35
1 parent 29c2e1a
commit 1cecb35
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/packages/client/src/components/common/SideNavItem.vue b/packages/client/src/components/common/SideNavItem.vue
@@ -17,7 +17,7 @@ const props = withDefaults(
 )
 const route = useRoute()
 
-const tabPath = computed(() => 'path' in props.tab ? props.tab.path! : `/custom-tab-view?name=${(props.tab as ModuleBuiltinTab).name}`)
+const tabPath = computed(() => 'path' in props.tab ? (`${props.tab.path.startsWith('/') ? `` : `/`}${props.tab.path!}`) : `/custom-tab-view/${(props.tab as ModuleBuiltinTab).name}`)
 const badge = computed(() => 'badge' in props.tab && props.tab.badge?.())
 const isActive = computed(() => route.path.startsWith(tabPath.value))
 

diff --git a/packages/client/src/main.ts b/packages/client/src/main.ts
@@ -45,7 +45,7 @@ const routes = [
   { path: '/assets', component: Assets },
   { path: '/graph', component: Graph },
   { path: '/settings', component: Settings },
-  { path: '/custom-tab-view', component: CustomTabView },
+  { path: '/custom-tab-view/:name', component: CustomTabView },
 ]
 
 // @TODO: find a better way to handle it

diff --git a/packages/client/src/pages/custom-tab-view.vue b/packages/client/src/pages/custom-tab-view.vue
@@ -5,7 +5,7 @@ import type { CustomTab } from '@vue-devtools-next/kit'
 const route = useRoute()
 const router = useRouter()
 const { flattenedTabs } = useAllTabs()
-const tabName = computed(() => route.query.name as string | undefined)
+const tabName = computed(() => route.params.name as string | undefined)
 const tab = computed(() => flattenedTabs.value.find(tab => tabName.value === tab.name) || null!) as ComputedRef<CustomTab>
 
 onMounted(() => {
@@ -31,13 +31,13 @@ onMounted(() => {
       </div>
     </PanelGrids>
   </template>
-  <template v-else-if="tab.view.type === 'iframe'">
+  <template v-else-if="tab?.view?.type === 'iframe'">
     <IframeView :src="tab.view.src" />
   </template>
   <template v-else>
     <PanelGrids>
       <NCard flex="~ col" h-full items-center justify-center>
-        Unknown tab type {{ tab.view }}
+        Unknown tab type {{ tab?.view }}
       </NCard>
     </PanelGrids>
   </template>