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

package/package.json

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

package/src/components/ContextMenu/ContextMenu.vue

@@ -84,7 +84,6 @@ export default Vue.extend({
 					}
 					window.addEventListener('click', outClick);
 					window.addEventListener('resize', resizeWindowHandler);
-
 					calculatePosition();
 				} else {
 					window.removeEventListener('click', outClick);
@@ -105,17 +104,23 @@ export default Vue.extend({
 
 			let offsetLeft = activatorBoundingClientRect.left;
 			if (popupClientRect.width > activatorBoundingClientRect.width) {
+				const w = popupClientRect.width < 96 ? 96 : popupClientRect.width;
 				offsetLeft =
-					offsetLeft + activatorBoundingClientRect.width / 2 - popupClientRect.width / 2;
+					activatorBoundingClientRect.left +
+					activatorBoundingClientRect.width / 2 -
+					w / 2;
 			}
+
 			styles.minWidth =
 				(activatorBoundingClientRect.width > 96
 					? parseInt(activatorBoundingClientRect.width)
 					: 96) + 'px';
 
 			//Do not allow to open outside window
+			
 			const rightEdge = offsetLeft + popupClientRect.width;
 			const clientWidth = document.documentElement.clientWidth;
+			
 			if (rightEdge > clientWidth - 12) {
 				offsetLeft = clientWidth - 12 - popupClientRect.width;
 			}
@@ -126,6 +131,7 @@ export default Vue.extend({
 				offsetTop -= bottomEdge - window.scrollY - clientHeight + 12;
 			}
 
+
 			styles.top = `${offsetTop}px`;
 			styles.left = `${offsetLeft}px`;
 			styles.zIndex = calculateMainZindex();

package/src/components/CopyToClipboard/CopyToClipboard.stories.js

@@ -9,7 +9,8 @@ export default {
 		docs: {
 			description: {
 				component: `CopyToClipboard<br />
-				selector: <em>farm-copytobclipboard</em>
+				selector: <em>farm-copytobclipboard</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},
@@ -30,3 +31,10 @@ export const NoIcon = () => ({
 		<farm-copytoclipboard toCopy="To be copied" :isIcon="false" />
     </div>`,
 });
+
+export const CustomSuccessMessage = () => ({
+	components: { 'farm-copytoclipboard': CopyToClipboard },
+	template: `<div style="max-width: 480px; padding-top: 80px; padding-left: 80px;">
+		<farm-copytoclipboard toCopy="To be copied" success-message="Custom Succes Message" />
+    </div>`,
+});

package/src/components/CopyToClipboard/CopyToClipboard.vue

@@ -28,18 +28,25 @@ export default Vue.extend({
 		 * Is button with icon?
 		 */
 		isIcon: { type: Boolean, default: true },
+		/**
+		 * Success message content after copy
+		 */
+		successMessage: {
+			type: String,
+			default: 'Conteúdo copiado para a área de trabalho',
+		},
 	},
 	setup(props) {
 		const show = ref(false);
 		const feedbackMessage = ref('');
 		const disabled = ref(false);
-		const { toCopy, isIcon } = toRefs(props);
+		const { toCopy, isIcon, successMessage } = toRefs(props);
 
 		const onClick = async () => {
 			disabled.value = true;
 			try {
 				await toClipboard(toCopy.value);
-				feedbackMessage.value = 'Conteúdo copiado para a área de trabalhado';
+				feedbackMessage.value = successMessage.value;
 			} catch (e) {
 				feedbackMessage.value = 'Ocorreu um erro: ' + e;
 			}
@@ -48,7 +55,7 @@ export default Vue.extend({
 			setTimeout(() => {
 				show.value = false;
 				disabled.value = false;
-			}, 1000);
+			}, 2000);
 		};
 
 		return {

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

@@ -203,11 +203,11 @@ export const Mask = () => ({
 	},
 	template: `<div style="width: 480px">
 		<farm-label>CPF Mask ({{ mask }})</farm-label>
-		<farm-textfield-v2 v-model="v" :v-mask="mask" />
+		<farm-textfield-v2 v-model="v" :mask="mask" />
 		v-model: {{ v }}
 
 		<farm-label>Number Mask (R$ ##.###.###,##)</farm-label>
-		<farm-textfield-v2 v-model="v2" :v-mask="currencyMask" />
+		<farm-textfield-v2 v-model="v2" :mask="currencyMask" />
 		v-model: {{ v2 }}
 
 	</div>`,

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -10,19 +10,27 @@
 		}"
 	>
 		<div class="farm-textfield--input">
-			<button type="button" v-if="icon && iconPosition === 'left'" @click="$emit('onClickIcon')">
+			<button
+				type="button"
+				v-if="icon && iconPosition === 'left'"
+				@click="$emit('onClickIcon')"
+			>
 				<farm-icon color="gray" size="20px">{{ icon }}</farm-icon>
 			</button>
 			<input
 				v-bind="$attrs"
 				v-model="innerValue"
-				v-mask="$props.vMask"
+				v-mask="mask"
 				:disabled="disabled"
 				:readonly="readonly"
 				@keyup="onKeyUp"
 				@blur="onBlur"
 			/>
-			<button type="button" v-if="icon && iconPosition === 'right'" @click="$emit('onClickIcon')">
+			<button
+				type="button"
+				v-if="icon && iconPosition === 'right'"
+				@click="$emit('onClickIcon')"
+			>
 				<farm-icon color="gray" size="20px">{{ icon }}</farm-icon>
 			</button>
 		</div>
@@ -95,7 +103,7 @@ export default Vue.extend({
 		/**
 		 * Mask
 		 */
-		vMask: {
+		mask: {
 			default: '',
 			type: [String, Function],
 		},

package/src/scss/FormOverrides.scss

@@ -10,7 +10,7 @@
     }
 
     &.v-input {
-        &.v-input--dense.v-text-field.v-text-field--outlined {
+        &.v-text-field.v-text-field--outlined {
             .v-input__slot {
                 min-height: 36px !important;
                 height: 36px;
@@ -22,6 +22,15 @@
                 .v-select__selection {
                     font-size: 0.75rem;
                 }
+                .v-input__append-inner {
+					margin-top: 8px;
+				}
+                .v-input__prepend-inner {
+                    margin-top: 8px;
+                }
+            }
+            .v-input__prepend-outer {
+                margin-top: 8px;
             }
             &.v-input--is-label-active.v-input--is-focused {
                 .v-input__slot fieldset {
@@ -154,3 +163,43 @@
         }
     }
 }
+
+
+//temporary solution for v-data-table checkboxes
+.v-data-table__checkbox.v-simple-checkbox {
+	.v-icon.v-icon {
+		font-size: 22px;
+		color: var(--farm-neutral-darken);
+		&.mdi-checkbox-marked,
+		&.mdi-minus-box {
+			color: var(--farm-primary-base);
+		}
+	}
+	.v-input--selection-controls__ripple {
+		display: none;
+	}
+}
+
+.v-list.v-select-list.v-sheet.theme--light.v-list--dense.theme--light {
+	
+	.v-list-item.v-list-item--link {
+		padding: 8px 12px;
+		height: 36px;
+		border-bottom: none;
+		&:hover {
+			background-color: var(--farm-primary-lighten);
+		}
+	}
+	.v-list-item .v-list-item__content {
+		padding: 0;
+	}
+	.v-list-item__title {
+		font-weight: 700;
+		font-size: 12px;
+		color: var(--farm-text-primary);
+		line-height: 12px;
+	}
+	.v-list-item__action:first-child {
+		margin-right: 16px;
+	}
+}