sprintify-ui 0.11.24 → 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.24",
+  "version": "0.11.25",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",

package/src/components/BaseTooltip.vue

@@ -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>
@@ -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);
@@ -80,9 +81,15 @@ function useTooltip(
         show.value = false;
     }, 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,
     };