From 3ee99a2d4b86fa38662776d8c69b21d89c98596f Mon Sep 17 00:00:00 2001
From: Alireza <ar.jahandideh@gmail.com>
Date: Sat, 6 Jan 2024 01:03:05 -0800
Subject: [PATCH 1/2] add close-prevented emit for Modal

---
 docs/content/6.overlays/1.modal.md        |  2 +-
 src/runtime/components/overlays/Modal.vue | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/docs/content/6.overlays/1.modal.md b/docs/content/6.overlays/1.modal.md
index e71dff0f84..c2f2a3faf0 100644
--- a/docs/content/6.overlays/1.modal.md
+++ b/docs/content/6.overlays/1.modal.md
@@ -33,7 +33,7 @@ Set the `transition` prop to `false` to disable it.
 
 ### Prevent close
 
-Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut.
+Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut. A `close-prevented` event will be emitted when the user tries to close the modal.
 
 :component-example{component="modal-example-prevent-close"}
 
diff --git a/src/runtime/components/overlays/Modal.vue b/src/runtime/components/overlays/Modal.vue
index 5b726619b4..4f5edb21df 100644
--- a/src/runtime/components/overlays/Modal.vue
+++ b/src/runtime/components/overlays/Modal.vue
@@ -1,6 +1,6 @@
 <template>
   <TransitionRoot :appear="appear" :show="isOpen" as="template">
-    <HDialog :class="ui.wrapper" v-bind="attrs" @close="(e) => !preventClose && close(e)">
+    <HDialog :class="ui.wrapper" v-bind="attrs" @close="close">
       <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
       </TransitionChild>
@@ -81,7 +81,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ['update:modelValue', 'close'],
+  emits: ['update:modelValue', 'close', 'close-prevented'],
   setup (props, { emit }) {
     const { ui, attrs } = useUI('modal', toRef(props, 'ui'), config, toRef(props, 'class'))
 
@@ -105,6 +105,12 @@ export default defineComponent({
     })
 
     function close (value: boolean) {
+      if (props.preventClose) {
+        emit('close-prevented')
+        
+        return
+      }
+
       isOpen.value = value
 
       emit('close')

From e7870691b79e408c7361ec00ad291c78cde0d7da Mon Sep 17 00:00:00 2001
From: Alireza <ar.jahandideh@gmail.com>
Date: Tue, 9 Jan 2024 12:00:19 -0800
Subject: [PATCH 2/2] add close-prevented emit for Slideover

---
 docs/content/6.overlays/2.slideover.md        |  2 +-
 src/runtime/components/overlays/Slideover.vue | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/docs/content/6.overlays/2.slideover.md b/docs/content/6.overlays/2.slideover.md
index 9c7b838e16..6a471cb9eb 100644
--- a/docs/content/6.overlays/2.slideover.md
+++ b/docs/content/6.overlays/2.slideover.md
@@ -33,7 +33,7 @@ Set the `transition` prop to `false` to disable it.
 
 ### Prevent close
 
-Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut.
+Use the `prevent-close` prop to disable the outside click alongside the `esc` keyboard shortcut. A `close-prevented` event will be emitted when the user tries to close the modal.
 
 :component-example{component="slideover-example-prevent-close"}
 
diff --git a/src/runtime/components/overlays/Slideover.vue b/src/runtime/components/overlays/Slideover.vue
index a53e1a5bc9..56b0ce3adf 100644
--- a/src/runtime/components/overlays/Slideover.vue
+++ b/src/runtime/components/overlays/Slideover.vue
@@ -1,6 +1,6 @@
 <template>
   <TransitionRoot as="template" :appear="appear" :show="isOpen">
-    <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" v-bind="attrs" @close="(e) => !preventClose && close(e)">
+    <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" v-bind="attrs" @close="close">
       <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
       </TransitionChild>
@@ -70,7 +70,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ['update:modelValue', 'close'],
+  emits: ['update:modelValue', 'close', 'close-prevented'],
   setup (props, { emit }) {
     const { ui, attrs } = useUI('slideover', toRef(props, 'ui'), config, toRef(props, 'class'))
 
@@ -98,6 +98,12 @@ export default defineComponent({
     })
 
     function close (value: boolean) {
+      if (props.preventClose) {
+        emit('close-prevented')
+        
+        return
+      }
+
       isOpen.value = value
       emit('close')
     }