@farm-investimentos/front-mfe-components 11.5.1 → 11.5.2

package/package.json

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

package/src/components/DialogFooter/DialogFooter.stories.js

@@ -3,10 +3,20 @@ import DialogFooter from './DialogFooter.vue';
 export default {
 	title: 'Display/Dialog/DialogFooter',
 	component: DialogFooter,
+	parameters: {
+		docs: {
+			description: {
+				component: `DialogFooter<br />
+				selector: <em>farm-dialog-footer</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
 };
 
 export const Primary = () => ({
-	components: { 'farm-dialog-footer': DialogFooter },
 	template: '<farm-dialog-footer />',
 });
 

package/src/components/DialogFooter/DialogFooter.vue

@@ -3,12 +3,14 @@
 		<farm-btn v-if="hasCancel" color="primary" outlined @click="$emit('onClose')">
 			{{ closeLabel }}
 		</farm-btn>
+		
 		<farm-btn
 			v-for="button in extraButtons"
 			:key="button.label"
 			:color="button.color"
 			:outlined="button.outlined"
 			:disabled="button.disabled"
+			:title="button.label"
 			@click="$emit(button.listener ? button.listener : '')"
 		>
 			{{ button.label }}
@@ -17,6 +19,7 @@
 			v-if="hasConfirm"
 			:color="confirmColor"
 			:disabled="isConfirmDisabled"
+			:title="confirmLabel"
 			@click="$emit('onConfirm')"
 		>
 			<farm-icon v-if="confirmIcon">{{ confirmIcon }}</farm-icon>

package/src/components/Form/Form.vue

@@ -14,8 +14,9 @@ export default Vue.extend({
 	inheritAttrs: true,
 	setup(props, { emit }) {
 		const innerValue = ref(props.value);
-		const errorsBag = reactive({} as ErrorsBag);
+		let errorsBag = reactive({} as ErrorsBag);
 		let validationFields = [];
+		const instance = getCurrentInstance().proxy;
 
 		const dispatchError = () => {
 			const keys = Object.keys(errorsBag);
@@ -42,7 +43,7 @@ export default Vue.extend({
 
 		const recursiveFormField = $node => {
 			$node.$children.forEach($leaf => {
-				if($leaf.validate) {
+				if ($leaf.validate) {
 					validationFields.push($leaf);
 				} else if ($leaf.$children.length > 1) {
 					recursiveFormField($leaf);
@@ -57,16 +58,28 @@ export default Vue.extend({
 		};
 
 		onMounted(() => {
-			recursiveFormField(getCurrentInstance().proxy);
+			validationFields = [];
+			recursiveFormField(instance);
 			validationFields.forEach(field => {
 				watchInput(field);
 			});
 		});
 
+		const restartValidation = () => {
+			validationFields = [];
+			errorsBag = {};
+			recursiveFormField(instance);
+			validationFields.forEach(field => {
+				watchInput(field);
+				field.validate();
+			});
+		};
+
 		return {
 			innerValue,
 			errorsBag,
 			reset,
+			restartValidation,
 		};
 	},
 });

package/src/components/Label/Label.stories.js

@@ -25,5 +25,22 @@ export const Primary = () => ({
 });
 
 export const Required = () => ({
-	template: '<farm-label :required="true">Label</farm-label>',
+	template: `<div>
+		<farm-label :required="true">Label</farm-label>
+		<farm-label required>Label</farm-label>
+	</div>`,
+});
+
+export const Tooltip = () => ({
+	template: `<div>
+		<farm-label required>
+			Label with tooltip
+			<farm-tooltip>
+				this is the tooltip!
+				<template v-slot:activator="{ on, attrs }">
+					<farm-icon size="sm" color="gray">help-circle</farm-icon>
+				</template>
+			</farm-tooltip>
+		</farm-label>
+	</div>`,
 });

package/src/components/Label/Label.vue

@@ -20,5 +20,5 @@ export default Vue.extend({
 });
 </script>
 <style lang="scss" scoped>
-@import 'Label.scss';
+@import 'Label';
 </style>

package/src/components/PromptUserToConfirm/PromptUserToConfirm.stories.js

@@ -1,14 +1,15 @@
 import PromptUserToConfirm from './PromptUserToConfirm';
 
 export default {
-	title: 'INteractions/PromptUserToConfirm',
+	title: 'Interactions/PromptUserToConfirm',
 	component: PromptUserToConfirm,
 	parameters: {
 		viewMode: 'docs',
 		docs: {
 			description: {
 				component: `Prompt User to Confirm<br />
-				selector: <em>farm-promptusertoconfirm</em>`,
+				selector: <em>farm-promptusertoconfirm</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
 			},
 		},
 	},
@@ -17,7 +18,7 @@ export default {
 export const Primary = () => ({
 	data() {
 		return {
-			model: {},
+			model: false,
 		};
 	},
 	template: `<div style="max-width: 320px"><farm-promptusertoconfirm v-model="model"/>
@@ -26,13 +27,18 @@ export const Primary = () => ({
 });
 
 export const CustomTitle = () => ({
-	template: '<div style="max-width: 320px"><farm-promptusertoconfirm title="Custom" /></div>',
+	data() {
+		return {
+			model: false,
+		};
+	},
+	template: '<div style="max-width: 320px"><farm-promptusertoconfirm title="Custom"  v-model="model" /></div>',
 });
 
 export const CustomMatchInput = () => ({
 	data() {
 		return {
-			model: {},
+			model: false,
 		};
 	},
 	template: `<div style="max-width: 320px">

package/src/components/PromptUserToConfirm/PromptUserToConfirm.vue

@@ -1,25 +1,15 @@
 <template>
-	<v-form v-model="formVal" autocomplete="off">
+	<farm-form v-model="formVal" autocomplete="off">
 		<farm-caption v-html="title" color="gray" />
-		<v-row>
-			<v-col cols="12" sm="12" class="mt-3 v-col-fieldset-default">
-				<v-text-field
-					v-model="matchInput"
-					id="form-confirm-remove"
-					color="secondary"
-					outlined
-					dense
-					:rules="[rules.checkRemove]"
-				></v-text-field>
-			</v-col>
-		</v-row>
-	</v-form>
+		<farm-textfield-v2
+			v-model="matchInput"
+			class="mt-3"
+			:rules="[rules.checkRemove]"
+		></farm-textfield-v2>
+	</farm-form>
 </template>
 <script lang="ts">
 import Vue from 'vue';
-import { VForm } from 'vuetify/lib/components/VForm';
-import { VTextField } from 'vuetify/lib/components/VTextField';
-import { VRow, VCol } from 'vuetify/lib/components/VGrid';
 export default Vue.extend({
 	name: 'farm-promptusertoconfirm',
 	props: {
@@ -35,6 +25,7 @@ export default Vue.extend({
 		 */
 		value: {
 			required: true,
+			type: Boolean,
 		},
 		/**
 		 * Title
@@ -44,12 +35,6 @@ export default Vue.extend({
 			default: 'Escreva no campo abaixo "EXCLUIR" para confirmar a exclusão.',
 		},
 	},
-	components: {
-		VForm,
-		VTextField,
-		VRow,
-		VCol,
-	},
 	data() {
 		return {
 			rules: {

package/src/components/TextFieldV2/TextFieldV2.stories.js

@@ -73,8 +73,10 @@ export const Validate = () => ({
 			v2: '',
 			v3: '',
 			v4: '',
+			v5: '',
 			rules: {
 				required: value => !!value || 'Required field',
+				requiredNoMessage: value => !!value || '',
 				email: v =>
 					!v ||
 					/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
@@ -86,6 +88,9 @@ export const Validate = () => ({
 		<farm-label required>Required field</farm-label>
 		<farm-textfield-v2 v-model="v1" :rules="[rules.required]" />
 
+		<farm-label required>Required field no message</farm-label>
+		<farm-textfield-v2 v-model="v5" :rules="[rules.requiredNoMessage]" />
+
 		<farm-label>E-mail</farm-label>
 		<farm-textfield-v2 v-model="v2" :rules="[rules.email]" />