@farm-investimentos/front-mfe-components 15.14.2 → 15.14.4

package/package.json

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

package/src/components/Tooltip/Tooltip.vue

@@ -28,7 +28,9 @@
 				<div class="farm-tooltip__title">
 					<slot name="title"></slot>
 				</div>
-				<span v-if="externalControl" class="farm-tooltip__close" @click="onClose">×</span>
+				<span v-if="externalControl" class="farm-tooltip__close" @click="onClose">×
+					
+				</span>
 			</div>
 			<div class="farm-tooltip__content">
 				<slot />
@@ -103,6 +105,9 @@ export default defineComponent({
 		const hasTitle = computed(() => !!slots.title);
 
 		let hasBeenBoostrapped = false;
+		let scrollListener = null;
+		let isInsideModal = false;
+		let modalScrollElements = [];
 
 		const calculatePosition = () => {
 			const parentBoundingClientRect = parent.value.getBoundingClientRect();
@@ -117,50 +122,87 @@ export default defineComponent({
 			let left = 0;
 			let top = 0;
 
-			if (!props.position) {
-				left =
-					parentBoundingClientRect.left +
-					window.scrollX +
-					activatorWidth / 2 -
-					popupWidth / 2;
+			// Se estiver dentro de um modal, usar coordenadas da viewport (position fixed)
+			if (isInsideModal) {
+				if (!props.position) {
+					left = activatorBoundingClientRect.left + activatorWidth / 2 - popupWidth / 2;
+					top = activatorBoundingClientRect.top - popupHeight - 8;
+				} else {
+					const [verticalPosition, horizontalAlignment] = props.position.split('-');
 
-				top = parentBoundingClientRect.top + window.scrollY - popupHeight - 8;
-			} else {
-				const [verticalPosition, horizontalAlignment] = props.position.split('-');
-
-				switch (horizontalAlignment) {
-					case 'left':
-						left = parentBoundingClientRect.left + window.scrollX - 8;
-						break;
-					case 'right':
-						left =
-							parentBoundingClientRect.left +
-							window.scrollX +
-							activatorWidth -
-							popupWidth +
-							8;
-						break;
-					case 'center':
-					default:
-						left =
-							parentBoundingClientRect.left +
-							window.scrollX +
-							activatorWidth / 2 -
-							popupWidth / 2;
-						break;
+					switch (horizontalAlignment) {
+						case 'left':
+							left = activatorBoundingClientRect.left - 8;
+							break;
+						case 'right':
+							left = activatorBoundingClientRect.left + activatorWidth - popupWidth + 8;
+							break;
+						case 'center':
+						default:
+							left = activatorBoundingClientRect.left + activatorWidth / 2 - popupWidth / 2;
+							break;
+					}
+
+					if (verticalPosition === 'top') {
+						top = activatorBoundingClientRect.top - popupHeight - 8;
+					} else {
+						top = activatorBoundingClientRect.top + activatorHeight + 8;
+					}
+				}
+
+				// Ajustar para não sair da viewport
+				if (left < 5) {
+					left = 5;
+				} else if (left + popupWidth > window.innerWidth - 5) {
+					left = window.innerWidth - popupWidth - 5;
 				}
+			} else {
+				// Comportamento original para tooltips fora de modais
+				if (!props.position) {
+					left =
+						parentBoundingClientRect.left +
+						window.scrollX +
+						activatorWidth / 2 -
+						popupWidth / 2;
 
-				if (verticalPosition === 'top') {
 					top = parentBoundingClientRect.top + window.scrollY - popupHeight - 8;
 				} else {
-					top = parentBoundingClientRect.top + window.scrollY + activatorHeight + 8;
+					const [verticalPosition, horizontalAlignment] = props.position.split('-');
+
+					switch (horizontalAlignment) {
+						case 'left':
+							left = parentBoundingClientRect.left + window.scrollX - 8;
+							break;
+						case 'right':
+							left =
+								parentBoundingClientRect.left +
+								window.scrollX +
+								activatorWidth -
+								popupWidth +
+								8;
+							break;
+						case 'center':
+						default:
+							left =
+								parentBoundingClientRect.left +
+								window.scrollX +
+								activatorWidth / 2 -
+								popupWidth / 2;
+							break;
+					}
+
+					if (verticalPosition === 'top') {
+						top = parentBoundingClientRect.top + window.scrollY - popupHeight - 8;
+					} else {
+						top = parentBoundingClientRect.top + window.scrollY + activatorHeight + 8;
+					}
 				}
-			}
 
-			if (left < window.scrollX) {
-				left = window.scrollX + 5;
-			} else if (left + popupWidth > window.innerWidth + window.scrollX) {
-				left = window.innerWidth + window.scrollX - popupWidth - 5;
+				if (left < window.scrollX) {
+					left = window.scrollX + 5;
+				} else if (left + popupWidth > window.innerWidth + window.scrollX) {
+					left = window.innerWidth + window.scrollX - popupWidth - 5;
+				}
 			}
 
 			return { left, top };
@@ -177,8 +219,62 @@ export default defineComponent({
 
 			if (!hasBeenBoostrapped) {
 				document.querySelector('body').appendChild(popup.value);
+				
+				// Detectar se está dentro de um modal
+				isInsideModal = !!parent.value.closest('.farm-modal');
+				
+				if (isInsideModal) {
+					// Usar position fixed para tooltips dentro de modais
+					popup.value.style.position = 'fixed';
+					// Adicionar listener de scroll para recalcular posição
+					scrollListener = () => {
+						const { left, top } = calculatePosition();
+						styles.left = `${left}px`;
+						styles.top = `${top}px`;
+					};
+					
+					// Escutar scroll da window E do modal
+					window.addEventListener('scroll', scrollListener, true);
+					
+					// Encontrar o modal e escutar seu scroll interno também
+					const modalElement = parent.value.closest('.farm-modal');
+					if (modalElement) {
+						// Função para detectar elementos scrolláveis
+						const isScrollable = (element) => {
+							const style = window.getComputedStyle(element);
+							return (
+								style.overflow === 'auto' ||
+								style.overflow === 'scroll' ||
+								style.overflowY === 'auto' ||
+								style.overflowY === 'scroll' ||
+								style.overflowX === 'auto' ||
+								style.overflowX === 'scroll'
+							);
+						};
+						
+						// Buscar todos os elementos dentro do modal
+						const allElements = modalElement.querySelectorAll('*');
+						const scrollableElements = Array.from(allElements).filter(isScrollable);
+						
+						// Adicionar elementos específicos do modal que podem ter scroll
+						const modalSpecificElements = modalElement.querySelectorAll(
+							'.farm-modal--content, .farm-modal--content > div, [data-simplebar], .simplebar-content-wrapper'
+						);
+						
+						// Combinar e remover duplicatas
+						const elementsToWatch = [...new Set([...scrollableElements, ...modalSpecificElements, modalElement])];
+						
+						elementsToWatch.forEach(element => {
+							element.addEventListener('scroll', scrollListener, true);
+							modalScrollElements.push(element);
+						});
+					}
+				} else {
+					// Comportamento original para tooltips fora de modais
+					popup.value.style.position = 'absolute';
+				}
+				
 				const { left, top } = calculatePosition();
-
 				styles.left = `${left}px`;
 				styles.top = `${top}px`;
 				styles.zIndex = calculateMainZindex();
@@ -202,6 +298,20 @@ export default defineComponent({
 				// Se não está no parent, agenda o hide com um pequeno delay para evitar flickering
 				hideTimeout = window.setTimeout(() => {
 					showOver.value = false;
+					
+					// Remover listeners de scroll quando tooltip for escondido
+					if (scrollListener) {
+						window.removeEventListener('scroll', scrollListener, true);
+						
+						// Remover listeners dos elementos de scroll do modal
+						modalScrollElements.forEach(element => {
+							element.removeEventListener('scroll', scrollListener, true);
+						});
+						modalScrollElements = [];
+						
+						scrollListener = null;
+					}
+					
 					hideTimeout = null;
 				}, 50);
 			}
@@ -221,6 +331,19 @@ export default defineComponent({
 				hideTimeout = null;
 			}
 
+			// Limpar listeners de scroll se existirem
+			if (scrollListener) {
+				window.removeEventListener('scroll', scrollListener, true);
+				
+				// Remover listeners dos elementos de scroll do modal
+				modalScrollElements.forEach(element => {
+					element.removeEventListener('scroll', scrollListener, true);
+				});
+				modalScrollElements = [];
+				
+				scrollListener = null;
+			}
+
 			if (hasBeenBoostrapped) {
 				document.querySelector('body').removeChild(popup.value);
 			}