From 0a7202436114042106b4769df96249ba466aa2aa Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 23 May 2025 12:24:03 +0200
Subject: [PATCH] docs(drawer): add interactive background example

Resolves #4199
---
 .../drawer/DrawerDismissibleExample.vue       |  2 +-
 .../examples/drawer/DrawerModalExample.vue    | 28 +++++++++++++++++++
 docs/content/3.components/drawer.md           | 13 ++++++++-
 docs/content/3.components/modal.md            |  2 +-
 docs/content/3.components/popover.md          |  2 +-
 docs/content/3.components/slideover.md        |  2 +-
 6 files changed, 44 insertions(+), 5 deletions(-)
 create mode 100644 docs/app/components/content/examples/drawer/DrawerModalExample.vue

diff --git a/docs/app/components/content/examples/drawer/DrawerDismissibleExample.vue b/docs/app/components/content/examples/drawer/DrawerDismissibleExample.vue
index 56de2a40..f0701ed1 100644
--- a/docs/app/components/content/examples/drawer/DrawerDismissibleExample.vue
+++ b/docs/app/components/content/examples/drawer/DrawerDismissibleExample.vue
@@ -3,7 +3,7 @@ const open = ref(false)
 </script>
 
 <template>
-  <UDrawer v-model:open="open" :dismissible="false" :ui="{ header: 'flex items-center justify-between' }">
+  <UDrawer v-model:open="open" :dismissible="false" :handle="false" :ui="{ header: 'flex items-center justify-between' }">
     <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
 
     <template #header>
diff --git a/docs/app/components/content/examples/drawer/DrawerModalExample.vue b/docs/app/components/content/examples/drawer/DrawerModalExample.vue
new file mode 100644
index 00000000..59d92c96
--- /dev/null
+++ b/docs/app/components/content/examples/drawer/DrawerModalExample.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const open = ref(false)
+</script>
+
+<template>
+  <UDrawer
+    v-model:open="open"
+    :dismissible="false"
+    :overlay="false"
+    :handle="false"
+    :modal="false"
+    :ui="{ header: 'flex items-center justify-between' }"
+  >
+    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
+
+    <template #header>
+      <h2 class="text-highlighted font-semibold">
+        Drawer non-dismissible
+      </h2>
+
+      <UButton color="neutral" variant="ghost" icon="i-lucide-x" @click="open = false" />
+    </template>
+
+    <template #body>
+      <Placeholder class="h-48" />
+    </template>
+  </UDrawer>
+</template>
diff --git a/docs/content/3.components/drawer.md b/docs/content/3.components/drawer.md
index b2069db6..d99c4d5c 100644
--- a/docs/content/3.components/drawer.md
+++ b/docs/content/3.components/drawer.md
@@ -291,7 +291,7 @@ In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts),
 This allows you to move the trigger outside of the Drawer or remove it entirely.
 ::
 
-### Prevent closing
+### Disable dismissal
 
 Set the `dismissible` prop to `false` to prevent the Drawer from being closed when clicking outside of it or pressing escape.
 
@@ -306,6 +306,17 @@ name: 'drawer-dismissible-example'
 In this example, the `header` slot is used to add a close button which is not done by default.
 ::
 
+### With interactive background
+
+Set the `overlay` and `modal` props to `false` alongside the `dismissible` prop to make the Drawer's background interactive without closing the Drawer.
+
+::component-example
+---
+prettier: true
+name: 'drawer-modal-example'
+---
+::
+
 ### Responsive drawer
 
 You can render a [Modal](/components/modal) component on desktop and a Drawer on mobile for example.
diff --git a/docs/content/3.components/modal.md b/docs/content/3.components/modal.md
index e233ae09..e8a3f7ea 100644
--- a/docs/content/3.components/modal.md
+++ b/docs/content/3.components/modal.md
@@ -274,7 +274,7 @@ In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts),
 This allows you to move the trigger outside of the Modal or remove it entirely.
 ::
 
-### Prevent closing
+### Disable dismissal
 
 Set the `dismissible` prop to `false` to prevent the Modal from being closed when clicking outside of it or pressing escape. A `close:prevent` event will be emitted when the user tries to close it.
 
diff --git a/docs/content/3.components/popover.md b/docs/content/3.components/popover.md
index 14c6388a..f89d0ef8 100644
--- a/docs/content/3.components/popover.md
+++ b/docs/content/3.components/popover.md
@@ -181,7 +181,7 @@ name: 'popover-open-example'
 In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Popover by pressing :kbd{value="O"}.
 ::
 
-### Prevent closing
+### Disable dismissal
 
 Set the `dismissible` prop to `false` to prevent the Popover from being closed when clicking outside of it or pressing escape. A `close:prevent` event will be emitted when the user tries to close it.
 
diff --git a/docs/content/3.components/slideover.md b/docs/content/3.components/slideover.md
index 9f69131e..a55c5d28 100644
--- a/docs/content/3.components/slideover.md
+++ b/docs/content/3.components/slideover.md
@@ -273,7 +273,7 @@ In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts),
 This allows you to move the trigger outside of the Slideover or remove it entirely.
 ::
 
-### Prevent closing
+### Disable dismissal
 
 Set the `dismissible` prop to `false` to prevent the Slideover from being closed when clicking outside of it or pressing escape. A `close:prevent` event will be emitted when the user tries to close it.