feat(core): close on click outside (#189)

antfu · web-flow · commit b30faf0b172f · 2026-03-11T14:28:40.000+09:00
diff --git a/packages/core/src/client/webcomponents/components/DockEmbedded.vue b/packages/core/src/client/webcomponents/components/DockEmbedded.vue
@@ -1,16 +1,39 @@
 <script setup lang="ts">
 import type { DocksContext } from '@vitejs/devtools-kit/client'
+import { useEventListener } from '@vueuse/core'
 import { onUnmounted } from 'vue'
+import { sharedStateToRef } from '../state/docks'
 import { closeDockPopup, useIsDockPopupOpen } from '../state/popup'
 import Dock from './Dock.vue'
 import DockPanel from './DockPanel.vue'
 import FloatingElements from './FloatingElements.vue'
 
-defineProps<{
+const props = defineProps<{
   context: DocksContext
 }>()
 
 const isDockPopupOpen = useIsDockPopupOpen()
+const settings = sharedStateToRef(props.context.docks.settings)
+
+// Close the dock when clicking outside of it
+useEventListener(window, 'mousedown', (e: MouseEvent) => {
+  if (!settings.value.closeOnOutsideClick)
+    return
+  if (isDockPopupOpen.value)
+    return
+  if (!props.context.panel.store.open || props.context.panel.isDragging || props.context.panel.isResizing)
+    return
+
+  const matched = e.composedPath().find((_el) => {
+    const el = _el as HTMLElement
+    return [...(el.classList || [])].some(c => c.startsWith('vite-devtools-'))
+      || el.id?.startsWith('vite-devtools-')
+      || el.tagName?.toLowerCase() === 'iframe'
+  })
+
+  if (!matched)
+    props.context.docks.switchEntry(null)
+})
 
 onUnmounted(() => {
   closeDockPopup()
diff --git a/packages/core/src/client/webcomponents/components/ViewBuiltinSettings.vue b/packages/core/src/client/webcomponents/components/ViewBuiltinSettings.vue
@@ -284,6 +284,24 @@ function resetSettings() {
                 <span class="text-xs op50">Display navigation controls and URL bar for iframe views</span>
               </div>
             </label>
+
+            <!-- Close on outside click toggle -->
+            <label class="flex items-center gap-3 cursor-pointer group">
+              <button
+                class="w-10 h-6 rounded-full transition-colors relative shrink-0"
+                :class="settings.closeOnOutsideClick ? 'bg-lime' : 'bg-gray/30'"
+                @click="settingsStore.mutate((s) => { s.closeOnOutsideClick = !s.closeOnOutsideClick })"
+              >
+                <div
+                  class="absolute top-1 w-4 h-4 rounded-full bg-white shadow transition-transform"
+                  :class="settings.closeOnOutsideClick ? 'translate-x-5' : 'translate-x-1'"
+                />
+              </button>
+              <div class="flex flex-col">
+                <span class="text-sm">Close panel on outside click</span>
+                <span class="text-xs op50">Close the DevTools panel when clicking outside of it (embedded mode only)</span>
+              </div>
+            </label>
           </div>
         </section>
 
diff --git a/packages/kit/src/constants.ts b/packages/kit/src/constants.ts
@@ -27,4 +27,5 @@ export const DEFAULT_STATE_USER_SETTINGS: () => DevToolsDocksUserSettings = () =
   docksPinned: [],
   docksCustomOrder: {},
   showIframeAddressBar: false,
+  closeOnOutsideClick: false,
 })
diff --git a/packages/kit/src/types/settings.ts b/packages/kit/src/types/settings.ts
@@ -4,4 +4,5 @@ export interface DevToolsDocksUserSettings {
   docksPinned: string[]
   docksCustomOrder: Record<string, number>
   showIframeAddressBar: boolean
+  closeOnOutsideClick: boolean
 }

Original file line number	Diff line number	Diff line change
`@@ -4,4 +4,5 @@ export interface DevToolsDocksUserSettings {`
`4`	`4`	`docksPinned: string[]`
`5`	`5`	`docksCustomOrder: Record<string, number>`
`6`	`6`	`showIframeAddressBar: boolean`
	`7`	`+ closeOnOutsideClick: boolean`
`7`	`8`	`}`