refactor: use overlay-provider theme

Author: Barbapapazes

docs/app/app.config.ts

@@ -4,14 +4,6 @@ export default defineAppConfig({
     expand: true,
     duration: 5000
   },
-  overlay: {
-    class: 'origin-top transition-transform duration-600',
-    style: {
-      '--overlay-value': 'calc(var(--overlay-count) - var(--overlay-index) - 1)',
-      'scale': 'calc(100% - 5% * var(--overlay-value))',
-      'transform': 'translateY(calc(-1.25rem * var(--overlay-value)))'
-    }
-  },
   theme: {
     radius: 0.25,
     blackAsPrimary: false

docs/app/app.vue

@@ -49,7 +49,7 @@ provide('navigation', mappedNavigation)
 </script>
 
 <template>
-  <UApp :toaster="appConfig.toaster" :overlay="appConfig.overlay">
+  <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

@@ -36,7 +36,7 @@ html[data-module="ui"] .ui-pro-only {
 /* For better modals stacking visual experience */
 @keyframes light-slide-in-from-bottom {
   from {
-    transform: translateY(60%);
+    transform: translateY(20%);
     opacity: 0;
   }
 
@@ -53,7 +53,7 @@ html[data-module="ui"] .ui-pro-only {
   }
 
   to {
-    transform: translateY(60%);
+    transform: translateY(20%);
     opacity: 0;
   }
 }

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

@@ -15,7 +15,7 @@ function onClick() {
 <template>
   <UModal
     title="A Modal"
-    :ui="{ footer: 'justify-end', content: 'data-[state=open]:animate-[light-slide-in-from-bottom_600ms_ease-out] data-[state=closed]:animate-[light-slide-out-to-bottom_600ms_ease-in]' }"
+    :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" />

docs/content/3.components/modal.md

@@ -357,33 +357,10 @@ name: 'modal-stacking-example'
 ---
 ::
 
-The demo above is slow intentionally to demonstrate the stacking effect.
-
-To achieve this visual effect, a custom configuration for the overlay is required:
-
-```ts
-{
-  overlay: {
-    class: 'origin-top transition-transform duration-600',
-    style: {
-      '--overlay-value': 'calc(var(--overlay-count) - var(--overlay-index) - 1)',
-      'scale': 'calc(100% - 5% * var(--overlay-value))',
-      'transform': 'translateY(calc(-1.25rem * var(--overlay-value)))'
-    }
-  }
-}
-```
-
 ::note
-This configuration is the one used in the demo above but you can customize it to your needs. Nuxt UI only provides the CSS variables by default.
+You must enable the `stacked` variant though the App component's `overlay` prop to use this feature.
 ::
 
-Then, you'll have to provide this configuration to the `App` component:
-
-```vue-html
-<UApp :overlay="appConfig.overlay">
-```
-
 ### With footer slot
 
 Use the `#footer` slot to add content after the Modal's body.

playground/app/app.config.ts

@@ -4,14 +4,6 @@ export default defineAppConfig({
     expand: true,
     duration: 5000
   },
-  overlay: {
-    class: 'origin-top transition-transform duration-100',
-    style: {
-      '--overlay-value': 'calc(var(--overlay-count) - var(--overlay-index) - 1)',
-      'scale': 'calc(100% - 5% * var(--overlay-value))',
-      'transform': 'translateY(calc(-1.25rem * var(--overlay-value)))'
-    }
-  },
   ui: {
     colors: {
       primary: 'green',

playground/app/app.vue

@@ -91,7 +91,7 @@ useHead({
 
 <template>
   <template v-if="!$route.path.startsWith('/__nuxt_ui__')">
-    <UApp :toaster="appConfig.toaster" :overlay="appConfig.overlay">
+    <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" />

src/runtime/components/App.vue

@@ -1,11 +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?: Record<string, any>
+  overlay?: OverlayProviderProps
   locale?: Locale<T>
   portal?: string | HTMLElement
 }

src/runtime/components/OverlayProvider.vue

@@ -1,11 +1,37 @@
+<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'
 
-defineOptions({
-  inheritAttrs: false
+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()
 
 const mountedOverlays = computed(() => overlays.filter((overlay: Overlay) => overlay.isMounted))
@@ -29,13 +55,12 @@ const onClose = (id: symbol, value: any) => {
     v-model:open="overlay.isOpen"
     :overlay="index === 0 ? true : false"
     :content="{
-      ...$attrs,
       style: {
         '--overlay-count': mountedOverlays.length,
-        '--overlay-index': index,
-        ...($attrs as any).style
+        '--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

@@ -55,3 +55,4 @@ export * from '../components/Tree.vue'
 export * from './form'
 export * from './locale'
 export * from './utils'
+export * from '../components/OverlayProvider.vue'