@farm-investimentos/front-mfe-components 15.5.5 → 15.6.1

package/package.json

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

package/src/components/Form/Form.stories.js

@@ -20,10 +20,16 @@ const styles = {
 	vForm: {
 		maxWidth: '480px',
 	},
+	dynamicField: {
+		display: 'flex',
+	},
 	footer: {
 		display: 'flex',
 		justifyContent: 'end',
 	},
+	footerMargin: {
+		marginTop: '16px',
+	},
 };
 
 export const Primary = () => ({
@@ -141,6 +147,79 @@ export const Secondary = () => ({
     `,
 });
 
+export const WithDynamicFields = () => ({
+	data() {
+		return {
+			form: {
+				document: null,
+				name: null,
+				checkbox: null,
+				birthDate: '',
+				selectId: null,
+				rangeDate: [],
+				dynamics: [],
+			},
+			validForm: true,
+			rules: {
+				required: value => !!value || 'Campo obrigatório',
+				checked: value => !!value || 'Deve estar marcado',
+			},
+			items: [
+				{ value: null, text: '' },
+				{ value: 1, text: 'label 1' },
+				{ value: 2, text: 'label 2' },
+			],
+			styles,
+		};
+	},
+	methods: {
+		addDynamic() {
+			const dynamic = {
+				name2: '',
+				selectId2: null,
+			};
+			this.form.dynamics.push({ ...dynamic });
+			this.$refs.form.restart();
+		},
+		removeDynamic(index) {
+			this.form.dynamics.splice(index, 1);
+			this.$refs.form.restart();
+		},
+	},
+	template: `
+	<div>
+		<farm-btn @click="addDynamic">Add field</farm-btn>
+
+		<farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
+			<farm-label :required="true">Nome</farm-label>
+			<farm-textfield-v2 v-model="form.name" :rules="[rules.required]" />
+			
+			<farm-label :required="true">Select</farm-label>
+			<farm-select :rules="[rules.required]" :items="items" v-model="form.selectId"/>
+
+			<div :style="[styles.dynamicField]" v-for="(dynamic, index) in form.dynamics">
+				<div>
+					<farm-label :key="index + 'label'" :required="true">Dynamic</farm-label>
+					<farm-textfield-v2 :key="index" v-model="dynamic.name2" :rules="[rules.required]" />
+				</div>
+
+				<farm-icon @click="removeDynamic(index)">delete</farm-icon>
+			</div>
+
+			Is valid form: {{ validForm }}
+
+			<farm-line />
+			
+			<footer class="footer" :style="[styles.footer, styles.footerMargin]">
+				<farm-btn outlined @click="$refs.form.restart()" class="mr-3">Restart</farm-btn>
+				<farm-btn outlined @click="$refs.form.restartValidation()" class="mr-3">Restart Validation</farm-btn>
+				<farm-btn outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
+				<farm-btn :disabled="!validForm">Salvar</farm-btn>
+			</footer>
+		</farm-form>
+	</div>`,
+});
+
 export const InitInvalid = () => ({
 	data() {
 		return {

package/src/components/Form/Form.vue

@@ -2,7 +2,7 @@
 	<form class="farm-form"><slot></slot></form>
 </template>
 <script lang="ts">
-import { onMounted, reactive, ref, getCurrentInstance, defineComponent } from 'vue';
+import { onMounted, ref, getCurrentInstance, defineComponent } from 'vue';
 
 type ErrorsBag = Record<number, boolean>;
 
@@ -14,13 +14,13 @@ export default defineComponent({
 	inheritAttrs: true,
 	setup(props, { emit }) {
 		const innerValue = ref(props.value);
-		let errorsBag = reactive({} as ErrorsBag);
+		let errorsBag = ref({} as ErrorsBag);
 		let validationFields = [];
 		const instance = getCurrentInstance().proxy;
 
 		const dispatchError = () => {
-			const keys = Object.keys(errorsBag);
-			const errorsIds = keys.filter(key => !errorsBag[key]);
+			const keys = Object.keys(errorsBag.value);
+			const errorsIds = keys.filter(key => !errorsBag.value[key]);
 			emit('input', errorsIds.length === 0);
 		};
 
@@ -28,7 +28,7 @@ export default defineComponent({
 			field.$watch(
 				'hasError',
 				() => {
-					errorsBag[field._uid] = field.valid;
+					errorsBag.value[field._uid] = field.valid;
 					dispatchError();
 				},
 				{ immediate: true }
@@ -67,7 +67,7 @@ export default defineComponent({
 
 		const restartValidation = () => {
 			validationFields = [];
-			errorsBag = {};
+			errorsBag.value = {};
 			recursiveFormField(instance);
 			validationFields.forEach(field => {
 				watchInput(field);
@@ -78,10 +78,14 @@ export default defineComponent({
 
 		const restart = () => {
 			validationFields = [];
-			errorsBag = {};
-			recursiveFormField(instance);
-			validationFields.forEach(field => {
-				watchInput(field);
+			errorsBag.value = {};
+
+			instance.$nextTick(() => {
+				recursiveFormField(instance);
+
+				validationFields.forEach(field => {
+					watchInput(field);
+				});
 			});
 		};
 

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

@@ -1,14 +1,76 @@
 import { shallowMount } from '@vue/test-utils';
 import Form from '../Form';
+import { formWithChildrenFactory, getDeepErrorsBag } from './helpers';
 
 describe('Form component', () => {
-	let wrapper;
+	let wrapper, component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(Form);
+		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {
 		expect(wrapper).toBeDefined();
 	});
+
+	describe('errors bag', () => {
+		beforeEach(() => {
+			const helper = formWithChildrenFactory(Form);
+
+			wrapper = helper.wrapper;
+			component = helper.component;
+		});
+
+		it('should have errors bag after mount form', () => {
+			const { errorsBag, errorsBagLength } = getDeepErrorsBag(component);
+
+			expect(component.errorsBag).toStrictEqual(errorsBag.value);
+			expect(Object.keys(component.errorsBag).length).toBe(errorsBagLength);
+		});
+
+		it('should update errors bag after change validatable items', async () => {
+			const { errorsBag, errorsBagLength } = getDeepErrorsBag(component);
+
+			expect(component.errorsBag).toStrictEqual(errorsBag.value);
+			expect(Object.keys(component.errorsBag).length).toBe(errorsBagLength);
+
+			await component.addDynamic();
+			await component.restart();
+
+			const { errorsBag: plusOneErrorsBag, errorsBagLength: plusOneErrorsBagLength } =
+				getDeepErrorsBag(component);
+
+			expect(Object.keys(component.errorsBag).length).toBe(plusOneErrorsBagLength);
+			expect(component.errorsBag).toStrictEqual(plusOneErrorsBag.value);
+
+			await component.removeDynamic(1);
+			await component.restart();
+
+			const { errorsBag: minusOneErrorsBag, errorsBagLength: minusOneErrorsBagLength } =
+				getDeepErrorsBag(component);
+
+			expect(Object.keys(component.errorsBag).length).toBe(minusOneErrorsBagLength);
+			expect(component.errorsBag).toStrictEqual(minusOneErrorsBag.value);
+		});
+	});
+
+	describe('isValidForm', () => {
+		let isValidForm;
+
+		beforeEach(() => {
+			const helper = formWithChildrenFactory(Form);
+
+			wrapper = helper.wrapper;
+			component = helper.component;
+			isValidForm = helper.isValidForm;
+		});
+
+		it('should be invalid until all validatable fields are valid', () => {
+			const { errorsBag } = getDeepErrorsBag(component);
+
+			expect(isValidForm.value).toBeFalsy();
+			expect(Object.values(errorsBag.value)).toEqual([false, false, false]);
+		});
+	});
 });

package/src/components/Form/__tests__/helpers.js

@@ -0,0 +1,106 @@
+import { mount } from '@vue/test-utils';
+import { ref } from 'vue';
+
+export const errorsBag = ref({});
+
+export function getDeepErrorsBag($node) {
+	const getDeep = $node => {
+		$node.$children.forEach($leaf => {
+			if ($leaf.validate) {
+				errorsBag.value[$leaf._uid] = $leaf.valid;
+			} else if ($leaf.$children.length > 1) {
+				getDeep($leaf);
+			} else if ($leaf.$children[0] && $leaf.$children[0].validate) {
+				errorsBag.value[$leaf.$children[0]._uid] = $leaf.$children[0].valid;
+			} else if ($leaf.validatable) {
+				errorsBag.value[$leaf._uid] = $leaf.valid;
+			} else {
+				getDeep($leaf);
+			}
+		});
+	};
+
+	getDeep($node);
+
+	return {
+		errorsBag,
+		errorsBagLength: errorsBag.value ? Object.keys(errorsBag.value).length : 0,
+	};
+}
+
+export function resetErrorsBag() {
+	errorsBag.value = {};
+}
+
+function mountSlot() {
+	const normalComponent = {
+		props: {
+			form: {
+				type: Object,
+				required: true,
+			},
+		},
+		template: `
+		<div>
+			<farm-textfield-v2 :rules=[rules.required] />
+			<farm-textfield-v2 :rules=[rules.required] />
+			<farm-textfield-v2 :rules=[rules.required] />
+	
+			section id="dynamics">
+					<farm-textfield-v2 v-for="(dynamic, index) in form?.dynamics" :key="index" :name="'dynamic-' + index" />
+			</section>
+		</div>
+	`,
+	};
+
+	return {
+		normalComponent,
+	};
+}
+
+export function formWithChildrenFactory(formComponent) {
+	resetErrorsBag();
+
+	const { normalComponent } = mountSlot();
+
+	const form = ref({
+		dynamics: [],
+	});
+	const isValidForm = ref(false);
+
+	const wrapper = mount(formComponent, {
+		propsData: {
+			value: isValidForm,
+		},
+		slots: {
+			default: '<normal-component :form="form" />',
+		},
+		mocks: {
+			form,
+			rules: {
+				required: value => !!value || 'Campo obrigatório',
+			},
+			addDynamic() {
+				form.value.dynamics.push({
+					name: '',
+				});
+
+				return form.value.dynamics;
+			},
+			removeDynamic(index) {
+				form.value.dynamics.splice(index, 1);
+
+				return form.value.dynamics;
+			},
+		},
+		stubs: {
+			'normal-component': normalComponent,
+		},
+	});
+
+	return {
+		isValidForm,
+		wrapper,
+		component: wrapper.vm,
+	};
+}

package/src/components/ListItem/ListItem.scss

@@ -8,62 +8,75 @@
 	display: flex;
 	align-items: center;
 
+	.farm-icon,
+	.farm-typography {
+		color: var(--farm-neutral-darken);
+	}
+
 	&--clickable {
 		cursor: pointer;
 	}
 
-	> a {
-		text-decoration: none;
+	&--disabled {
+		cursor: default;
+
+		.farm-icon,
+		.farm-typography {
+			color: var(--farm-stroke-disabled);
+		}
 	}
 
-	.farm-icon,
-	.farm-typography {
-		color: var(--farm-neutral-darken);
+	> a {
+		text-decoration: none;
 	}
 
 	&:hover,
 	&:focus {
 		border-radius: 5px;
 
-		@each $color in $theme-colors-list {
-			&#{'.farm-listitem--' + $color + '-base'} {
-				background-color: rgba(themeColor($color), 0.27);
-				.farm-icon,
-				.farm-typography {
-					color: rgba(themeColor($color), 1);
+		&:not(.farm-listitem--disabled) {
+			@each $color in $theme-colors-list {
+				&#{'.farm-listitem--' + $color + '-base'} {
+					background-color: rgba(themeColor($color), 0.27);
+					.farm-icon,
+					.farm-typography {
+						color: rgba(themeColor($color), 1);
+					}
 				}
-			}
 
-			&#{'.farm-listitem--' + $color + '-lighten'} {
-				background-color: rgba(themeColor($color, 'lighten'), 0.27);
-				.farm-icon,
-				.farm-typography {
-					color: rgba(themeColor($color), 1);
+				&#{'.farm-listitem--' + $color + '-lighten'} {
+					background-color: rgba(themeColor($color, 'lighten'), 0.27);
+					.farm-icon,
+					.farm-typography {
+						color: rgba(themeColor($color), 1);
+					}
 				}
-			}
 
-			&#{'.farm-listitem--' + $color + '-darken'} {
-				background-color: rgba(themeColor($color, 'darken'), 0.27);
-				.farm-icon,
-				.farm-typography {
-					color: rgba(themeColor($color), 1);
+				&#{'.farm-listitem--' + $color + '-darken'} {
+					background-color: rgba(themeColor($color, 'darken'), 0.27);
+					.farm-icon,
+					.farm-typography {
+						color: rgba(themeColor($color), 1);
+					}
 				}
 			}
 		}
 	}
 
 	&:active {
-		@each $color in $theme-colors-list {
-			&#{'.farm-listitem--' + $color + '-base'} {
-				background-color: rgba(themeColor($color), 0.8);
-			}
+		&:not(.farm-listitem--disabled) {
+			@each $color in $theme-colors-list {
+				&#{'.farm-listitem--' + $color + '-base'} {
+					background-color: rgba(themeColor($color), 0.8);
+				}
 
-			&#{'.farm-listitem--' + $color + '-lighten'} {
-				background-color: rgba(themeColor($color, 'lighten'), 0.8);
-			}
+				&#{'.farm-listitem--' + $color + '-lighten'} {
+					background-color: rgba(themeColor($color, 'lighten'), 0.8);
+				}
 
-			&#{'.farm-listitem--' + $color + '-darken'} {
-				background-color: rgba(themeColor($color, 'darken'), 0.8);
+				&#{'.farm-listitem--' + $color + '-darken'} {
+					background-color: rgba(themeColor($color, 'darken'), 0.8);
+				}
 			}
 		}
 	}

package/src/components/Select/Select.scss

@@ -28,19 +28,19 @@
 	margin-right: 8px;
 }
 
-:deep(.farm-listitem:hover .farm-typography) {
+:deep(.farm-listitem:not(.farm-listitem--disabled):hover .farm-typography) {
 	color: var(--farm-primary-base);
 }
 
-:deep(.farm-listitem:focus .farm-typography) {
+:deep(.farm-listitem:not(.farm-listitem--disabled):focus .farm-typography) {
 	color: var(--farm-primary-base);
 }
 
-:deep(.farm-listitem:hover .farm-checkbox .farm-icon) {
+:deep(.farm-listitem:not(.farm-listitem--disabled):hover .farm-checkbox .farm-icon) {
 	color: var(--farm-primary-lighten);
 }
 
-:deep(.farm-listitem:focus .farm-checkbox .farm-icon) {
+:deep(.farm-listitem:not(.farm-listitem--disabled):focus .farm-checkbox .farm-icon) {
 	color: var(--farm-primary-lighten);
 }
 

package/src/components/Select/Select.stories.js

@@ -10,7 +10,8 @@ export default {
 			description: {
 				component: `Select<br />
 				selector: <em>farm-select</em><br />
-				<span style="color: var(--farm-primary-base);">ready for use</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span><br />
+				<a href="https://github.com/Farm-Investimentos/front-mfe-components/blob/develop/src/components/Select/Select.vue" target="_blank">Github</a>
 				`,
 			},
 		},
@@ -129,6 +130,42 @@ export const Disabled = () => ({
 	</div>`,
 });
 
+export const DisabledKeys = () => ({
+	data() {
+		return {
+			v: null,
+			items: [
+				{ value: 1, text: ' value 1', disabled: true },
+				{ value: 2, text: ' value 2', disabled: true },
+				{ value: 3, text: ' value 3' },
+			],
+		};
+	},
+	methods: {
+		allowAllOptions() {
+			this.items = [
+				{ value: 1, text: ' value 1' },
+				{ value: 2, text: ' value 2' },
+				{ value: 3, text: ' value 3' },
+			];
+		},
+		reset() {
+			this.items = [
+				{ value: 1, text: ' value 1', disabled: true },
+				{ value: 2, text: ' value 2', disabled: true },
+				{ value: 3, text: ' value 3' },
+			];
+		},
+	},
+	template: `<div style="width: 480px">
+		<farm-select v-model="v" :items="items" />
+		v-model: {{ v }}
+		<br><br>
+		<farm-btn @click="allowAllOptions">Habilitar todos itens</farm-btn>
+		<farm-btn @click="reset">Resetar</farm-btn>
+	</div>`,
+});
+
 export const Validate = () => ({
 	data() {
 		return {

package/src/components/Select/Select.vue

@@ -13,16 +13,24 @@
 		v-if="!readonly && !disabled"
 		:id="customId"
 	>
-		<farm-contextmenu bottom v-model="isVisible" :stay-open="multiple" ref="contextmenu">
+		<farm-contextmenu
+			bottom
+			v-model="isVisible"
+			:stay-open="multiple || clickedDisabledItem"
+			ref="contextmenu"
+		>
 			<farm-list v-if="!readonly" ref="listRef" @keydown="onKeyDown">
 				<farm-listitem
-					tabindex="0"
 					v-for="(item, index) in items"
+					tabindex="0"
 					clickable
-					hoverColorVariation="lighten"
-					hover-color="primary"
+					hover-color-variation="lighten"
+					:hover-color="item.disabled ? 'neutral' : 'primary'"
 					:key="'contextmenu_item_' + index"
-					:class="{ 'farm-listitem--selected': item[itemValue] === innerValue }"
+					:class="{
+						'farm-listitem--selected': item[itemValue] === innerValue,
+						'farm-listitem--disabled': item.disabled,
+					}"
 					@click="selectItem(item)"
 				>
 					<farm-checkbox
@@ -30,6 +38,7 @@
 						v-model="checked"
 						value="1"
 						size="sm"
+						:disabled="item.disabled"
 						v-if="isChecked(item)"
 					/>
 					<farm-checkbox
@@ -37,6 +46,7 @@
 						v-model="checked"
 						value="2"
 						size="sm"
+						:disabled="item.disabled"
 						v-else-if="multiple"
 					/>
 					<farm-caption bold tag="span">{{ item[itemText] }}</farm-caption>
@@ -242,6 +252,7 @@ export default defineComponent({
 			keys,
 		} = buildData(props);
 
+		const clickedDisabledItem = ref(false);
 		const listRef = ref();
 
 		const contextmenu = ref(null);
@@ -339,7 +350,20 @@ export default defineComponent({
 		};
 
 		const selectItem = item => {
-			inputField.value.focus();
+			if (inputField.value) {
+				inputField.value.focus();
+			}
+
+			if (item.disabled) {
+				clickedDisabledItem.value = true;
+
+				// "Schedule" execution to next loop, so the contextMenu won't close immediately if a disabled item is clicked
+				setTimeout(() => {
+					clickedDisabledItem.value = false;
+				});
+				return;
+			}
+
 			if (multiple.value) {
 				const alreadyAdded = multipleValues.value.findIndex(
 					val => val === item[itemValue.value]
@@ -457,6 +481,7 @@ export default defineComponent({
 			customId,
 			showErrorText,
 			contextmenu,
+			clickedDisabledItem,
 			validate,
 			reset,
 			selectItem,

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

@@ -1,6 +1,11 @@
 import { shallowMount } from '@vue/test-utils';
 import Select from '../Select';
 
+/* jest.spyOn(global, 'setTimeout').mockImplementation(fn => {
+	fn();
+	return setTimeout(() => 1, 0);
+}); */
+
 describe('Select component', () => {
 	let wrapper;
 	let component;
@@ -124,6 +129,66 @@ describe('Select component', () => {
 				expect(component.selectedText).toBe('value 0 (+2 outros)');
 			});
 		});
+		describe('disabled items', () => {
+			it('should not select a disabled item', async () => {
+				const items = [
+					{ value: 0, text: 'value 0', disabled: true },
+					{ value: 1, text: 'value 1' },
+					{ value: 2, text: 'value 2' },
+					{ value: 3, text: 'value 3' },
+				];
+
+				await wrapper.setProps({
+					items,
+					value: 1,
+				});
+
+				expect(component.innerValue).toBe(1);
+				expect(component.selectedText).toBe('value 1');
+				component.selectItem(items[2]);
+				setTimeout(() => {
+					expect(component.innerValue).toBe(2);
+					expect(component.selectedText).toBe('value 2');
+				}, 150);
+				component.selectItem(items[0]);
+				setTimeout(() => {
+					expect(component.innerValue).toBe(2);
+					expect(component.selectedText).toBe('value 2');
+				}, 150);
+				component.selectItem(items[3]);
+				setTimeout(() => {
+					expect(component.innerValue).toBe(3);
+					expect(component.selectedText).toBe('value 3');
+				}, 150);
+			});
+			it('should not select a disabled item if is multiple', async () => {
+				const items = [
+					{ value: 0, text: 'value 0' },
+					{ value: 1, text: 'value 1', disabled: true },
+					{ value: 2, text: 'value 2' },
+					{ value: 3, text: 'value 3', disabled: true },
+				];
+
+				await wrapper.setProps({
+					multiple: true,
+					items,
+					value: [0],
+				});
+
+				expect(component.innerValue).toEqual([0]);
+				expect(component.selectedText).toBe('value 0');
+				component.selectItem(items[2]);
+				setTimeout(() => {
+					expect(component.innerValue).toEqual([0, 2]);
+					expect(component.selectedText).toBe('value 0 (+1 outro)');
+				}, 150);
+				component.selectItem(items[1]);
+				setTimeout(() => {
+					expect(component.innerValue).toEqual([0, 2]);
+					expect(component.selectedText).toBe('value 0 (+1 outro)');
+				}, 150);
+			});
+		});
 
 		describe('onKeyDown', () => {
 			it('should open the ContextMenu and click on current element', () => {