Skip to content

Commit

Permalink
Showing 4 changed files with 18 additions and 6 deletions.
2 changes: 1 addition & 1 deletion docs/content/6.overlays/1.modal.md
Original file line number Diff line number Diff line change
@@ -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 changes: 1 addition & 1 deletion docs/content/6.overlays/2.slideover.md
Original file line number Diff line number Diff line change
@@ -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 changes: 8 additions & 2 deletions src/runtime/components/overlays/Modal.vue
Original file line number Diff line number Diff line change
@@ -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 changes: 8 additions & 2 deletions src/runtime/components/overlays/Slideover.vue
Original file line number Diff line number Diff line change
@@ -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')
}

0 comments on commit 6faf15b

Please sign in to comment.