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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "3.4.3",
+	"version": "3.4.4",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",
@@ -21,30 +21,26 @@
 		"src/*"
 	],
 	"dependencies": {
-		"@socheatsok78/storybook-addon-vuetify": "^0.1.8",
-		"@vue/cli-service-global": "^4.5.13",
-		"@vue/test-utils": "^1.3.0",
-		"core-js": "^3.6.5",
-		"sass": "~1.32.0",
-		"sass-loader": "^10.2.0",
+		"core-js": "3.21.1",
+		"sass": "1.32.13",
+		"sass-loader": "^10.1.1",
 		"vue": "^2.6.11",
 		"vuetify": "^2.5.7"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.14.8",
+		"@socheatsok78/storybook-addon-vuetify": "^0.1.8",
 		"@storybook/addon-actions": "^6.3.6",
 		"@storybook/addon-essentials": "^6.3.6",
 		"@storybook/addon-links": "^6.3.6",
 		"@storybook/vue": "^6.3.6",
-		"@vue/cli-plugin-babel": "~4.5.0",
-		"@vue/cli-plugin-eslint": "~4.5.0",
-		"@vue/cli-plugin-unit-jest": "^4.5.15",
-		"@vue/cli-service": "~4.5.0",
+		"@vue/cli-plugin-babel": "4.5.15",
+		"@vue/cli-plugin-eslint": "~4.5.14",
+		"@vue/cli-plugin-unit-jest": "~4.5.14",
+		"@vue/cli-service": "~4.5.14",
+		"@vue/test-utils": "^1.3.0",
 		"babel-eslint": "^10.1.0",
-		"babel-loader": "^8.2.2",
 		"eslint": "^6.7.2",
 		"eslint-plugin-vue": "^6.2.2",
-		"jest": "^25.5.4",
 		"storybook-addon-designs": "^6.2.1",
 		"vue-template-compiler": "^2.6.11",
 		"webpack-cli": "^4.9.0"

package/src/components/Buttons/ConfirmButton/ConfirmButton.stories.js

@@ -3,6 +3,16 @@ import ConfirmButton from './ConfirmButton.vue';
 export default {
 	title: 'API/Buttons/Confirm',
 	component: ConfirmButton,
+	parameters: {
+		docs: {
+			description: {
+				component: `Confirm button<br />
+				selector: <em>farm-btn-confirm</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
 };
 
 export const Primary = () => ({

package/src/components/Buttons/DangerButton/DangerButton.stories.js

@@ -3,6 +3,16 @@ import DangerButton from './DangerButton.vue';
 export default {
 	title: 'API/Buttons/DangerButton',
 	component: DangerButton,
+	parameters: {
+		docs: {
+			description: {
+				component: `Danger button<br />
+				selector: <em>farm-btn-fanger</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
 };
 
 export const Primary = () => ({

package/src/components/Buttons/DefaultButton/DefaultButton.stories.js

@@ -3,6 +3,16 @@ import DefaultButton from './DefaultButton.vue';
 export default {
 	title: 'API/Buttons/Default',
 	component: DefaultButton,
+	parameters: {
+		docs: {
+			description: {
+				component: `Default button (inherit from Vuetify)<br />
+				selector: <em>farm-btn</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
 };
 
 export const Primary = () => ({

package/src/components/DataTablePaginator/DataTablePaginator.stories.js

@@ -1,8 +1,24 @@
+import { withDesign } from 'storybook-addon-designs';
 import DataTablePaginator from './DataTablePaginator.vue';
 
 export default {
 	title: 'API/Table/DataTablePaginator',
 	component: DataTablePaginator,
+	decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `Paginator with items per page select<br />
+				selector: <em>farm-datatable-paginator</em>
+				`,
+			},
+		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%8D---Design-System?node-id=1503%3A921',
+		},
+		viewMode: 'docs',
+	},
 };
 
 export const Primary = () => ({
@@ -29,8 +45,7 @@ export const CustomPerPage = () => ({
 const parameters = {
 	design: {
 		type: 'figma',
-		url:
-			'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%8D---Design-System?node-id=1503%3A921',
+		url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%8D---Design-System?node-id=1503%3A921',
 	},
 };
 

package/src/components/DataTablePaginator/DataTablePaginator.vue

@@ -22,14 +22,16 @@
 	</section>
 </template>
 <script>
+import Vue from 'vue';
 import { VSelect } from 'vuetify/lib/components/VSelect';
 import { VPagination } from 'vuetify/lib/components/VPagination';
+
 /**
  * Componente de paginação usado em tabelas e listas
  * com opção de itens por página
  */
-export default {
-	name: 'DataTablePaginator',
+export default Vue.extend({
+	name: 'farm-datatable-paginator',
 	props: {
 		/**
 		 * Lista de opções para o controle de registros por página
@@ -100,7 +102,7 @@ export default {
 		VSelect,
 		VPagination,
 	},
-};
+});
 </script>
 
 <style lang="scss">

package/src/components/DatePicker/DatePicker.stories.js

@@ -3,24 +3,34 @@ import DatePicker from './DatePicker';
 export default {
 	title: 'API/Form/DatePicker',
 	component: DatePicker,
+	parameters: {
+		docs: {
+			description: {
+				component: `Input Date Picker<br />
+				selector: <em>farm-input-datepicker</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
 };
 
 export const Primary = () => ({
 	components: { DatePicker },
 	template: `<div style='max-width: 320px'>
-        <DatePicker inputId="input-custom-id" />
+        <DatePicker inputId="input-custom-id-0" />
     </div>`,
 });
 
 export const InitValue = () => ({
 	components: { DatePicker },
-	template: `<div style='max-width: 320px'><DatePicker inputId="input-custom-id" value="2021-08-01" /></div>`,
+	template: `<div style='max-width: 320px'><DatePicker inputId="input-custom-id-1" value="2021-08-01" /></div>`,
 });
 
 export const MinMaxDates = () => ({
 	components: { DatePicker },
 	template: `<div style='max-width: 320px'>
-        <DatePicker inputId="input-custom-id" max="2021-12-02" min="2021-07-01" />
+        <DatePicker inputId="input-custom-id-2" max="2021-12-02" min="2021-07-01" />
         max="2021-12-02" min="2021-07-01"
     </div>`,
 });

package/src/components/DatePicker/DatePicker.vue

@@ -49,6 +49,7 @@
 	</v-menu>
 </template>
 <script>
+import Vue from 'vue';
 import { VTextField } from 'vuetify/lib/components/VTextField';
 import { VMenu } from 'vuetify/lib/components/VMenu';
 import { VBtn } from 'vuetify/lib/components/VBtn';
@@ -57,7 +58,8 @@ import { defaultFormat as dateDefaultFormatter } from '../../helpers/date';
 /**
  * Componente de input com datepicker para data
  */
-export default {
+export default Vue.extend({
+	name: 'farm-input-datepicker',
 	components: {
 		VTextField,
 		VMenu,
@@ -136,5 +138,5 @@ export default {
 			},
 		},
 	},
-};
+});
 </script>

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

@@ -3,6 +3,7 @@ import DatePicker from '../DatePicker';
 
 describe('DatePicker component', () => {
 	let wrapper;
+	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(DatePicker, {
@@ -10,6 +11,7 @@ describe('DatePicker component', () => {
 				inputId: 'someid',
 			},
 		});
+		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {
@@ -21,4 +23,15 @@ describe('DatePicker component', () => {
 			expect(wrapper.element).toMatchSnapshot();
 		});
 	});
+
+	describe('computed properties', () => {
+		it('get inputVal', () => {
+			expect(component.inputVal).toBeFalsy();
+		});
+
+		it('get inputVal', () => {
+			component.inputVal = 'teste';
+			expect(wrapper.emitted().input).toBeDefined();
+		});
+	});
 });

package/src/components/DefaultTextField/DefaultTextField.vue

@@ -29,9 +29,15 @@ export default {
 		value: {
 			required: true,
 		},
+		/**
+		 * Array of rules
+		 */
 		rules: {
 			type: Array,
 		},
+		/**
+		 * Input is disabled or not
+		 */
 		disabled: {
 			type: Boolean,
 			default: false,
@@ -41,10 +47,16 @@ export default {
 			required: false,
 			default: 'form',
 		},
+		/**
+		 * Input is required or not
+		 */
 		required: {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Mask (v-mask)
+		 */
 		mask: {
 			type: String,
 			default: null,

package/src/components/FilePicker/FilePicker.scss

@@ -1,14 +1,11 @@
 section {
-    //outline: 1px dashed grey;
-    //outline-offset: -0.5rem;
     border: 2px dashed var(--v-gray-lighten1);
     border-radius: 2rem;
     background-color: var(--v-gray-lighten4);
-    //color: var(--v-primary-base);
     padding: 1rem;
     position: relative;
     cursor: pointer;
-    height: 8rem;
+    height: 12rem;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -45,6 +42,10 @@ section {
         flex-direction: column;
         align-items: center;
         justify-content: center;
+        > p {
+            margin-bottom: 0;
+            font-size: 0.75rem;
+        }
         .v-btn {
             margin-top: 1rem;
         }

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

@@ -1,13 +1,19 @@
 import FilePicker from './FilePicker.vue';
 
 export default {
-    title: 'API/FilePicker',
-    component: FilePicker,
+	title: 'API/FilePicker',
+	component: FilePicker,
 };
 
 export const Primary = () => ({
-    components: { FilePicker },
-    template: '<FilePicker />',
+	components: { FilePicker },
+	template: '<FilePicker />',
+});
+
+export const MaxFileSize = () => ({
+	components: { FilePicker },
+	template: '<FilePicker maxFileSize="5" />',
 });
 
 Primary.storyName = 'Básico';
+MaxFileSize.storyName =  'Max File Size';

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