@farm-investimentos/front-mfe-components 2.4.9 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "2.4.9",
+	"version": "2.5.0",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",

package/src/components/Buttons/RemoveButton/RemoveButton.vue

@@ -23,7 +23,7 @@ export default Vue.extend({
 		 */
 		label: {
 			type: String,
-			default: 'Importar',
+			default: 'Remover',
 		},
 		/**
 		 * Desabilita o botão

package/src/components/ResetTableRowSelection/ResetTableRowSelection.stories.js

@@ -0,0 +1,18 @@
+import ResetTableRowSelection from './ResetTableRowSelection';
+
+export default {
+	title: 'Example/ResetTableRowSelection',
+	component: ResetTableRowSelection,
+};
+
+export const Primary = () => ({
+	components: { ResetTableRowSelection },
+	data() {
+		return {
+			items: [1, 2, 3],
+		};
+	},
+	template: `<ResetTableRowSelection v-model="items" />`,
+});
+
+Primary.storyName = 'Básico';

package/src/components/ResetTableRowSelection/ResetTableRowSelection.vue

@@ -0,0 +1,51 @@
+<template>
+	<div class="ml-6 mr-3 d-flex align-center">
+		Total de linhas selecionadas: {{ inputVal.length }}
+		<v-btn color="error" @click="reset" small dense class="ml-3" v-if="inputVal.length > 0">
+			<v-icon small> mdi-trash-can </v-icon>
+			Limpar
+		</v-btn>
+	</div>
+</template>
+<script>
+import Vue from 'vue';
+import VBtn from 'vuetify/lib/components/VBtn';
+import VIcon from 'vuetify/lib/components/VIcon';
+export default Vue.extend({
+	name: 'farm-tablerowselection',
+	components: {
+		VBtn,
+		VIcon,
+	},
+	props: {
+		/**
+		 * Variável usada como v-model
+		 * contém a lista selecionada
+		 */
+		value: {
+			required: true,
+			type: Array,
+		},
+	},
+	computed: {
+		inputVal: {
+			get() {
+				return this.value;
+			},
+			set(val) {
+				this.$emit('input', val);
+			},
+		},
+	},
+	methods: {
+		reset() {
+			this.inputVal = [];
+		},
+	},
+});
+</script>
+<style lang="scss" scoped>
+div {
+	height: 2rem;
+}
+</style>

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

@@ -0,0 +1,34 @@
+import { shallowMount } from '@vue/test-utils';
+import ResetTableRowSelection from '../ResetTableRowSelection';
+const items = [1, 2, 3];
+
+describe('ResetTableRowSelection component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ResetTableRowSelection, {
+			propsData: {
+				value: items,
+			},
+		});
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+
+	describe('methods', () => {
+		it('Should reset', () => {
+			component.reset();
+			expect(wrapper.emitted().input).toBeDefined();
+		});
+	});
+});

package/src/components/ResetTableRowSelection/index.js

@@ -0,0 +1,4 @@
+import ResetTableRowSelection from './ResetTableRowSelection';
+
+export { ResetTableRowSelection };
+export default ResetTableRowSelection;

package/src/components/TableContextMenu/TableContextMenu.vue

@@ -2,7 +2,7 @@
 	<v-menu>
 		<template v-slot:activator="{ on, attrs }">
 			<v-btn icon v-bind="attrs" v-on="on" title="Abrir opções">
-				<v-icon class="ml-3">mdi-dots-horizontal</v-icon>
+				<v-icon>mdi-dots-horizontal</v-icon>
 			</v-btn>
 		</template>
 
@@ -11,7 +11,7 @@
 				v-for="item in items"
 				:key="item.label"
 				:title="item.label"
-				@click="$emit(item.handler)"
+				@click="onClick(item.handler)"
 			>
 				<v-list-item-content>
 					<v-list-item-title>
@@ -29,13 +29,16 @@
 	</v-menu>
 </template>
 <script>
+import Vue from 'vue';
 import { VMenu } from 'vuetify/lib/components/VMenu';
 import { VBtn } from 'vuetify/lib/components/VBtn';
 import { VIcon } from 'vuetify/lib/components/VIcon';
 import { VList } from 'vuetify/lib/components/VList';
 import VListItem from 'vuetify/lib/components/VList/VListItem';
 import { VListItemContent, VListItemTitle } from 'vuetify/lib';
-export default {
+
+export default Vue.extend({
+	name: 'farm-context-menu',
 	components: {
 		VBtn,
 		VIcon,
@@ -51,5 +54,12 @@ export default {
 			required: true,
 		},
 	},
-};
+	methods: {
+		onClick(handler) {
+			if (handler !== undefined) {
+				this.$emit(handler);
+			}
+		},
+	},
+});
 </script>

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

@@ -0,0 +1,45 @@
+import { shallowMount } from '@vue/test-utils';
+import TableContextMenu from '../TableContextMenu';
+const items = [{ label: 'Remover', icon: { color: 'error', type: 'delete' }, handler: 'test' }];
+
+describe('TableContextMenu component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(TableContextMenu, {
+			propsData: {
+				items,
+			},
+		});
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+
+	describe('computed values', () => {
+		it('should items to be created correctly', async () => {
+			expect(wrapper.vm.items).toBeInstanceOf(Array);
+			expect(wrapper.vm.items).toEqual(items);
+		});
+	});
+
+	describe('emitted', () => {
+		it('should emit event', async () => {
+			wrapper.vm.onClick('test');
+			await wrapper.vm.$nextTick();
+			expect(wrapper.emitted().test).toBeTruthy();
+		});
+		it('should not emit click event without value', async () => {
+			wrapper.vm.onClick();
+			await wrapper.vm.$nextTick();
+			expect(wrapper.emitted()).toEqual({});
+		});
+	});
+});

package/src/main.js

@@ -53,3 +53,4 @@ export * from './components/Buttons/ToggleButton/';
 export * from './components/Buttons/RemoveButton/';
 export * from './components/Logos/ProductLogo/';
 export * from './components/Logos/OriginatorLogo/';
+export * from './components/ResetTableRowSelection/';