From 10890e6704e9884a7e86b37d0dc72e8f9c5177e7 Mon Sep 17 00:00:00 2001
From: KeJun <kejun1997@gmail.com>
Date: Thu, 27 Jul 2023 20:35:27 +0800
Subject: [PATCH] fix(Popover): hover mode (#453)

---
 .../content/examples/PopoverExampleMode.vue   | 11 ++++++++++
 docs/content/6.overlays/3.popover.md          | 21 +++++++++++++++++++
 src/runtime/components/overlays/Popover.vue   | 19 ++++++++---------
 3 files changed, 41 insertions(+), 10 deletions(-)
 create mode 100644 docs/components/content/examples/PopoverExampleMode.vue

diff --git a/docs/components/content/examples/PopoverExampleMode.vue b/docs/components/content/examples/PopoverExampleMode.vue
new file mode 100644
index 00000000..5b2a5977
--- /dev/null
+++ b/docs/components/content/examples/PopoverExampleMode.vue
@@ -0,0 +1,11 @@
+<template>
+  <UPopover mode="hover">
+    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
+
+    <template #panel>
+      <div class="p-4">
+        <Placeholder class="h-20 w-48" />
+      </div>
+    </template>
+  </UPopover>
+</template>
diff --git a/docs/content/6.overlays/3.popover.md b/docs/content/6.overlays/3.popover.md
index 7ff44ada..3e7899fe 100644
--- a/docs/content/6.overlays/3.popover.md
+++ b/docs/content/6.overlays/3.popover.md
@@ -28,6 +28,27 @@ links:
 ```
 ::
 
+### Mode
+
+Use the `mode` prop to switch between `click` and `hover` modes.
+
+::component-example
+#default
+:popover-example-mode
+#code
+```vue
+<template>
+  <UPopover mode="hover">
+    <UButton color="white" label="Open" trailing-icon="i-heroicons-chevron-down-20-solid" />
+
+    <template #panel>
+      <!-- Content -->
+    </template>
+  </UPopover>
+</template>
+```
+::
+
 ## Props
 
 :component-props
diff --git a/src/runtime/components/overlays/Popover.vue b/src/runtime/components/overlays/Popover.vue
index 3a2c90a1..cd5e975d 100644
--- a/src/runtime/components/overlays/Popover.vue
+++ b/src/runtime/components/overlays/Popover.vue
@@ -1,5 +1,5 @@
 <template>
-  <HPopover v-slot="{ open, close }" :class="ui.wrapper" @mouseleave="onMouseLeave">
+  <HPopover ref="popover" v-slot="{ open, close }" :class="ui.wrapper" @mouseleave="onMouseLeave">
     <HPopoverButton
       ref="trigger"
       as="div"
@@ -85,21 +85,19 @@ export default defineComponent({
     const [trigger, container] = usePopper(popper.value)
 
     // https://github.com/tailwindlabs/headlessui/blob/f66f4926c489fc15289d528294c23a3dc2aee7b1/packages/%40headlessui-vue/src/components/popover/popover.ts#L151
+    const popover = ref<any>(null)
     const popoverApi = ref<any>(null)
 
     let openTimeout: NodeJS.Timeout | null = null
     let closeTimeout: NodeJS.Timeout | null = null
 
     onMounted(() => {
-      setTimeout(() => {
-        // @ts-expect-error internals
-        const popoverProvides = trigger.value?.$.provides
-        if (!popoverProvides) {
-          return
-        }
-        const popoverProvidesSymbols = Object.getOwnPropertySymbols(popoverProvides)
-        popoverApi.value = popoverProvidesSymbols.length && popoverProvides[popoverProvidesSymbols[0]]
-      }, 200)
+      const popoverProvides = popover.value?.$.provides
+      if (!popoverProvides) {
+        return
+      }
+      const popoverProvidesSymbols = Object.getOwnPropertySymbols(popoverProvides)
+      popoverApi.value = popoverProvidesSymbols.length && popoverProvides[popoverProvidesSymbols[0]]
     })
 
     function onMouseOver () {
@@ -145,6 +143,7 @@ export default defineComponent({
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      popover,
       trigger,
       container,
       onMouseOver,