@farm-investimentos/front-mfe-components-vue3 1.3.0 → 1.4.0

package/src/components/Tooltip/Tooltip.vue

@@ -1,134 +1,419 @@
 <template>
-	<span
-		:class="{ 'farm-tooltip': true }"
-		ref="parent"
+	<div
+		class="tooltip-container"
+		ref="containerRef"
 	>
-		<span
-			class="farm-tooltip__activator"
-			ref="activator"
-			@mouseover="onOver"
-			@mouseout="onOut"
+		<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--' + color]: true,
-				'farm-tooltip__popup--visible':
-					(!externalControl && showOver) || (externalControl && toggleComponent),
-			}"
-			:style="styles"
-			@mouseout="onOut"
+		</div>
+
+		<div
+			v-if="isVisible"
+			ref="tooltipRef"
+			:class="tooltipClasses"
+			:style="tooltipStyles"
 		>
-			<slot />
-		</span>
-	</span>
+			<div
+				v-if="hasTitle || showCloseButton"
+				class="tooltip-header"
+			>
+				<div
+					v-if="hasTitle"
+					class="tooltip-title"
+				>
+					<slot name="title" />
+				</div>
+				<span
+					v-if="showCloseButton"
+					class="tooltip-close"
+					@click="close"
+					>×</span
+				>
+			</div>
+
+			<div class="tooltip-content">
+				<slot />
+			</div>
+
+			<div
+				class="tooltip-arrow"
+				:style="arrowStyles"
+			></div>
+		</div>
+	</div>
 </template>
-<script lang="ts">
-import { PropType, ref, computed, reactive, onBeforeUnmount } from 'vue';
-
-import { calculateMainZindex } from '../../helpers';
-
-export default {
-	name: 'farm-tooltip',
-	props: {
-		/*
-		 * Tooltip color
-		 */
-		color: {
-			type: String as PropType<
-				| 'primary'
-				| 'secondary'
-				| 'secondary-green'
-				| 'secondary-golden'
-				| 'neutral'
-				| 'info'
-				| 'success'
-				| 'error'
-				| 'warning'
-				| 'extra-1'
-				| 'extra-2'
-				| 'gray'
-			>,
-			default: 'gray',
-		},
-		/**
-		 * Control visibility
-		 * v-model bind
-		 */
-		modelValue: {
-			type: Boolean,
-			default: undefined,
-		},
-	},
-	setup(props) {
-		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 toggleComponent = computed(() => props.modelValue);
-		const externalControl = computed(() => props.modelValue !== undefined);
-
-		let hasBeenBoostrapped = false;
-
-		const onOver = () => {
-			showOver.value = true;
-
-			if (!hasBeenBoostrapped) {
-				document.querySelector('body').appendChild(popup.value);
-				const parentBoundingClientRect = parent.value.getBoundingClientRect();
-				const activatorBoundingClientRect = activator.value.getBoundingClientRect();
-				const popupBoundingClientRect = popup.value.getBoundingClientRect();
-
-				styles.left =
-					parentBoundingClientRect.left +
-					window.scrollX -
-					(80 - activatorBoundingClientRect.width / 2) +
-					'px';
-				styles.top =
-					parentBoundingClientRect.top +
-					window.scrollY -
-					(popupBoundingClientRect.height + 8) +
-					'px';
-				styles.zIndex = calculateMainZindex();
-
-				hasBeenBoostrapped = true;
-			}
-		};
-		const onOut = (event: MouseEvent) => {
-			showOver.value = parent.value.contains(event.relatedTarget);
-		};
-
-		onBeforeUnmount(() => {
-			if (hasBeenBoostrapped) {
-				document.querySelector('body').removeChild(popup.value);
+
+<script setup lang="ts">
+import { ref, computed, onBeforeUnmount, nextTick, watch, useSlots } from 'vue';
+
+export interface TooltipProps {
+	modelValue?: boolean;
+	trigger?: 'hover' | 'click' | 'manual';
+	placement?:
+		| 'top-left'
+		| 'top-center'
+		| 'top-right'
+		| 'bottom-left'
+		| 'bottom-center'
+		| 'bottom-right';
+	offset?: number;
+	variant?: 'dark' | 'light';
+	size?: 'sm' | 'md' | 'lg';
+	maxWidth?: string | number;
+	delay?: number | [number, number];
+	disabled?: boolean;
+	fluid?: boolean;
+	position?: string;
+}
+
+const props = withDefaults(defineProps<TooltipProps>(), {
+	modelValue: undefined,
+	trigger: 'hover',
+	placement: 'top-center',
+	offset: 8,
+	variant: 'dark',
+	size: 'md',
+	maxWidth: undefined,
+	delay: () => [100, 50],
+	disabled: false,
+	fluid: false,
+	position: undefined,
+});
+
+const emit = defineEmits<{
+	'update:modelValue': [value: boolean];
+	show: [];
+	hide: [];
+}>();
+
+const slots = useSlots();
+
+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 ARROW_OFFSET = 18;
+const Z_INDEX_OFFSET = 1000;
+const DEFAULT_Z_INDEX = 10001;
+
+let modalCache: { modals: Element[]; timestamp: number } | null = null;
+
+const isVisible = ref(false);
+
+const isControlled = computed(() => props.modelValue !== undefined);
+const hasTitle = computed(() => !!slots.title);
+const showCloseButton = computed(() => isControlled.value && hasTitle.value);
+
+const normalizedPlacement = computed(() => {
+	if (props.position) {
+		return props.position as typeof props.placement;
+	}
+	return props.placement;
+});
+
+const normalizedMaxWidth = computed(() => {
+	if (props.fluid) {
+		return '300px';
+	}
+	return props.maxWidth;
+});
+
+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,
+}));
+
+const tooltipStyles = computed(() => {
+	const styles: Record<string, string> = {
+		position: 'fixed',
+		zIndex: String(getTooltipZIndex()),
+	};
+
+	if (normalizedMaxWidth.value) {
+		styles.maxWidth =
+			typeof normalizedMaxWidth.value === 'number'
+				? `${normalizedMaxWidth.value}px`
+				: normalizedMaxWidth.value;
+		styles.width = 'auto';
+	}
+
+	return styles;
+});
+
+const arrowStyles = computed(() => {
+	const [verticalPos] = normalizedPlacement.value.split('-');
+	const arrowColor = props.variant === 'light' ? '#ffffff' : '#333333';
+
+	const styles: Record<string, string> = {
+		position: 'absolute',
+		width: '0',
+		height: '0',
+		borderStyle: 'solid',
+		zIndex: 'inherit',
+	};
+
+	if (verticalPos === 'top') {
+		styles.bottom = '-6px';
+		styles.borderWidth = '6px 6px 0 6px';
+		styles.borderColor = `${arrowColor} transparent transparent transparent`;
+	} else {
+		styles.top = '-6px';
+		styles.borderWidth = '0 6px 6px 6px';
+		styles.borderColor = `transparent transparent ${arrowColor} transparent`;
+	}
+	styles.left = '50%';
+	styles.transform = 'translateX(-50%)';
+
+	return styles;
+});
+
+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;
 			}
-		});
-
-		return {
-			parent,
-			popup,
-			activator,
-			showOver,
-			toggleComponent,
-			externalControl,
-			styles,
-			onOver,
-			onOut,
-		};
-	},
+		}
+
+		if (zIndex > maxModalZIndex) {
+			maxModalZIndex = zIndex;
+		}
+	});
+
+	return maxModalZIndex > 0 ? maxModalZIndex + Z_INDEX_OFFSET : DEFAULT_Z_INDEX;
+};
+
+const calculateTooltipPosition = (
+	activatorRect: DOMRect,
+	tooltipRect: DOMRect,
+	placement: string,
+	offset: number = 8
+) => {
+	const [verticalPos, horizontalAlign] = placement.split('-');
+
+	let left = 0;
+	let top = 0;
+
+	if (verticalPos === 'top') {
+		top = activatorRect.top - tooltipRect.height - offset;
+	} else {
+		top = activatorRect.bottom + offset;
+	}
+
+	switch (horizontalAlign) {
+		case 'left':
+			left = activatorRect.left + activatorRect.width / 2 - ARROW_OFFSET;
+			break;
+		case 'right':
+			left =
+				activatorRect.left + activatorRect.width / 2 - (tooltipRect.width - ARROW_OFFSET);
+			break;
+		case 'center':
+		default:
+			left = activatorRect.left + activatorRect.width / 2 - tooltipRect.width / 2;
+			break;
+	}
+
+	if (left < offset) left = offset;
+	if (left + tooltipRect.width > window.innerWidth - offset) {
+		left = window.innerWidth - tooltipRect.width - offset;
+	}
+
+	return { left, top };
 };
+
+const moveToBody = (element: HTMLElement): void => {
+	if (element.parentNode !== document.body) {
+		document.body.appendChild(element);
+	}
+};
+
+const moveToContainer = (element: HTMLElement, container: HTMLElement): void => {
+	if (element.parentNode === document.body) {
+		container.appendChild(element);
+	}
+};
+
+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 hide = () => {
+	if (props.disabled || isControlled.value) return;
+
+	isVisible.value = false;
+	emit('hide');
+	removeScrollListener();
+};
+
+const close = () => {
+	if (isControlled.value) {
+		emit('update:modelValue', false);
+	} else {
+		hide();
+	}
+};
+
+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`;
+	updateArrowPosition(activatorRect, position);
+};
+
+const updateArrowPosition = (
+	activatorRect: DOMRect,
+	tooltipPosition: { left: number; top: number }
+) => {
+	if (!tooltipRef.value) return;
+
+	const arrow = tooltipRef.value.querySelector('.tooltip-arrow') as HTMLElement;
+	if (!arrow) return;
+
+	const activatorCenterX = activatorRect.left + activatorRect.width / 2;
+	const arrowX = activatorCenterX - tooltipPosition.left;
+	const tooltipWidth = tooltipRef.value.offsetWidth;
+	const minArrowX = 12;
+	const maxArrowX = tooltipWidth - 12;
+
+	const clampedArrowX = Math.max(minArrowX, Math.min(maxArrowX, arrowX));
+	arrow.style.left = `${clampedArrowX}px`;
+	arrow.style.transform = 'translateX(-50%)';
+};
+
+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;
+};
+
+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);
+
+	const scrollableElements = getScrollableElements();
+	scrollableElements.forEach(element => {
+		element.removeEventListener('scroll', updatePosition);
+	});
+};
+
+if (isControlled.value) {
+	isVisible.value = props.modelValue || false;
+}
+
+watch(
+	() => props.modelValue,
+	newValue => {
+		if (isControlled.value) {
+			isVisible.value = newValue || false;
+
+			if (isVisible.value) {
+				nextTick(() => {
+					if (tooltipRef.value) {
+						moveToBody(tooltipRef.value);
+						updatePosition();
+						addScrollListener();
+					}
+				});
+			} else {
+				removeScrollListener();
+			}
+		}
+	}
+);
+
+onBeforeUnmount(() => {
+	if (tooltipRef.value && containerRef.value) {
+		moveToContainer(tooltipRef.value, containerRef.value);
+	}
+	removeScrollListener();
+});
 </script>
 
 <style lang="scss" scoped>
-@import './Tooltip';
+@import './Tooltip.scss';
+
+.tooltip-container {
+	display: inline-block;
+	position: relative;
+}
+
+.tooltip-activator {
+	display: inline-block;
+}
 </style>