feat(Popover): manual mode & horizontal offset (#781)

Co-authored-by: Benjamin Canac <[email protected]>
Co-authored-by: Lnunu <[email protected]>

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>

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`

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 () {