@farm-investimentos/front-mfe-components 15.4.5 → 15.4.7

package/package.json

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

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

@@ -46,6 +46,18 @@ export const InitialValue = () => ({
 	</div>`,
 });
 
+export const readOnly = () => ({
+	data() {
+		return {
+			date: ['2023-08-01', '2023-08-05'],
+		};
+	},
+	template: `<div style='max-width: 320px'>
+		<RangeDatePicker readonly inputId="input-custom-id" :value="date" />
+		date: {{ date }}
+	</div>`,
+});
+
 export const MinMax = () => ({
 	template: `<RangeDatePicker inputId="input-custom-id" min="2022-01-17" max="2022-02-15" />`,
 });

package/src/components/RangeDatePicker/RangeDatePicker.vue

@@ -40,13 +40,16 @@
 				Confirmar <farm-icon>check</farm-icon>
 			</farm-btn>
 		</v-date-picker>
-		<template v-slot:activator="{}">
+		<template v-slot:activator>
 			<farm-textfield-v2
 				v-model="fieldRange"
 				icon="calendar"
-				readonly
+				ref="inputCalendar"
+				:readonly="readonly"
 				:id="inputId"
-				:rules="required ? [requiredRule] : []"
+				:mask="`${readonly ? [''] : ['##/##/####' + ' a ' + '##/##/####']}`"
+				:rules="[checkDateValid, checkRequire]"
+				@keyup="keyUpInput"
 			/>
 		</template>
 	</farm-contextmenu>
@@ -54,7 +57,11 @@
 <script>
 import { defineComponent } from 'vue';
 import { VDatePicker } from 'vuetify/lib/components/VDatePicker';
-import { defaultFormat as dateDefaultFormatter } from '../../helpers/date';
+import {
+	defaultFormat as dateDefaultFormatter,
+	convertDate,
+	checkDateValid,
+} from '../../helpers/date';
 import { formatDatePickerHeader } from '../../helpers';
 
 /**
@@ -101,6 +108,13 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Readonly field
+		 */
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		const s = this.formatDateRange(this.value);
@@ -108,8 +122,16 @@ export default defineComponent({
 			menuField: false,
 			dateField: this.value || [],
 			fieldRange: s,
-			requiredRule: value => {
-				return !!value || value != '' || 'Campo obrigatório';
+			checkRequire: value => {
+				return this.required ? !!value || value != '' || 'Campo obrigatório' : true;
+			},
+			checkDateValid: value => {
+				if (value.length) {
+					const checkPartOne = checkDateValid(value.slice(0, 10));
+					const checkPartTwo = checkDateValid(value.slice(13));
+					return checkPartOne && checkPartTwo ? true : 'Data inválida';
+				}
+				return true;
 			},
 		};
 	},
@@ -136,6 +158,11 @@ export default defineComponent({
 			return dateDefaultFormatter(dateStart) + ' a ' + dateDefaultFormatter(dateEnd);
 		},
 		save() {
+			if (this.readonly) {
+				this.menuField = false;
+				this.closeDatepicker();
+				return;
+			}
 			this.formatDateRange(this.dateField);
 			this.inputVal = this.dateField;
 			this.menuField = false;
@@ -144,6 +171,7 @@ export default defineComponent({
 		clear() {
 			this.dateField = [];
 			this.save();
+			this.$refs.inputCalendar.reset();
 		},
 		openDatepicker() {
 			this.menuField = true;
@@ -153,7 +181,7 @@ export default defineComponent({
 			this.$refs.contextmenu.inputValue = false;
 		},
 		sortDates(dates) {
-			if(dates?.length !== 2) {
+			if (dates?.length !== 2) {
 				return dates;
 			}
 			const firstDate = new Date(dates[0]);
@@ -165,6 +193,24 @@ export default defineComponent({
 
 			return [dates[1], dates[0]];
 		},
+		validation(date) {
+			const pattern =
+				/^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[13-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/gm;
+			return pattern.test(date);
+		},
+		keyUpInput(event) {
+			let newValue = event.target.value;
+			if (newValue.length === 23) {
+				const partOne = newValue.slice(0, 10);
+				const partTwo = newValue.slice(13);
+				if (this.validation(partOne) && this.validation(partTwo)) {
+					const partOneDate = convertDate(partOne);
+					const partTwoDate = convertDate(partTwo);
+					this.dateField = [partOneDate, partTwoDate];
+					this.save();
+				}
+			}
+		},
 		formatDatePickerHeader,
 	},
 	computed: {

package/src/components/TextArea/TextArea.scss

@@ -36,7 +36,14 @@
 	}
 
 	&--disabled {
+		.farm-textarea--textarea {
+			background-color: var(--farm-neutral-lighten);
+			border-color: var(--farm-gray-lighten);
+			color: var(--farm-bw-black-30);
+		}
 		textarea {
+			background-color: var(--farm-neutral-lighten);
+			border-color: var(--farm-gray-lighten);
 			color: var(--farm-bw-black-30);
 		}
 	}

package/src/components/TextFieldV2/TextFieldV2.scss

@@ -44,9 +44,18 @@
 	}
 
 	&--disabled {
+		.farm-textfield--input {
+			background-color: var(--farm-neutral-lighten);
+			border-color: var(--farm-gray-lighten);
+			color: var(--farm-bw-black-30);
+		}
+
 		input {
+			background-color: var(--farm-neutral-lighten);
+			border-color: var(--farm-gray-lighten);
 			color: var(--farm-bw-black-30);
 		}
+
 		.farm-icon {
 			color: var(--farm-bw-black-30);
 			cursor: default;
@@ -62,7 +71,6 @@
 	}
 }
 
-
 .farm-textfield--touched.farm-textfield--blured.farm-textfield--validatable {
 	&.farm-textfield--error {
 		.farm-textfield {