@farm-investimentos/front-mfe-components 15.7.2 → 15.7.4

package/package.json

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

package/src/components/Logger/Logger.stories.js

@@ -31,7 +31,7 @@ export const Primary = () => ({
 					formattedDate: '13/06/2022  20:40',
 					status: 'error',
 				},
-				
+
 				{
 					message: 'Aprovado entre as pré elegíveis',
 					userName: 'Cleyton Rasta',
@@ -69,10 +69,10 @@ export const Primary = () => ({
 					status: 'success',
 				},
 				{
-					message: 'Info',
+					message: 'Em validação',
 					userName: 'Cleyton Rasta',
 					formattedDate: '13/06/2022  20:40',
-					status: 'info',
+					status: 'warning',
 				},
 			],
 		};
@@ -174,7 +174,7 @@ export const Horizontal = () => ({
 					details() {
 						alert('Ver Detalhes');
 					},
-				}
+				},
 			],
 		};
 	},
@@ -220,7 +220,7 @@ export const HorizontalLeftAligned = () => ({
 					details() {
 						alert('Ver Detalhes');
 					},
-				}
+				},
 			],
 		};
 	},

package/src/components/Logger/LoggerItem/LoggerItem.scss

@@ -62,6 +62,10 @@
 		@include loggerMessage(var(--farm-info-base));
 	}
 
+	&.logger__item--warning {
+		@include loggerMessage(var(--farm-warning-base));
+	}
+
 	&--horizontal {
 		flex-direction: column;
 		height: auto;

package/src/components/Logger/LoggerItem/LoggerItem.stories.js

@@ -74,6 +74,20 @@ export const Info = () => ({
 	template: `<farm-logger-item :item="item" />`,
 });
 
+export const Warning = () => ({
+	data() {
+		return {
+			item: {
+				message: 'Recusado entre as pré elegíveis',
+				userName: 'Cleyton Rasta',
+				formattedDate: '13/06/2022  20:40',
+				status: 'warning',
+			},
+		};
+	},
+	template: `<farm-logger-item :item="item" />`,
+});
+
 export const ExtraMessage = () => ({
 	data() {
 		return {
@@ -137,6 +151,17 @@ export const Details = () => ({
 						alert('Ver Detalhes');
 					},
 				},
+
+				{
+					icon: 'book',
+					message: 'Warning',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'warning',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
 			],
 		};
 	},

package/src/components/Logger/LoggerItem/mappingIconKeys.ts

@@ -2,4 +2,5 @@ export default {
 	success: 'check',
 	info: 'timer-sand',
 	error: 'close',
+	warning: 'alert-circle-outline',
 };

package/src/components/Select/Select.stories.js

@@ -288,6 +288,42 @@ export const Multiple = () => ({
 	</div>`,
 });
 
+export const MultipleWithAllOption = () => ({
+	data() {
+		return {
+			v: null,
+			items: [
+				{ value: 0, text: 'value 0' },
+				{ value: 1, text: 'value 1' },
+				{ value: 2, text: 'value 2' },
+				{ value: 3, text: 'value 3' },
+			],
+		};
+	},
+	template: `<div style="width: 400px">
+		<farm-select v-model="v" :items="items" multiple has-all-option />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const MultipleWithAllOptionAndDisabledItems = () => ({
+	data() {
+		return {
+			v: null,
+			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 },
+			],
+		};
+	},
+	template: `<div style="width: 400px">
+		<farm-select v-model="v" :items="items" multiple has-all-option />
+		v-model: {{ v }}
+	</div>`,
+});
+
 export const MultipleInitValue = () => ({
 	data() {
 		return {

package/src/components/Select/Select.vue

@@ -1,5 +1,7 @@
 <template>
 	<div
+		v-if="!readonly && !disabled"
+		:id="customId"
 		:class="{
 			'farm-textfield': true,
 			'farm-textfield--validatable': rules.length > 0,
@@ -10,8 +12,6 @@
 			'farm-textfield--focused': isFocus || isVisible,
 			'farm-textfield--hiddendetails': hideDetails,
 		}"
-		v-if="!readonly && !disabled"
-		:id="customId"
 	>
 		<farm-contextmenu
 			bottom
@@ -20,13 +20,34 @@
 			ref="contextmenu"
 		>
 			<farm-list v-if="!readonly" ref="listRef" @keydown="onKeyDown">
+				<farm-listitem
+					v-if="hasAllOption"
+					tabindex="0"
+					clickable
+					hover-color-variation="lighten"
+					:hover-color="hasAllDisabled ? 'neutral' : 'primary'"
+					:class="{
+						'farm-listitem--selected': innerValue === 'all',
+						'farm-listitem--disabled': hasAllDisabled,
+					}"
+					@click="selectAll"
+				>
+					<farm-checkbox
+						v-model="hasAllSelected"
+						class="farm-select__checkbox"
+						value="all"
+						size="sm"
+						:disabled="hasAllDisabled"
+					/>
+					<farm-caption bold tag="span">Todos</farm-caption>
+				</farm-listitem>
 				<farm-listitem
 					v-for="(item, index) in items"
 					tabindex="0"
 					clickable
 					hover-color-variation="lighten"
-					:hover-color="item.disabled ? 'neutral' : 'primary'"
 					:key="'contextmenu_item_' + index"
+					:hover-color="item.disabled ? 'neutral' : 'primary'"
 					:class="{
 						'farm-listitem--selected': item[itemValue] === innerValue,
 						'farm-listitem--disabled': item.disabled,
@@ -34,20 +55,20 @@
 					@click="selectItem(item)"
 				>
 					<farm-checkbox
-						class="farm-select__checkbox"
+						v-if="isChecked(item)"
 						v-model="checked"
+						class="farm-select__checkbox"
 						value="1"
 						size="sm"
 						:disabled="item.disabled"
-						v-if="isChecked(item)"
 					/>
 					<farm-checkbox
-						class="farm-select__checkbox"
+						v-else-if="multiple"
 						v-model="checked"
+						class="farm-select__checkbox"
 						value="2"
 						size="sm"
 						:disabled="item.disabled"
-						v-else-if="multiple"
 					/>
 					<farm-caption bold tag="span">{{ item[itemText] }}</farm-caption>
 				</farm-listitem>
@@ -55,7 +76,7 @@
 					{{ noDataText }}
 				</farm-listitem>
 			</farm-list>
-			<template v-slot:activator="{}">
+			<template #activator="{}">
 				<div
 					class="farm-textfield--input farm-textfield--input--iconed"
 					@keydown="onKeyDown"
@@ -198,6 +219,13 @@ export default defineComponent({
 			type: String,
 			default: '',
 		},
+		/**
+		 * Set "All" as first option to select all other values<br />
+		 */
+		hasAllOption: {
+			type: Boolean,
+			default: false,
+		},
 		/**
 		 * The updated bound model<br />
 		 * _event_
@@ -262,9 +290,32 @@ export default defineComponent({
 		let fieldValidator = validateFormFieldBuilder(rules.value);
 		let validate = validateFormMethodBuilder(errorBucket, valid, fieldValidator);
 
+		const enabledItems = computed(() => items.value.filter(item => !item.disabled));
+		const disabledItems = computed(() => items.value.filter(item => item.disabled));
 		const hasError = computed(() => {
 			return errorBucket.value.length > 0;
 		});
+		const hasAllSelected = computed({
+			get() {
+				if (
+					!multiple.value ||
+					!Array.isArray(items.value) ||
+					!Array.isArray(innerValue.value)
+				) {
+					return false;
+				}
+
+				if (innerValue.value.length === enabledItems.value.length) {
+					return 'all';
+				}
+
+				return false;
+			},
+			set() {
+				emit('input', innerValue.value);
+			},
+		});
+		const hasAllDisabled = computed(() => items.value.length == disabledItems.value.length);
 
 		const customId = 'farm-select-' + (props.id || randomId(2));
 
@@ -282,6 +333,7 @@ export default defineComponent({
 				) {
 					multipleValues.value = [];
 				}
+
 				if (Array.isArray(newValue) && newValue.length > 0) {
 					multipleValues.value = [...newValue];
 				}
@@ -386,6 +438,21 @@ export default defineComponent({
 				emit('change', innerValue.value);
 			}, 100);
 		};
+		const selectAll = () => {
+			if (hasAllDisabled.value) {
+				return;
+			}
+
+			if (multipleValues.value.length === enabledItems.value.length) {
+				multipleValues.value = [];
+			} else {
+				multipleValues.value = enabledItems.value.map(item => item[itemValue.value]);
+			}
+
+			checked.value = '1';
+			innerValue.value = [...multipleValues.value];
+			validate(innerValue.value);
+		};
 
 		const clickInput = () => {
 			isTouched.value = true;
@@ -474,6 +541,8 @@ export default defineComponent({
 			valid,
 			validatable,
 			hasError,
+			hasAllSelected,
+			hasAllDisabled,
 			isTouched,
 			isBlured,
 			isFocus,
@@ -485,6 +554,7 @@ export default defineComponent({
 			validate,
 			reset,
 			selectItem,
+			selectAll,
 			onBlur,
 			onFocus,
 			clickInput,

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

@@ -1,17 +1,16 @@
 import { shallowMount } from '@vue/test-utils';
 import Select from '../Select';
 
-/* jest.spyOn(global, 'setTimeout').mockImplementation(fn => {
-	fn();
-	return setTimeout(() => 1, 0);
-}); */
-
 describe('Select component', () => {
 	let wrapper;
 	let component;
 
 	beforeEach(() => {
-		wrapper = shallowMount(Select);
+		wrapper = shallowMount(Select, {
+			propsData: {
+				id: 'my-custom-id',
+			},
+		});
 		component = wrapper.vm;
 	});
 
@@ -145,21 +144,15 @@ describe('Select component', () => {
 
 				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);
+				expect(component.innerValue).toBe(2);
+
 				component.selectItem(items[0]);
-				setTimeout(() => {
-					expect(component.innerValue).toBe(2);
-					expect(component.selectedText).toBe('value 2');
-				}, 150);
+				expect(component.innerValue).toBe(2);
+
 				component.selectItem(items[3]);
-				setTimeout(() => {
-					expect(component.innerValue).toBe(3);
-					expect(component.selectedText).toBe('value 3');
-				}, 150);
+				expect(component.innerValue).toBe(3);
 			});
 			it('should not select a disabled item if is multiple', async () => {
 				const items = [
@@ -177,16 +170,67 @@ describe('Select component', () => {
 
 				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);
+				expect(component.innerValue).toEqual([0, 2]);
+
 				component.selectItem(items[1]);
-				setTimeout(() => {
-					expect(component.innerValue).toEqual([0, 2]);
-					expect(component.selectedText).toBe('value 0 (+1 outro)');
-				}, 150);
+				expect(component.innerValue).toEqual([0, 2]);
+
+				component.selectItem(items[0]);
+				expect(component.innerValue).toEqual([2]);
+
+				component.selectItem(items[0]);
+				expect(component.innerValue).toEqual([2, 0]);
+			});
+		});
+
+		describe('multiple with all option', () => {
+			it('should check all options', async () => {
+				const items = [
+					{ value: 0, text: 'value 0' },
+					{ value: 1, text: 'value 1' },
+					{ value: 2, text: 'value 2' },
+					{ value: 3, text: 'value 3' },
+				];
+
+				await wrapper.setProps({
+					items,
+					value: null,
+					multiple: true,
+				});
+
+				expect(component.hasAllSelected).toBe(false);
+				expect(component.multipleValues).toEqual([]);
+
+				component.selectAll();
+
+				expect(component.hasAllSelected).toBe('all');
+				expect(component.multipleValues).toEqual(items.map(item => item.value));
+			});
+			it('should check all options but disabled', 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({
+					items,
+					value: null,
+					multiple: true,
+				});
+
+				expect(component.hasAllSelected).toBe(false);
+				expect(component.multipleValues).toEqual([]);
+
+				component.selectAll();
+
+				expect(component.hasAllSelected).toBe('all');
+				expect(component.multipleValues).toEqual(
+					items.filter(item => !item.disabled).map(item => item.value)
+				);
 			});
 		});