From b995afd430ebd8c0c9aa5151d177e1f1482c3b39 Mon Sep 17 00:00:00 2001
From: Neil <me@neilrichter.com>
Date: Tue, 7 May 2024 17:50:44 +0200
Subject: [PATCH 1/5] feat: allow hooking on Dialog animation end

---
 packages/radix-vue/src/Dialog/DialogContent.vue     |  5 ++++-
 packages/radix-vue/src/Dialog/DialogContentImpl.vue |  6 +++++-
 packages/radix-vue/src/Presence/Presence.ts         | 12 ++++++++++--
 packages/radix-vue/src/Presence/usePresence.ts      |  1 +
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/radix-vue/src/Dialog/DialogContent.vue b/packages/radix-vue/src/Dialog/DialogContent.vue
index 3b0f50ee0..92c18e490 100644
--- a/packages/radix-vue/src/Dialog/DialogContent.vue
+++ b/packages/radix-vue/src/Dialog/DialogContent.vue
@@ -32,7 +32,10 @@ const { forwardRef } = useForwardExpose()
 </script>
 
 <template>
-  <Presence :present="forceMount || rootContext.open.value">
+  <Presence
+    :present="forceMount || rootContext.open.value"
+    @animation-end="emits('animationEnd')"
+  >
     <DialogContentModal
       v-if="rootContext.modal.value"
       :ref="forwardRef"
diff --git a/packages/radix-vue/src/Dialog/DialogContentImpl.vue b/packages/radix-vue/src/Dialog/DialogContentImpl.vue
index ccd1246f7..f965476e6 100644
--- a/packages/radix-vue/src/Dialog/DialogContentImpl.vue
+++ b/packages/radix-vue/src/Dialog/DialogContentImpl.vue
@@ -15,7 +15,11 @@ export type DialogContentImplEmits = DismissableLayerEmits & {
    * Event handler called when auto-focusing on close.
    * Can be prevented.
    */
-  'closeAutoFocus': [ event: Event]
+  'closeAutoFocus': [event: Event]
+  /**
+   * Event handler called when the out animation is complete.
+   */
+  'animationEnd': []
 }
 
 export interface DialogContentImplProps extends DismissableLayerProps {
diff --git a/packages/radix-vue/src/Presence/Presence.ts b/packages/radix-vue/src/Presence/Presence.ts
index 455e59ca4..5d3cbc37c 100644
--- a/packages/radix-vue/src/Presence/Presence.ts
+++ b/packages/radix-vue/src/Presence/Presence.ts
@@ -4,6 +4,7 @@ import {
   h,
   ref,
   toRefs,
+  watch,
 } from 'vue'
 import type {
   Ref,
@@ -44,12 +45,19 @@ export default defineComponent({
   slots: {} as SlotsType<{
     default: (opts: { present: Ref<boolean> }) => any
   }>,
-  setup(props, { slots, expose }) {
+  emits: ['animation-end'],
+  setup(props, { slots, expose, emit }) {
     const { present, forceMount } = toRefs(props)
 
     const node = ref<HTMLElement>()
     // Mount composables once to prevent duplicated eventListener
-    const { isPresent } = usePresence(present, node)
+    const { isPresent, state } = usePresence(present, node)
+
+    watch(state, (newState) => {
+      if (newState === 'unmounted')
+        emit('animation-end')
+    })
+
     expose({ present: isPresent })
 
     let children = slots.default({ present: isPresent })
diff --git a/packages/radix-vue/src/Presence/usePresence.ts b/packages/radix-vue/src/Presence/usePresence.ts
index b421bfc2c..b9c2f5312 100644
--- a/packages/radix-vue/src/Presence/usePresence.ts
+++ b/packages/radix-vue/src/Presence/usePresence.ts
@@ -121,6 +121,7 @@ export function usePresence(
   )
 
   return {
+    state,
     isPresent,
   }
 }

From e41df3beb962006167ffc5a897dee58b03087ffd Mon Sep 17 00:00:00 2001
From: Neil <me@neilrichter.com>
Date: Wed, 8 May 2024 22:53:46 +0200
Subject: [PATCH 2/5] refactor: use custom events for animation events

---
 packages/radix-vue/src/Dialog/DialogContent.vue |  1 -
 .../radix-vue/src/Dialog/DialogContentImpl.vue  |  4 ----
 packages/radix-vue/src/Presence/Presence.ts     | 11 ++---------
 packages/radix-vue/src/Presence/usePresence.ts  | 17 ++++++++++++++---
 4 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/packages/radix-vue/src/Dialog/DialogContent.vue b/packages/radix-vue/src/Dialog/DialogContent.vue
index 92c18e490..763e2a54a 100644
--- a/packages/radix-vue/src/Dialog/DialogContent.vue
+++ b/packages/radix-vue/src/Dialog/DialogContent.vue
@@ -34,7 +34,6 @@ const { forwardRef } = useForwardExpose()
 <template>
   <Presence
     :present="forceMount || rootContext.open.value"
-    @animation-end="emits('animationEnd')"
   >
     <DialogContentModal
       v-if="rootContext.modal.value"
diff --git a/packages/radix-vue/src/Dialog/DialogContentImpl.vue b/packages/radix-vue/src/Dialog/DialogContentImpl.vue
index f965476e6..e472f8071 100644
--- a/packages/radix-vue/src/Dialog/DialogContentImpl.vue
+++ b/packages/radix-vue/src/Dialog/DialogContentImpl.vue
@@ -16,10 +16,6 @@ export type DialogContentImplEmits = DismissableLayerEmits & {
    * Can be prevented.
    */
   'closeAutoFocus': [event: Event]
-  /**
-   * Event handler called when the out animation is complete.
-   */
-  'animationEnd': []
 }
 
 export interface DialogContentImplProps extends DismissableLayerProps {
diff --git a/packages/radix-vue/src/Presence/Presence.ts b/packages/radix-vue/src/Presence/Presence.ts
index 5d3cbc37c..e44eb4646 100644
--- a/packages/radix-vue/src/Presence/Presence.ts
+++ b/packages/radix-vue/src/Presence/Presence.ts
@@ -4,7 +4,6 @@ import {
   h,
   ref,
   toRefs,
-  watch,
 } from 'vue'
 import type {
   Ref,
@@ -45,18 +44,12 @@ export default defineComponent({
   slots: {} as SlotsType<{
     default: (opts: { present: Ref<boolean> }) => any
   }>,
-  emits: ['animation-end'],
-  setup(props, { slots, expose, emit }) {
+  setup(props, { slots, expose }) {
     const { present, forceMount } = toRefs(props)
 
     const node = ref<HTMLElement>()
     // Mount composables once to prevent duplicated eventListener
-    const { isPresent, state } = usePresence(present, node)
-
-    watch(state, (newState) => {
-      if (newState === 'unmounted')
-        emit('animation-end')
-    })
+    const { isPresent } = usePresence(present, node)
 
     expose({ present: isPresent })
 
diff --git a/packages/radix-vue/src/Presence/usePresence.ts b/packages/radix-vue/src/Presence/usePresence.ts
index b9c2f5312..c4a811423 100644
--- a/packages/radix-vue/src/Presence/usePresence.ts
+++ b/packages/radix-vue/src/Presence/usePresence.ts
@@ -23,6 +23,11 @@ export function usePresence(
     },
   })
 
+  const dispatchCustomEvent = (name: 'enter' | 'after-enter' | 'leave' | 'after-leave') => {
+    const customEvent = new CustomEvent(name, { bubbles: false, cancelable: false })
+    node.value?.dispatchEvent(customEvent)
+  }
+
   watch(
     present,
     async (currentPresent, prevPresent) => {
@@ -34,6 +39,7 @@ export function usePresence(
 
         if (currentPresent) {
           dispatch('MOUNT')
+          dispatchCustomEvent('enter')
         }
         else if (
           currentAnimationName === 'none'
@@ -42,6 +48,7 @@ export function usePresence(
           // If there is no exit animation or the element is hidden, animations won't run
           // so we unmount instantly rv
           dispatch('UNMOUNT')
+          dispatchCustomEvent('after-leave')
         }
         else {
           /**
@@ -51,9 +58,14 @@ export function usePresence(
            * fires after `animation-delay` has expired which would be too late.
            */
           const isAnimating = prevAnimationName !== currentAnimationName
-          if (prevPresent && isAnimating)
+          if (prevPresent && isAnimating) {
             dispatch('ANIMATION_OUT')
-          else dispatch('UNMOUNT')
+            dispatchCustomEvent('leave')
+          }
+          else {
+            dispatch('UNMOUNT')
+            dispatchCustomEvent('after-leave')
+          }
         }
       }
     },
@@ -121,7 +133,6 @@ export function usePresence(
   )
 
   return {
-    state,
     isPresent,
   }
 }

From 2491cec45b511db40389f4db35cb057c2c5ff74d Mon Sep 17 00:00:00 2001
From: Neil <me@neilrichter.com>
Date: Wed, 8 May 2024 22:56:10 +0200
Subject: [PATCH 3/5] fix: lint

---
 packages/radix-vue/src/Dialog/DialogContent.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/radix-vue/src/Dialog/DialogContent.vue b/packages/radix-vue/src/Dialog/DialogContent.vue
index 763e2a54a..3b0f50ee0 100644
--- a/packages/radix-vue/src/Dialog/DialogContent.vue
+++ b/packages/radix-vue/src/Dialog/DialogContent.vue
@@ -32,9 +32,7 @@ const { forwardRef } = useForwardExpose()
 </script>
 
 <template>
-  <Presence
-    :present="forceMount || rootContext.open.value"
-  >
+  <Presence :present="forceMount || rootContext.open.value">
     <DialogContentModal
       v-if="rootContext.modal.value"
       :ref="forwardRef"

From 5de070b7730e86af4a89e870c640519ef238e494 Mon Sep 17 00:00:00 2001
From: Neil <me@neilrichter.com>
Date: Wed, 8 May 2024 22:56:36 +0200
Subject: [PATCH 4/5] fix: lint

---
 packages/radix-vue/src/Presence/Presence.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/radix-vue/src/Presence/Presence.ts b/packages/radix-vue/src/Presence/Presence.ts
index e44eb4646..455e59ca4 100644
--- a/packages/radix-vue/src/Presence/Presence.ts
+++ b/packages/radix-vue/src/Presence/Presence.ts
@@ -50,7 +50,6 @@ export default defineComponent({
     const node = ref<HTMLElement>()
     // Mount composables once to prevent duplicated eventListener
     const { isPresent } = usePresence(present, node)
-
     expose({ present: isPresent })
 
     let children = slots.default({ present: isPresent })

From 417e5fb2d7aeae60162aacafc4b3e7fb34f8518c Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Thu, 9 May 2024 11:22:44 +0800
Subject: [PATCH 5/5] fix: dispatch more event

---
 packages/radix-vue/src/Presence/usePresence.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/radix-vue/src/Presence/usePresence.ts b/packages/radix-vue/src/Presence/usePresence.ts
index c4a811423..af9fc8c69 100644
--- a/packages/radix-vue/src/Presence/usePresence.ts
+++ b/packages/radix-vue/src/Presence/usePresence.ts
@@ -40,6 +40,8 @@ export function usePresence(
         if (currentPresent) {
           dispatch('MOUNT')
           dispatchCustomEvent('enter')
+          if (currentAnimationName === 'none')
+            dispatchCustomEvent('after-enter')
         }
         else if (
           currentAnimationName === 'none'
@@ -48,6 +50,7 @@ export function usePresence(
           // If there is no exit animation or the element is hidden, animations won't run
           // so we unmount instantly rv
           dispatch('UNMOUNT')
+          dispatchCustomEvent('leave')
           dispatchCustomEvent('after-leave')
         }
         else {
@@ -82,8 +85,11 @@ export function usePresence(
     const isCurrentAnimation = currentAnimationName.includes(
       event.animationName,
     )
-    if (event.target === node.value && isCurrentAnimation)
+    const directionName = state.value === 'mounted' ? 'enter' : 'leave'
+    if (event.target === node.value && isCurrentAnimation) {
+      dispatchCustomEvent(`after-${directionName}`)
       dispatch('ANIMATION_END')
+    }
     // if no animation, immediately trigger 'ANIMATION_END'
     if (event.target === node.value && currentAnimationName === 'none')
       dispatch('ANIMATION_END')