fix: close module flow panel on click outside

Author: webfansplz

packages/devtools/package.json

@@ -63,6 +63,7 @@
     "@types/diff": "catalog:types",
     "@types/stream-json": "catalog:types",
     "@unocss/nuxt": "catalog:build",
+    "@vueuse/components": "catalog:frontend",
     "@vueuse/nuxt": "catalog:build",
     "@vueuse/router": "catalog:frontend",
     "codemirror": "catalog:frontend",

packages/devtools/src/app/pages/session/[session]/graph/index.vue

@@ -2,6 +2,7 @@
 import type { SessionContext } from '~~/shared/types'
 import { useRoute, useRouter } from '#app/composables/router'
 import { clearUndefined } from '@antfu/utils'
+import { vOnClickOutside } from '@vueuse/components'
 import { computedWithControl, debouncedWatch } from '@vueuse/core'
 import Fuse from 'fuse.js'
 import { computed, reactive, ref } from 'vue'
@@ -126,6 +127,10 @@ function toggleDisplay() {
   }
   display.value = display.value === 'list' ? 'graph' : 'list'
 }
+
+function closeFlowPanel() {
+  router.replace({ query: { ...route.query, module: undefined } })
+}
 </script>
 
 <template>
@@ -194,12 +199,13 @@ function toggleDisplay() {
   </div>
 
   <div
-    v-if="route.query.module" fixed inset-0 backdrop-blur-5
+    v-if="route.query.module" fixed inset-0
+    backdrop-blur-5
     z-panel-content
-    @click="router.replace({ query: { ...route.query, module: undefined } })"
   >
     <div
       :key="(route.query.module as string)"
+      v-on-click-outside="closeFlowPanel"
       fixed right-0 bottom-0 top-20 z-panel-content
       min-w-200 of-scroll bg-glass border="l t base rounded-tl-xl"
       max-w-85vw
@@ -210,7 +216,7 @@ function toggleDisplay() {
       />
       <DisplayCloseButton
         absolute right-2 top-2
-        @click="router.replace({ query: { ...route.query, module: undefined } })"
+        @click="closeFlowPanel"
       />
     </div>
   </div>

pnpm-lock.yaml

@@ -51,6 +51,7 @@ catalogs:
     vite-plugin-inspect: ^11.2.0
     vue-tsc: ^2.2.10
   frontend:
+    '@vueuse/components': ^13.4.0
     '@vueuse/router': ^13.4.0
     codemirror: ^5.65.19
     codemirror-theme-vars: ^0.1.2