arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-21 07:21:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Modal): add prevent-close prop

Browse Source 
Resolves #303
This commit is contained in:
Benjamin Canac
2023-07-12 15:44:17 +02:00
parent e08263ff38
commit 2cc5c0d810
5 changed files with 149 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
docs/components/content/examples/ModalExampleDisableOverlay.vue Normal file
View File

@@ -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>

15
docs/components/content/examples/ModalExampleDisableTransition.vue Normal file
View File

@@ -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>

24
docs/components/content/examples/ModalExamplePreventClose.vue Normal file
View File

@@ -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>

89
docs/content/6.overlays/1.modal.md
View File

@@ -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

7
src/runtime/components/overlays/Modal.vue
View File

@@ -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')
}