fix(overlay): hide panel when enable inspector

vuejs · May 28, 2024 · 792df0a · 792df0a
1 parent b7ea97b
commit 792df0a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/packages/overlay/src/App.vue b/packages/overlay/src/App.vue
@@ -81,9 +81,26 @@ const vueInspector = ref()
 onDevToolsConnected(() => {
   devtools.api.getVueInspector().then((inspector) => {
     vueInspector.value = inspector
+
+    let previousPanelVisible = panelVisible.value
+
+    vueInspector.value.onEnabled = () => {
+      previousPanelVisible = panelVisible.value
+      togglePanelVisible(undefined, false)
+    }
+
+    vueInspector.value.onDisabled = () => {
+      togglePanelVisible(undefined, previousPanelVisible)
+    }
   })
 })
 
+addEventListener('keyup', (e) => {
+  if (e.key.toLowerCase() === 'escape' && vueInspector.value?.enabled) {
+    vueInspector.value?.disable()
+  }
+})
+
 const vueInspectorEnabled = computed(() => {
   return !!vueInspector.value
 })

diff --git a/packages/overlay/src/composables/panel.ts b/packages/overlay/src/composables/panel.ts
@@ -15,7 +15,7 @@ export function usePanelVisible() {
     },
   })
 
-  const toggleVisible = (_: unknown, state?: boolean) => {
+  const toggleVisible = (_?: unknown, state?: boolean) => {
     visible.value = state ?? !visible.value
   }