From e2695ee7e42777df5403755ded1053f76dae5aaf Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 18 Jul 2025 15:55:24 +0200
Subject: [PATCH] feat(Drawer): add `nested` prop

Resolves #4320
---
 .../examples/drawer/DrawerNestedExample.vue       | 15 +++++++++++++++
 docs/content/3.components/drawer.md               | 11 +++++++++++
 playground/app/pages/components/drawer.vue        | 14 ++++++++++++++
 src/runtime/components/Drawer.vue                 | 11 ++++++++---
 4 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 docs/app/components/content/examples/drawer/DrawerNestedExample.vue

diff --git a/docs/app/components/content/examples/drawer/DrawerNestedExample.vue b/docs/app/components/content/examples/drawer/DrawerNestedExample.vue
new file mode 100644
index 00000000..e1bf4124
--- /dev/null
+++ b/docs/app/components/content/examples/drawer/DrawerNestedExample.vue
@@ -0,0 +1,15 @@
+<template>
+  <UDrawer :ui="{ content: 'h-full', overlay: 'bg-inverted/30' }">
+    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
+
+    <template #footer>
+      <UDrawer nested :ui="{ content: 'h-full', overlay: 'bg-inverted/30' }">
+        <UButton color="neutral" variant="outline" label="Open nested" />
+
+        <template #content>
+          <Placeholder class="flex-1 m-4" />
+        </template>
+      </UDrawer>
+    </template>
+  </UDrawer>
+</template>
diff --git a/docs/content/3.components/drawer.md b/docs/content/3.components/drawer.md
index d99c4d5c..618c5d30 100644
--- a/docs/content/3.components/drawer.md
+++ b/docs/content/3.components/drawer.md
@@ -328,6 +328,17 @@ name: 'drawer-responsive-example'
 ---
 ::
 
+### Nested drawers :badge{label="Soon" class="align-text-top"}
+
+You can nest drawers within each other by using the `nested` prop.
+
+::component-example
+---
+prettier: true
+name: 'drawer-nested-example'
+---
+::
+
 ### With footer slot
 
 Use the `#footer` slot to add content after the Drawer's body.
diff --git a/playground/app/pages/components/drawer.vue b/playground/app/pages/components/drawer.vue
index 280fc5a7..1172e116 100644
--- a/playground/app/pages/components/drawer.vue
+++ b/playground/app/pages/components/drawer.vue
@@ -28,6 +28,20 @@ const inset = ref(false)
       </template>
     </UDrawer>
 
+    <UDrawer title="Drawer with nested" :inset="inset" :ui="{ content: 'h-full' }" should-scale-background>
+      <UButton color="neutral" variant="outline" label="Open nested" />
+
+      <template #footer>
+        <UDrawer :inset="inset" nested :ui="{ content: 'h-full' }">
+          <UButton color="neutral" variant="outline" label="Open nested" />
+
+          <template #content>
+            <Placeholder class="flex-1 m-4" />
+          </template>
+        </UDrawer>
+      </template>
+    </UDrawer>
+
     <UDrawer title="Drawer with bottom direction" direction="bottom" :inset="inset">
       <UButton color="neutral" variant="outline" label="Open on bottom" />
 
diff --git a/src/runtime/components/Drawer.vue b/src/runtime/components/Drawer.vue
index 8ff30f6b..83b3c806 100644
--- a/src/runtime/components/Drawer.vue
+++ b/src/runtime/components/Drawer.vue
@@ -37,6 +37,11 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
    * @defaultValue true
    */
   portal?: boolean | string | HTMLElement
+  /**
+   * Whether the drawer is nested in another drawer.
+   * @defaultValue false
+   */
+  nested?: boolean
   class?: any
   ui?: Drawer['slots']
 }
@@ -57,7 +62,7 @@ export interface DrawerSlots {
 <script setup lang="ts">
 import { computed, toRef } from 'vue'
 import { VisuallyHidden, useForwardPropsEmits } from 'reka-ui'
-import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from 'vaul-vue'
+import { DrawerRoot, DrawerRootNested, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription, DrawerHandle } from 'vaul-vue'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { usePortal } from '../composables/usePortal'
@@ -90,7 +95,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}
 </script>
 
 <template>
-  <DrawerRoot v-bind="rootProps">
+  <component :is="nested ? DrawerRootNested : DrawerRoot" v-bind="rootProps">
     <DrawerTrigger v-if="!!slots.default" as-child :class="props.class">
       <slot />
     </DrawerTrigger>
@@ -144,5 +149,5 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}
         </slot>
       </DrawerContent>
     </DrawerPortal>
-  </DrawerRoot>
+  </component>
 </template>