@farm-investimentos/front-mfe-components 15.14.13 → 15.14.14

package/package.json

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

package/src/components/ContextMenu/ContextMenu.scss

@@ -37,4 +37,4 @@
 		left: 50% !important;
 		transform: translate(-50%, -50%) !important;
 	}
-}
+}

package/src/components/ContextMenu/ContextMenu.vue

@@ -21,6 +21,8 @@
 import { ref, watch, reactive, onBeforeUnmount, toRefs, defineComponent, nextTick } from 'vue';
 import { calculateMainZindex, isChildOfFixedElement } from '../../helpers';
 
+const CLOSE_ALL_CONTEXT_MENUS_EVENT = 'farm-contextmenu:close-all';
+
 export default defineComponent({
 	name: 'farm-contextmenu',
 	props: {
@@ -89,6 +91,7 @@ export default defineComponent({
 		} as any);
 
 		const inputValue = ref(props.value);
+		const instanceContextId = Math.random().toString(36).substring(7);
 
 		let hasBeenBoostrapped = false;
 
@@ -112,6 +115,15 @@ export default defineComponent({
 			calculatePosition();
 		};
 
+		const closeAllHandler = (event: CustomEvent) => {
+			if (event.detail?.exceptId !== instanceContextId && inputValue.value) {
+				inputValue.value = false;
+				emit('input', false);
+			}
+		};
+
+		window.addEventListener(CLOSE_ALL_CONTEXT_MENUS_EVENT, closeAllHandler as any);
+
 		watch(
 			() => props.value,
 			newValue => {
@@ -234,10 +246,20 @@ export default defineComponent({
 				window.removeEventListener('click', outClick);
 				document.querySelector('body').removeChild(popup.value);
 			}
+			window.removeEventListener(CLOSE_ALL_CONTEXT_MENUS_EVENT, closeAllHandler as any);
 		});
 
 		const click = () => {
-			inputValue.value = !inputValue.value;
+			const willOpen = !inputValue.value;
+
+			if (willOpen) {
+				const closeEvent = new CustomEvent(CLOSE_ALL_CONTEXT_MENUS_EVENT, {
+					detail: { exceptId: instanceContextId }
+				});
+				window.dispatchEvent(closeEvent);
+			}
+
+			inputValue.value = willOpen;
 			emit('input', inputValue.value);
 		};
 

package/src/components/TableContextMenu/TableContextMenu.vue

@@ -1,7 +1,8 @@
 <template>
 	<farm-contextmenu
 		:class="{ 'farm-context-menu': true, 'farm-context-menu--disabled': disabled }"
-		v-model="value"
+		:value="value"
+		@input="value = $event"
 	>
 		<template v-slot:activator>
 			<farm-btn
@@ -9,7 +10,6 @@
 				title="Ver opções"
 				color="secondary-green"
 				:disabled="disabled"
-				@click="toggleValue"
 			>
 				<farm-icon size="md">dots-horizontal</farm-icon>
 			</farm-btn>
@@ -70,15 +70,11 @@ export default defineComponent({
 		};
 	},
 	methods: {
-		onClick(handler) {
+		onClick(handler: string) {
 			if (handler !== undefined) {
 				this.$emit(handler);
 			}
 		},
-		toggleValue(event: MouseEvent) {
-			this.value = !this.value;
-			event.stopPropagation();
-		},
 	},
 });
 </script>