@farm-investimentos/front-mfe-components 3.4.13 → 3.5.0

package/package.json

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

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

@@ -37,13 +37,20 @@ export const MinMaxDates = () => ({
 
 export const RequiredDates = () => ({
 	components: { DatePicker },
-
 	template: `<div style='max-width: 320px'>
         <DatePicker inputId="input-custom-id-3" :required="true" />
     </div>`,
 });
 
+export const readonlyFalse = () => ({
+	components: { DatePicker },
+	template: `<div style='max-width: 320px'>
+        <DatePicker :readonly="false" inputId="input-custom-id-3"/>
+    </div>`,
+});
+
 Primary.storyName = 'Básico';
 InitValue.storyName = 'Data inicial';
 MinMaxDates.storyName = 'Data mínima e máxima';
 RequiredDates.storyName = 'Obrigatório';
+readonlyFalse.storyName = 'Permitir digitação';

package/src/components/DatePicker/DatePicker.vue

@@ -13,13 +13,16 @@
 			<v-text-field
 				color="secondary"
 				append-icon="mdi-calendar"
-				readonly
+				v-mask="`${readonly ? '' : '##/##/####'}`"
+				@keyup="keyUpInput"
+				:readonly="readonly"
+				autocomplete="off"
 				outlined
 				dense
 				v-on="on"
 				v-model="fieldRange"
 				:id="inputId"
-				:rules="required ? [requiredRule] : []"
+				:rules="[checkMax, checkMin, checkRequire]"
 			>
 			</v-text-field>
 		</template>
@@ -54,7 +57,7 @@ import { VTextField } from 'vuetify/lib/components/VTextField';
 import { VMenu } from 'vuetify/lib/components/VMenu';
 import { VBtn } from 'vuetify/lib/components/VBtn';
 import { VDatePicker } from 'vuetify/lib/components/VDatePicker';
-import { defaultFormat as dateDefaultFormatter } from '../../helpers/date';
+import { defaultFormat as dateDefaultFormatter, convertDate } from '../../helpers/date';
 /**
  * Componente de input com datepicker para data
  */
@@ -96,6 +99,10 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		readonly: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	data() {
 		const s = this.formatDateRange(this.value);
@@ -103,9 +110,15 @@ export default Vue.extend({
 			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;
+			},
+			checkMax: value => {
+				return this.max && new Date(convertDate(value)) > new Date(this.max) ? 'A data está fora do período permitido' : true;
 			},
+			checkMin: value => {
+				return this.min && new Date(convertDate(value)) < new Date(this.min) ? 'A data está fora do período permitido' : true;
+			}
 		};
 	},
 	watch: {
@@ -127,6 +140,18 @@ export default Vue.extend({
 			this.dateField = '';
 			this.save();
 		},
+		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(this.validation(newValue) && newValue.length === 10) {
+				const [day, month, year] = newValue.split('/');
+				this.dateField = `${year}-${month}-${day}`;
+				this.save();
+			}
+		},
 	},
 	computed: {
 		inputVal: {

package/src/helpers/date.js

@@ -4,3 +4,8 @@ export const defaultFormat = (data, UTCTimeZone = true) => {
 	};
 	return data ? new Date(data).toLocaleDateString('pt-BR', UTCTimeZone ? options : {}) : null;
 };
+
+export const convertDate = (data) => {
+	let newdate = data.split("/").reverse().join("-");
+	return newdate;
+}