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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "3.4.1",
+	"version": "3.4.4",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",
@@ -21,31 +21,27 @@
 		"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",
-		"jsdoc": "^3.6.7",
+		"storybook-addon-designs": "^6.2.1",
 		"vue-template-compiler": "^2.6.11",
 		"webpack-cli": "^4.9.0"
 	},

package/src/components/AlertReload/AlertReload.stories.js

@@ -1,7 +1,7 @@
 import AlertReload from './AlertReload.vue';
 
 export default {
-    title: 'Example/AlertReload',
+    title: 'API/AlertReload',
     component: AlertReload,
 };
 

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

@@ -1,8 +1,18 @@
 import ConfirmButton from './ConfirmButton.vue';
 
 export default {
-	title: 'Example/Buttons/Confirm',
+	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

@@ -1,8 +1,18 @@
 import DangerButton from './DangerButton.vue';
 
 export default {
-	title: 'Example/Buttons/DangerButton',
+	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

@@ -1,8 +1,18 @@
 import DefaultButton from './DefaultButton.vue';
 
 export default {
-	title: 'Example/Buttons/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/Buttons/ExportButton/ExportButton.stories.js

@@ -1,7 +1,7 @@
 import ExportButton from './ExportButton.vue';
 
 export default {
-	title: 'Example/Buttons/Export',
+	title: 'API/Buttons/Export',
 	component: ExportButton,
 };
 

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

@@ -1,7 +1,7 @@
 import ImportButton from './ImportButton.vue';
 
 export default {
-    title: 'Example/Buttons/Import',
+    title: 'API/Buttons/Import',
     component: ImportButton,
 };
 

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

@@ -1,7 +1,7 @@
 import MultiImport from './MultiImportButton.vue';
 
 export default {
-	title: 'Example/Buttons/MultiImport',
+	title: 'API/Buttons/MultiImport',
 	component: MultiImport,
 };
 

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

@@ -1,7 +1,7 @@
 import RemoveButton from './RemoveButton.vue';
 
 export default {
-    title: 'Example/Buttons/Remove',
+    title: 'API/Buttons/Remove',
     component: RemoveButton,
 };
 

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

@@ -1,7 +1,7 @@
 import ToggleButton from './ToggleButton.vue';
 
 export default {
-    title: 'Example/Buttons/ToggleButton',
+    title: 'API/Buttons/ToggleButton',
     component: ToggleButton,
 };
 

package/src/components/CardContext/CardContext.stories.js

@@ -1,7 +1,7 @@
 import CardContext from './CardContext.vue';
 
 export default {
-	title: 'Example/CardContext',
+	title: 'API/CardContext',
 	component: CardContext,
 };
 

package/src/components/ChipInviteStatus/ChipInviteStatus.stories.js

@@ -1,18 +1,20 @@
 import ChipInviteStatus from './ChipInviteStatus.vue';
 
 export default {
-	title: 'Example/Onboarding/ChipInviteStatus',
+	title: 'API/Onboarding/ChipInviteStatus',
 	component: ChipInviteStatus,
 };
 
 export const Primary = () => ({
 	components: { ChipInviteStatus },
 	template: `<div style="width: 120px;">
-        <ChipInviteStatus status="CONVIDAR" />
-        <ChipInviteStatus status="CONVIDADO" />
-        <ChipInviteStatus status="INCOMPLETO" />
-        <ChipInviteStatus status="CONCLUIDO" />
-        <ChipInviteStatus status="FALHA/ERRO" />
+        <ChipInviteStatus :status="10" />
+        <ChipInviteStatus :status="11" />
+        <ChipInviteStatus :status="12" />
+        <ChipInviteStatus :status="13" />
+        <ChipInviteStatus :status="14" />
+        <ChipInviteStatus :status="15" />
+        <ChipInviteStatus :status="16" />
     </div>`,
 });
 

package/src/components/ChipInviteStatus/ChipInviteStatus.vue

@@ -14,12 +14,24 @@
 </template>
 <script>
 import Vue from 'vue';
+const StatusLabel = {
+	10: 'CONVIDAR',
+	11: 'CONVIDADO',
+	12: 'INCOMPLETO',
+	13: 'CONCLUÍDO',
+	14: 'FALHA/ERRO',
+	15: 'EM ANÁLISE',
+	16: 'EM ANDAMENTO',
+};
+
 const StatusColor = {
-	CONVIDAR: 'secondary',
-	CONVIDADO: 'yellow',
-	INCOMPLETO: 'yellow',
-	CONCLUIDO: 'success',
-	'FALHA/ERRO': 'error',
+	10: 'secondary',
+	11: 'yellow',
+	12: 'yellow',
+	13: 'success',
+	14: 'error',
+	15: 'accent',
+	16: 'primary',
 };
 
 import VChip from 'vuetify/lib/components/VChip/';
@@ -34,8 +46,8 @@ export default Vue.extend({
 		 * Invite status
 		 */
 		status: {
-			type: String,
-			default: '',
+			type: Number,
+			default: 10,
 		},
 		/**
 		 * Full width (from parent)
@@ -47,13 +59,13 @@ export default Vue.extend({
 	},
 	computed: {
 		textColor() {
-			return this.status === 'CONVIDAR' ? '' : StatusColor[this.status];
+			return this.status === 10 || this.status === 16 ? '' : StatusColor[this.status];
 		},
 		color() {
 			return !this.status ? '' : StatusColor[this.status];
 		},
 		label() {
-			return this.status;
+			return StatusLabel[this.status];
 		},
 	},
 });

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

@@ -7,7 +7,7 @@ describe('ChipInviteStatus component', () => {
 	beforeEach(() => {
 		wrapper = shallowMount(ChipInviteStatus, {
 			propsData: {
-				status: 'CONVIDAR',
+				status: 10,
 			},
 		});
 		component = wrapper.vm;

package/src/components/DataTableEmptyWrapper/DataTableEmptyWrapper.stories.js

@@ -1,7 +1,7 @@
 import DataTableEmptyWrapper from './DataTableEmptyWrapper.vue';
 
 export default {
-    title: 'Example/Table/DataTableEmptyWrapper',
+    title: 'API/Table/DataTableEmptyWrapper',
     component: DataTableEmptyWrapper,
 };
 

package/src/components/DataTableHeader/DataTableHeader.stories.js

@@ -1,7 +1,7 @@
 import DataTableHeader from './DataTableHeader.vue';
 
 export default {
-	title: 'Example/Table/DataTableHeader',
+	title: 'API/Table/DataTableHeader',
 	component: DataTableHeader,
 };
 

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: 'Example/Table/DataTablePaginator',
+	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 = () => ({
@@ -26,7 +42,26 @@ export const CustomPerPage = () => ({
 		'<DataTablePaginator :perPageOptions="[1, 2, 4, 12, 27]" :totalPages="19" :page="1" />',
 });
 
-Primary.storyName = 'Básico';
-Secondary.storyName = 'Sem limite por páginas';
-Disabled.storyName = 'Desabilitado';
-CustomPerPage.storyName = 'Lista de registros por página customizada';
+const parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%8D---Design-System?node-id=1503%3A921',
+	},
+};
+
+Primary.story = {
+	name: 'Básico',
+	parameters,
+};
+Secondary.story = {
+	name: 'Sem limite por páginas',
+	parameters,
+};
+Disabled.story = {
+	name: 'Desabilitado',
+	parameters,
+};
+CustomPerPage.story = {
+	name: 'Lista de registros por página customizada',
+	parameters,
+};

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

@@ -1,26 +1,36 @@
 import DatePicker from './DatePicker';
 
 export default {
-	title: 'Example/Form/DatePicker',
+	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,7 +1,7 @@
 import DefaultTextField from './DefaultTextField.vue';
 
 export default {
-	title: 'Example/Form/DefaultTextField',
+	title: 'API/Form/DefaultTextField',
 	component: DefaultTextField,
 };
 

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/DialogFooter/DialogFooter.stories.js

@@ -1,7 +1,7 @@
 import DialogFooter from './DialogFooter.vue';
 
 export default {
-	title: 'Example/Dialog/DialogFooter',
+	title: 'API/Dialog/DialogFooter',
 	component: DialogFooter,
 };
 

package/src/components/DialogHeader/DialogHeader.stories.js

@@ -1,7 +1,7 @@
 import DialogHeader from './DialogHeader.vue';
 
 export default {
-    title: 'Example/Dialog/DialogHeader',
+    title: 'API/Dialog/DialogHeader',
     component: DialogHeader,
 };
 

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: 'Example/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';