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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components-vue3",
-	"version": "1.1.1",
+	"version": "1.1.2",
 	"private": false,
 	"repository": {
 		"type": "git",

package/src/components/DialogFooter/DialogFooter.vue

@@ -3,7 +3,7 @@
 		<farm-btn v-if="hasCancel" color="primary" plain @click="$emit('onClose')">
 			{{ closeLabel }}
 		</farm-btn>
-		
+
 		<farm-btn
 			v-for="button in extraButtons"
 			:key="button.label"
@@ -11,16 +11,17 @@
 			:outlined="button.outlined"
 			:disabled="button.disabled"
 			:title="button.label"
-			@click="$emit(button.listener ? button.listener : '')"
+			@click="emitExtraButtonListener(button)"
 		>
 			{{ button.label }}
 		</farm-btn>
+
 		<farm-btn
 			v-if="hasConfirm"
 			:color="confirmColor"
 			:disabled="isConfirmDisabled"
 			:title="confirmLabel"
-			@click="$emit('onConfirm')"
+			@click="emitConfirm"
 		>
 			<farm-icon v-if="confirmIcon">{{ confirmIcon }}</farm-icon>
 			{{ confirmLabel }}
@@ -28,76 +29,70 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { PropType } from 'vue';
+<script setup lang="ts">
+import { PropType, defineEmits } from 'vue';
 
-import IExtraButton from './IExtraButton';
+interface IExtraButton {
+	label: string;
+	color: string;
+	outlined: boolean;
+	disabled: boolean;
+	listener: Function | null;
+}
 
-/**
- * Footer de dialog/modal
- */
-export default {
+defineOptions({
 	name: 'farm-dialog-footer',
-	props: {
-		/**
-		 * Label do botão de confirmação
-		 */
-		confirmLabel: {
-			type: String,
-			default: 'Confirmar',
-		},
-		/**
-		 * Label do botão de fechar
-		 */
-		closeLabel: {
-			type: String,
-			default: 'Fechar',
-		},
-		/**
-		 * Exibe/esconde botão de confirmação
-		 */
-		hasConfirm: {
-			type: Boolean,
-			default: true,
-		},
-		/**
-		 * Exibe/esconde botão de cancelar
-		 */
-		hasCancel: {
-			type: Boolean,
-			default: true,
-		},
-		/**
-		 * Cor do botão de confirmação - usa as do tema do vuetify
-		 */
-		confirmColor: {
-			type: String,
-			default: 'primary',
-		},
-		/**
-		 * Ícone no botão Confirmar
-		 */
-		confirmIcon: {
-			type: String,
-			default: null,
-		},
-		/**
-		 * Desabilita botão de confirmação
-		 */
-		isConfirmDisabled: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		 * lista de botões extra (IExtraButton)
-		 */
-		extraButtons: {
-			type: Array as PropType<Array<IExtraButton>>,
-			default: () => [],
-		},
+});
+
+defineProps({
+	confirmLabel: {
+		type: String,
+		default: 'Confirmar',
+	},
+	closeLabel: {
+		type: String,
+		default: 'Fechar',
+	},
+	hasConfirm: {
+		type: Boolean,
+		default: true,
+	},
+	hasCancel: {
+		type: Boolean,
+		default: true,
+	},
+	confirmColor: {
+		type: String,
+		default: 'primary',
+	},
+	confirmIcon: {
+		type: String,
+		default: null,
 	},
+	isConfirmDisabled: {
+		type: Boolean,
+		default: false,
+	},
+	extraButtons: {
+		type: Array as PropType<IExtraButton[]>,
+		default: () => [],
+	},
+});
+
+const emit = defineEmits(['onClose', 'onConfirm']);
+
+const emitConfirm = () => {
+	emit('onConfirm');
+};
+
+
+const emitExtraButtonListener = (button: IExtraButton) => {
+	if (button.listener) {
+		emit(button.listener);
+	}
 };
 </script>
+
 <style lang="scss" scoped>
 @import 'DialogFooter';
 </style>

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>