@farm-investimentos/front-mfe-components 11.5.6 → 11.6.1

package/package.json

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

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

@@ -24,6 +24,6 @@ describe('ContextMenu component', () => {
 		it('Should handle click', () =>{
 			component.click();
 			expect(component.inputValue).toBeTruthy();
-		})
-	})
+		});
+	});
 });

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

@@ -257,7 +257,7 @@ export const Grid = () => ({
 				</farm-col>
 				<farm-col cols="12" md="3">
 					<farm-label>Label 3</farm-label>
-					<farm-textfield />
+					<farm-textfield hint="some hint text" persistent-hint="true"  />
 				</farm-col>
 				<farm-col cols="12" md="3">
 					<farm-label>Label 4</farm-label>

package/src/components/layout/Row/Row.scss

@@ -35,4 +35,8 @@
         margin: 0 -#{2 * gutter('vuetify')};
     }
 
+    &--y-grid-gutters > .farm-col {
+        margin-top: 12px;
+        margin-bottom: 12px;
+    }
 }

package/src/components/layout/Row/Row.stories.js

@@ -71,3 +71,42 @@ export const Justify = () => ({
 export const NoDefaultGutters = () => ({
 	template: '<farm-row :no-default-gutters="true">no gutters</farm-row>',
 });
+
+export const DefaultGrid = () => ({
+	template: `<div>
+		<farm-row>
+			<farm-col md="6">
+				<div style="border:1px solid red;">col 1</div>
+			</farm-col>
+			<farm-col md="6">
+				<div style="border:1px solid red;">col 2</div>
+			</farm-col>
+			<farm-col md="6">
+				<div style="border:1px solid red;">col 3</div>
+			</farm-col>
+			<farm-col md="6">
+				<div style="border:1px solid red;">col 4</div>
+			</farm-col>
+		</farm-row>
+	</div>`,
+});
+
+
+export const yGridGutters = () => ({
+	template: `<div>
+		<farm-row y-grid-gutters>
+			<farm-col md="6">
+				<div style="border:1px solid red;">col 1</div>
+			</farm-col>
+			<farm-col md="6">
+				<div style="border:1px solid red;">col 2</div>
+			</farm-col>
+			<farm-col md="6">
+				<div style="border:1px solid red;">col 3</div>
+			</farm-col>
+			<farm-col md="6">
+				<div style="border:1px solid red;">col 4</div>
+			</farm-col>
+		</farm-row>
+	</div>`,
+});

package/src/components/layout/Row/Row.vue

@@ -8,6 +8,7 @@
 			[`farm-row--justify-${justify}`]: justify,
 			'farm-row--no-default-gutters': noDefaultGutters,
 			'farm-row--extra-decrease': extraDecrease,
+			'farm-row--y-grid-gutters': yGridGutters,
 		}"
 	>
 		<slot></slot>
@@ -60,6 +61,13 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Add gutters to farm-cols in Y axis
+		 */
+		yGridGutters: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	inheritAttrs: true,
 });

package/src/scss/FormOverrides.scss

@@ -1,7 +1,9 @@
 .theme--light {
+
 	.fieldset-default,
 	.v-col-fieldset-default {
 		border: 0;
+
 		label {
 			font-weight: bold;
 			display: block;
@@ -15,49 +17,61 @@
 				.v-input__append-inner {
 					margin-top: 8px;
 				}
+
 				.v-input__prepend-inner {
 					margin-top: 8px;
 				}
 			}
+
 			.v-input__prepend-outer {
 				margin-top: 8px;
 			}
 		}
+
 		&.v-text-field.v-input--dense.v-text-field--outlined {
 			.v-input__slot {
 				min-height: 36px !important;
 				height: 36px;
 				background: white;
+
 				fieldset {
 					border-color: var(--v-gray-lighten2);
 				}
+
 				input,
 				.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 {
 					border-color: var(--v-secondary-base);
 				}
+
 				input {
 					color: var(--v-secondary-base);
 				}
 			}
+
 			&.error--text {
 				.v-input__slot fieldset {
 					border-color: var(--v-error-base);
 					border-width: 1px;
 				}
+
 				&:after {
 					content: '\F0028';
 					position: absolute;
@@ -68,27 +82,46 @@
 			}
 		}
 	}
+
 	.v-textarea.v-text-field--enclosed .v-text-field__slot {
 		textarea {
 			font-size: 0.75rem;
 			line-height: 1.25rem;
 		}
 	}
-	.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state)
-		> .v-input__control
-		> .v-input__slot
-		fieldset {
+
+	.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state)>.v-input__control>.v-input__slot fieldset {
 		border-color: var(--v-gray-lighten2);
 	}
-	.v-text-field--outlined.v-input--is-focused > .v-input__control > .v-input__slot fieldset {
+
+	.v-text-field--outlined.v-input--is-focused>.v-input__control>.v-input__slot fieldset {
 		border-color: var(--v-gray-lighten2);
 		border-width: 1px;
 	}
+
 	.v-text-field .v-text-field__details {
 		padding-left: 0 !important;
+		min-height: 16px !important;
+		margin-bottom: 0 !important;
+	}
+}
+
+.v-text-field {
+	.v-input__slot {
+		margin-bottom: 4px;
+	}
+
+	&.v-text-field--enclosed .v-text-field__details {
+		min-height: 16px !important;
+		margin-bottom: 4px !important;
+	}
+
+	&.v-text-field--solo .v-input__control {
+		min-height: 30px;
 	}
 }
-.v-form {
+
+.v-text-field .v-form {
 	.v-col-fieldset-default {
 		margin-bottom: 0;
 		padding-bottom: 0;
@@ -97,57 +130,63 @@
 			color: var(--v-error-base);
 		}
 	}
+
 	.row.form__footer-buttons--right {
 		margin: 0;
 		margin-top: 1rem;
 		padding: 0;
 		justify-content: flex-end;
+
 		.v-btn {
 			margin-left: 1rem;
 		}
 	}
 }
+
 .v-form.v-form-importfile {
-	> .row:first-child {
+	>.row:first-child {
 		border-bottom: 1px solid var(--v-gray-lighten2);
 		padding: 1rem;
+
 		h3 {
 			font-weight: 700;
 			color: var(--v-secondary-base);
 		}
 	}
 
-	> .row:nth-child(2) {
+	>.row:nth-child(2) {
 		padding: 1rem;
+
 		legend {
 			font-weight: 700;
 			width: 100%;
 		}
 	}
 }
+
 .v-form.form-custom-disabled {
 	.theme--light {
 		&.v-text-field.v-input--is-disabled .v-input__slot {
 			padding-left: 0;
+
 			input,
 			label {
 				color: var(--v-primary-base);
 				font-size: 1rem !important;
 			}
 		}
+
 		&.v-text-field.v-input--is-disabled .v-input__slot fieldset {
 			border: none;
 		}
 	}
 }
-.v-text-field.v-text-field--solo .v-input__control {
-	min-height: 30px;
-}
 
 .theme--light.v-input--switch {
 	.v-input--switch__thumb {
 		color: #ffffff !important;
 	}
+
 	.v-input--switch__track.theme--light {
 		background: #f0643b;
 
@@ -155,6 +194,7 @@
 			background-color: var(--v-secondary-base);
 		}
 	}
+
 	label {
 		font-size: 0.5rem;
 		font-weight: 600;
@@ -167,9 +207,11 @@
 	.v-form {
 		.row.form__footer-buttons--right {
 			justify-content: unset;
+
 			.v-btn {
 				margin-left: 0;
 			}
+
 			.v-btn:not(:first-child) {
 				margin-top: 1rem;
 			}
@@ -182,11 +224,13 @@
 	.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;
 	}
@@ -197,20 +241,24 @@
 		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;
 	}
-}
+}