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

package/package.json

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

package/src/components/ChipInviteStatus/ChipInviteStatus.scss

@@ -23,4 +23,9 @@
 		border: 2px solid var(--v-success-base) !important;
 		background-color: white !important;
 	}
+	&.status-chip.status-chip-on-wait {
+		color: white !important;
+		border: 2px solid #467d7e !important;
+		background-color: #467d7e !important;
+	}
 }

package/src/components/ChipInviteStatus/ChipInviteStatus.stories.js

@@ -15,6 +15,7 @@ export const Primary = () => ({
         <ChipInviteStatus :status="14" />
         <ChipInviteStatus :status="15" />
         <ChipInviteStatus :status="16" />
+        <ChipInviteStatus :status="17" />
     </div>`,
 });
 

package/src/components/ChipInviteStatus/ChipInviteStatus.vue

@@ -22,6 +22,7 @@ const StatusLabel = {
 	14: 'FALHA/ERRO',
 	15: 'EM ANÁLISE',
 	16: 'EM ANDAMENTO',
+	17: 'EM ESPERA',
 };
 
 const StatusColor = {
@@ -32,6 +33,7 @@ const StatusColor = {
 	14: 'error',
 	15: 'accent',
 	16: 'primary',
+	17: 'on-wait',
 };
 
 import VChip from 'vuetify/lib/components/VChip/';
@@ -59,7 +61,9 @@ export default Vue.extend({
 	},
 	computed: {
 		textColor() {
-			return this.status === 10 || this.status === 16 ? '' : StatusColor[this.status];
+			return this.status === 10 || this.status === 16 || this.status === 17
+				? ''
+				: StatusColor[this.status];
 		},
 		color() {
 			return !this.status ? '' : StatusColor[this.status];

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

@@ -3,7 +3,6 @@
 		ref="menuField"
 		v-model="menuField"
 		:close-on-content-click="false"
-		:nudge-right="40"
 		:return-value.sync="fieldRange"
 		transition="scale-transition"
 		offset-y
@@ -13,13 +12,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 +56,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 +98,10 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		const s = this.formatDateRange(this.value);
@@ -103,9 +109,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 +139,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;
+}