@farm-investimentos/front-mfe-components-vue3 0.7.1 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components-vue3",
-	"version": "0.7.1",
+	"version": "1.0.0",
 	"private": false,
 	"repository": {
 		"type": "git",
@@ -55,7 +55,7 @@
 		"@storybook/vue3": "^8.0.0",
 		"@storybook/vue3-vite": "^8.0.0",
 		"@tsconfig/node18": "^18.2.2",
-		"@types/jest": "^29.0.0",
+		"@types/jest": "^29.5.12",
 		"@types/node": "^18.17.17",
 		"@typescript-eslint/eslint-plugin": "^4.18.0",
 		"@typescript-eslint/parser": "^4.18.0",

package/src/components/ContextMenu/ContextMenu.scss

@@ -30,4 +30,11 @@
 		opacity: 1;
 		visibility: visible;
 	}
-}
+
+	&--fixed {
+		position: fixed !important;
+		top: 50% !important;
+		left: 50% !important;
+		transform: translate(-50%, -50%) !important;
+	}
+}

package/src/components/ContextMenu/ContextMenu.vue

@@ -15,6 +15,7 @@
 			:class="{
 				'farm-contextmenu__popup': true,
 				'farm-contextmenu__popup--visible': inputValue,
+				'farm-contextmenu__popup--fixed': fixedCentered,
 			}"
 			:style="styles"
 		>
@@ -73,6 +74,13 @@ export default {
 			type: [Number, String],
 			default: null,
 		},
+		/**
+		 * Should be in the center of the screen
+		 */
+		fixedCentered: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props, { emit }) {
 		const parent = ref(null);

package/src/components/DataTableHeader/DataTableHeader.scss

@@ -33,7 +33,7 @@ th.sortable {
 th span.span-checkbox {
 	display: flex;
 	justify-content: flex-start;
-	padding-left: 0;
+	padding-left: 24px;
 }
 
 thead {

package/src/components/DataTableHeader/DataTableHeader.stories.js

@@ -59,9 +59,9 @@ export const CheckBox = () => ({
 		return {
 			headers: [
 				{
-					text: 'check',
+					title:  'check',
 					sortable: true,
-					value: 'data-table-select',
+					key: 'data-table-select',
 					align: 'left',
 				},
 				...headers,
@@ -84,23 +84,23 @@ const headerProps = { someItems: true, everyItem: true };
 
 const headers = [
 	{
-		text: 'Grupo',
+		title:  'Grupo',
 		sortable: true,
-		value: 'name',
+		key: 'name',
 		align: 'left',
 		width: 120,
 	},
 	{
-		text: 'Aprovado',
+		title:  'Aprovado',
 		sortable: true,
-		value: 'approvedAmount',
+		key: 'approvedAmount',
 		align: 'center',
 		width: 160,
 	},
 	{
-		text: 'Disponível',
+		title:  'Disponível',
 		sortable: false,
-		value: 'availableAmount',
+		key: 'availableAmount',
 		align: 'center',
 		width: 160,
 	},

package/src/components/DataTableHeader/DataTableHeader.vue

@@ -1,67 +1,74 @@
 <template>
-	<thead>
-		<tr>
-			<th
-				v-for="(item, $index) in headers"
-				:key="item.value"
-				v-bind:class="[
-					item.sortable ? 'sortable' : '',
-					sortClick[$index].clicked ? 'active' : '',
-					item.sortable ? (sortClick[$index].descending === 'DESC' ? 'DESC' : 'ASC') : '',
-					showCheckbox && $index == 0 ? 'checkbox-container' : '',
-				]"
-				v-bind:style="{
-					textAlign: item.align ? item.align : '',
-					width: thWidth(item),
-					minWidth: thWidth(item),
-				}"
-				@click="item.sortable ? clickSort(item.value, $index) : ''"
-				@mouseover="changeShow($index)"
-				@mouseout="changeHidden($index)"
+	<tr>
+		<th
+			v-for="(item, $index) in headers"
+			:key="item.key"
+			v-bind:class="[
+				item.sortable ? 'sortable' : '',
+				sortClick[$index].clicked ? 'active' : '',
+				item.sortable ? (sortClick[$index].descending === 'DESC' ? 'DESC' : 'ASC') : '',
+				showCheckbox && $index == 0 ? 'checkbox-container' : '',
+			]"
+			v-bind:style="{
+				textAlign: item.align ? item.align : '',
+				width: thWidth(item),
+				minWidth: thWidth(item),
+			}"
+			@click="item.sortable ? clickSort(item.key, $index) : ''"
+			@mouseover="changeShow($index)"
+			@mouseout="changeHidden($index)"
+		>
+			<span
+				class="header-text"
+				v-if="!isTHDataTableSelect(item)"
+				:title="
+					item.sortable && sortClick[$index].show ? `Ordernar por ${item.title}` : null
+				"
 			>
-				<span
-					class="header-text"
-					v-if="!isTHDataTableSelect(item)"
-					:title="
-						item.sortable && sortClick[$index].show ? `Ordernar por ${item.text}` : null
-					"
-				>
-					{{ item.text }}
-
-					<farm-icon
-						v-show="item.sortable"
-						v-bind:class="[
-							sortClick[$index][item.value] ? 'farm-icon--desc' : 'farm-icon--asc',
-						]"
-						class="ml-2"
-						size="16px"
-						color="black"
-						variation="30"
-					>
-						sort-reverse-variant
-					</farm-icon>
-				</span>
+				{{ item.title }}
 
-				<span
-					v-if="isTHDataTableSelect(item) && showCheckbox"
-					class="span-checkbox"
+				<farm-icon
+					v-show="item.sortable"
+					v-bind:class="[
+						sortClick[$index][item.key] ? 'farm-icon--desc' : 'farm-icon--asc',
+					]"
+					class="ml-2"
+					size="16px"
+					color="black"
+					variation="30"
 				>
-					<farm-checkbox
-						size="sm"
-						v-model="inputVal"
-						:value="true"
-						:indeterminate="headerProps.someItems && !headerProps.everyItem"
-						@input="selectAll"
-					/>
-				</span>
-			</th>
-		</tr>
-	</thead>
+					sort-reverse-variant
+				</farm-icon>
+			</span>
+
+			<span
+				v-if="isTHDataTableSelect(item) && showCheckbox"
+				class="span-checkbox"
+			>
+				<farm-checkbox
+					size="sm"
+					:modelValue="headerProps.someItems || headerProps.everyItem"
+					:value="true"
+					:indeterminate="headerProps.someItems && !headerProps.everyItem"
+					@update:modelValue="selectAll"
+				/>
+			</span>
+		</th>
+	</tr>
 </template>
 
 <script lang="ts">
+import { PropType } from 'vue';
+
 /* eslint-disable */
 
+interface IDataTableHeader {
+	title: string;
+	key: string | number;
+	align?: string;
+	sortable?: boolean;
+}
+
 export default {
 	name: 'farm-datatable-header',
 	props: {
@@ -69,7 +76,7 @@ export default {
 		 * Headers
 		 */
 		headers: {
-			type: Array,
+			type: Array as PropType<Array<IDataTableHeader>>,
 			required: true,
 		},
 		/**
@@ -170,7 +177,7 @@ export default {
 			return item.width ? item.width + 'px' : 'auto';
 		},
 		isTHDataTableSelect(item) {
-			return item.value === 'data-table-select';
+			return item.key === 'data-table-select';
 		},
 		selectAll(value) {
 			this.$emit('toggleSelectAll', value);
@@ -180,12 +187,12 @@ export default {
 	created() {
 		for (let i = 0; i < this.headers.length; i += 1) {
 			this.sortClick.push({
-				[this.headers[i].value]:
+				[this.headers[i].key]:
 					this.firstSelected &&
 					i === this.selectedIndex &&
 					this.headers[i].order === 'DESC',
 				descending: this.headers[i].order || 'ASC',
-				field: this.headers[i].value,
+				field: this.headers[i].key,
 				clicked: this.checkFirstSelected(i),
 				show: this.checkFirstSelected(i),
 			});

package/src/components/DataTableHeader/__tests__/{DataTableHeader.spec.js → DataTableHeader.spec.ts}

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 
-import DataTableHeader from '../DataTableHeader';
+import DataTableHeader from '../DataTableHeader.vue';
 
 describe('DataTableHeader component', () => {
 	let wrapper;
@@ -11,7 +11,8 @@ describe('DataTableHeader component', () => {
 			propsData: {
 				headers: [
 					{
-						value: 'A',
+						key: 'A',
+						title: 'A',
 					},
 				],
 				sortClick: [
@@ -44,12 +45,12 @@ describe('DataTableHeader component', () => {
 
 	describe('Methods', () => {
 		it('Should check if item is data-table-select column', () => {
-			expect(component.isTHDataTableSelect({ value: 'data-table-select' })).toBeTruthy();
-			expect(component.isTHDataTableSelect({ value: 'anything else' })).toBeFalsy();
+			expect(component.isTHDataTableSelect({ key: 'data-table-select' })).toBeTruthy();
+			expect(component.isTHDataTableSelect({ key: 'anything else' })).toBeFalsy();
 		});
 
 		it('Should get th width', () => {
-			expect(component.thWidth({ value: 'data-table-select' })).toEqual('72px');
+			expect(component.thWidth({ key: 'data-table-select' })).toEqual('72px');
 			expect(component.thWidth({ width: 24 })).toEqual('24px');
 			expect(component.thWidth({})).toEqual('auto');
 		});

package/src/components/DatePicker/DatePicker.stories.js

@@ -172,6 +172,18 @@ export const CenterPositioned = () => ({
     </div>`,
 });
 
+export const FixedCenterPositioned = () => ({
+	data() {
+		return {
+			date: '',
+		};
+	},
+	template: `<div style='max-width: 320px'>
+        <farm-input-datepicker inputId="input-custom-id-0" v-model="date" position="fixed-centered" />
+		{{ date }}
+    </div>`,
+});
+
 export const RequiredMessage = () => ({
 	data() {
 		return {

package/src/components/DatePicker/DatePicker.vue

@@ -7,6 +7,7 @@
 		popup-width="320"
 		:bottom="position === 'bottom'"
 		:top="position === 'top'"
+		:fixedCentered="position === 'fixed-centered'"
 	>
 		<VueDatePicker
 			calendar-class-name="dp-custom-calendar"
@@ -117,7 +118,7 @@ export default {
 		 * Min date (ISO format)
 		 */
 		position: {
-			type: String as PropType<'top' | 'bottom' | 'center'>,
+			type: String as PropType<'top' | 'bottom' | 'center' | 'fixed-centered'>,
 			default: 'bottom',
 		},
 		/**

package/src/components/Icon/__tests__/Icon.spec.js

@@ -1,4 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
+import disableTestWarning from 'tests/unit/disableTestWarning';
 
 import Icon from '../Icon';
 
@@ -6,6 +7,8 @@ describe('Icon component', () => {
 	let wrapper;
 	let component;
 
+	disableTestWarning(beforeEach, afterEach);
+
 	beforeEach(() => {
 		wrapper = shallowMount(Icon, {
 			slots: {

package/src/components/IconBox/IconBox.vue

@@ -7,14 +7,18 @@
 		}"
 		:size="size"
 	>
-		<farm-icon :color="inverted ? 'white' : color" :variation="variation" :size="size">
+		<farm-icon
+			:color="inverted ? 'white' : color"
+			:variation="variation"
+			:size="size"
+		>
 			{{ iconParsed }}
 		</farm-icon>
 	</div>
 </template>
 
 <script lang="ts">
-import { PropType } from 'vue';
+import { PropType, computed, toRefs } from 'vue';
 
 export default {
 	name: 'farm-icon-box',
@@ -62,13 +66,18 @@ export default {
 			default: false,
 		},
 	},
-	computed: {
-		iconParsed() {
-			return this.icon.indexOf('mdi-') === 0 ? this.icon.split('mdi-')[1] : this.icon;
-		},
-		cssColorClass() {
-			return `farm-icon-box--${this.color}`;
-		},
+	setup(props) {
+		const { color, icon } = toRefs(props);
+
+		const cssColorClass = computed(() => `farm-icon-box--${color.value}`);
+		const iconParsed = computed(() =>
+			icon.value.indexOf('mdi-') === 0 ? icon.value.split('mdi-')[1] : icon.value
+		);
+
+		return {
+			cssColorClass,
+			iconParsed,
+		};
 	},
 };
 </script>

package/src/components/IconBox/__tests__/IconBox.spec.js

@@ -9,7 +9,7 @@ describe('IconBox component', () => {
 	beforeEach(() => {
 		wrapper = shallowMount(IconBox, {
 			propsData: {
-				icon: 'mdi-book',
+				icon: 'book',
 			},
 		});
 		component = wrapper.vm;
@@ -26,13 +26,27 @@ describe('IconBox component', () => {
 	});
 
 	describe('computed properties', () => {
-		it('get iconParsed', () => {
-			expect(component.iconParsed).toBeDefined();
-			expect(component.iconParsed).toEqual('book');
+		describe('iconParsed', () => {
+			it('get iconParsed without mdi prefix', () => {
+				expect(component.iconParsed).toBeDefined();
+				expect(component.iconParsed).toEqual('book');
+			});
+
+			it('get iconParsed with mdi prefix', async () => {
+				await wrapper.setProps({ icon: 'mdi-book' });
+				expect(component.iconParsed).toEqual('book');
+			});
 		});
 
-		it('get cssColorClass', () => {
-			expect(component.cssColorClass).toEqual('farm-icon-box--primary');
+		describe('cssColorClass', () => {
+			it('get default value', () => {
+				expect(component.cssColorClass).toEqual('farm-icon-box--primary');
+			});
+
+			it('get secondary color', async () => {
+				await wrapper.setProps({ color: 'secondary' });
+				expect(component.cssColorClass).toEqual('farm-icon-box--secondary');
+			});
 		});
 	});
 });

package/src/components/ListItem/__tests__/ListItem.spec.js

@@ -4,9 +4,11 @@ import ListItem from '../ListItem';
 
 describe('ListItem component', () => {
 	let wrapper;
+	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(ListItem);
+		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {
@@ -18,4 +20,26 @@ describe('ListItem component', () => {
 			expect(wrapper.element).toBeDefined();
 		});
 	});
+
+	describe('computed properties', () => {
+		describe('cssColorWithVariation', () => {
+			it('get default value', () => {
+				expect(component.cssColorWithVariation).toBeNull();
+			});
+
+			it('get value with hoverColor', async () => {
+				await wrapper.setProps({ hoverColor: 'secondary' });
+				expect(component.cssColorWithVariation).toEqual('farm-listitem--secondary-base');
+			});
+		});
+	});
+
+	describe('methods', () => {
+		describe('onClick', () => {
+			it('should emit event', () => {
+				component.onClick({ prop: 'value' });
+				expect(wrapper.emitted()['click:item'][0]).toEqual([{ prop: 'value' }]);
+			});
+		});
+	});
 });

package/src/components/Modal/Modal.vue

@@ -70,8 +70,8 @@ export default {
 		const inputValue = ref(props.modelValue);
 		const styleObject = reactive({ zIndex: 1 });
 		const styles = {
-			marginTop: offsetTop.value + 'px',
-			marginBottom: offsetBottom.value + 'px',
+			marginTop: `${offsetTop.value}px`,
+			marginBottom: `${offsetBottom.value}px`,
 			maxHeight: `calc(100vh - ${offsetTop.value + offsetBottom.value + 48}px)`,
 		};
 
@@ -99,17 +99,17 @@ export default {
 			bootstrap();
 		});
 
-		const escHandler = event => {
+		function escHandler(event: KeyboardEvent) {
 			if (event.key === 'Escape') {
 				close();
 			}
-		};
+		}
 
-		const bootstrap = () => {
+		function bootstrap() {
 			styleObject.zIndex = calculateMainZindex();
 			window.addEventListener('keyup', escHandler);
 			hasBeenBoostrapped = true;
-		};
+		}
 
 		onBeforeUnmount(() => {
 			if (hasBeenBoostrapped) {
@@ -122,7 +122,10 @@ export default {
 			styles,
 			styleObject,
 			size,
+			hasBeenBoostrapped,
 			close,
+			escHandler,
+			bootstrap,
 		};
 	},
 };

package/src/components/Modal/__tests__/{Modal.spec.js → Modal.spec.ts}

@@ -24,6 +24,7 @@ describe('Modal component', () => {
 			component.close();
 			expect(wrapper.emitted()['update:modelValue']).toBeDefined();
 			expect(wrapper.emitted()['onClose']).toBeDefined();
+			expect(component.inputValue).toBeFalsy();
 		});
 	});
 });

package/src/components/ModalPromptUser/ModalPromptUser.stories.js

@@ -1,10 +1,8 @@
-// import { withDesign } from 'storybook-addon-designs';
 import ModalPromptUser from './ModalPromptUser.vue';
 
 export default {
 	title: 'Interactions/ModalPromptUser',
 	component: ModalPromptUser,
-	// decorators: [withDesign],
 	parameters: {
 		viewMode: 'docs',
 		docs: {

package/src/components/ModalPromptUser/__tests__/{ModalPromptUser.spec.js → ModalPromptUser.spec.ts}

@@ -1,10 +1,13 @@
 import { shallowMount } from '@vue/test-utils';
+import disableTestWarning from 'tests/unit/disableTestWarning';
 
-import ModalPromptUser from '../ModalPromptUser';
+import ModalPromptUser from '../ModalPromptUser.vue';
 
 describe('ModalPromptUser component', () => {
 	let wrapper;
 
+	disableTestWarning(beforeEach, afterEach);
+
 	beforeEach(() => {
 		wrapper = shallowMount(ModalPromptUser, {
 			props: {

package/src/components/ProgressBar/ProgressBar.vue

@@ -76,30 +76,24 @@ export default {
 		const { backgroundColor, valueColor, value, indeterminate } = toRefs(props);
 
 		const classes = computed(() => {
-			const obj = {};
-
-			if (!backgroundColor.value.startsWith('#')) {
-				obj['farm-progressbar--' + backgroundColor.value] = true;
-			}
-			if (!valueColor.value.startsWith('#')) {
-				obj['farm-progressbar--value-' + valueColor.value] = true;
-			}
-
-			return {
+			const obj = {
 				'farm-progressbar': true,
-				...obj,
+				...(!backgroundColor.value.startsWith('#') && {
+					['farm-progressbar--' + backgroundColor.value]: true,
+				}),
+				...(!valueColor.value.startsWith('#') && {
+					['farm-progressbar--value-' + valueColor.value]: true,
+				}),
 			};
+
+			return obj;
 		});
 
 		const valueStyle = computed(() => {
-			const obj = {
+			return {
 				width: indeterminate.value ? '100%' : `${value.value}%`,
+				...(valueColor.value.startsWith('#') && { 'background-color': valueColor.value }),
 			};
-
-			if (valueColor.value.startsWith('#')) {
-				obj['background-color'] = valueColor.value;
-			}
-			return obj;
 		});
 
 		const containerStyle = computed(() => {
@@ -117,9 +111,6 @@ export default {
 };
 </script>
 
-
 <style lang="scss" scoped>
 @import 'ProgressBar.scss';
 </style>
-
-

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

@@ -0,0 +1,53 @@
+import { shallowMount } from '@vue/test-utils';
+
+import ProgressBar from '../ProgressBar.vue';
+
+describe('ProgressBar component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ProgressBar, {
+			propsData: { value: 40 },
+		});
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toBeDefined();
+		});
+	});
+
+	describe('computed properties', () => {
+		describe('classes', () => {
+			it('Should have basic values', () => {
+				expect(component.classes).toBeDefined();
+				expect(component.classes).toHaveProperty('farm-progressbar');
+			});
+
+			it('Should have color and background values', async () => {
+				await wrapper.setProps({
+					backgroundColor: 'secondary',
+					valueColor: 'neutral' 
+				});
+				expect(component.classes).toHaveProperty('farm-progressbar--secondary');
+				expect(component.classes).toHaveProperty('farm-progressbar--value-neutral');
+			});
+
+			it('Should not have color and background values using hexa', async () => {
+				await wrapper.setProps({
+					backgroundColor: '#FF0000',
+					valueColor: '#FF0000' 
+				});
+				expect(component.classes).not.toHaveProperty('farm-progressbar--#FF0000');
+				expect(component.classes).not.toHaveProperty('farm-progressbar--value-#FF0000');
+			});
+
+		});
+	});
+});