feat(Modal): add prevent-close prop

Resolves #303
nuxt · Jul 12, 2023 · 2cc5c0d · 2cc5c0d
1 parent e08263f
commit 2cc5c0d
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 1 deletion.
diff --git a/docs/components/content/examples/ModalExampleDisableOverlay.vue 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
@@ -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
@@ -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
@@ -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
@@ -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')
     }