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

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
-}
+}