fix(overlay): hide panel when enable inspector (#407)

vuejs · Jun 3, 2024 · a018642 · a018642
1 parent 3480947
commit a018642
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
   }