feat: improves popup timing (#2166)

assets/auto-imports.d.ts

@@ -120,6 +120,7 @@ declare global {
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
   const showAllContainers: typeof import('./composables/settings')['showAllContainers']
+  const showPopup: typeof import('./composables/popup')['showPopup']
   const showTimestamp: typeof import('./composables/settings')['showTimestamp']
   const size: typeof import('./composables/settings')['size']
   const smallerScrollbars: typeof import('./composables/settings')['smallerScrollbars']
@@ -453,6 +454,7 @@ declare module 'vue' {
     readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
     readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
     readonly showAllContainers: UnwrapRef<typeof import('./composables/settings')['showAllContainers']>
+    readonly showPopup: UnwrapRef<typeof import('./composables/popup')['showPopup']>
     readonly showTimestamp: UnwrapRef<typeof import('./composables/settings')['showTimestamp']>
     readonly size: UnwrapRef<typeof import('./composables/settings')['size']>
     readonly smallerScrollbars: UnwrapRef<typeof import('./composables/settings')['smallerScrollbars']>

assets/components/Popup.vue

@@ -1,8 +1,8 @@
 <template>
-  <div @mouseenter="onMouseEnter" @mouseleave="show = false" ref="trigger"><slot></slot></div>
+  <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" ref="trigger"><slot></slot></div>
   <Teleport to="body">
     <Transition name="fade">
-      <div v-show="show && delayedShow" class="content" ref="content">
+      <div v-show="show && (delayedShow || glopbalShow)" class="content" ref="content">
         <slot name="content"></slot>
       </div>
     </Transition>
@@ -10,14 +10,18 @@
 </template>
 
 <script lang="ts" setup>
-import { refDebounced } from "@vueuse/core";
-let show = ref(false);
+import { globalShowPopup } from "@/composables/popup";
+
+let glopbalShow = globalShowPopup();
+let show = ref(glopbalShow.value);
 let delayedShow = refDebounced(show, 1000);
+
 let content: HTMLElement | null = $ref(null);
 let trigger: HTMLElement | null = $ref(null);
 
 function onMouseEnter(e: MouseEvent) {
   show.value = true;
+  glopbalShow.value = true;
   if (e.target && content && e.target instanceof Element) {
     const { left, top, width } = e.target.getBoundingClientRect();
     const x = left + width + 10;
@@ -27,6 +31,11 @@ function onMouseEnter(e: MouseEvent) {
     content.style.top = `${y}px`;
   }
 }
+
+function onMouseLeave() {
+  show.value = false;
+  glopbalShow.value = false;
+}
 </script>
 
 <style scoped>

assets/composables/popup.ts

@@ -0,0 +1,13 @@
+const show = ref(false);
+const debouncedShow = debouncedRef(show, 1000);
+
+const delayedShow = computed({
+  set(newVal: boolean) {
+    show.value = newVal;
+  },
+  get() {
+    return debouncedShow.value;
+  },
+});
+
+export const globalShowPopup = () => delayedShow;