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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components-vue3",
-	"version": "0.3.1",
+	"version": "0.3.3",
 	"private": false,
 	"repository": {
 		"type": "git",
@@ -93,4 +93,4 @@
 	"publishConfig": {
 		"@farm-investimentos:registry": "https://registry.npmjs.org"
 	}
-}
+}

package/src/components/ContextMenu/ContextMenu.vue

@@ -1,6 +1,12 @@
 <template>
-	<div class="farm-contextmenu" ref="parent">
-		<span ref="activator" @click="click">
+	<div
+		class="farm-contextmenu"
+		ref="parent"
+	>
+		<span
+			ref="activator"
+			@click="click"
+		>
 			<slot name="activator"></slot>
 		</span>
 
@@ -78,7 +84,7 @@ export default {
 			minWidth: 0,
 			top: 0,
 			zIndex: 1,
-			maxHeight: parseInt((maxHeight as any).modelValue as string) + 'px',
+			maxHeight: parseInt(maxHeight.value as any) + 'px',
 		} as any);
 
 		const inputValue = ref(props.modelValue);

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

@@ -14,6 +14,23 @@ export const Primary = () => ({
 				{ value: 1, text: 'value 1' },
 				{ value: 2, text: 'value 2' },
 				{ value: 3, text: 'value 3' },
+				{ value: 4, text: 'value 4' },
+				{ value: 5, text: 'value 5' },
+				{ value: 6, text: 'value 6' },
+				{ value: 7, text: 'value 7' },
+				{ value: 8, text: 'value 8' },
+				{ value: 9, text: 'value 9' },
+				{ value: 10, text: 'value 10' },
+				{ value: 11, text: 'value 11' },
+				{ value: 12, text: 'value 12' },
+				{ value: 13, text: 'value 13' },
+				{ value: 14, text: 'value 14' },
+				{ value: 15, text: 'value 15' },
+				{ value: 16, text: 'value 16' },
+				{ value: 17, text: 'value 17' },
+				{ value: 18, text: 'value 18' },
+				{ value: 19, text: 'value 19' },
+				{ value: 20, text: 'value 20' },
 			],
 		};
 	},

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}