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

package/package.json

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

package/src/components/CardContext/CardContext.scss

@@ -6,6 +6,10 @@
 	border-radius: 5px;
 }
 
+.card-context.height-full {
+	height: 100%;
+}
+
 .card-context-header {
 	width: 100%;
 	height: 40px;

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

@@ -32,6 +32,15 @@ export const WithLoading = () => ({
     `,
 });
 
+export const WithLoadingLarge = () => ({
+	components: { CardContext },
+	template: `
+        <CardContext icon="mdi-currency-usd" title="Titulo do Card" isLoading largeLoading>
+            <p>Conteúdo do Card</p>
+        </CardContext>
+    `,
+});
+
 export const WithError = () => ({
 	components: { CardContext },
 	template: `
@@ -44,4 +53,5 @@ export const WithError = () => ({
 Primary.storyName = 'Básico';
 Secondary.storyName = 'Título em Bold';
 WithLoading.storyName = 'Com Loading';
+WithLoadingLarge.storyName = 'Com Loading Large';
 WithError.storyName = 'Com Erro';

package/src/components/CardContext/CardContext.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="card-context">
+	<div :class="isHeightFull">
 		<div class="card-context-header" v-if="isSuccess">
 			<IconBox :icon="icon" />
 			<div class="card-context-content">
@@ -12,7 +12,7 @@
 			<slot></slot>
 		</div>
 		<div class="card-context-loding-or-error" v-if="isLoading">
-			<Loader size="small" />
+			<Loader :size="isLargeLoading" />
 		</div>
 		<div class="card-context-loding-or-error" v-if="isError">
 			<AlertReload :label="errorLabel" @onClick="$emit('onLoad')" />
@@ -61,6 +61,10 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		largeLoading: {
+			type: Boolean,
+			default: false,
+		},
 		/**
 		 * Show error alert
 		 */
@@ -75,8 +79,11 @@ export default Vue.extend({
 			type: String,
 			default: 'Ocorreu um erro',
 		},
+		full: {
+			type: Boolean,
+			default: false,
+		},
 	},
-
 	computed: {
 		isBold() {
 			if (this.bold) {
@@ -84,9 +91,21 @@ export default Vue.extend({
 			}
 			return 'card-context-title';
 		},
+		isHeightFull() {
+			if (this.full) {
+				return 'card-context height-full';
+			}
+			return 'card-context';
+		},
 		isSuccess() {
 			return !this.isLoading && !this.isError;
 		},
+		isLargeLoading() {
+			if (this.largeLoading) {
+				return 'normal';
+			}
+			return 'small';
+		},
 	},
 });
 </script>

package/src/components/DataTableHeader/DataTableHeader.scss

@@ -22,4 +22,4 @@ th.sortable {
 			}
 		}
 	}
-}
+}

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
@@ -30,6 +31,14 @@
 						mdi-sort-descending
 					</v-icon>
 				</span>
+
+				<span v-if="isTHDataTableSelect(item)">
+					<v-simple-checkbox
+						:indeterminate="headerProps.someItems && !headerProps.everyItem"
+						v-model="inputVal"
+						@input="selectAll"
+					></v-simple-checkbox>
+				</span>
 			</th>
 		</tr>
 	</thead>
@@ -38,10 +47,13 @@
 <script>
 import Vue from 'vue';
 import VIcon from 'vuetify/lib/components/VIcon';
+import VSimpleCheckbox from 'vuetify/lib/components/VCheckbox/VSimpleCheckbox';
+
 export default Vue.extend({
 	name: 'farm-datatable-header',
 	components: {
 		VIcon,
+		VSimpleCheckbox,
 	},
 	props: {
 		/**
@@ -72,6 +84,28 @@ export default Vue.extend({
 			type: Number,
 			default: 0,
 		},
+		/**
+		 * v-model for data-table-select
+		 */
+		value: {
+			required: true,
+		},
+		/**
+		 * Original header props
+		 */
+		headerProps: {
+			type: Object,
+		},
+	},
+	computed: {
+		inputVal: {
+			get() {
+				return this.value;
+			},
+			set(val) {
+				this.$emit('input', val);
+			},
+		},
 	},
 	methods: {
 		getTypeSort(value) {
@@ -111,8 +145,18 @@ 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';
+		},
+		selectAll(value) {
+			this.$emit('toggleSelectAll', value);
+			this.inputVal = value;
+		},
 	},
 	created() {
 		for (let i = 0; i < this.headers.length; i += 1) {

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

@@ -0,0 +1,95 @@
+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,
+				value: false,
+			},
+		});
+		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();
+		});
+
+		it('Should emit new value when selectAll checkbox is clicked', () => {
+			component.selectAll(true);
+			expect(wrapper.emitted().toggleSelectAll).toBeDefined();
+		});
+	});
+});

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

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

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

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

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

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

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

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

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

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