@farm-investimentos/front-mfe-components-vue3 0.0.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('72px');
+			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/DataTableHeader/index.ts

@@ -0,0 +1,3 @@
+import DataTableHeader from './DataTableHeader.vue';
+
+export default DataTableHeader;

package/src/components/DataTablePaginator/DataTablePaginator.scss

@@ -0,0 +1,90 @@
+@import '../../configurations/theme-colors';
+ul.farm-paginator {
+	display: flex;
+	flex-direction: row;
+	list-style-type: none;
+	align-items: flex-start;
+
+	&--disabled {
+		opacity: 0.7;
+	}
+
+	> li {
+		align-items: center;
+		display: flex;
+
+		button {
+			border: 1px solid var(--farm-bw-black-10);
+			border-right: 0;
+			height: 36px;
+			min-width: 36px;
+			display: inline-flex;
+			justify-content: center;
+			align-items: center;
+			font-size: 12px;
+			font-weight: 400;
+			transition: all ease 0.5s;
+			padding: 4px 12px;
+
+			p {
+				color: var(--farm-neutral-darken);
+				margin: 0;
+			}
+
+			.farm-icon {
+				color: var(--farm-bw-black-80);
+			}
+
+			&:disabled {
+				background-color: var(--farm-bw-black-5);
+				.farm-icon {
+					color: var(--farm-bw-black-10);
+				}
+			}
+		}
+
+		&:first-child button {
+			border-radius: 4px 0 0 4px;
+		}
+
+		&:last-child button {
+			border-right: 1px solid var(--farm-stroke-base);
+			border-radius: 0 4px 4px 0;
+		}
+
+		&.farm-paginator__item--selected {
+			button {
+				background-color: var(--farm-primary-base);
+
+				p {
+					color: #ffffff;
+				}
+			}
+		}
+
+		&:hover {
+			button:not([disabled='disabled']) {
+				background-color: transparentize(themeColor('primary', 'lighten'), 0.86);
+			}
+		}
+	}
+}
+
+.farm-paginator-footer {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	margin: 0;
+
+	&.hidden-perpageoptions {
+		justify-content: flex-end;
+	}
+}
+
+.farm-paginator--gutter {
+	margin: 16px 24px 0;
+}
+
+.farm-typography.button {
+	font-size: 14px;
+}

package/src/components/DataTablePaginator/DataTablePaginator.stories.js

@@ -0,0 +1,49 @@
+// import { withDesign } from 'storybook-addon-designs';
+import DataTablePaginator from './DataTablePaginator.vue';
+
+export default {
+	title: 'Display/Table/DataTablePaginator',
+	component: DataTablePaginator,
+	// decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `Paginator with items per page select<br />
+				selector: <em>farm-datatable-paginator</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%8D---Design-System?node-id=1503%3A921',
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: '<farm-datatable-paginator :totalPages="190000" :page="1" />',
+});
+
+export const HidePerPageOptions = () => ({
+	template: '<farm-datatable-paginator :hidePerPageOptions="true" :totalPages="190000" :page="1" />',
+});
+
+export const Disabled = () => ({
+	template: '<farm-datatable-paginator :disabled="true" :totalPages="19" :page="1" />',
+});
+
+export const CustomPerPage = () => ({
+	template:
+		'<farm-datatable-paginator :perPageOptions="[1, 2, 4, 12, 27]" :initialLimitPerPage="2" :totalPages="19" :page="1" />',
+});
+
+export const OnChangeLimitPerPage = () => ({
+	methods: {
+		onChangeLimitPerPage: (newValue) => {
+			alert(newValue);
+		}
+	},
+	template: '<farm-datatable-paginator :totalPages="19" :page="1" @onChangeLimitPerPage="onChangeLimitPerPage" />',
+});

package/src/components/DataTablePaginator/DataTablePaginator.vue

@@ -0,0 +1,218 @@
+<template>
+	<section
+		:class="{
+			'farm-paginator-footer': true,
+			'hidden-perpageoptions': hidePerPageOptions,
+			'farm-paginator--gutter': hasGutter,
+		}"
+	>
+		<div v-if="!hidePerPageOptions">
+			<farm-select
+				v-model="selectedLimit"
+				:disabled="disabled || !totalPages || totalPages < 1"
+				:items="perPageBuiltItems"
+			/>
+		</div>
+
+		<ul
+			:class="{
+				'farm-paginator': true,
+				'farm-paginator--disabled': disabled || totalPages == null,
+			}"
+		>
+			<li>
+				<button :disabled="canGoBack" @click="firstPage">
+					<farm-icon size="sm">chevron-double-left</farm-icon>
+				</button>
+			</li>
+			<li>
+				<button :disabled="canGoBack" @click="previousPage">
+					<farm-icon size="sm">chevron-left</farm-icon>
+				</button>
+			</li>
+
+			<li
+				v-for="(item, index) in itemsInPagination"
+				:key="'button_' + index"
+				:class="{ 'farm-paginator__item--selected': item === currentPage && !disabled }"
+			>
+				<button
+					:disabled="currentPage === item || item === '...' || disabled"
+					@click="currentPage = item"
+				>
+					<farm-bodytext :type="2" variation="regular">{{ item }}</farm-bodytext>
+				</button>
+			</li>
+
+			<li>
+				<button :disabled="canGoForward" @click="nextPage">
+					<farm-icon size="sm">chevron-right</farm-icon>
+				</button>
+			</li>
+			<li>
+				<button :disabled="canGoForward" @click="lastPage">
+					<farm-icon size="sm">chevron-double-right</farm-icon>
+				</button>
+			</li>
+		</ul>
+	</section>
+</template>
+<script lang="ts">
+
+
+/**
+ * Componente de paginação usado em tabelas e listas
+ * com opção de itens por página
+ */
+export default {
+	name: 'farm-datatable-paginator',
+	props: {
+		/**
+		 * Ietms per page list
+		 */
+		perPageOptions: {
+			type: Array,
+			default: () => [5, 10, 20, 50, 100],
+		},
+		/**
+		 * Current page
+		 */
+		page: null,
+		/**
+		 * Total pages
+		 */
+		totalPages: {
+			type: Number,
+			default: null,
+		},
+		/**
+		 * DDisable controls
+		 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Hide items per page select 
+		 */
+		hidePerPageOptions: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Items per page initial value
+		 */
+		initialLimitPerPage: {
+			type: Number,
+			default: 10,
+		},
+		/**
+		 * Toggle gutters
+		*/
+		hasGutter: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	methods: {
+		range(from: number, to: number) {
+			const range = [];
+
+			from = from > 0 ? from : 1;
+
+			for (let i = from; i <= to; i++) {
+				range.push(i);
+			}
+
+			return range;
+		},
+		previousPage() {
+			this.currentPage--;
+		},
+		nextPage() {
+			this.currentPage++;
+		},
+		firstPage() {
+			this.currentPage = 1;
+		},
+		lastPage() {
+			this.currentPage = this.totalPages;
+		},
+	},
+	data() {
+		return {
+			selectedLimit: this.initialLimitPerPage,
+			currentPage: this.page,
+		};
+	},
+	computed: {
+		perPageBuiltItems: function () {
+			return this.perPageOptions.map(value => ({
+				text: value + ' registros por página',
+				value,
+			}));
+		},
+		itemsInPagination: function () {
+			const maxLength = 7;
+			if (this.totalPages <= maxLength) {
+				return this.range(1, this.totalPages);
+			}
+
+			const even = maxLength % 2 === 0 ? 1 : 0;
+			const left = Math.floor(maxLength / 2);
+			const right = this.totalPages - left + 1 + even;
+
+			if (this.currentPage > left && this.currentPage < right) {
+				const firstItem = 1;
+				const lastItem = this.totalPages;
+				const start = this.currentPage - left + 2;
+				const end = this.currentPage + left - 2 - even;
+				const secondItem = start - 1 === firstItem + 1 ? 2 : '...';
+				const beforeLastItem = end + 1 === lastItem - 1 ? end + 1 : '...';
+
+				return [1, secondItem, ...this.range(start, end), beforeLastItem, this.totalPages];
+			} else if (this.currentPage === left) {
+				const end = this.currentPage + left - 1 - even;
+				return [...this.range(1, end), '...', this.totalPages];
+			} else if (this.currentPage === right) {
+				const start = this.currentPage - left + 1;
+				return [1, '...', ...this.range(start, this.totalPages)];
+			} else {
+				return [...this.range(1, left), '...', ...this.range(right, this.totalPages)];
+			}
+		},
+		canGoBack: function () {
+			const goBack = this.currentPage === 1 || this.disabled || this.totalPages == null;
+
+			return goBack;
+		},
+		canGoForward: function () {
+			const goNext =
+				this.currentPage === this.totalPages ||
+				this.disabled ||
+				this.totalPages == null ||
+				this.totalPages === 0;
+
+			return goNext;
+		},
+	},
+	watch: {
+		selectedLimit(newValue) {
+			this.$emit('onChangeLimitPerPage', newValue);
+		},
+		currentPage(newValue) {
+			this.$emit('onChangePage', newValue);
+		},
+		page(newValue) {
+			this.currentPage = newValue;
+		},
+		initialLimitPerPage(newValue) {
+			this.selectedLimit = newValue;
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import './DataTablePaginator';
+</style>

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

@@ -0,0 +1,32 @@
+import { shallowMount } from '@vue/test-utils';
+import DataTablePaginator from '../DataTablePaginator';
+
+describe('DataTablePaginator component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(DataTablePaginator, {
+			propsData: {
+				title: '',
+			},
+		});
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+
+	describe('Methods', () => {
+		it('Should build range of items', () => {
+			expect(component.range(1, 7).length).toEqual(7);
+		});
+	});
+});

package/src/components/DataTablePaginator/index.ts

@@ -0,0 +1,3 @@
+import DataTablePaginator from './DataTablePaginator.vue';
+
+export default DataTablePaginator;

package/src/components/DatePicker/DatePicker.scss

@@ -0,0 +1,18 @@
+.datepicker :deep(.v-btn--active) {
+	background: var(--farm-primary-base);
+}
+
+.datepicker :deep(.v-picker__body) {
+	width: 304px !important;
+}
+
+.btn-cancel {
+	margin: 0 8px;
+}
+
+.farm-contextmenu {
+	width: 100%;
+}
+
+@import './customDatePicker.scss';
+

package/src/components/DatePicker/DatePicker.stories.js

@@ -0,0 +1,134 @@
+import DatePicker from './DatePicker';
+
+export default {
+	title: 'Form/DatePicker',
+	component: DatePicker,
+	parameters: {
+		docs: {
+			description: {
+				component: `Input Date Picker<br />
+				selector: <em>farm-input-datepicker</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			date: '',
+		};
+	},
+	template: `<div style='max-width: 320px'>
+        <farm-input-datepicker inputId="input-custom-id-0" v-model="date" />
+		date: {{ date }}
+    </div>`,
+});
+
+export const InitValue = () => ({
+	data() {
+		return {
+			date: '2023-08-01',
+		};
+	},
+	template: `<div style='max-width: 320px'><farm-input-datepicker inputId="input-custom-id-1" v-model="date" /></div>`,
+});
+
+export const MinMaxDates = () => ({
+	data() {
+		return {
+			date: '',
+			min: '2022-07-01',
+			max: '2022-12-02',
+		};
+	},
+	template: `<div style='max-width: 320px'>
+        <farm-input-datepicker inputId="input-custom-id-2" :max="max" :min="min" v-model="date" />
+        max {{ max }} min {{ min }}
+    </div>`,
+});
+
+export const RequiredDate = () => ({
+	data() {
+		return {
+			date: '',
+		};
+	},
+	template: `<div style='max-width: 320px'>
+        <farm-input-datepicker inputId="input-custom-id-3" v-model="date" :required="true" />
+    </div>`,
+});
+
+export const Readonly = () => ({
+	data() {
+		return {
+			date: '2021-08-01',
+		};
+	},
+	template: `<div style='max-width: 320px'>
+        <farm-input-datepicker :readonly="true" v-model="date" inputId="input-custom-id-3"/>
+    </div>`,
+});
+
+export const IsNull = () => ({
+	data() {
+		return {
+			date: null,
+		};
+	},
+	template: `<div style='max-width: 320px'>
+		<farm-input-datepicker inputId="input-custom-id-8" v-model="date" :required="true" />
+    </div>`,
+});
+
+export const OnlyAllowedDates = () => ({
+	data() {
+		return {
+			date: '',
+			allowedDays: [5, 10, 15, 20, 25],
+		};
+	},
+	template: `<div style='max-width: 320px'>
+		<farm-input-datepicker position="bottom" :allowed-days="allowedDays" inputId="input-custom-id-1" v-model="date" />
+	</div>`,
+});
+
+export const WithInitialMonth = () => ({
+	data() {
+		return {
+			date: '',
+			pickerDate: '2023-01'
+		};
+	},
+	template: `<div style='max-width: 320px'>
+        <farm-input-datepicker inputId="input-custom-id-0" v-model="date" position="center" :picker-date.sync="pickerDate" />
+		{{ date }}
+    </div>`,
+});
+
+export const TopPositioned = () => ({
+	data() {
+		return {
+			date: '',
+		};
+	},
+	template: `<div style='max-width: 320px'>
+        <farm-input-datepicker inputId="input-custom-id-0" v-model="date" position="top" />
+		{{ date }}
+    </div>`,
+});
+
+export const CenterPositioned = () => ({
+	data() {
+		return {
+			date: '',
+		};
+	},
+	template: `<div style='max-width: 320px'>
+        <farm-input-datepicker inputId="input-custom-id-0" v-model="date" position="center" />
+		{{ date }}
+    </div>`,
+});