feat(OverlayProvider): support stacking

docs/app/app.vue

@@ -49,7 +49,7 @@ provide('navigation', mappedNavigation)
 </script>
 
 <template>
-  <UApp :toaster="appConfig.toaster">
+  <UApp :toaster="appConfig.toaster" :overlay="{ stacked: true }">
     <NuxtLoadingIndicator color="var(--ui-primary)" :height="2" />
 
     <template v-if="!route.path.startsWith('/examples')">

docs/app/assets/css/main.css

@@ -32,3 +32,28 @@ html[data-module="ui-pro"] .ui-only,
 html[data-module="ui"] .ui-pro-only {
   display: none;
 }
+
+/* For better modals stacking visual experience */
+@keyframes light-slide-in-from-bottom {
+  from {
+    transform: translateY(20%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes light-slide-out-to-bottom {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: translateY(20%);
+    opacity: 0;
+  }
+}

docs/app/components/content/examples/modal/ModalStackingExample.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { LazyStackingModal } from '#components'
+
+const overlay = useOverlay()
+
+function onClick() {
+  overlay
+    .create(LazyStackingModal, {
+      destroyOnClose: true
+    })
+    .open()
+}
+</script>
+
+<template>
+  <UButton label="Open" variant="subtle" color="neutral" @click="onClick" />
+</template>

docs/app/components/content/examples/modal/StackingModal.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+// eslint-disable-next-line import/no-self-import
+import StackingModal from './StackingModal.vue'
+
+const overlay = useOverlay()
+function onClick() {
+  overlay
+    .create(StackingModal, {
+      destroyOnClose: true
+    })
+    .open()
+}
+</script>
+
+<template>
+  <UModal
+    title="A Modal"
+    :ui="{ footer: 'justify-end', content: 'data-[state=open]:animate-[light-slide-in-from-bottom_200ms_ease-out] data-[state=closed]:animate-[light-slide-out-to-bottom_200ms_ease-in]' }"
+  >
+    <template #footer>
+      <UButton label="Another Modal" variant="subtle" color="neutral" @click="onClick" />
+    </template>
+  </UModal>
+</template>

docs/content/3.components/modal.md

@@ -347,6 +347,20 @@ name: 'modal-nested-example'
 ---
 ::
 
+### Stacking modals
+
+You can nicely stack modals on top of each other thanks to two CSS variables: `--overlay-count` and `--overlay-index`.
+
+::component-example
+---
+name: 'modal-stacking-example'
+---
+::
+
+::note
+You must enable the `stacked` variant though the App component's `overlay` prop to use this feature.
+::
+
 ### With footer slot
 
 Use the `#footer` slot to add content after the Modal's body.

playground/app/app.vue

@@ -91,7 +91,7 @@ useHead({
 
 <template>
   <template v-if="!$route.path.startsWith('/__nuxt_ui__')">
-    <UApp :toaster="appConfig.toaster">
+    <UApp :toaster="appConfig.toaster" :overlay="{ stacked: true }">
       <div class="h-screen w-screen overflow-hidden flex flex-col lg:flex-row min-h-0 bg-default" data-vaul-drawer-wrapper>
         <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-e border-default overflow-y-auto w-48 p-4" />
         <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-default [&>div]:min-w-min overflow-x-auto" />

playground/app/components/FirstModal.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import SecondModal from './SecondModal.vue'
+
+const emit = defineEmits(['close'])
+
+const overlay = useOverlay()
+function openSecondModal() {
+  overlay.create(SecondModal, {
+    destroyOnClose: true
+  }).open()
+}
+</script>
+
+<template>
+  <UModal title="First modal" description="This is the first modal opened from the button.">
+    <template #footer>
+      <UButton label="Open second modal" color="neutral" variant="outline" @click="openSecondModal" />
+      <UButton color="neutral" label="Close" @click="emit('close')" />
+    </template>
+  </UModal>
+</template>

playground/app/components/SecondModal.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const emit = defineEmits(['close'])
+</script>
+
+<template>
+  <UModal title="Second modal" description="This is the second modal opened from the button.">
+    <template #footer>
+      <UButton color="neutral" label="Close" @click="emit('close')" />
+    </template>
+  </UModal>
+</template>

playground/app/pages/components/modal.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { defineAsyncComponent } from 'vue'
+import FirstModal from '../../components/FirstModal.vue'
 
 const LazyModalExample = defineAsyncComponent(() => import('../../components/ModalExample.vue'))
 
@@ -18,6 +19,12 @@ function openModal() {
 
   modal.open({ count: count.value })
 }
+
+function openFirstModal() {
+  overlay.create(FirstModal, {
+    destroyOnClose: true
+  }).open()
+}
 </script>
 
 <template>
@@ -70,6 +77,8 @@ function openModal() {
 
     <UButton label="Open programmatically" color="neutral" variant="outline" @click="openModal" />
 
+    <UButton label="Stacked modal" color="neutral" variant="subtle" @click="openFirstModal" />
+
     <UModal title="First modal">
       <UButton color="neutral" variant="outline" label="Close with scoped slot close" />
 

src/runtime/components/App.vue

@@ -1,10 +1,11 @@
 <script lang="ts">
 import type { ConfigProviderProps, TooltipProviderProps } from 'reka-ui'
-import type { ToasterProps, Locale, Messages } from '../types'
+import type { ToasterProps, Locale, Messages, OverlayProviderProps } from '../types'
 
 export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProviderProps, 'useId' | 'dir' | 'locale'> {
   tooltip?: TooltipProviderProps
   toaster?: ToasterProps | null
+  overlay?: OverlayProviderProps
   locale?: Locale<T>
   portal?: string | HTMLElement
 }
@@ -36,6 +37,7 @@ defineSlots<AppSlots>()
 const configProviderProps = useForwardProps(reactivePick(props, 'scrollBody'))
 const tooltipProps = toRef(() => props.tooltip)
 const toasterProps = toRef(() => props.toaster)
+const overlayProps = toRef(() => props.overlay)
 
 const locale = toRef(() => props.locale)
 provide(localeContextInjectionKey, locale)
@@ -52,7 +54,7 @@ provide(portalTargetInjectionKey, portal)
       </UToaster>
       <slot v-else />
 
-      <UOverlayProvider />
+      <UOverlayProvider v-bind="overlayProps" />
     </TooltipProvider>
   </ConfigProvider>
 </template>

src/runtime/components/OverlayProvider.vue

@@ -1,6 +1,36 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import theme from '#build/ui/overlay-provider'
+import type { ComponentConfig } from '../types/utils'
+
+type OverlayProvider = ComponentConfig<typeof theme, AppConfig, 'overlayProvider'>
+
+export interface OverlayProviderProps {
+  /**
+   * Allow the overlay to nicely stack on top of each other.
+   * @defaultValue false
+   */
+  stacked?: boolean
+  class?: any
+  ui?: OverlayProvider['slots']
+}
+</script>
+
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useOverlay, type Overlay } from '../composables/useOverlay'
+import { useAppConfig } from '#imports'
+import { tv } from '../utils/tv'
+
+const props = withDefaults(defineProps<OverlayProviderProps>(), {
+  stacked: false
+})
+
+const appConfig = useAppConfig() as OverlayProvider['AppConfig']
+
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.overlayProvider || {}) })({
+  stacked: props.stacked
+}))
 
 const { overlays, unmount, close } = useOverlay()
 
@@ -19,10 +49,18 @@ const onClose = (id: symbol, value: any) => {
 <template>
   <component
     :is="overlay.component"
-    v-for="overlay in mountedOverlays"
+    v-for="(overlay, index) in mountedOverlays"
     :key="overlay.id"
     v-bind="overlay.props"
     v-model:open="overlay.isOpen"
+    :overlay="index === 0 ? true : false"
+    :content="{
+      style: {
+        '--overlay-count': mountedOverlays.length,
+        '--overlay-index': index
+      }
+    }"
+    :class="ui.base({ class: [props.ui?.base, props.class] })"
     @close="(value:any) => onClose(overlay.id, value)"
     @after:leave="onAfterLeave(overlay.id)"
   />

src/runtime/types/index.ts

@@ -31,6 +31,7 @@ export * from '../components/Kbd.vue'
 export * from '../components/Link.vue'
 export * from '../components/Modal.vue'
 export * from '../components/NavigationMenu.vue'
+export * from '../components/OverlayProvider.vue'
 export * from '../components/Pagination.vue'
 export * from '../components/PinInput.vue'
 export * from '../components/Popover.vue'

src/theme/index.ts

@@ -29,6 +29,7 @@ export { default as kbd } from './kbd'
 export { default as link } from './link'
 export { default as modal } from './modal'
 export { default as navigationMenu } from './navigation-menu'
+export { default as overlayProvider } from './overlay-provider'
 export { default as pagination } from './pagination'
 export { default as pinInput } from './pin-input'
 export { default as popover } from './popover'

src/theme/overlay-provider.ts

@@ -0,0 +1,12 @@
+export default {
+  slots: {
+    base: ''
+  },
+  variants: {
+    stacked: {
+      true: {
+        base: 'origin-top transition-transform duration-200 [--overlay-value:calc(var(--overlay-count)-var(--overlay-index)-1)] scale-[calc(1-0.05*var(--overlay-value))] transform-[translateY(calc(-1.25rem*var(--overlay-value)))]'
+      }
+    }
+  }
+}