From 2cc5c0d810e30b889081d1f457d725004bd0b933 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 12 Jul 2023 15:44:17 +0200
Subject: [PATCH] feat(Modal): add `prevent-close` prop

Resolves #303
---
 .../examples/ModalExampleDisableOverlay.vue   | 15 ++++
 .../ModalExampleDisableTransition.vue         | 15 ++++
 .../examples/ModalExamplePreventClose.vue     | 24 +++++
 docs/content/6.overlays/1.modal.md            | 89 +++++++++++++++++++
 src/runtime/components/overlays/Modal.vue     |  7 +-
 5 files changed, 149 insertions(+), 1 deletion(-)
 create mode 100644 docs/components/content/examples/ModalExampleDisableOverlay.vue
 create mode 100644 docs/components/content/examples/ModalExampleDisableTransition.vue
 create mode 100644 docs/components/content/examples/ModalExamplePreventClose.vue

diff --git a/docs/components/content/examples/ModalExampleDisableOverlay.vue b/docs/components/content/examples/ModalExampleDisableOverlay.vue
new file mode 100644
index 0000000000..c4e460bc64
--- /dev/null
+++ b/docs/components/content/examples/ModalExampleDisableOverlay.vue
@@ -0,0 +1,15 @@
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <UModal v-model="isOpen" :overlay="false">
+      <div class="p-4">
+        <Placeholder class="h-48" />
+      </div>
+    </UModal>
+  </div>
+</template>
diff --git a/docs/components/content/examples/ModalExampleDisableTransition.vue b/docs/components/content/examples/ModalExampleDisableTransition.vue
new file mode 100644
index 0000000000..b8a24890a2
--- /dev/null
+++ b/docs/components/content/examples/ModalExampleDisableTransition.vue
@@ -0,0 +1,15 @@
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <UModal v-model="isOpen" :transition="false">
+      <div class="p-4">
+        <Placeholder class="h-48" />
+      </div>
+    </UModal>
+  </div>
+</template>
diff --git a/docs/components/content/examples/ModalExamplePreventClose.vue b/docs/components/content/examples/ModalExamplePreventClose.vue
new file mode 100644
index 0000000000..6e4f78eb8c
--- /dev/null
+++ b/docs/components/content/examples/ModalExamplePreventClose.vue
@@ -0,0 +1,24 @@
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <UModal v-model="isOpen" prevent-close>
+      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              Modal
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
+          </div>
+        </template>
+
+        <Placeholder class="h-32" />
+      </UCard>
+    </UModal>
+  </div>
+</template>
diff --git a/docs/content/6.overlays/1.modal.md b/docs/content/6.overlays/1.modal.md
index f56a73bf6a..ce55f398d9 100644
--- a/docs/content/6.overlays/1.modal.md
+++ b/docs/content/6.overlays/1.modal.md
@@ -8,6 +8,8 @@ headlessui:
 
 ## Usage
 
+Use a `v-model` to control the Modal state.
+
 ::component-example
 #default
 :modal-example-basic
@@ -64,6 +66,93 @@ const isOpen = ref(false)
 ```
 ::
 
+### Disable overlay
+
+::component-example
+#default
+:modal-example-disable-overlay
+
+#code
+```vue
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <UModal v-model="isOpen" :overlay="false">
+      <div class="p-4">
+        <Placeholder class="h-48" />
+      </div>
+    </UModal>
+  </div>
+</template>
+```
+::
+
+### Disable transition
+
+::component-example
+#default
+:modal-example-disable-transition
+
+#code
+```vue
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <UModal v-model="isOpen" :transition="false">
+      <div class="p-4">
+        <Placeholder class="h-48" />
+      </div>
+    </UModal>
+  </div>
+</template>
+```
+::
+
+### Prevent close
+
+::component-example
+#default
+:modal-example-prevent-close
+
+#code
+```vue
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <UModal v-model="isOpen" prevent-close>
+      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              Modal
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
+          </div>
+        </template>
+
+        <Placeholder class="h-32" />
+      </UCard>
+    </UModal>
+  </div>
+</template>
+```
+::
+
 ## Props
 
 :component-props
diff --git a/src/runtime/components/overlays/Modal.vue b/src/runtime/components/overlays/Modal.vue
index b28b2330d7..66d66d9f19 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" @close="close">
+    <HDialog :class="ui.wrapper" @close="(e) => !preventClose && close(e)">
       <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
       </TransitionChild>
@@ -54,6 +54,10 @@ export default defineComponent({
       type: Boolean,
       default: true
     },
+    preventClose: {
+      type: Boolean,
+      default: false
+    },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.modal>>,
       default: () => appConfig.ui.modal
@@ -87,6 +91,7 @@ export default defineComponent({
 
     function close (value: boolean) {
       isOpen.value = value
+
       emit('close')
     }