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

package/package.json

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

@@ -32,7 +32,7 @@
 					</v-icon>
 				</span>
 
-				<span v-if="isTHDataTableSelect(item)">
+				<span v-if="isTHDataTableSelect(item) && showCheckbox">
 					<v-simple-checkbox
 						:indeterminate="headerProps.someItems && !headerProps.everyItem"
 						v-model="inputVal"
@@ -87,18 +87,26 @@ export default Vue.extend({
 		/**
 		 * v-model for data-table-select
 		 */
-		value: {},
+		value: {
+			default: false,
+		},
 		/**
 		 * Original header props
 		 */
 		headerProps: {
 			type: Object,
 		},
+		/**
+		 * Hide/show checkbox
+		 */
+		showCheckbox: {
+			default: true,
+		},
 	},
 	computed: {
 		inputVal: {
 			get() {
-				return this.value ? this.value : '';
+				return this.value;
 			},
 			set(val) {
 				this.$emit('input', val);

package/src/components/RangeDatePicker/RangeDatePicker.stories.js

@@ -15,5 +15,11 @@ export const Secondary = () => ({
 	template: `<RangeDatePicker inputId="input-custom-id" :value="['2021-08-01', '2021-08-05']" />`,
 });
 
+export const MinMax = () => ({
+	components: { RangeDatePicker },
+	template: `<RangeDatePicker inputId="input-custom-id" min="2022-01-17" max="2022-02-15" />`,
+});
+
 Primary.storyName = 'Básico';
 Secondary.storyName = 'Data inicial';
+MinMax.storyName = 'Data Mínima e Máxima';

package/src/components/RangeDatePicker/RangeDatePicker.vue

@@ -27,6 +27,8 @@
 			no-title
 			scrollable
 			range
+			:max="max"
+			:min="min"
 			color="secondary"
 			locale="pt-br"
 		>
@@ -73,6 +75,20 @@ export default {
 				return [];
 			},
 		},
+		/**
+		 * Variável usada para definir a data máxima (yyyy-mm-dd)
+		 */
+		max: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Variável usada para definir a data minima (yyyy-mm-dd)
+		 */
+		min: {
+			type: String,
+			default: null,
+		},
 	},
 	data() {
 		const s = this.formatDateRange(this.value);

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

@@ -0,0 +1,37 @@
+import { shallowMount } from '@vue/test-utils';
+import RangeDatePicker from '../RangeDatePicker';
+
+describe('RangeDatePicker component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(RangeDatePicker, {
+			propsData: {
+				inputId: 'someid',
+			},
+		});
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+
+	describe('computed values', () => {
+		it('min max correctly', async () => {
+			await wrapper.setProps({
+				inputId: 'someid',
+				min: '2022-01-17',
+				max: '2022-01-31',
+			});
+			expect(wrapper.vm.inputId).toBe('someid');
+			expect(wrapper.vm.min).toBe('2022-01-17');
+			expect(wrapper.vm.max).toBe('2022-01-31');
+		});
+	});
+});

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