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

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

@@ -1,5 +1,5 @@
 <template>
-	<v-btn
+	<farm-btn
 		@click="onClick"
 		dense
 		class="v-btn--responsive"
@@ -13,21 +13,22 @@
 	>
 		<v-icon v-if="prepend">{{ `mdi-chevron-${open ? 'up' : 'down'}` }}</v-icon>
 		{{ label }}
-		<v-icon v-if="!prepend">{{ `mdi-chevron-${open ? 'up' : 'down'}` }}</v-icon>
-	</v-btn>
+		<v-icon v-if="!prepend" class="ml-3 mr-0">{{ `mdi-chevron-${open ? 'up' : 'down'}` }}</v-icon>
+	</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';
+
 /**
  * Botão de Toggle, emitindo e guardando status
  */
 export default Vue.extend({
 	name: 'farm-btn-toggle',
 	components: {
-		VBtn,
 		VIcon,
+		'farm-btn': DefaultButton,
 	},
 	data: () => ({
 		open: false,
@@ -82,14 +83,3 @@ export default Vue.extend({
 	},
 });
 </script>
-<style scoped lang="scss">
-.v-btn {
-	&.v-btn_icon--apppend .v-icon {
-		margin-left: 1rem;
-		margin-right: 0;
-	}
-	&.v-btn_icon--prepend .v-icon {
-		margin-left: 0;
-	}
-}
-</style>

package/src/components/DatePicker/DatePicker.vue

@@ -30,23 +30,26 @@
 			v-model="dateField"
 			no-title
 			scrollable
-			:max="max"
-			:min="min"
 			color="secondary"
 			locale="pt-br"
+			:max="max"
+			:min="min"
 		>
-			<v-btn outlined color="primary" @click="menuField = false" title="Fechar">
+			<farm-btn outlined color="primary" @click="menuField = false" title="Fechar">
 				Fechar
-			</v-btn>
-			<v-btn outlined color="secondary" @click="clear"> Limpar </v-btn>
-			<v-btn
+			</farm-btn>
+			<farm-btn outlined color="secondary" class="ml-2" @click="clear">
+				Limpar
+			</farm-btn>
+			<farm-btn
 				color="secondary"
+				class="ml-2"
+				title="Confirmar"
 				:disabled="!dateField.length"
 				@click="save()"
-				title="Confirmar"
 			>
 				Confirmar
-			</v-btn>
+			</farm-btn>
 		</v-date-picker>
 	</v-menu>
 </template>
@@ -54,8 +57,8 @@
 import Vue from 'vue';
 import { VTextField } from 'vuetify/lib/components/VTextField';
 import { VMenu } from 'vuetify/lib/components/VMenu';
-import { VBtn } from 'vuetify/lib/components/VBtn';
 import { VDatePicker } from 'vuetify/lib/components/VDatePicker';
+import DefaultButton from '../Buttons/DefaultButton';
 import { defaultFormat as dateDefaultFormatter, convertDate } from '../../helpers/date';
 /**
  * Componente de input com datepicker para data
@@ -65,8 +68,8 @@ export default Vue.extend({
 	components: {
 		VTextField,
 		VMenu,
-		VBtn,
 		VDatePicker,
+		'farm-btn': DefaultButton,
 	},
 	props: {
 		/**
@@ -113,11 +116,15 @@ export default Vue.extend({
 				return this.required ? !!value || value != '' || 'Campo obrigatório' : true;
 			},
 			checkMax: value => {
-				return this.max && new Date(convertDate(value)) > new Date(this.max) ? 'A data está fora do período permitido' : true;
+				return this.max && new Date(convertDate(value)) > new Date(this.max)
+					? 'A data está fora do período permitido'
+					: true;
 			},
 			checkMin: value => {
-				return this.min && new Date(convertDate(value)) < new Date(this.min) ? 'A data está fora do período permitido' : true;
-			}
+				return this.min && new Date(convertDate(value)) < new Date(this.min)
+					? 'A data está fora do período permitido'
+					: true;
+			},
 		};
 	},
 	watch: {
@@ -139,13 +146,14 @@ export default Vue.extend({
 			this.dateField = '';
 			this.save();
 		},
-		validation(date){
-			const pattern = /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[13-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/gm;
-			return pattern.test(date);	
+		validation(date) {
+			const pattern =
+				/^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[13-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/gm;
+			return pattern.test(date);
 		},
 		keyUpInput(event) {
 			let newValue = event.target.value;
-			if(this.validation(newValue) && newValue.length === 10) {
+			if (this.validation(newValue) && newValue.length === 10) {
 				const [day, month, year] = newValue.split('/');
 				this.dateField = `${year}-${month}-${day}`;
 				this.save();

package/src/components/DialogFooter/DialogFooter.vue

@@ -1,44 +1,42 @@
 <template>
 	<div class="v-dialog__footer d-flex flex-column flex-sm-row justify-end">
-		<v-btn @click="$emit('onClose')" v-if="hasCancel" color="primary" outlined>
+		<farm-btn @click="$emit('onClose')" v-if="hasCancel" color="primary" outlined>
 			{{ closeLabel }}
-		</v-btn>
-		<v-btn
+		</farm-btn>
+		<farm-btn
 			v-for="button in extraButtons"
 			:key="button.label"
-			@click="$emit(button.listener ? button.listener : '')"
 			:color="button.color"
 			:outlined="button.outlined"
 			:depressed="button.outlined"
 			:disabled="button.disabled"
 			class="ml-sm-3 mt-3 mt-sm-0"
+			@click="$emit(button.listener ? button.listener : '')"
 		>
 			{{ button.label }}
-		</v-btn>
-		<v-btn
-			@click="$emit('onConfirm')"
-			:color="confirmColor"
+		</farm-btn>
+		<farm-btn
+			class="ml-sm-3 mt-3 mt-sm-0"
 			v-if="hasConfirm"
+			:color="confirmColor"
 			:disabled="isConfirmDisabled"
-			class="ml-sm-3 mt-3 mt-sm-0"
+			@click="$emit('onConfirm')"
 		>
-			<v-icon v-if="confirmIcon">mdi-{{ confirmIcon }}</v-icon>
+			<i :class="{ mdi: true, ['mdi-' + confirmIcon]: true }" v-if="confirmIcon"></i>
 			{{ confirmLabel }}
-		</v-btn>
+		</farm-btn>
 	</div>
 </template>
 
 <script>
-import { VBtn } from 'vuetify/lib/components/VBtn';
-import { VIcon } from 'vuetify/lib/components/VIcon';
+import DefaultButton from '../Buttons/DefaultButton';
 /**
  * Footer de dialog/modal
  */
 export default {
 	name: 'DialogFooter',
 	components: {
-		VBtn,
-		VIcon,
+		'farm-btn': DefaultButton,
 	},
 	props: {
 		/**

package/src/components/FilePicker/FilePicker.vue

@@ -19,14 +19,14 @@
 
 			<p v-if="maxSizeReach" v-html="maxSizeReachMsg"></p>
 
-			<v-btn depressed outlined color="secondary" class="v-btn-responsive" @click="reset"
-				>Escolher outro</v-btn
-			>
+			<farm-btn depressed outlined color="secondary" class="v-btn-responsive" @click="reset">
+				Escolher outro
+			</farm-btn>
 		</div>
 	</section>
 </template>
 <script>
-import { VBtn } from 'vuetify/lib/components/VBtn';
+import DefaultButton from '../Buttons/DefaultButton';
 import { VIcon } from 'vuetify/lib/components/VIcon';
 export default {
 	props: {
@@ -96,7 +96,7 @@ export default {
 		},
 	},
 	components: {
-		VBtn,
+		'farm-btn': DefaultButton,
 		VIcon,
 	},
 };

package/src/components/MainFilter/MainFilter.scss

@@ -1,17 +1,20 @@
 section {
 	display: flex;
 	flex-direction: row;
-	.v-btn {
+
+	.farm-btn {
 		margin-left: 1rem;
 	}
 }
+
 @media screen and (max-width: 600px) {
 	section {
 		flex-direction: column;
 		margin-bottom: 1rem;
-		.v-btn {
+
+		.farm-btn {
 			margin-left: 0;
 			margin-top: 0 !important;
 		}
 	}
-}
+}

package/src/components/MainFilter/MainFilter.vue

@@ -14,30 +14,30 @@
 				@keyup="onKeyUp"
 			/>
 		</fieldset>
-		<v-btn
+		<DefaultButton
 			v-if="hasExtraFilters"
 			color="secondary"
 			class="v-btn--responsive mt-14 mt-sm-8"
 			@click="onFilterClick"
 		>
-			<v-icon color="white" class="mr-2">{{ extraFiltersBtnIcon }}</v-icon>
+			<v-icon color="white" class="mr-2" small>{{ extraFiltersBtnIcon }}</v-icon>
 			{{ extraFiltersBtnLabel }}
-		</v-btn>
+		</DefaultButton>
 	</section>
 </template>
 
 <script>
 import Vue from 'vue';
-import { VBtn } from 'vuetify/lib/components/VBtn';
 import { VTextField } from 'vuetify/lib/components/VTextField';
 import { VIcon } from 'vuetify/lib/components/VIcon';
+import DefaultButton from '../Buttons/DefaultButton';
 
 export default Vue.extend({
 	name: 'MainFilter',
 	components: {
 		VTextField,
-		VBtn,
 		VIcon,
+		DefaultButton,
 	},
 	props: {
 		hasExtraFilters: {

package/src/components/RadioButton/RadioButton.stories.js

@@ -62,4 +62,4 @@ export const Tertiary = () => ({
 
 Primary.storyName = 'Basic';
 Secondary.storyName = 'Selected Horizontal';
-Tertiary.storyName = 'Selected Vertical';
+Tertiary.storyName = 'Selected Vertical';

package/src/components/RadioButton/RadioButton.vue

@@ -64,4 +64,4 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 @import './RadioButton.scss';
-</style>
+</style>

package/src/components/RangeDatePicker/RangeDatePicker.vue

@@ -33,13 +33,13 @@
 			color="secondary"
 			locale="pt-br"
 		>
-			<v-btn outlined color="primary" @click="menuField = false" tutle="Fechar">
+			<farm-btn outlined color="primary" @click="menuField = false" tutle="Fechar">
 				Fechar
-			</v-btn>
-			<v-btn outlined color="secondary" @click="clear()" title="Limpar"> Limpar </v-btn>
-			<v-btn color="secondary" :disabled="canConfirm" @click="save()" title="Confirmar">
+			</farm-btn>
+			<farm-btn outlined color="secondary" class="ml-2" @click="clear()" title="Limpar"> Limpar</farm-btn>
+			<farm-btn color="secondary" class="ml-2" :disabled="canConfirm" @click="save()" title="Confirmar">
 				Confirmar
-			</v-btn>
+			</farm-btn>
 		</v-date-picker>
 	</v-menu>
 </template>
@@ -47,8 +47,8 @@
 import Vue from 'vue';
 import { VTextField } from 'vuetify/lib/components/VTextField';
 import { VMenu } from 'vuetify/lib/components/VMenu';
-import { VBtn } from 'vuetify/lib/components/VBtn';
 import { VDatePicker } from 'vuetify/lib/components/VDatePicker';
+import DefaultButton from '../Buttons/DefaultButton';
 import { defaultFormat as dateDefaultFormatter } from '../../helpers/date';
 /**
  * Componente de input com datepicker para range de data
@@ -58,8 +58,8 @@ export default Vue.extend({
 	components: {
 		VTextField,
 		VMenu,
-		VBtn,
 		VDatePicker,
+		'farm-btn': DefaultButton,
 	},
 	props: {
 		/**

package/src/components/ResetTableRowSelection/ResetTableRowSelection.vue

@@ -1,21 +1,22 @@
 <template>
 	<div class="ml-6 mr-3 d-flex align-center">
 		Total de linhas selecionadas: {{ length }}
-		<v-btn color="error" @click="reset" small dense class="ml-3" v-if="length > 0">
+		<farm-btn color="error" @click="reset" small dense class="ml-3" v-if="length > 0">
 			<v-icon small> mdi-trash-can </v-icon>
 			Desmarcar
-		</v-btn>
+		</farm-btn>
 	</div>
 </template>
 <script>
 import Vue from 'vue';
-import VBtn from 'vuetify/lib/components/VBtn';
 import VIcon from 'vuetify/lib/components/VIcon';
+import DefaultButton from '../Buttons/DefaultButton';
+
 export default Vue.extend({
 	name: 'farm-tablerowselection',
 	components: {
-		VBtn,
 		VIcon,
+		'farm-btn': DefaultButton,
 	},
 	props: {
 		/**

package/src/components/TableContextMenu/TableContextMenu.scss

@@ -1,3 +1,6 @@
 [role='menuitem'] {
 	border-bottom: 1px solid var(--v-gray-lighten2);
 }
+.farm-btn__content i.mdi.farm-btn__icon {
+	font-size: 24px;
+}

package/src/components/TableContextMenu/TableContextMenu.vue

@@ -1,9 +1,9 @@
 <template>
 	<v-menu>
 		<template v-slot:activator="{ on, attrs }">
-			<v-btn icon v-bind="attrs" v-on="on" title="Abrir opções">
-				<v-icon>mdi-dots-horizontal</v-icon>
-			</v-btn>
+			<farm-btn icon v-bind="attrs" v-on="on" title="Abrir opções">
+				<i class="farm-btn__icon mdi mdi-dots-horizontal"></i>
+			</farm-btn>
 		</template>
 
 		<v-list dense class="pa-0">
@@ -31,22 +31,22 @@
 <script>
 import Vue from 'vue';
 import { VMenu } from 'vuetify/lib/components/VMenu';
-import { VBtn } from 'vuetify/lib/components/VBtn';
 import { VIcon } from 'vuetify/lib/components/VIcon';
 import { VList } from 'vuetify/lib/components/VList';
 import VListItem from 'vuetify/lib/components/VList/VListItem';
 import { VListItemContent, VListItemTitle } from 'vuetify/lib';
+import DefaultButton from '../Buttons/DefaultButton';
 
 export default Vue.extend({
 	name: 'farm-context-menu',
 	components: {
-		VBtn,
 		VIcon,
 		VMenu,
 		VList,
 		VListItem,
 		VListItemContent,
 		VListItemTitle,
+		'farm-btn': DefaultButton,
 	},
 	props: {
 		items: {

package/src/examples/Buttons.stories.js

@@ -19,7 +19,7 @@ const colors = ['primary', 'secondary', 'error', 'gray', 'accent', 'yellow'];
 
 export const ActiveButtons = () => ({
 	components: {
-		DefaultButton,
+		'farm-btn': DefaultButton,
 	},
 	data() {
 		return {
@@ -27,15 +27,15 @@ export const ActiveButtons = () => ({
 		};
 	},
 	template: `<div class="buttons-container">
-        <DefaultButton v-for="color of colors":key="color" :color="color">
+        <farm-btn v-for="color of colors":key="color" :color="color">
             {{ color }}
-        </DefaultButton>
+        </farm-btn>
 	</div>`,
 });
 
 export const OutlinedButtons = () => ({
 	components: {
-		DefaultButton,
+		'farm-btn': DefaultButton,
 	},
 	data() {
 		return {
@@ -43,15 +43,15 @@ export const OutlinedButtons = () => ({
 		};
 	},
 	template: `<div class="buttons-container">
-        <DefaultButton v-for="color of colors":key="color" :color="color"outlined>
+        <farm-btn v-for="color of colors":key="color" :color="color"outlined>
             {{ color }}
-        </DefaultButton>
+        </farm-btn>
 	</div>`,
 });
 
 export const DisabledButtons = () => ({
 	components: {
-		DefaultButton,
+		'farm-btn': DefaultButton,
 	},
 	data() {
 		return {
@@ -59,15 +59,15 @@ export const DisabledButtons = () => ({
 		};
 	},
 	template: `<div class="buttons-container">
-        <DefaultButton v-for="color of colors":key="color" :color="color" disabled>
+        <farm-btn v-for="color of colors":key="color" :color="color" disabled>
             {{ color }}
-        </DefaultButton>
+        </farm-btn>
 	</div>`,
 });
 
 export const Plain = () => ({
 	components: {
-		DefaultButton,
+		'farm-btn': DefaultButton,
 	},
 	data() {
 		return {
@@ -75,9 +75,56 @@ export const Plain = () => ({
 		};
 	},
 	template: `<div class="buttons-container">
-        <DefaultButton v-for="color of colors":key="color" :color="color" plain>
+        <farm-btn v-for="color of colors":key="color" :color="color" plain>
             {{ color }}
-        </DefaultButton>
+        </farm-btn>
+	</div>`,
+});
+
+export const Icons = () => ({
+	components: {
+		'farm-btn': DefaultButton,
+	},
+	data() {
+		return {
+			colors,
+		};
+	},
+	template: `<div class="buttons-container">
+		<h4>Full</h4>
+        <farm-btn v-for="color of colors":key="color" :color="color">
+            <v-icon>mdi-book</v-icon> book
+        </farm-btn>
+
+		<h4>Outlined</h4>
+        <farm-btn v-for="color of colors":key="color + 'outlined'" :color="color" outlined>
+            <v-icon>mdi-book</v-icon> book
+        </farm-btn>
+
+		<h4>Plain</h4>
+        <farm-btn v-for="color of colors":key="color + 'plain'" :color="color" plain>
+            <v-icon>mdi-book</v-icon> book
+        </farm-btn>
+
+	</div>`,
+});
+
+export const Iconed = () => ({
+	components: {
+		'farm-btn': DefaultButton,
+	},
+	data() {
+		return {
+			colors,
+		};
+	},
+	template: `<div class="buttons-container">
+		<h4>Icon</h4>
+        <farm-btn icon v-for="color of colors":key="color" >
+            <v-icon :color="color">mdi-book</v-icon>
+        </farm-btn>
+
+
 	</div>`,
 });
 
@@ -93,3 +140,9 @@ DisabledButtons.story = {
 Plain.story = {
 	name: 'Plain',
 };
+Icons.story = {
+	name: 'Icons',
+};
+Iconed.story = {
+	name: 'Iconed',
+};

package/src/scss/ButtonOverrides.scss

@@ -63,4 +63,11 @@
         width: 100%;
         margin: 0;
     }
+
+    .farm-btn.v-btn-responsive,
+    .farm-btn.v-btn--responsive {
+        width: 100%;
+        margin: 0;
+    }
+
 }