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

feat(Modal/Slideover): emit close-prevented event (#1207)

Browse Source
This commit is contained in:
Alireza Jahandideh
2024-01-19 06:45:16 -08:00
committed by GitHub
parent ac5224cbae
commit 6faf15bc74
4 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

2
docs/content/6.overlays/2.slideover.md
View File

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

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

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

10
src/runtime/components/overlays/Slideover.vue
View File

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