@farm-investimentos/front-mfe-components 6.1.2 → 6.2.2

package/package.json

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

package/src/components/AlertReload/AlertReload.vue

@@ -5,28 +5,26 @@
 				{{ label }}
 			</v-col>
 			<v-col class="shrink">
-				<v-btn color="secondary" class="ml-3" alt="Recarregar" @click="$emit('onClick')">
-					<v-icon class="v-icon__refresh">mdi-refresh</v-icon>
-					Recarregar</v-btn
-				>
+				<farm-btn color="secondary" class="ml-3" alt="Recarregar" @click="$emit('onClick')">
+					<i class="mdi mdi-refresh farm-icon"></i>
+					Recarregar
+				</farm-btn>
 			</v-col>
 		</v-row>
 	</v-alert>
 </template>
 <script>
-import VBtn from 'vuetify/lib/components/VBtn';
-import VIcon from 'vuetify/lib/components/VIcon';
 import VAlert from 'vuetify/lib/components/VAlert';
 import { VRow, VCol } from 'vuetify/lib/components/VGrid';
+import DefaultButton from '../Buttons/DefaultButton';
 
 export default {
 	name: 'farm-alert-reload',
 	components: {
-		VBtn,
-		VIcon,
 		VAlert,
 		VRow,
 		VCol,
+		'farm-btn': DefaultButton,
 	},
 	props: {
 		/**
@@ -41,8 +39,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.v-btn {
-	.v-icon.v-icon__refresh {
+.farm-btn {
+	.farm-icon {
 		margin-right: 1rem;
 	}
 }

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

@@ -38,7 +38,7 @@ export const Listener = () => ({
 		};
 	},
 	template: `
-		<ConfirmButton color="error" @click="x = 2">click me to change: {{ x }}</ConfirmButton>
+		<ConfirmButton color="error" @click="x = x + 1">click me to change: {{ x }}</ConfirmButton>
 	`,
 });
 

package/src/components/Buttons/ConfirmButton/ConfirmButton.vue

@@ -1,21 +1,17 @@
 <template>
-	<v-btn v-bind="$attrs" v-on="$listeners" color="secondary">
-		<v-icon v-if="icon" class="mr-3">
-			{{ iconPath }}
-		</v-icon>
+	<farm-btn v-bind="$attrs" v-on="$listeners" color="secondary">
+		<i :class="{ mdi: true, [iconPath]: true, 'mr-3': true }" v-if="icon"></i>
 		<slot></slot>
-	</v-btn>
+	</farm-btn>
 </template>
 <script>
 import Vue from 'vue';
-import VBtn from 'vuetify/lib/components/VBtn';
-import VIcon from 'vuetify/lib/components/VIcon';
+import DefaultButton from '../DefaultButton';
 
 export default Vue.extend({
 	name: 'farm-btn-confirm',
 	components: {
-		VBtn,
-		VIcon,
+		'farm-btn': DefaultButton,
 	},
 	inheritAttrs: true,
 	props: {
@@ -44,3 +40,8 @@ export default Vue.extend({
 	},
 });
 </script>
+<style lang="scss" scoped>
+i.mdi {
+	font-size: 1rem;
+}
+</style>

package/src/components/Buttons/DangerButton/DangerButton.vue

@@ -1,21 +1,17 @@
 <template>
-	<v-btn v-bind="$attrs" v-on="$listeners" color="error">
-		<v-icon v-if="icon" class="mr-3">
-			{{ iconPath }}
-		</v-icon>
+	<farm-btn v-bind="$attrs" v-on="$listeners" color="error">
+		<i v-if="icon" :class="{mdi: true, [iconPath]: true, 'mr-3': true}"></i>
 		<slot></slot>
-	</v-btn>
+	</farm-btn>
 </template>
 <script>
 import Vue from 'vue';
-import VBtn from 'vuetify/lib/components/VBtn';
-import VIcon from 'vuetify/lib/components/VIcon';
+import DefaultButton from '../DefaultButton';
 
 export default Vue.extend({
 	name: 'farm-btn-danger',
 	components: {
-		VBtn,
-		VIcon,
+		'farm-btn': DefaultButton,
 	},
 	inheritAttrs: true,
 	props: {

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

@@ -0,0 +1,153 @@
+$colors: primary, secondary, error, extra, accent, info, success, gray, yellow;
+
+.farm-btn {
+    font-size: 0.75rem;
+    align-items: center;
+    border-radius: 4px;
+    display: inline-flex;
+    flex: 0 0 auto;
+    font-weight: 500;
+    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: 1rem;
+    height: 36px;
+    min-width: 64px;
+    padding: 0 16px;
+
+
+    &.farm-btn--disabled {
+        background-color: #DADADA;
+        color: rgba(0, 0, 0, .26);
+        cursor: default;
+        border-color: #DADADA;
+
+        &:before {
+            display: none;
+        }
+    }
+
+    &: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):active {
+        box-shadow: 0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%);
+
+        &:before {
+            opacity: 0.16;
+        }
+    }
+
+    &.farm-btn--plain {
+        &:hover {
+            .farm-btn__content {
+                opacity: 0.68;
+            }
+        }
+
+        &:active {
+            &:before {
+                opacity: 0.08;
+            }
+        }
+    }
+}
+
+.farm-btn--round {
+    border-radius: 50%;
+}
+
+.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 $color in $colors {
+        &#{'.farm-btn--' + $color} {
+            &:hover {
+                color: var(--v-#{$color}-base);
+            }
+        }
+    }
+}
+
+.farm-btn__content {
+    font-weight: 700;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    i.mdi {
+        font-size: 1rem;
+    }
+}
+
+@each $color in $colors {
+    #{'.farm-btn--' + $color} {
+        border: 1px solid var(--v-#{$color}-base);
+        background-color: var(--v-#{$color}-base);
+        color: white;
+
+        .farm-btn__content i.mdi {
+            color: white;
+        }
+    }
+
+    .farm-btn--outlined#{'.farm-btn--' + $color} {
+        border: 1px solid var(--v-#{$color}-base);
+        background: white;
+        color: var(--v-#{$color}-base);
+
+        .farm-btn__content i.mdi {
+            color: var(--v-#{$color}-base);
+        }
+
+    }
+
+    .farm-btn--plain#{'.farm-btn--' + $color} {
+        border: none;
+        background: white;
+        color: var(--v-#{$color}-base);
+
+        .farm-btn__content i.mdi {
+            color: var(--v-#{$color}-base);
+        }
+
+    }
+}
+
+.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%);
+}

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

@@ -17,7 +17,7 @@ export default {
 
 export const Primary = () => ({
 	components: { DefaultButton },
-	template: '<DefaultButton>Pass text as slot</DefaultButton>',
+	template: '<DefaultButton title="Pass text as slot">Pass text as slot</DefaultButton>',
 });
 
 export const HtmlMarkup = () => ({
@@ -26,10 +26,11 @@ export const HtmlMarkup = () => ({
 });
 
 export const Props = () => ({
-	components: { DefaultButton },
-	template: '<DefaultButton color="secondary">props</DefaultButton>',
+	components: { 'farm-btn': DefaultButton },
+	template: '<farm-btn color="secondary" outlined>props</farm-btn>',
 });
 
+
 export const Listener = () => ({
 	components: { DefaultButton },
 	data() {

package/src/components/Buttons/DefaultButton/DefaultButton.vue

@@ -1,19 +1,65 @@
 <template>
-	<v-btn v-bind="$attrs" v-on="$listeners">
-		<slot></slot>
-	</v-btn>
+	<button v-on="$listeners" v-bind="$attrs" :type="type" :class="classes">
+		<span class="farm-btn__content">
+			<slot></slot>
+		</span>
+	</button>
 </template>
-<script>
+<script lang="ts">
 import Vue from 'vue';
-import VBtn from 'vuetify/lib/components/VBtn';
 
 export default Vue.extend({
 	name: 'farm-btn',
-	inheritAttrs: true, 
-	props: ['props'],
+	inheritAttrs: true,
 
-	components: {
-		VBtn,
+	props: {
+		color: { type: String, default: 'primary' },
+		outlined: Boolean,
+		plain: Boolean,
+		disabled: Boolean,
+		rounded: Boolean,
+		icon: Boolean,
+		type: {
+			type: String,
+			default: 'button',
+		},
+	},
+
+	computed: {
+		classes() {
+			const obj = {};
+			['outlined', 'plain', 'disabled']
+				.filter(key => this[key])
+				.forEach(key => {
+					obj['farm-btn--' + key] = this[key];
+				});
+			return {
+				'farm-btn': true,
+				'farm-btn--elevated': this.isElevated,
+				'farm-btn--round': this.isRound,
+				'farm-btn--rounded': this.rounded,
+				'farm-btn--icon': this.icon,
+				['farm-btn--' + this.color]: true,
+				...obj,
+			};
+		},
+		isRound(): boolean {
+			return Boolean(this.icon || this.fab);
+		},
+		isElevated(): boolean {
+			return Boolean(
+				!this.icon &&
+					!this.text &&
+					!this.outlined &&
+					!this.depressed &&
+					!this.disabled &&
+					!this.plain &&
+					(this.elevation == null || Number(this.elevation) > 0)
+			);
+		},
 	},
 });
 </script>
+<style lang="scss" scoped>
+@import 'DefaultButton.scss';
+</style>

package/src/components/Buttons/DefaultButton/__tests__/DefaultButton.spec.js

@@ -3,12 +3,34 @@ import DefaultButton from '../DefaultButton';
 
 describe('DefaultButton component', () => {
 	let wrapper;
+	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(DefaultButton);
+		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {
 		expect(wrapper).toBeDefined();
 	});
+
+	describe('computed properties', () => {
+		it('get isRound false', () => {
+			expect(component.isRound).toBeFalsy();
+		});
+
+		it('get isRound false', async () => {
+			await wrapper.setProps({ icon: true });
+			expect(component.isRound).toBeTruthy();
+		});
+
+		it('get isElevated false', () => {
+			expect(component.isElevated).toBeTruthy();
+		});
+
+		it('get classes', () => {
+			expect(component.classes).toBeDefined();
+		});
+
+	});
 });

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

@@ -1,5 +1,5 @@
 <template>
-	<v-btn
+	<farm-btn
 		v-if="optionsList.length == 0"
 		@click="onClick"
 		dense
@@ -8,9 +8,9 @@
 		title="Exportar"
 		:disabled="disabled"
 	>
-		<v-icon class="mr-2">mdi-file-export-outline</v-icon>
+		<i :class="{ 'mr-2': true, 'mdi-file-export-outline': true, mdi: true }"></i>
 		Exportar
-	</v-btn>
+	</farm-btn>
 	<v-menu
 		v-else
 		content-class="elevation-1"
@@ -19,7 +19,7 @@
 		:rounded="'b t-0'"
 	>
 		<template v-slot:activator="{ on, attrs }">
-			<v-btn
+			<farm-btn
 				v-bind="attrs"
 				v-on="on"
 				dense
@@ -30,10 +30,17 @@
 				:disabled="disabled"
 			>
 				Exportar
-				<v-icon class="ml-2 mr-0">
-					{{ togglePopover ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
-				</v-icon>
-			</v-btn>
+				<i
+					:class="{
+						'ml-2': true,
+						'mr-0': true,
+						'mdi': true,
+						'mdi-chevron-up': togglePopover,
+						'mdi-chevron-down': !togglePopover,
+					}"
+				>
+				</i>
+			</farm-btn>
 		</template>
 
 		<v-list dense class="pa-0">
@@ -53,12 +60,12 @@
 </template>
 <script>
 import Vue from 'vue';
-import VBtn from 'vuetify/lib/components/VBtn';
-import VIcon from 'vuetify/lib/components/VIcon';
 import VList from 'vuetify/lib/components/VList/VList';
 import VMenu from 'vuetify/lib/components/VMenu';
 import VListItem from 'vuetify/lib/components/VList/VListItem';
 import { VListItemContent, VListItemTitle } from 'vuetify/lib';
+import DefaultButton from '../DefaultButton';
+
 /**
  * Botão de Exportação, com opção de gerar menu dropdown
  */
@@ -87,13 +94,12 @@ export default Vue.extend({
 		};
 	},
 	components: {
-		VBtn,
-		VIcon,
 		VList,
 		VListItem,
 		VMenu,
 		VListItemContent,
 		VListItemTitle,
+		'farm-btn': DefaultButton,
 	},
 	methods: {
 		onClick(key) {

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

@@ -1,18 +1,17 @@
 <template>
-	<v-btn @click="onClick" dense class="v-btn--responsive v-btn--import" outlined title="Importar">
-		<v-icon>mdi-upload</v-icon>
+	<farm-btn @click="onClick" dense class="v-btn--responsive farm-btn--import" outlined title="Importar">
+		<i class="mdi mdi-upload"></i>
 		{{ label }}
-	</v-btn>
+	</farm-btn>
 </template>
 <script>
 import Vue from 'vue';
-import VBtn from 'vuetify/lib/components/VBtn';
-import VIcon from 'vuetify/lib/components/VIcon';
+import DefaultButton from '../DefaultButton';
+
 export default Vue.extend({
 	name: 'farm-btn-import',
 	components: {
-		VBtn,
-		VIcon,
+		'farm-btn': DefaultButton,
 	},
 	props: {
 		/**
@@ -31,10 +30,11 @@ export default Vue.extend({
 });
 </script>
 <style scoped lang="scss">
-.v-btn.v-btn--import {
+.farm-btn.farm-btn--import {
 	background: var(--v-extra-lighten2);
 	color: var(--v-gray-lighten5);
-	.v-icon {
+	.farm-btn__content i.mdi {
+		color: white;
 		margin-right: 1rem;
 	}
 }

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

@@ -1,8 +1,9 @@
-.v-btn.v-btn--import {
+.farm-btn.farm-btn--import {
 	background: var(--v-extra-lighten2);
 	color: var(--v-gray-lighten5);
-	.v-icon {
+	.farm-btn__content i.mdi {
 		margin-right: 1rem;
+		color: var(--v-gray-lighten5);
 	}
 }
 

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

@@ -1,25 +1,27 @@
 <template>
-	<v-menu
-		content-class="elevation-1"
-		v-model="togglePopover"
-		:offset-y="true"
-		:rounded="'b t-0'"
-	>
+	<v-menu content-class="elevation-1" v-model="togglePopover" :offset-y="true" :rounded="'b t-0'">
 		<template v-slot:activator="{ on, attrs }">
-			<v-btn
+			<farm-btn
 				v-bind="attrs"
 				v-on="on"
 				dense
 				@onClick="togglePopover = true"
-				class="v-btn--responsive v-btn--import"
+				class="v-btn--responsive farm-btn--import"
 				outlined
 				title="Importar"
 			>
 				Importar
-				<v-icon class="ml-2 mr-0">
-					{{ togglePopover ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
-				</v-icon>
-			</v-btn>
+				<i
+					:class="{
+						'ml-2': true,
+						'mr-0': true,
+						mdi: true,
+						'mdi-chevron-up': togglePopover,
+						'mdi-chevron-down': !togglePopover,
+					}"
+				>
+				</i>
+			</farm-btn>
 		</template>
 
 		<v-list dense class="pa-0">
@@ -39,23 +41,21 @@
 </template>
 <script>
 import Vue from 'vue';
-import VBtn from 'vuetify/lib/components/VBtn';
-import VIcon from 'vuetify/lib/components/VIcon';
 import VList from 'vuetify/lib/components/VList/VList';
 import VMenu from 'vuetify/lib/components/VMenu';
 import VListItem from 'vuetify/lib/components/VList/VListItem';
 import { VListItemContent, VListItemTitle } from 'vuetify/lib';
+import DefaultButton from '../DefaultButton';
 
 export default Vue.extend({
 	name: 'farm-btn-multipleimport',
 	components: {
-		VBtn,
-		VIcon,
 		VList,
 		VListItem,
 		VMenu,
 		VListItemContent,
 		VListItemTitle,
+		'farm-btn': DefaultButton,
 	},
 	props: {
 		/**

package/src/components/Buttons/RemoveButton/RemoveButton.vue

@@ -1,5 +1,5 @@
 <template>
-	<v-btn
+	<farm-btn
 		@click="onClick"
 		dense
 		class="v-btn--responsive"
@@ -9,12 +9,13 @@
 	>
 		<v-icon>mdi-trash-can-outline</v-icon>
 		{{ label }}
-	</v-btn>
+	</farm-btn>
 </template>
 <script>
 import Vue from 'vue';
-import VBtn from 'vuetify/lib/components/VBtn';
 import VIcon from 'vuetify/lib/components/VIcon';
+import DefaultButton from '../DefaultButton';
+
 export default Vue.extend({
 	name: 'farm-btn-remove',
 	props: {
@@ -34,8 +35,8 @@ export default Vue.extend({
 		},
 	},
 	components: {
-		VBtn,
 		VIcon,
+		'farm-btn': DefaultButton,
 	},
 	methods: {
 		onClick() {
@@ -45,7 +46,7 @@ export default Vue.extend({
 });
 </script>
 <style scoped lang="scss">
-.v-btn {
+.farm-btn {
 	.v-icon {
 		margin-right: 1rem;
 	}