From 92b86186e7b8a987eec1da9cf45a0ec378d421cf Mon Sep 17 00:00:00 2001
From: Nils Olsson <nilso@enosis.net>
Date: Thu, 12 Oct 2023 03:14:40 -0700
Subject: [PATCH] feat(Popover): manual mode & horizontal offset (#781)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
Co-authored-by: Lnunu <62177121+Lnunu@users.noreply.github.com>
---
 .../content/examples/PopoverExampleOpen.vue   | 18 +++++++++++++++
 docs/content/6.overlays/3.popover.md          |  6 +++++
 src/runtime/components/overlays/Popover.vue   | 22 ++++++++++++++-----
 3 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 docs/components/content/examples/PopoverExampleOpen.vue

diff --git a/docs/components/content/examples/PopoverExampleOpen.vue b/docs/components/content/examples/PopoverExampleOpen.vue
new file mode 100644
index 0000000000..98ee0651a5
--- /dev/null
+++ b/docs/components/content/examples/PopoverExampleOpen.vue
@@ -0,0 +1,18 @@
+<script setup>
+const open = ref(false)
+</script>
+
+<template>
+  <div class="flex gap-4 items-center">
+    <UToggle v-model="open" />
+    <UPopover :open="open">
+      <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>
+  </div>
+</template>
diff --git a/docs/content/6.overlays/3.popover.md b/docs/content/6.overlays/3.popover.md
index 569657b22b..b8286843a8 100644
--- a/docs/content/6.overlays/3.popover.md
+++ b/docs/content/6.overlays/3.popover.md
@@ -19,6 +19,12 @@ Use the `mode` prop to switch between `click` and `hover` modes.
 
 :component-example{component="popover-example-mode"}
 
+### Manual
+
+Use the `open` prop to manually control showing the panel.
+
+:component-example{component="popover-example-open"}
+
 ## Slots
 
 ### `panel`
diff --git a/src/runtime/components/overlays/Popover.vue b/src/runtime/components/overlays/Popover.vue
index 1b39c63350..1973837109 100644
--- a/src/runtime/components/overlays/Popover.vue
+++ b/src/runtime/components/overlays/Popover.vue
@@ -1,5 +1,5 @@
 <template>
-  <HPopover ref="popover" v-slot="{ open, close }" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
+  <HPopover ref="popover" v-slot="{ open: headlessOpen, close }" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
     <HPopoverButton
       ref="trigger"
       as="div"
@@ -8,17 +8,17 @@
       role="button"
       @mouseover="onMouseOver"
     >
-      <slot :open="open" :close="close">
+      <slot :open="(open !== undefined) ? open : headlessOpen" :close="close">
         <button :disabled="disabled">
           Open
         </button>
       </slot>
     </HPopoverButton>
 
-    <div v-if="open" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
+    <div v-if="(open !== undefined) ? open : headlessOpen" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
       <Transition appear v-bind="ui.transition">
         <HPopoverPanel :class="[ui.base, ui.background, ui.ring, ui.rounded, ui.shadow]" static>
-          <slot name="panel" :open="open" :close="close" />
+          <slot name="panel" :open="(open !== undefined) ? open : headlessOpen" :close="close" />
         </HPopoverPanel>
       </Transition>
     </div>
@@ -53,6 +53,10 @@ export default defineComponent({
       default: 'click',
       validator: (value: string) => ['click', 'hover'].includes(value)
     },
+    open: {
+      type: Boolean,
+      default: undefined
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -103,8 +107,14 @@ export default defineComponent({
 
     const containerStyle = computed(() => {
       const offsetDistance = (props.popper as PopperOptions)?.offsetDistance || (ui.value.popper as PopperOptions)?.offsetDistance || 8
-
-      return props.mode === 'hover' ? { paddingTop: `${offsetDistance}px`, paddingBottom: `${offsetDistance}px` } : {}
+      const padding = `${offsetDistance}px`
+
+      return props.mode === 'hover' ? {
+        paddingTop: padding,
+        paddingBottom: padding,
+        paddingLeft: padding,
+        paddingRight: padding
+      } : {}
     })
 
     function onMouseOver () {