sprintify-ui 0.11.23 → 0.11.25

package/dist/types/composables/tooltip.d.ts

@@ -3,5 +3,5 @@ type ReturnType = UseFloatingReturn & {
     showTooltip: Ref<boolean>;
 };
 import { Ref } from "vue";
-declare function useTooltip(reference: Readonly<Ref<MaybeElement<any>>>, floating: Readonly<Ref<MaybeElement<HTMLElement>>>, interactive?: boolean, delay?: number, options?: UseFloatingOptions | undefined, offset?: number): ReturnType;
+declare function useTooltip(reference: Readonly<Ref<MaybeElement<any>>>, floating: Readonly<Ref<MaybeElement<HTMLElement>>>, interactive?: boolean, delay?: number, options?: UseFloatingOptions | undefined, offset?: number, arrowRef?: Readonly<Ref<MaybeElement<HTMLElement>>>): ReturnType;
 export { useTooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.11.23",
+  "version": "0.11.25",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",

package/src/components/BaseTooltip.stories.js

@@ -5,9 +5,6 @@ import { BaseCardRow } from "."
 export default {
   title: "Components/BaseTooltip",
   component: BaseTooltip,
-  args: {
-    text: "Click here to learn more about this button",
-  },
 };
 
 const Template = (args) => ({
@@ -22,8 +19,16 @@ const Template = (args) => ({
   template: `
     <BaseCard>
         <BaseCardRow size=sm>
-        <BaseTooltip class="inline-block" title="test" v-bind="args">
-            <div>Hover me, the tooltip show appear outside the BaseCard</div>
+        <BaseTooltip class="inline-block" text="test 1" v-bind="args">
+            <div>TEST 1</div>
+        </BaseTooltip>
+
+        <BaseTooltip class="inline-block" text="test 2" v-bind="args">
+            <div>TEST 2</div>
+        </BaseTooltip>
+
+        <BaseTooltip class="inline-block" text="test 3" v-bind="args">
+            <div>TEST 3</div>
         </BaseTooltip>
         </BaseCardRow>
     </BaseCard>

package/src/components/BaseTooltip.vue

@@ -15,10 +15,10 @@
         :style="floatingStyles"
       >
         <transition
-          enter-active-class="transition duration-200 ease-out"
+          enter-active-class="transition duration-100 ease-out"
           enter-from-class="transform scale-90 opacity-0"
           enter-to-class="transform scale-100 opacity-100"
-          leave-active-class="transition duration-75 ease-in"
+          leave-active-class="transition duration-0 ease-in"
           leave-from-class="transform scale-100 opacity-100"
           leave-to-class="transform scale-90 opacity-0"
         >
@@ -26,13 +26,23 @@
             v-if="showTooltip"
             name="tooltip"
           >
-            <div
-              class="text-xs max-w-xs leading-snug rounded-md pt-1.5 pb-2 px-3"
-              :class="[
-                dark ? 'bg-slate-900 text-white' : 'bg-white text-slate-900 ring-1 ring-black ring-opacity-10 shadow-md',
-              ]"
-              v-html="text"
-            />
+            <div class="relative filter drop-shadow-[0_1px_2px_rgba(0,0,0,0.1)]">
+              <div
+                class="text-xs max-w-xs leading-snug rounded-md pt-1.5 pb-2 px-3"
+                :class="[
+                  dark ? 'bg-slate-900 text-white' : 'bg-white text-slate-900',
+                ]"
+                v-html="text"
+              />
+              <div
+                ref="arrowRef"
+                class="absolute w-2 h-2 rotate-45"
+                :class="[
+                  dark ? 'bg-slate-900' : 'bg-white',
+                ]"
+                :style="arrowStyles"
+              />
+            </div>
           </slot>
         </transition>
       </div>
@@ -64,12 +74,12 @@ const props = withDefaults(defineProps<{
   text: null,
   floatingOptions() {
     return {
-      placement: 'top-start',
+      placement: 'top',
     };
   },
   interactive: false,
   delay: 0,
-  dark: false,
+  dark: true,
   offset: 6,
 });
 
@@ -78,7 +88,26 @@ const targetRef = ref<HTMLElement | null>(null);
 const targetInternal = computed(() => unrefElement(targetRef));
 
 const tooltipRef = ref<HTMLElement | null>(null)
+const arrowRef = ref<HTMLElement | null>(null)
 
-const { floatingStyles, showTooltip } = useTooltip(targetInternal, tooltipRef, props.interactive, props.delay, props.floatingOptions, props.offset);
+const { floatingStyles, showTooltip, middlewareData, placement } = useTooltip(targetInternal, tooltipRef, props.interactive, props.delay, props.floatingOptions, props.offset, arrowRef);
+
+const arrowStyles = computed(() => {
+  const arrow = middlewareData.value.arrow;
+  const style: Record<string, string> = {};
+
+  if (arrow?.x != null) {
+    style.left = `${arrow.x}px`;
+  }
+  if (arrow?.y != null) {
+    style.top = `${arrow.y}px`;
+  }
+
+  const side = placement.value.split('-')[0];
+  const staticSide = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }[side]!;
+  style[staticSide] = '-4px';
+
+  return style;
+});
 
 </script>

package/src/composables/tooltip.ts

@@ -1,4 +1,4 @@
-import { UseFloatingOptions, MaybeElement, UseFloatingReturn, autoUpdate, flip, offset as offset2, shift, useFloating } from "@floating-ui/vue";
+import { UseFloatingOptions, MaybeElement, UseFloatingReturn, autoUpdate, flip, offset as offset2, shift, arrow, useFloating } from "@floating-ui/vue";
 import { unrefElement, useEventListener, } from "@vueuse/core";
 import { debounce } from "lodash";
 
@@ -15,6 +15,7 @@ function useTooltip(
     delay: number = 0,
     options: UseFloatingOptions | undefined = undefined,
     offset: number = 6,
+    arrowRef?: Readonly<Ref<MaybeElement<HTMLElement>>>,
 ): ReturnType {
 
     const show = ref(false);
@@ -36,15 +37,26 @@ function useTooltip(
 
     useEventListener(elementRef, 'mouseleave', () => {
         nextShow = false;
-        hideDebounce();
+
+        if (interactive) {
+            hideDebounce();
+        } else {
+            show.value = false;
+        }
     });
 
     useEventListener(floatingRef, 'mouseenter', () => {
         if (!interactive) {
             return;
         }
+
         nextShow = true;
-        showDebounce();
+
+        if (interactive) {
+            showDebounce();
+        } else {
+            show.value = true;
+        }
     });
 
     useEventListener(floatingRef, 'mouseleave', () => {
@@ -67,11 +79,17 @@ function useTooltip(
             return;
         }
         show.value = false;
-    }, interactive ? 0 : 150);
+    }, 0);
+
+    const middleware = [offset2(offset), flip(), shift()];
+
+    if (arrowRef) {
+        middleware.push(arrow({ element: arrowRef }));
+    }
 
     const config = {
         placement: 'top',
-        middleware: [offset2(offset), flip(), shift()],
+        middleware,
         whileElementsMounted: autoUpdate,
     };