Skip to content

Commit bf2d782

Browse files
antfuantfu
committed
feat(core): rendering categories
1 parent 16af242 commit bf2d782

File tree

9 files changed

+107
-32
lines changed

9 files changed

+107
-32
lines changed

‎packages/core/src/client/standalone/App.vue‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import type { DocksContext } from '@vitejs/devtools-kit/client'
33
import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
44
import { markRaw, ref, useTemplateRef, watch } from 'vue'
5-
import DockEntries from '../webcomponents/components/DockEntries.vue'
5+
import DockEntriesWithCategories from '../webcomponents/components/DockEntriesWithCategories.vue'
66
import VitePlus from '../webcomponents/components/icons/VitePlus.vue'
77
import ViewBuiltinClientAuthNotice from '../webcomponents/components/ViewBuiltinClientAuthNotice.vue'
88
import ViewEntry from '../webcomponents/components/ViewEntry.vue'
@@ -51,13 +51,18 @@ function switchEntry(id: string) {
5151
<div class="p2 border-b border-base flex">
5252
<VitePlus class="w-7 h-7 ma" />
5353
</div>
54-
<DockEntries
55-
:entries="context.docks.entries"
56-
class="transition duration-200 p2"
57-
:is-vertical="false"
58-
:selected="context.docks.selected"
59-
@select="(e) => switchEntry(e?.id)"
60-
/>
54+
<div class="transition duration-200 p2">
55+
<DockEntriesWithCategories
56+
:entries="context.docks.entries"
57+
:is-vertical="false"
58+
:selected="context.docks.selected"
59+
@select="(e) => switchEntry(e?.id)"
60+
>
61+
<template #separator>
62+
<div class="border-base border-b w-full my-2" />
63+
</template>
64+
</DockEntriesWithCategories>
65+
</div>
6166
</div>
6267
<div>
6368
<div id="vite-devtools-views-container" ref="viewsContainer" class="pointer-events-auto" />

‎packages/core/src/client/webcomponents/.generated/css.ts‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎packages/core/src/client/webcomponents/components/Dock.vue‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { DocksContext } from '@vitejs/devtools-kit/client'
33
import { useEventListener, useScreenSafeArea } from '@vueuse/core'
44
import { computed, onMounted, reactive, ref, useTemplateRef, watchEffect } from 'vue'
55
import { BUILTIN_ENTRY_CLIENT_AUTH_NOTICE } from '../constants'
6-
import DockEntries from './DockEntries.vue'
6+
import DockEntriesWithCategories from './DockEntriesWithCategories.vue'
77
import BracketLeft from './icons/BracketLeft.vue'
88
import BracketRight from './icons/BracketRight.vue'
99
import VitePlusCore from './icons/VitePlusCore.vue'
@@ -305,14 +305,18 @@ onMounted(() => {
305305
</div>
306306
</button>
307307
</div>
308-
<DockEntries
309-
:entries="context.docks.entries"
310-
class="transition duration-200 flex items-center w-full h-full justify-center px3"
308+
<div
311309
:class="isMinimized ? 'opacity-0 pointer-events-none' : 'opacity-100'"
312-
:is-vertical="context.panel.isVertical"
313-
:selected="context.docks.selected"
314-
@select="(e) => context.docks.switchEntry(e?.id)"
315-
/>
310+
class="transition duration-200 flex items-center w-full h-full justify-center px3"
311+
>
312+
<DockEntriesWithCategories
313+
:context="context"
314+
:entries="context.docks.entries"
315+
:is-vertical="context.panel.isVertical"
316+
:selected="context.docks.selected"
317+
@select="(e) => context.docks.switchEntry(e?.id)"
318+
/>
319+
</div>
316320
</div>
317321
</div>
318322
</div>

‎packages/core/src/client/webcomponents/components/DockEntries.vue‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,14 @@ function toggleDockEntry(dock: DevToolsDockEntry) {
2424
</script>
2525

2626
<template>
27-
<div>
28-
<template v-for="dock of entries" :key="dock.id">
29-
<DockEntry
30-
v-if="!dock.isHidden"
31-
:dock
32-
:is-selected="selected?.id === dock.id"
33-
:is-dimmed="selected ? (selected.id !== dock.id) : false"
34-
:is-vertical="isVertical"
35-
@click="toggleDockEntry(dock)"
36-
/>
37-
</template>
38-
</div>
27+
<template v-for="dock of entries" :key="dock.id">
28+
<DockEntry
29+
v-if="!dock.isHidden"
30+
:dock
31+
:is-selected="selected?.id === dock.id"
32+
:is-dimmed="selected ? (selected.id !== dock.id) : false"
33+
:is-vertical="isVertical"
34+
@click="toggleDockEntry(dock)"
35+
/>
36+
</template>
3937
</template>

‎packages/core/src/client/webcomponents/components/DockEntriesWithCategories.vue‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<script setup lang="ts">
2+
import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
3+
import { computed } from 'vue'
4+
import { DEFAULT_CATEGORIES_ORDER } from '../constants'
5+
import DockEntries from './DockEntries.vue'
6+
7+
const props = defineProps<{
8+
entries: DevToolsDockEntry[]
9+
selected: DevToolsDockEntry | null
10+
isVertical: boolean
11+
}>()
12+
13+
const emit = defineEmits<{
14+
(e: 'select', entry: DevToolsDockEntry): void
15+
}>()
16+
17+
const groups = computed(() => {
18+
const map = new Map<string, DevToolsDockEntry[]>()
19+
for (const entry of props.entries) {
20+
const category = entry.category ?? 'default'
21+
if (!map.has(category))
22+
map.set(category, [])
23+
map.get(category)!.push(entry)
24+
}
25+
const entries = Array
26+
.from(map.entries())
27+
.sort(([a], [b]) => {
28+
const ia = DEFAULT_CATEGORIES_ORDER[a] || 0
29+
const ib = DEFAULT_CATEGORIES_ORDER[b] || 0
30+
return ib === ia ? b.localeCompare(a) : ia - ib
31+
})
32+
33+
entries.forEach(([_, entries]) => {
34+
entries.sort((a, b) => {
35+
const ia = a.defaultOrder ?? 0
36+
const ib = b.defaultOrder ?? 0
37+
return ib === ia ? b.title.localeCompare(a.title) : ia - ib
38+
})
39+
})
40+
return entries
41+
})
42+
</script>
43+
44+
<template>
45+
<template v-for="[category, entries], idx of groups" :key="category">
46+
<slot v-if="idx > 0" name="separator" :category="category" :index="idx" :is-vertical="isVertical">
47+
<div class="border-base m1 h-20px w-px border-r-1.5" />
48+
</slot>
49+
<DockEntries
50+
:entries="entries"
51+
:is-vertical="isVertical"
52+
:selected="selected"
53+
@select="(e) => emit('select', e)"
54+
/>
55+
</template>
56+
</template>

‎packages/core/src/client/webcomponents/components/DockEntry.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ useEventListener('pointerdown', () => {
5555
isDimmed ? 'op50 saturate-0' : '',
5656
isSelected ? 'scale-120 text-purple' : '',
5757
]"
58-
class="flex items-center justify-center p1.5 rounded-xl hover:bg-[#8881] hover:scale-120 transition-all duration-300 relative"
58+
class="flex items-center justify-center p1.5 rounded-xl hover:bg-[#8881] hover:scale-110 transition-all duration-300 relative"
5959
>
6060
<DockIcon :icon="dock.icon" :title="dock.title" class="w-5 h-5 select-none" />
6161
</button>

‎packages/core/src/client/webcomponents/constants.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { DevToolsViewBuiltin } from '@vitejs/devtools-kit'
1+
import type { DevToolsDockEntryCategory, DevToolsViewBuiltin } from '@vitejs/devtools-kit'
22

33
export const BUILTIN_ENTRY_CLIENT_AUTH_NOTICE: DevToolsViewBuiltin = Object.freeze({
44
type: '~builtin',
@@ -10,3 +10,12 @@ export const BUILTIN_ENTRY_CLIENT_AUTH_NOTICE: DevToolsViewBuiltin = Object.free
1010
export const BUILTIN_ENTRIES: readonly DevToolsViewBuiltin[] = Object.freeze([
1111
BUILTIN_ENTRY_CLIENT_AUTH_NOTICE,
1212
])
13+
14+
export const DEFAULT_CATEGORIES_ORDER: Record<string, number> = {
15+
default: 0,
16+
app: 100,
17+
framework: 200,
18+
web: 300,
19+
advanced: 400,
20+
builtin: 500,
21+
} satisfies Record<DevToolsDockEntryCategory, number>

‎packages/core/src/node/host-docks.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export class DevToolsDockHost implements DevToolsDockHostType {
2222
id: '~terminals',
2323
title: 'Terminals',
2424
icon: 'ph:terminal-duotone',
25+
category: 'builtin',
2526
get isHidden() {
2627
return context.terminals.sessions.size === 0
2728
},
@@ -31,12 +32,14 @@ export class DevToolsDockHost implements DevToolsDockHostType {
3132
id: '~logs',
3233
title: 'Logs',
3334
icon: 'ph:notification-duotone',
35+
category: 'builtin',
3436
isHidden: true, // TODO: implement logs
3537
},
3638
{
3739
type: '~builtin',
3840
id: '~settings',
3941
title: 'Settings',
42+
category: 'builtin',
4043
icon: 'ph:gear-duotone',
4144
},
4245
]

‎packages/kit/src/types/docks.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export interface DevToolsDockHost {
1414
}
1515

1616
// TODO: refine categories more clearly
17-
export type DevToolsDockEntryCategory = 'app' | 'framework' | 'web' | 'advanced' | 'default'
17+
export type DevToolsDockEntryCategory = 'app' | 'framework' | 'web' | 'advanced' | 'default' | 'builtin'
1818

1919
export type DevToolsDockEntryIcon = string | { light: string, dark: string }
2020

0 commit comments

Comments
 (0)