@farm-investimentos/front-mfe-components-vue3 0.6.1 → 0.7.1

package/src/components/Select/Select.vue

@@ -1,55 +1,148 @@
 <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>
+	<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 || clickedDisabledItem"
+			ref="contextmenu"
+		>
+			<farm-list
+				v-if="!readonly"
+				ref="listRef"
+				@keydown="onKeyDown"
+			>
+				<farm-listitem
+					clickable
+					v-if="hasAllOption && multiple"
+				>
+					<farm-checkbox
+						class="farm-select__checkbox"
+						v-model="allChecked"
+						value="1"
+						size="sm"
+						:indeterminate="allChecked && multipleValues.length !== enabledItems.length"
+					/>
+					<farm-caption
+						bold
+						tag="span"
+						@click="allChecked = !allChecked"
+					>
+						Todos
+					</farm-caption>
+				</farm-listitem>
+				<farm-listitem
+					v-for="(item, index) in items"
+					clickable
+					hoverColorVariation="lighten"
+					:hover-color="item.disabled ? 'neutral' : 'primary'"
+					:key="'contextmenu_item_' + index"
+					:class="{
+						'farm-listitem--selected': item[itemValue] === innerValue,
+						'farm-listitem--disabled': item.disabled,
+					}"
+					@click:item="event => selectItem(item)"
+				>
+					<farm-checkbox
+						class="farm-select__checkbox"
+						v-model="checked"
+						value="1"
+						size="sm"
+						:disabled="item.disabled"
+						v-if="isChecked(item)"
+					/>
+					<farm-checkbox
+						class="farm-select__checkbox"
+						v-model="checked"
+						value="2"
+						size="sm"
+						:disabled="item.disabled"
+						v-else-if="multiple"
+					/>
+					<farm-caption
+						bold
+						tag="span"
+						:color="item.disabled ? 'neutral' : ''"
+						:color-variation="item.disabled ? 'lighten' : 'normal'"
+					>
+						{{ 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">
+			<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">
+		<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">
+		<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" />
+	<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 { buildData } from './composition';
+import { buildData, selectItemHandler, watchAllChecked } from './composition';
+
+import { ISelectItem } from '@/interfaces/ISelectItem';
 
 import deepEqual from '../../composition/deepEqual';
 import validateFormFieldBuilder from '../../composition/validateFormFieldBuilder';
@@ -57,7 +150,6 @@ import validateFormMethodBuilder from '../../composition/validateFormMethodBuild
 import validateFormStateBuilder from '../../composition/validateFormStateBuilder';
 import randomId from '../../helpers/randomId';
 
-
 export default {
 	name: 'farm-select',
 	inheritAttrs: true,
@@ -103,7 +195,9 @@ export default {
 		 * This can be changed using the item-text ad item-value
 		 */
 		items: {
-			type: Array,
+			type: Array as PropType<
+				Array<ISelectItem>
+			>,
 			default: () => [],
 		},
 		/**
@@ -155,7 +249,7 @@ export default {
 		input: {
 			type: Function,
 			// eslint-disable-next-line
-			default: (value: [String, Number, Array<any>]) => { },
+			default: (value: [String, Number, Array<any>]) => {},
 		},
 		/**
 		 * Emitted when the select is changed by user interaction<br />
@@ -164,7 +258,7 @@ export default {
 		change: {
 			type: Function,
 			// eslint-disable-next-line
-			default: (value: [String, Number, Array<any>]) => { },
+			default: (value: [String, Number, Array<any>]) => {},
 		},
 		/**
 		 * Emitted when any key is pressed<br />
@@ -173,7 +267,7 @@ export default {
 		keyup: {
 			type: Function,
 			// eslint-disable-next-line
-			default: (event: Event) => { },
+			default: (event: Event) => {},
 		},
 		/**
 		 * Emitted when the select is blurred<br />
@@ -182,11 +276,19 @@ export default {
 		blur: {
 			type: Function,
 			// eslint-disable-next-line
-			default: (event: Event) => { },
+			default: (event: Event) => {},
+		},
+		/**
+		 * Set "All" as first option to select all other values
+		 */
+		hasAllOption: {
+			type: Boolean,
+			default: false,
 		},
 	},
 	setup(props, { emit }) {
-		const { rules, items, itemText, itemValue, disabled, multiple } = toRefs(props);
+		const { rules, items, itemText, itemValue, disabled, multiple, hasAllOption } =
+			toRefs(props);
 
 		const {
 			multipleValues,
@@ -200,9 +302,11 @@ export default {
 			notChecked,
 			inputField,
 			keys,
+			allChecked,
 		} = buildData(props);
 
 		const listRef = ref();
+		const clickedDisabledItem = ref(false);
 
 		const contextmenu = ref(null);
 
@@ -219,6 +323,8 @@ export default {
 
 		const showErrorText = computed(() => hasError.value && isTouched.value);
 
+		const enabledItems = computed(() => items.value.filter((item: any) => !item.disabled));
+
 		watch(
 			() => props.modelValue,
 			newValue => {
@@ -288,6 +394,8 @@ export default {
 			emit('update:modelValue', innerValue.value);
 		};
 
+		watchAllChecked(allChecked, multipleValues, items, innerValue, reset);
+
 		const onBlur = (event: Event) => {
 			isBlured.value = true;
 			validate(innerValue.value);
@@ -298,30 +406,19 @@ export default {
 			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 selectItem = selectItemHandler(
+			inputField,
+			innerValue,
+			itemValue,
+			checked,
+			multiple,
+			multipleValues,
+			allChecked,
+			enabledItems,
+			isVisible,
+			clickedDisabledItem,
+			emit
+		);
 
 		const clickInput = () => {
 			isTouched.value = true;
@@ -367,8 +464,9 @@ export default {
 					return;
 				}
 
-				selectedText.value = `${labelItem[itemText.value]} (+${innerValue.value.length - 1
-					} ${innerValue.value.length - 1 === 1 ? 'outro' : 'outros'})`;
+				selectedText.value = `${labelItem[itemText.value]} (+${
+					innerValue.value.length - 1
+				} ${innerValue.value.length - 1 === 1 ? 'outro' : 'outros'})`;
 			}
 		};
 
@@ -416,6 +514,9 @@ export default {
 			customId,
 			showErrorText,
 			contextmenu,
+			hasAllOption,
+			allChecked,
+			enabledItems,
 			validate,
 			reset,
 			selectItem,
@@ -433,6 +534,7 @@ export default {
 			onKeyDown,
 			addFocusToInput,
 			listRef,
+			clickedDisabledItem,
 		};
 	},
 };

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

@@ -172,4 +172,65 @@ describe('Select component', () => {
 			});
 		});
 	});
-});
+
+	describe('disabled items', () => {
+		it('should not select a disabled item', async () => {
+			const items = [
+				{ value: 0, text: 'value 0', disabled: true },
+				{ value: 1, text: 'value 1' },
+				{ value: 2, text: 'value 2' },
+				{ value: 3, text: 'value 3' },
+			];
+
+			await wrapper.setProps({
+				items,
+				modelValue: 1,
+			});
+
+			expect(component.innerValue).toBe(1);
+			expect(component.selectedText).toBe('value 1');
+			component.selectItem(items[2]);
+			setTimeout(() => {
+				expect(component.innerValue).toBe(2);
+				expect(component.selectedText).toBe('value 2');
+			}, 150);
+			component.selectItem(items[0]);
+			setTimeout(() => {
+				expect(component.innerValue).toBe(2);
+				expect(component.selectedText).toBe('value 2');
+			}, 150);
+			component.selectItem(items[3]);
+			setTimeout(() => {
+				expect(component.innerValue).toBe(3);
+				expect(component.selectedText).toBe('value 3');
+			}, 150);
+		});
+		it('should not select a disabled item if is multiple', async () => {
+			const items = [
+				{ value: 0, text: 'value 0' },
+				{ value: 1, text: 'value 1', disabled: true },
+				{ value: 2, text: 'value 2' },
+				{ value: 3, text: 'value 3', disabled: true },
+			];
+
+			await wrapper.setProps({
+				multiple: true,
+				items,
+				modelValue: [0],
+			});
+
+			expect(component.innerValue).toEqual([0]);
+			expect(component.selectedText).toBe('value 0');
+			component.selectItem(items[2]);
+			setTimeout(() => {
+				expect(component.innerValue).toEqual([0, 2]);
+				expect(component.selectedText).toBe('value 0 (+1 outro)');
+			}, 150);
+			component.selectItem(items[1]);
+			setTimeout(() => {
+				expect(component.innerValue).toEqual([0, 2]);
+				expect(component.selectedText).toBe('value 0 (+1 outro)');
+			}, 150);
+		});
+	});
+});

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

@@ -0,0 +1,93 @@
+import selectItemHandler from '../composition/selectItemHandler';
+
+describe('selectItemHandler', () => {
+	let inputField;
+	let innerValue;
+	let itemValue;
+	let checked;
+	let multiple;
+	let multipleValues;
+	let allChecked;
+	let enabledItems;
+	let isVisible;
+	let emit;
+
+	beforeEach(() => {
+		// Initialize mock values for refs and emit function
+		inputField = { value: { focus: jest.fn() } };
+		innerValue = { value: null };
+		itemValue = { value: 'id' };
+		checked = { value: null };
+		multiple = { value: false };
+		multipleValues = { value: [] };
+		allChecked = { value: false };
+		enabledItems = { value: [{ id: 1 }, { id: 2 }] };
+		isVisible = { value: true };
+		emit = jest.fn();
+	});
+
+	it('should handle single select', () => {
+		const item = { id: 1, name: 'Item 1' };
+
+		// Call the handler function
+		selectItemHandler(
+			inputField,
+			innerValue,
+			itemValue,
+			checked,
+			multiple,
+			multipleValues,
+			allChecked,
+			enabledItems,
+			isVisible,
+			emit
+		)(item);
+
+		// Assertions
+		expect(inputField.value.focus).toHaveBeenCalled();
+		expect(innerValue.value).toEqual(1);
+		expect(isVisible.value).toEqual(false);
+	});
+
+	it('should handle multiple select', () => {
+		multiple.value = true;
+		const item = { id: 1, name: 'Item 1' };
+
+		// Call the handler function
+		selectItemHandler(
+			inputField,
+			innerValue,
+			itemValue,
+			checked,
+			multiple,
+			multipleValues,
+			allChecked,
+			enabledItems,
+			isVisible,
+			emit
+		)(item);
+
+		// Assertions
+		expect(inputField.value.focus).toHaveBeenCalled();
+		expect(multipleValues.value).toEqual([1]);
+		expect(allChecked.value).toEqual(false);
+
+		// Call the handler function again with a different item
+		selectItemHandler(
+			inputField,
+			innerValue,
+			itemValue,
+			checked,
+			multiple,
+			multipleValues,
+			allChecked,
+			enabledItems,
+			isVisible,
+			emit
+		)({ id: 2, name: 'Item 2' });
+
+		// Assertions
+		expect(multipleValues.value).toEqual([1, 2]);
+		expect(allChecked.value).toEqual(true);
+	});
+});

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

@@ -11,6 +11,7 @@ export default function (props) {
 	const checked = ref('1');
 	const notChecked = ref(false);
 	const inputField = ref();
+	const allChecked = ref(false);
 	const keys = {
 		ArrowDown: 'next',
 		ArrowUp: 'prev',
@@ -30,5 +31,6 @@ export default function (props) {
 		notChecked,
 		inputField,
 		keys,
+		allChecked,
 	};
 }

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

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

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

@@ -0,0 +1,60 @@
+import { Ref } from 'vue';
+
+import { ISelectItem } from '@/interfaces/ISelectItem';
+
+export default function (
+	inputField: Ref<any>,
+	innerValue: Ref<any>,
+	itemValue: Ref<string>,
+	checked: Ref<string>,
+	multiple: Ref<boolean>,
+	multipleValues: Ref<Array<any>>,
+	allChecked: Ref<boolean>,
+	enabledItems,
+	isVisible: Ref<boolean>,
+	clickedDisabledItem,
+	emit: Function
+) {
+	return function (item: ISelectItem) {
+		if (inputField.value) {
+				inputField.value.focus();
+			}
+
+			if (item.disabled) {
+				clickedDisabledItem.value = true;
+
+				// "Schedule" execution to next loop, so the contextMenu won't close immediately if a disabled item is clicked
+				setTimeout(() => {
+					clickedDisabledItem.value = false;
+				});
+				return;
+			}
+		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];
+
+			if (multipleValues.value.length === 0) {
+				allChecked.value = false;
+			}
+			if (multipleValues.value.length === enabledItems.value.length) {
+				allChecked.value = true;
+			}
+			return;
+		}
+
+		innerValue.value = item[itemValue.value];
+		isVisible.value = false;
+
+		setTimeout(() => {
+			emit('change', innerValue.value);
+		}, 100);
+	};
+}

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

@@ -0,0 +1,23 @@
+import { Ref, watch } from 'vue';
+
+export default function (
+	allChecked: Ref<boolean>,
+	multipleValues: Ref<Array<any>>,
+	items: Ref<Array<unknown>>,
+	innerValue: Ref<any>,
+	resetFn: Function
+) {
+	watch(
+		() => allChecked.value,
+		newVal => {
+			if (newVal) {
+				multipleValues.value = (items.value as any)
+					.map(item => (!item.disabled ? item.value : null))
+					.filter(item => item !== null);
+				innerValue.value = [...multipleValues.value];
+			} else {
+				resetFn();
+			}
+		}
+	);
+}

package/src/components/SelectAutoComplete/SelectAutoComplete.vue

@@ -535,4 +535,4 @@ export default defineComponent({
 </script>
 <style lang="scss" scoped>
 @import 'SelectAutoComplete';
-</style>
+</style>

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

@@ -128,4 +128,4 @@ describe('SelectAutoComplet component', () => {
 			});
 		});
 	});
-});
+});

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

@@ -7,7 +7,11 @@ describe('TextArea component', () => {
 	let component;
 
 	beforeEach(() => {
-		wrapper = shallowMount(TextArea);
+		wrapper = shallowMount(TextArea, {
+			props: {
+				modelValue: '',
+			},
+		});
 		component = wrapper.vm;
 	});
 

package/src/interfaces/ISelectItem.ts

@@ -0,0 +1,5 @@
+export interface ISelectItem {
+	disabled: boolean;
+	value: string | number;
+	text: string;
+}