@farm-investimentos/front-mfe-components 11.8.0 → 11.8.2

package/package.json

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

package/src/components/Buttons/DefaultButton/DefaultButton.scss

@@ -3,255 +3,249 @@
 @import '../../../configurations/theme-colors';
 
 .farm-btn {
-    font-size: 14px;
-    align-items: center;
-    border-radius: 6px;
-    display: inline-flex;
-    flex: 0 0 auto;
-    font-weight: 700;
-    letter-spacing: 1.25px;
-    justify-content: center;
-    outline: 0;
-    position: relative;
-    text-decoration: none;
-    transition-duration: 0.28s;
-    transition-property: box-shadow, transform, opacity;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    user-select: none;
-    vertical-align: middle;
-    white-space: nowrap;
-    line-height: 16px;
-    height: 36px;
-    min-width: 64px;
-    padding: 0 16px;
-
-    &.farm-btn--full {
-        width: 100%;
-    }
-
-    @each $size,
-    $value in $sizes {
-        &#{'.farm-btn[size=' + $size +']'} {
-            font-size: $value;
-        }
-    }
-
-    &__content {
-        font-weight: 700;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 8px;
-
-        ::v-deep i.mdi {
-            font-size: 1rem;
-        }
-    }
-
-    &--round {
-        border-radius: 50%;
-    }
-
-    &.farm-btn--disabled {
-        background-color: #DADADA;
-        color: rgba(0, 0, 0, .26);
-        cursor: default;
-        border-color: #DADADA;
-
-        &:before {
-            display: none;
-        }
-
-        i.mdi.farm-icon {
-            color: rgba(0, 0, 0, .26);
-        }
-    }
-
-
-    
-    &:before {
-        transition: all 0.28s ease;
-        background-color: currentColor;
-        border-radius: inherit;
-        bottom: 0;
-        color: inherit;
-        content: '';
-        left: 0;
-        opacity: 0;
-        pointer-events: none;
-        position: absolute;
-        right: 0;
-        top: 0;
-    }
-
-    &:not(.farm-btn--plain):hover {
-        &:before {
-            opacity: 0.08;
-        }
-    }
-
-    &:not(.farm-btn--plain):not(.farm-btn--disabled):active {
-
-        &:before {
-            opacity: 0.16;
-        }
-    }
-
-    &.farm-btn--plain {
-        &:hover {
-            .farm-btn__content {
-                opacity: 0.68;
-            }
-        }
-
-        &:active {
-            &:before {
-                opacity: 0.08;
-            }
-        }
-    }
-
-    &.farm-btn--rounded {
-        border-radius: 1rem;
-    }
+	font-size: 14px;
+	align-items: center;
+	border-radius: 6px;
+	display: inline-flex;
+	flex: 0 0 auto;
+	font-weight: 700;
+	letter-spacing: 1.25px;
+	justify-content: center;
+	outline: 0;
+	position: relative;
+	text-decoration: none;
+	transition-duration: 0.28s;
+	transition-property: box-shadow, transform, opacity;
+	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	user-select: none;
+	vertical-align: middle;
+	white-space: nowrap;
+	line-height: 16px;
+	height: 36px;
+	min-width: 64px;
+	padding: 0 16px;
+
+	&.farm-btn--full {
+		width: 100%;
+	}
+
+	@each $size, $value in $sizes {
+		&#{'.farm-btn[size=' + $size + ']'} {
+			font-size: $value;
+		}
+	}
+
+	&__content {
+		font-weight: 700;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 8px;
+
+		::v-deep i.mdi {
+			font-size: 1rem;
+		}
+	}
+
+	&--round {
+		border-radius: 50%;
+	}
+
+	&.farm-btn--disabled {
+		background-color: #dadada;
+		color: rgba(0, 0, 0, 0.26);
+		cursor: default;
+		border-color: #dadada;
+
+		&:before {
+			display: none;
+		}
+
+		i.mdi.farm-icon {
+			color: rgba(0, 0, 0, 0.26);
+		}
+	}
+
+	&:before {
+		transition: all 0.28s ease;
+		background-color: currentColor;
+		border-radius: inherit;
+		bottom: 0;
+		color: inherit;
+		content: '';
+		left: 0;
+		opacity: 0;
+		pointer-events: none;
+		position: absolute;
+		right: 0;
+		top: 0;
+	}
+
+	&:not(.farm-btn--plain):hover {
+		&:before {
+			opacity: 0.08;
+		}
+	}
+
+	&:not(.farm-btn--plain):not(.farm-btn--disabled):active {
+		&:before {
+			opacity: 0.16;
+		}
+	}
+
+	&.farm-btn--plain {
+		background-color: transparent !important;
+		&:hover {
+			.farm-btn__content {
+				opacity: 0.68;
+			}
+		}
+
+		&:active {
+			&:before {
+				opacity: 0.08;
+			}
+		}
+	}
+
+	&.farm-btn--rounded {
+		border-radius: 1rem;
+	}
 }
 
 .farm-btn.farm-btn--icon {
-    border: none;
-    background: transparent;
-    transition: color 0.5s ease;
-
-    min-width: auto;
-    width: 36px;
-
-    .farm-btn__content i.mdi {
-        color: gray;
-    }
-
-    @each $size,
-    $value in $sizes {
-        &#{'.farm-btn[size=' + $size +']'} {
-            font-size: $value;
-        }
-    }
-
-    &[size='lg'] {
-        width: 48px;
-        height: 48px;
-    }
-
-    &[size='xl'] {
-        width: 64px;
-        height: 64px;
-    }
-
-    @each $color in $theme-colors-list {
-        &#{'.farm-btn--' + $color}:not(.farm-btn--disabled) {
-            &:hover {
-                color: var(--farm-#{$color}-base);
-            }
-
-            ::v-deep .farm-btn__content i.mdi {
-                color: var(--farm-#{$color}-base);
-            }
-        }
-    }
+	border: none;
+	background: transparent;
+	transition: color 0.5s ease;
+
+	min-width: auto;
+	width: 36px;
+
+	.farm-btn__content i.mdi {
+		color: gray;
+	}
+
+	@each $size, $value in $sizes {
+		&#{'.farm-btn[size=' + $size + ']'} {
+			font-size: $value;
+		}
+	}
+
+	&[size='lg'] {
+		width: 48px;
+		height: 48px;
+	}
+
+	&[size='xl'] {
+		width: 64px;
+		height: 64px;
+	}
+
+	@each $color in $theme-colors-list {
+		&#{'.farm-btn--' + $color}:not(.farm-btn--disabled) {
+			&:hover {
+				color: var(--farm-#{$color}-base);
+			}
+
+			::v-deep .farm-btn__content i.mdi {
+				color: var(--farm-#{$color}-base);
+			}
+		}
+	}
 }
 
 @each $color in $theme-colors-list {
-    #{'.farm-btn--' + $color} {
-        border: 1px solid var(--farm-#{$color}-base);
-        background-color: var(--farm-#{$color}-base);
-        color: white;
-
-        ::v-deep .farm-btn__content {
-            i.mdi {
-                color: white;
-            }
-
-            .farm-btn__content i.mdi {
-                color: black
-            }
-
-        }
-    }
-
-    .farm-btn--extra,
-    .farm-btn--white {
-        color: black;
-    }
-
-    :not(.farm-btn--disabled) {
-        &.farm-btn--outlined#{'.farm-btn--' + $color} {
-            border: 1px solid var(--farm-#{$color}-base);
-            background: white;
-            color: var(--farm-#{$color}-base);
-
-            &.farm-btn--extra,
-            &.farm-btn--white {
-                color: black;
-                border: 1px solid black;
-            }
-
-            .farm-btn__content i.mdi {
-                color: var(--farm-#{$color}-base);
-            }
-        }
-
-        &.farm-btn--plain#{'.farm-btn--' + $color} {
-            border: none;
-            background: white;
-            color: var(--farm-#{$color}-base);
-
-            &.farm-btn--extra,
-            &.farm-btn--white {
-                color: black;
-
-                .farm-btn__content i.mdi {
-                    color: black
-                }
-            }
-
-            .farm-btn__content i.mdi {
-                color: var(--farm-#{$color}-base);
-            }
-        }
-    }
-
-
+	#{'.farm-btn--' + $color} {
+		border: 1px solid var(--farm-#{$color}-base);
+		background-color: var(--farm-#{$color}-base);
+		color: white;
+
+		::v-deep .farm-btn__content {
+			i.mdi {
+				color: white;
+			}
+
+			.farm-btn__content i.mdi {
+				color: black;
+			}
+		}
+	}
+
+	.farm-btn--extra,
+	.farm-btn--white {
+		color: black;
+	}
+
+	:not(.farm-btn--disabled) {
+		&.farm-btn--outlined#{'.farm-btn--' + $color} {
+			border: 1px solid var(--farm-#{$color}-base);
+			background: white;
+			color: var(--farm-#{$color}-base);
+
+			&.farm-btn--extra,
+			&.farm-btn--white {
+				color: black;
+				border: 1px solid black;
+			}
+
+			.farm-btn__content i.mdi {
+				color: var(--farm-#{$color}-base);
+			}
+		}
+
+		&.farm-btn--plain#{'.farm-btn--' + $color} {
+			border: none;
+			background: white;
+			color: var(--farm-#{$color}-base);
+
+			&.farm-btn--extra,
+			&.farm-btn--white {
+				color: black;
+
+				.farm-btn__content i.mdi {
+					color: black;
+				}
+			}
+
+			.farm-btn__content i.mdi {
+				color: var(--farm-#{$color}-base);
+			}
+		}
+	}
 }
 
 .farm-btn--outlined.farm-btn--disabled {
-    border: 1px solid #D6D6D6;
-    color: #D6D6D6;
-    background-color: white;
+	border: 1px solid #d6d6d6;
+	color: #d6d6d6;
+	background-color: white;
 
-    i.mdi.farm-icon {
-        color: #D6D6D6;
-    }
+	i.mdi.farm-icon {
+		color: #d6d6d6;
+	}
 }
 
 .farm-btn--plain.farm-btn--disabled {
-    background-color: transparent;
-    border: none;
+	background-color: transparent;
+	border: none;
 }
 
 .farm-btn--elevated {
-    box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
+	box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%),
+		0px 1px 5px 0px rgb(0 0 0 / 12%);
 }
 
 @include upToSm {
-    .farm-btn {
-        padding: 0 12px;
-        line-height: 12px;
-        min-width: 48px;
-        height: 32px;
-    }
+	.farm-btn {
+		padding: 0 12px;
+		line-height: 12px;
+		min-width: 48px;
+		height: 32px;
+	}
 }
 
 @include forXsOnly {
-    .farm-btn.farm-btn--responsive {
-        width: 100%;
-        margin: 0;
-    }
-}
+	.farm-btn.farm-btn--responsive {
+		width: 100%;
+		margin: 0;
+	}
+}

package/src/components/DialogHeader/DialogHeader.vue

@@ -10,6 +10,7 @@
 		<farm-btn
 			v-if="hasCloseIcon"
 			icon
+			color="secondary"
 			class="farm-dialog-header__close"
 			title="Fechar"
 			@click="onClose"

package/src/components/IdCaption/IdCaption.scss

@@ -1,6 +1,6 @@
 .idcaption {
 	display: flex;
-	
+
 	.farm-icon-box {
 		margin-right: 8px;
 	}
@@ -17,11 +17,12 @@
 		}
 
 		.farm-typography {
-			
+
 			margin-bottom: 0;
 			display: flex;
 			flex: none;
-			> span {
+
+			>span {
 				position: relative;
 			}
 		}
@@ -33,4 +34,9 @@
 			top: -8px;
 		}
 	}
+
+	.farm-btn--clickable {
+		position: absolute;
+		top: -50%;
+	}
 }

package/src/components/IdCaption/IdCaption.stories.js

@@ -183,3 +183,21 @@ export const CustomTooltipColor = () => ({
     </farm-idcaption>
     `,
 });
+
+
+export const Teste = () => ({
+	template: `
+    <farm-idcaption 
+    icon="account-box-outline"
+    copy-text=""
+    :link="true"
+    >
+        <template v-slot:title>
+            Upper Line Text
+        </template>
+        <template v-slot:subtitle>
+            0
+        </template>
+    </farm-idcaption>
+    `,
+});

package/src/components/IdCaption/IdCaption.vue

@@ -7,7 +7,13 @@
 			<farm-caption variation="medium" v-if="hasTitle">
 				<span>
 					<slot name="title"></slot>
-					<farm-btn icon color="gray" v-if="link" @click="$emit('onLinkClick')">
+					<farm-btn
+						v-if="link"
+						icon
+						color="primary"
+						class="farm-btn--clickable"
+						@click="$emit('onLinkClick')"
+					>
 						<farm-icon size="xs">open-in-new</farm-icon>
 					</farm-btn>
 				</span>

package/src/components/MainFilter/MainFilter.vue

@@ -124,7 +124,6 @@ export default Vue.extend({
 				this.timer = null;
 			}
 			this.timer = setTimeout(() => {
-				console.log(this.inputValue);
 				this.$emit('onInputChange', this.inputValue);
 			}, 750);
 		},

package/src/components/Modal/Modal.vue

@@ -5,7 +5,7 @@
 			:class="{ 'farm-modal': true, ['farm-modal--size-' + size]: true }"
 			:style="styleObject"
 		>
-			<div class="farm-modal--container teste">
+			<div class="farm-modal--container">
 				<div class="farm-modal--header">
 					<!-- @slot header -->
 					<slot name="header"></slot>

package/src/components/MultipleFilePicker/MultipleFilePicker.vue

@@ -195,15 +195,19 @@ export default Vue.extend({
 				this.$emit('onFileChange', newValue);
 				return;
 			}
-			const invalidTypeArray = newValue.filter(
-				file =>
+			const invalidTypeArray = newValue.filter(file => {
+				const type = file.type;
+
+				return (
 					this.acceptedFileTypes !== '*' &&
-					this.acceptedFileTypes.indexOf(file.type) === -1
-			);
+					(this.acceptedFileTypes.indexOf(file.type) === -1 || !type)
+				);
+			});
 
 			if (invalidTypeArray.length > 0) {
 				const validTypeArray = newValue.filter(file => {
-					if (this.acceptedFileTypes.indexOf(file.type) === -1) {
+					const type = file.type;
+					if (this.acceptedFileTypes.indexOf(file.type) === -1 || !type) {
 						return false;
 					}
 					return true;

package/src/components/Select/Select.scss

@@ -4,9 +4,14 @@
 	background-color: var(--farm-neutral-lighten);
 }
 
+.farm-contextmenu {
+	width: 100%;
+}
+
 .farm-icon {
 	transition: all ease 0.3s;
 	cursor: pointer;
+
 	&--rotate {
 		transform: rotate(180deg);
 	}

package/src/components/Select/Select.stories.js

@@ -112,7 +112,6 @@ export const Validate = () => ({
 	</div>`,
 });
 
-
 export const Reset = () => ({
 	data() {
 		return {
@@ -130,7 +129,7 @@ export const Reset = () => ({
 	methods: {
 		click() {
 			this.$refs.select.reset();
-		}
+		},
 	},
 	template: `<div style="width: 480px">
 		<farm-select v-model="v" :items="items" ref="select" :rules="[rules.required]" />
@@ -139,4 +138,21 @@ export const Reset = () => ({
 			reset
 		</farm-btn>
 	</div>`,
-});
+});
+
+export const CustomKeys = () => ({
+	data() {
+		return {
+			v: 1,
+			items: [
+				{ id: 1, label: ' value 1' },
+				{ id: 2, label: ' value 2' },
+				{ id: 3, label: ' value 3' },
+			],
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-select v-model="v" :items="items" item-text="label" item-value="id" />
+		v-model: {{ v }}
+	</div>`,
+});