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

package/src/components/Select/Select.vue

@@ -0,0 +1,439 @@
+<template>
+	<div :class="{
+		'farm-textfield': true,
+		'farm-textfield--validatable': rules.length > 0,
+		'farm-textfield--touched': isTouched,
+		'farm-textfield--blured': isBlured,
+		'farm-textfield--error': hasError,
+		'farm-textfield--disabled': disabled,
+		'farm-textfield--focused': isFocus || isVisible,
+		'farm-textfield--hiddendetails': hideDetails,
+	}" v-if="!readonly && !disabled" :id="customId">
+		<farm-contextmenu bottom v-model="isVisible" :stay-open="multiple" ref="contextmenu">
+			<farm-list v-if="!readonly" ref="listRef" @keydown="onKeyDown">
+				<farm-listitem tabindex="0" v-for="(item, index) in items" clickable hoverColorVariation="lighten"
+					hover-color="primary" :key="'contextmenu_item_' + index"
+					:class="{ 'farm-listitem--selected': item[itemValue] === innerValue }" @click:item="selectItem(item)">
+					<farm-checkbox class="farm-select__checkbox" v-model="checked" value="1" size="sm"
+						v-if="isChecked(item)" />
+					<farm-checkbox class="farm-select__checkbox" v-model="checked" value="2" size="sm"
+						v-else-if="multiple" />
+					<farm-caption bold tag="span">{{ item[itemText] }}</farm-caption>
+				</farm-listitem>
+				<farm-listitem v-if="!items || items.length === 0">
+					{{ noDataText }}
+				</farm-listitem>
+			</farm-list>
+			<template v-slot:activator="{ }">
+				<div class="farm-textfield--input farm-textfield--input--iconed" @keydown="onKeyDown">
+					<input v-bind="$attrs" v-model="selectedText" ref="inputField" readonly :id="$props.id"
+						@click="clickInput" @blur="onBlur" @focusin="onFocus(true)" @focusout="onFocus(false)" />
+					<farm-icon color="gray" :class="{ 'farm-icon--rotate': isVisible }" @click="addFocusToInput">
+						menu-down
+					</farm-icon>
+				</div>
+			</template>
+		</farm-contextmenu>
+		<farm-caption v-if="showErrorText" color="error" variation="regular">
+			{{ errorBucket[0] }}
+		</farm-caption>
+		<farm-caption v-if="hint && !showErrorText" class="farm-select__hint-text" :class="{
+			'farm-select__hint-text--show': persistentHint || isFocus,
+		}" color="gray" variation="regular">
+			{{ hint }}
+		</farm-caption>
+	</div>
+	<farm-textfield-v2 v-else v-model="selectedText" :disabled="disabled" :readonly="readonly" />
+</template>
+
+<script lang="ts">
+import { computed, onBeforeMount, PropType, ref, toRefs, watch } from 'vue';
+import validateFormStateBuilder from '../../composition/validateFormStateBuilder';
+import validateFormFieldBuilder from '../../composition/validateFormFieldBuilder';
+import validateFormMethodBuilder from '../../composition/validateFormMethodBuilder';
+import deepEqual from '../../composition/deepEqual';
+import randomId from '../../helpers/randomId';
+import { buildData } from './composition';
+
+export default {
+	name: 'farm-select',
+	inheritAttrs: true,
+	props: {
+		/**
+		 * v-model binding
+		 */
+		modelValue: { type: [String, Number, Array], default: '' },
+		hint: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Always show hint text
+		 */
+		persistentHint: {
+			type: Boolean,
+			default: true,
+		},
+		/**
+		 * Disabled the input
+		 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Puts input in readonly state
+		 */
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Array of rules used for validation
+		 */
+		rules: {
+			type: Array as PropType<Array<Function>>,
+			default: () => [],
+		},
+		/**
+		 * An array of objects. Will look for a text, value and disabled keys.
+		 * This can be changed using the item-text ad item-value
+		 */
+		items: {
+			type: Array,
+			default: () => [],
+		},
+		/**
+		 * Set property of items's text value
+		 */
+		itemText: {
+			type: String,
+			default: 'text',
+		},
+		/**
+		 * Set property of items's value
+		 */
+		itemValue: {
+			type: String,
+			default: 'value',
+		},
+		/**
+		 * No data text
+		 */
+		noDataText: {
+			type: String,
+			default: 'Não há dados',
+		},
+		/**
+		 * Set a multiple select
+		 */
+		multiple: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Hides hint and validation errors
+		 */
+		hideDetails: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Select id
+		 */
+		id: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * The updated bound model<br />
+		 * _event_
+		 */
+		input: {
+			type: Function,
+			// eslint-disable-next-line
+			default: (value: [String, Number, Array<any>]) => { },
+		},
+		/**
+		 * Emitted when the select is changed by user interaction<br />
+		 * _event_
+		 */
+		change: {
+			type: Function,
+			// eslint-disable-next-line
+			default: (value: [String, Number, Array<any>]) => { },
+		},
+		/**
+		 * Emitted when any key is pressed<br />
+		 * _event_
+		 */
+		keyup: {
+			type: Function,
+			// eslint-disable-next-line
+			default: (event: Event) => { },
+		},
+		/**
+		 * Emitted when the select is blurred<br />
+		 * _event_
+		 */
+		blur: {
+			type: Function,
+			// eslint-disable-next-line
+			default: (event: Event) => { },
+		},
+	},
+	setup(props, { emit }) {
+		const { rules, items, itemText, itemValue, disabled, multiple } = toRefs(props);
+
+		const {
+			multipleValues,
+			innerValue,
+			isTouched,
+			isFocus,
+			isBlured,
+			isVisible,
+			selectedText,
+			checked,
+			notChecked,
+			inputField,
+			keys,
+		} = buildData(props);
+
+		const listRef = ref();
+
+		const contextmenu = ref(null);
+
+		const { errorBucket, valid, validatable } = validateFormStateBuilder();
+
+		let fieldValidator = validateFormFieldBuilder(rules.value);
+		let validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
+
+		const hasError = computed(() => {
+			return errorBucket.value.length > 0;
+		});
+
+		const customId = 'farm-select-' + (props.id || randomId(2));
+
+		const showErrorText = computed(() => hasError.value && isTouched.value);
+
+		watch(
+			() => props.modelValue,
+			newValue => {
+				innerValue.value = newValue;
+				errorBucket.value = [];
+
+				if (
+					(multiple.value && newValue === null) ||
+					(Array.isArray(newValue) && newValue.length === 0)
+				) {
+					multipleValues.value = [];
+				}
+				if (Array.isArray(newValue) && newValue.length > 0) {
+					multipleValues.value = [...newValue];
+				}
+				validate(newValue);
+				updateSelectedTextValue();
+				emit('update:modelValue', newValue);
+			}
+		);
+
+		watch(
+			() => props.items,
+			() => {
+				errorBucket.value = [];
+				validate(innerValue.value);
+				updateSelectedTextValue();
+			}
+		);
+
+		watch(
+			() => innerValue.value,
+			() => {
+				isTouched.value = true;
+				isBlured.value = true;
+				validate(innerValue.value);
+				emit('update:modelValue', innerValue.value);
+			}
+		);
+
+		watch(
+			() => props.rules,
+			(newVal, oldVal) => {
+				if (deepEqual(newVal, oldVal)) return;
+				fieldValidator = validateFormFieldBuilder(rules.value);
+				validate(innerValue.value);
+			}
+		);
+
+		onBeforeMount(() => {
+			validate(innerValue.value);
+			updateSelectedTextValue();
+		});
+
+		const reset = () => {
+			if (disabled.value) {
+				return;
+			}
+			innerValue.value = null;
+			multipleValues.value = [];
+			selectedText.value = '';
+			isTouched.value = true;
+			if (multiple.value) {
+				innerValue.value = [];
+				return;
+			}
+			emit('update:modelValue', innerValue.value);
+		};
+
+		const onBlur = (event: Event) => {
+			isBlured.value = true;
+			validate(innerValue.value);
+			emit('blur', event);
+		};
+
+		const onFocus = (focus: boolean) => {
+			isFocus.value = focus;
+		};
+
+		const selectItem = item => {
+			inputField.value.focus();
+			if (multiple.value) {
+				const alreadyAdded = multipleValues.value.findIndex(
+					val => val === item[itemValue.value]
+				);
+				checked.value = '1';
+				if (alreadyAdded !== -1) {
+					multipleValues.value.splice(alreadyAdded, 1);
+				} else {
+					multipleValues.value.push(item[itemValue.value]);
+				}
+				innerValue.value = [...multipleValues.value];
+				return;
+			}
+
+			innerValue.value = item[itemValue.value];
+			isVisible.value = false;
+
+			setTimeout(() => {
+				emit('change', innerValue.value);
+			}, 100);
+
+		};
+
+		const clickInput = () => {
+			isTouched.value = true;
+			emit('click');
+		};
+
+		const makePristine = () => {
+			isTouched.value = false;
+		};
+
+		const updateSelectedTextValue = () => {
+			if (
+				!items.value ||
+				items.value.length === 0 ||
+				innerValue.value === null ||
+				(multiple.value && multipleValues.value.length === 0)
+			) {
+				selectedText.value = '';
+				return;
+			}
+			const selectedItem = items.value.find(
+				item => item[itemValue.value] == innerValue.value
+			);
+
+			if (selectedItem) {
+				selectedText.value = selectedItem[itemText.value];
+			}
+
+			addLabelToMultiple();
+		};
+
+		const addLabelToMultiple = () => {
+			if (multiple.value && Array.isArray(innerValue.value) && innerValue.value.length > 0) {
+				const labelItem = items.value.find(
+					item => item[itemValue.value] === innerValue.value[0]
+				);
+
+				if (innerValue.value.length === 0) {
+					selectedText.value = '';
+					return;
+				} else if (innerValue.value.length === 1) {
+					selectedText.value = labelItem[itemText.value];
+					return;
+				}
+
+				selectedText.value = `${labelItem[itemText.value]} (+${innerValue.value.length - 1
+					} ${innerValue.value.length - 1 === 1 ? 'outro' : 'outros'})`;
+			}
+		};
+
+		const isChecked = item => {
+			return (
+				multiple.value &&
+				multipleValues.value.findIndex(val => val === item[itemValue.value]) !== -1
+			);
+		};
+
+		function onKeyDown(e) {
+			if (props.readonly) return;
+
+			if (['Space'].includes(e.code)) {
+				isVisible.value = true;
+				e.currentTarget.click();
+			}
+			if (['Escape'].includes(e.code)) {
+				isVisible.value = false;
+			}
+
+			if (keys[e.code]) {
+				listRef.value.focus(keys[e.code]);
+			}
+
+			e.preventDefault();
+		}
+
+		function addFocusToInput() {
+			inputField.value.focus();
+		}
+
+		return {
+			items,
+			innerValue,
+			selectedText,
+			errorBucket,
+			valid,
+			validatable,
+			hasError,
+			isTouched,
+			isBlured,
+			isFocus,
+			isVisible,
+			customId,
+			showErrorText,
+			contextmenu,
+			validate,
+			reset,
+			selectItem,
+			onBlur,
+			onFocus,
+			clickInput,
+			updateSelectedTextValue,
+			makePristine,
+			checked,
+			notChecked,
+			isChecked,
+			multipleValues,
+			addLabelToMultiple,
+			inputField,
+			onKeyDown,
+			addFocusToInput,
+			listRef,
+		};
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import 'Select';
+</style>

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

@@ -0,0 +1,174 @@
+import { shallowMount } from '@vue/test-utils';
+import Select from '../Select';
+
+describe('Select component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Select);
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+
+	describe('methods', () => {
+		it('reset', () => {
+			component.reset();
+			expect(component.isTouched).toBeTruthy();
+			expect(component.innerValue).toEqual(null);
+		});
+
+		it('onBlur', () => {
+			component.onBlur();
+			expect(component.isBlured).toBeTruthy();
+		});
+
+		it('clickInput', () => {
+			component.clickInput();
+			expect(component.isTouched).toBeTruthy();
+		});
+
+		it('updateSelectedTextValue', () => {
+			component.updateSelectedTextValue();
+			expect(component.selectedText).toBeDefined();
+		});
+
+		it('makePristine', () => {
+			component.isTouched = true;
+			component.makePristine();
+			expect(component.isTouched).toBeFalsy();
+		});
+
+		describe('isChecked', () => {
+			it('should return false when multiple is false', async () => {
+				component.multipleValues = [0, 1, 2];
+				const result = component.isChecked({ value: 1 });
+				expect(result).toBe(false);
+			});
+			it('should return true when multiple is true and item is checked', async () => {
+				await wrapper.setProps({
+					multiple: true,
+				});
+				component.multipleValues = [0, 1, 2];
+				const result = component.isChecked({ value: 1 });
+				expect(result).toBe(true);
+			});
+			it('should return false when item is not checked', async () => {
+				await wrapper.setProps({
+					multiple: true,
+				});
+				component.multipleValues = [0, 1, 2];
+				const result = component.isChecked({ value: 3 });
+				expect(result).toBe(false);
+			});
+		});
+		describe('addLabelToMultiple', () => {
+			it('should not do anything when multiple is false', async () => {
+				component.addLabelToMultiple();
+
+				expect(component.selectedText).toBe('');
+			});
+			it('should return a selectedText to a selected item', async () => {
+				await wrapper.setProps({
+					multiple: true,
+					items: [
+						{ value: 0, text: 'value 0' },
+						{ value: 1, text: 'value 1' },
+						{ value: 2, text: 'value 2' },
+						{ value: 3, text: 'value 3' },
+					],
+					modelValue: [0],
+				});
+
+				component.addLabelToMultiple();
+				expect(component.selectedText).toBe('value 0');
+			});
+			it('should return a selectedText to two selected item', async () => {
+				await wrapper.setProps({
+					multiple: true,
+					items: [
+						{ value: 0, text: 'value 0' },
+						{ value: 1, text: 'value 1' },
+						{ value: 2, text: 'value 2' },
+						{ value: 3, text: 'value 3' },
+					],
+					modelValue: [0, 1],
+				});
+
+				component.addLabelToMultiple();
+				expect(component.selectedText).toBe('value 0 (+1 outro)');
+			});
+
+			it('should return a selectedText to three or more selected item', async () => {
+				await wrapper.setProps({
+					multiple: true,
+					items: [
+						{ value: 0, text: 'value 0' },
+						{ value: 1, text: 'value 1' },
+						{ value: 2, text: 'value 2' },
+						{ value: 3, text: 'value 3' },
+					],
+					modelValue: [0, 1, 2],
+				});
+
+				component.addLabelToMultiple();
+				expect(component.selectedText).toBe('value 0 (+2 outros)');
+			});
+		});
+
+		describe('onKeyDown', () => {
+			it('should open the ContextMenu and click on current element', () => {
+				const event = {
+					code: 'Space',
+					preventDefault: jest.fn(),
+					currentTarget: {
+						click: jest.fn(),
+					},
+				};
+				component.onKeyDown(event);
+
+				expect(component.isVisible).toBeTruthy();
+				expect(event.currentTarget.click).toHaveBeenCalled();
+				expect(event.preventDefault).toHaveBeenCalled();
+			});
+			it('should open the ContextMenu and click on current element when prop readonly is true', async () => {
+				await wrapper.setProps({
+					readonly: true,
+				});
+				const event = {
+					code: 'Space',
+					preventDefault: jest.fn(),
+					currentTarget: {
+						click: jest.fn(),
+					},
+				};
+				component.onKeyDown(event);
+
+				expect(component.isVisible).toBeFalsy();
+				expect(event.currentTarget.click).not.toHaveBeenCalled();
+				expect(event.preventDefault).not.toHaveBeenCalled();
+			});
+
+			it('should close the ContextMenu', () => {
+				const event = {
+					code: 'Escape',
+					preventDefault: jest.fn(),
+				};
+				component.onKeyDown(event);
+
+				expect(component.isVisible).toBeFalsy();
+
+				expect(event.preventDefault).toHaveBeenCalled();
+			});
+		});
+	});
+});

package/src/components/Select/__tests__/composition.spec.js

@@ -0,0 +1,27 @@
+import buildData from '../composition/buildData';
+
+describe('buildData', () => {
+	it('should initialize with empty arrays and false values', () => {
+		const props = { modelValue: [] };
+		const result = buildData(props);
+
+		expect(result.multipleValues.value).toEqual([]);
+		expect(result.innerValue.value).toEqual([]);
+		expect(result.isTouched.value).toBe(false);
+		expect(result.isFocus.value).toBe(false);
+		expect(result.isBlured.value).toBe(false);
+		expect(result.isVisible.value).toBe(false);
+		expect(result.selectedText.value).toBe('');
+		expect(result.checked.value).toBe('1');
+		expect(result.notChecked.value).toBe(false);
+		expect(result.inputField.value).toBe(undefined);
+	});
+
+	it('should initialize with provided values', () => {
+		const props = { modelValue: 'test' };
+		const result = buildData(props);
+
+		expect(result.multipleValues.value).toEqual([]);
+		expect(result.innerValue.value).toBe('test');
+	});
+});

package/src/components/Select/composition/buildData.ts

@@ -0,0 +1,34 @@
+import { ref } from 'vue';
+
+export default function (props) {
+	const multipleValues = ref(Array.isArray(props.modelValue) ? [...props.modelValue] : []);
+	const innerValue = ref(props.modelValue);
+	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 keys = {
+		ArrowDown: 'next',
+		ArrowUp: 'prev',
+		Home: 'first',
+		End: 'last',
+	};
+
+	return {
+		multipleValues,
+		innerValue,
+		isTouched,
+		isFocus,
+		isBlured,
+		isVisible,
+		selectedText,
+		checked,
+		notChecked,
+		inputField,
+		keys,
+	};
+}

package/src/components/Select/composition/index.ts

@@ -0,0 +1,3 @@
+import buildData from './buildData';
+
+export { buildData };

package/src/components/Select/index.ts

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