@farm-investimentos/front-mfe-components-vue3 1.6.8 → 1.6.10

package/src/components/FilterEmptyState/FilterEmptyState.vue

@@ -0,0 +1,111 @@
+<template>
+	<farm-box>
+		<farm-row justify="center" class="mb-4">
+			<!-- Custom image via prop -->
+			<img
+				v-if="hasCustomImage"
+				:src="currentImageSrc"
+				:alt="currentImageAlt"
+				class="filter-empty-state__image"
+			/>
+			<!-- SVG component for not found state -->
+			<EmptyNotFoundSvg
+				v-else-if="isNotFound"
+				:alt="isNotFoundImageAlt"
+				class="filter-empty-state__image"
+			/>
+			<!-- SVG component for empty state -->
+			<EmptyDataSvg v-else :alt="isEmptyImageAlt" class="filter-empty-state__image" />
+		</farm-row>
+		<farm-row justify="center">
+			<farm-bodytext variation="bold" color="gray" :type="2">
+				<slot name="title">
+					{{ title || 'Nenhuma informação para exibir aqui' }}
+				</slot>
+			</farm-bodytext>
+		</farm-row>
+		<farm-row justify="center" class="mt-2">
+			<farm-caption variation="regular" color="gray">
+				<slot name="subtitle">
+					{{ subtitle || 'Tente filtrar novamente sua pesquisa.' }}
+				</slot>
+			</farm-caption>
+		</farm-row>
+	</farm-box>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import EmptyDataSvg from './EmptyDataSvg.vue';
+import EmptyNotFoundSvg from './EmptyNotFoundSvg.vue';
+
+defineOptions({
+	name: 'farm-filter-empty-state',
+});
+
+interface FilterEmptyStateProps {
+	/**
+	 * Indicates if the state is empty (no data)
+	 */
+	isEmpty?: boolean;
+	/**
+	 * Indicates if the state is not found (no results from filter)
+	 */
+	isNotFound?: boolean;
+	/**
+	 * Custom image URL for empty state
+	 */
+	isEmptyImage?: string;
+	/**
+	 * Alt text for empty state image
+	 */
+	isEmptyImageAlt?: string;
+	/**
+	 * Custom image URL for not found state
+	 */
+	isNotFoundImage?: string;
+	/**
+	 * Alt text for not found state image
+	 */
+	isNotFoundImageAlt?: string;
+	/**
+	 * Title to be displayed
+	 */
+	title?: string;
+	/**
+	 * Subtitle to be displayed
+	 */
+	subtitle?: string;
+}
+
+const props = withDefaults(defineProps<FilterEmptyStateProps>(), {
+	isEmpty: true,
+	isNotFound: false,
+	isEmptyImage: '',
+	isEmptyImageAlt: 'Imagem referente a dados vazios',
+	isNotFoundImage: '',
+	isNotFoundImageAlt: 'Imagem referente a filtro vazio',
+	title: '',
+	subtitle: '',
+});
+
+// Check if user provided custom images
+const hasCustomImage = computed(() => {
+	return props.isNotFound ? !!props.isNotFoundImage : !!props.isEmptyImage;
+});
+
+// Get the current image source (for custom images)
+const currentImageSrc = computed(() => {
+	return props.isNotFound ? props.isNotFoundImage : props.isEmptyImage;
+});
+
+// Get the current image alt text
+const currentImageAlt = computed(() => {
+	return props.isNotFound ? props.isNotFoundImageAlt : props.isEmptyImageAlt;
+});
+</script>
+
+<style scoped lang="scss">
+@import './FilterEmptyState.scss';
+</style>

package/src/components/FilterEmptyState/__tests__/FilterEmptyState.spec.ts

@@ -0,0 +1,149 @@
+import { mount } from '@vue/test-utils';
+
+import FilterEmptyState from '../FilterEmptyState.vue';
+
+const globalStubs = {
+	'farm-box': { template: '<div><slot /></div>' },
+	'farm-row': { template: '<div><slot /></div>' },
+	'farm-bodytext': { template: '<div><slot /></div>' },
+	'farm-caption': { template: '<div><slot /></div>' },
+};
+
+describe('FilterEmptyState', () => {
+	it('renders empty state correctly', () => {
+		const wrapper = mount(FilterEmptyState, {
+			props: {
+				isEmpty: true,
+				isNotFound: false,
+			},
+			global: {
+				stubs: globalStubs,
+			},
+		});
+
+		expect(wrapper.find('.filter-empty-state__image').exists()).toBe(true);
+		expect(wrapper.text()).toContain('Nenhuma informação para exibir aqui');
+		expect(wrapper.text()).toContain('Tente filtrar novamente sua pesquisa.');
+	});
+
+	it('renders not found state correctly', () => {
+		const wrapper = mount(FilterEmptyState, {
+			props: {
+				isEmpty: false,
+				isNotFound: true,
+			},
+			global: {
+				stubs: globalStubs,
+			},
+		});
+
+		expect(wrapper.find('.filter-empty-state__image').exists()).toBe(true);
+		expect(wrapper.text()).toContain('Nenhuma informação para exibir aqui');
+		expect(wrapper.text()).toContain('Tente filtrar novamente sua pesquisa.');
+	});
+
+	it('renders custom title and subtitle', () => {
+		const wrapper = mount(FilterEmptyState, {
+			props: {
+				isEmpty: true,
+				title: 'Custom Title',
+				subtitle: 'Custom Subtitle',
+			},
+			global: {
+				stubs: globalStubs,
+			},
+		});
+
+		expect(wrapper.text()).toContain('Custom Title');
+		expect(wrapper.text()).toContain('Custom Subtitle');
+	});
+
+	it('uses custom images when provided', () => {
+		const wrapper = mount(FilterEmptyState, {
+			props: {
+				isEmpty: true,
+				isEmptyImage: 'custom-empty-image.svg',
+				isEmptyImageAlt: 'Custom empty image',
+			},
+			global: {
+				stubs: globalStubs,
+			},
+		});
+
+		const img = wrapper.find('.filter-empty-state__image');
+		expect(img.exists()).toBe(true);
+		expect(img.attributes('src')).toBe('custom-empty-image.svg');
+		expect(img.attributes('alt')).toBe('Custom empty image');
+	});
+
+	it('uses custom not found images when provided', () => {
+		const wrapper = mount(FilterEmptyState, {
+			props: {
+				isNotFound: true,
+				isNotFoundImage: 'custom-not-found-image.svg',
+				isNotFoundImageAlt: 'Custom not found image',
+			},
+			global: {
+				stubs: globalStubs,
+			},
+		});
+
+		const img = wrapper.find('.filter-empty-state__image');
+		expect(img.exists()).toBe(true);
+		expect(img.attributes('src')).toBe('custom-not-found-image.svg');
+		expect(img.attributes('alt')).toBe('Custom not found image');
+	});
+
+	it('has correct default props', () => {
+		const wrapper: any = mount(FilterEmptyState, {
+			global: {
+				stubs: globalStubs,
+			},
+		});
+
+		expect(wrapper.vm.isEmpty).toBe(true);
+		expect(wrapper.vm.isNotFound).toBe(false);
+		expect(wrapper.vm.title).toBe('');
+		expect(wrapper.vm.subtitle).toBe('');
+	});
+
+	it('shows empty image by default when no props are provided', () => {
+		const wrapper = mount(FilterEmptyState, {
+			global: {
+				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, {
+			props: {
+				isEmpty: false,
+				isNotFound: false,
+			},
+			global: {
+				stubs: globalStubs,
+			},
+		});
+
+		expect(wrapper.find('.filter-empty-state__image').exists()).toBe(true);
+	});
+
+	it('prioritizes isNotFound over isEmpty', () => {
+		const wrapper = mount(FilterEmptyState, {
+			props: {
+				isEmpty: true,
+				isNotFound: true,
+			},
+			global: {
+				stubs: globalStubs,
+			},
+		});
+
+		const img = wrapper.find('.filter-empty-state__image');
+		expect(img.exists()).toBe(true);
+		expect(img.attributes('aria-label')).toBe('Imagem referente a filtro vazio');
+	});
+});

package/src/components/FilterEmptyState/index.ts

@@ -0,0 +1,4 @@
+import FilterEmptyState from './FilterEmptyState.vue';
+
+export { FilterEmptyState };
+export default FilterEmptyState;

package/src/main.ts

@@ -1,4 +1,5 @@
 export * from './components/DataTableEmptyWrapper';
+export * from './components/FilterEmptyState';
 
 import DefaultButton from './components/Buttons/DefaultButton';
 import Collapsible from './components/Collapsible';