@farm-investimentos/front-mfe-components 15.14.3 → 15.14.5

package/src/components/Tooltip/Tooltip.vue

@@ -1,77 +1,58 @@
 <template>
-	<span :class="{ 'farm-tooltip': true }" ref="parent">
-		<span
-			class="farm-tooltip__activator"
-			ref="activator"
-			@mouseover="onOver"
-			@mouseout="onOut"
-			@mouseleave="onOut"
+	<div class="tooltip-container" ref="containerRef">
+		<div
+			ref="activatorRef"
+			class="tooltip-activator"
+			@mouseover="show"
+			@mouseout="hide"
+			@mouseleave="hide"
 		>
 			<slot name="activator" />
-		</span>
-
-		<span
-			ref="popup"
-			:class="{
-				'farm-tooltip__popup': true,
-				'farm-tooltip__popup--visible':
-					(!externalControl && showOver) || (externalControl && toggleComponent),
-				'farm-tooltip__popup--fluid': fluid,
-				[`farm-tooltip__popup--${position}`]: position,
-				'farm-tooltip__popup--has-title': hasTitle,
-			}"
-			:style="styles"
-			@mouseout="onOut"
-			@mouseleave="onOut"
-		>
-			<div v-if="hasTitle" class="farm-tooltip__header">
-				<div class="farm-tooltip__title">
-					<slot name="title"></slot>
+		</div>
+
+		<div v-if="isVisible" ref="tooltipRef" :class="tooltipClasses" :style="tooltipStyles">
+			<div v-if="hasTitle || showCloseButton" class="tooltip-header">
+				<div v-if="hasTitle" class="tooltip-title">
+					<slot name="title" />
 				</div>
-				<span v-if="externalControl" class="farm-tooltip__close" @click="onClose">×</span>
+				<span v-if="showCloseButton" class="tooltip-close" @click="close">×</span>
 			</div>
-			<div class="farm-tooltip__content">
+
+			<div class="tooltip-content">
 				<slot />
 			</div>
-			<span v-if="hasPosition" class="farm-tooltip__arrow"></span>
-		</span>
-	</span>
+
+			<div class="tooltip-arrow" :style="arrowStyles"></div>
+		</div>
+	</div>
 </template>
+
 <script lang="ts">
-import { PropType, ref, computed, reactive, onBeforeUnmount, defineComponent, useSlots } from 'vue';
-import { calculateMainZindex } from '../../helpers';
+import { defineComponent, ref, computed, PropType, onBeforeUnmount, nextTick, watch } from 'vue';
+import {
+	TooltipPlacement,
+	TooltipTrigger,
+	TooltipVariant,
+	TooltipSize,
+} from './types/tooltip.types';
+import { calculateTooltipPosition, moveToBody, moveToContainer } from './utils/tooltip.utils';
 
-export type TooltipPosition =
-	| 'top-left'
-	| 'top-center'
-	| 'top-right'
-	| 'bottom-left'
-	| 'bottom-center'
-	| 'bottom-right';
+const ARROW_OFFSET = 18;
 
 export default defineComponent({
 	name: 'farm-tooltip',
 	props: {
-		/**
-		 * Control visibility with v-model
-		 */
 		value: {
 			type: Boolean,
 			default: undefined,
 		},
-		/**
-		 * Fluid width (grows based on content)
-		 */
-		fluid: {
-			type: Boolean,
-			default: false,
+		trigger: {
+			type: String as PropType<TooltipTrigger>,
+			default: 'hover',
 		},
-		/**
-		 * Position of the tooltip relative to the activator
-		 */
-		position: {
-			type: String as PropType<TooltipPosition>,
-			default: undefined,
+		placement: {
+			type: String as PropType<TooltipPlacement>,
+			default: 'top-center',
 			validator: (value: string) => {
 				return [
 					'top-left',
@@ -83,237 +64,272 @@ export default defineComponent({
 				].includes(value);
 			},
 		},
+		offset: {
+			type: Number,
+			default: 8,
+		},
+		variant: {
+			type: String as PropType<TooltipVariant>,
+			default: 'dark',
+		},
+		size: {
+			type: String as PropType<TooltipSize>,
+			default: 'md',
+		},
+		maxWidth: {
+			type: [String, Number],
+			default: undefined,
+		},
+		delay: {
+			type: [Number, Array],
+			default: () => [100, 50],
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		fluid: {
+			type: Boolean,
+			default: false,
+		},
+		position: {
+			type: String,
+			default: undefined,
+		},
 	},
-	setup(props, { emit }) {
-		const parent = ref(null);
-		const popup = ref(null);
-		const activator = ref(null);
-		const showOver = ref(false);
-		const styles = reactive({
-			left: '0',
-			top: '0',
-			zIndex: 1,
-		});
-		const slots = useSlots();
-		let hideTimeout: number | null = null;
+	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 scrollableElementsRef = ref<Element[] | null>(null);
 
-		const toggleComponent = computed(() => props.value);
-		const externalControl = computed(() => props.value !== undefined);
-		const hasPosition = computed(() => !!props.position);
+		const isVisible = ref(false);
+
+		const isControlled = computed(() => props.value !== undefined);
 		const hasTitle = computed(() => !!slots.title);
+		const showCloseButton = computed(() => isControlled.value && hasTitle.value);
 
-		let hasBeenBoostrapped = false;
-		let scrollListener = null;
-		let isInsideModal = false;
-
-		const calculatePosition = () => {
-			const parentBoundingClientRect = parent.value.getBoundingClientRect();
-			const activatorBoundingClientRect = activator.value.getBoundingClientRect();
-			const popupBoundingClientRect = popup.value.getBoundingClientRect();
-
-			const activatorWidth = activatorBoundingClientRect.width;
-			const activatorHeight = activatorBoundingClientRect.height;
-			const popupWidth = popupBoundingClientRect.width;
-			const popupHeight = popupBoundingClientRect.height;
-
-			let left = 0;
-			let top = 0;
-
-			// 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('-');
-
-					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;
-					}
+		const normalizedPlacement = computed(() => {
+			if (props.position) {
+				return props.position as TooltipPlacement;
+			}
+			return props.placement;
+		});
 
-					if (verticalPosition === 'top') {
-						top = activatorBoundingClientRect.top - popupHeight - 8;
-					} else {
-						top = activatorBoundingClientRect.top + activatorHeight + 8;
-					}
-				}
+		const normalizedMaxWidth = computed(() => {
+			if (props.fluid) {
+				return '300px';
+			}
+			return props.maxWidth;
+		});
 
-				// 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;
-
-					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;
-					}
+		const tooltipClasses = computed(() => ({
+			'tooltip-popup': true,
+			'tooltip-popup--visible': isVisible.value,
+			[`tooltip-popup--${props.variant}`]: true,
+			[`tooltip-popup--${props.size}`]: true,
+			'tooltip-popup--has-title': hasTitle.value,
+			[`tooltip-popup--${normalizedPlacement.value}`]: true,
+		}));
 
-					if (verticalPosition === 'top') {
-						top = parentBoundingClientRect.top + window.scrollY - popupHeight - 8;
-					} else {
-						top = parentBoundingClientRect.top + window.scrollY + activatorHeight + 8;
-					}
-				}
+		const tooltipStyles = computed(() => {
+			const styles: Record<string, string> = {
+				position: 'fixed',
+				zIndex: '9999',
+			};
 
-				if (left < window.scrollX) {
-					left = window.scrollX + 5;
-				} else if (left + popupWidth > window.innerWidth + window.scrollX) {
-					left = window.innerWidth + window.scrollX - popupWidth - 5;
-				}
+			if (normalizedMaxWidth.value) {
+				styles.maxWidth =
+					typeof normalizedMaxWidth.value === 'number'
+						? `${normalizedMaxWidth.value}px`
+						: normalizedMaxWidth.value;
+				styles.width = 'auto';
 			}
 
-			return { left, top };
-		};
+			return styles;
+		});
 
-		const onOver = () => {
-			// Limpa qualquer timeout de hide
-			if (hideTimeout) {
-				clearTimeout(hideTimeout);
-				hideTimeout = null;
+		const arrowStyles = computed(() => {
+			const [verticalPos, horizontalAlign] = normalizedPlacement.value.split('-');
+
+			const styles: Record<string, string> = {
+				position: 'absolute',
+				width: '0',
+				height: '0',
+				borderStyle: 'solid',
+				zIndex: '10000',
+			};
+
+			if (verticalPos === 'top') {
+				styles.bottom = '-6px';
+				styles.borderWidth = '6px 6px 0 6px';
+				styles.borderColor = '#333333 transparent transparent transparent';
+			} else {
+				styles.top = '-6px';
+				styles.borderWidth = '0 6px 6px 6px';
+				styles.borderColor = 'transparent transparent #333333 transparent';
 			}
 
-			showOver.value = true;
-
-			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`;
-					};
-					window.addEventListener('scroll', scrollListener, true);
-				} else {
-					// Comportamento original para tooltips fora de modais
-					popup.value.style.position = 'absolute';
+			if (horizontalAlign === 'left') {
+				styles.left = `${ARROW_OFFSET}px`;
+			} else if (horizontalAlign === 'right') {
+				styles.right = `${ARROW_OFFSET}px`;
+			} else {
+				styles.left = '50%';
+				styles.transform = 'translateX(-50%)';
+			}
+
+			return styles;
+		});
+
+		const show = () => {
+			if (props.disabled || isControlled.value) return;
+
+			isVisible.value = true;
+			emit('show');
+
+			nextTick(() => {
+				if (tooltipRef.value && activatorRef.value) {
+					moveToBody(tooltipRef.value);
+					updatePosition();
+					addScrollListener();
 				}
-				
-				const { left, top } = calculatePosition();
-				styles.left = `${left}px`;
-				styles.top = `${top}px`;
-				styles.zIndex = calculateMainZindex();
+			});
+		};
 
-				hasBeenBoostrapped = true;
-			}
+		const hide = () => {
+			if (props.disabled || isControlled.value) return;
+
+			isVisible.value = false;
+			emit('hide');
+			removeScrollListener();
 		};
 
-		const onOut = (event: MouseEvent) => {
-			// Limpa qualquer timeout anterior
-			if (hideTimeout) {
-				clearTimeout(hideTimeout);
-				hideTimeout = null;
+		const close = () => {
+			if (isControlled.value) {
+				emit('input', false);
+			} else {
+				hide();
 			}
+		};
 
-			// Verifica se o relatedTarget está contido no parent
-			const isRelatedTargetInParent =
-				event.relatedTarget && parent.value.contains(event.relatedTarget);
-
-			if (!isRelatedTargetInParent) {
-				// Se não está no parent, agenda o hide com um pequeno delay para evitar flickering
-				hideTimeout = window.setTimeout(() => {
-					showOver.value = false;
-					
-					// Remover listener de scroll quando tooltip for escondido
-					if (scrollListener) {
-						window.removeEventListener('scroll', scrollListener, true);
-						scrollListener = null;
-					}
-					
-					hideTimeout = null;
-				}, 50);
+		const updatePosition = () => {
+			if (!activatorRef.value || !tooltipRef.value) return;
+
+			const activatorRect = activatorRef.value.getBoundingClientRect();
+			const tooltipRect = tooltipRef.value.getBoundingClientRect();
+
+			const isActivatorVisible =
+				activatorRect.top < window.innerHeight &&
+				activatorRect.bottom > 0 &&
+				activatorRect.left < window.innerWidth &&
+				activatorRect.right > 0;
+
+			if (!isActivatorVisible && isVisible.value && !isControlled.value) {
+				hide();
+				return;
 			}
+
+			const position = calculateTooltipPosition(
+				activatorRect,
+				tooltipRect,
+				normalizedPlacement.value,
+				props.offset
+			);
+
+			tooltipRef.value.style.left = `${position.left}px`;
+			tooltipRef.value.style.top = `${position.top}px`;
 		};
 
-		const onClose = () => {
-			showOver.value = false;
-			if (externalControl.value) {
-				emit('input', false);
+		const getScrollableElements = () => {
+			if (!scrollableElementsRef.value) {
+				const nodeList = document.querySelectorAll(
+					'.farm-modal, .modal-content, [style*="overflow-y: auto"], [style*="overflow-y: scroll"]'
+				);
+				scrollableElementsRef.value = Array.from(nodeList);
 			}
+			return scrollableElementsRef.value;
 		};
 
-		onBeforeUnmount(() => {
-			// Limpa o timeout se existir
-			if (hideTimeout) {
-				clearTimeout(hideTimeout);
-				hideTimeout = null;
-			}
+		const addScrollListener = () => {
+			window.addEventListener('scroll', updatePosition, { passive: true });
+
+			const scrollableElements = getScrollableElements();
+			scrollableElements.forEach(element => {
+				element.addEventListener('scroll', updatePosition, { passive: true });
+			});
+		};
+
+		const removeScrollListener = () => {
+			window.removeEventListener('scroll', updatePosition);
 
-			// Limpar listener de scroll se existir
-			if (scrollListener) {
-				window.removeEventListener('scroll', scrollListener, true);
-				scrollListener = null;
+			const scrollableElements = getScrollableElements();
+			scrollableElements.forEach(element => {
+				element.removeEventListener('scroll', updatePosition);
+			});
+		};
+
+		if (isControlled.value) {
+			isVisible.value = props.value || false;
+		}
+
+		watch(
+			() => props.value,
+			newValue => {
+				if (isControlled.value) {
+					isVisible.value = newValue || false;
+
+					if (isVisible.value) {
+						nextTick(() => {
+							if (tooltipRef.value) {
+								moveToBody(tooltipRef.value);
+								updatePosition();
+								addScrollListener();
+							}
+						});
+					} else {
+						removeScrollListener();
+					}
+				}
 			}
+		);
 
-			if (hasBeenBoostrapped) {
-				document.querySelector('body').removeChild(popup.value);
+		onBeforeUnmount(() => {
+			if (tooltipRef.value && containerRef.value) {
+				moveToContainer(tooltipRef.value, containerRef.value);
 			}
+			removeScrollListener();
 		});
 
 		return {
-			parent,
-			popup,
-			activator,
-			showOver,
-			toggleComponent,
-			externalControl,
-			hasPosition,
+			containerRef,
+			activatorRef,
+			tooltipRef,
+			isVisible,
+			isControlled,
 			hasTitle,
-			styles,
-			onOver,
-			onOut,
-			onClose,
+			showCloseButton,
+			tooltipClasses,
+			tooltipStyles,
+			arrowStyles,
+			show,
+			hide,
+			close,
 		};
 	},
 });
 </script>
 
 <style lang="scss" scoped>
-@import './Tooltip';
+@import './Tooltip.scss';
+
+.tooltip-container {
+	display: inline-block;
+	position: relative;
+}
+
+.tooltip-activator {
+	display: inline-block;
+}
 </style>