@farm-investimentos/front-mfe-components 15.14.7 → 15.14.9

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "15.14.7",
+	"version": "15.14.9",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",

package/src/components/Tooltip/Tooltip.vue

@@ -3,14 +3,13 @@
 		<div
 			ref="activatorRef"
 			class="tooltip-activator"
-			@mouseover="show"
-			@mouseout="hide"
-			@mouseleave="hide"
+			@mouseenter="onActivatorEnter"
+			@mouseleave="onActivatorLeave"
 		>
 			<slot name="activator" />
 		</div>
 
-		<div v-if="isVisible" ref="tooltipRef" :class="tooltipClasses" :style="tooltipStyles">
+		<div v-if="isVisible" ref="tooltipRef" :class="tooltipClasses" :style="tooltipStyles" @mouseenter="onTooltipEnter" @mouseleave="onTooltipLeave">
 			<div v-if="hasTitle || showCloseButton" class="tooltip-header">
 				<div v-if="hasTitle" class="tooltip-title">
 					<slot name="title" />
@@ -96,12 +95,22 @@ export default defineComponent({
 			type: String,
 			default: undefined,
 		},
+		anchorTo: {
+			type: String as PropType<'auto' | 'viewport' | 'modal'>,
+			default: 'auto',
+		},
+		hideOnScroll: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	emits: ['input', 'show', 'hide'],
 	setup(props, { emit, slots }) {
 		const containerRef = ref<HTMLElement | null>(null);
 		const activatorRef = ref<HTMLElement | null>(null);
 		const tooltipRef = ref<HTMLElement | null>(null);
+		const anchorElRef = ref<HTMLElement | null>(null);
+		const anchoredToModal = ref(false);
 		const scrollableElementsRef = ref<Element[] | null>(null);
 
 		const Z_INDEX_OFFSET = 1000;
@@ -157,6 +166,12 @@ export default defineComponent({
 			return props.placement;
 		});
 
+		// Placement realmente utilizado (pode sofrer flip em runtime)
+		const currentPlacement = ref(normalizedPlacement.value);
+		watch(normalizedPlacement, (val) => {
+			currentPlacement.value = val;
+		});
+
 		const normalizedMaxWidth = computed(() => {
 			if (props.fluid) {
 				return '300px';
@@ -170,12 +185,12 @@ export default defineComponent({
 			[`tooltip-popup--${props.variant}`]: true,
 			[`tooltip-popup--${props.size}`]: true,
 			'tooltip-popup--has-title': hasTitle.value,
-			[`tooltip-popup--${normalizedPlacement.value}`]: true,
+			[`tooltip-popup--${currentPlacement.value}`]: true,
 		}));
 
 		const tooltipStyles = computed(() => {
 			const styles: Record<string, string> = {
-				position: 'fixed',
+				position: anchoredToModal.value ? 'absolute' : 'fixed',
 				zIndex: String(getTooltipZIndex()),
 			};
 
@@ -191,7 +206,7 @@ export default defineComponent({
 		});
 
 		const arrowStyles = computed(() => {
-			const [verticalPos, horizontalAlign] = normalizedPlacement.value.split('-');
+			const [verticalPos, horizontalAlign] = currentPlacement.value.split('-');
 
 			const styles: Record<string, string> = {
 				position: 'absolute',
@@ -231,14 +246,29 @@ export default defineComponent({
 
 			nextTick(() => {
 				if (tooltipRef.value && activatorRef.value) {
-					moveToBody(tooltipRef.value);
+					// Resolver onde ancorar o tooltip
+					let anchorEl: HTMLElement | null = null;
+					if (props.anchorTo === 'viewport') {
+						anchorEl = document.body;
+					} else if (props.anchorTo === 'modal' || props.anchorTo === 'auto') {
+						const modalEl = activatorRef.value.closest('.farm-modal') as HTMLElement | null;
+						anchorEl = modalEl || document.body;
+					}
+
+					anchorElRef.value = anchorEl;
+					anchoredToModal.value = !!anchorEl && anchorEl !== document.body;
+					if (anchoredToModal.value && anchorElRef.value && tooltipRef.value) {
+						anchorElRef.value.appendChild(tooltipRef.value);
+					} else {
+						moveToBody(tooltipRef.value);
+					}
 					updatePosition();
 					addScrollListener();
 				}
 			});
 		};
 
-		const hide = () => {
+    const hide = () => {
 			if (props.disabled || isControlled.value) return;
 
 			isVisible.value = false;
@@ -246,6 +276,38 @@ export default defineComponent({
 			removeScrollListener();
 		};
 
+    // Hover management to avoid flicker when moving from activator to tooltip
+    let hoverInside = false;
+    let hideTimeout: number | null = null;
+
+    const clearHideTimeout = () => {
+      if (hideTimeout) {
+        window.clearTimeout(hideTimeout);
+        hideTimeout = null;
+      }
+    };
+
+    const onActivatorEnter = () => {
+      clearHideTimeout();
+      show();
+    };
+
+    const onActivatorLeave = () => {
+      hideTimeout = window.setTimeout(() => {
+        if (!hoverInside) hide();
+      }, (Array.isArray(props.delay) ? (props.delay[1] || 50) : 50) as number);
+    };
+
+    const onTooltipEnter = () => {
+      hoverInside = true;
+      clearHideTimeout();
+    };
+
+    const onTooltipLeave = () => {
+      hoverInside = false;
+      hide();
+    };
+
 		const close = () => {
 			if (isControlled.value) {
 				emit('input', false);
@@ -274,12 +336,25 @@ export default defineComponent({
 			const position = calculateTooltipPosition(
 				activatorRect,
 				tooltipRect,
-				normalizedPlacement.value,
+				currentPlacement.value,
 				props.offset
 			);
 
-			tooltipRef.value.style.left = `${position.left}px`;
-			tooltipRef.value.style.top = `${position.top}px`;
+			// Atualiza placement efetivo (com flip) para setinha/classes
+			currentPlacement.value = position.placementUsed as TooltipPlacement;
+
+			if (anchoredToModal.value && anchorElRef.value) {
+				const containerRect = anchorElRef.value.getBoundingClientRect();
+				const scrollLeft = anchorElRef.value.scrollLeft || 0;
+				const scrollTop = anchorElRef.value.scrollTop || 0;
+				const left = position.left - containerRect.left + scrollLeft;
+				const top = position.top - containerRect.top + scrollTop;
+				tooltipRef.value.style.left = `${left}px`;
+				tooltipRef.value.style.top = `${top}px`;
+			} else {
+				tooltipRef.value.style.left = `${position.left}px`;
+				tooltipRef.value.style.top = `${position.top}px`;
+			}
 		};
 
 		const getScrollableElements = () => {
@@ -292,21 +367,36 @@ export default defineComponent({
 			return scrollableElementsRef.value;
 		};
 
+
+		const onAnyScroll = () => {
+			if (props.disabled || isControlled.value) return;
+			if (props.hideOnScroll) {
+				hide();
+				return;
+			}
+			updatePosition();
+		};
+
 		const addScrollListener = () => {
-			window.addEventListener('scroll', updatePosition, { passive: true });
+			window.addEventListener('scroll', onAnyScroll, { passive: true });
+			// Opcionalmente também reagir a wheel/touchmove para UX mais fluida
+			window.addEventListener('wheel', onAnyScroll, { passive: true });
+			window.addEventListener('touchmove', onAnyScroll, { passive: true });
 
 			const scrollableElements = getScrollableElements();
 			scrollableElements.forEach(element => {
-				element.addEventListener('scroll', updatePosition, { passive: true });
+				element.addEventListener('scroll', onAnyScroll, { passive: true });
 			});
 		};
 
 		const removeScrollListener = () => {
-			window.removeEventListener('scroll', updatePosition);
+			window.removeEventListener('scroll', onAnyScroll);
+			window.removeEventListener('wheel', onAnyScroll);
+			window.removeEventListener('touchmove', onAnyScroll);
 
 			const scrollableElements = getScrollableElements();
 			scrollableElements.forEach(element => {
-				element.removeEventListener('scroll', updatePosition);
+				element.removeEventListener('scroll', onAnyScroll);
 			});
 		};
 
@@ -353,8 +443,12 @@ export default defineComponent({
 			tooltipClasses,
 			tooltipStyles,
 			arrowStyles,
-			show,
-			hide,
+        show,
+        hide,
+        onActivatorEnter,
+        onActivatorLeave,
+        onTooltipEnter,
+        onTooltipLeave,
 			close,
 		};
 	},

package/src/components/Tooltip/utils/tooltip.utils.ts

@@ -1,6 +1,7 @@
 export interface TooltipPosition {
-	left: number;
-	top: number;
+    left: number;
+    top: number;
+    placementUsed: string; // ex.: 'top-left', 'bottom-center'
 }
 
 export interface TooltipRect {
@@ -20,16 +21,19 @@ export function calculateTooltipPosition(
 	placement: string,
 	offset: number = 8
 ): TooltipPosition {
-	const [verticalPos, horizontalAlign] = placement.split('-');
+    const parts = placement.split('-');
+    let verticalPos = parts[0];
+    const horizontalAlign = parts[1];
 
 	let left = 0;
 	let top = 0;
 
-	if (verticalPos === 'top') {
-		top = activatorRect.top - tooltipRect.height - offset;
-	} else {
-		top = activatorRect.bottom + offset;
-	}
+    const computeTop = (vert: string) =>
+        vert === 'top'
+            ? activatorRect.top - tooltipRect.height - offset
+            : activatorRect.bottom + offset;
+
+    top = computeTop(verticalPos);
 
 	switch (horizontalAlign) {
 		case 'left':
@@ -45,16 +49,26 @@ export function calculateTooltipPosition(
 			break;
 	}
 
-	if (left < offset) left = offset;
-	if (left + tooltipRect.width > window.innerWidth - offset) {
-		left = window.innerWidth - tooltipRect.width - offset;
-	}
-	if (top < offset) top = offset;
-	if (top + tooltipRect.height > window.innerHeight - offset) {
-		top = window.innerHeight - tooltipRect.height - offset;
-	}
+    // Flip vertical if not enough space
+    const tooHigh = top < offset;
+    const tooLow = top + tooltipRect.height > window.innerHeight - offset;
+    if ((verticalPos === 'top' && tooHigh) || (verticalPos === 'bottom' && tooLow)) {
+        verticalPos = verticalPos === 'top' ? 'bottom' : 'top';
+        top = computeTop(verticalPos);
+    }
+
+    // Clamp within viewport horizontally and vertically
+    if (left < offset) left = offset;
+    if (left + tooltipRect.width > window.innerWidth - offset) {
+        left = window.innerWidth - tooltipRect.width - offset;
+    }
+    if (top < offset) top = offset;
+    if (top + tooltipRect.height > window.innerHeight - offset) {
+        top = window.innerHeight - tooltipRect.height - offset;
+    }
 
-	return { left, top };
+    const placementUsed = `${verticalPos}-${horizontalAlign || 'center'}`;
+    return { left, top, placementUsed };
 }
 
 export function moveToBody(element: HTMLElement): void {