Merge pull request #280 from codex-team/fix-popover-toggle

fix(ui): popover toggle fix

Author: neSpecc

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

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>

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,
   };
 });