feat(Popover): ability to add overlay (#1014)

docs/components/content/examples/PopoverExampleOverlay.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="flex gap-4 items-center">
+    <UPopover overlay>
+      <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

@@ -25,6 +25,14 @@ Use the `open` prop to manually control showing the panel.
 
 :component-example{component="popover-example-open"}
 
+### Overlay :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+
+:component-example{component="popover-example-overlay"}
+
+::callout{icon="i-heroicons-light-bulb"}
+  Clicking on the `overlay` emits `update:open`. If you are manually controlling the `open` prop, you will need to use a [`v-model` argument](https://vuejs.org/guide/components/v-model.html#v-model-arguments) (`v-model:open`).
+::
+
 ## Popper
 
 Use the `popper` prop to customize the popper instance.

src/runtime/components/overlays/Popover.vue

@@ -15,6 +15,10 @@
       </slot>
     </HPopoverButton>
 
+    <Transition v-if="overlay" appear v-bind="ui.overlay.transition">
+      <div v-if="(open !== undefined) ? open : headlessOpen" :class="[ui.overlay.base, ui.overlay.background]" @click="$emit('update:open')" />
+    </Transition>
+
     <div v-if="(open !== undefined) ? open : headlessOpen" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
       <Transition appear v-bind="ui.transition">
         <div>
@@ -72,6 +76,10 @@ export default defineComponent({
       type: Number,
       default: 0
     },
+    overlay: {
+      type: Boolean,
+      default: false
+    },
     popper: {
       type: Object as PropType<PopperOptions>,
       default: () => ({})
@@ -85,6 +93,7 @@ export default defineComponent({
       default: undefined
     }
   },
+  emits: ['update:open'],
   setup (props) {
     const { ui, attrs } = useUI('popover', toRef(props, 'ui'), config, toRef(props, 'class'))
 

src/runtime/ui.config/overlays/popover.ts

@@ -2,7 +2,7 @@ import arrow from '../_popperArrow'
 
 export default {
   wrapper: 'relative',
-  container: 'z-20 group',
+  container: 'z-50 group',
   width: '',
   background: 'bg-white dark:bg-gray-900',
   shadow: 'shadow-lg',
@@ -18,8 +18,20 @@ export default {
     leaveFromClass: 'opacity-100 translate-y-0',
     leaveToClass: 'opacity-0 translate-y-1'
   },
+  overlay: {
+    base: 'fixed inset-0 transition-opacity z-50',
+    background: 'bg-gray-200/75 dark:bg-gray-800/75',
+    transition: {
+      enterActiveClass: 'ease-out duration-200',
+      enterFromClass: 'opacity-0',
+      enterToClass: 'opacity-100',
+      leaveActiveClass: 'ease-in duration-150',
+      leaveFromClass: 'opacity-100',
+      leaveToClass: 'opacity-0'
+    }
+  },
   popper: {
     strategy: 'fixed'
   },
   arrow
-}
+}