@farm-investimentos/front-mfe-components 14.2.1 → 15.0.0

package/src/scss/VuejsDialog.scss

@@ -1,86 +1,93 @@
 @import 'vuejs-dialog/dist/vuejs-dialog.min';
 @import '../components/Buttons/DefaultButton/DefaultButton.scss';
 
-
 .dg-main-content {
-    font-family: Montserrat, sans-serif !important;
+	font-family: 'Manrope', sans-serif !important;
 }
 
 .dg-content-body {
-    border-bottom: 1px solid var(--farm-stroke-base);
-    margin: 0 -15px;
-    padding: 0 16px;
-    color: var(--farm-text-base);
-    font-size: 12px;
+	border-bottom: 1px solid var(--farm-gray-lighten);
+	margin: 0 -15px;
+	padding: 0 16px;
+	color: var(--farm-text-base);
+	font-size: 12px;
 }
 
 .dg-title {
-    margin: 0 -15px;
-    border-bottom: 1px solid var(--farm-stroke-base);
-    padding: 0 16px;
-    color: var(--farm-primary-base);
-    height: 32px;
-    font-size: 12px;
+	margin: 0 -15px;
+	border-bottom: 0;
+	padding: 0 16px;
+	color: var(--farm-bw-black-80);
+	height: 32px;
+	font-size: 12px;
+	font-weight: 600;
 }
 
 .dg-content-body--has-title .dg-content,
 .dg-content {
-    margin: 24px 0;
-    font-size: 12px;
-    line-height: 20px;
-    word-break: break-word;
-
-    ul {
-        margin-left: 16px;
-    }
+	margin: 24px 0;
+	font-size: 12px;
+	line-height: 20px;
+	word-break: break-word;
+
+	ul {
+		margin-left: 16px;
+	}
 }
 
 .dg-content-footer {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-end;
 }
 
 .dg-btn {
-    @extend .farm-btn;
+	@extend .farm-btn;
+	border: 0;
 }
 
 .dg-btn--ok {
-    @extend .farm-btn--primary;
+	@extend .farm-btn--primary;
 }
 
 .dg-btn--cancel {
-    @extend .farm-btn--primary;
-    @extend .farm-btn--outlined;
-    margin-right: 8px;
+	@extend .farm-btn--primary;
+	@extend .farm-btn--plain;
+	margin-right: 8px;
+
+	&:hover{
+		text-decoration: underline;
+		text-underline-offset: 6px;
+		opacity: 0.86;
+	}
 }
 
 .dg-backdrop {
-    background-color: rgba(0, 0, 0, .46);
+	background-color: rgba(0, 0, 0, 0.46);
 }
 
 .dg-parent-nofooter {
-    .dg-content-footer {
-        display: none;
-    }
-
-    .dg-content-body {
-        border-bottom: none;
-        padding-bottom: 0;
-    }
-
-    .dg-content-body--has-title .dg-content,
-    .dg-content {
-        margin-bottom: 8px;
-    }
+	.dg-content-footer {
+		display: none;
+	}
+
+	.dg-content-body {
+		border-bottom: none;
+		padding-bottom: 0;
+	}
+
+	.dg-content-body--has-title .dg-content,
+	.dg-content {
+		margin-bottom: 8px;
+	}
 }
 
 .dg-parent-error {
-    .dg-btn--ok {
-        @extend .farm-btn--error;
-    }
-
-    .dg-title {
-        color: var(--farm-error-base);
-    }
-}
+	.dg-btn--ok {
+		@extend .farm-btn--error;
+	}
+
+	.dg-title {
+		color: var(--farm-error-base);
+	}
+}

package/src/scss/cssVariablesGenerator.scss

@@ -1,22 +1,25 @@
 @import '../configurations/theme-colors';
 
 :root {
+	@each $name, $color in $theme-colors {
+		#{"--farm-" + $name + "-base"}: themeColor($name, 'base');
+		#{"--farm-" + $name + "-lighten"}: themeColor($name, 'lighten');
+		#{"--farm-" + $name + "-darken"}: themeColor($name, 'darken');
+	}
 
-    @each $name,
-    $color in $theme-colors {
-        #{"--farm-" + $name + "-base"}: themeColor($name, "base");
-        #{"--farm-" + $name + "-lighten"}: themeColor($name, "lighten");
-        #{"--farm-" + $name + "-darken"}: themeColor($name, "darken");
-    }
+	@each $name, $color in $text-colors {
+		#{"--farm-text-" + $name}: $color;
+	}
 
-    @each $name,
-    $color in $text-colors {
-        #{"--farm-text-" + $name}: $color;
-    }
+	@each $name, $color in $stroke-colors {
+		#{"--farm-stroke-" + $name}: $color;
+	}
 
+	@each $name, $color in $bw-colors {
+		#{"--farm-bw-" + $name}: $color;
+	}
 
-    @each $name,
-    $color in $stroke-colors {
-        #{"--farm-stroke-" + $name}: $color;
-    }
+	@each $name, $color in $background-colors {
+		#{"--farm-background-" + $name}: $color;
+	}
 }

package/src/scss/utils.scss

@@ -22,18 +22,6 @@
 	min-height: 8rem;
 }
 
-.v-data-table__clickable {
-	tbody tr {
-		cursor: pointer;
-		&:hover td {
-			opacity: 1;
-			.status-chip {
-				cursor: pointer;
-			}
-		}
-	}
-}
-
 .v-list__clickable {
 	.v-list-item__title {
 		cursor: pointer;
@@ -43,10 +31,6 @@
 	}
 }
 
-.tabs-container {
-	border-bottom: 1px solid var(--v-gray-lighten2);
-}
-
 tr.v-data-table__empty-wrapper {
 	td {
 		background-color: white !important;
@@ -56,241 +40,6 @@ tr.v-data-table__empty-wrapper {
 	}
 }
 
-.v-tabs {
-	.v-tab {
-		font-weight: 700;
-		font-size: 0.875rem;
-		padding: 1rem 2rem;
-	}
-}
-
-.v-picker {
-	.v-picker__actions {
-		margin: 0 0.5rem 0.5rem;
-	}
-	.v-date-picker-header__value {
-		text-align: left;
-
-		button:first-letter {
-			text-transform: capitalize;
-		}
-		button:hover:after {
-			border-top-color: var(--v-secondary-base);
-		}
-		button:after {
-			position: absolute;
-			content: '';
-			width: 0px;
-			height: 0px;
-			border-top: 0.25rem solid var(--v-primary-base);
-			border-right: 0.25rem solid transparent;
-			border-bottom: 0.25rem solid transparent;
-			border-left: 0.25rem solid transparent;
-			margin-left: 0.5rem;
-			margin-top: 0.5rem;
-		}
-	}
-	.v-date-picker-header {
-		display: grid;
-		grid-template-columns: 1fr 60px 36px;
-		grid-template-areas: ' a b c ';
-		margin-top: 0.5rem;
-
-		.v-btn:nth-child(1) {
-			grid-area: b;
-		}
-		> div {
-			grid-area: a;
-		}
-		.v-btn:nth-child(3) {
-			grid-area: c;
-		}
-	}
-
-	.v-date-picker-table__current.v-btn--active {
-		color: white;
-	}
-	.v-date-picker-header {
-		padding: 0;
-		margin-top: 16px;
-		margin-bottom: 16px;
-		margin-left: 4px;
-
-		.mdi-chevron-left::before,
-		.mdi-chevron-right::before {
-			color: var(--farm-neutral-darken);
-			font-size: 20px;
-			font-weight: 900;
-		}
-	}
-
-	.v-picker__body:has(div > .v-date-picker-years) {
-		li {
-			color: var(--farm-neutral-darken);
-			font-size: 12px;
-			font-weight: 500;
-			width: 70px;
-			margin: 0 auto;
-			border-radius: 5px;
-
-			&.active {
-				color: #fff;
-				background-color: var(--farm-primary-base);
-				border: 1px solid var(--farm-primary-base);
-			}
-
-			&:hover:not(.active) {
-				background-color: var(--farm-primary-lighten);
-			}
-		}
-	}
-
-	.v-date-picker-header__value {
-		button {
-			padding-left: 0;
-		}
-	}
-
-	.v-picker__actions {
-		margin-bottom: 24px;
-	}
-
-	.v-date-picker-table {
-		padding: 0 40px;
-		margin-bottom: 24px;
-
-		table {
-			height: 100%;
-		}
-
-		table thead th {
-			color: var(--farm-neutral-darken);
-			font-size: 16px;
-			font-weight: 700;
-		}
-
-		table tbody td .v-btn {
-			color: var(--farm-neutral-darken);
-			font-size: 12px;
-			font-weight: 500;
-		}
-
-		table tbody td .v-btn.v-btn--disabled {
-			color: var(--farm-gray-lighten);
-		}
-
-		table tbody td .v-btn.v-date-picker-table__current,
-		.v-btn.v-btn--active {
-			border-radius: 5px;
-			border-color: var(--farm-primary-base);
-			border-width: 2px;
-		}
-
-		table tbody td .v-btn.v-date-picker-table__current {
-			color: var(--farm-primary-base);
-		}
-
-		table tbody td .v-btn.v-btn--active {
-			color: white;
-		}
-
-		table tbody td .v-btn--rounded {
-			border-radius: 5px;
-		}
-
-		table tbody td .v-btn {
-			&:not(.v-btn--active):hover::before {
-				background-color: var(--farm-primary-lighten);
-				opacity: 1;
-			}
-			&::before {
-				background-color: transparent;
-			}
-		}
-	}
-
-	&.rangedatepicker .v-date-picker-table {
-		table tbody td .v-btn.v-btn--active {
-			&:not(.v-date-picker--first-in-range, .v-date-picker--last-in-range) {
-				background: var(--farm-primary-lighten);
-				color: var(--farm-primary-base);
-				border-radius: 0;
-				width: 37px;
-			}
-
-			&.v-date-picker--first-in-range,
-			&.v-date-picker--last-in-range {
-				width: 37px;
-			}
-
-			&.v-date-picker--first-in-range {
-				border-top-right-radius: 0;
-				border-bottom-right-radius: 0;
-				border-top-left-radius: 5px;
-				border-bottom-left-radius: 5px;
-			}
-
-			&.v-date-picker--last-in-range {
-				border-top-right-radius: 5px;
-				border-bottom-right-radius: 5px;
-				border-top-left-radius: 0;
-				border-bottom-left-radius: 0;
-			}
-
-			&.v-date-picker--last-in-range.v-date-picker--first-in-range {
-				border-radius: 5px;
-			}
-		}
-	}
-	&.rangedatepicker.invert-date .v-date-picker-table {
-		table tbody td .v-btn.v-btn--active {
-			&.v-date-picker--first-in-range {
-				border-top-left-radius: 0;
-				border-bottom-left-radius: 0;
-				border-top-right-radius: 5px;
-				border-bottom-right-radius: 5px;
-			}
-
-			&.v-date-picker--last-in-range {
-				border-top-left-radius: 5px;
-				border-bottom-left-radius: 5px;
-				border-top-right-radius: 0;
-				border-bottom-right-radius: 0;
-			}
-		}
-	}
-}
-
-.v-icon.v-icon__extral4 {
-	background: var(--v-extra-lighten4);
-	color: white !important;
-}
-
-.v-icon.v-icon__secondary4 {
-	background: var(--v-secondary-lighten4);
-	color: var(--v-secondary-base) !important;
-}
-
-span.span__type--cdca {
-	color: var(--v-secondary-base);
-	.v-chip {
-		background-color: var(--v-secondary-base) !important;
-		color: white;
-	}
-	.v-icon {
-		color: var(--v-secondary-base);
-	}
-}
-span.span__type--cprf {
-	color: var(--v-accent-base);
-	.v-chip {
-		background-color: var(--v-accent-base) !important;
-		color: white;
-	}
-	.v-icon {
-		color: var(--v-accent-base);
-	}
-}
 
 .mf-Containers.mf-Containers-authenticated {
 	> .mf-Container > div.v-application {
@@ -311,6 +60,23 @@ body.body--has-footer {
 	}
 }
 
+//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;
+	}
+}
+
 @media (max-width: 600px) {
 	.container-main > .col {
 		max-width: calc(100% - 0.5rem);

package/src/components/FilePicker/FilePicker.scss

@@ -1,53 +0,0 @@
-section {
-    border: 2px dashed var(--v-gray-lighten1);
-    border-radius: 2rem;
-    background-color: var(--v-gray-lighten4);
-    padding: 1rem;
-    position: relative;
-    cursor: pointer;
-    height: 12rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-
-    input {
-        opacity: 0;
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        cursor: pointer;
-    }
-
-    &.highlight {
-        background: var(--v-secondary-lighten5);
-        opacity: 0.5;
-    }
-
-    .selectfile-container {
-        text-align: center;
-        .farm-icon {
-            font-size: 2.25rem;
-            margin-bottom: 1rem;
-        }
-        p {
-            font-weight: 600;
-            color: var(--v-gray-base);
-        }
-    }
-
-    .reset-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        > p {
-            margin-bottom: 0;
-            font-size: 0.75rem;
-        }
-        .farm-btn {
-            margin-top: 1rem;
-        }
-    }
-}

package/src/components/FilePicker/FilePicker.stories.js

@@ -1,14 +0,0 @@
-import FilePicker from './FilePicker.vue';
-
-export default {
-	title: 'Form/FilePicker',
-	component: FilePicker,
-};
-
-export const Primary = () => ({
-	template: '<FilePicker />',
-});
-
-export const MaxFileSize = () => ({
-	template: '<FilePicker maxFileSize="0.1" />',
-});

package/src/components/FilePicker/FilePicker.vue

@@ -1,109 +0,0 @@
-<template>
-	<section ref="container" id="droparea-container">
-		<input
-			type="file"
-			name="file"
-			:accept="acceptedFileTypes"
-			@change="fileChange($event.target.files)"
-		/>
-		<div v-if="!selectedFile" class="selectfile-container">
-			<farm-icon @click="triggerClick">cloud-upload</farm-icon>
-			<p>Clique para selecionar ou arraste o arquivo aqui</p>
-		</div>
-		<div v-if="selectedFile || maxSizeReach" class="reset-container">
-			<div v-if="selectedFile">
-				<farm-icon>file</farm-icon> Arquivo selecionado: {{ selectedFile.name }} ({{
-					Math.floor(selectedFile.size / 1024)
-				}}kB)
-			</div>
-
-			<p v-if="maxSizeReach" v-html="maxSizeReachMsg"></p>
-
-			<farm-btn outlined class="farm-btn--responsive" title="Escolher outro" @click="reset">
-				Escolher outro
-			</farm-btn>
-		</div>
-	</section>
-</template>
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	name: 'farm-filepicker',
-	props: {
-		/*
-		 * Accepted file types
-		 */
-		acceptedFileTypes: {
-			type: String,
-			default: '*',
-		},
-		/**
-		 * Max file size (in MB)
-		 */
-		maxFileSize: {
-			default: null,
-		},
-	},
-	data() {
-		return {
-			selectedFile: null,
-			dropArea: null,
-			maxSizeReach: false,
-		};
-	},
-	computed: {
-		maxSizeReachMsg() {
-			return `Arquivo ultrapassou o tamanho máximo de ${this.maxFileSize}MB`;
-		},
-		inputEl() {
-			return this.$refs.container.querySelector('input');
-		}
-	},
-	mounted() {
-		this.dropArea = this.$refs.container;
-		this.addListeners();
-	},
-	methods: {
-		reset() {
-			this.inputEl.value = '';
-			this.$emit('onReset');
-			this.maxSizeReach = false;
-			this.selectedFile = null;
-		},
-		fileChange(fileList: Array<File>) {
-			this.maxSizeReach = false;
-			if (!fileList.length || fileList.length > 1) return;
-
-			if (this.maxFileSize) {
-				const sizeInMB = fileList[0].size / (1024 * 1024);
-
-				if (sizeInMB > this.maxFileSize) {
-					this.maxSizeReach = true;
-					return;
-				}
-			}
-			this.selectedFile = fileList[0];
-			this.$emit('onFileChange', this.selectedFile);
-		},
-		handlerFunctionHighlight() {
-			this.dropArea.classList.add('highlight');
-		},
-		handlerFunctionUnhighlight() {
-			this.dropArea.classList.remove('highlight');
-		},
-		addListeners() {
-			this.dropArea.addEventListener('dragenter', this.handlerFunctionHighlight, false);
-			this.dropArea.addEventListener('dragleave', this.handlerFunctionUnhighlight, false);
-			this.dropArea.addEventListener('dragover', this.handlerFunctionHighlight, false);
-			this.dropArea.addEventListener('drop', this.handlerFunctionUnhighlight, false);
-		},
-		triggerClick() {
-			this.inputEl.click();
-		}
-	},
-});
-</script>
-<style scoped lang="scss">
-@import './FilePicker.scss';
-</style>