@farm-investimentos/front-mfe-components 3.4.3 → 3.4.6

package/src/components/FilePicker/FilePicker.vue

@@ -1,78 +1,106 @@
 <template>
-    <section ref="container" id="droparea-container">
-        <input
-            type="file"
-            name="file"
-            @change="fileChange($event.target.files)"
-            :accept="acceptedFileTypes"
-        />
-        <div v-if="!selectedFile" class="selectfile-container">
-            <v-icon color="secondary">mdi-cloud-upload</v-icon>
-            <p>Clique para selecionar ou arraste o arquivo aqui</p>
-        </div>
-        <div v-if="selectedFile" class="reset-container">
-            <div>
-                <v-icon>mdi-file</v-icon> Arquivo selecionado: {{ selectedFile.name }} ({{
-                    Math.floor(selectedFile.size / 1024)
-                }}kB)
-            </div>
+	<section ref="container" id="droparea-container">
+		<input
+			type="file"
+			name="file"
+			@change="fileChange($event.target.files)"
+			:accept="acceptedFileTypes"
+		/>
+		<div v-if="!selectedFile" class="selectfile-container">
+			<v-icon color="secondary">mdi-cloud-upload</v-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 }} ({{
+					Math.floor(selectedFile.size / 1024)
+				}}kB)
+			</div>
 
-            <v-btn depressed outlined color="secondary" class="v-btn-responsive" @click="reset"
-                >Escolher outro</v-btn
-            >
-        </div>
-    </section>
+			<p v-if="maxSizeReach" v-html="maxSizeReachMsg"></p>
+
+			<v-btn depressed outlined color="secondary" class="v-btn-responsive" @click="reset"
+				>Escolher outro</v-btn
+			>
+		</div>
+	</section>
 </template>
 <script>
 import { VBtn } from 'vuetify/lib/components/VBtn';
 import { VIcon } from 'vuetify/lib/components/VIcon';
 export default {
-    props: {
-        acceptedFileTypes: {
-            type: String,
-            default: '*',
-        },
-    },
-    data() {
-        return {
-            selectedFile: null,
-            dropArea: null,
-        };
-    },
-    mounted() {
-        this.dropArea = this.$refs.container;
-        this.addListeners();
-    },
-    methods: {
-        reset() {
-            this.$refs.container.querySelector('input').value = '';
-            this.$emit('onReset');
-            this.selectedFile = null;
-        },
-        fileChange(fileList) {
-            if (!fileList.length || fileList.length > 1) return;
-            this.selectedFile = fileList[0];
-            this.$emit('onFileChange', this.selectedFile);
-        },
-        handlerFunctionHighlight() {
-            this.dropArea.classList.add('highlight');
-        },
-        handlerFunctionUnhighlight() {
-            this.dropArea.classList.remove('highlight');
-        },
-        addListeners() {
-            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);
-        },
-    },
-    components: {
-        VBtn,
-        VIcon,
-    },
+	props: {
+		/*
+		 * Accepted file types
+		 */
+		acceptedFileTypes: {
+			type: String,
+			default: '*',
+		},
+        /**
+         * Max file size (in MB)
+         */
+		maxFileSize: {
+			default: null,
+		},
+	},
+	data() {
+		return {
+			selectedFile: null,
+			dropArea: null,
+			maxSizeReach: false,
+		};
+	},
+	computed: {
+		maxSizeReachMsg() {
+			return `Arquivo ultrapassou o tamanho máximo de ${this.maxFileSize}MB`;
+		}
+	},
+	mounted() {
+		this.dropArea = this.$refs.container;
+		this.addListeners();
+	},
+	methods: {
+		reset() {
+			this.$refs.container.querySelector('input').value = '';
+			this.$emit('onReset');
+            this.maxSizeReach = false;
+			this.selectedFile = null;
+		},
+		fileChange(fileList) {
+			this.maxSizeReach = false;
+			if (!fileList.length || fileList.length > 1) return;
+
+			if (this.maxFileSize) {
+				const sizeInMB = fileList[0].size / (1024 * 1024);
+
+				if (sizeInMB > this.maxFileSize) {
+					this.maxSizeReach = true;
+					return;
+				}
+			}
+			this.selectedFile = fileList[0];
+			this.$emit('onFileChange', this.selectedFile);
+		},
+		handlerFunctionHighlight() {
+			this.dropArea.classList.add('highlight');
+		},
+		handlerFunctionUnhighlight() {
+			this.dropArea.classList.remove('highlight');
+		},
+		addListeners() {
+			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);
+		},
+	},
+	components: {
+		VBtn,
+		VIcon,
+	},
 };
 </script>
 <style scoped lang="scss">
 @import './FilePicker.scss';
-</style>
+</style>

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

@@ -23,6 +23,14 @@ describe('FilePicker component', () => {
 				wrapper.vm.fileChange([]);
 				expect(wrapper.emitted().onFileChange).toBeUndefined();
 			});
+
+			it('Should handle max file size', async () => {
+				await wrapper.setProps({
+					maxFileSize: 5,
+				});
+				wrapper.vm.fileChange([{ size: 6 * 1024 * 1024 }]);
+				expect(wrapper.vm.maxSizeReach).toBeTruthy();
+			});
 		});
 
 		describe('handlerFunctionHighlight', () => {
@@ -49,4 +57,13 @@ describe('FilePicker component', () => {
 			});
 		});
 	});
+
+	describe('Computed properties', () => {
+		it('Should return maxSizeReachMsg', () => {
+			wrapper.setProps({
+				maxFileSize: 5,
+			});
+			expect(wrapper.vm.maxSizeReachMsg).toContain('Arquivo ultrapassou o tamanho máximo');
+		});
+	});
 });

package/src/components/PromptUserToConfirm/PromptUserToConfirm.stories.js

@@ -7,7 +7,14 @@ export default {
 
 export const Primary = () => ({
 	components: { PromptUserToConfirm },
-	template: '<div style="max-width: 320px"><PromptUserToConfirm /></div>',
+	data() {
+		return {
+			model: {},
+		};
+	},
+	template: `<div style="max-width: 320px"><PromptUserToConfirm  v-model="model"/>
+	match: {{ model }}
+	</div>`,
 });
 
 export const CustomTitle = () => ({
@@ -15,5 +22,18 @@ export const CustomTitle = () => ({
 	template: '<div style="max-width: 320px"><PromptUserToConfirm title="Custom" /></div>',
 });
 
+export const CustomMatchInput = () => ({
+	components: { PromptUserToConfirm },
+	data() {
+		return {
+			model: {},
+		};
+	},
+	template: `<div style="max-width: 320px"><PromptUserToConfirm title="Custom match input: CONFIRMAR" match="CONFIRMAR" v-model="model" />
+	match: {{ model }}
+	</div>`,
+});
+
 Primary.storyName = 'Básico';
 CustomTitle.storyName = 'Título customizado';
+CustomMatchInput.storyName = 'Match input customizado';

package/src/examples/Table.stories.js

@@ -9,11 +9,30 @@ const headers = [
 		width: 80,
 		align: 'left',
 	},
+	{
+		text: 'Name',
+		sortable: false,
+		value: 'id',
+		width: 160,
+		align: 'left',
+	},
 ];
 
 export default {
 	title: 'Examples/Table',
 	decorators: [withDesign],
+	parameters: {
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%8D---Design-System?node-id=1505%3A372',
+		},
+		viewMode: 'docs',
+		docs: {
+			description: {
+				component: `Data Table (inherit from Vuetify)`,
+			},
+		},
+	},
 };
 
 export const TableNoData = () => ({
@@ -26,8 +45,10 @@ export const TableNoData = () => ({
 		};
 	},
 	template: `<div>
+	
 	<v-data-table
         hide-default-footer
+		id="v-data-table--default"
 		:headers="headers"
 	>
     <template slot="no-data">
@@ -46,12 +67,17 @@ export const TableSampleData = () => ({
 	data() {
 		return {
 			headers,
-			items: [{ id: 1 }, { id: 2 }, { id: 3 }],
+			items: [
+				{ id: 1, name: 'name 1' },
+				{ id: 2, name: 'name 2' },
+				{ id: 3, name: 'name 3' },
+			],
 		};
 	},
 	template: `<div>
 	<v-data-table
         hide-default-footer
+		id="v-data-table--default"
 		:headers="headers"
         :items="items"
 	>
@@ -62,23 +88,8 @@ export const TableSampleData = () => ({
 
 TableNoData.story = {
 	name: 'No data',
-	parameters: {
-		design: {
-			type: 'figma',
-			url:
-				'https://www.figma.com/file/rkkAsX4IP0tzv1udIDXlqe/%E2%9C%8D---Onboarding---PJ?node-id=2867%3A10594',
-		},
-	},
 };
 
 TableSampleData.story = {
 	name: 'With data',
-	parameters: {
-		design: {
-			type: 'figma',
-			url:
-				'https://www.figma.com/file/rkkAsX4IP0tzv1udIDXlqe/%E2%9C%8D---Onboarding---PJ?node-id=2867%3A10594',
-		},
-	},
 };
-

package/src/examples/inputs/Password.stories.js

@@ -0,0 +1,42 @@
+export default {
+	title: 'Examples/Inputs/Password',
+	component: Password,
+	parameters: {
+		docs: {
+			description: {
+				component: `How to toggle password visivility.<br />
+- Password visibility: hidden -> eye on icon (the click/tap will show the password)
+- Password visibility: show -> eye off icon (the click/tap will hide the password)`,
+			},
+		},
+	},
+};
+
+export const Password = () => ({
+	data() {
+		return {
+			password: '',
+			showHidden: false,
+		};
+	},
+	template: `
+        <v-col cols="12" sm="12" md="4" class="v-col-fieldset-default pl-0">
+        <label>
+			Toggle visibility from password field
+		</label>
+        <v-text-field
+            color="secondary"
+            dense
+            outlined
+            v-model="password"
+            :append-icon="showHidden ? 'mdi-eye-off' : 'mdi-eye'"
+            :type="showHidden ? 'text' : 'password'"
+            @click:append="showHidden = !showHidden"
+        />
+        </v-col>
+    `,
+});
+
+Password.story = {
+	name: 'Básico',
+};

package/src/scss/Sticky-table.scss

@@ -0,0 +1,69 @@
+$defaultLefts: 0, 4rem, 4rem;
+@mixin stickytable($selector, $columns: 1, $lefts: $defaultLefts) {
+	#{$selector} {
+		tbody {
+			font-size: 0.75rem;
+		}
+		tbody tr:nth-of-type(odd) td {
+			background-color: #f0f0f0;
+		}
+		tr td {
+			background-color: white;
+		}
+		tr th {
+			color: var(--v-primary-base);
+			text-transform: uppercase;
+			font-weight: bold;
+		}
+		tr:not(:last-child) td,
+		tr th {
+			border-bottom: none;
+		}
+		.v-data-table__wrapper {
+			border-top: 1px solid var(--v-gray-lighten2);
+			border-bottom: 1px solid var(--v-gray-lighten2);
+		}
+		tr td:first-child,
+		th:first-child {
+			&:after {
+				content: '';
+				position: absolute;
+				left: 0;
+				bottom: -2px;
+				width: 100%;
+			}
+		}
+
+		@if $columns > 0 {
+			@for $i from 1 through $columns {
+				tr td:nth-child(#{$i}),
+				th:nth-child(#{$i}) {
+					position: sticky;
+					z-index: 4;
+					background-color: white;
+				}
+			}
+
+			@for $i from 1 through $columns {
+				tr td:nth-child(#{$i}),
+				th:nth-child(#{$i}) {
+					left: nth($lefts, $i);
+				}
+			}
+		}
+
+		.v-chip {
+			font-size: 0.75rem;
+			padding: 0 1.5rem;
+		}
+
+		.v-pagination {
+			li button:not([disabled]):not(.v-pagination__item--active):hover {
+				opacity: 0.6;
+			}
+			li button.v-pagination__item--active:hover {
+				cursor: default;
+			}
+		}
+	}
+}

package/src/scss/Table.scss

@@ -0,0 +1,2 @@
+@import './Sticky-table.scss';
+@include stickytable('#v-data-table--default', 1, (0));

package/src/scss/main.scss

@@ -0,0 +1,4 @@
+#root {
+	background: red !important;
+	
+}

package/src/stories/Introduction.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Example/Introduction" />
+<Meta title="Examples/Introduction" />
 
 <style>{`
   .subheading {