Skip to content

Commit 77e992c

Browse files
antfuantfu
authored
feat: implement panel popup (#188)
1 parent d9b4f7c commit 77e992c

File tree

14 files changed

+783
-72
lines changed

14 files changed

+783
-72
lines changed

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

Lines changed: 2 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,20 @@
11
<script setup lang="ts">
22
import type { DocksContext } from '@vitejs/devtools-kit/client'
33
import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
4-
import { markRaw, ref, useTemplateRef, watch } from 'vue'
5-
import DockEntriesWithCategories from '../webcomponents/components/DockEntriesWithCategories.vue'
6-
import FloatingElements from '../webcomponents/components/FloatingElements.vue'
7-
import VitePlus from '../webcomponents/components/icons/VitePlus.vue'
8-
import ViewBuiltinClientAuthNotice from '../webcomponents/components/ViewBuiltinClientAuthNotice.vue'
9-
import ViewEntry from '../webcomponents/components/ViewEntry.vue'
4+
import DockStandalone from '../webcomponents/components/DockStandalone.vue'
105
import { createDocksContext } from '../webcomponents/state/context'
11-
import { PersistedDomViewsManager } from '../webcomponents/utils/PersistedDomViewsManager'
126
137
const rpc = await getDevToolsRpcClient()
148
159
// eslint-disable-next-line no-console
1610
console.log('[VITE DEVTOOLS] RPC', rpc)
1711
18-
const viewsContainer = useTemplateRef<HTMLElement>('viewsContainer')
19-
const persistedDoms = markRaw(new PersistedDomViewsManager(viewsContainer))
20-
2112
const context: DocksContext = await createDocksContext(
2213
'standalone',
2314
rpc,
2415
)
25-
26-
const isRpcTrusted = ref(context.rpc.isTrusted)
27-
context.rpc.events.on('rpc:is-trusted:updated', (isTrusted) => {
28-
isRpcTrusted.value = isTrusted
29-
})
30-
31-
watch(
32-
() => context.docks.entries,
33-
() => {
34-
context.docks.selectedId ||= context.docks.entries[0]?.id ?? null
35-
},
36-
{ immediate: true },
37-
)
38-
39-
function switchEntry(id: string | undefined) {
40-
if (id) {
41-
context.docks.switchEntry(id)
42-
}
43-
}
4416
</script>
4517

4618
<template>
47-
<div v-if="!isRpcTrusted" class="h-screen w-screen of-hidden">
48-
<ViewBuiltinClientAuthNotice :context="context" />
49-
</div>
50-
<div v-else class="h-screen w-screen of-hidden grid cols-[max-content_1fr]">
51-
<div class="border-r border-base flex flex-col">
52-
<div class="p2 border-b border-base flex">
53-
<VitePlus class="w-7 h-7 ma" />
54-
</div>
55-
<div class="transition duration-200 p2">
56-
<DockEntriesWithCategories
57-
:context="context"
58-
:groups="context.docks.groupedEntries"
59-
:is-vertical="false"
60-
:selected="context.docks.selected"
61-
@select="(e) => switchEntry(e?.id)"
62-
>
63-
<template #separator>
64-
<div class="border-base border-b w-full my-2" />
65-
</template>
66-
</DockEntriesWithCategories>
67-
</div>
68-
</div>
69-
<div>
70-
<div id="vite-devtools-views-container" ref="viewsContainer" class="pointer-events-auto" />
71-
<ViewEntry
72-
v-if="context.docks.selected && viewsContainer"
73-
:key="context.docks.selected.id"
74-
:entry="context.docks.selected"
75-
:context
76-
:persisted-doms="persistedDoms"
77-
/>
78-
</div>
79-
</div>
80-
<FloatingElements />
19+
<DockStandalone :context />
8120
</template>

‎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: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ 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'
66
import { docksSplitGroupsWithCapacity } from '../state/dock-settings'
7+
import { filterPopupDockEntry, isDockPopupEntryVisible } from '../state/popup'
78
import DockEntriesWithCategories from './DockEntriesWithCategories.vue'
89
import DockOverflowButton from './DockOverflowButton.vue'
910
import BracketLeft from './icons/BracketLeft.vue'
@@ -74,8 +75,19 @@ context.rpc.events.on('rpc:is-trusted:updated', (isTrusted) => {
7475
context.docks.switchEntry(null)
7576
})
7677
78+
const isPopupEntryVisible = computed(() => isDockPopupEntryVisible())
79+
const groupedEntries = computed(() => {
80+
if (isPopupEntryVisible.value)
81+
return context.docks.groupedEntries
82+
return filterPopupDockEntry(context.docks.groupedEntries)
83+
})
84+
7785
const splitedEntries = computed(() => {
78-
return docksSplitGroupsWithCapacity(context.docks.groupedEntries, 5)
86+
return docksSplitGroupsWithCapacity(groupedEntries.value, 5)
87+
})
88+
89+
const selectedEntry = computed(() => {
90+
return context.docks.selected
7991
})
8092
8193
onMounted(async () => {
@@ -320,7 +332,7 @@ onMounted(() => {
320332
:context="context"
321333
:groups="splitedEntries.visible"
322334
:is-vertical="context.panel.isVertical"
323-
:selected="context.docks.selected"
335+
:selected="selectedEntry"
324336
@select="(e) => context.docks.switchEntry(e?.id)"
325337
/>
326338

@@ -330,7 +342,7 @@ onMounted(() => {
330342
:context="context"
331343
:is-vertical="context.panel.isVertical"
332344
:groups="splitedEntries.overflow"
333-
:selected="context.docks.selected"
345+
:selected="selectedEntry"
334346
@select="(e) => context.docks.switchEntry(e?.id)"
335347
/>
336348
</template>

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
11
<script setup lang="ts">
22
import type { DocksContext } from '@vitejs/devtools-kit/client'
3+
import { onUnmounted } from 'vue'
4+
import { closeDockPopup, useIsDockPopupOpen } from '../state/popup'
35
import Dock from './Dock.vue'
46
import DockPanel from './DockPanel.vue'
57
import FloatingElements from './FloatingElements.vue'
68
79
defineProps<{
810
context: DocksContext
911
}>()
12+
13+
const isDockPopupOpen = useIsDockPopupOpen()
14+
15+
onUnmounted(() => {
16+
closeDockPopup()
17+
})
1018
</script>
1119

1220
<template>
13-
<Dock :context>
21+
<Dock v-if="!isDockPopupOpen" :context>
1422
<template #default="{ dockEl, panelMargins, selected }">
1523
<DockPanel
1624
:context
@@ -20,5 +28,5 @@ defineProps<{
2028
/>
2129
</template>
2230
</Dock>
23-
<FloatingElements />
31+
<FloatingElements v-if="!isDockPopupOpen" />
2432
</template>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ function showOverflowPanel() {
3636
isOverflowPanelVisible.value = true
3737
setDocksOverflowPanel({
3838
content: () => h('div', {
39-
class: 'flex gap-0 flex-wrap max-w-200px',
39+
class: 'flex gap-0 flex-wrap max-w-220px',
4040
}, [
4141
h(DockEntriesWithCategories, {
4242
context: props.context,

‎packages/core/src/client/webcomponents/components/DockStandalone.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import type { DocksContext } from '@vitejs/devtools-kit/client'
2+
import type { VueElementConstructor } from 'vue'
3+
import { defineCustomElement } from 'vue'
4+
import css from '../.generated/css'
5+
import Component from './DockStandalone.vue'
6+
7+
const forcedColorModeCss = `
8+
:host([data-vite-devtools-color-mode='dark']) {
9+
color-scheme: dark;
10+
}
11+
:host([data-vite-devtools-color-mode='light']) {
12+
color-scheme: light;
13+
}
14+
`
15+
16+
export const DockStandalone = defineCustomElement(
17+
Component,
18+
{
19+
shadowRoot: true,
20+
styles: [css, forcedColorModeCss],
21+
},
22+
) as VueElementConstructor<{
23+
context: DocksContext
24+
}>
25+
26+
if (!customElements.get('vite-devtools-dock-standalone'))
27+
customElements.define('vite-devtools-dock-standalone', DockStandalone)

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

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<script setup lang="ts">
2+
import type { DocksContext } from '@vitejs/devtools-kit/client'
3+
import { computed, markRaw, ref, useTemplateRef, watch } from 'vue'
4+
import { filterPopupDockEntry, isDockPopupEntryVisible } from '../state/popup'
5+
import { PersistedDomViewsManager } from '../utils/PersistedDomViewsManager'
6+
import DockEntriesWithCategories from './DockEntriesWithCategories.vue'
7+
import FloatingElements from './FloatingElements.vue'
8+
import VitePlus from './icons/VitePlus.vue'
9+
import ViewBuiltinClientAuthNotice from './ViewBuiltinClientAuthNotice.vue'
10+
import ViewEntry from './ViewEntry.vue'
11+
12+
const props = defineProps<{
13+
context: DocksContext
14+
}>()
15+
16+
const context = props.context
17+
const viewsContainer = useTemplateRef<HTMLElement>('viewsContainer')
18+
const persistedDoms = markRaw(new PersistedDomViewsManager(viewsContainer))
19+
20+
const isRpcTrusted = ref(context.rpc.isTrusted)
21+
context.rpc.events.on('rpc:is-trusted:updated', (isTrusted) => {
22+
isRpcTrusted.value = isTrusted
23+
})
24+
25+
watch(
26+
() => context.docks.entries,
27+
() => {
28+
context.docks.selectedId ||= context.docks.entries[0]?.id ?? null
29+
},
30+
{ immediate: true },
31+
)
32+
33+
const groupedEntries = computed(() => {
34+
if (isDockPopupEntryVisible())
35+
return context.docks.groupedEntries
36+
37+
return filterPopupDockEntry(context.docks.groupedEntries)
38+
})
39+
40+
function switchEntry(id: string | undefined) {
41+
if (id) {
42+
context.docks.switchEntry(id)
43+
}
44+
}
45+
</script>
46+
47+
<template>
48+
<div v-if="!isRpcTrusted" class="h-screen w-screen of-hidden">
49+
<ViewBuiltinClientAuthNotice :context="context" />
50+
</div>
51+
<div v-else class="h-screen w-screen of-hidden grid cols-[max-content_1fr]">
52+
<div class="border-r border-base flex flex-col">
53+
<div class="p2 border-b border-base flex">
54+
<VitePlus class="w-7 h-7 ma" />
55+
</div>
56+
<div class="transition duration-200 p2">
57+
<DockEntriesWithCategories
58+
:context="context"
59+
:groups="groupedEntries"
60+
:is-vertical="false"
61+
:selected="context.docks.selected"
62+
@select="(e) => switchEntry(e?.id)"
63+
>
64+
<template #separator>
65+
<div class="border-base border-b w-full my-2" />
66+
</template>
67+
</DockEntriesWithCategories>
68+
</div>
69+
</div>
70+
<div>
71+
<div id="vite-devtools-views-container" ref="viewsContainer" class="pointer-events-auto" />
72+
<ViewEntry
73+
v-if="context.docks.selected && viewsContainer"
74+
:key="context.docks.selected.id"
75+
:entry="context.docks.selected"
76+
:context
77+
:persisted-doms="persistedDoms"
78+
/>
79+
</div>
80+
</div>
81+
<FloatingElements />
82+
</template>

0 commit comments

Comments
 (0)