@farm-investimentos/front-mfe-components-vue3 0.2.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components-vue3",
-	"version": "0.2.0",
+	"version": "0.3.1",
 	"private": false,
 	"repository": {
 		"type": "git",
@@ -62,7 +62,7 @@
 		"@vue/eslint-config-typescript": "^7.0.0",
 		"@vue/test-utils": "^2.3.2",
 		"@vue/tsconfig": "^0.4.0",
-		"@vue/vue3-jest": "^29.2.3",
+		"@vue/vue3-jest": "29.2.6",
 		"babel-eslint": "^10.1.0",
 		"babel-jest": "^29.5.0",
 		"babel-loader": "^8.3.0",
@@ -70,7 +70,7 @@
 		"eslint": "^6.7.2",
 		"eslint-plugin-import": "^2.29.0",
 		"eslint-plugin-vue": "^7.1.0",
-		"jest": "^29.0.0",
+		"jest": "29.7.0",
 		"jest-environment-jsdom": "^29.0.0",
 		"npm-run-all2": "^6.0.6",
 		"react": "^18.2.0",

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

@@ -131,4 +131,16 @@ export const CenterPositioned = () => ({
         <farm-input-datepicker inputId="input-custom-id-0" v-model="date" position="center" />
 		{{ date }}
     </div>`,
+});
+
+export const RequiredMessage = () => ({
+	data() {
+		return {
+			date: '',
+		};
+	},
+	template: `<div style='max-width: 320px'>
+        <farm-input-datepicker inputId="input-custom-id-10" v-model="date" requiredMessage="Preencha a data de forma correta." :required="true" />
+		date: {{ date }}
+    </div>`,
 });

package/src/components/DatePicker/DatePicker.vue

@@ -58,6 +58,7 @@
 				ref="inputCalendar"
 				:readonly="readonly"
 				:mask="`${readonly ? '' : '##/##/####'}`"
+				:requiredMessage="requiredMessage"
 				:id="inputId"
 				:rules="[checkDateValid, checkMax, checkMin, checkRequire]"
 				@keyup="keyUpInput"
@@ -136,6 +137,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		requiredMessage: {
+			type: String,
+			default: 'Campo obrigatório'
+		}
 	},
 	data() {
 		return {
@@ -150,7 +155,7 @@ export default {
 				return true;
 			},
 			checkRequire: value => {
-				return this.required ? !!value || value != '' || 'Campo obrigatório' : true;
+				return this.required ? !!value || value != '' || this.requiredMessage : true;
 			},
 			checkMax: value => {
 				if (!this.required && value.length === 0) {

package/src/components/DatePicker/customDatePicker.scss

@@ -68,6 +68,10 @@
         margin: 0;
     }
 
+    :deep(.dp__overlay_cell_active){
+        background: var(--farm-primary-base);
+    }
+
 }
 
 .picker__actions {

package/src/components/ProgressBar/ProgressBar.scss

@@ -6,8 +6,9 @@ $radius: 5px;
     width: 100%;
     height: 5px;
     border-radius: $radius;
+    overflow: hidden;
 
-    > div {
+    >div {
         border-radius: $radius;
         height: 100%;
     }
@@ -22,4 +23,23 @@ $radius: 5px;
         }
     }
 
+}
+
+.farm-progressbar--infinite {
+    animation: indeterminateAnimation 1s infinite linear;
+    transform-origin: 0% 50%;
+}
+
+@keyframes indeterminateAnimation {
+    0% {
+        transform: translateX(0) scaleX(0);
+    }
+
+    40% {
+        transform: translateX(0) scaleX(0.4);
+    }
+
+    100% {
+        transform: translateX(100%) scaleX(0.5);
+    }
 }

package/src/components/ProgressBar/ProgressBar.stories.js

@@ -47,3 +47,12 @@ export const CustomHexaColors = () => ({
 	},
 	template: '<farm-progressbar :value="val" background-color="#FFFF00" value-color="#00FF00" />',
 });
+
+export const IndeterminateAnimation = () => ({
+	data() {
+		return {
+			val: 35,
+		};
+	},
+	template: '<farm-progressbar indeterminate :value="val" background-color="#FFFF00" value-color="#00FF00" />',
+});

package/src/components/ProgressBar/ProgressBar.vue

@@ -1,6 +1,12 @@
 <template>
-	<div :class="classes" :style="containerStyle">
-		<div :style="valueStyle"></div>
+	<div
+		:class="classes"
+		:style="containerStyle"
+	>
+		<div
+			:class="{ 'farm-progressbar--infinite': indeterminate }"
+			:style="valueStyle"
+		></div>
 	</div>
 </template>
 
@@ -57,10 +63,17 @@ export default {
 			type: Number,
 			required: true,
 		},
+		/**
+		 * Indeterminate
+		 */
+		indeterminate: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	setup(props) {
-		const { backgroundColor, valueColor, value } = toRefs(props);
+		const { backgroundColor, valueColor, value, indeterminate } = toRefs(props);
 
 		const classes = computed(() => {
 			const obj = {};
@@ -80,8 +93,9 @@ export default {
 
 		const valueStyle = computed(() => {
 			const obj = {
-				width: `${value.value}%`,
+				width: indeterminate.value ? '100%' : `${value.value}%`,
 			};
+
 			if (valueColor.value.startsWith('#')) {
 				obj['background-color'] = valueColor.value;
 			}

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -34,6 +34,7 @@
 				:id="$props.id"
 				:disabled="disabled"
 				:readonly="readonly"
+				:type="$attrs.type"
 				@click="$emit('click')"
 				@keyup="onKeyUp"
 				@blur="onBlur"