feat: close module details panel on click outside

Author: webfansplz

packages/devtools/src/app/components/flowmap/ModuleFlow.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ModuleInfo, RolldownChunkInfo, RolldownModuleFlowNode, SessionContext } from '~~/shared/types'
+import { vOnClickOutside } from '@vueuse/components'
 import { Pane, Splitpanes } from 'splitpanes'
 import { shallowRef, toRefs, watch } from 'vue'
 import ModuleFlowDetails from './ModuleFlowDetails.vue'
@@ -45,7 +46,7 @@ function handleClose() {
     <Pane v-if="selected" size="55" min-size="10" max-size="90" class="!h-auto !of-visible">
       <!-- the origin of the height: -->
       <!-- DialogTopMargin (20) + HandleHeight (30) + padding (4*2) = 58 -->
-      <div w-full h="[calc(100vh-(var(--spacing)*58))]" sticky top-4>
+      <div v-on-click-outside="[handleClose, { ignore: ['.splitpanes__splitter'] }]" w-full h="[calc(100vh-(var(--spacing)*58))]" sticky top-4>
         <div absolute left-0 top="1/2" translate-x="-1/2" translate-y="-1/2" bg="#DFDFDF dark:#313131" h-10 w-2 rounded-full z-10 cursor-col-resize />
         <ModuleFlowDetails
           :selected="selected"