@farm-investimentos/front-mfe-components 9.2.0 → 9.2.3

package/package.json

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

package/src/components/Chip/Chip.scss

@@ -12,6 +12,12 @@
     text-align: center;
     align-items: center;
     color: white;
+    width: 100%;
+
+    &--dense {
+        min-width: auto;
+        width: max-content;
+    }
 
     .farm-typography {
         width: 100%;

package/src/components/Chip/Chip.stories.js

@@ -10,8 +10,15 @@ export default {
 };
 
 export const Primary = () => ({
-	template: `<div>
-		<farm-chip color="info">Chip</farm-chip>
+	template: `<div class="chips-container">
+		<farm-chip color="info">Chip (100% width)</farm-chip>
+	</div>`,
+});
+
+export const Dense = () => ({
+	template: `<div class="chips-container">
+		<farm-chip color="info" :dense="true">prop</farm-chip>
+		<farm-chip color="secondary" dense>attribute</farm-chip>
 	</div>`,
 });
 

package/src/components/Chip/Chip.stories.scss

@@ -1,7 +1,7 @@
 .chips-container {
     display: flex;
     flex-direction: column;
-    max-width: 160px;
+    max-width: 320px;
 
     > .farm-chip {
         margin-bottom: 16px;

package/src/components/Chip/Chip.vue

@@ -1,8 +1,6 @@
 <template>
-	<span :class="{ 'farm-chip': true }">
-		<farm-typography tag="span" size="sm">
-			<slot></slot>
-		</farm-typography>
+	<span :class="{ 'farm-chip': true, 'farm-chip--dense': dense }">
+		<farm-typography tag="span" size="sm"> <slot></slot> </farm-typography>
 	</span>
 </template>
 <script lang="ts">
@@ -11,6 +9,15 @@ import Vue from 'vue';
 export default Vue.extend({
 	name: 'farm-chip',
 	inheritAttrs: true,
+	props: {
+		/**
+		 * Is dense (not 100% width)?
+		 */
+		dense: {
+			type: Boolean,
+			default: false,
+		},
+	},
 });
 </script>
 <style lang="scss" scoped>

package/src/components/DataTablePaginator/DataTablePaginator.scss

@@ -55,9 +55,13 @@ ul.farm-paginator {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    margin: 1rem 1.5rem 0;
+    margin: 0;
 
     &.hidden-perpageoptions {
         justify-content: flex-end;
     }
+}
+
+.farm-paginator--gutter {
+    margin: 1rem 1.5rem 0;
 }

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

@@ -25,13 +25,13 @@ export const Primary = () => ({
 	components: { DataTablePaginator },
 	data() {
 		return {
-			totalPages: null
+			totalPages: 8
 		};
 	},
 	template: '<DataTablePaginator :totalPages="totalPages" :page="1" />',
 	mounted() {
 		setTimeout(() => {
-			this.totalPages = 2;
+			this.totalPages = 0;
 		}, 1000);
 	}
 });

package/src/components/DataTablePaginator/DataTablePaginator.vue

@@ -1,7 +1,10 @@
 <template>
 	<section
-		class="v-data-table-custom-footer"
-		:class="{ 'hidden-perpageoptions': hidePerPageOptions }"
+		:class="{
+			'v-data-table-custom-footer': true,
+			'hidden-perpageoptions': hidePerPageOptions,
+			'farm-paginator--gutter': hasGutter,
+		}"
 	>
 		<div v-if="!hidePerPageOptions">
 			<v-select
@@ -13,9 +16,9 @@
 			></v-select>
 		</div>
 
-		<ul :class="{ 'farm-paginator': true, 'farm-paginator--disabled': disabled }">
+		<ul :class="{ 'farm-paginator': true, 'farm-paginator--disabled': disabled || totalPages == null }">
 			<li>
-				<button :disabled="currentPage === 1 || disabled" @click="previousPage">
+				<button :disabled="currentPage === 1 || disabled || totalPages == null" @click="previousPage">
 					<farm-icon color="gray" size="sm">chevron-left</farm-icon>
 				</button>
 			</li>
@@ -34,7 +37,7 @@
 			</li>
 
 			<li>
-				<button :disabled="currentPage === totalPages || disabled"  @click="nextPage">
+				<button :disabled="currentPage === totalPages || disabled || totalPages == null || totalPages === 0" @click="nextPage">
 					<farm-icon color="gray" size="sm">chevron-right</farm-icon>
 				</button>
 			</li>
@@ -67,7 +70,10 @@ export default Vue.extend({
 		/**
 		 * Total de páginas
 		 */
-		totalPages: null,
+		totalPages: {
+			type: Number,
+			default: null,
+		},
 		/**
 		 * Desabilita controles
 		 */
@@ -89,6 +95,10 @@ export default Vue.extend({
 			type: Number,
 			default: 10,
 		},
+		hasGutter: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	methods: {
 		range(from: number, to: number) {

package/src/components/Icon/Icon.stories.js

@@ -1,5 +1,4 @@
 import { withDesign } from 'storybook-addon-designs';
-import Icon from './Icon';
 import colors from '../../configurations/colors';
 import sizes from '../../configurations/sizes';
 import iconsList from './icons_list';
@@ -84,14 +83,25 @@ export const ListOfIcons = () => ({
 	data() {
 		return {
 			iconsList: [...iconsList],
+			filterKey: '',
 		};
 	},
-	template: `<div class="icons-container__list">
-       <div v-for="icon of iconsList" :key="'icon_' + icon">
-       <farm-icon>
-            {{ icon }}
-        </farm-icon>
-        <span>{{ icon }}</span>
-       </div>
-	</div>`,
+	watch: {
+		filterKey(newValue) {
+			this.iconsList = [...iconsList].filter(
+				item => item.toLowerCase().indexOf(newValue.toLowerCase()) >= 0
+			);
+		},
+	},
+	template: `<div>
+        <farm-textfield v-model="filterKey" style="margin: 0 auto; width: 240px;" />
+        <div class="icons-container__list">
+            <div v-for="icon of iconsList" :key="'icon_' + icon">
+                <farm-icon>
+                    {{ icon }}
+                </farm-icon>
+                <span>{{ icon }}</span>
+            </div>
+        </div>
+    </div>`,
 });

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

@@ -59,3 +59,58 @@ export const Primary = () => ({
 	},
 	template: `<farm-logger :items="items" />`,
 });
+
+export const Details = () => ({
+	data() {
+		return {
+			items: [
+				{
+					message: 'Recusado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'error',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
+				{
+					message: 'Aprovado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'success',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
+				{
+					message: 'Aprovado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'success',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
+				{
+					message: 'Recusado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'error',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
+				{
+					message: 'Recusado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'error',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
+			],
+		};
+	},
+	template: `<farm-logger :items="items" />`,
+});

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

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

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

@@ -74,3 +74,43 @@ export const CustomIcon = () => ({
 	},
 	template: `<farm-logger-item :item="item" />`,
 });
+
+export const Details = () => ({
+	data() {
+		return {
+			items: [
+				{
+					icon: 'book',
+					message: 'Aprovado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'success',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
+				{
+					icon: 'book',
+					message: 'Reprovado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'error',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
+				{
+					icon: 'book',
+					message: 'Reprovado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'primary',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
+			],
+		};
+	},
+	template: `<div><farm-logger-item v-for="item of items" :key="item.status" :item="item" /></div>`,
+});

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

@@ -19,6 +19,14 @@
 				{{ item.userName }}
 			</span>
 		</div>
+		<farm-btn
+			v-if="hasDetails"
+			:color="buttonColor"
+			plain
+			title="Ver Detalhes"
+			@click="callDetails"
+			>Ver Detalhes</farm-btn
+		>
 	</section>
 </template>
 <script lang="ts">
@@ -33,8 +41,13 @@ export default Vue.extend({
 		 */
 		item: { required: true, type: Object as PropType<ILoggerItem> },
 	},
+	methods: {
+		callDetails(): void {
+			this.item.details();
+		},
+	},
 	computed: {
-		mdiIconName() {
+		mdiIconName(): string {
 			if (this.item.icon) {
 				return `${this.item.icon}`;
 			}
@@ -43,9 +56,21 @@ export default Vue.extend({
 			}
 			return `${this.item.status === 'success' ? 'check' : 'close'}`;
 		},
+		buttonColor(): string {
+			if (this.item.status === 'success') {
+				return 'secondary';
+			} else if (this.item.status === 'error') {
+				return 'error';
+			}
+
+			return 'primary';
+		},
+		hasDetails(): boolean {
+			return !!this.item.details;
+		},
 	},
 });
 </script>
 <style lang="scss" scoped>
-@import './LoggerItem.scss'
+@import './LoggerItem.scss';
 </style>

package/src/components/Logger/LoggerItem/__tests__/LoggerItem.spec.js

@@ -49,5 +49,45 @@ describe('LoggerItem component', () => {
 			expect(component.mdiIconName).toEqual('close');
 		});
 
+		it('Should return success button color', async () => {
+			await wrapper.setProps({
+				item: {
+					status: 'success',
+				},
+			});
+			expect(component.buttonColor).toEqual('secondary');
+		});
+
+		it('Should return error button color', async () => {
+			await wrapper.setProps({
+				item: {
+					status: 'error',
+				},
+			});
+			expect(component.buttonColor).toEqual('error');
+		});
+
+		it('Should return default button color', async () => {
+			await wrapper.setProps({
+				item: {
+					status: 'primary',
+				},
+			});
+			expect(component.buttonColor).toEqual('primary');
+		});
+
+		it('Should not have a detail button', async () => {
+			await wrapper.setProps({
+				item: {
+					details: () => {},
+				},
+			});
+
+			expect(component.hasDetails).toBeTruthy();
+		});
+
+		it('Should not have a detail button', () => {
+			expect(component.hasDetails).toBeFalsy();
+		});
 	});
 });

package/src/components/MultipleFilePicker/MultipleFilePicker.stories.js

@@ -3,21 +3,52 @@ import MultipleFilePicker from './MultipleFilePicker.vue';
 export default {
 	title: 'Form/MultipleFilePicker',
 	component: MultipleFilePicker,
+	parameters: {
+		docs: {
+			description: {
+				component: `Multiple File Picker<br />
+				selector: <em>farm-multiple-filepicker</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
 };
 
 export const Primary = () => ({
-	template: '<MultipleFilePicker />',
+	template: '<farm-multiple-filepicker />',
 });
 
 export const MaxFileSize = () => ({
-	template: '<MultipleFilePicker :maxFileSize="5" />',
+	template: '<farm-multiple-filepicker :maxFileSize="5" />',
 });
 
 export const MaxFilesNumber = () => ({
-	template: '<MultipleFilePicker :maxFileSize="5" :maxFilesNumber="1" />',
+	template: '<farm-multiple-filepicker :maxFileSize="5" :maxFilesNumber="1" />',
 });
 
 export const Download = () => ({
 	template:
-		'<MultipleFilePicker :maxFileSize="5" :downloadFiles="[{ id: 1, name: `Arquivo 1`, size: 10000 }, { id: 2, name: `Arquivo 2`, size: 15000 }]" />',
+		'<farm-multiple-filepicker :maxFileSize="5" :downloadFiles="[{ id: 1, name: `Arquivo 1`, size: 10000 }, { id: 2, name: `Arquivo 2`, size: 15000 }]" />',
+});
+
+export const InvalidFiles = () => ({
+	data() {
+		return {
+			fileTypes:
+				'.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel',
+		};
+	},
+	methods: {
+		onInvalidFiles(files) {
+			alert(`${files.length} invalid file(s)`);
+		},
+	},
+	template: `<div>
+		<farm-multiple-filepicker
+			:maxFileSize="5"
+			:maxFilesNumber="3"
+			:acceptedFileTypes="fileTypes"
+			@onInvalidFiles="onInvalidFiles" />
+	</div>`,
 });

package/src/components/MultipleFilePicker/MultipleFilePicker.vue

@@ -94,8 +94,6 @@
 </template>
 <script lang="ts">
 import Vue, { PropType } from 'vue';
-import DefaultButton from '../Buttons/DefaultButton';
-import Icon from '../Icon';
 import { sizeOf } from '@farm-investimentos/front-mfe-libs-ts';
 
 export type DownloadFiles = {
@@ -106,10 +104,7 @@ export type DownloadFiles = {
 
 export default Vue.extend({
 	name: 'farm-multiple-filepicker',
-	components: {
-		'farm-btn': DefaultButton,
-		'farm-icon': Icon,
-	},
+
 	props: {
 		/*
 		 * Accepted file types
@@ -200,15 +195,11 @@ export default Vue.extend({
 				this.$emit('onFileChange', newValue);
 				return;
 			}
-			const invalidTypeArray = newValue.filter(file => {
-				if (
+			const invalidTypeArray = newValue.filter(
+				file =>
 					this.acceptedFileTypes !== '*' &&
 					this.acceptedFileTypes.indexOf(file.type) === -1
-				) {
-					return true;
-				}
-				return false;
-			});
+			);
 
 			if (invalidTypeArray.length > 0) {
 				const validTypeArray = newValue.filter(file => {
@@ -217,7 +208,7 @@ export default Vue.extend({
 					}
 					return true;
 				});
-
+				this.$emit('onInvalidFiles', [...invalidTypeArray]);
 				this.files = validTypeArray;
 				return;
 			}

package/src/examples/Modal.stories.js

@@ -1,5 +1,4 @@
 import { withDesign } from 'storybook-addon-designs';
-import { DialogHeader, DialogFooter } from '../main';
 
 export default {
 	title: 'Display/Dialog/Examples',

package/src/examples/Table.stories.js

@@ -1,4 +1,6 @@
 import { withDesign } from 'storybook-addon-designs';
+import DataTableEmptyWrapper from '../components/DataTableEmptyWrapper';
+import DataTablePaginator from '../components/DataTablePaginator';
 
 const headers = [
 	{