feat(Modal): add scrollable prop (#5306)

Author: benjamincanac

docs/app/components/content/examples/drawer/DrawerDismissibleExample.vue

@@ -3,19 +3,19 @@ const open = ref(false)
 </script>
 
 <template>
-  <UDrawer v-model:open="open" :dismissible="false" :handle="false" :ui="{ header: 'flex items-center justify-between' }">
+  <UDrawer v-model:open="open" :dismissible="false" :modal="false" :handle="false">
     <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>
+    <template #body>
+      <div class="flex items-center justify-between gap-4 mb-4">
+        <h2 class="text-highlighted font-semibold">
+          Drawer non-dismissible
+        </h2>
 
-      <UButton color="neutral" variant="ghost" icon="i-lucide-x" @click="open = false" />
-    </template>
+        <UButton color="neutral" variant="ghost" icon="i-lucide-x" @click="open = false" />
+      </div>
 
-    <template #body>
-      <Placeholder class="h-48" />
+      <Placeholder class="size-full min-h-48" />
     </template>
   </UDrawer>
 </template>

docs/app/components/content/examples/drawer/DrawerModalExample.vue

@@ -1,18 +1,14 @@
-<script setup lang="ts">
-const open = ref(false)
-</script>
-
 <template>
-  <UPopover v-model:open="open" :dismissible="false" :ui="{ content: 'p-4' }">
+  <UPopover :dismissible="false" :ui="{ content: 'p-4' }">
     <UButton label="Open" color="neutral" variant="subtle" />
 
-    <template #content>
+    <template #content="{ close }">
       <div class="flex items-center gap-4 mb-4">
         <h2 class="text-highlighted font-semibold">
           Popover non-dismissible
         </h2>
 
-        <UButton color="neutral" variant="ghost" icon="i-lucide-x" @click="open = false" />
+        <UButton color="neutral" variant="ghost" icon="i-lucide-x" @click="close" />
       </div>
 
       <Placeholder class="size-full min-h-48" />

docs/app/components/content/examples/popover/PopoverDismissibleExample.vue

@@ -218,6 +218,43 @@ slots:
 :div{class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72"}[Right click here]
 ::
 
+### Modal
+
+Use the `modal` prop to control whether the ContextMenu blocks interaction with outside content. Defaults to `true`.
+
+::component-code
+---
+prettier: true
+ignore:
+  - items
+  - ui.content
+external:
+  - items
+externalTypes:
+  - ContextMenuItem[]
+props:
+  modal: false
+  items:
+    - label: System
+      icon: i-lucide-monitor
+    - label: Light
+      icon: i-lucide-sun
+    - label: Dark
+      icon: i-lucide-moon
+  ui:
+    content: 'w-48'
+slots:
+  default: |
+
+    <div class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72">
+      Right click here
+    </div>
+---
+
+:div{class="flex items-center justify-center rounded-md border border-dashed border-accented text-sm aspect-video w-72"}[Right click here]
+::
+
+
 ### Disabled
 
 Use the `disabled` prop to disable the ContextMenu.

docs/content/docs/2.components/context-menu.md

@@ -216,6 +216,54 @@ slots:
 :placeholder{class="h-48 m-4"}
 ::
 
+### Modal
+
+Use the `modal` prop to control whether the Drawer blocks interaction with outside content. Defaults to `true`.
+
+::note
+When `modal` is set to `false`, the overlay is automatically disabled and outside content becomes interactive.
+::
+
+::component-code
+---
+prettier: true
+props:
+  modal: false
+slots:
+  default: |
+
+    <UButton label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up" />
+
+  content: |
+
+    <Placeholder class="h-48 m-4" />
+---
+
+:u-button{label="Open" color="neutral" variant="subtle" trailing-icon="i-lucide-chevron-up"}
+
+#content
+:placeholder{class="h-48 m-4"}
+::
+
+### Dismissible
+
+Use the `dismissible` prop to control whether the Drawer is dismissible when clicking outside of it or pressing escape. Defaults to `true`.
+
+::note
+A `close:prevent` event will be emitted when the user tries to close it.
+::
+
+::tip
+You can combine `modal: false` with `dismissible: false` to make the Drawer's background interactive without closing it.
+::
+
+::component-example
+---
+prettier: true
+name: 'drawer-dismissible-example'
+---
+::
+
 ### Scale Background
 
 Use the `should-scale-background` prop to scale the background when the Drawer is open, creating a visual depth effect. You can set the `set-background-color-on-scale` prop to `false` to prevent changing the background color.
@@ -291,32 +339,6 @@ In this example, leveraging [`defineShortcuts`](/docs/composables/define-shortcu
 This allows you to move the trigger outside of the Drawer or remove it entirely.
 ::
 
-### Disable dismissal
-
-Set the `dismissible` prop to `false` to prevent the Drawer 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.
-
-::component-example
----
-prettier: true
-name: 'drawer-dismissible-example'
----
-::
-
-::note
-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](/docs/components/modal) component on desktop and a Drawer on mobile for example.

docs/content/docs/2.components/drawer.md

@@ -307,6 +307,40 @@ The `size` prop will not be proxied to the Button, you need to set it yourself.
 When using the same size, the DropdownMenu items will be perfectly aligned with the Button.
 ::
 
+### Modal
+
+Use the `modal` prop to control whether the DropdownMenu blocks interaction with outside content. Defaults to `true`.
+
+::component-code
+---
+prettier: true
+ignore:
+  - items
+  - ui.content
+external:
+  - items
+externalTypes:
+  - DropdownMenuItem[]
+props:
+  modal: false
+  items:
+    - label: Profile
+      icon: i-lucide-user
+    - label: Billing
+      icon: i-lucide-credit-card
+    - label: Settings
+      icon: i-lucide-cog
+  ui:
+    content: 'w-48'
+slots:
+  default: |
+
+    <UButton label="Open" icon="i-lucide-menu" color="neutral" variant="outline" />
+---
+
+:u-button{label="Open" icon="i-lucide-menu" color="neutral" variant="outline"}
+::
+
 ### Disabled
 
 Use the `disabled` prop to disable the DropdownMenu.