@farm-investimentos/front-mfe-components 15.4.8 → 15.5.1

package/package.json

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

package/src/components/Collapsible/Collapsible.stories.js

@@ -150,6 +150,22 @@ export const Dense = () => ({
 		'<farm-collapsible icon="plus" title="With Icon" textChip="chip" dense showChip>collapsible content</farm-collapsible>',
 });
 
+export const Custom = () => ({
+	template: `
+		<farm-collapsible custom>
+		<template #custom>
+			<farm-btn
+				v-bind="attrs"
+				v-on="on"
+			>
+				custom
+			</farm-btn>
+		</template>
+		collapsible content		
+		</farm-collapsible>
+		`,
+});
+
 Primary.storyName = 'Basic';
 Title.storyName = 'Title';
 Icon.storyName = 'Icon';

package/src/components/Collapsible/Collapsible.vue

@@ -3,23 +3,24 @@
 		<farm-card-content gutter="md">
 			<div class="collapsible__header" @click="onToggleCollapsible(status)">
 				<div class="collapsible__content-title">
-					<div class="collapsible__icon collapsible__icon--main" v-if="icon !== ''">
+					<div class="collapsible__icon collapsible__icon--main" v-if="icon !== '' && !custom">
 						<farm-icon size="md" :color="colorIcon">
 							{{ icon }}
 						</farm-icon>
 					</div>
-					<farm-heading type="6" color="black">
+					<farm-heading type="6" color="black" v-if="!custom">
 						{{ title }}
 					</farm-heading>
 					<farm-btn
 						outlined
 						class="ml-6"
-						v-if="hasButton"
+						v-if="hasButton && !custom"
 						:disabled="disabledButton"
 						@click.stop="onClick()"
 					>
 						{{ labelButton }}
 					</farm-btn>
+					<slot name="custom" v-if="custom"></slot>
 				</div>
 				<div class="collapsible__content-right">
 					<div class="collapsible__icon" v-if="showChip">
@@ -175,6 +176,10 @@ export default defineComponent({
 			type: String,
 			default: 'base',
 		},
+		custom: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data() {

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

@@ -129,4 +129,21 @@ export const CenterPositioned = () => ({
         <farm-input-datepicker inputId="input-custom-id-0" v-model="date" position="center" />
 		{{ date }}
     </div>`,
+});
+
+export const MultipleDates = () => ({
+	data() {
+		return {
+			date: [],
+		};
+	},
+	computed: {
+		dates() {
+			return this.date.join('  ///  ');
+		}
+	},
+	template: `<div style='max-width: 320px'>
+        <farm-input-datepicker inputId="input-custom-id-0" v-model="date" multiple />
+		{{ dates }}
+    </div>`,
 });

package/src/components/DatePicker/DatePicker.vue

@@ -21,6 +21,7 @@
 			:min="min"
 			:allowed-dates="allowedDates"
 			:picker-date.sync="internalPickerDate"
+			:multiple="multiple"
 		>
 			<farm-btn plain title="Limpar" color="primary" :disabled="isDisabled" @click="clear">
 				Limpar
@@ -44,10 +45,11 @@
 				v-model="fieldRange"
 				autocomplete="off"
 				ref="inputCalendar"
-				:readonly="readonly"
-				:mask="`${readonly ? '' : '##/##/####'}`"
+				:ellipsed="multiple"
+				:readonly="isReadonly"
+				:mask="`${isReadonly ? '' : '##/##/####'}`"
 				:id="inputId"
-				:rules="[checkDateValid, checkMax, checkMin, checkRequire, checkIsInAllowedDates]"
+				:rules="rules"
 				@keyup="keyUpInput"
 			/>
 		</template>
@@ -82,7 +84,7 @@ export default defineComponent({
 		 * v-model bind
 		 */
 		value: {
-			type: String,
+			type: [String, Array],
 			default: '',
 		},
 		/**
@@ -131,6 +133,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		multiple: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		const s = this.formatDateRange(this.value);
@@ -147,7 +153,9 @@ export default defineComponent({
 				return true;
 			},
 			checkRequire: value => {
-				return this.required ? !!value || value != '' || 'Campo obrigatório' : true;
+				return this.required
+					? !!value || value.length > 0 || value != '' || 'Campo obrigatório'
+					: true;
 			},
 			checkMax: value => {
 				if (!this.required && value.length === 0) {
@@ -189,14 +197,24 @@ export default defineComponent({
 		},
 		fieldRange(newValue) {
 			if (!newValue) {
-				this.dateField = '';
+				this.dateField = this.multiple ? [] : '';
 				this.save();
 			}
 		},
 	},
 	methods: {
-		formatDateRange(date) {
+		formatDateRange(date: string | string[]) {
 			if (!date || date.length === 0) return '';
+
+			if (this.multiple) {
+				let dateString = [...date]
+					.sort((a, b) => +new Date(a) - +new Date(b))
+					.map(dateDefaultFormatter)
+					.join(', ');
+
+				return dateString;
+			}
+
 			return dateDefaultFormatter(date);
 		},
 		save() {
@@ -206,7 +224,7 @@ export default defineComponent({
 			this.closeDatepicker();
 		},
 		clear() {
-			this.dateField = '';
+			this.dateField = this.multiple ? [] : '';
 			this.save();
 			this.$refs.inputCalendar.reset();
 		},
@@ -217,9 +235,12 @@ export default defineComponent({
 		},
 		keyUpInput(event) {
 			let newValue = event.target.value;
+
 			if (this.validation(newValue) && newValue.length === 10) {
 				const [day, month, year] = newValue.split('/');
-				this.dateField = `${year}-${month}-${day}`;
+				const formattedDate = `${year}-${month}-${day}`;
+
+				this.dateField = this.multiple ? [formattedDate] : formattedDate;
 				this.save();
 			}
 		},
@@ -259,6 +280,28 @@ export default defineComponent({
 			}
 			return true;
 		},
+		rules() {
+			const allRules = [
+				this.checkDateValid,
+				this.checkMax,
+				this.checkMin,
+				this.checkRequire,
+				this.checkIsInAllowedDates,
+			];
+
+			if (this.multiple) {
+				if (!this.inputVal.length && this.required) {
+					return allRules.map(rule => rule.call(this, ''));
+				}
+
+				return this.inputVal.flatMap(date => allRules.map(rule => rule.call(this, date)));
+			}
+
+			return allRules;
+		},
+		isReadonly() {
+			return this.readonly || this.multiple;
+		},
 	},
 });
 </script>

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

@@ -4,6 +4,7 @@ import DatePicker from '../DatePicker';
 describe('DatePicker component', () => {
 	let wrapper;
 	let component;
+	const ALL_RULES_LENGTH = 5;
 
 	beforeEach(() => {
 		wrapper = shallowMount(DatePicker, {
@@ -84,12 +85,48 @@ describe('DatePicker component', () => {
 		});
 
 		it('should allow only dates in year 2077', async () => {
+			const YEAR_TO_TEST = 2077;
+
 			await wrapper.setProps({
-				allowedDates: (value) => new Date(value).getFullYear() === 2077
+				allowedDates: (value) => new Date(value).getFullYear() === YEAR_TO_TEST
 			});
-			expect(component.checkIsInAllowedDates('2077-05-03')).toBe(true);
+			expect(component.checkIsInAllowedDates(`${YEAR_TO_TEST}-05-03`)).toBe(true);
 			expect(component.checkIsInAllowedDates('2023-05-03')).toBe('Data inválida');
 		});
+
+		it('should be readonly if is multiple', async () => {
+			await wrapper.setProps({
+				multiple: true
+			});
+			expect(component.isReadonly).toBe(true);
+		});
+
+		it('should have 5 rules if is not multiple', async () => {
+			await wrapper.setProps({
+				value: ''
+			});
+			expect(component.rules.length).toBe(ALL_RULES_LENGTH);
+		});
+
+		it('should have 5 rules if is multiple picker, is required and no value is selected', async () => {
+			await wrapper.setProps({
+				multiple: true,
+				required: true,
+				value: []
+			});
+			expect(component.rules.length).toBe(ALL_RULES_LENGTH);
+		});
+
+		it('should have 10 rules if is multiple picker, is required and 2 dates are selected', async () => {
+			const value = ['2023-05-10', '2032-05-12'];
+
+			await wrapper.setProps({
+				multiple: true,
+				required: true,
+				value
+			});
+			expect(component.rules.length).toBe(value.length * ALL_RULES_LENGTH);
+		});
 	});
 
 	describe('methods', () => {
@@ -102,5 +139,21 @@ describe('DatePicker component', () => {
 			component.closeDatepicker();
 			expect(component.menuField).toBeFalsy();
 		});
+
+		it('should use formatDateRange to format a date', async () => {
+			const value = '2023-10-10';
+
+			expect(component.formatDateRange(value)).toBe('10/10/2023');
+		});
+
+		it('should use formatDateRange to format multiple dates', async () => {
+			const value = ['2023-10-10', '2023-10-15'];
+
+			await wrapper.setProps({
+				multiple: true,
+			});
+
+			expect(component.formatDateRange(value)).toBe('10/10/2023, 15/10/2023');
+		});
 	});
 });

package/src/components/TextFieldV2/TextFieldV2.scss

@@ -3,6 +3,12 @@
 .farm-textfield {
 	height: 64px;
 
+	&--ellipsed {
+		input {
+			text-overflow: ellipsis;
+		}
+	}
+
 	&--hiddendetails {
 		height: 40px;
 	}

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -11,6 +11,7 @@
 			'farm-textfield--disabled': disabled,
 			'farm-textfield--hiddendetails': hideDetails,
 			'farm-textfield--uppercase': isUppercase,
+			'farm-textfield--ellipsed': ellipsed,
 		}"
 		:id="customId"
 	>
@@ -168,6 +169,13 @@ export default defineComponent({
 			// eslint-disable-next-line
 			default: (event: Event) => {},
 		},
+		/**
+		 * Used for hide too much content inside input
+		 */
+		ellipsed: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props, { emit }) {
 		const { rules } = toRefs(props);

package/src/helpers/date.js

@@ -2,7 +2,7 @@ export const defaultFormat = (data, UTCTimeZone = true) => {
 	const options = {
 		timeZone: 'UTC',
 	};
-	return data ? new Date(data).toLocaleDateString('pt-BR', UTCTimeZone ? options : {}) : null;
+	return data ? new Date(`${data} 00:00`).toLocaleDateString('pt-BR', UTCTimeZone ? options : {}) : null;
 };
 
 export const convertDate = (data) => {