@farm-investimentos/front-mfe-components 11.11.1 → 11.11.3

package/package.json

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

package/src/components/ContextMenu/ContextMenu.vue

@@ -86,6 +86,9 @@ export default Vue.extend({
 					window.addEventListener('resize', resizeWindowHandler);
 					calculatePosition();
 				} else {
+					styles.top = 0;
+					styles.left = 0;
+					styles.zIndex = 0;
 					window.removeEventListener('click', outClick);
 				}
 			}
@@ -113,7 +116,7 @@ export default Vue.extend({
 					? parseInt(activatorBoundingClientRect.width)
 					: 96) + 'px';
 
-			if(activatorBoundingClientRect.width < 96) {
+			if (activatorBoundingClientRect.width < 96) {
 				const w = popupClientRect.width < 96 ? 96 : popupClientRect.width;
 				offsetLeft =
 					activatorBoundingClientRect.left +

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/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>