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

feat(Modal/Slideover): add after:enter event (#4187)

Browse Source
This commit is contained in:
Eugen Istoc
2025-05-23 06:39:53 -04:00
committed by GitHub
parent dae9f0b863
commit d9e9fea35e
2 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/runtime/components/Modal.vue
View File

@@ -55,6 +55,7 @@ export interface ModalProps extends DialogRootProps {
export interface ModalEmits extends DialogRootEmits { export interface ModalEmits extends DialogRootEmits {
'after:leave': [] 'after:leave': []
'after:enter': []
'close:prevent': [] 'close:prevent': []
} }
@@ -132,7 +133,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
<DialogPortal v-bind="portalProps"> <DialogPortal v-bind="portalProps">
<DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" /> <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
<DialogContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @after-leave="emits('after:leave')" v-on="contentEvents"> <DialogContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @after-enter="emits('after:enter')" @after-leave="emits('after:leave')" v-on="contentEvents">
<VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))"> <VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))">
<DialogTitle v-if="title || !!slots.title"> <DialogTitle v-if="title || !!slots.title">
<slot name="title"> <slot name="title">

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

@@ -55,6 +55,7 @@ export interface SlideoverProps extends DialogRootProps {
export interface SlideoverEmits extends DialogRootEmits { export interface SlideoverEmits extends DialogRootEmits {
'after:leave': [] 'after:leave': []
'after:enter': []
'close:prevent': [] 'close:prevent': []
} }
@@ -132,7 +133,14 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.slideover ||
<DialogPortal v-bind="portalProps"> <DialogPortal v-bind="portalProps">
<DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" /> <DialogOverlay v-if="overlay" :class="ui.overlay({ class: props.ui?.overlay })" />
<DialogContent :data-side="side" :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @after-leave="emits('after:leave')" v-on="contentEvents"> <DialogContent
:data-side="side"
:class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
v-bind="contentProps"
@after-enter="emits('after:enter')"
@after-leave="emits('after:leave')"
v-on="contentEvents"
>
<VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))"> <VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))">
<DialogTitle v-if="title || !!slots.title"> <DialogTitle v-if="title || !!slots.title">
<slot name="title"> <slot name="title">