@farm-investimentos/front-mfe-components 15.10.0 → 15.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "15.10.0",
+	"version": "15.10.2",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",
@@ -73,5 +73,8 @@
 	},
 	"engines": {
 		"node": ">=14.0.0 <15.0.0"
+	},
+	"volta": {
+		"node": "14.21.3"
 	}
 }

package/src/components/Icon/icons_list.ts

@@ -61,7 +61,6 @@ export default [
 	'alpha',
 	'alphabetical',
 	'altimeter',
-
 	'ambulance',
 	'amplifier',
 	'anchor',
@@ -182,6 +181,7 @@ export default [
 	'arrow-up-drop-circle-outline',
 	'arrow-up-thick',
 	'artist',
+	'assessment',
 	'assistant',
 	'asterisk',
 	'at',
@@ -1954,6 +1954,7 @@ export default [
 	'rowing',
 	'rss',
 	'rss-box',
+	'rule',
 	'ruler',
 	'run',
 	'run-fast',

package/src/components/IdCaption/IdCaption.scss

@@ -14,7 +14,6 @@
 	}
 
 	&__body {
-
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
@@ -26,7 +25,6 @@
 		}
 
 		.farm-typography {
-
 			margin-bottom: 0;
 			display: flex;
 			flex: none;
@@ -34,7 +32,7 @@
 			align-items: center;
 			height: 18px;
 
-			>span {
+			> span {
 				max-width: 100%;
 				@include ellipsis;
 			}
@@ -48,4 +46,10 @@
 	&.farm-idcaption--noheight {
 		min-height: auto;
 	}
-}
+
+	.farm-idcaption--hide-copy-btn {
+		.farm-tooltip:has(.mdi-content-copy) {
+			display: none;
+		}
+	}
+}

package/src/components/IdCaption/IdCaption.stories.js

@@ -23,11 +23,11 @@ export default {
 };
 
 export const Primary = () => ({
-    methods: {
-        onLinkClick() {
-            alert('onLinkClick');
-        }
-    },
+	methods: {
+		onLinkClick() {
+			alert('onLinkClick');
+		},
+	},
 	template: `
     <farm-idcaption 
     icon="account-box-outline"
@@ -62,6 +62,24 @@ export const Linkless = () => ({
     `,
 });
 
+export const CopyBtnHidden = () => ({
+	template: `
+    <farm-idcaption 
+    icon="account-box-outline"
+    copyText="texto a copiar"
+    hide-copy-btn
+    >
+        <template v-slot:title>
+            Upper Line Text
+        </template>
+        <template v-slot:subtitle>
+            Lower:Line Text
+        </template>
+    </farm-idcaption>
+    
+    `,
+});
+
 export const Iconless = () => ({
 	template: `
     <farm-idcaption 
@@ -221,4 +239,4 @@ export const NoHeight = () => ({
         </template>
     </farm-idcaption>
     </farm-col>`,
-});
+});

package/src/components/IdCaption/IdCaption.vue

@@ -41,7 +41,7 @@
 					<slot name="subtitle"></slot>
 				</span>
 				<farm-copytoclipboard
-					v-if="copyText"
+					v-if="copyText && !hideCopyBtn"
 					sizeIcon="16px"
 					:toCopy="copyText"
 					:successMessage="successMessage"
@@ -126,6 +126,13 @@ export default defineComponent({
 			type: String,
 			default: 'Conteúdo copiado para a área de trabalho',
 		},
+		/**
+		 * Hides copy button
+		 */
+		hideCopyBtn: {
+			type: Boolean,
+			default: false,
+		},
 		/**
 		 * Tooltip color
 		 */
@@ -154,11 +161,11 @@ export default defineComponent({
 		},
 	},
 
-	setup(_, { slots }) {
+	setup({ hideCopyBtn }, { slots }) {
 		const hasTitle = computed(() => slots.title);
 		const hasSubtitle = computed(() => slots.subtitle);
 
-		return { hasSubtitle, hasTitle };
+		return { hasSubtitle, hasTitle, hideCopyBtn };
 	},
 });
 </script>

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

@@ -69,7 +69,7 @@
 	&--horizontal {
 		flex-direction: column;
 		height: auto;
-		width: 158px;
+		max-width: 230px;
 
 		> div {
 			align-items: center;

package/src/components/RangeDatePicker/RangeDatePicker.stories.js

@@ -93,3 +93,44 @@ export const disabled = () => ({
 		date: {{ date }}
 	</div>`,
 });
+
+export const ValidacaoInputPadrao = () => ({
+	data() {
+		return {
+			date: null,
+		};
+	},
+	template: `<div style='max-width: 320px'>
+		<farm-label>Selecione uma data entre 01/01/2025 e 31/12/2025</farm-label>
+		<RangeDatePicker
+			inputId="input-custom-id"
+			v-model="date"
+			min="2025-01-01"
+			max="2025-12-31"
+			validateInput
+			required
+		/>
+		date: {{ date }}
+	</div>`,
+});
+
+export const ValidacaoInputCustomizada = () => ({
+	data() {
+		return {
+			date: null,
+		};
+	},
+	template: `<div style='max-width: 320px'>
+		<farm-label>Selecione uma data do primeiro semestre de 2025</farm-label>
+		<RangeDatePicker
+			inputId="input-custom-id"
+			v-model="date"
+			min="2025-01-01"
+			max="2025-06-30"
+			validateInput
+			required
+			outOfRangeMessage="Por favor, selecione datas dentro do primeiro semestre de 2025 ({min} até {max})"
+		/>
+		date: {{ date }}
+	</div>`,
+});

package/src/components/RangeDatePicker/RangeDatePicker.vue

@@ -1,4 +1,4 @@
-<template>
+	<template>
 	<farm-contextmenu
 		stay-open
 		v-model="menuField"
@@ -48,7 +48,7 @@
 				:readonly="readonly"
 				:id="inputId"
 				:mask="`${readonly ? [''] : ['##/##/####' + ' a ' + '##/##/####']}`"
-				:rules="[checkDateValid, checkRequire]"
+				:rules="[checkDateValid, checkRequire, ...(validateInput ? [checkMinMax] : [])]"
 				:disabled="disabled"
 				@keyup="keyUpInput"
 			/>
@@ -123,6 +123,20 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Habilita a validação de min/max no input
+		 */
+		validateInput: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Mensagem de erro customizada para data fora do período permitido
+		 */
+		outOfRangeMessage: {
+			type: String,
+			default: 'A data selecionada deve ser entre {min} e {max}',
+		},
 	},
 	data() {
 		const s = this.formatDateRange(this.value);
@@ -141,6 +155,32 @@ export default defineComponent({
 				}
 				return true;
 			},
+			checkMinMax: value => {
+				if (!this.validateInput || !value || value.length === 0) return true;
+				if (!this.min || !this.max) {
+					if (process.env.NODE_ENV === 'development') {
+						console.warn('[RangeDatePicker] Para usar validateInput é necessário definir as props min e max');
+					}
+					return true;
+				}
+
+				const [startDateStr, endDateStr] = value.split(' a ');
+				
+				const startDate = new Date(convertDate(startDateStr));
+				const endDate = new Date(convertDate(endDateStr));
+				const minDate = new Date(this.min);
+				const maxDate = new Date(this.max);
+
+				const isValid = startDate.getTime() >= minDate.getTime() && endDate.getTime() <= maxDate.getTime();
+
+				if (!isValid) {
+					return this.outOfRangeMessage
+						.replace('{min}', dateDefaultFormatter(this.min))
+						.replace('{max}', dateDefaultFormatter(this.max));
+				}
+
+				return true;
+			},
 		};
 	},
 	watch: {

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

@@ -104,4 +104,49 @@ describe('RangeDatePicker component', () => {
 			expect(component.fieldRange).toEqual('27/02/2023 a 28/02/2023');
 		});
 	});
+
+	describe('range validation', () => {
+		beforeEach(async () => {
+			await wrapper.setProps({
+				min: '2023-02-01',
+				max: '2023-02-28',
+				validateInput: true
+			});
+		});
+
+		it('should return true when date range is within min and max', () => {
+			const result = component.checkMinMax('15/02/2023 a 20/02/2023');
+			expect(result).toBe(true);
+		});
+
+		it('should return error message when start date is before min date', () => {
+			const result = component.checkMinMax('31/01/2023 a 15/02/2023');
+			expect(result).toBe('A data selecionada deve ser entre 01/02/2023 e 28/02/2023');
+		});
+
+		it('should return error message when end date is after max date', () => {
+			const result = component.checkMinMax('15/02/2023 a 01/03/2023');
+			expect(result).toBe('A data selecionada deve ser entre 01/02/2023 e 28/02/2023');
+		});
+
+		it('should return true when validateInput is false', async () => {
+			await wrapper.setProps({ validateInput: false });
+			const result = component.checkMinMax('31/01/2023 a 01/03/2023');
+			expect(result).toBe(true);
+		});
+
+		it('should return true when value is empty', () => {
+			const result = component.checkMinMax('');
+			expect(result).toBe(true);
+		});
+
+		it('should return true when min and max are not set', async () => {
+			await wrapper.setProps({
+				min: null,
+				max: null
+			});
+			const result = component.checkMinMax('15/02/2023 a 20/02/2023');
+			expect(result).toBe(true);
+		});
+	});
 });