@farm-investimentos/front-mfe-components-vue3 1.1.1 → 1.1.4

package/src/components/MultipleFilePicker/MultipleFilePicker.vue

@@ -1,37 +1,66 @@
 <template>
-	<section ref="container" id="droparea-container">
+	<section
+		ref="container"
+		id="droparea-container"
+	>
 		<input
 			type="file"
 			name="file"
 			multiple
 			ref="upload"
-			:accept="acceptedFileTypes"
-			@change="fileChange($event.target.files)"
+			:accept="props.acceptedFileTypes"
+			@change="handleFileChange"
 		/>
-		<div v-if="!hasFiles" class="selectfile-container">
-			<farm-icon class="upload-icon" color="primary" size="lg" @click="addMoreFiles">
+
+		<div
+			v-if="!hasFiles"
+			class="selectfile-container"
+		>
+			<farm-icon
+				class="upload-icon"
+				color="primary"
+				size="lg"
+				@click="addMoreFiles"
+			>
 				cloud-upload-outline
 			</farm-icon>
-			<farm-subtitle :type="2" variation="regular" color="primary">
+			<farm-subtitle
+				:type="2"
+				variation="regular"
+				color="primary"
+			>
 				Arraste e solte o arquivo <br />
 				ou clique aqui
 			</farm-subtitle>
 		</div>
 
 		<ul
-			v-if="downloadFiles.length"
+			v-if="props.downloadFiles.length"
 			class="listFilesStyled listFilesStyled--download"
 			:class="{
 				'listFilesStyled--margin-bottom': files.length === 0,
 			}"
 		>
-			<li class="itemFilesStyled" v-for="file in downloadFiles" :key="file.id">
+			<li
+				class="itemFilesStyled"
+				v-for="file in props.downloadFiles"
+				:key="file.id"
+			>
 				<div class="itemFilesContentStyled">
 					<div class="fileDocumentStyled">
-						<farm-icon color="black" variation="50" size="sm">attachment</farm-icon>
+						<farm-icon
+							color="black"
+							variation="50"
+							size="sm"
+						>
+							attachment
+						</farm-icon>
 					</div>
 					<div>
-						<farm-bodysmall color="black" color-variation="50">
+						<farm-bodysmall
+							color="black"
+							color-variation="50"
+						>
 							Arquivo selecionado: {{ file.name }} ({{ sizeOf(file.size) }})
 						</farm-bodysmall>
 					</div>
@@ -45,24 +74,42 @@
 						title="Baixar Arquivo"
 						@click.prevent="onDownload(file.id)"
 					>
-						<farm-icon class="download-button__icon mr-sm-3" size="md"
-							>download</farm-icon
+						<farm-icon
+							class="download-button__icon mr-sm-3"
+							size="md"
 						>
-
+							download
+						</farm-icon>
 						<span class="download-button__text">Baixar Arquivo</span>
 					</farm-btn>
 				</div>
 			</li>
 		</ul>
 
-		<ul class="listFilesStyled" v-if="files.length > 0">
-			<li class="itemFilesStyled" v-for="(file, index) in files" :key="index">
+		<ul
+			class="listFilesStyled"
+			v-if="files.length > 0"
+		>
+			<li
+				class="itemFilesStyled"
+				v-for="(file, index) in files"
+				:key="index"
+			>
 				<div class="itemFilesContentStyled">
 					<div class="fileDocumentStyled">
-						<farm-icon color="black" variation="50" size="sm">attachment</farm-icon>
+						<farm-icon
+							color="black"
+							variation="50"
+							size="sm"
+						>
+							attachment
+						</farm-icon>
 					</div>
 					<div>
-						<farm-bodysmall color="black" color-variation="50">
+						<farm-bodysmall
+							color="black"
+							color-variation="50"
+						>
 							Arquivo selecionado: {{ file.name }} ({{ sizeOf(file.size) }})
 						</farm-bodysmall>
 					</div>
@@ -78,10 +125,17 @@
 					>
 						<farm-icon size="md">close</farm-icon>
 					</farm-btn>
-					<farm-icon size="md" color="neutral" v-if="file.success">check</farm-icon>
+					<farm-icon
+						size="md"
+						color="neutral"
+						v-if="file.success === true"
+					>
+						check
+					</farm-icon>
 				</div>
 			</li>
 		</ul>
+
 		<farm-btn
 			v-if="canAddMoreFiles && hasFiles"
 			outlined
@@ -94,169 +148,102 @@
 		</farm-btn>
 	</section>
 </template>
-<script lang="ts">
-import { PropType } from 'vue';
+
+<script setup lang="ts">
+import { ref, computed, watch, defineEmits } from 'vue';
 
 import { sizeOf } from '@farm-investimentos/front-mfe-libs-ts';
 
-export type DownloadFiles = {
+type DownloadFiles = {
 	id: number | string;
 	name: string;
 	size: number;
 };
 
-export default {
-	name: 'farm-multiple-filepicker',
-
-	props: {
-		/*
-		 * Accepted file types
-		 */
-		acceptedFileTypes: {
-			type: String,
-			default: '*',
-		},
-		/**
-		 * Max file size (in MB)
-		 */
-		maxFileSize: {
-			default: 0,
-		},
-		/**
-		 * Max files number
-		 */
-		maxFilesNumber: {
-			type: Number,
-			default: 0,
-		},
-		/**
-		 * File List from files who could be download
-		 */
-		downloadFiles: {
-			type: Array as PropType<Array<DownloadFiles>>,
-			default: () => [],
-		},
-	},
-	data() {
-		return {
-			dropArea: null,
-			files: [],
-			sizeOf,
-		};
-	},
-	computed: {
-		hasFiles(): boolean {
-			return this.files.length > 0 || this.downloadFiles.length > 0;
-		},
-		canAddMoreFiles(): boolean {
-			return this.filesLength < this.maxFilesNumber;
-		},
-		filesLength(): number {
-			return this.files.length + this.downloadFiles.length;
-		},
-		disabledButton(): boolean {
-			if (this.maxFilesNumber === 0) return false;
-			return this.filesLength >= this.maxFilesNumber;
-		},
-	},
-	mounted() {
-		this.dropArea = this.$refs.container;
-		this.addListeners();
-	},
-	methods: {
-		addMoreFiles(): void {
-			this.$refs.container.querySelector('input').click();
-		},
-		reset(): void {
-			this.$refs.container.querySelector('input').value = '';
-			this.files = [];
-		},
-		fileChange(fileList): void {
-			this.files.push(...fileList);
-		},
-		handlerFunctionHighlight(): void {
-			this.dropArea.classList.add('highlight');
-		},
-		handlerFunctionUnhighlight(): void {
-			this.dropArea.classList.remove('highlight');
-		},
-		addListeners(): void {
-			this.dropArea.addEventListener('dragenter', this.handlerFunctionHighlight, false);
-			this.dropArea.addEventListener('dragleave', this.handlerFunctionUnhighlight, false);
-			this.dropArea.addEventListener('dragover', this.handlerFunctionHighlight, false);
-			this.dropArea.addEventListener('drop', this.handlerFunctionUnhighlight, false);
-		},
-
-		remove(index: number): void {
-			if (this.files.length === 1) this.reset();
-			this.files.splice(index, 1);
-		},
-
-		onDownload(id: number): void {
-			this.$emit('onDownload', id);
-		},
-	},
-	watch: {
-		files(newValue) {
-			if (newValue.length === 0 && this.downloadFiles.length === 0) {
-				this.$emit('onFileChange', newValue);
-				return;
-			}
-			const invalidTypeArray = newValue.filter(file => {
-				const type = file.type;
-
-				return (
-					this.acceptedFileTypes !== '*' &&
-					(this.acceptedFileTypes.indexOf(file.type) === -1 || !type)
-				);
-			});
-
-			if (invalidTypeArray.length > 0) {
-				const validTypeArray = newValue.filter(file => {
-					const type = file.type;
-					if (this.acceptedFileTypes.indexOf(file.type) === -1 || !type) {
-						return false;
-					}
-					return true;
-				});
-				this.$emit('onInvalidFiles', [...invalidTypeArray]);
-				this.files = validTypeArray;
-				return;
-			}
+type ExtendedFile = {
+  name: string;
+  size: number;
+  success?: boolean;
+};
 
-			if (
-				!!this.maxFilesNumber &&
-				newValue.length + this.downloadFiles.length > this.maxFilesNumber
-			) {
-				this.files = newValue.slice(0, this.maxFilesNumber - this.downloadFiles.length);
-				this.$emit('onMaxFilesNumberWarning');
-				return;
-			}
+defineOptions({
+	name: 'farm-multiple-filepicker',
+});
+
+const props = defineProps({
+	acceptedFileTypes: { type: String, default: '*' },
+	maxFileSize: { type: Number, default: 0 },
+	maxFilesNumber: { type: Number, default: 0 },
+	downloadFiles: { type: Array as () => DownloadFiles[], default: () => [] },
+});
+
+const emit = defineEmits([
+	'onFileChange',
+	'onInvalidFiles',
+	'onMaxFilesNumberWarning',
+	'onDownload',
+	'onReset',
+]);
+
+const files = ref<ExtendedFile[]>([]);
+const dropArea = ref<HTMLElement | null>(null);
+const container = ref<HTMLElement | null>(null);
+
+const hasFiles = computed(() => files.value.length > 0 || props.downloadFiles.length > 0);
+const canAddMoreFiles = computed(() => files.value.length < props.maxFilesNumber);
+const disabledButton = computed(() =>
+	props.maxFilesNumber === 0 ? false : files.value.length >= props.maxFilesNumber
+);
+
+const addMoreFiles = () => {
+	const input = dropArea.value?.querySelector('input[type="file"]') as HTMLInputElement;
+	if (input) input.click();
+};
 
-			if (this.maxFileSize > 0) {
-				const files = newValue.filter(file => {
-					const sizeInMB = file.size / (1024 * 1024);
-					if (sizeInMB > this.maxFileSize) return true;
+// const reset = () => {
+// 	const input = container.value?.querySelector('input[type="file"]') as HTMLInputElement;
+// 	if (input) input.value = '';
+// 	files.value = [];
+// 	emit('onReset');
+// };
 
-					return false;
-				});
-				if (files.length > 0) {
-					this.files = newValue.filter(file => {
-						const sizeInMB = file.size / (1024 * 1024);
-						if (sizeInMB < this.maxFileSize) return true;
+const remove = (index: number) => {
+	files.value.splice(index, 1);
+	emit('onFileChange', files.value);
+};
 
-						return false;
-					});
+const handleFileChange = (event: Event) => {
+	const target = event.target as HTMLInputElement;
+	const fileList = target.files ? Array.from(target.files) : [];
+	if (fileList.length) {
+		files.value = [...files.value, ...fileList];
+		emit('onFileChange', files.value);
+	}
+};
 
-					this.$emit('onMaxFileSizeWarning');
-					return;
-				}
-			}
-			this.$emit('onFileChange', this.files);
-		},
-	},
+const onDownload = (id: number | string) => {
+	emit('onDownload', id);
 };
+
+watch(files, newValue => {
+	if (newValue.length > props.maxFilesNumber && props.maxFilesNumber > 0) {
+		files.value = newValue.slice(0, props.maxFilesNumber);
+		emit('onMaxFilesNumberWarning');
+	}
+
+	if (props.maxFileSize > 0) {
+		const validFiles = newValue.filter(file => file.size / (1024 * 1024) <= props.maxFileSize);
+		if (validFiles.length !== newValue.length) {
+			emit(
+				'onInvalidFiles',
+				newValue.filter(file => !validFiles.includes(file))
+			);
+			files.value = validFiles;
+		}
+	}
+});
 </script>
+
 <style scoped lang="scss">
 @import './MultipleFilePicker.scss';
 </style>

package/src/components/MultipleFilePicker/__tests__/MultipleFilePicker.spec.js

@@ -1,184 +1,102 @@
-import { shallowMount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 
 import MultipleFilePicker from '../index';
 
 describe('MultipleFilePicker component', () => {
 	let wrapper;
-	let component;
 
 	beforeEach(() => {
-		wrapper = shallowMount(MultipleFilePicker, {
-			propsData: {
+		wrapper = mount(MultipleFilePicker, {
+			props: {
 				maxFileSize: 1,
 				maxFilesNumber: 10,
 				downloadFiles: [],
 				acceptedFileTypes: 'application/pdf,image/jpeg,image/jpg,image/png',
 			},
+			global: {
+				mocks: {
+					'farm-icon': { template: '<i></i>' },
+					'farm-btn': { template: '<button><slot /></button>' },
+					'farm-subtitle': { template: '<div><slot /></div>' },
+					'farm-bodysmall': { template: '<span><slot /></span>' },
+				},
+			},
 		});
-		component = wrapper.vm;
 	});
 
-	test('MultipleFilePicker created', () => {
-		expect(wrapper).toBeDefined();
+	test('MultipleFilePicker is created', () => {
+		expect(wrapper.exists()).toBe(true);
 	});
 
 	describe('Methods', () => {
-		describe('handlerFunctionHighlight', () => {
-			it('Should add class', () => {
-				const spyObj = jest.spyOn(wrapper.vm.dropArea.classList, 'add');
-				wrapper.vm.handlerFunctionHighlight();
-				expect(spyObj).toHaveBeenCalled();
-			});
-		});
-
-		describe('handlerFunctionUnhighlight', () => {
-			it('Should add class', () => {
-				const spyObj = jest.spyOn(wrapper.vm.dropArea.classList, 'remove');
-				wrapper.vm.handlerFunctionUnhighlight();
-				expect(spyObj).toHaveBeenCalled();
-			});
-		});
-
-		describe('addListeners', () => {
-			it('Should add listeners', () => {
-				const spyObj = jest.spyOn(wrapper.vm.dropArea, 'addEventListener');
-				wrapper.vm.addListeners();
-				expect(spyObj).toHaveBeenCalled();
-			});
-		});
+		it('handleFileChange should update files and emit event', async () => {
+			const file = new File(['file content'], 'test.pdf', { type: 'application/pdf' });
+			const input = wrapper.find('input[type="file"]');
 		
-		describe('fileChange', () => {
-			it('should open file input', () => {
-				const file = new File([], 'test');
-				component.fileChange([file]);
-				expect(component.files).toEqual([file]);
+			Object.defineProperty(input.element, 'files', {
+				value: [file],
 			});
+		
+			await input.trigger('change');
+			expect(wrapper.vm.files).toHaveLength(1);
+			expect(wrapper.emitted().onFileChange).toBeTruthy();
 		});
+		
 
-		describe('reset', () => {
-			it('should reset', () => {
-				const file = new File([], 'test');
-				component.files = [file];
-				component.reset();
-				expect(component.files.length).toEqual(0);
-			});
+		it('remove should remove file and emit onFileChange', () => {
+			wrapper.vm.files = [{ name: 'test.pdf', size: 1000 }];
+			wrapper.vm.remove(0);
+			expect(wrapper.vm.files).toHaveLength(0);
+			expect(wrapper.emitted().onFileChange).toBeTruthy();
 		});
 
-		describe('remove', () => {
-			it('should remove an item and call reset method when files length is 1', () => {
-				const spy = jest.spyOn(component, 'reset');
-				const file = new File([], 'test');
-				component.files = [file];
-				component.remove(0);
-				expect(component.files).toEqual([]);
-				expect(spy).toHaveBeenCalled();
-			});
-
-			it('should remove an item', () => {
-				const spy = jest.spyOn(component, 'reset');
-				const file = new File([], 'test');
-				const file2 = new File([], 'test2');
-				component.files = [file, file2];
-				component.remove(0);
-				expect(component.files).toEqual([file2]);
-				expect(spy).not.toHaveBeenCalled();
-			});
-		});
-		describe('onDownload', () => {
-			it('should remove an item', () => {
-				component.onDownload(1);
-				expect(wrapper.emitted().onDownload[0][0]).toBe(1);
-			});
+		it('addMoreFiles should trigger input click', async () => {
+			const input = wrapper.find('input[type="file"]');		
+			await wrapper.vm.addMoreFiles();
+			expect(input.exists()).toBe(true);
 		});
+		
 	});
 
 	describe('Computed', () => {
-		describe('hasFiles', () => {
-			it('should return false', () => {
-				expect(component.hasFiles).toBeFalsy();
-			});
-
-			it('should return true when files length is more than zero', () => {
-				component.files = [new File([], 'test')];
-				expect(component.hasFiles).toBeTruthy();
-			});
-
-			it('should return true when files length is more than zero', async () => {
-				await wrapper.setProps({
-					downloadFiles: [new File([], 'test')],
-				});
-				expect(component.hasFiles).toBeTruthy();
-			});
-		});
-		describe('filesLength', () => {
-			it('should return files and downloadFiles length', async () => {
-				await wrapper.setProps({
-					downloadFiles: [new File([], 'test')],
-				});
-				component.files = [new File([], 'test2')];
-				expect(component.filesLength).toBe(2);
-			});
-		});
-		describe('disabledButton', () => {
-			it('should return files and downloadFiles length', async () => {
-				await wrapper.setProps({
-					maxFilesNumber: 0,
-				});
-
-				expect(component.disabledButton).toBeFalsy();
-			});
-
-			it('should return files and downloadFiles length', async () => {
-				await wrapper.setProps({
-					maxFilesNumber: 2,
-					downloadFiles: [new File([], 'test')],
-				});
-				component.files = [new File([], 'test2')];
-
-				expect(component.disabledButton).toBeTruthy();
-			});
+		it('hasFiles should return true if there are files', () => {
+			wrapper.vm.files = [{ name: 'test.pdf', size: 1000 }];
+			expect(wrapper.vm.hasFiles).toBe(true);
 		});
 
-		describe('canAddMoreFiles', () => {
-			it('should return files and downloadFiles length', async () => {
-				await wrapper.setProps({
-					maxFilesNumber: 2,
-					downloadFiles: [new File([], 'test')],
-				});
-				component.files = [new File([], 'test2')];
-
-				expect(component.canAddMoreFiles).toBeFalsy();
-			});
+		it('canAddMoreFiles should return false if maxFilesNumber is reached', () => {
+			wrapper.vm.files = Array(10).fill({ name: 'test.pdf', size: 1000 });
+			expect(wrapper.vm.canAddMoreFiles).toBe(false);
 		});
 	});
 
-	describe('Watch', () => {
-		describe('files', () => {
-			it('should emit an onMaxFilesNumberWarning event when there are more files added who maxFilesNumber', () => {
-				wrapper.vm.$options.watch.files.call(
-					component,
-					Array.from(Array(11).keys()).map(() => ({ type: 'image/jpeg' }))
-				);
-				expect(wrapper.emitted().onMaxFilesNumberWarning).toBeDefined();
-			});
-
-			it('should emit an onMaxFileSizeWarning event when one file size is bigger than maxFileSize prop', async () => {
-				await wrapper.setProps({
-					maxFileSize: 3,
-				});
-				wrapper.vm.$options.watch.files.call(component, [
-					{ size: 4145728, type: 'image/jpeg' },
-				]);
-				expect(wrapper.emitted().onMaxFileSizeWarning).toBeDefined();
-			});
-
-			it('should not add invalid types files', () => {
-				wrapper.vm.$options.watch.files.call(
-					component,
-					Array.from(Array(1).keys()).map(() => ({ type: 'image/test' }))
-				);
-				expect(component.files).toEqual([]);
-			});
+	describe('Watchers', () => {
+		it('should emit onMaxFilesNumberWarning if maxFilesNumber is exceeded', async () => {
+			wrapper.setProps({ maxFilesNumber: 10 });
+	
+			const files = Array(11).fill(new File(['content'], 'test.pdf', { type: 'application/pdf' }));
+			const input = wrapper.find('input[type="file"]');
+			Object.defineProperty(input.element, 'files', { value: files });
+	
+			await input.trigger('change');
+			expect(wrapper.vm.files).toHaveLength(10);
+			expect(wrapper.emitted().onMaxFilesNumberWarning).toBeTruthy();
 		});
+	
+		it('should emit onInvalidFiles if a file exceeds maxFileSize', async () => {
+			wrapper.setProps({ maxFileSize: 1 });
+			
+			//cria um arquivo de 3MB
+			const file = new File(['a'.repeat(3 * 1024 * 1024)], 'test.pdf', { type: 'application/pdf' }); 
+			const input = wrapper.find('input[type="file"]');
+
+			Object.defineProperty(input.element, 'files', { value: [file] });
+
+			await input.trigger('change');
+			expect(wrapper.vm.files).toHaveLength(0);
+			expect(wrapper.emitted().onInvalidFiles).toBeTruthy();
+		});
+		
 	});
+	
 });

package/src/scss/CollapseFX.scss

@@ -0,0 +1,15 @@
+.collapse-enter-active,
+.collapse-leave-active {
+  overflow: hidden;
+  transition: max-height 0.5s ease;
+}
+
+.collapse-enter-from,
+.collapse-leave-to {
+  max-height: 0;
+}
+
+.collapse-enter-to,
+.collapse-leave-from {
+  max-height: 400px;
+}