From 4b1c89acf3507ea0991347d494f031eb4baf2f46 Mon Sep 17 00:00:00 2001
From: jambonn <hoaeuro93@gmail.com>
Date: Fri, 28 Jul 2023 12:50:45 +0700
Subject: [PATCH] feat: update func append to body

---
 README.md                 | 44 ++++++++++-----------
 src/components/Popper.vue | 83 +++++++++++++++------------------------
 src/types.ts              |  2 +-
 test/App.vue              | 58 ++++++++++++++++++++++++++-
 4 files changed, 112 insertions(+), 75 deletions(-)

diff --git a/README.md b/README.md
index 5ed03d2..52002aa 100644
--- a/README.md
+++ b/README.md
@@ -76,28 +76,28 @@ pnpm add vue-popper-lite
 
 ## Props
 
-| Name                  | Type    | Default    | Description                                                                                                                                                                                                                                                                                                                                                                                    |
-|-----------------------|---------|------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `trigger`             | String  | `hover`    | Optional value: <br><ul><li>**hover** - hover to open popper content</li><li>**clickToOpen** - every click on the popper triggers open, only clicking outside of the popper closes it</li><li>**clickToToggle** - click on the popper toggles it's visibility</li><li>**focus** - opens popper on focus event, closes on blur.</li> |
-| `placement`           | String  | `bottom`   | Preferred placement of the Popper                                                                                                                                                                                                                                                                                                                                                              |
-| `delay-on-mouse-over` | Number  | `10`       | Delay in ms before showing popper during a mouse over                                                                                                                                                                                                                                                                                                                                          |
-| `delay-on-mouse-out`  | Number  | `10`       | Delay in ms before hiding popper during a mouse out                                                                                                                                                                                                                                                                                                                                            |
-| `disabled`            | Boolean | `false`    | Disables the Popper. If it was already open, it will be closed.                                                                                                                                                                                                                                                                                                                                |
-| `content`             | String  | `null`     | If your content is just a simple string, you can pass it as a prop                                                                                                                                                                                                                                                                                                                             |
-| `transition`          | String  | `empty`    | Custom transition class                                                                                                                                                                                                                                                                                                                                                                        |
-| `enter-active-class`  | String  | `null`     | Custom transition class enter                                                                                                                                                                                                                                                                                                                                                                  |
-| `leave-active-class`  | String  | `null`     | Custom transition class leave                                                                                                                                                                                                                                                                                                                                                                  |
-| `force-show`          | Boolean | `false`    | Force show popper                                                                                                                                                                                                                                                                                                                                                                              |
-| `append-to-body`      | Boolean | `false`    | Append content to body                                                                                                                                                                                                                                                                                                                                                                         |
-| `visible-arrow`       | Boolean | `true`     | Visible an arrow on the Popper                                                                                                                                                                                                                                                                                                                                                                 |
-| `arrow-padding`       | Number  | `0`        | Stop arrow from reaching the edge of the Popper (in pixels)                                                                                                                                                                                                                                                                                                                                    |
-| `enable-flip`         | Boolean | `true`     | Popper into place, it will not flip dynamically when it runs out of space if this is set to `false`                                                                                                                                                                                                                                                                                            |
-| `offset-kidding`      | Number  | `0`        | Offset in pixels along the trigger element                                                                                                                                                                                                                                                                                                                                                     |
-| `offset-distance`     | Number  | `8`        | Offset in pixels away from the trigger element                                                                                                                                                                                                                                                                                                                                                 |
-| `stop-propagation`    | Boolean | `false`    | Stop propagation event click                                                                                                                                                                                                                                                                                                                                                                   |
-| `prevent-default`     | Boolean | `false`    | Prevent default event click                                                                                                                                                                                                                                                                                                                                                                    |
-| `strategy`            | String  | `absolute` | Describes the positioning strategy to use. If your reference element is in a fixed container, use the `fixed` strategy                                                                                                                                                                                                                                                                         |
-| `content-class`       | String  | `empty`    | Class name for content element                                                                                                                                                                                                                                                                                                                                                                 |
+| Name                  | Type    | Default    | Description                                                                                                                                                                                                                                                         |
+|-----------------------|---------|------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `trigger`             | String  | `hover`    | Optional value: <br><ul><li>**hover** - hover to open popper content</li><li>**clickToOpen** - every click on the popper triggers open, only clicking outside of the popper closes it</li><li>**clickToToggle** - click on the popper toggles it's visibility</li>  |
+| `placement`           | String  | `bottom`   | Preferred placement of the Popper                                                                                                                                                                                                                                   |
+| `delay-on-mouse-over` | Number  | `10`       | Delay in ms before showing popper during a mouse over                                                                                                                                                                                                               |
+| `delay-on-mouse-out`  | Number  | `10`       | Delay in ms before hiding popper during a mouse out                                                                                                                                                                                                                 |
+| `disabled`            | Boolean | `false`    | Disables the Popper. If it was already open, it will be closed.                                                                                                                                                                                                     |
+| `content`             | String  | `null`     | If your content is just a simple string, you can pass it as a prop                                                                                                                                                                                                  |
+| `transition`          | String  | `empty`    | Custom transition class                                                                                                                                                                                                                                             |
+| `enter-active-class`  | String  | `null`     | Custom transition class enter                                                                                                                                                                                                                                       |
+| `leave-active-class`  | String  | `null`     | Custom transition class leave                                                                                                                                                                                                                                       |
+| `force-show`          | Boolean | `false`    | Force show popper                                                                                                                                                                                                                                                   |
+| `append-to-body`      | Boolean | `false`    | Append content to body                                                                                                                                                                                                                                              |
+| `visible-arrow`       | Boolean | `true`     | Visible an arrow on the Popper                                                                                                                                                                                                                                      |
+| `arrow-padding`       | Number  | `0`        | Stop arrow from reaching the edge of the Popper (in pixels)                                                                                                                                                                                                         |
+| `enable-flip`         | Boolean | `true`     | Popper into place, it will not flip dynamically when it runs out of space if this is set to `false`                                                                                                                                                                 |
+| `offset-kidding`      | Number  | `0`        | Offset in pixels along the trigger element                                                                                                                                                                                                                          |
+| `offset-distance`     | Number  | `8`        | Offset in pixels away from the trigger element                                                                                                                                                                                                                      |
+| `stop-propagation`    | Boolean | `false`    | Stop propagation event click                                                                                                                                                                                                                                        |
+| `prevent-default`     | Boolean | `false`    | Prevent default event click                                                                                                                                                                                                                                         |
+| `strategy`            | String  | `absolute` | Describes the positioning strategy to use. If your reference element is in a fixed container, use the `fixed` strategy                                                                                                                                              |
+| `content-class`       | String  | `empty`    | Class name for content element                                                                                                                                                                                                                                      |
 
 ## Events
 
diff --git a/src/components/Popper.vue b/src/components/Popper.vue
index 06d24e1..c4aaad0 100644
--- a/src/components/Popper.vue
+++ b/src/components/Popper.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue';
+import { ref, watch, nextTick, onMounted, onUnmounted } from 'vue';
 import { createPopper } from '@popperjs/core/lib/popper-lite';
 import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow';
 import flip from '@popperjs/core/lib/modifiers/flip';
@@ -38,7 +38,7 @@ const popperJS = ref<Instance | null>(null);
 const timer = ref();
 const popperNode = ref(null);
 const showPopper = ref(false);
-const appendedToBody = ref(props.appendToBody);
+const appendedToBody = ref(false);
 const popperOptions = ref<Options>({
   placement: props.placement,
   modifiers: [
@@ -66,14 +66,6 @@ const popperOptions = ref<Options>({
   strategy: props.strategy,
 });
 
-const isVisible = computed(() => {
-  if (props.appendToBody) {
-    return appendedToBody.value;
-  }
-
-  return true;
-});
-
 function on(
   element: Document | Element,
   event: string,
@@ -124,12 +116,22 @@ function doDestroy() {
     popperJS.value.destroy();
     popperJS.value = null;
   }
+
+  if (appendedToBody.value) {
+    appendedToBody.value = false;
+    document.body.removeChild(popperElm.value);
+  }
 }
 function updatePopper() {
   popperJS.value ? popperJS.value.update() : initializePopper();
 }
 function initializePopper() {
   nextTick(() => {
+    if (props.appendToBody && !appendedToBody.value) {
+      appendedToBody.value = true;
+      document.body.appendChild(popperElm.value);
+    }
+
     if (popperJS.value && popperJS.value.destroy) {
       popperJS.value.destroy();
     }
@@ -148,15 +150,11 @@ function initializePopper() {
 }
 function onMouseOver() {
   clearTimeout(timer.value);
-  timer.value = setTimeout(() => {
-    showPopper.value = true;
-  }, props.delayOnMouseOver);
+  timer.value = setTimeout(doShow, props.delayOnMouseOver);
 }
 function onMouseOut() {
   clearTimeout(timer.value);
-  timer.value = setTimeout(() => {
-    showPopper.value = false;
-  }, props.delayOnMouseOut);
+  timer.value = setTimeout(doClose, props.delayOnMouseOut);
 }
 function elementContains(elm: HTMLElement, otherElm: Node) {
   if (typeof elm.contains === 'function') {
@@ -183,7 +181,7 @@ function handleDocumentClick(e: MutationRecord) {
     return;
   }
 
-  showPopper.value = false;
+  doClose();
 }
 function destroyPopper() {
   off(referenceElm.value, 'click', doToggle);
@@ -195,12 +193,8 @@ function destroyPopper() {
   off(referenceElm.value, 'mouseover', onMouseOver);
   off(document, 'click', handleDocumentClick);
 
-  showPopper.value = false;
+  doClose();
   doDestroy();
-
-  if (appendedToBody.value) {
-    appendedToBody.value = false;
-  }
 }
 
 onMounted(() => {
@@ -221,12 +215,6 @@ onMounted(() => {
       on(referenceElm.value, 'mouseout', onMouseOut);
       on(popperElm.value, 'mouseout', onMouseOut);
       break;
-    case 'focus':
-      on(referenceElm.value, 'focus', onMouseOver);
-      on(popperElm.value, 'focus', onMouseOver);
-      on(referenceElm.value, 'blur', onMouseOut);
-      on(popperElm.value, 'blur', onMouseOut);
-      break;
   }
 });
 
@@ -275,7 +263,7 @@ watch(
   () => props.disabled,
   (value) => {
     if (value) {
-      showPopper.value = false;
+      doClose();
     }
   }
 );
@@ -290,29 +278,22 @@ watch(
     >
       <slot name="reference"></slot>
     </div>
-    <teleport to="body" :disabled="!appendToBody">
-      <transition
-        :name="transition"
-        :enter-active-class="enterActiveClass"
-        :leave-active-class="leaveActiveClass"
-        @after-leave="doDestroy"
+    <transition
+      :name="transition"
+      :enter-active-class="enterActiveClass"
+      :leave-active-class="leaveActiveClass"
+      @after-leave="doDestroy"
+    >
+      <div
+        v-show="!disabled && showPopper"
+        ref="popperElm"
+        :class="['popper__content', contentClass]"
+        role="tooltip"
       >
-        <div
-          v-if="isVisible"
-          v-show="!disabled && showPopper"
-          ref="popperElm"
-          :class="['popper__content', contentClass]"
-          role="tooltip"
-        >
-          <slot>{{ content }}</slot>
-          <div
-            v-if="visibleArrow"
-            class="popper__arrow"
-            data-popper-arrow
-          ></div>
-        </div>
-      </transition>
-    </teleport>
+        <slot>{{ content }}</slot>
+        <div v-if="visibleArrow" class="popper__arrow" data-popper-arrow></div>
+      </div>
+    </transition>
   </div>
 </template>
 
diff --git a/src/types.ts b/src/types.ts
index 13b06f8..19efc30 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -6,7 +6,7 @@ import type {
 } from '@popperjs/core';
 export { Options, Instance, Placement, PositioningStrategy };
 export interface Props {
-  trigger?: 'clickToOpen' | 'clickToToggle' | 'hover' | 'focus';
+  trigger?: 'clickToOpen' | 'clickToToggle' | 'hover';
   placement?: Placement;
   delayOnMouseOver?: number;
   delayOnMouseOut?: number;
diff --git a/test/App.vue b/test/App.vue
index d61254b..75a834e 100644
--- a/test/App.vue
+++ b/test/App.vue
@@ -1,6 +1,47 @@
 <template>
   <div class="popperjs">
-    <v-popper trigger="hover" placement="right">
+    <v-popper
+      trigger="hover"
+      placement="top"
+      transition="fade"
+      :append-to-body="true"
+    >
+      <div>Popper Content</div>
+
+      <template #reference>
+        <button aria-describedby="tooltip">My button</button>
+      </template>
+    </v-popper>
+    <v-popper
+      trigger="hover"
+      placement="bottom"
+      transition="fade"
+      :append-to-body="true"
+    >
+      <div>Popper Content</div>
+
+      <template #reference>
+        <button aria-describedby="tooltip">My button</button>
+      </template>
+    </v-popper>
+    <v-popper
+      trigger="clickToOpen"
+      placement="left"
+      transition="fade"
+      :append-to-body="true"
+    >
+      <div>Popper Content</div>
+
+      <template #reference>
+        <button aria-describedby="tooltip">My button</button>
+      </template>
+    </v-popper>
+    <v-popper
+      trigger="clickToToggle"
+      placement="right"
+      transition="fade"
+      :append-to-body="true"
+    >
       <div>Popper Content</div>
 
       <template #reference>
@@ -17,5 +58,20 @@
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
     Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   line-height: 1.6;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  padding: 16px;
+  min-height: 500px;
+  align-items: center;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
 }
 </style>