From 44f4bf07ee5e2bc6b11262f06abd767c4554d72b Mon Sep 17 00:00:00 2001
From: Typed SIGTERM <typed.sigterm@gmail.com>
Date: Fri, 15 Aug 2025 21:29:03 +0800
Subject: [PATCH 1/5] feat(Modal): pass `animating` prop to slots

---
 src/runtime/components/Modal.vue | 62 ++++++++++++++++++++------------
 1 file changed, 40 insertions(+), 22 deletions(-)

diff --git a/src/runtime/components/Modal.vue b/src/runtime/components/Modal.vue
index 228e335ba5..f6e7de121d 100644
--- a/src/runtime/components/Modal.vue
+++ b/src/runtime/components/Modal.vue
@@ -60,20 +60,20 @@ export interface ModalEmits extends DialogRootEmits {
 }
 
 export interface ModalSlots {
-  default(props: { open: boolean }): any
-  content(props: { close: () => void }): any
-  header(props: { close: () => void }): any
-  title(props?: {}): any
-  description(props?: {}): any
-  actions(props?: {}): any
-  close(props: { close: () => void, ui: { [K in keyof Required<Modal['slots']>]: (props?: Record<string, any>) => string } }): any
-  body(props: { close: () => void }): any
-  footer(props: { close: () => void }): any
+  default(props: { open: boolean, animating: boolean }): any
+  content(props: { close: () => void, animating: boolean }): any
+  header(props: { close: () => void, animating: boolean }): any
+  title(props: { animating: boolean }): any
+  description(props: { animating: boolean }): any
+  actions(props: { animating: boolean }): any
+  close(props: { close: () => void, ui: { [K in keyof Required<Modal['slots']>]: (props?: Record<string, any>) => string }, animating: boolean }): any
+  body(props: { close: () => void, animating: boolean }): any
+  footer(props: { close: () => void, animating: boolean }): any
 }
 </script>
 
 <script setup lang="ts">
-import { computed, toRef } from 'vue'
+import { computed, toRef, ref, watch } from 'vue'
 import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
@@ -96,6 +96,8 @@ const slots = defineSlots<ModalSlots>()
 const { t } = useLocale()
 const appConfig = useAppConfig() as Modal['AppConfig']
 
+const animating = ref(false)
+
 const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
 const portalProps = usePortal(toRef(() => props.portal))
 const contentProps = toRef(() => props.content)
@@ -123,54 +125,70 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
   transition: props.transition,
   fullscreen: props.fullscreen
 }))
+
+watch(() => props.open, () => {
+  if (props.transition) {
+    animating.value = true
+  }
+})
+
+function handleAfterEnter() {
+  animating.value = false
+  emits('after:enter')
+}
+
+function handleAfterLeave() {
+  animating.value = false
+  emits('after:leave')
+}
 </script>
 
 <!-- eslint-disable vue/no-template-shadow -->
 <template>
   <DialogRoot v-slot="{ open, close }" v-bind="rootProps">
     <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
-      <slot :open="open" />
+      <slot :open="open" :animating="animating" />
     </DialogTrigger>
 
     <DialogPortal v-bind="portalProps">
       <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-enter="emits('after:enter')" @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="handleAfterEnter" @after-leave="handleAfterLeave" v-on="contentEvents">
         <VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))">
           <DialogTitle v-if="title || !!slots.title">
-            <slot name="title">
+            <slot name="title" :animating="animating">
               {{ title }}
             </slot>
           </DialogTitle>
 
           <DialogDescription v-if="description || !!slots.description">
-            <slot name="description">
+            <slot name="description" :animating="animating">
               {{ description }}
             </slot>
           </DialogDescription>
         </VisuallyHidden>
 
-        <slot name="content" :close="close">
+        <slot name="content" :close="close" :animating="animating">
           <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
-            <slot name="header" :close="close">
+            <slot name="header" :close="close" :animating="animating">
               <div :class="ui.wrapper({ class: props.ui?.wrapper })">
                 <DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
-                  <slot name="title">
+                  <slot name="title" :animating="animating">
                     {{ title }}
                   </slot>
                 </DialogTitle>
 
                 <DialogDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
-                  <slot name="description">
+                  <slot name="description" :animating="animating">
                     {{ description }}
                   </slot>
                 </DialogDescription>
               </div>
 
-              <slot name="actions" />
+              <slot name="actions" :animating="animating" />
 
               <DialogClose v-if="props.close || !!slots.close" as-child>
-                <slot name="close" :close="close" :ui="ui">
+                <slot name="close" :close="close" :ui="ui" :animating="animating">
                   <UButton
                     v-if="props.close"
                     :icon="closeIcon || appConfig.ui.icons.close"
@@ -186,11 +204,11 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
           </div>
 
           <div v-if="!!slots.body" :class="ui.body({ class: props.ui?.body })">
-            <slot name="body" :close="close" />
+            <slot name="body" :close="close" :animating="animating" />
           </div>
 
           <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
-            <slot name="footer" :close="close" />
+            <slot name="footer" :close="close" :animating="animating" />
           </div>
         </slot>
       </DialogContent>

From eae0587e2442ff31bcb873ddb9ec5f44ba89355b Mon Sep 17 00:00:00 2001
From: Typed SIGTERM <typed.sigterm@gmail.com>
Date: Fri, 15 Aug 2025 22:54:57 +0800
Subject: [PATCH 2/5] `animating` -> `transitioning`

---
 src/runtime/components/Modal.vue | 48 ++++++++++++++++----------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/runtime/components/Modal.vue b/src/runtime/components/Modal.vue
index f6e7de121d..2f1d919dfa 100644
--- a/src/runtime/components/Modal.vue
+++ b/src/runtime/components/Modal.vue
@@ -60,15 +60,15 @@ export interface ModalEmits extends DialogRootEmits {
 }
 
 export interface ModalSlots {
-  default(props: { open: boolean, animating: boolean }): any
-  content(props: { close: () => void, animating: boolean }): any
-  header(props: { close: () => void, animating: boolean }): any
-  title(props: { animating: boolean }): any
-  description(props: { animating: boolean }): any
-  actions(props: { animating: boolean }): any
-  close(props: { close: () => void, ui: { [K in keyof Required<Modal['slots']>]: (props?: Record<string, any>) => string }, animating: boolean }): any
-  body(props: { close: () => void, animating: boolean }): any
-  footer(props: { close: () => void, animating: boolean }): any
+  default(props: { open: boolean, transitioning: boolean }): any
+  content(props: { close: () => void, transitioning: boolean }): any
+  header(props: { close: () => void, transitioning: boolean }): any
+  title(props: { transitioning: boolean }): any
+  description(props: { transitioning: boolean }): any
+  actions(props: { transitioning: boolean }): any
+  close(props: { close: () => void, ui: { [K in keyof Required<Modal['slots']>]: (props?: Record<string, any>) => string }, transitioning: boolean }): any
+  body(props: { close: () => void, transitioning: boolean }): any
+  footer(props: { close: () => void, transitioning: boolean }): any
 }
 </script>
 
@@ -96,7 +96,7 @@ const slots = defineSlots<ModalSlots>()
 const { t } = useLocale()
 const appConfig = useAppConfig() as Modal['AppConfig']
 
-const animating = ref(false)
+const transitioning = ref(false)
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emits)
 const portalProps = usePortal(toRef(() => props.portal))
@@ -128,17 +128,17 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
 
 watch(() => props.open, () => {
   if (props.transition) {
-    animating.value = true
+    transitioning.value = true
   }
 })
 
 function handleAfterEnter() {
-  animating.value = false
+  transitioning.value = false
   emits('after:enter')
 }
 
 function handleAfterLeave() {
-  animating.value = false
+  transitioning.value = false
   emits('after:leave')
 }
 </script>
@@ -147,7 +147,7 @@ function handleAfterLeave() {
 <template>
   <DialogRoot v-slot="{ open, close }" v-bind="rootProps">
     <DialogTrigger v-if="!!slots.default" as-child :class="props.class">
-      <slot :open="open" :animating="animating" />
+      <slot :open="open" :transitioning="transitioning" />
     </DialogTrigger>
 
     <DialogPortal v-bind="portalProps">
@@ -156,39 +156,39 @@ function handleAfterLeave() {
       <DialogContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @after-enter="handleAfterEnter" @after-leave="handleAfterLeave" v-on="contentEvents">
         <VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))">
           <DialogTitle v-if="title || !!slots.title">
-            <slot name="title" :animating="animating">
+            <slot name="title" :transitioning="transitioning">
               {{ title }}
             </slot>
           </DialogTitle>
 
           <DialogDescription v-if="description || !!slots.description">
-            <slot name="description" :animating="animating">
+            <slot name="description" :transitioning="transitioning">
               {{ description }}
             </slot>
           </DialogDescription>
         </VisuallyHidden>
 
-        <slot name="content" :close="close" :animating="animating">
+        <slot name="content" :close="close" :transitioning="transitioning">
           <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" :class="ui.header({ class: props.ui?.header })">
-            <slot name="header" :close="close" :animating="animating">
+            <slot name="header" :close="close" :transitioning="transitioning">
               <div :class="ui.wrapper({ class: props.ui?.wrapper })">
                 <DialogTitle v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">
-                  <slot name="title" :animating="animating">
+                  <slot name="title" :transitioning="transitioning">
                     {{ title }}
                   </slot>
                 </DialogTitle>
 
                 <DialogDescription v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
-                  <slot name="description" :animating="animating">
+                  <slot name="description" :transitioning="transitioning">
                     {{ description }}
                   </slot>
                 </DialogDescription>
               </div>
 
-              <slot name="actions" :animating="animating" />
+              <slot name="actions" :transitioning="transitioning" />
 
               <DialogClose v-if="props.close || !!slots.close" as-child>
-                <slot name="close" :close="close" :ui="ui" :animating="animating">
+                <slot name="close" :close="close" :ui="ui" :transitioning="transitioning">
                   <UButton
                     v-if="props.close"
                     :icon="closeIcon || appConfig.ui.icons.close"
@@ -204,11 +204,11 @@ function handleAfterLeave() {
           </div>
 
           <div v-if="!!slots.body" :class="ui.body({ class: props.ui?.body })">
-            <slot name="body" :close="close" :animating="animating" />
+            <slot name="body" :close="close" :transitioning="transitioning" />
           </div>
 
           <div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">
-            <slot name="footer" :close="close" :animating="animating" />
+            <slot name="footer" :close="close" :transitioning="transitioning" />
           </div>
         </slot>
       </DialogContent>

From ab0be2031b20dddae4855a93fd15b2234495c61e Mon Sep 17 00:00:00 2001
From: Typed SIGTERM <typed.sigterm@gmail.com>
Date: Fri, 15 Aug 2025 23:03:32 +0800
Subject: [PATCH 3/5] fix

---
 src/runtime/components/Modal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/components/Modal.vue b/src/runtime/components/Modal.vue
index 2f1d919dfa..23f1f4c779 100644
--- a/src/runtime/components/Modal.vue
+++ b/src/runtime/components/Modal.vue
@@ -130,7 +130,7 @@ watch(() => props.open, () => {
   if (props.transition) {
     transitioning.value = true
   }
-})
+}, { immediate: true })
 
 function handleAfterEnter() {
   transitioning.value = false

From 5a7cf0deb7d1c75245691103c7869b6282d58b91 Mon Sep 17 00:00:00 2001
From: Typed SIGTERM <typed.sigterm@gmail.com>
Date: Fri, 15 Aug 2025 23:18:11 +0800
Subject: [PATCH 4/5] fix

---
 src/runtime/components/Modal.vue | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/runtime/components/Modal.vue b/src/runtime/components/Modal.vue
index 23f1f4c779..3227e23c7c 100644
--- a/src/runtime/components/Modal.vue
+++ b/src/runtime/components/Modal.vue
@@ -54,8 +54,10 @@ export interface ModalProps extends DialogRootProps {
 }
 
 export interface ModalEmits extends DialogRootEmits {
-  'after:leave': []
+  'enter': []
+  'leave': []
   'after:enter': []
+  'after:leave': []
   'close:prevent': []
 }
 
@@ -126,12 +128,6 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.modal || {})
   fullscreen: props.fullscreen
 }))
 
-watch(() => props.open, () => {
-  if (props.transition) {
-    transitioning.value = true
-  }
-}, { immediate: true })
-
 function handleAfterEnter() {
   transitioning.value = false
   emits('after:enter')
@@ -141,6 +137,16 @@ function handleAfterLeave() {
   transitioning.value = false
   emits('after:leave')
 }
+
+function handleEnter() {
+  transitioning.value = true
+  emits('enter')
+}
+
+function handleLeave() {
+  transitioning.value = true
+  emits('leave')
+}
 </script>
 
 <!-- eslint-disable vue/no-template-shadow -->
@@ -153,7 +159,7 @@ function handleAfterLeave() {
     <DialogPortal v-bind="portalProps">
       <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-enter="handleAfterEnter" @after-leave="handleAfterLeave" v-on="contentEvents">
+      <DialogContent :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })" v-bind="contentProps" @after-enter="handleAfterEnter" @after-leave="handleAfterLeave" @enter="handleEnter" @leave="handleLeave" v-on="contentEvents">
         <VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))">
           <DialogTitle v-if="title || !!slots.title">
             <slot name="title" :transitioning="transitioning">

From 00336b8db0e58a01870f4f501fd54acc183db887 Mon Sep 17 00:00:00 2001
From: Typed SIGTERM <typed.sigterm@gmail.com>
Date: Sat, 16 Aug 2025 13:39:05 +0800
Subject: [PATCH 5/5] lint

---
 src/runtime/components/Modal.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/Modal.vue b/src/runtime/components/Modal.vue
index 3227e23c7c..22246f4bfc 100644
--- a/src/runtime/components/Modal.vue
+++ b/src/runtime/components/Modal.vue
@@ -75,7 +75,7 @@ export interface ModalSlots {
 </script>
 
 <script setup lang="ts">
-import { computed, toRef, ref, watch } from 'vue'
+import { computed, toRef, ref } from 'vue'
 import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
@@ -159,7 +159,15 @@ function handleLeave() {
     <DialogPortal v-bind="portalProps">
       <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-enter="handleAfterEnter" @after-leave="handleAfterLeave" @enter="handleEnter" @leave="handleLeave" v-on="contentEvents">
+      <DialogContent
+        :class="ui.content({ class: [!slots.default && props.class, props.ui?.content] })"
+        v-bind="contentProps"
+        @after-enter="handleAfterEnter"
+        @after-leave="handleAfterLeave"
+        @enter="handleEnter"
+        @leave="handleLeave"
+        v-on="contentEvents"
+      >
         <VisuallyHidden v-if="!!slots.content && ((title || !!slots.title) || (description || !!slots.description))">
           <DialogTitle v-if="title || !!slots.title">
             <slot name="title" :transitioning="transitioning">