@farm-investimentos/front-mfe-components 3.4.2 → 3.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "3.4.2",
+	"version": "3.4.5",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",
@@ -21,31 +21,28 @@
 		"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",
+		"v-mask": "^2.3.0",
 		"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.stories.js

@@ -1,8 +1,19 @@
+import { withDesign } from 'storybook-addon-designs';
 import DefaultTextField from './DefaultTextField.vue';
 
 export default {
 	title: 'API/Form/DefaultTextField',
 	component: DefaultTextField,
+	decorators: [withDesign],
+	parameters: {
+		viewMode: 'docs',
+		docs: {
+			description: {
+				component: `Default Text Field with label (inherit from Vuetify)<br />
+			selector: <em>farm-textfield-labelled</em>`,
+			},
+		},
+	},
 };
 
 export const Primary = () => ({
@@ -10,7 +21,7 @@ export const Primary = () => ({
 	data() {
 		return {
 			model: 'primary',
-			item: { label: 'Nome do campo', key: 'key' },
+			item: { label: 'Nome do campo', key: 'key', md: 4 },
 		};
 	},
 	template: '<DefaultTextField v-model="model" :item="item" />',
@@ -21,10 +32,12 @@ export const Secondary = () => ({
 	data() {
 		return {
 			model: 'secondary',
-			item: { label: 'Nome do campo', key: 'key' },
+			item: { label: 'Nome do campo', key: 'key', md: 4 },
 		};
 	},
-	template: '<DefaultTextField :item="item" v-model="model" required="true" />',
+	template: `<v-form>
+		<DefaultTextField :item="item" v-model="model" :required="true" />
+	</v-form>`,
 });
 
 export const ReadOnly = () => ({
@@ -32,12 +45,28 @@ export const ReadOnly = () => ({
 	data() {
 		return {
 			model: 'readonly',
-			item: { label: 'Nome do campo', key: 'key' },
+			item: { label: 'Nome do campo', key: 'key', md: 4 },
 		};
 	},
 	template: '<DefaultTextField :item="item" v-model="model" :readonly="true" />',
 });
 
-Primary.storyName = 'Básico';
-Secondary.storyName = 'Label de obrigatório';
-ReadOnly.storyName = 'Input readonly';
+export const Masked = () => ({
+	components: { DefaultTextField },
+	data() {
+		return {
+			model: '12345',
+			item: { label: 'Máscara (##.###)', key: 'key', md: 4 },
+		};
+	},
+	template: `
+	<v-form>
+		<DefaultTextField :item="item" v-model="model" mask="##.###" />
+	</v-form>
+	`,
+});
+
+Primary.storyName = 'Basic';
+Secondary.storyName = 'Required field';
+ReadOnly.storyName = 'Readonly input';
+Masked.storyName = 'Masked';

package/src/components/DefaultTextField/DefaultTextField.vue

@@ -18,20 +18,32 @@
 	</v-col>
 </template>
 <script>
+import Vue from 'vue';
 import { VTextField } from 'vuetify/lib/components/VTextField';
 import { VCol } from 'vuetify/lib/components/VGrid';
-export default {
+
+export default Vue.extend({
+	name: 'farm-textfield-labelled',
 	props: {
 		item: {
 			type: Object,
 			required: true,
 		},
+		/**
+		 * v-model
+		 */
 		value: {
 			required: true,
 		},
+		/**
+		 * Array of rules
+		 */
 		rules: {
 			type: Array,
 		},
+		/**
+		 * Input is disabled or not
+		 */
 		disabled: {
 			type: Boolean,
 			default: false,
@@ -41,14 +53,23 @@ export default {
 			required: false,
 			default: 'form',
 		},
+		/**
+		 * Input is required or not
+		 */
 		required: {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Mask (v-mask)
+		 */
 		mask: {
 			type: String,
 			default: null,
 		},
+		/**
+		 * Input is readonly or not
+		 */
 		readonly: {
 			type: Boolean,
 			default: false,
@@ -80,5 +101,5 @@ export default {
 			return `${this.forKey}-${this.item.key}`;
 		},
 	},
-};
+});
 </script>

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

@@ -29,5 +29,26 @@ describe('DefaultTextField component', () => {
 		it('Should have inputId', () => {
 			expect(component.inputId).toEqual('form-key');
 		});
+
+		it('Should have default inputRules', () => {
+			expect(component.inputRules).toEqual([]);
+		});
+
+		it('Should have inputRules from prop', async () => {
+			expect(component.inputRules).toEqual([]);
+			await wrapper.setProps({
+				rules: [jest.fn()],
+			});
+			expect(component.inputRules.length).toEqual(1);
+		});
+
+		it('Should not have inputRules if disabled', async () => {
+			expect(component.inputRules).toEqual([]);
+			await wrapper.setProps({
+				rules: [jest.fn()],
+				disabled: true,
+			});
+			expect(component.inputRules.length).toEqual(0);
+		});
 	});
 });

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>