@farm-investimentos/front-mfe-components 7.3.1 → 7.3.2

package/package.json

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

package/src/components/FilePicker/FilePicker.scss

@@ -27,7 +27,7 @@ section {
 
     .selectfile-container {
         text-align: center;
-        .v-icon {
+        .farm-icon {
             font-size: 2.25rem;
             margin-bottom: 1rem;
         }
@@ -46,7 +46,7 @@ section {
             margin-bottom: 0;
             font-size: 0.75rem;
         }
-        .v-btn {
+        .farm-btn {
             margin-top: 1rem;
         }
     }

package/src/components/FilePicker/FilePicker.stories.js

@@ -12,7 +12,7 @@ export const Primary = () => ({
 
 export const MaxFileSize = () => ({
 	components: { FilePicker },
-	template: '<FilePicker maxFileSize="5" />',
+	template: '<FilePicker maxFileSize="0.1" />',
 });
 
 Primary.storyName = 'Básico';

package/src/components/FilePicker/FilePicker.vue

@@ -7,28 +7,37 @@
 			:accept="acceptedFileTypes"
 		/>
 		<div v-if="!selectedFile" class="selectfile-container">
-			<v-icon color="secondary">mdi-cloud-upload</v-icon>
+			<farm-icon color="secondary">cloud-upload</farm-icon>
 			<p>Clique para selecionar ou arraste o arquivo aqui</p>
 		</div>
 		<div v-if="selectedFile || maxSizeReach" class="reset-container">
 			<div v-if="selectedFile">
-				<v-icon>mdi-file</v-icon> Arquivo selecionado: {{ selectedFile.name }} ({{
+				<farm-icon>file</farm-icon> Arquivo selecionado: {{ selectedFile.name }} ({{
 					Math.floor(selectedFile.size / 1024)
 				}}kB)
 			</div>
 
 			<p v-if="maxSizeReach" v-html="maxSizeReachMsg"></p>
 
-			<farm-btn depressed outlined color="secondary" class="farm-btn--responsive" @click="reset">
+			<farm-btn
+				outlined
+				color="secondary"
+				class="farm-btn--responsive"
+				title="Escolher outro"
+				@click="reset"
+			>
 				Escolher outro
 			</farm-btn>
 		</div>
 	</section>
 </template>
-<script>
+<script lang="ts">
+import Vue from 'vue';
 import DefaultButton from '../Buttons/DefaultButton';
-import { VIcon } from 'vuetify/lib/components/VIcon';
-export default {
+import Icon from '../Icon';
+
+export default Vue.extend({
+	name: 'farm-filepicker',
 	props: {
 		/*
 		 * Accepted file types
@@ -37,9 +46,9 @@ export default {
 			type: String,
 			default: '*',
 		},
-        /**
-         * Max file size (in MB)
-         */
+		/**
+		 * Max file size (in MB)
+		 */
 		maxFileSize: {
 			default: null,
 		},
@@ -54,7 +63,7 @@ export default {
 	computed: {
 		maxSizeReachMsg() {
 			return `Arquivo ultrapassou o tamanho máximo de ${this.maxFileSize}MB`;
-		}
+		},
 	},
 	mounted() {
 		this.dropArea = this.$refs.container;
@@ -64,10 +73,10 @@ export default {
 		reset() {
 			this.$refs.container.querySelector('input').value = '';
 			this.$emit('onReset');
-            this.maxSizeReach = false;
+			this.maxSizeReach = false;
 			this.selectedFile = null;
 		},
-		fileChange(fileList) {
+		fileChange(fileList: Array<File>) {
 			this.maxSizeReach = false;
 			if (!fileList.length || fileList.length > 1) return;
 
@@ -97,9 +106,9 @@ export default {
 	},
 	components: {
 		'farm-btn': DefaultButton,
-		VIcon,
+		'farm-icon': Icon,
 	},
-};
+});
 </script>
 <style scoped lang="scss">
 @import './FilePicker.scss';