@farm-investimentos/front-mfe-components 11.10.4 → 11.10.6

package/package.json

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

package/src/components/Checkbox/Checkbox.vue

@@ -158,6 +158,10 @@ export default Vue.extend({
 
 		let validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
 
+		const makePristine = () => {
+			isTouched.value = false;
+		};
+
 		return {
 			innerValue,
 			label,
@@ -171,6 +175,8 @@ export default Vue.extend({
 			reset,
 			validate,
 			showError,
+			makePristine,
+			isTouched,
 		};
 	},
 });

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

@@ -3,6 +3,7 @@ import Checkbox from '../Checkbox';
 
 describe('Checkbox component', () => {
 	let wrapper;
+	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(Checkbox, {
@@ -10,6 +11,7 @@ describe('Checkbox component', () => {
 				value: false,
 			},
 		});
+		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {
@@ -21,4 +23,12 @@ describe('Checkbox component', () => {
 			expect(wrapper.element).toMatchSnapshot();
 		});
 	});
+
+	describe('methods', () => {
+		it('makePristine', () => {
+			component.isTouched = true;
+			component.makePristine();
+			expect(component.isTouched).toBeFalsy();
+		});
+	});
 });

package/src/components/DialogFooter/DialogFooter.vue

@@ -30,8 +30,6 @@
 
 <script lang="ts">
 import Vue, { PropType } from 'vue';
-import DefaultButton from '../Buttons/DefaultButton';
-import Icon from '../Icon';
 import IExtraButton from './IExtraButton';
 
 /**
@@ -39,10 +37,6 @@ import IExtraButton from './IExtraButton';
  */
 export default Vue.extend({
 	name: 'farm-dialog-footer',
-	components: {
-		'farm-btn': DefaultButton,
-		'farm-icon': Icon,
-	},
 	props: {
 		/**
 		 * Label do botão de confirmação

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

@@ -333,3 +333,55 @@ export const ValidateRadioGroup = () => ({
         </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">
+			{{ 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

@@ -72,6 +72,7 @@ export default Vue.extend({
 			validationFields.forEach(field => {
 				watchInput(field);
 				field.validate(field.value);
+				if (field.makePristine) field.makePristine();
 			});
 		};
 

package/src/components/Logos/ProductLogo/ProductLogo.stories.js

@@ -6,7 +6,14 @@ export default {
 };
 
 export const Primary = () => ({
-	template: '<farm-imglogo-product alt="primary" id="34" />',
+	data() {
+		return {
+			ids: [34, 31208, 31228, 31238, 80000, 90000, 110000, 116000, 118000, 119000],
+		};
+	},
+	template: `<div>
+	<farm-imglogo-product v-for="id in ids" :key="'logo_'+ id" alt="primary" :id="id" />
+	</div>`,
 });
 
 Primary.storyName = 'Básico';

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

@@ -35,6 +35,7 @@ export const Primary = () => ({
 			</farm-btn>
 		</div>`,
 });
+
 export const Error = () => ({
 	data() {
 		return {
@@ -48,3 +49,26 @@ export const Error = () => ({
 			</farm-btn>
 		</div>`,
 });
+
+
+export const ButtonLabels = () => ({
+	data() {
+		return {
+			showPrompt: false,
+		};
+	},
+	template: `<div>
+		<farm-prompt-user
+			match="CONFIRMAR"
+			title="Título"
+			subtitle="Digite CONFIRMAR para habilitar"
+			confirmLabel="SIM"
+			closeLabel="NÃO"
+			v-model="showPrompt"
+		/>
+			click:
+			<farm-btn @click="showPrompt = true;">
+			reabrir
+			</farm-btn>
+		</div>`,
+});

package/src/components/ModalPromptUser/ModalPromptUser.vue

@@ -1,7 +1,7 @@
 <template>
 	<farm-modal v-model="inputVal" size="sm" :offsetTop="48" :offsetBottom="68">
 		<template v-slot:header>
-			<DialogHeader :title="title" @onClose="close" />
+			<farm-dialog-header :title="title" @onClose="close" />
 		</template>
 		<template v-slot:content>
 			<section class="modal-content">
@@ -15,9 +15,10 @@
 		</template>
 
 		<template v-slot:footer>
-			<DialogFooter
+			<farm-dialog-footer
 				:confirmColor="confirmColor"
 				:confirmLabel="confirmLabel"
+				:closeLabel="closeLabel"
 				:isConfirmDisabled="!canConfirm"
 				@onConfirm="confirm"
 				@onClose="close"
@@ -26,47 +27,66 @@
 	</farm-modal>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { PropType } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-prompt-user',
 	props: {
 		/**
-		 * Habilita/desabilita o modal
+		 * Open/close modal
 		 */
 		value: {
 			required: true,
 		},
 		/**
-		 * Título do modal
+		 * Modal title
 		 */
 		title: {
 			required: true,
 			type: String,
 		},
 		/**
-		 * Subtítulo do modal
+		 * Modal subtitle
 		 */
 		subtitle: {
 			required: true,
 			type: String,
 		},
 		/**
-		 * Cor (do Vuetify) do botão de confirmar
+		 * Confirm button color
 		 */
 		confirmColor: {
-			type: String,
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'success'
+				| 'extra-1'
+				| 'extra-2'
+				| 'gray'
+			>,
 			default: 'primary',
 		},
 		/**
-		 * Label do botão
+		 * Confirm button label
 		 */
 		confirmLabel: {
 			type: String,
 			default: 'Confirmar',
 		},
 		/**
-		 * String usada para dar match e habilitar
+		 * Close button label
+		 */
+		closeLabel: {
+			type: String,
+			default: 'Fechar',
+		},
+		/**
+		 * String to be matched (and enable confirm button)
 		 */
 		match: {
 			required: true,

package/src/components/Select/Select.vue

@@ -218,8 +218,12 @@ export default Vue.extend({
 			emit('click');
 		};
 
+		const makePristine = () => {
+			isTouched.value = false;
+		};
+
 		const updateSelectedTextValue = () => {
-			if (!items.value || items.value.length === 0) {
+			if (!items.value || items.value.length === 0 || !innerValue.value) {
 				selectedText.value = '';
 				return;
 			}
@@ -250,6 +254,7 @@ export default Vue.extend({
 			onBlur,
 			clickInput,
 			updateSelectedTextValue,
+			makePristine,
 		};
 	},
 });

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

@@ -41,5 +41,11 @@ describe('Select component', () => {
 			component.updateSelectedTextValue();
 			expect(component.selectedText).toBeDefined();
 		});
+
+		it('makePristine', () => {
+			component.isTouched = true;
+			component.makePristine();
+			expect(component.isTouched).toBeFalsy();
+		});
 	});
 });

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -176,6 +176,11 @@ export default Vue.extend({
 			emit('input', innerValue.value);
 		};
 
+		const makePristine = () => {
+			isTouched.value = false;
+			isBlured.value = false;
+		};
+
 		return {
 			innerValue,
 			errorBucket,
@@ -189,6 +194,7 @@ export default Vue.extend({
 			onKeyUp,
 			onBlur,
 			reset,
+			makePristine,
 		};
 	},
 });

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

@@ -37,5 +37,12 @@ describe('TextFieldV2 component', () => {
 			expect(component.isBlured).toBeTruthy();
 		});
 
+		it('makePristine', () => {
+			component.isTouched = true;
+			component.isBlured = true;
+			component.makePristine();
+			expect(component.isTouched).toBeFalsy();
+			expect(component.isBlured).toBeFalsy();
+		});
 	});
 });