@farm-investimentos/front-mfe-components 15.14.6 → 15.14.8

package/package.json

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

package/src/components/Tooltip/Tooltip.scss

@@ -36,8 +36,8 @@
 	font-size: 12px;
 	font-weight: 500;
 	padding: 16px;
-	position: fixed; /* SEMPRE fixed agora */
-	z-index: 10004; /* z-index alto para aparecer sobre modais (modal usa z-index 102, header/footer 103) */
+	position: fixed;
+	z-index: 10001;
 	transform: translateZ(0);
 	pointer-events: auto;
 
@@ -96,7 +96,7 @@
 	font-weight: 500;
 	padding: 16px;
 	position: fixed;
-	z-index: 10004; /* z-index alto para aparecer sobre modais (modal usa z-index 102, header/footer 103) */
+	z-index: 10001;
 	transform: translateZ(0);
 	pointer-events: auto;
 
@@ -138,13 +138,12 @@
 		color: #f5f5f5;
 	}
 
-	/* Seta presa ao tooltip */
 	.tooltip-arrow {
 		position: absolute;
 		width: 0;
 		height: 0;
 		border-style: solid;
-		z-index: 10005; /* z-index ainda maior para a seta */
+		z-index: inherit;
 		pointer-events: none;
 	}
 }

package/src/components/Tooltip/Tooltip.vue

@@ -96,6 +96,10 @@ export default defineComponent({
 			type: String,
 			default: undefined,
 		},
+		hideOnScroll: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	emits: ['input', 'show', 'hide'],
 	setup(props, { emit, slots }) {
@@ -104,6 +108,46 @@ export default defineComponent({
 		const tooltipRef = ref<HTMLElement | null>(null);
 		const scrollableElementsRef = ref<Element[] | null>(null);
 
+		const Z_INDEX_OFFSET = 1000;
+		const DEFAULT_Z_INDEX = 10001;
+
+		let modalCache: { modals: Element[]; timestamp: number } | null = null;
+
+		const getTooltipZIndex = () => {
+			const now = Date.now();
+			let modals: Element[];
+
+			if (modalCache && now - modalCache.timestamp < 500) {
+				modals = modalCache.modals;
+			} else {
+				modals = Array.from(document.querySelectorAll('.farm-modal'));
+				modalCache = { modals, timestamp: now };
+			}
+
+			let maxModalZIndex = 0;
+
+			modals.forEach(modal => {
+				const htmlModal = modal as HTMLElement;
+
+				let zIndex = parseInt(htmlModal.style.zIndex, 10);
+
+				if (Number.isNaN(zIndex)) {
+					const computedZIndex = window.getComputedStyle(htmlModal).zIndex;
+					if (computedZIndex === 'auto') {
+						zIndex = 0;
+					} else {
+						zIndex = parseInt(computedZIndex, 10) || 0;
+					}
+				}
+
+				if (zIndex > maxModalZIndex) {
+					maxModalZIndex = zIndex;
+				}
+			});
+
+			return maxModalZIndex > 0 ? maxModalZIndex + Z_INDEX_OFFSET : DEFAULT_Z_INDEX;
+		};
+
 		const isVisible = ref(false);
 
 		const isControlled = computed(() => props.value !== undefined);
@@ -136,7 +180,7 @@ export default defineComponent({
 		const tooltipStyles = computed(() => {
 			const styles: Record<string, string> = {
 				position: 'fixed',
-				zIndex: '9999',
+				zIndex: String(getTooltipZIndex()),
 			};
 
 			if (normalizedMaxWidth.value) {
@@ -158,7 +202,7 @@ export default defineComponent({
 				width: '0',
 				height: '0',
 				borderStyle: 'solid',
-				zIndex: '10000',
+				zIndex: 'inherit',
 			};
 
 			if (verticalPos === 'top') {
@@ -252,21 +296,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);
 			});
 		};