@farm-investimentos/front-mfe-components 9.2.1 → 9.2.2

package/package.json

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

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;
 			}