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

package/package.json

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

package/src/components/FilterEmptyState/FilterEmptyState.vue

@@ -2,15 +2,15 @@
 	<farm-box>
 		<farm-row justify="center" class="mb-4">
 			<img
-				v-if="isEmpty"
-				:src="isEmptyImage"
-				:alt="isEmptyImageAlt"
+				v-if="isNotFound"
+				:src="isNotFoundImage"
+				:alt="isNotFoundImageAlt"
 				class="filter-empty-state__image"
 			/>
 			<img
-				v-else-if="isNotFound"
-				:src="isNotFoundImage"
-				:alt="isNotFoundImageAlt"
+				v-else
+				:src="isEmptyImage"
+				:alt="isEmptyImageAlt"
 				class="filter-empty-state__image"
 			/>
 		</farm-row>
@@ -34,6 +34,9 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 
+const emptyDataImage: string = require('../../assets/imgs/empty-data.svg');
+const emptyNotFoundImage: string = require('../../assets/imgs/empty-not-found.svg');
+
 export type FilterEmptyStateProps = {
 	/**
 	 * Indicates if the state is empty (no data)
@@ -77,7 +80,7 @@ export default defineComponent({
 		 */
 		isEmpty: {
 			type: Boolean as PropType<FilterEmptyStateProps['isEmpty']>,
-			default: false,
+			default: true,
 		},
 		/**
 		 * Indicates if the state is not found (no results from filter)
@@ -91,7 +94,7 @@ export default defineComponent({
 		 */
 		isEmptyImage: {
 			type: String as PropType<FilterEmptyStateProps['isEmptyImage']>,
-			default: require('../../assets/imgs/empty-data.svg'),
+			default: emptyDataImage,
 		},
 		/**
 		 * Alt text for empty state image
@@ -105,7 +108,7 @@ export default defineComponent({
 		 */
 		isNotFoundImage: {
 			type: String as PropType<FilterEmptyStateProps['isNotFoundImage']>,
-			default: require('../../assets/imgs/empty-not-found.svg'),
+			default: emptyNotFoundImage,
 		},
 		/**
 		 * Alt text for not found state image

package/src/components/FilterEmptyState/__tests__/FilterEmptyState.test.js

@@ -88,13 +88,21 @@ describe('FilterEmptyState', () => {
 			stubs: globalStubs,
 		});
 
-		expect(wrapper.props('isEmpty')).toBe(false);
+		expect(wrapper.props('isEmpty')).toBe(true);
 		expect(wrapper.props('isNotFound')).toBe(false);
 		expect(wrapper.props('title')).toBe('');
 		expect(wrapper.props('subtitle')).toBe('');
 	});
 
-	it('does not show image when neither isEmpty nor isNotFound is true', () => {
+	it('shows empty image by default when no props are provided', () => {
+		const wrapper = mount(FilterEmptyState, {
+			stubs: globalStubs,
+		});
+
+		expect(wrapper.find('.filter-empty-state__image').exists()).toBe(true);
+	});
+
+	it('shows empty image when isEmpty is false and isNotFound is false', () => {
 		const wrapper = mount(FilterEmptyState, {
 			propsData: {
 				isEmpty: false,
@@ -103,6 +111,20 @@ describe('FilterEmptyState', () => {
 			stubs: globalStubs,
 		});
 
-		expect(wrapper.find('.filter-empty-state__image').exists()).toBe(false);
+		expect(wrapper.find('.filter-empty-state__image').exists()).toBe(true);
+	});
+
+	it('prioritizes isNotFound over isEmpty', () => {
+		const wrapper = mount(FilterEmptyState, {
+			propsData: {
+				isEmpty: true,
+				isNotFound: true,
+			},
+			stubs: globalStubs,
+		});
+
+		const img = wrapper.find('.filter-empty-state__image');
+		expect(img.exists()).toBe(true);
+		expect(img.attributes('alt')).toBe('Imagem referente a filtro vazio');
 	});
 });

package/src/components/Tooltip/Tooltip.scss

@@ -70,7 +70,7 @@ $arrow-margin: 12px;
 	&--top-right .farm-tooltip__arrow {
 		border-width: $arrow-size $arrow-size 0 $arrow-size;
 		border-color: $tooltip-color transparent transparent transparent;
-		bottom: -$arrow-size;
+		bottom: -$arrow-size + 1px;
 		z-index: 99999;
 	}
 
@@ -80,7 +80,7 @@ $arrow-margin: 12px;
 	&--bottom-right .farm-tooltip__arrow {
 		border-width: 0 $arrow-size $arrow-size $arrow-size;
 		border-color: transparent transparent $tooltip-color transparent;
-		top: -$arrow-size;
+		top: -$arrow-size + 1px;
 		z-index: 99999;
 	}
 

package/src/components/Tooltip/Tooltip.vue

@@ -1,6 +1,12 @@
 <template>
 	<span :class="{ 'farm-tooltip': true }" ref="parent">
-		<span class="farm-tooltip__activator" ref="activator" @mouseover="onOver" @mouseout="onOut">
+		<span
+			class="farm-tooltip__activator"
+			ref="activator"
+			@mouseover="onOver"
+			@mouseout="onOut"
+			@mouseleave="onOut"
+		>
 			<slot name="activator" />
 		</span>
 
@@ -16,6 +22,7 @@
 			}"
 			:style="styles"
 			@mouseout="onOut"
+			@mouseleave="onOut"
 		>
 			<div v-if="hasTitle" class="farm-tooltip__header">
 				<div class="farm-tooltip__title">
@@ -88,6 +95,7 @@ export default defineComponent({
 			zIndex: 1,
 		});
 		const slots = useSlots();
+		let hideTimeout: number | null = null;
 
 		const toggleComponent = computed(() => props.value);
 		const externalControl = computed(() => props.value !== undefined);
@@ -159,6 +167,12 @@ export default defineComponent({
 		};
 
 		const onOver = () => {
+			// Limpa qualquer timeout de hide
+			if (hideTimeout) {
+				clearTimeout(hideTimeout);
+				hideTimeout = null;
+			}
+
 			showOver.value = true;
 
 			if (!hasBeenBoostrapped) {
@@ -174,7 +188,23 @@ export default defineComponent({
 		};
 
 		const onOut = (event: MouseEvent) => {
-			showOver.value = parent.value.contains(event.relatedTarget);
+			// Limpa qualquer timeout anterior
+			if (hideTimeout) {
+				clearTimeout(hideTimeout);
+				hideTimeout = null;
+			}
+
+			// 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;
+					hideTimeout = null;
+				}, 50);
+			}
 		};
 
 		const onClose = () => {
@@ -185,6 +215,12 @@ export default defineComponent({
 		};
 
 		onBeforeUnmount(() => {
+			// Limpa o timeout se existir
+			if (hideTimeout) {
+				clearTimeout(hideTimeout);
+				hideTimeout = null;
+			}
+
 			if (hasBeenBoostrapped) {
 				document.querySelector('body').removeChild(popup.value);
 			}