@farm-investimentos/front-mfe-components-vue3 0.2.1 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components-vue3",
-	"version": "0.2.1",
+	"version": "0.3.2",
 	"private": false,
 	"repository": {
 		"type": "git",

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/DialogFooter/DialogFooter.scss

@@ -10,7 +10,7 @@
 }
 
 .farm-btn {
-    margin-left: gutter('sm');
+    margin-left: gutter('none');
     margin-top: 0;
 
     .farm-icon {

package/src/components/Modal/Modal.stories.js

@@ -1,5 +1,7 @@
 import { computed } from 'vue';
+
 import { useModal } from '@farm-investimentos/front-mfe-libs-ts';
+
 import Modal from './Modal.vue';
 
 export default {

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/examples/Dialog.stories.js

@@ -126,4 +126,40 @@ export const CustomHtml = () => ({
             Open
         </farm-btn>
 	</div>`,
-});
+});
+
+export const OpenTwice = () => ({
+	methods: {
+		openDialog() {
+			this.$dialog.confirm(
+				{
+					title: 'Dialog title',
+					body: 'Dialog content',
+				},
+				{
+					html: true,
+					okText: 'OK',
+					cancelText: 'Cancel',
+				}
+			).finally( () => {});
+
+			setTimeout(() => {
+				this.$dialog.alert(
+					{
+						title: 'Dialog title',
+						body: 'Dialog content',
+					},
+					{
+						html: true,
+						okText: 'Cancel',
+					}
+				).finally( () => {});
+			}, 2000);
+		},
+	},
+	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">
+        <farm-btn @click="openDialog">
+            Open
+        </farm-btn>
+	</div>`,
+});

package/src/plugins/DialogPrompt/index.ts

@@ -1,6 +1,7 @@
-import calculateMainZindex from '../../helpers/calculateMainZindex';
 import { bootstrap, modalFooter, modalHeader } from './utils';
 
+import calculateMainZindex from '../../helpers/calculateMainZindex';
+
 export interface IDialogPromptOptions {
 	title: string;
 	body: string;

package/src/plugins/DialogPrompt/utils/bootstrap.ts

@@ -1,9 +1,17 @@
 const DIALOG_ID = 'farm-dialog-prompt-identifier';
+const OVERLAY_CLASS = 'farm-modal--overlay';
+const CONTAINER_CLASS = 'farm-modal--container';
 
 export default function (): { container: HTMLElement; backdrop: HTMLElement; modal: HTMLElement } {
 	let container;
 	if (document.getElementById(DIALOG_ID)) {
 		container = document.getElementById(DIALOG_ID);
+		if(document.getElementsByClassName(OVERLAY_CLASS).length > 0) {
+			container.removeChild(document.getElementsByClassName(OVERLAY_CLASS)[0]);
+		}
+		if(document.getElementsByClassName(CONTAINER_CLASS).length > 0) {
+			container.removeChild(document.getElementsByClassName(CONTAINER_CLASS)[0]);
+		}
 	} else {
 		container = document.createElement('div');
 		container.className = 'farm-modal';
@@ -11,10 +19,10 @@ export default function (): { container: HTMLElement; backdrop: HTMLElement; mod
 	}
 
 	const backdrop = document.createElement('div');
-	backdrop.className = 'farm-modal--overlay';
+	backdrop.className = OVERLAY_CLASS;
 
 	const modal = document.createElement('div');
-	modal.className = 'farm-modal--container';
+	modal.className = CONTAINER_CLASS;
 
 	modal.style.width = '98%';
 	modal.style.maxWidth = '400px';

package/src/stories/Introduction.stories.mdx

@@ -113,6 +113,6 @@ import imageFile from './assets/logo_farmtech.svg';
 
 <img src={imageFile} />
 
-Here you can find the components from the Farmtech's Design System on the top of Vue 2. 
+Here you can find the components from the Farmtech's Design System on the top of Vue 3. 
 
 Currrent version: {VERSION}