docs(drawer): add interactive background example

Resolves #4199

Author: benjamincanac

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>

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>

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.

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.
 

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.
 

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.