@farm-investimentos/front-mfe-components 2.2.7 → 2.4.2

package/package.json

@@ -1,78 +1,78 @@
 {
-  "name": "@farm-investimentos/front-mfe-components",
-  "version": "2.2.7",
-  "author": "farm investimentos",
-  "private": false,
-  "main": "./dist/front-mfe-components.common.js",
-  "unpkg": "dist/front-mfe-components.umd.min.js",
-  "jsdelivr": "dist/front-mfe-components.umd.min.js",
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "npm run build:components",
-    "build:components": "vue-cli-service build --target lib --name front-mfe-components src/main.js",
-    "lint": "vue-cli-service lint",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "test:unit": "jest --updateSnapshot",
-    "test:coverage": "jest --updateSnapshot --coverage"
-  },
-  "files": [
-    "dist/*",
-    "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",
-    "vue": "^2.6.11",
-    "vuetify": "^2.5.7"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.14.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",
-    "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",
-    "vue-template-compiler": "^2.6.11",
-    "webpack-cli": "^4.9.0"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/Farm-Investimentos/front-mfe-components.git"
-  },
-  "publishConfig": {
-    "@farm-investimentos:registry": "https://registry.npmjs.org"
-  }
+	"name": "@farm-investimentos/front-mfe-components",
+	"version": "2.4.2",
+	"author": "farm investimentos",
+	"private": false,
+	"main": "./dist/front-mfe-components.common.js",
+	"unpkg": "dist/front-mfe-components.umd.min.js",
+	"jsdelivr": "dist/front-mfe-components.umd.min.js",
+	"scripts": {
+		"serve": "vue-cli-service serve",
+		"build": "npm run build:components",
+		"build:components": "vue-cli-service build --target lib --name front-mfe-components src/main.js",
+		"lint": "vue-cli-service lint",
+		"storybook": "start-storybook -p 6006",
+		"build-storybook": "build-storybook",
+		"test:unit": "jest --updateSnapshot",
+		"test:coverage": "jest --updateSnapshot --coverage"
+	},
+	"files": [
+		"dist/*",
+		"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",
+		"vue": "^2.6.11",
+		"vuetify": "^2.5.7"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.14.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",
+		"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",
+		"vue-template-compiler": "^2.6.11",
+		"webpack-cli": "^4.9.0"
+	},
+	"eslintConfig": {
+		"root": true,
+		"env": {
+			"node": true
+		},
+		"extends": [
+			"plugin:vue/essential",
+			"eslint:recommended"
+		],
+		"parserOptions": {
+			"parser": "babel-eslint"
+		},
+		"rules": {}
+	},
+	"browserslist": [
+		"> 1%",
+		"last 2 versions",
+		"not dead"
+	],
+	"repository": {
+		"type": "git",
+		"url": "git://github.com/Farm-Investimentos/front-mfe-components.git"
+	},
+	"publishConfig": {
+		"@farm-investimentos:registry": "https://registry.npmjs.org"
+	}
 }

package/src/components/AlertReload/AlertReload.vue

@@ -1,17 +1,17 @@
 <template>
-    <v-alert dense outlined type="error">
-        <v-row align="center">
-            <v-col class="grow">
-                {{ label }}
-            </v-col>
-            <v-col class="shrink">
-                <v-btn color="secondary" class="ml-3" @click="$emit('onClick')">
-                    <v-icon>mdi-refresh</v-icon>
-                    Recarregar</v-btn
-                >
-            </v-col>
-        </v-row>
-    </v-alert>
+	<v-alert dense outlined type="error" class="farm-alert-reload">
+		<v-row align="center">
+			<v-col class="grow">
+				{{ label }}
+			</v-col>
+			<v-col class="shrink">
+				<v-btn color="secondary" class="ml-3" alt="Recarregar" @click="$emit('onClick')">
+					<v-icon class="v-icon__refresh">mdi-refresh</v-icon>
+					Recarregar</v-btn
+				>
+			</v-col>
+		</v-row>
+	</v-alert>
 </template>
 <script>
 import VBtn from 'vuetify/lib/components/VBtn';
@@ -20,28 +20,30 @@ import VAlert from 'vuetify/lib/components/VAlert';
 import { VRow, VCol } from 'vuetify/lib/components/VGrid';
 
 export default {
-    name: 'AlertReload',
-    components: {
-        VBtn,
-        VIcon,
-        VAlert,
-        VRow,
-        VCol,
-    },
-
-    props: {
-        label: {
-            type: String,
-            default: '',
-        },
-    },
+	name: 'farm-alert-reload',
+	components: {
+		VBtn,
+		VIcon,
+		VAlert,
+		VRow,
+		VCol,
+	},
+	props: {
+		/**
+		 * Label
+		 */
+		label: {
+			type: String,
+			default: '',
+		},
+	},
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .v-btn {
-    .v-icon {
-        margin-right: 1rem;
-    }
+	.v-icon.v-icon__refresh {
+		margin-right: 1rem;
+	}
 }
 </style>

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

@@ -0,0 +1,18 @@
+import { shallowMount } from '@vue/test-utils';
+import AlertReload from '../AlertReload';
+
+describe('AlertReload component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(AlertReload, {
+			propsData: {
+				managersString: 'a,b,c',
+			},
+		});
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/Buttons/ExportButton/__tests__/ExportButton.spec.js

@@ -0,0 +1,16 @@
+import { shallowMount } from '@vue/test-utils';
+import ExportButton from '../ExportButton';
+
+describe('ExportButton component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ExportButton);
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/Buttons/ImportButton/__tests__/ImportButton.spec.js

@@ -0,0 +1,16 @@
+import { shallowMount } from '@vue/test-utils';
+import ImportButton from '../ImportButton';
+
+describe('ImportButton component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ImportButton);
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/Buttons/RemoveButton/__tests__/RemoveButton.spec.js

@@ -0,0 +1,16 @@
+import { shallowMount } from '@vue/test-utils';
+import RemoveButton from '../RemoveButton';
+
+describe('RemoveButton component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(RemoveButton);
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/Buttons/ToggleButton/__tests__/ToggleButton.spec.js

@@ -0,0 +1,14 @@
+import { shallowMount } from '@vue/test-utils';
+import ToggleButton from '../ToggleButton';
+
+describe('ToggleButton component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ToggleButton);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/CardContext/CardContext.scss

@@ -0,0 +1,46 @@
+.card-context {
+	width: 100%;
+	padding: 1.5rem;
+	background: #ffffff;
+	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
+	border-radius: 5px;
+}
+
+.card-context-header {
+	width: 100%;
+	height: 40px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.card-context-content {
+	width: calc(100% - 56px);
+	height: 40px;
+	display: flex;
+	align-items: center;
+}
+
+.card-context-title {
+	color: #5c5c5c;
+	margin: 0;
+	font-size: 0.75rem;
+}
+
+.card-context-title.bold {
+	font-size: 0.875rem;
+	font-weight: bold;
+	color: #1c1c1c;
+}
+
+.card-context-body {
+	width: 100%;
+	padding-top: 1rem;
+}
+
+.card-context-loding-or-error {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}

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

@@ -0,0 +1,47 @@
+import CardContext from './CardContext.vue';
+
+export default {
+	title: 'Example/CardContext',
+	component: CardContext,
+};
+
+export const Primary = () => ({
+	components: { CardContext },
+	template: `
+        <CardContext icon="mdi-currency-usd" title="Titulo do Card">
+            <p>Conteúdo do Card</p>
+        </CardContext>
+    `,
+});
+
+export const Secondary = () => ({
+	components: { CardContext },
+	template: `
+        <CardContext icon="mdi-currency-usd" title="Titulo do Card" bold>
+            <p>Conteúdo do Card</p>
+        </CardContext>
+    `,
+});
+
+export const WithLoading = () => ({
+	components: { CardContext },
+	template: `
+        <CardContext icon="mdi-currency-usd" title="Titulo do Card" isLoading>
+            <p>Conteúdo do Card</p>
+        </CardContext>
+    `,
+});
+
+export const WithError = () => ({
+	components: { CardContext },
+	template: `
+        <CardContext icon="mdi-currency-usd" title="Titulo do Card" isError>
+            <p>Conteúdo do Card</p>
+        </CardContext>
+    `,
+});
+
+Primary.storyName = 'Básico';
+Secondary.storyName = 'Título em Bold';
+WithLoading.storyName = 'Com Loading';
+WithError.storyName = 'Com Erro';

package/src/components/CardContext/CardContext.vue

@@ -0,0 +1,96 @@
+<template>
+	<div class="card-context">
+		<div class="card-context-header" v-if="isSuccess">
+			<IconBox :icon="icon" />
+			<div class="card-context-content">
+				<p :class="isBold">
+					{{ title }}
+				</p>
+			</div>
+		</div>
+		<div class="card-context-body" v-if="isSuccess">
+			<slot></slot>
+		</div>
+		<div class="card-context-loding-or-error" v-if="isLoading">
+			<Loader size="small" />
+		</div>
+		<div class="card-context-loding-or-error" v-if="isError">
+			<AlertReload :label="errorLabel" @onClick="$emit('onLoad')" />
+		</div>
+	</div>
+</template>
+
+<script>
+import Vue from 'vue';
+import { Loader, AlertReload, IconBox } from '../../main.js';
+
+export default Vue.extend({
+	name: 'farm-card-context',
+	components: {
+		IconBox,
+		AlertReload,
+		Loader,
+	},
+	props: {
+		/**
+		 * Title
+		 */
+		title: {
+			type: String,
+			require: true,
+		},
+		/**
+		 * Set bold text
+		 */
+		bold: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Icon (from Material Icons)
+		 * Example: mdi-chart-bar
+		 */
+		icon: {
+			type: String,
+			require: true,
+		},
+		/**
+		 * Show loader
+		 */
+		isLoading: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Show error alert
+		 */
+		isError: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Label to be shown in error alert
+		 */
+		errorLabel: {
+			type: String,
+			default: 'Ocorreu um erro',
+		},
+	},
+
+	computed: {
+		isBold() {
+			if (this.bold) {
+				return 'card-context-title bold';
+			}
+			return 'card-context-title';
+		},
+		isSuccess() {
+			return !this.isLoading && !this.isError;
+		},
+	},
+});
+</script>
+
+<style lang="sass" scoped>
+@import './CardContext.scss'
+</style>

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

@@ -0,0 +1,20 @@
+import { shallowMount } from '@vue/test-utils';
+import CardContext from '../CardContext';
+
+describe('CardContext component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(CardContext);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+});

package/src/components/CardContext/index.js

@@ -0,0 +1,3 @@
+import CardContext from './CardContext';
+
+export default CardContext;

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

@@ -21,7 +21,7 @@ export const Primary = () => ({
 					sortable: true,
 					value: 'approvedAmount',
 					align: 'center',
-					width: 160,
+					width: 320,
 				},
 				{
 					text: 'Disponível',

package/src/components/DataTableHeader/DataTableHeader.vue

@@ -7,17 +7,18 @@
 				v-bind:class="[
 					item.sortable ? 'sortable' : '',
 					sortClick[$index].clicked ? 'active' : '',
-					item.sortable && sortClick[$index].descending === 'DESC' ? 'DESC' : 'ASC',
+					item.sortable ? (sortClick[$index].descending === 'DESC' ? 'DESC' : 'ASC') : '',
 				]"
 				v-bind:style="{
-					textAlign: item.align,
+					textAlign: item.align ? item.align : '',
 					width: thWidth(item),
+					minWidth: thWidth(item),
 				}"
 				@click="item.sortable ? clickSort(item.value, $index) : ''"
 				@mouseover="changeShow($index)"
 				@mouseout="changeHidden($index)"
 			>
-				<span class="header-text">
+				<span class="header-text" v-if="!isTHDataTableSelect(item)">
 					{{ item.text }}
 
 					<v-icon
@@ -111,8 +112,14 @@ export default Vue.extend({
 			return false;
 		},
 		thWidth(item) {
+			if (this.isTHDataTableSelect(item)) {
+				return '64px';
+			}
 			return item.width ? item.width + 'px' : 'auto';
 		},
+		isTHDataTableSelect(item) {
+			return item.value === 'data-table-select';
+		},
 	},
 	created() {
 		for (let i = 0; i < this.headers.length; i += 1) {

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

@@ -0,0 +1,89 @@
+import { shallowMount } from '@vue/test-utils';
+import DataTableHeader from '../DataTableHeader';
+
+describe('DataTableHeader component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(DataTableHeader, {
+			propsData: {
+				headers: [
+					{
+						value: 'A',
+					},
+				],
+				sortClick: [
+					{
+						clicked: true,
+						show: true,
+					},
+					{
+						clicked: false,
+						show: false,
+					},
+				],
+				selectedIndex: 0,
+				firstSelected: true,
+			},
+		});
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+
+	describe('Methods', () => {
+		it('Should check if item is data-table-select column', () => {
+			expect(component.isTHDataTableSelect({ value: 'data-table-select' })).toBeTruthy();
+			expect(component.isTHDataTableSelect({ value: 'anything else' })).toBeFalsy();
+		});
+
+		it('Should get th width', () => {
+			expect(component.thWidth({ value: 'data-table-select' })).toEqual('64px');
+			expect(component.thWidth({ width: 24 })).toEqual('24px');
+			expect(component.thWidth({})).toEqual('auto');
+		});
+
+		it('Should remove clicked', () => {
+			component.removeClicked();
+			expect(component.sortClick[0].clicked).toBeFalsy();
+			expect(component.sortClick[0].show).toBeFalsy();
+		});
+
+		it('Should check first selected', () => {
+			expect(component.checkFirstSelected(999)).toBeFalsy();
+			expect(component.checkFirstSelected(0)).toBeTruthy();
+		});
+
+		it('Should emit event when clickSort', () => {
+			component.clickSort('A', 0);
+			expect(wrapper.emitted().onClickSort).toBeDefined();
+		});
+
+		it('Should get type sort', () => {
+			expect(component.getTypeSort(false)).toEqual('ASC');
+			expect(component.getTypeSort(true)).toEqual('DESC');
+		});
+
+		it('Should change show', async () => {
+			component.changeShow(0);
+			await new Promise(r => setTimeout(r, 20));
+			expect(component.sortClick[0].show).toBeTruthy();
+		});
+
+		it('Should change show', async () => {
+			component.changeHidden(0);
+			component.changeHidden(1);
+			await new Promise(r => setTimeout(r, 30));
+			expect(component.sortClick[1].show).toBeFalsy();
+		});
+	});
+});