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.

src/runtime/components/Drawer.vue

@@ -11,7 +11,7 @@ const appConfig = _appConfig as AppConfig & { ui: { drawer: Partial<typeof theme
 
 const drawer = tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}) })
 
-export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'defaultOpen' | 'direction' | 'dismissible' | 'fadeFromIndex' | 'fixed' | 'modal' | 'nested' | 'direction' | 'open' | 'scrollLockTimeout' | 'shouldScaleBackground' | 'snapPoints'> {
+export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | 'closeThreshold' | 'defaultOpen' | 'direction' | 'fadeFromIndex' | 'fixed' | 'modal' | 'nested' | 'direction' | 'open' | 'scrollLockTimeout' | 'shouldScaleBackground' | 'snapPoints'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -36,6 +36,11 @@ export interface DrawerProps extends Pick<DrawerRootProps, 'activeSnapPoint' | '
    * @defaultValue true
    */
   portal?: boolean
+  /**
+   * When `false`, the drawer will not close when clicking outside or pressing escape.
+   * @defaultValue true
+   */
+  dismissible?: boolean
   class?: any
   ui?: Partial<typeof drawer.slots>
 }

src/runtime/components/Modal.vue

@@ -48,10 +48,10 @@ export interface ModalProps extends DialogRootProps {
    */
   closeIcon?: string
   /**
-   * When `true`, the modal will not close when clicking outside.
+   * When `false`, the modal will not close when clicking outside or pressing escape.
-   * @defaultValue false
+   * @defaultValue true
    */
-  preventClose?: boolean
+  dismissible?: boolean
   class?: any
   ui?: Partial<typeof modal.slots>
 }
@@ -85,7 +85,8 @@ const props = withDefaults(defineProps<ModalProps>(), {
   portal: true,
   overlay: true,
   transition: true,
-  modal: true
+  modal: true,
+  dismissible: true
 })
 const emits = defineEmits<ModalEmits>()
 const slots = defineSlots<ModalSlots>()
@@ -96,7 +97,7 @@ const appConfig = useAppConfig()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
 const contentProps = toRef(() => props.content)
 const contentEvents = computed(() => {
-  if (props.preventClose) {
+  if (!props.dismissible) {
     return {
       pointerDownOutside: (e: Event) => e.preventDefault(),
       interactOutside: (e: Event) => e.preventDefault(),

src/runtime/components/Popover.vue

@@ -32,10 +32,10 @@ export interface PopoverProps extends PopoverRootProps, Pick<HoverCardRootProps,
    */
   portal?: boolean
   /**
-   * When `true`, the popover will not close when clicking outside.
+   * When `false`, the popover will not close when clicking outside or pressing escape.
-   * @defaultValue false
+   * @defaultValue true
    */
-  preventClose?: boolean
+  dismissible?: boolean
   class?: any
   ui?: Partial<typeof popover.slots>
 }
@@ -61,7 +61,8 @@ const props = withDefaults(defineProps<PopoverProps>(), {
   portal: true,
   mode: 'click',
   openDelay: 0,
-  closeDelay: 0
+  closeDelay: 0,
+  dismissible: true
 })
 const emits = defineEmits<PopoverEmits>()
 const slots = defineSlots<PopoverSlots>()
@@ -70,7 +71,7 @@ const pick = props.mode === 'hover' ? reactivePick(props, 'defaultOpen', 'open',
 const rootProps = useForwardPropsEmits(pick, emits)
 const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8 }) as PopoverContentProps)
 const contentEvents = computed(() => {
-  if (props.preventClose) {
+  if (!props.dismissible) {
     return {
       pointerDownOutside: (e: Event) => e.preventDefault(),
       interactOutside: (e: Event) => e.preventDefault(),

src/runtime/components/Slideover.vue

@@ -46,10 +46,10 @@ export interface SlideoverProps extends DialogRootProps {
    */
   closeIcon?: string
   /**
-   * When `true`, the slideover will not close when clicking outside.
+   * When `false`, the slideover will not close when clicking outside or pressing escape.
-   * @defaultValue false
+   * @defaultValue true
    */
-  preventClose?: boolean
+  dismissible?: boolean
   class?: any
   ui?: Partial<typeof slideover.slots>
 }
@@ -84,6 +84,7 @@ const props = withDefaults(defineProps<SlideoverProps>(), {
   overlay: true,
   transition: true,
   modal: true,
+  dismissible: true,
   side: 'right'
 })
 const emits = defineEmits<SlideoverEmits>()
@@ -95,7 +96,7 @@ const appConfig = useAppConfig()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
 const contentProps = toRef(() => props.content)
 const contentEvents = computed(() => {
-  if (props.preventClose) {
+  if (!props.dismissible) {
     return {
       pointerDownOutside: (e: Event) => e.preventDefault(),
       interactOutside: (e: Event) => e.preventDefault(),