From c7b5d50b056e1c6de28a131eeecc2a250a0532fd Mon Sep 17 00:00:00 2001
From: Peter Savchenko <specc.dev@gmail.com>
Date: Mon, 9 Dec 2024 22:45:18 +0300
Subject: [PATCH] fix(ui): popover toggle fix

---
 codex-ui/dev/pages/components/Popover.vue         | 4 ++--
 codex-ui/src/vue/components/popover/Popover.vue   | 8 +++++++-
 codex-ui/src/vue/components/popover/usePopover.ts | 8 ++++++++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/codex-ui/dev/pages/components/Popover.vue b/codex-ui/dev/pages/components/Popover.vue
index cd2c6b66..cc6ccb1b 100644
--- a/codex-ui/dev/pages/components/Popover.vue
+++ b/codex-ui/dev/pages/components/Popover.vue
@@ -15,7 +15,7 @@
     <div>
       <Button
         secondary
-        @click="show($event.target, {vertically: 'below', horizontally: 'left'})"
+        @click="!isOpen ? show($event.target, {vertically: 'below', horizontally: 'left'}) : hide()"
       >
         Open below left
       </Button>
@@ -82,7 +82,7 @@
 import PageHeader from '../../components/PageHeader.vue';
 import { usePopover, PopoverShowParams, Button, ContextMenu, Heading } from '../../../src/vue';
 
-const { showPopover } = usePopover();
+const { showPopover, isOpen, hide } = usePopover();
 
 /**
  * Example of working with Popover
diff --git a/codex-ui/src/vue/components/popover/Popover.vue b/codex-ui/src/vue/components/popover/Popover.vue
index 706e3e48..3e00a07a 100644
--- a/codex-ui/src/vue/components/popover/Popover.vue
+++ b/codex-ui/src/vue/components/popover/Popover.vue
@@ -29,12 +29,18 @@ const {
   hide,
   content,
   width,
+  targetElement,
 } = usePopover();
 
 /**
  * Close the popover when clicking outside of it
  */
-onClickOutside(popoverEl, hide);
+onClickOutside(popoverEl, hide, {
+  /**
+   * Allow clicks on the target element to implemet toggle behavior
+   */
+  ignore: [targetElement],
+});
 </script>
 
 <style module>
diff --git a/codex-ui/src/vue/components/popover/usePopover.ts b/codex-ui/src/vue/components/popover/usePopover.ts
index ea8e5766..1a6560bf 100644
--- a/codex-ui/src/vue/components/popover/usePopover.ts
+++ b/codex-ui/src/vue/components/popover/usePopover.ts
@@ -51,6 +51,11 @@ export const usePopover = createSharedComposable(() => {
    */
   const content = shallowRef<PopoverContent | null>(null);
 
+  /**
+   * Target element to move popover to
+   */
+  const targetElement = ref<HTMLElement | null>(null);
+
   /**
    * Move popover to the target element
    * Also, align and set width
@@ -128,6 +133,7 @@ export const usePopover = createSharedComposable(() => {
    * @param params - popover showing configuration
    */
   function showPopover(params: PopoverShowParams): void {
+    targetElement.value = params.targetEl;
     move(params.targetEl, params.align, params.width);
     mountComponent(params.with.component, params.with.props);
     show();
@@ -137,6 +143,7 @@ export const usePopover = createSharedComposable(() => {
    * Empty content, position and hide popover
    */
   function resetPopover(): void {
+    targetElement.value = null;
     content.value = null;
     position.left = 0;
     position.top = 0;
@@ -159,5 +166,6 @@ export const usePopover = createSharedComposable(() => {
     hide,
     content,
     width,
+    targetElement,
   };
 });