@farm-investimentos/front-mfe-components 2.2.5 → 2.4.0

package/package.json

@@ -1,78 +1,78 @@
 {
-  "name": "@farm-investimentos/front-mfe-components",
-  "version": "2.2.5",
-  "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.0",
+	"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.vue

@@ -44,17 +44,33 @@ export default Vue.extend({
 		VIcon,
 	},
 	props: {
+		/**
+		 * Cabeçalho
+		 */
 		headers: {
 			type: Array,
 			require: true,
 		},
+		/**
+		 * Array para controle da exibição da ordenação
+		 */
 		sortClick: {
 			type: Array,
 			require: true,
 		},
+		/**
+		 * Começar selecionado
+		 */
 		firstSelected: {
 			type: Boolean,
-			default: () => false,
+			default: false,
+		},
+		/**
+		 * Index do item do cabeçalho que deve começar selecionado
+		 */
+		selectedIndex: {
+			type: Number,
+			default: 0,
 		},
 	},
 	methods: {
@@ -88,8 +104,8 @@ export default Vue.extend({
 				this.sortClick[i].show = false;
 			}
 		},
-		checkFistSelected(index) {
-			if (index === 0) {
+		checkFirstSelected(index) {
+			if (index === this.selectedIndex) {
 				return this.firstSelected;
 			}
 			return false;
@@ -104,8 +120,8 @@ export default Vue.extend({
 				[this.headers[i].value]: false,
 				descending: 'ASC',
 				field: this.headers[i].value,
-				clicked: this.checkFistSelected(i),
-				show: this.checkFistSelected(i),
+				clicked: this.checkFirstSelected(i),
+				show: this.checkFirstSelected(i),
 			});
 		}
 	},

package/src/components/DialogHeader/DialogHeader.vue

@@ -4,6 +4,7 @@
 		{{ title }}
 
 		<v-icon
+			v-if="hasCloseIcon"
 			role="button"
 			title="Fechar"
 			class="dialog-header__close-icon"
@@ -37,6 +38,14 @@ export default {
 			default: null,
 			required: false,
 		},
+		/**
+		 * Ícone - se possui o ícone de fechar
+		 */
+		hasCloseIcon: {
+			type: Boolean,
+			default: true,
+			required: false,
+		},
 	},
 	components: {
 		VIcon,

package/src/components/IconBox/IconBox.scss

@@ -0,0 +1,14 @@
+.icon-box {
+	width: 40px;
+	height: 40px;
+	padding: 6px;
+	background: linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), #00b493;
+	border-radius: 5px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.icon i {
+	font-size: 1.875em;
+}

package/src/components/IconBox/IconBox.stories.js

@@ -0,0 +1,13 @@
+import IconBox from './IconBox.vue';
+
+export default {
+	title: 'Example/IconBox',
+	component: IconBox,
+};
+
+export const Primary = () => ({
+	components: { IconBox },
+	template: '<IconBox icon="mdi-currency-usd" />',
+});
+
+Primary.storyName = 'Básico';

package/src/components/IconBox/IconBox.vue

@@ -0,0 +1,29 @@
+<template>
+	<div class="icon-box">
+		<div class="icon">
+			<v-icon color="secondary">{{ icon }}</v-icon>
+		</div>
+	</div>
+</template>
+
+<script>
+import Vue from 'vue';
+import VIcon from 'vuetify/lib/components/VIcon';
+
+export default Vue.extend({
+	name: 'farm-icon-box',
+	components: {
+		VIcon,
+	},
+	props: {
+		icon: {
+			type: String,
+			require: true,
+		},
+	},
+});
+</script>
+
+<style lang="sass" scoped>
+@import './IconBox.scss'
+</style>