@farm-investimentos/front-mfe-components 15.6.0 → 15.6.2

package/package.json

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

package/src/components/Collapsible/Collapsible.scss

@@ -12,6 +12,11 @@
 			position: relative;
 			cursor: pointer;
 		}
+
+		&--plain {
+			cursor: default;
+			pointer-events: none;
+		}
 	}
 
 	&__content-title {

package/src/components/Collapsible/Collapsible.stories.js

@@ -39,10 +39,10 @@ export const ColorIcons = () => ({
 	<farm-row>
 		<farm-col cols="12" md="4"  v-for="color in colors" :key="'color_' + color">
 			<h4 style="margin:15px">{{ color }}</h4>
-			<farm-collapsible 
+			<farm-collapsible
 				style="margin-top:15px"
-				icon="clipboard" 
-				title="color icon" 
+				icon="clipboard"
+				title="color icon"
 				:colorIcon="color"
 			>
 			</farm-collapsible>
@@ -101,14 +101,14 @@ export const ColorsChips = () => ({
 	<farm-row>
 		<farm-col cols="12" md="4"  v-for="color in colors" :key="'color_' + color">
 			<h4 style="margin:15px">{{ color }}</h4>
-			<farm-collapsible 
+			<farm-collapsible
 				style="margin-top:15px"
 				v-for="variation in variations"
-				icon="plus" 
+				icon="plus"
 				textChip="chip"
-				title="color chip" 
+				title="color chip"
 				:key="color + '_' + variation"
-				:showChip="true" 
+				:showChip="true"
 				:colorChip="color"
 				:variation="variation"
 			>
@@ -128,12 +128,12 @@ export const ColorsOutlinedChips = () => ({
 	<farm-row>
 		<farm-col cols="12" md="4"  v-for="color in colors" :key="'color_' + color">
 			<h4 style="margin:15px">{{ color }}</h4>
-			<farm-collapsible 
+			<farm-collapsible
 				style="margin-top:15px"
 				v-for="variation in variations"
-				icon="plus" 
+				icon="plus"
 				textChip="chip"
-				title="color chip" 
+				title="color chip"
 				:key="color + '_' + variation"
 				:showChip="true"
 				:outlined="true"
@@ -161,14 +161,14 @@ export const Custom = () => ({
 			<farm-col md="6" justify="end"
 			align="end">
 			<farm-btn
-				
+
 			>
 				custom
 			</farm-btn>
 			</farm-col>
 			</farm-row>
 		</template>
-		collapsible content		
+		collapsible content
 		</farm-collapsible>
 		`,
 });
@@ -212,7 +212,7 @@ export const CustomHeaderContent = () => ({
 				</farm-col>
 		</farm-row>
 		</template>
-	
+
 		<farm-bodytext >collapsible content</farm-bodytext>
 		</farm-collapsible>
 		`,
@@ -295,7 +295,7 @@ export const CustomHeaderAndBodyContent = () => ({
 				</farm-row>
 			</div>
 		</template>
-	
+
 			<farm-row extraDecrease style="background-color:#f5f5f5;" class="mt-5 px-2">
 				<farm-col class="collapsible-stories-class-with-line">
 					<farm-caption variation="semiBold"
@@ -328,6 +328,51 @@ export const CustomHeaderAndBodyContent = () => ({
 		`,
 });
 
+export const Plain = () => ({
+	template: `
+		<farm-collapsible title="" custom-header plain>
+		<template #header-content>
+			<farm-row>
+				<farm-col md="12">
+					<farm-bodytext color="success">initial text</farm-bodytext>
+				</farm-col>
+			</farm-row>
+
+			<farm-row class="pt-4">
+				<farm-col class="collapsible-stories-class-with-line">
+					<farm-caption variation="semiBold"
+						>text here</farm-caption
+					>
+					123455
+				</farm-col>
+				<farm-col class="collapsible-stories-class-with-line">
+					<farm-caption variation="semiBold"
+						>label here</farm-caption
+					>
+
+					<farm-caption variation="medium" class="my-1">R$ 1000</farm-caption>
+				</farm-col>
+
+				<farm-col class="collapsible-stories-class-with-line">
+					<farm-caption variation="semiBold">LABEL HERE</farm-caption>
+
+					<farm-caption		 variation="medium" class="my-1">R$ 1000</farm-caption>
+				</farm-col>
+
+				<farm-col>
+					<farm-caption variation="semiBold"
+						>Label here (text here)</farm-caption
+					>
+					<farm-caption variation="medium" class="my-1">value here</farm-caption>
+				</farm-col>
+		</farm-row>
+		</template>
+
+		<farm-bodytext >collapsible content</farm-bodytext>
+		</farm-collapsible>
+		`,
+});
+
 Primary.storyName = 'Basic';
 Title.storyName = 'Title';
 Icon.storyName = 'Icon';

package/src/components/Collapsible/Collapsible.vue

@@ -54,10 +54,11 @@
 			<div
 				v-if="customHeader"
 				class="collapsible__header--custom"
+				:class="plain ? 'collapsible__header--plain' : ''"
 				@click="onToggleCollapsible(status)"
 			>
 				<slot name="header-content"></slot>
-				<div class="collapsible__content-right--custom">
+				<div v-if="!plain" class="collapsible__content-right--custom">
 					<div class="collapsible__icon collapsible__icon--arrow">
 						<farm-icon size="md" color="primary">
 							{{ arrowIcon }}
@@ -125,12 +126,19 @@ export default defineComponent({
 			default: '',
 		},
 		/**
-		 * has butotn
+		 * has button
 		 */
 		hasButton: {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * plain layout
+		 */
+		plain: {
+			type: Boolean,
+			default: false,
+		},
 		/**
 		 * export button disabled toggle
 		 */

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,
+	};
+}