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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "15.14.12",
+	"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>

package/src/components/Tabs/Tabs.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="farm-tabs-wrapper">
-		<button 
-			class="farm-tabs-nav farm-tabs-nav--left" 
+		<button
+			class="farm-tabs-nav farm-tabs-nav--left"
 			@click="scrollLeft"
 			@mouseenter="hoverLeft = true"
 			@mouseleave="hoverLeft = false"
@@ -9,7 +9,7 @@
 		>
 			<farm-icon color="primary" size="24px">chevron-left</farm-icon>
 		</button>
-		
+
 		<div class="farm-tabs" ref="tabsContainer">
 			<div class="tabs" :class="{ 'tabs--disabled': !allowUserChange }">
 				<div
@@ -51,9 +51,9 @@
 				</div>
 			</div>
 		</div>
-		
-		<button 
-			class="farm-tabs-nav farm-tabs-nav--right" 
+
+		<button
+			class="farm-tabs-nav farm-tabs-nav--right"
 			@click="scrollRight"
 			@mouseenter="hoverRight = true"
 			@mouseleave="hoverRight = false"
@@ -142,7 +142,7 @@ export default defineComponent({
 			const container = this.$refs.tabsContainer as HTMLElement;
 			if (container) {
 				const { scrollLeft, scrollWidth, clientWidth } = container;
-				
+
 				this.canScrollLeft = scrollLeft > 0;
 				this.canScrollRight = scrollLeft < scrollWidth - clientWidth - 1;
 			}
@@ -173,9 +173,11 @@ export default defineComponent({
 		this.selected = this.initialSelect;
 	},
 	mounted() {
-		this.updateScrollButtons();
+		this.$nextTick(() => {
+			this.updateScrollButtons();
+		});
 		window.addEventListener('resize', this.updateScrollButtons);
-		
+
 		const container = this.$refs.tabsContainer as HTMLElement;
 		if (container) {
 			container.addEventListener('scroll', this.updateScrollButtons);
@@ -183,7 +185,7 @@ export default defineComponent({
 	},
 	beforeUnmount() {
 		window.removeEventListener('resize', this.updateScrollButtons);
-		
+
 		const container = this.$refs.tabsContainer as HTMLElement;
 		if (container) {
 			container.removeEventListener('scroll', this.updateScrollButtons);