From cfe616a79e478305b6fd308a147a22483d5d0674 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Tue, 2 May 2023 09:09:13 -0700
Subject: [PATCH] feat: improves popup timing (#2166)

---
 assets/auto-imports.d.ts    |  2 ++
 assets/components/Popup.vue | 17 +++++++++++++----
 assets/composables/popup.ts | 13 +++++++++++++
 3 files changed, 28 insertions(+), 4 deletions(-)
 create mode 100644 assets/composables/popup.ts

diff --git a/assets/auto-imports.d.ts b/assets/auto-imports.d.ts
index f5893f5d..bca945cb 100644
--- a/assets/auto-imports.d.ts
+++ b/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']>
diff --git a/assets/components/Popup.vue b/assets/components/Popup.vue
index 2689979d..7dfc8288 100644
--- a/assets/components/Popup.vue
+++ b/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>
diff --git a/assets/composables/popup.ts b/assets/composables/popup.ts
new file mode 100644
index 00000000..737d7659
--- /dev/null
+++ b/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;