feat: put vue devtools ui in a separate category

nuxt · Jan 9, 2025 · 5b566fb · 5b566fb
1 parent 94b3822
commit 5b566fb
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 13 deletions.
diff --git a/packages/devtools-kit/src/_types/common.ts b/packages/devtools-kit/src/_types/common.ts
@@ -1,6 +1,7 @@
 export type TabCategory =
   | 'pinned'
   | 'app'
+  | 'vue-devtools'
   | 'analyze'
   | 'server'
   | 'modules'

diff --git a/packages/devtools/client/composables/state-tabs.ts b/packages/devtools/client/composables/state-tabs.ts
@@ -52,13 +52,14 @@ export function useAllTabs() {
 
 function getCategorizedRecord(): Record<TabCategory, (ModuleCustomTab | ModuleBuiltinTab)[]> {
   return {
-    pinned: [],
-    app: [],
-    analyze: [],
-    server: [],
-    modules: [],
-    documentation: [],
-    advanced: [],
+    'pinned': [],
+    'app': [],
+    'vue-devtools': [],
+    'analyze': [],
+    'server': [],
+    'modules': [],
+    'documentation': [],
+    'advanced': [],
   }
 }
 

diff --git a/packages/devtools/client/pages/modules/pinia.vue b/packages/devtools/client/pages/modules/pinia.vue
@@ -10,6 +10,7 @@ definePageMeta({
   icon: 'i-logos-pinia',
   title: 'Pinia',
   layout: 'full',
+  category: 'vue-devtools',
   show() {
     const configs = useServerConfig()
     return () => configs.value?.modules?.some(item => (item as string | Array<unknown>)?.includes('@pinia/nuxt'))

diff --git a/.../client/pages/modules/components-tree.vue → ...ools/client/pages/modules/render-tree.vue b/.../client/pages/modules/components-tree.vue → ...ools/client/pages/modules/render-tree.vue
@@ -11,13 +11,14 @@ const openInEditor = useOpenInEditor()
 
 definePageMeta({
   icon: 'i-carbon-category',
-  title: 'Components Tree',
+  title: 'Render Tree',
   layout: 'full',
   show: () => {
     const client = useClient()
     return () => !!client.value
   },
-  order: 3,
+  order: 1,
+  category: 'vue-devtools',
 })
 
 function togglePanel(status: boolean) {

diff --git a/packages/devtools/client/pages/settings.vue b/packages/devtools/client/pages/settings.vue
@@ -113,7 +113,7 @@ watchEffect(() => {
       icon="i-carbon-settings-adjust"
       text="DevTools Settings"
     />
-    <div grid="~ md:cols-2 gap-x-10 gap-y-3" max-w-300>
+    <div grid="~ lg:cols-2 gap-x-10 gap-y-3" max-w-300>
       <div flex="~ col gap-2">
         <h3 text-lg>
           Tabs
@@ -141,10 +141,9 @@ watchEffect(() => {
                 :model-value="!hiddenTabs.includes(tab.name)"
                 @update:model-value="(v: boolean) => toggleTab(tab.name, v)"
               >
-                <div flex="~ gap-2" flex-auto items-center justify-start pr-4 :class="hiddenTabs.includes(tab.name) ? 'op25' : ''">
+                <div flex="~ gap-2" flex-auto items-center justify-start of-hidden pr-4 :class="hiddenTabs.includes(tab.name) ? 'op25' : ''">
                   <TabIcon text-xl :icon="tab.icon" :title="tab.title" />
-                  <span>{{ tab.title }}</span>
-                  <div flex-auto />
+                  <span flex-auto overflow-hidden text-ellipsis ws-nowrap>{{ tab.title }}</span>
                   <template v-if="pinnedTabs.includes(tab.name)">
                     <NButton
                       icon="i-carbon-caret-up"