Add new props

- Disabled - openDelay - closeDelay
valgeirb · Jul 7, 2021 · da63040 · da63040
1 parent a3e31f3
commit da63040
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 59 deletions.
diff --git a/README.md b/README.md
@@ -55,28 +55,31 @@ yarn add vue3-popper
 
 ## Props
 
-| Name               | Default  | Description                                                                  |
-| ------------------ | -------- | ---------------------------------------------------------------------------- |
-| `placement`        | `bottom` | Preferred placement of the popover                                           |
-| `disableClickAway` | `false`  | Disables automatically closing the popover when the user clicks away from it |
-| `offsetX`          | `0`      | Distance in pixels along the trigger element                                 |
-| `offsetY`          | `12`     | Distance in pixels away from the trigger element                             |
-| `hover`            | `false`  | Trigger the popover on hover                                                 |
-| `arrow`            | `false`  | Display an arrow on the popover                                              |
-| `arrowPadding`     | `0`      | Stop arrow from reaching the edge of the Popper (in pixels)                  |
+| Name               | Default  | Description                                                                 |
+| ------------------ | -------- | --------------------------------------------------------------------------- |
+| `placement`        | `bottom` | Preferred placement of the Popper                                           |
+| `disableClickAway` | `false`  | Disables automatically closing the Popper when the user clicks away from it |
+| `offsetX`          | `0`      | Distance in pixels along the trigger element                                |
+| `offsetY`          | `12`     | Distance in pixels away from the trigger element                            |
+| `hover`            | `false`  | Trigger the Popper on hover                                                 |
+| `arrow`            | `false`  | Display an arrow on the Popper                                              |
+| `arrowPadding`     | `0`      | Stop arrow from reaching the edge of the Popper (in pixels)                 |
+| `disabled`         | `false`  | Disables the Popper. If it was already open, it will be closed.             |
+| `openDelay`        | `0`      | Open the Popper after a delay (ms)                                          |
+| `closeDelay`       | `0`      | Close the Popper after a delay (ms)                                         |
 
 ## Events
 
-| Name           | Description                |
-| -------------- | -------------------------- |
-| `open:popper`  | When the popover is open   |
-| `close:popper` | When the popover is hidden |
+| Name           | Description               |
+| -------------- | ------------------------- |
+| `open:popper`  | When the Popper is open   |
+| `close:popper` | When the Popper is hidden |
 
 ## Slots
 
-| Name      | Description             |
-| --------- | ----------------------- |
-| `content` | For the popover content |
+| Name      | Description            |
+| --------- | ---------------------- |
+| `content` | For the Popper content |
 
 ## Slot props
 

diff --git a/dev/serve.vue b/dev/serve.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
-    <Popper placement="right" arrow>
-      <button style="width: 100px">Click this</button>
+    <Popper arrow>
+      <button>Click this</button>
       <template #content>
         <div>This is the content</div>
       </template>
@@ -24,9 +24,12 @@
 <style>
   #app {
     color: #2c3e50;
-    margin-top: 200px;
+    height: 100vh;
     display: flex;
+    flex-direction: column;
+    align-items: center;
     justify-content: center;
+    gap: 100px;
   }
   :root {
     --popper-theme-background-color: #ffffff;

diff --git a/docs/guide/api.md b/docs/guide/api.md
@@ -2,28 +2,31 @@
 
 ## Props
 
-| Name               | Default  | Description                                                                  |
-| ------------------ | -------- | ---------------------------------------------------------------------------- |
-| `placement`        | `bottom` | Preferred placement of the popover                                           |
-| `disableClickAway` | `false`  | Disables automatically closing the popover when the user clicks away from it |
-| `offsetX`          | `0`      | Distance in pixels along the trigger element                                 |
-| `offsetY`          | `12`     | Distance in pixels away from the trigger element                             |
-| `hover`            | `false`  | Trigger the popover on hover                                                 |
-| `arrow`            | `false`  | Display an arrow on the popover                                              |
-| `arrowPadding`     | `0`      | Stop arrow from reaching the edge of the Popper (in pixels)                  |
+| Name               | Default  | Description                                                                 |
+| ------------------ | -------- | --------------------------------------------------------------------------- |
+| `placement`        | `bottom` | Preferred placement of the Popper                                           |
+| `disableClickAway` | `false`  | Disables automatically closing the Popper when the user clicks away from it |
+| `offsetX`          | `0`      | Distance in pixels along the trigger element                                |
+| `offsetY`          | `12`     | Distance in pixels away from the trigger element                            |
+| `hover`            | `false`  | Trigger the Popper on hover                                                 |
+| `arrow`            | `false`  | Display an arrow on the Popper                                              |
+| `arrowPadding`     | `0`      | Stop arrow from reaching the edge of the Popper (in pixels)                 |
+| `disabled`         | `false`  | Disables the Popper. If it was already open, it will be closed.             |
+| `openDelay`        | `0`      | Open the Popper after a delay (ms)                                          |
+| `closeDelay`       | `0`      | Close the Popper after a delay (ms)                                         |
 
 ## Events
 
-| Name           | Description                |
-| -------------- | -------------------------- |
-| `open:popper`  | When the popover is open   |
-| `close:popper` | When the popover is hidden |
+| Name           | Description               |
+| -------------- | ------------------------- |
+| `open:popper`  | When the Popper is open   |
+| `close:popper` | When the Popper is hidden |
 
 ## Slots
 
-| Name      | Description             |
-| --------- | ----------------------- |
-| `content` | For the popover content |
+| Name      | Description            |
+| --------- | ---------------------- |
+| `content` | For the Popper content |
 
 ## Slot props
 

diff --git a/src/component/Popper.vue b/src/component/Popper.vue
@@ -1,13 +1,13 @@
 <template>
-  <div v-click-away="{ handler: close, enabled: !disableClickAway }">
+  <div v-click-away="{ handler: handleClose, enabled: enableClickAway }">
     <div
       ref="triggerNode"
-      @mouseover="hover && open()"
-      @mouseleave="hover && close()"
-      @click="toggle"
-      @focus="open"
-      @blur="close"
-      @keyup.esc="close"
+      @mouseover="hover && handleOpen()"
+      @mouseleave="hover && handleClose()"
+      @click="handleToggle"
+      @focus="handleOpen"
+      @blur="handleClose"
+      @keyup.esc="handleClose"
       class="inline-block"
     >
       <!-- The default slot to trigger the popper  -->
@@ -32,6 +32,9 @@
   import usePopper from "@/composables";
   import clickAway from "@/directives";
 
+  /* Delay execution for a set amount of milliseconds */
+  const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
+
   /**
    * The Popper component.
    */
@@ -96,6 +99,27 @@
         type: Boolean,
         default: false,
       },
+      /**
+       * Disables the Popper. If it was already open, it will be closed.
+       */
+      disabled: {
+        type: Boolean,
+        default: null,
+      },
+      /**
+       * Open the Popper after a delay (ms).
+       */
+      openDelay: {
+        type: [Number, String],
+        default: 0,
+      },
+      /**
+       * Close the Popper after a delay (ms).
+       */
+      closeDelay: {
+        type: [Number, String],
+        default: 0,
+      },
       /**
        * Display an arrow on the popper
        */
@@ -120,29 +144,67 @@
         );
       }
 
-      const { offsetX, offsetY, arrowPadding, placement } = toRefs(props);
-
       const {
-        popperNode,
-        triggerNode,
-        isOpen,
-        toggle,
-        open,
-        close,
-      } = usePopper({ offsetX, offsetY, arrowPadding, placement, emit });
+        offsetX,
+        offsetY,
+        arrowPadding,
+        placement,
+        disabled,
+        disableClickAway,
+        openDelay,
+        closeDelay,
+      } = toRefs(props);
+
+      const { popperNode, triggerNode, isOpen, open, close } = usePopper({
+        offsetX,
+        offsetY,
+        arrowPadding,
+        placement,
+        emit,
+      });
+
+      const handleOpen = async () => {
+        // Do not open if Popper is disabled
+        if (disabled.value) {
+          return;
+        }
+
+        await delay(openDelay.value);
+        open();
+      };
+
+      const handleClose = async () => {
+        await delay(closeDelay.value);
+        close();
+      };
+
+      const handleToggle = () => {
+        isOpen.value ? handleClose() : handleOpen();
+      };
 
       const showPopper = computed(() => {
-        return isOpen.value && slots.content?.().length;
+        // Do not show the Popper if it is disabled (if it was already open, it will be closed)
+        if (disabled.value) {
+          close();
+          return false;
+        } else {
+          // Show the Popper if it is open and has some content
+          return isOpen.value && slots.content?.().length;
+        }
       });
 
+      const enableClickAway = computed(() => !disableClickAway.value);
+
       return {
         popperNode,
         triggerNode,
         isOpen,
-        toggle,
-        open,
         close,
+        handleToggle,
+        handleOpen,
+        handleClose,
         showPopper,
+        enableClickAway,
       };
     },
   });

diff --git a/src/composables/usePopper.js b/src/composables/usePopper.js
@@ -35,10 +35,6 @@ export default function usePopper({
     emit("open:popper");
   };
 
-  const toggle = () => {
-    isOpen.value ? close() : open();
-  };
-
   watch([isOpen, placement], async ([isOpen]) => {
     if (isOpen) {
       await nextTick();
@@ -80,7 +76,6 @@ export default function usePopper({
     popperNode,
     triggerNode,
     isOpen,
-    toggle,
     open,
     close,
   };