@farm-investimentos/front-mfe-components-vue3 0.0.1

package/src/components/SelectAutoComplete/composables/useSelectAutoComplete.ts

@@ -0,0 +1,37 @@
+import { ref } from 'vue';
+
+export default function useSelectAutoComplete (props) {
+	const multipleValues = ref(Array.isArray(props.value) ? [...props.value] : []);
+	const innerValue = ref(props.value);
+	const isTouched = ref(false);
+	const isFocus = ref(false);
+	const isBlured = ref(false);
+	const isVisible = ref(false);
+	const selectedText = ref('');
+	const checked = ref('1');
+	const notChecked = ref(false);
+	const inputField = ref();
+	const filteredItems = ref();
+
+	const keys = {
+		ArrowDown: 'next',
+		ArrowUp: 'prev',
+		Home: 'first',
+		End: 'last',
+	};
+
+	return {
+		multipleValues,
+		innerValue,
+		isTouched,
+		isFocus,
+		isBlured,
+		isVisible,
+		selectedText,
+		checked,
+		notChecked,
+		inputField,
+		keys,
+		filteredItems,
+	};
+}

package/src/components/SelectAutoComplete/index.ts

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

package/src/components/SelectModalOptions/SelectModalOptions.scss

@@ -0,0 +1,15 @@
+:deep(.farm-textfield--input) {
+	input {
+		cursor: pointer !important;
+	}
+}
+
+.fieldset-default {
+	border: 0;
+}
+
+:deep(#v-data-table--default) {
+	thead {
+		display: none;
+	}
+}

package/src/components/SelectModalOptions/SelectModalOptions.stories.js

@@ -0,0 +1,46 @@
+import SelectModalOptions from './SelectModalOptions';
+
+export default {
+	title: 'Interactions/SelectModalOptions',
+	component: SelectModalOptions,
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			items: [
+				{ id: 1, name: 'name 1' },
+				{ id: 2, name: 'name 2' },
+			],
+			selectedValue: null,
+		};
+	},
+	template: `<div>
+	<farm-select-modal-options
+		:items="items"
+		v-model="selectedValue"
+		label="label"
+		inputId="some-id" />
+		<br />selected value: {{ selectedValue }}
+	</div>`,
+});
+
+export const InitialValue = () => ({
+	data() {
+		return {
+			items: [
+				{ id: 1, name: 'name 1' },
+				{ id: 2, name: 'name 2' },
+			],
+			selectedValue: 23123,
+		};
+	},
+	template: `<div>
+	<farm-select-modal-options
+		:items="items"
+		v-model="selectedValue"
+		label="label"
+		inputId="some-id" />
+		<br />selected value: {{ selectedValue }}
+	</div>`,
+});

package/src/components/SelectModalOptions/SelectModalOptions.vue

@@ -0,0 +1,298 @@
+<template>
+	<farm-col
+		cols="12"
+		:md="config.md ? config.md : 2"
+	>
+		<farm-label
+			:for="inputId"
+			:required="config.required"
+		>
+			{{ label }}
+		</farm-label>
+		<farm-textfield-v2
+			ref="searchTextField"
+			icon="magnify"
+			readonly
+			:id="inputId"
+			:value="selectedValueText"
+			@click="openModal"
+			@keyup="clearTextField"
+		/>
+		<farm-modal
+			v-model="showModal"
+			size="sm"
+			:offsetTop="48"
+			:offsetBottom="68"
+		>
+			<template v-slot:header>
+				<farm-dialog-header
+					:title="modalTitle"
+					@onClose="closeModal"
+				/>
+			</template>
+			<template v-slot:content>
+				<div class="mx-n4">
+					<farm-box class="mt-3">
+						<farm-loader
+							class="text-center mb-2"
+							v-if="isLoading"
+						/>
+						<fieldset
+							class="fieldset-default mx-4 mb-3"
+							v-if="!isLoading"
+						>
+							<farm-label for="searchInput"> {{ label }} </farm-label>
+							<farm-textfield-v2
+								id="searchInput"
+								v-model="searchValue"
+								:placeholder="placeholder"
+							/>
+						</fieldset>
+						<v-data-table
+							id="v-data-table--default"
+							hide-default-header
+							hide-default-footer
+							:headers="headers"
+							:items="items"
+							:options.sync="pagination"
+							:search="searchValue"
+							:custom-filter="customFilter"
+							@click:row="handleClick"
+							@pagination="handlePagination"
+							@update:options="handlePagination"
+						>
+							<template v-slot:[`item.label`]="{ item }">
+								<td
+									:title="getItemLabel(item)"
+									aria-role="button"
+								>
+									{{ getItemLabel(item) }}
+								</td>
+							</template>
+
+							<template v-slot:no-data>
+								<farm-emptywrapper />
+							</template>
+							<template v-slot:no-results>
+								<farm-emptywrapper />
+							</template>
+							
+							<template v-slot:bottom>
+								<!--
+								<farm-datatable-paginator
+									class="my-6"
+									hidePerPageOptions
+									:initialLimitPerPage="pagination.itemsPerPage"
+									:page="pagination.page"
+									:totalPages="pagination.pages"
+									@onChangePage="onChangePage"
+								/>
+								-->
+							</template>
+						</v-data-table>
+					</farm-box>
+				</div>
+			</template>
+
+			<template v-slot:footer>
+				<farm-dialog-footer
+					:hasConfirm="false"
+					@onClose="closeModal"
+				/>
+			</template>
+		</farm-modal>
+	</farm-col>
+</template>
+<script lang="ts">
+// import { VDataTable } from 'vuetify/labs/VDataTable';
+
+export default {
+	name: 'farm-select-modal-options',
+	components: {
+	//	'v-data-table': VDataTable,
+	},
+	props: {
+		/**
+		 * Input Label
+		 */
+		label: {
+			type: String,
+			required: true,
+		},
+		/**
+		 * Input ID
+		 */
+		inputId: {
+			type: String,
+			required: true,
+		},
+		/**
+		 * Key used to get value from selected item
+		 */
+		selectIdentifier: {
+			type: String,
+			default: 'id',
+		},
+		/**
+		 * Format label from each item
+		 * If value is a function, it is evaluted (use it to build complex strings)
+		 * Otherwise, will get item value from the key with the prop value
+		 */
+		itemLabelFormatter: {
+			default: 'name',
+		},
+		/**
+		 * Items to be shown in the table
+		 */
+		items: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * Function that will be called when user focus/click the input
+		 */
+		loadFn: {
+			type: Function,
+			default: () => {},
+		},
+		/**
+		 * Request Status from the loader function
+		 */
+		loadingRequestStatus: {
+			default: 'IDLE',
+		},
+		/**
+		 * Title from the modal
+		 */
+		modalTitle: {
+			type: String,
+			default: 'Selecione um item',
+		},
+		/**
+		 * General configuration
+		 */
+		config: {
+			default: () => ({ md: 2, required: false }),
+		},
+		/**
+		 * Placeholder from the search input
+		 */
+		placeholder: {
+			type: String,
+			default: 'Pesquise',
+		},
+		/**
+		 * v-model
+		 */
+		modelValue: {
+			required: true,
+		},
+	},
+	computed: {
+		inputVal: {
+			get() {
+				return this.modelValue;
+			},
+			set(val) {
+				this.$emit('input', val);
+			},
+		},
+		isLoading() {
+			return this.loadingRequestStatus === 'START';
+		},
+		selectedValueText: {
+			get() {
+				return this.selectedItem ? this.getItemLabel(this.selectedItem) : '';
+			},
+		},
+		totalPages() {
+			if (this.items !== undefined) {
+				return Math.ceil(this.items.length / 10);
+			}
+			return 0;
+		},
+	},
+	data() {
+		return {
+			selectedValue: {},
+			showModal: false,
+			selectedItem: null,
+			searchValue: '',
+			headers: [
+				{
+					text: 'Label',
+					sortable: false,
+					value: 'label',
+					align: 'left',
+				},
+			],
+			pagination: {
+				page: 1,
+				itemsPerPage: 10,
+				pages: 0,
+			},
+		};
+	},
+	watch: {
+		modelValue(newValue) {
+			if (!newValue || newValue === undefined) {
+				this.selectedItem = null;
+			}
+		},
+		items(newValue) {
+			this.pagination.pages = Math.ceil(newValue.length / 10);
+		},
+	},
+	mounted() {
+		this.selectedItem = { [this.itemLabelFormatter]: this.modelValue };
+	},
+	methods: {
+		handlePagination(tablePagination) {
+			if (
+				tablePagination.page === 1 &&
+				tablePagination.itemsLength !== this.pagination.pages
+			) {
+				this.pagination.pages = Math.ceil(tablePagination.itemsLength / 10);
+			}
+		},
+		openModal() {
+			this.loadFn();
+			this.showModal = true;
+		},
+		closeModal() {
+			this.focusOnInput();
+			this.showModal = false;
+		},
+		focusOnInput() {
+			this.$refs.searchTextField.$el.firstChild.firstElementChild.focus();
+		},
+		onChangePage(newPage) {
+			this.pagination.page = newPage;
+		},
+		getItemLabel(item) {
+			if (typeof this.itemLabelFormatter === 'function') {
+				return this.itemLabelFormatter(item);
+			}
+			return item[this.itemLabelFormatter];
+		},
+		handleClick(item) {
+			this.inputVal = item[this.selectIdentifier];
+			this.showModal = false;
+			this.selectedItem = item;
+			this.focusOnInput();
+		},
+		customFilter(_, search, item) {
+			const label = this.getItemLabel(item.raw);
+			return label.toLowerCase().includes(search.toLowerCase());
+		},
+		clearTextField(event) {
+			if (event.key === 'Delete' || event.key === 'Backspace') {
+				this.selectedItem = null;
+			}
+		},
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import 'SelectModalOptions.scss';
+</style>

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

@@ -0,0 +1,132 @@
+import { shallowMount } from '@vue/test-utils';
+import SelectModalOptions from '../SelectModalOptions';
+
+describe('SelectModalOptions component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(SelectModalOptions, {
+			propsData: {
+				value: 1,
+				inputId: 'some-id',
+				label: '',
+				pagination: {
+					page: 1,
+					itemsPerPage: 10,
+					pages: 0,
+				},
+			},
+		});
+		component = wrapper.vm;
+		jest.spyOn(component, 'focusOnInput').mockImplementationOnce(() => {});
+	});
+
+	test('SelectModalOptions created', () => {
+		expect(wrapper).toBeDefined();
+		expect(component.selectedValueText).toEqual(1);
+	});
+
+	describe('Methods', () => {
+		it('Should open modal', () => {
+			component.openModal();
+			expect(component.showModal).toBeTruthy();
+		});
+
+		it('Should close close', () => {
+			component.closeModal();
+			expect(component.showModal).toBeFalsy();
+		});
+
+		it('Should get item value', async () => {
+			expect(component.getItemLabel({ name: 'a' })).toEqual('a');
+
+			await wrapper.setProps({ itemLabelFormatter: item => item.name + ' ' + item.id });
+			expect(component.getItemLabel({ name: 'a', id: 'b' })).toEqual('a b');
+		});
+
+		it('Should handle click', () => {
+			component.handleClick({ name: 'a', id: 1 });
+			expect(component.inputVal).toEqual(1);
+			expect(component.selectedItem.id).toEqual(1);
+		});
+	});
+
+	describe('Computed properties', () => {
+		it('Should check if is loading', () => {
+			expect(component.isLoading).toBeFalsy();
+		});
+
+		it('Should return 0 when items are empty', () => {
+			expect(component.totalPages).toBe(0);
+		});
+
+		it('Should return 0 when items are empty', async () => {
+			await wrapper.setProps({
+				items: new Array(30).fill(0),
+			});
+			expect(component.totalPages).toBe(3);
+		});
+
+		it('Should return 0 when items are empty', async () => {
+			await wrapper.setProps({
+				items: new Array(30).fill(0),
+			});
+			expect(component.totalPages).toBe(3);
+		});
+	});
+
+	describe('Watch methods', () => {
+		it('Should reset selectedItem', () => {
+			component.$options.watch.value.call(component, undefined);
+			expect(component.selectedItem).toEqual(null);
+		});
+		it('Should reset selectedItem', () => {
+			component.$options.watch.items.call(component, new Array(50));
+
+			expect(component.pagination.pages).toBe(5);
+		});
+		it('Should change pagination', () => {
+			expect(component.pagination).toEqual({
+				page: 1,
+				itemsPerPage: 10,
+				pages: 0,
+			});
+			component.handlePagination({
+				page: 1,
+				itemsLength: 1,
+			});
+			expect(component.pagination).toEqual({
+				page: 1,
+				itemsPerPage: 10,
+				pages: 1,
+			});
+		});
+		it('Should not change pagination', () => {
+			expect(component.pagination).toEqual({
+				page: 1,
+				itemsPerPage: 10,
+				pages: 0,
+			});
+			component.handlePagination({
+				page: 2,
+				itemsLength: 30,
+			});
+			expect(component.pagination).toEqual({
+				page: 1,
+				itemsPerPage: 10,
+				pages: 0,
+			});
+		});
+
+		it('Should change page', () => {
+			component.onChangePage(2);
+			expect(component.pagination.page).toBe(2);
+		});
+
+		it('Should do customFilter', () => {
+			expect(component.customFilter({}, 'key', { name: '21321' })).toBeFalsy();
+			expect(component.customFilter({}, 'key', { name: 'aS KEY SDSA' })).toBeTruthy();
+		});
+	});
+});

package/src/components/SelectModalOptions/index.ts

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

package/src/components/Stepper/StepperHeader/IStep.ts

@@ -0,0 +1,6 @@
+interface IStep {
+	label: string;
+	icon?: string;
+}
+
+export default IStep;

package/src/components/Stepper/StepperHeader/StepperHeader.scss

@@ -0,0 +1,127 @@
+$step-height: 64px;
+
+@import 'mixins.scss';
+
+.horizontal-step-size .stepper__header--vertical {
+	width: 160px;
+}
+
+.stepper__header {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+
+	div.stepper__header-step {
+		width: 80px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-items: center;
+		color: var(--farm-bw-black-5);
+		font-size: 14px;
+		font-weight: 700;
+
+		&.stepper__header-step--previous {
+			@include stepperHeaderStepColor(var(--farm-primary-base));
+		}
+
+		&.stepper__header-step--current {
+			@include stepperHeaderStepColor(var(--farm-info-base));
+		}
+
+		&.stepper__header-step--error {
+			@include stepperHeaderStepColor(var(--farm-error-base));
+		}
+
+		&.stepper__header-step--next {
+			.farm-icon,
+			.farm-icon__number {
+				color: var(--farm-bw-black-50);
+			}
+		}
+
+		.farm-bodytext--2:not(.farm-icon__number) {
+			margin-top: 8px;
+			text-align: center;
+		}
+	}
+
+	.stepper__divider--horizontal {
+		display: block;
+		flex: 1 1 0px;
+		max-width: 100%;
+		height: 1px;
+
+		border: none;
+		margin: 16px -16px 0;
+		background: var(--farm-bw-black-5);
+
+		&.stepper__divider--previous {
+			background: var(--farm-primary-base);
+		}
+
+		@include stepperDividerGradient('right');
+	}
+
+	&.stepper__header--vertical {
+		display: flex;
+		flex-direction: column;
+
+		div.stepper__header-step {
+			width: 100%;
+			display: block;
+			clear: both;
+			height: 64px;
+
+			.farm-icon {
+				float: left;
+			}
+
+			.farm-bodytext--2 {
+				display: flex;
+				align-items: center;
+				width: calc(100% - 40px);
+				height: 32px;
+				clear: none;
+				float: left;
+				margin-top: 0;
+				margin-left: 8px;
+				text-align: left;
+			}
+		}
+
+		.stepper__divider--vertical {
+			float: left;
+			clear: both;
+			height: 32px;
+			margin: -24px 0 8px 16px;
+			width: 1px;
+			background-color: var(--farm-bw-black-5);
+
+			&.stepper__divider--previous {
+				background-color: var(--farm-primary-base);
+			}
+
+			@include stepperDividerGradient('bottom');
+		}
+	}
+}
+
+.farm-icon,
+.farm-icon__number {
+	border: 1px solid var(--farm-bw-black-5);
+	border-radius: 50%;
+	width: 32px;
+	height: 32px;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: white;
+	font-style: normal;
+
+	&:before {
+		font-size: 16px;
+		color: var(--farm-bw-black-50);
+	}
+}