feat(core): close on click outside

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()

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>
 

packages/kit/src/constants.ts

@@ -27,4 +27,5 @@ export const DEFAULT_STATE_USER_SETTINGS: () => DevToolsDocksUserSettings = () =
   docksPinned: [],
   docksCustomOrder: {},
   showIframeAddressBar: false,
+  closeOnOutsideClick: false,
 })

packages/kit/src/types/settings.ts

@@ -4,4 +4,5 @@ export interface DevToolsDocksUserSettings {
   docksPinned: string[]
   docksCustomOrder: Record<string, number>
   showIframeAddressBar: boolean
+  closeOnOutsideClick: boolean
 }