@farm-investimentos/front-mfe-components 2.4.7 → 3.0.0

package/package.json

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

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

@@ -13,4 +13,11 @@ describe('ImportButton component', () => {
 	test('Created hook', () => {
 		expect(wrapper).toBeDefined();
 	});
+
+	describe('Methods', () => {
+		it('Should emit event', () => {
+			component.onClick();
+			expect(wrapper.emitted().onClick).toBeDefined();
+		});
+	});
 });

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/Buttons/RemoveButton/__tests__/RemoveButton.spec.js

@@ -13,4 +13,11 @@ describe('RemoveButton component', () => {
 	test('Created hook', () => {
 		expect(wrapper).toBeDefined();
 	});
+
+	describe('Methods', () => {
+		it('Should emit event', () => {
+			component.onClick();
+			expect(wrapper.emitted().onClick).toBeDefined();
+		});
+	});
 });

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

@@ -11,4 +11,11 @@ describe('ToggleButton component', () => {
 	test('Created hook', () => {
 		expect(wrapper).toBeDefined();
 	});
+
+	describe('Methods', () => {
+		it('Should handle click', () => {
+			wrapper.vm.onClick();
+			expect(wrapper.vm.open).toBeTruthy();
+		});
+	});
 });

package/src/components/CardContext/CardContext.scss

@@ -42,7 +42,7 @@
 	padding-top: 1rem;
 }
 
-.card-context-loding-or-error {
+.card-context-loading-or-error {
 	width: 100%;
 	display: flex;
 	align-items: center;

package/src/components/CardContext/CardContext.vue

@@ -11,10 +11,10 @@
 		<div class="card-context-body" v-if="isSuccess">
 			<slot></slot>
 		</div>
-		<div class="card-context-loding-or-error" v-if="isLoading">
+		<div class="card-context-loading-or-error" v-if="isLoading">
 			<Loader :size="isLargeLoading" />
 		</div>
-		<div class="card-context-loding-or-error" v-if="isError">
+		<div class="card-context-loading-or-error" v-if="isError">
 			<AlertReload :label="errorLabel" @onClick="$emit('onLoad')" />
 		</div>
 	</div>
@@ -79,6 +79,9 @@ export default Vue.extend({
 			type: String,
 			default: 'Ocorreu um erro',
 		},
+		/**
+		 * Is full 
+		 */
 		full: {
 			type: Boolean,
 			default: false,
@@ -86,25 +89,16 @@ export default Vue.extend({
 	},
 	computed: {
 		isBold() {
-			if (this.bold) {
-				return 'card-context-title bold';
-			}
-			return 'card-context-title';
+			return this.bold ? 'card-context-title bold' : 'card-context-title';
 		},
 		isHeightFull() {
-			if (this.full) {
-				return 'card-context height-full';
-			}
-			return 'card-context';
+			return this.full ? 'card-context height-full' : 'card-context';
 		},
 		isSuccess() {
 			return !this.isLoading && !this.isError;
 		},
 		isLargeLoading() {
-			if (this.largeLoading) {
-				return 'normal';
-			}
-			return 'small';
+			return this.largeLoading ? 'normal' : 'small';
 		},
 	},
 });

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

@@ -3,9 +3,11 @@ import CardContext from '../CardContext';
 
 describe('CardContext component', () => {
 	let wrapper;
+	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(CardContext);
+		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {
@@ -17,4 +19,39 @@ describe('CardContext component', () => {
 			expect(wrapper.element).toMatchSnapshot();
 		});
 	});
+
+	describe('Computed properties', () => {
+		it('Should compute isBold for false', () => {
+			expect(component.isBold).toEqual('card-context-title');
+		});
+
+		it('Should compute isBold for true', async () => {
+			await wrapper.setProps({
+				bold: true,
+			});
+			expect(component.isBold).toEqual('card-context-title bold');
+		});
+
+		it('Should compute isHeightFull for false', () => {
+			expect(component.isHeightFull).toEqual('card-context');
+		});
+
+		it('Should compute isHeightFull for true', async () => {
+			await wrapper.setProps({
+				full: true,
+			});
+			expect(component.isHeightFull).toEqual('card-context height-full');
+		});
+
+		it('Should compute isLargeLoading for false', () => {
+			expect(component.isLargeLoading).toEqual('small');
+		});
+
+		it('Should compute isLargeLoading for true', async () => {
+			await wrapper.setProps({
+				largeLoading: true,
+			});
+			expect(component.isLargeLoading).toEqual('normal');
+		});
+	});
 });

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"
@@ -96,6 +96,12 @@ export default Vue.extend({
 		headerProps: {
 			type: Object,
 		},
+		/**
+		 * Hide/show checkbox
+		 */
+		showCheckbox: {
+			default: true,
+		},
 	},
 	computed: {
 		inputVal: {

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,40 @@
+<template>
+	<div class="ml-6 mr-3 d-flex align-center">
+		Total de linhas selecionadas: {{ length }}
+		<v-btn color="error" @click="reset" small dense class="ml-3" v-if="length > 0">
+			<v-icon small> mdi-trash-can </v-icon>
+			Desmarcar
+		</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: {
+		/**
+		 * Current items length selected
+		 */
+		length: {
+			default: 0,
+			type: Number,
+		},
+	},
+	methods: {
+		reset() {
+			this.$emit('onReset');
+		},
+	},
+});
+</script>
+<style lang="scss" scoped>
+div {
+	height: 2rem;
+}
+</style>

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

@@ -0,0 +1,33 @@
+import { shallowMount } from '@vue/test-utils';
+import ResetTableRowSelection from '../ResetTableRowSelection';
+
+describe('ResetTableRowSelection component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ResetTableRowSelection, {
+			propsData: {
+				length: 2,
+			},
+		});
+		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().onReset).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/';