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

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

@@ -0,0 +1,49 @@
+export type TooltipPlacement =
+	| 'top-left'
+	| 'top-center'
+	| 'top-right'
+	| 'bottom-left'
+	| 'bottom-center'
+	| 'bottom-right';
+
+export type TooltipTrigger = 'hover' | 'click' | 'manual';
+
+export type TooltipVariant = 'dark' | 'light';
+
+export type TooltipSize = 'sm' | 'md' | 'lg';
+
+export interface TooltipProps {
+	// Visibility control (Vue 2.7 style)
+	value?: boolean; // v-model
+	trigger?: TooltipTrigger;
+
+	// Placement (all 6 positions are supported)
+	placement?: TooltipPlacement;
+	offset?: number;
+
+	// Aparência
+	variant?: TooltipVariant;
+	size?: TooltipSize;
+	maxWidth?: string | number;
+
+	// Comportamento
+	delay?: number | [number, number]; // [show, hide]
+	disabled?: boolean;
+}
+
+export interface TooltipEvents {
+	input: (value: boolean) => void; // Vue 2.7 v-model
+	show: () => void;
+	hide: () => void;
+}
+
+export interface Position {
+	x: number;
+	y: number;
+}
+
+export interface TooltipState {
+	isVisible: boolean;
+	position: Position;
+	actualPlacement: TooltipPlacement;
+}

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

@@ -0,0 +1,70 @@
+export interface TooltipPosition {
+	left: number;
+	top: number;
+}
+
+export interface TooltipRect {
+	width: number;
+	height: number;
+	left: number;
+	top: number;
+	right: number;
+	bottom: number;
+}
+
+const ARROW_OFFSET = 24;
+
+export function calculateTooltipPosition(
+	activatorRect: TooltipRect,
+	tooltipRect: TooltipRect,
+	placement: string,
+	offset: number = 8
+): TooltipPosition {
+	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;
+	}
+	if (top < offset) top = offset;
+	if (top + tooltipRect.height > window.innerHeight - offset) {
+		top = window.innerHeight - tooltipRect.height - offset;
+	}
+
+	return { left, top };
+}
+
+export function moveToBody(element: HTMLElement): void {
+	if (element.parentNode !== document.body) {
+		document.body.appendChild(element);
+	}
+}
+
+export function moveToContainer(element: HTMLElement, container: HTMLElement): void {
+	if (element.parentNode === document.body) {
+		container.appendChild(element);
+	}
+}