fix(Modal/Popover/Slideover)!: rename prevent-close to dismissible + uniformize docs

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const open = ref(false)
+</script>
+
+<template>
+  <UDrawer v-model:open="open" :dismissible="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-[var(--ui-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/app/components/content/examples/popover/PopoverDismissibleExample.vue

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

docs/content/3.components/drawer.md

@@ -266,6 +266,21 @@ 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
+
+Set the `dismissible` prop to `false` to prevent the Drawer from being closed when clicking outside of it or pressing escape.
+
+::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 footer slot
 
 Use the `#footer` slot to add content after the Drawer's body.

docs/content/3.components/modal.md

@@ -253,35 +253,6 @@ slots:
 :placeholder{class="h-full"}
 ::
 
-### Prevent close
-
-Use the `prevent-close` prop to prevent the Modal from being closed when clicking outside of it.
-
-::component-code
----
-prettier: true
-ignore:
-  - title
-  - preventClose
-props:
-  preventClose: true
-  title: 'Modal prevent close'
-slots:
-  default: |
-
-    <UButton label="Open" color="neutral" variant="subtle" />
-
-  body: |
-
-    <Placeholder class="h-48" />
----
-
-:u-button{label="Open" color="neutral" variant="subtle"}
-
-#body
-:placeholder{class="h-48"}
-::
-
 ## Examples
 
 ### Control open state
@@ -302,6 +273,35 @@ 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
+
+Set the `dismissible` prop to `false` to prevent the Modal from being closed when clicking outside of it or pressing escape.
+
+::component-code
+---
+prettier: true
+ignore:
+  - title
+  - dismissible
+props:
+  dismissible: false
+  title: 'Modal non-dismissible'
+slots:
+  default: |
+
+    <UButton label="Open" color="neutral" variant="subtle" />
+
+  body: |
+
+    <Placeholder class="h-48" />
+---
+
+:u-button{label="Open" color="neutral" variant="subtle"}
+
+#body
+:placeholder{class="h-48"}
+::
+
 ### Programmatic usage
 
 You can use the [`useModal`](/composables/use-modal) composable to open a Modal programatically.

docs/content/3.components/popover.md

@@ -180,6 +180,16 @@ name: 'popover-open-example'
 In this example, leveraging [`defineShortcuts`](/composables/define-shortcuts), you can toggle the Popover by pressing :kbd{value="O"}.
 ::
 
+### Prevent closing
+
+Set the `dismissible` prop to `false` to prevent the Popover from being closed when clicking outside of it or pressing escape.
+
+::component-example
+---
+name: 'popover-dismissible-example'
+---
+::
+
 ### With command palette
 
 You can use a [CommandPalette](/components/command-palette) component inside the Popover's content.

docs/content/3.components/slideover.md

@@ -252,35 +252,6 @@ slots:
 :placeholder{class="h-full"}
 ::
 
-### Prevent close
-
-Use the `prevent-close` prop to prevent the Slideover from being closed when clicking outside of it.
-
-::component-code
----
-prettier: true
-ignore:
-  - title
-  - preventClose
-props:
-  preventClose: true
-  title: 'Slideover prevent close'
-slots:
-  default: |
-
-    <UButton label="Open" color="neutral" variant="subtle" />
-
-  body: |
-
-    <Placeholder class="h-full" />
----
-
-:u-button{label="Open" color="neutral" variant="subtle"}
-
-#body
-:placeholder{class="h-full"}
-::
-
 ## Examples
 
 ### Control open state
@@ -301,6 +272,35 @@ 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
+
+Set the `dismissible` prop to `false` to prevent the Slideover from being closed when clicking outside of it or pressing escape.
+
+::component-code
+---
+prettier: true
+ignore:
+  - title
+  - dismissible
+props:
+  dismissible: false
+  title: 'Slideover non-dismissible'
+slots:
+  default: |
+
+    <UButton label="Open" color="neutral" variant="subtle" />
+
+  body: |
+
+    <Placeholder class="h-full" />
+---
+
+:u-button{label="Open" color="neutral" variant="subtle"}
+
+#body
+:placeholder{class="h-full"}
+::
+
 ### Programmatic usage
 
 You can use the [`useSlideover`](/composables/use-slideover) composable to open a Slideover programatically.