@farm-investimentos/front-mfe-components 11.11.0 → 11.11.2

package/package.json

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

package/src/components/DataTablePaginator/DataTablePaginator.scss

@@ -68,7 +68,7 @@ ul.farm-paginator {
     }
 }
 
-.v-data-table-custom-footer {
+.farm-paginator-footer{
     display: flex;
     flex-direction: row;
     justify-content: space-between;

package/src/components/DataTablePaginator/DataTablePaginator.stories.js

@@ -23,28 +23,27 @@ export default {
 };
 
 export const Primary = () => ({
-	data() {
-		return {
-			totalPages: 8,
-		};
-	},
-	template: '<farm-datatable-paginator :totalPages="totalPages" :page="1" />',
-	mounted() {
-		setTimeout(() => {
-			this.totalPages = 2;
-		}, 1000);
-	},
+	template: '<farm-datatable-paginator :totalPages="190000" :page="1" />',
 });
 
-export const Secondary = () => ({
+export const HidePerPageOptions = () => ({
 	template: '<farm-datatable-paginator :hidePerPageOptions="true" :totalPages="190000" :page="1" />',
 });
 
 export const Disabled = () => ({
-	template: '<farm-datatable-paginator :disabled="true":totalPages="19" :page="1" />',
+	template: '<farm-datatable-paginator :disabled="true" :totalPages="19" :page="1" />',
 });
 
 export const CustomPerPage = () => ({
 	template:
-		'<farm-datatable-paginator :perPageOptions="[1, 2, 4, 12, 27]" :totalPages="19" :page="1" />',
+		'<farm-datatable-paginator :perPageOptions="[1, 2, 4, 12, 27]" :initialLimitPerPage="2" :totalPages="19" :page="1" />',
+});
+
+export const OnChangeLimitPerPage = () => ({
+	methods: {
+		onChangeLimitPerPage: (newValue) => {
+			alert(newValue);
+		}
+	},
+	template: '<farm-datatable-paginator :totalPages="19" :page="1" @onChangeLimitPerPage="onChangeLimitPerPage" />',
 });

package/src/components/DataTablePaginator/DataTablePaginator.vue

@@ -1,19 +1,17 @@
 <template>
 	<section
 		:class="{
-			'v-data-table-custom-footer': true,
+			'farm-paginator-footer': true,
 			'hidden-perpageoptions': hidePerPageOptions,
 			'farm-paginator--gutter': hasGutter,
 		}"
 	>
 		<div v-if="!hidePerPageOptions">
-			<v-select
-				outlined
+			<farm-select
 				v-model="selectedLimit"
-				:disabled="!totalPages || totalPages < 1"
+				:disabled="disabled || !totalPages || totalPages < 1"
 				:items="perPageBuiltItems"
-				dense
-			></v-select>
+			/>
 		</div>
 
 		<ul
@@ -61,7 +59,6 @@
 </template>
 <script lang="ts">
 import Vue from 'vue';
-import { VSelect } from 'vuetify/lib/components/VSelect';
 
 /**
  * Componente de paginação usado em tabelas e listas
@@ -69,49 +66,49 @@ import { VSelect } from 'vuetify/lib/components/VSelect';
  */
 export default Vue.extend({
 	name: 'farm-datatable-paginator',
-	components: {
-		VSelect,
-	},
 	props: {
 		/**
-		 * Lista de opções para o controle de registros por página
+		 * Ietms per page list
 		 */
 		perPageOptions: {
 			type: Array,
 			default: () => [5, 10, 20, 50, 100],
 		},
 		/**
-		 * Páginas atual
+		 * Current page
 		 */
 		page: null,
 		/**
-		 * Total de páginas
+		 * Total pages
 		 */
 		totalPages: {
 			type: Number,
 			default: null,
 		},
 		/**
-		 * Desabilita controles
+		 * DDisable controls
 		 */
 		disabled: {
 			type: Boolean,
 			default: false,
 		},
 		/**
-		 * Esconde controle de registros por página
+		 * Hide items per page select 
 		 */
 		hidePerPageOptions: {
 			type: Boolean,
 			default: false,
 		},
 		/**
-		 * Valor inicial de limite por página
+		 * Items per page initial value
 		 */
 		initialLimitPerPage: {
 			type: Number,
 			default: 10,
 		},
+		/**
+		 * Toggle gutters
+		*/
 		hasGutter: {
 			type: Boolean,
 			default: true,
@@ -213,7 +210,6 @@ export default Vue.extend({
 			this.selectedLimit = newValue;
 		},
 	},
-	
 });
 </script>
 

package/src/components/IdCaption/IdCaption.scss

@@ -1,6 +1,6 @@
 .idcaption {
 	display: flex;
-
+	min-height: 48px;
 	.farm-icon-box {
 		margin-right: 8px;
 	}

package/src/components/IdCaption/IdCaption.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="idcaption">
+	<div class="idcaption farm-idcaption">
 		<farm-icon-box v-if="icon" :icon="icon" :color="iconBoxColor" size="md" />
 		<div
 			:class="{ idcaption__body: true, 'idcaption__body--single': !hasTitle || !hasSubtitle }"

package/src/components/Logger/LoggerItem/ILoggerItem.ts

@@ -4,6 +4,7 @@ interface ILoggerItem {
 	formattedDate: string;
 	message: string;
 	status: string;
+	extraMessage?: string;
 	details: Function;
 }
 

package/src/components/Logger/LoggerItem/LoggerItem.scss

@@ -56,7 +56,8 @@
 }
 
 .logger__date,
-.logger__username {
+.logger__username,
+.logger__extramessage {
     font-size: 10px;
     font-weight: 400;
 }

package/src/components/Logger/LoggerItem/LoggerItem.stories.js

@@ -74,6 +74,20 @@ export const Info = () => ({
 	template: `<farm-logger-item :item="item" />`,
 });
 
+export const ExtraMessage = () => ({
+	data() {
+		return {
+			item: {
+				message: 'Recusado entre as pré elegíveis',
+				extraMessage: 'More text',
+				formattedDate: '13/06/2022  20:40',
+				status: 'info',
+			},
+		};
+	},
+	template: `<farm-logger-item :item="item" />`,
+});
+
 export const CustomIcon = () => ({
 	data() {
 		return {

package/src/components/Logger/LoggerItem/LoggerItem.vue

@@ -13,10 +13,13 @@
 			<span class="logger__message">
 				{{ item.message }}
 			</span>
-			<span class="logger__username">
+			<span v-if="item.userName" class="logger__username">
 				<i class="mdi mdi-account-circle" />
 				{{ item.userName }}
 			</span>
+			<span class="logger__extramessage">
+				{{ item.extraMessage }}
+			</span>
 		</div>
 		<farm-btn
 			v-if="hasDetails"
@@ -32,6 +35,7 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue';
 import ILoggerItem from './ILoggerItem';
+import mappingIconKeys from './mappingIconKeys';
 
 export default Vue.extend({
 	name: 'farm-logger-item',
@@ -40,6 +44,7 @@ export default Vue.extend({
 		 * Logger item
 		 */
 		item: { required: true, type: Object as PropType<ILoggerItem> },
+		customIcon: { type: String, required: false },
 	},
 	methods: {
 		callDetails(): void {
@@ -54,7 +59,8 @@ export default Vue.extend({
 			if (!this.item.status) {
 				return '';
 			}
-			return `${this.item.status === 'success' ? 'check' : 'close'}`;
+
+			return this.item.status ? mappingIconKeys[this.item.status] : 'error';
 		},
 		buttonColor(): string {
 			if (this.item.status === 'success') {

package/src/components/Logger/LoggerItem/mappingIconKeys.ts

@@ -0,0 +1,5 @@
+export default {
+	success: 'check',
+	info: 'timer-sand',
+	error: 'close',
+};

package/src/components/MainFilter/MainFilter.stories.js

@@ -28,6 +28,10 @@ export const CustomLabel = () => ({
 	template: '<farm-form-mainfilter label="Custom" />',
 });
 
+export const WithSlot = () => ({
+	template: '<farm-form-mainfilter>With Slot</farm-form-mainfilter>',
+});
+
 export const MainFilters = () => ({
 	data() {
 		return {

package/src/components/MainFilter/MainFilter.vue

@@ -2,7 +2,8 @@
 	<section :class="{ 'justify-end': justifyEnd === true }">
 		<fieldset v-if="hasInitialInput">
 			<farm-label :for="elementId">
-				{{ label }}
+				{{ !hasSlotData ? label : '' }}
+				<slot v-if="hasSlotData"></slot>
 				<farm-tooltip v-if="tooltip">
 					<farm-caption color="white">
 						{{ tooltip }}
@@ -86,6 +87,9 @@ export default Vue.extend({
 		},
 	},
 	computed: {
+		hasSlotData() {
+			return this.$slots.default;
+		},
 		extraFiltersBtnLabel() {
 			return `${this.showFilters ? 'Esconder' : 'Ver'} Filtros`;
 		},

package/src/components/Typography/BodyText/BodyText.scss

@@ -1,4 +1,4 @@
-.farm-subtitle {
+.farm-bodytext {
     &--1 {
         letter-spacing: 0.5px;
     }

package/src/components/Typography/BodyText/BodyText.vue

@@ -3,7 +3,7 @@
 		:weight="weight"
 		:size="size"
 		:key="key"
-		:class="{ [`farm-subtitle--${type}`]: true, [`farm-subtitle--${variation}`]: true }"
+		:class="{ [`farm-bodytext--${type}`]: true, [`farm-bodytext--${variation}`]: true }"
 		v-bind="$attrs"
 	>
 		<slot></slot>

package/src/components/layout/Basic.stories.js

@@ -35,7 +35,7 @@ export const Structure = () => ({
 		<farm-row>
 			<farm-col md="6" lg="3">
 				coluna 1
-			</farm-col>›
+			</farm-col>
 			<farm-col md="6" lg="3">
 				coluna 2
 			</farm-col>
@@ -46,6 +46,28 @@ export const Structure = () => ({
 				coluna 4
 			</farm-col>
 		</farm-row>
+
+		<farm-row>
+			<farm-col lg="2">
+				coluna 1
+			</farm-col>
+			<farm-col lg="2">
+				coluna 2
+			</farm-col>
+			<farm-col lg="2">
+				coluna 3
+			</farm-col>
+			<farm-col lg="2">
+				coluna 4
+			</farm-col>
+			<farm-col lg="2">
+				coluna 5
+			</farm-col>
+			<farm-col lg="2">
+				coluna 6
+			</farm-col>
+		</farm-row>
+
 		<farm-row :extra-decrease="true">
 			<farm-container-footer>
 				Footer content