sprintify-ui 0.10.12 → 0.10.14

package/src/composables/tooltip.ts

@@ -1,4 +1,4 @@
-import { UseFloatingOptions, MaybeElement, UseFloatingReturn, autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/vue";
+import { UseFloatingOptions, MaybeElement, UseFloatingReturn, autoUpdate, flip, offset as offset2, shift, useFloating } from "@floating-ui/vue";
 import { unrefElement, useEventListener, } from "@vueuse/core";
 import { debounce } from "lodash";
 
@@ -12,7 +12,9 @@ function useTooltip(
     reference: Readonly<Ref<MaybeElement<any>>>,
     floating: Readonly<Ref<MaybeElement<HTMLElement>>>,
     interactive: boolean = false,
-    options: UseFloatingOptions | undefined = undefined
+    delay: number = 0,
+    options: UseFloatingOptions | undefined = undefined,
+    offset: number = 6,
 ): ReturnType {
 
     const show = ref(false);
@@ -29,12 +31,12 @@ function useTooltip(
 
     useEventListener(elementRef, 'mouseenter', () => {
         nextShow = true;
-        renderShow();
+        showDebounce();
     });
 
     useEventListener(elementRef, 'mouseleave', () => {
         nextShow = false;
-        renderShow();
+        hideDebounce();
     });
 
     useEventListener(floatingRef, 'mouseenter', () => {
@@ -42,7 +44,7 @@ function useTooltip(
             return;
         }
         nextShow = true;
-        renderShow();
+        showDebounce();
     });
 
     useEventListener(floatingRef, 'mouseleave', () => {
@@ -50,16 +52,26 @@ function useTooltip(
             return;
         }
         nextShow = false;
-        renderShow();
+        hideDebounce();
     });
 
-    const renderShow = debounce(() => {
-        show.value = nextShow;
-    }, interactive ? 150 : 0);
+    const showDebounce = debounce(() => {
+        if (!nextShow) {
+            return;
+        }
+        show.value = true;
+    }, delay);
+
+    const hideDebounce = debounce(() => {
+        if (nextShow) {
+            return;
+        }
+        show.value = false;
+    }, interactive ? 0 : 150);
 
     const config = {
         placement: 'top',
-        middleware: [offset(6), flip(), shift()],
+        middleware: [offset2(offset), flip(), shift()],
         whileElementsMounted: autoUpdate,
     };