arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-25 09:20:36 +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