@farm-investimentos/front-mfe-components 15.0.2 → 15.0.4

package/package.json

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

package/src/components/AlertReload/AlertReload.scss

@@ -1,7 +1,7 @@
 @import '../../configurations/functions';
 
 .farm-alert-reload {
-    border: 1px solid var(--v-error-base);
+    border: 1px solid var(--farm-error-base);
     border-radius: 8px;
     padding: gutter('sm') gutter('md');
     display: flex;

package/src/components/Buttons/ExportButton/ExportButton.stories.js

@@ -27,3 +27,10 @@ export const Disabled = () => ({
 export const List = () => ({
 	template: `<farm-btn-export :optionsList="[{ key: 1, label: 'XLS teste'}, { key: 2, label: 'CSV teste novo'}]" />`,
 });
+
+export const CustomColor = () => ({
+	template: `<div>
+		<farm-btn-export color="info" />
+		<farm-btn-export color="info" :optionsList="[{ key: 1, label: 'XLS teste'}, { key: 2, label: 'CSV teste novo'}]" />
+	</div>`,
+});

package/src/components/Buttons/ExportButton/ExportButton.vue

@@ -5,15 +5,16 @@
 		class="farm-btn--responsive"
 		outlined
 		title="Exportar"
-		color="primary"
+		:color="$attrs.color"
 		:disabled="disabled"
 	>
 		<i :class="{ 'mr-2': true, 'mdi-file-export-outline': true, mdi: true }"></i>
 		Exportar
 	</farm-btn>
+	
 	<farm-contextmenu v-else v-model="value" :bottom="true">
 		<template v-slot:activator="{}">
-			<farm-btn outlined title="Exportar" color="primary" @click="toggleValue">
+			<farm-btn outlined title="Exportar" :color="$attrs.color" @click="toggleValue">
 				Exportar
 				<farm-icon class="ml-2"> chevron-{{ value ? 'up' : 'down' }} </farm-icon>
 			</farm-btn>
@@ -22,7 +23,7 @@
 			<farm-listitem
 				v-for="item in optionsList"
 				clickable
-				hoverColor="primary"
+				:hoverColor="$attrs.color || 'primary'"
 				hoverColorVariation="lighten"
 				:key="'exportbutton_key_' + item.label"
 				:title="item.label"

package/src/components/Buttons/ImportButton/ImportButton.stories.js

@@ -13,3 +13,11 @@ export const CustomLabel = () => ({
 	components: { ImportButton },
 	template: '<farm-btn-import label="Label custom" />',
 });
+
+export const CustomColors = () => ({
+	components: { ImportButton },
+	template: `<div>
+		<farm-btn-import color="info" variation="lighten" />
+		<farm-btn-import color="info" variation="darken" />
+	</div>`,
+});

package/src/components/Buttons/ImportButton/ImportButton.vue

@@ -1,5 +1,10 @@
 <template>
-	<farm-btn class="farm-btn--responsive farm-btn--import" color="secondary" title="Importar" @click="onClick">
+	<farm-btn
+		class="farm-btn--responsive farm-btn--import"
+		title="Importar"
+		v-bind="$attrs"
+		@click="onClick"
+	>
 		<farm-icon>upload</farm-icon>
 		{{ label }}
 	</farm-btn>

package/src/components/Buttons/MultiImportButton/MultiImportButton.stories.js

@@ -20,3 +20,16 @@ export const List = () => ({
 			@onClick="listener"
 		/>`,
 });
+
+export const CustomColor = () => ({
+	methods: {
+		listener(key) {
+			alert('Handler for item ' + key);
+		},
+	},
+	template: `<farm-btn-multipleimport
+			color="info"
+			:optionsList="[{ listenerKey: 1, title: 'XLS teste'}, { listenerKey: 2, title: 'CSV teste novo'}]"
+			@onClick="listener"
+		/>`,
+});

package/src/components/Buttons/MultiImportButton/MultiImportButton.vue

@@ -1,7 +1,7 @@
 <template>
 	<farm-contextmenu v-model="value" :bottom="true">
 		<template v-slot:activator="{}">
-			<farm-btn outlined title="Importar" color="secondary" @click="toggleValue">
+			<farm-btn outlined title="Importar" v-bind="$attrs">
 				Importar
 				<farm-icon class="ml-2"> chevron-{{ value ? 'up' : 'down' }} </farm-icon>
 			</farm-btn>
@@ -10,7 +10,7 @@
 			<farm-listitem
 				v-for="item in optionsList"
 				clickable
-				hoverColor="primary"
+				:hoverColor="$attrs.color || 'primary'"
 				hoverColorVariation="lighten"
 				:key="'importbutton_key_' + item.title"
 				:title="item.title"
@@ -49,9 +49,6 @@ export default Vue.extend({
 		onClick(key) {
 			this.$emit('onClick', key);
 		},
-		toggleValue() {
-			this.value = !this.value;
-		},
 	},
 });
-</script>
+</script>

package/src/components/Buttons/ToggleButton/ToggleButton.stories.js

@@ -9,10 +9,14 @@ export const Primary = () => ({
 	template: '<farm-btn-toggle label="Botão" />',
 });
 
-export const Secondary = () => ({
+export const PositionRight = () => ({
 	template: '<farm-btn-toggle label="Botão" position="right" />',
 });
 
 export const Opened = () => ({
 	template: '<farm-btn-toggle label="Botão" :pressed="true" />',
 });
+
+export const CustomColor = () => ({
+	template: '<farm-btn-toggle color="info" label="Botão" />',
+});

package/src/components/Buttons/ToggleButton/ToggleButton.vue

@@ -1,19 +1,22 @@
 <template>
 	<farm-btn
 		@click="onClick"
-		dense
+		v-bind="$attrs"
 		class="farm-btn--responsive"
 		:class="{
 			'v-btn_icon--prepend': prepend,
 			'v-btn_icon--apppend': !prepend,
 		}"
-		:color="color"
 		:outlined="!open"
 		:title="label"
 	>
-		<farm-icon v-if="prepend" class="mr-3 ml-0">{{ `chevron-${open ? 'up' : 'down'}` }}</farm-icon>
+		<farm-icon v-if="prepend" class="mr-3 ml-0">{{
+			`chevron-${open ? 'up' : 'down'}`
+		}}</farm-icon>
 		{{ label }}
-		<farm-icon v-if="!prepend" class="ml-3 mr-0">{{ `chevron-${open ? 'up' : 'down'}` }}</farm-icon>
+		<farm-icon v-if="!prepend" class="ml-3 mr-0">{{
+			`chevron-${open ? 'up' : 'down'}`
+		}}</farm-icon>
 	</farm-btn>
 </template>
 <script lang="ts">
@@ -35,13 +38,6 @@ export default Vue.extend({
 			type: String,
 			default: '',
 		},
-		/**
-		 * Cor do botão - usando as do tema do vuetify
-		 */
-		color: {
-			type: String,
-			default: 'primary',
-		},
 		/**
 		 * Pressionado ou não
 		 */

package/src/components/CopyToClipboard/CopyToClipboard.vue

@@ -61,7 +61,7 @@ export default Vue.extend({
 				| 'extra-1'
 				| 'extra-2'
 			>,
-			default: 'secondary',
+			default: 'primary',
 		},
 		/**
 		 * Success message timeout (in ms)

package/src/components/DatePicker/vDatePicker.scss

@@ -14,7 +14,7 @@
     }
 
     button:hover:after {
-        border-top-color: var(--v-secondary-base);
+        border-top-color: var(--farm-primary-base);
     }
 
     button:after {
@@ -22,7 +22,7 @@
         content: '';
         width: 0px;
         height: 0px;
-        border-top: 0.25rem solid var(--v-primary-base);
+        border-top: 0.25rem solid var(--farm-secondary-green-base);
         border-right: 0.25rem solid transparent;
         border-bottom: 0.25rem solid transparent;
         border-left: 0.25rem solid transparent;

package/src/components/Loader/Loader.scss

@@ -6,8 +6,8 @@ $loader-overlay-transition: all 0.6s ease-in-out !default;
 .farm-loader {
 	width: 70px;
 	height: 70px;
-	color: var(--v-secondary-base) !important;
-	caret-color: var(--v-secondary-base) !important;
+	color: var(--farm-primary-base) !important;
+	caret-color: var(--farm-primary-base) !important;
 	position: relative;
 	display: inline-flex;
 	vertical-align: middle;

package/src/components/Typography/Typography.stories.js

@@ -183,7 +183,7 @@ export const LineHeight = () => ({
 			tag="p"
 			:lineHeight="h"
 			:key="h"
-			style="border: 1px solid var(--v-gray-lighten2); padding: 8px;"
+			style="border: 1px solid var(--farm-gray-base); padding: 8px;"
 		>
 			Typography - height {{ h }}<br />
 			Lorem ipsum dolor sit amet, consectetur adipiscing elit,

package/src/scss/VMenuOverrides.scss

@@ -7,7 +7,7 @@
         padding: 0;
 
         div.v-list-item {
-            border-bottom: 1px solid var(--v-gray-lighten2);
+            border-bottom: 1px solid var(--farm-gray-lighten2);
 
             &:last-child {
                 border-bottom: 0;

package/src/components/Buttons/MultiImportButton/MultiImportButton.scss

@@ -1,18 +0,0 @@
-.farm-btn.farm-btn--import {
-	background: var(--v-extra-lighten2);
-	color: var(--v-gray-lighten5);
-	.farm-btn__content i.mdi {
-		margin-right: 1rem;
-		color: var(--v-gray-lighten5);
-	}
-}
-
-.v-list-item {
-	border-bottom: 1px solid var(--v-gray-lighten2);
-	&:last-child {
-		border-bottom: none;
-	}
-}
-.v-list-item--link {
-	font-size: 0.875rem;
-}