From 3c0232f9da0920777cb724169249ef4a1808ca01 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 8 Jun 2024 19:58:52 +0530
Subject: [PATCH] fix: updated Popover component

---
 .../src/components/Controls/DatePicker.vue    |   2 +-
 .../components/Controls/DateRangePicker.vue   |   2 +-
 .../components/Controls/DatetimePicker.vue    |   2 +-
 .../components/Controls/MultiselectInput.vue  |   3 +-
 frontend/src/components/IconPicker.vue        |   2 +-
 frontend/src/components/frappe-ui/Popover.vue | 277 ++++++++++++++++++
 6 files changed, 283 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/frappe-ui/Popover.vue

diff --git a/frontend/src/components/Controls/DatePicker.vue b/frontend/src/components/Controls/DatePicker.vue
index 1ef888b1..1fbe8f5d 100644
--- a/frontend/src/components/Controls/DatePicker.vue
+++ b/frontend/src/components/Controls/DatePicker.vue
@@ -108,7 +108,7 @@
 </template>
 
 <script>
-import { Popover } from 'frappe-ui'
+import Popover from '@/components/frappe-ui/Popover.vue'
 export default {
   name: 'DatePicker',
   props: ['value', 'placeholder', 'formatter', 'readonly', 'inputClass'],
diff --git a/frontend/src/components/Controls/DateRangePicker.vue b/frontend/src/components/Controls/DateRangePicker.vue
index 0724109b..2c9fcc19 100644
--- a/frontend/src/components/Controls/DateRangePicker.vue
+++ b/frontend/src/components/Controls/DateRangePicker.vue
@@ -96,7 +96,7 @@
 </template>
 
 <script>
-import { Popover } from 'frappe-ui'
+import Popover from '@/components/frappe-ui/Popover.vue'
 export default {
   name: 'DateRangePicker',
   props: ['value', 'placeholder', 'formatter', 'readonly', 'inputClass'],
diff --git a/frontend/src/components/Controls/DatetimePicker.vue b/frontend/src/components/Controls/DatetimePicker.vue
index 61f47106..d86e119e 100644
--- a/frontend/src/components/Controls/DatetimePicker.vue
+++ b/frontend/src/components/Controls/DatetimePicker.vue
@@ -144,7 +144,7 @@
 </template>
 
 <script>
-import { Popover } from 'frappe-ui'
+import Popover from '@/components/frappe-ui/Popover.vue'
 export default {
   name: 'DatePicker',
   props: ['value', 'placeholder', 'formatter', 'readonly', 'inputClass'],
diff --git a/frontend/src/components/Controls/MultiselectInput.vue b/frontend/src/components/Controls/MultiselectInput.vue
index 0a89312b..ed8b4102 100644
--- a/frontend/src/components/Controls/MultiselectInput.vue
+++ b/frontend/src/components/Controls/MultiselectInput.vue
@@ -93,7 +93,8 @@ import {
   ComboboxOption,
 } from '@headlessui/vue'
 import UserAvatar from '@/components/UserAvatar.vue'
-import { Popover, createResource } from 'frappe-ui'
+import Popover from '@/components/frappe-ui/Popover.vue'
+import { createResource } from 'frappe-ui'
 import { ref, computed, nextTick } from 'vue'
 import { watchDebounced } from '@vueuse/core'
 
diff --git a/frontend/src/components/IconPicker.vue b/frontend/src/components/IconPicker.vue
index c1249d25..2abedd09 100644
--- a/frontend/src/components/IconPicker.vue
+++ b/frontend/src/components/IconPicker.vue
@@ -64,8 +64,8 @@
   </Popover>
 </template>
 <script setup>
+import Popover from '@/components/frappe-ui/Popover.vue'
 import { gemoji } from 'gemoji'
-import { Popover } from 'frappe-ui'
 import { ref, computed } from 'vue'
 
 const search = ref('')
diff --git a/frontend/src/components/frappe-ui/Popover.vue b/frontend/src/components/frappe-ui/Popover.vue
new file mode 100644
index 00000000..98ea2518
--- /dev/null
+++ b/frontend/src/components/frappe-ui/Popover.vue
@@ -0,0 +1,277 @@
+<template>
+  <div ref="reference">
+    <div
+      ref="target"
+      :class="['flex', $attrs.class]"
+      @click="updatePosition"
+      @focusin="updatePosition"
+      @keydown="updatePosition"
+      @mouseover="onMouseover"
+      @mouseleave="onMouseleave"
+    >
+      <slot
+        name="target"
+        v-bind="{ togglePopover, updatePosition, open, close, isOpen }"
+      />
+    </div>
+    <teleport to="#frappeui-popper-root">
+      <div
+        ref="popover"
+        class="relative z-[100]"
+        :class="[popoverContainerClass, popoverClass]"
+        :style="{ minWidth: targetWidth ? targetWidth + 'px' : null }"
+        @mouseover="pointerOverTargetOrPopup = true"
+        @mouseleave="onMouseleave"
+      >
+        <transition v-bind="popupTransition">
+          <div v-show="isOpen">
+            <slot
+              name="body"
+              v-bind="{ togglePopover, updatePosition, open, close, isOpen }"
+            >
+              <div class="rounded-lg border border-gray-100 bg-white shadow-xl">
+                <slot
+                  name="body-main"
+                  v-bind="{
+                    togglePopover,
+                    updatePosition,
+                    open,
+                    close,
+                    isOpen,
+                  }"
+                />
+              </div>
+            </slot>
+          </div>
+        </transition>
+      </div>
+    </teleport>
+  </div>
+</template>
+
+<script>
+import { createPopper } from '@popperjs/core'
+
+export default {
+  name: 'Popover',
+  inheritAttrs: false,
+  props: {
+    show: {
+      default: undefined,
+    },
+    trigger: {
+      type: String,
+      default: 'click', // click, hover
+    },
+    hoverDelay: {
+      type: Number,
+      default: 0,
+    },
+    leaveDelay: {
+      type: Number,
+      default: 0,
+    },
+    placement: {
+      type: String,
+      default: 'bottom-start',
+    },
+    popoverClass: [String, Object, Array],
+    transition: {
+      default: null,
+    },
+    hideOnBlur: {
+      default: true,
+    },
+  },
+  emits: ['open', 'close', 'update:show'],
+  expose: ['open', 'close'],
+  data() {
+    return {
+      popoverContainerClass: 'body-container',
+      showPopup: false,
+      targetWidth: null,
+      pointerOverTargetOrPopup: false,
+    }
+  },
+  watch: {
+    show(val) {
+      if (val) {
+        this.open()
+      } else {
+        this.close()
+      }
+    },
+  },
+  created() {
+    if (typeof window === 'undefined') return
+    if (!document.getElementById('frappeui-popper-root')) {
+      const root = document.createElement('div')
+      root.id = 'frappeui-popper-root'
+      document.body.appendChild(root)
+    }
+  },
+  mounted() {
+    this.listener = (e) => {
+      const clickedElement = e.target
+      const reference = this.$refs.reference
+      const popoverBody = this.$refs.popover
+      const insideClick =
+        clickedElement === reference ||
+        clickedElement === popoverBody ||
+        reference?.contains(clickedElement) ||
+        popoverBody?.contains(clickedElement)
+      if (insideClick) {
+        return
+      }
+
+      const root = document.getElementById('frappeui-popper-root')
+      const insidePopoverRoot = root.contains(clickedElement)
+      if (!insidePopoverRoot) {
+        return this.close()
+      }
+
+      const bodyClass = `.${this.popoverContainerClass}`
+      const clickedElementBody = clickedElement?.closest(bodyClass)
+      const currentPopoverBody = reference?.closest(bodyClass)
+      const isSiblingClicked =
+        clickedElementBody &&
+        currentPopoverBody &&
+        clickedElementBody === currentPopoverBody
+
+      if (isSiblingClicked) {
+        this.close()
+      }
+    }
+    if (this.hideOnBlur) {
+      document.addEventListener('click', this.listener)
+      document.addEventListener('mousedown', this.listener)
+    }
+    this.$nextTick(() => {
+      this.targetWidth = this.$refs['target'].clientWidth
+    })
+  },
+  beforeDestroy() {
+    this.popper && this.popper.destroy()
+    document.removeEventListener('click', this.listener)
+    document.removeEventListener('mousedown', this.listener)
+  },
+  computed: {
+    showPropPassed() {
+      return this.show != null
+    },
+    isOpen: {
+      get() {
+        if (this.showPropPassed) {
+          return this.show
+        }
+        return this.showPopup
+      },
+      set(val) {
+        val = Boolean(val)
+        if (this.showPropPassed) {
+          this.$emit('update:show', val)
+        } else {
+          this.showPopup = val
+        }
+        if (val === false) {
+          this.$emit('close')
+        } else if (val === true) {
+          this.$emit('open')
+        }
+      },
+    },
+    popupTransition() {
+      let templates = {
+        default: {
+          enterActiveClass: 'transition duration-150 ease-out',
+          enterFromClass: 'translate-y-1 opacity-0',
+          enterToClass: 'translate-y-0 opacity-100',
+          leaveActiveClass: 'transition duration-150 ease-in',
+          leaveFromClass: 'translate-y-0 opacity-100',
+          leaveToClass: 'translate-y-1 opacity-0',
+        },
+      }
+      if (typeof this.transition === 'string') {
+        return templates[this.transition]
+      }
+      return this.transition
+    },
+  },
+  methods: {
+    setupPopper() {
+      if (!this.popper) {
+        this.popper = createPopper(this.$refs.reference, this.$refs.popover, {
+          placement: this.placement,
+        })
+      } else {
+        this.updatePosition()
+      }
+    },
+    updatePosition() {
+      this.popper && this.popper.update()
+    },
+    togglePopover(flag) {
+      if (flag instanceof Event) {
+        flag = null
+      }
+      if (flag == null) {
+        flag = !this.isOpen
+      }
+      flag = Boolean(flag)
+      if (flag) {
+        this.open()
+      } else {
+        this.close()
+      }
+    },
+    open() {
+      this.isOpen = true
+      this.$nextTick(() => this.setupPopper())
+    },
+    close() {
+      this.isOpen = false
+    },
+    onMouseover() {
+      this.pointerOverTargetOrPopup = true
+      if (this.leaveTimer) {
+        clearTimeout(this.leaveTimer)
+        this.leaveTimer = null
+      }
+      if (this.trigger === 'hover') {
+        if (this.hoverDelay) {
+          this.hoverTimer = setTimeout(() => {
+            if (this.pointerOverTargetOrPopup) {
+              this.open()
+            }
+          }, Number(this.hoverDelay) * 1000)
+        } else {
+          this.open()
+        }
+      }
+    },
+    onMouseleave(e) {
+      this.pointerOverTargetOrPopup = false
+      if (this.hoverTimer) {
+        clearTimeout(this.hoverTimer)
+        this.hoverTimer = null
+      }
+      if (this.trigger === 'hover') {
+        if (this.leaveTimer) {
+          clearTimeout(this.leaveTimer)
+        }
+        if (this.leaveDelay) {
+          this.leaveTimer = setTimeout(() => {
+            if (!this.pointerOverTargetOrPopup) {
+              this.close()
+            }
+          }, Number(this.leaveDelay) * 1000)
+        } else {
+          if (!this.pointerOverTargetOrPopup) {
+            this.close()
+          }
+        }
+      }
+    },
+  },
+}
+</script>