@farm-investimentos/front-mfe-components-vue3 0.0.1

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

@@ -0,0 +1,390 @@
+import Form from './Form.vue';
+
+export default {
+	title: 'Form/Form',
+	component: Form,
+	parameters: {
+		docs: {
+			description: {
+				component: `Form<br />
+				selector: <em>farm-form</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+const styles = {
+	vForm: {
+		maxWidth: '480px',
+	},
+	footer: {
+		display: 'flex',
+		justifyContent: 'end',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			form: {
+				document: 'Document',
+				name: '',
+				checkbox: '2',
+				birthDate: new Date('1980/09/20').toISOString(),
+				selectId: 1,
+				rangeDate: [],
+				cityName: null,
+			},
+			validForm: false,
+			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,
+		};
+	},
+	template: `
+        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form" autocomplete="off">
+			<div>
+				<farm-label :required="true">Documento</farm-label>
+				<farm-textfield-v2 v-model="form.document" :rules="[rules.required]" />
+			</div>
+			<farm-label :required="true">Nome</farm-label>
+			<farm-textfield-v2 v-model="form.name" :rules="[rules.required]" hint="Seu nome igual ao do RG" />
+
+			<farm-label :required="true">True/false</farm-label>
+			<farm-checkbox v-model="form.checkbox" value="1" :rules="[rules.checked]" />
+			
+			<farm-label :required="true">Select</farm-label>
+			<farm-select :rules="[rules.required]" :items="items" v-model="form.selectId"/>
+
+			<farm-label :required="true">Birthdate:</farm-label>
+			<farm-input-datepicker
+				ref="birthDate"
+				inputId="form-pf-birthDate"
+				class="mt-4"
+				v-model="form.birthDate"
+				:readonly="true"
+				:required="true"
+			/>
+
+			<farm-label :required="true">Range date:</farm-label>
+			<farm-input-rangedatepicker
+				ref="rangeDate"
+				inputId="form-pf-rangeDate"
+				class="mt-4"
+				v-model="form.rangeDate"
+				:required="true"
+			/>
+			
+			
+            <div class="footer" :style="[styles.footer]">
+				<farm-btn outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
+				<farm-btn :disabled="!validForm">Salvar</farm-btn>
+            </div>
+			form: {{ form }}
+        </farm-form>
+    `,
+});
+
+/*
+export const Secondary = () => ({
+	data() {
+		return {
+			form: {
+				document: 'Document',
+				not: 'Not required field',
+				checkbox: false,
+			},
+			validForm: false,
+			rules: {
+				required: value => !!value || 'Campo obrigatório',
+			},
+			styles,
+			items: [
+				{ value: null, text: '' },
+				{ value: 1, text: 'label 1' },
+				{ value: 2, text: 'label 2' },
+			],
+		};
+	},
+	template: `
+        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
+            <section>
+				<div>
+					<farm-label :required="true">Documento</farm-label>
+					<farm-textfield-v2 v-model="form.document" :rules="[rules.required]" />
+				</div>
+			</section>
+			<section>
+				<div>
+					<farm-label>not</farm-label>
+					<farm-textfield-v2 v-model="form.not" />
+				</div>
+			</section>
+
+			<farm-label>Not required</farm-label>
+			<farm-checkbox value="1" v-model="form.checkbox" />
+
+            <div class="footer" :style="[styles.footer]">
+				<farm-btn outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
+				<farm-btn :disabled="!validForm">Salvar</farm-btn>
+            </div>
+        </farm-form>
+    `,
+});
+
+export const InitInvalid = () => ({
+	data() {
+		return {
+			form: {
+				document: '',
+				name: '',
+				checkbox: false,
+			},
+			validForm: false,
+			rules: {
+				required: value => !!value || 'Campo obrigatório',
+				checked: value => !!value || 'Deve estar marcado',
+			},
+			styles,
+		};
+	},
+	template: `
+        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
+            <section>
+				<div>
+					<farm-label :required="true">Documento</farm-label>
+					<farm-textfield-v2 v-model="form.document" :rules="[rules.required]" />
+				</div>
+			</section>
+			<section>
+				<div>
+					<farm-label :required="true">Nome</farm-label>
+					<farm-textfield-v2 v-model="form.name" :rules="[rules.required]" />
+				</div>
+			</section>
+
+			<farm-label :required="true">True/false</farm-label>
+			<farm-checkbox v-model="form.checkbox" value="1" :rules="[rules.checked]" />
+
+            <div class="footer" :style="[styles.footer]">
+				<farm-btn outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
+				<farm-btn :disabled="!validForm">Salvar</farm-btn>
+            </div>
+        </farm-form>
+    `,
+});
+
+export const Grid = () => ({
+	data() {
+		return {};
+	},
+	template: `
+	<farm-container>
+        <farm-form ref="form">
+			
+			<farm-row>
+				<farm-col cols="12" md="3">
+					<farm-label>Label 1</farm-label>
+					<farm-textfield-v2 />
+				</farm-col>
+				<farm-col cols="12" md="3">
+					<farm-label>Label 2</farm-label>
+					<farm-textfield-v2 />
+				</farm-col>
+				<farm-col cols="12" md="3">
+					<farm-label>Label 3</farm-label>
+					<farm-textfield-v2 hint="some hint text" :persistent-hint="true"  />
+				</farm-col>
+				<farm-col cols="12" md="3">
+					<farm-label>Label 4</farm-label>
+					<farm-textfield-v2 />
+				</farm-col>
+				<farm-col cols="12" md="6">
+					<farm-label>Label 6</farm-label>
+					<farm-textfield-v2 />
+				</farm-col>
+				<farm-col cols="12" md="2">
+					<farm-label>Label 7</farm-label>
+					<farm-textfield-v2 />
+				</farm-col>
+				<farm-col cols="12" md="4">
+					<farm-label>Label 4</farm-label>
+					<farm-textfield-v2 />
+				</farm-col>
+			</farm-row>
+			
+            <farm-row extra-decrease>
+				<farm-container-footer>
+					<farm-row>
+						<farm-col align="right">
+							<farm-btn color="secondary" outlined @click="$refs.form.reset()" class="mr-2">Reset</farm-btn>
+							<farm-btn>Salvar</farm-btn>
+						</farm-col>
+					</farm-row>
+				</farm-container-footer>
+			</farm-row>
+        </farm-form>
+	</farm-container>
+    `,
+});
+
+export const MigrateTextVieldV2 = () => ({
+	data() {
+		return {
+			form: {
+				document: 'Document',
+				name: 'Name',
+			},
+			validForm: false,
+			rules: {
+				required: value => !!value || 'Campo obrigatório',
+			},
+			items: [
+				{ value: null, text: '' },
+				{ value: 1, text: 'label 1' },
+				{ value: 2, text: 'label 2' },
+			],
+			styles,
+		};
+	},
+	template: `
+        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
+			<div>
+				<farm-label :required="true">Documento</farm-label>
+				<farm-textfield-v2 v-model="form.document" :rules="[rules.required]" />
+			</div>
+			<farm-label :required="true">Nome</farm-label>
+			<farm-textfield-v2 v-model="form.name" :rules="[rules.required]" />
+			
+            <div class="footer" :style="[styles.footer]">
+				<farm-btn outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
+				<farm-btn :disabled="!validForm">Salvar</farm-btn>
+            </div>
+			form: {{ form }}
+        </farm-form>
+    `,
+});
+
+export const MigrateSelectV2 = () => ({
+	data() {
+		return {
+			form: {
+				document: '',
+			},
+			validForm: false,
+			rules: {
+				required: value => !!value || 'Campo obrigatório',
+			},
+			items: [
+				{ value: null, text: '' },
+				{ value: 1, text: 'label 1' },
+				{ value: 2, text: 'label 2' },
+			],
+			styles,
+		};
+	},
+	template: `
+        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
+			<div>
+				<farm-label :required="true">Documento</farm-label>
+				<farm-select v-model="form.document" :items="items" :rules="[rules.required]" />
+			</div>
+			
+            <div class="footer" :style="[styles.footer]">
+				<farm-btn outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
+				<farm-btn :disabled="!validForm">Salvar</farm-btn>
+            </div>
+			form: {{ form }}
+        </farm-form>
+    `,
+});
+
+export const ValidateRadioGroup = () => ({
+	data() {
+		return {
+			checkedValue: null,
+			validForm: false,
+			styles,
+			rules: {
+				required: value => !!value || 'Campo obrigatório',
+			},
+		};
+	},
+	template: `
+        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
+			<farm-radio-group v-model="checkedValue" :rules="[rules.required]">
+				<farm-radio v-model="checkedValue" value="1" /><farm-label>value 1</farm-label>
+				<farm-radio v-model="checkedValue" value="2" /><farm-label>value 2</farm-label>
+				<farm-radio v-model="checkedValue" value="3" /><farm-label>value 3</farm-label>
+			</farm-radio-group>
+
+            <div class="footer" :style="[styles.footer]">
+				<farm-btn color="secondary" outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
+				<farm-btn color="secondary" :disabled="!validForm">Salvar</farm-btn>
+            </div>
+        </farm-form>
+    `,
+});
+
+export const RestartValidation = () => ({
+	data() {
+		return {
+			form: {
+				document: null,
+				name: null,
+				checkbox: null,
+				birthDate: '',
+				selectId: null,
+				rangeDate: [],
+			},
+			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,
+		};
+	},
+	template: `
+        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
+			Is valid form: {{ validForm }}
+
+			<farm-label :required="true">Nome</farm-label>
+			<farm-textfield-v2 v-model="form.name" :rules="[rules.required]" />
+			
+			<div>
+				<farm-label :required="true">Documento</farm-label>
+				<farm-textfield-v2 v-model="form.document" :rules="[rules.required]" />
+			</div>
+		
+			
+			<farm-label :required="true">True/false</farm-label>
+			<farm-checkbox v-model="form.checkbox" value="1" :rules="[rules.checked]" />
+			
+			<farm-label :required="true">Select</farm-label>
+			<farm-select :rules="[rules.required]" :items="items" v-model="form.selectId"/>
+			
+            <div class="footer" :style="[styles.footer]">
+			<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>
+            </div>
+        </farm-form>
+    `,
+});
+*/

package/src/components/Form/Form.vue

@@ -0,0 +1,100 @@
+<template>
+	<form class="farm-form"><slot></slot></form>
+</template>
+<script lang="ts">
+import { onMounted, reactive, ref, getCurrentInstance } from 'vue';
+
+type ErrorsBag = Record<number, boolean>;
+
+export default {
+	name: 'farm-form',
+	props: {
+		value: { type: [Boolean] },
+	},
+	inheritAttrs: true,
+	setup(props, { emit }) {
+		const innerValue = ref(props.value);
+		let errorsBag = reactive({} as ErrorsBag);
+		let validationFields = [];
+		const instance = getCurrentInstance();
+
+		const dispatchError = () => {
+			const keys = Object.keys(errorsBag);
+			const errorsIds = keys.filter(key => !errorsBag[key]);
+			emit('input', errorsIds.length === 0);
+		};
+
+		const watchInput = (field: any) => {
+			field.$watch(
+				'hasError',
+				() => {
+					errorsBag[field._uid] = field.valid;
+					dispatchError();
+				},
+				{ immediate: true }
+			);
+		};
+
+		const reset = () => {
+			validationFields.forEach(field => {
+				field.reset();
+			});
+		};
+
+		const recursiveFormField = $node => {
+			if(!Array.isArray($node.children)) {
+				return;
+			}
+			$node.children.forEach($leaf => {
+				if ($leaf.component?.ctx?.validate) {
+					validationFields.push($leaf.component?.ctx);
+				} else if ($leaf.children && $leaf.children.length > 1) {
+					recursiveFormField($leaf);
+				} else if ($leaf.children && $leaf.children[0] && $leaf.children[0].validate) {
+					validationFields.push($leaf.children[0]);
+				} else if ($leaf.validatable) {
+					validationFields.push($leaf);
+				} else {
+					recursiveFormField($leaf);
+				}
+			});
+		};
+
+		onMounted(() => {
+			validationFields = [];
+			recursiveFormField(instance.subTree);
+			validationFields.forEach(field => {
+				watchInput(field);
+			});
+		});
+
+		const restartValidation = () => {
+			validationFields = [];
+			errorsBag = {};
+			recursiveFormField(instance);
+			validationFields.forEach(field => {
+				watchInput(field);
+				field.validate(field.value);
+				if (field.makePristine) field.makePristine();
+			});
+		};
+
+		const restart = () => {
+			validationFields = [];
+			errorsBag = {};
+			recursiveFormField(instance);
+			validationFields.forEach(field => {
+				watchInput(field);
+			});
+		};
+
+		return {
+			innerValue,
+			errorsBag,
+			reset,
+			restartValidation,
+			restart,
+		};
+	},
+};
+</script>

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

@@ -0,0 +1,14 @@
+import { shallowMount } from '@vue/test-utils';
+import Form from '../Form';
+
+describe('Form component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Form);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/Form/index.ts

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

package/src/components/Icon/Icon.scss

@@ -0,0 +1,61 @@
+@import '../../configurations/variables';
+@import '../../configurations/theme-colors';
+
+.farm-icon {
+	align-items: center;
+	display: inline-flex;
+	font-size: 24px;
+	justify-content: center;
+	letter-spacing: normal;
+	line-height: 1;
+	position: relative;
+	text-indent: 0;
+
+	> span {
+		display: none;
+	}
+
+	@each $color in $theme-colors-list {
+		&#{'--' + $color} {
+			color: var(--farm-#{$color}-base);
+
+			&.farm-icon--lighten {
+				color: var(--farm-#{$color}-lighten);
+			}
+
+			&.farm-icon--darken {
+				color: var(--farm-#{$color}-darken);
+			}
+		}
+	}
+
+	&--white {
+		color: white;
+	}
+
+	@each $size, $value in $sizes {
+		&#{'.farm-icon[size=' + $size + ']'} {
+			font-size: $value;
+		}
+	}
+
+	@each $v in $bwVariations {
+		&.farm-icon--black-#{$v} {
+			color: var(--farm-bw-black-#{$v});
+		}
+	}
+}
+
+@each $color in $theme-colors-list {
+	.farm-btn.farm-btn--icon.farm-btn--#{$color}:not(.farm-btn--disabled)
+		.farm-btn__content
+		i.mdi.farm-icon--darken {
+		color: var(--farm-#{$color}-darken);
+	}
+
+	.farm-btn.farm-btn--icon.farm-btn--#{$color}:not(.farm-btn--disabled)
+		.farm-btn__content
+		i.mdi.farm-icon--lighten {
+		color: var(--farm-#{$color}-lighten);
+	}
+}