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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "11.5.2",
+	"version": "11.5.4",
 	"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.scss

@@ -2,7 +2,7 @@
 @import '../../configurations/mixins';
 
 .farm-dialog__footer {
-    border-top: 1px solid var(--v-gray-lighten2);
+    border-top: 1px solid var(--farm-stroke-base);
     padding: gutter('md');
     display: flex;
     flex-direction: row;
@@ -10,7 +10,7 @@
 }
 
 .farm-btn {
-    margin-left: gutter();
+    margin-left: gutter('sm');
     margin-top: 0;
 
     .farm-icon {

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

@@ -234,4 +234,60 @@ export const DatePickers = () => ({
             </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 />
+				</farm-col>
+				<farm-col cols="12" md="3">
+					<farm-label>Label 2</farm-label>
+					<farm-textfield />
+				</farm-col>
+				<farm-col cols="12" md="3">
+					<farm-label>Label 3</farm-label>
+					<farm-textfield />
+				</farm-col>
+				<farm-col cols="12" md="3">
+					<farm-label>Label 4</farm-label>
+					<farm-textfield />
+				</farm-col>
+				<farm-col cols="12" md="6">
+					<farm-label>Label 6</farm-label>
+					<farm-textfield />
+				</farm-col>
+				<farm-col cols="12" md="2">
+					<farm-label>Label 7</farm-label>
+					<farm-textfield />
+				</farm-col>
+				<farm-col cols="12" md="4">
+					<farm-label>Label 4</farm-label>
+					<farm-textfield />
+				</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>
+    `,
 });

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

@@ -73,10 +73,8 @@ 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) ||
@@ -88,9 +86,6 @@ 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]" />
 
@@ -208,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/components/layout/Line/Line.scss

@@ -1,7 +1,7 @@
 .farm-line {
 	width: 100%;
 	border: none;
-	border-bottom: 1px solid var(--v-gray-lighten2);
+	border-bottom: 1px solid var(--farm-stroke-base);
 	height: 1px;
 	margin-top: 0;
 	&--spacing {

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