From 803c20ad92e8a31fefd6d300856735b0e9adbdf9 Mon Sep 17 00:00:00 2001
From: anthonyfranc <anthonyfrancisvasquez@gmail.com>
Date: Fri, 20 Sep 2024 10:03:46 -0400
Subject: [PATCH] fix(Modal/Slideover): bind transition class to
 `TransitionChild` for Vue 3.5 (#2227)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 src/runtime/components/overlays/Modal.vue     |  6 +++---
 src/runtime/components/overlays/Slideover.vue | 12 +++++++++---
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/runtime/components/overlays/Modal.vue b/src/runtime/components/overlays/Modal.vue
index 6c0c554b61..289179b68a 100644
--- a/src/runtime/components/overlays/Modal.vue
+++ b/src/runtime/components/overlays/Modal.vue
@@ -1,13 +1,13 @@
 <template>
   <TransitionRoot :appear="appear" :show="isOpen" as="template" @after-leave="onAfterLeave">
     <HDialog :class="ui.wrapper" v-bind="attrs" @close="close">
-      <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
+      <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition" :class="ui.overlay.transition.enterFrom">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
       </TransitionChild>
 
       <div :class="ui.inner">
         <div :class="[ui.container, !fullscreen && ui.padding]">
-          <TransitionChild as="template" :appear="appear" v-bind="transitionClass">
+          <TransitionChild as="template" :appear="appear" v-bind="transitionClass" :class="transitionClass.enterFrom">
             <HDialogPanel
               :class="[
                 ui.base,
@@ -97,7 +97,7 @@ export default defineComponent({
 
     const transitionClass = computed(() => {
       if (!props.transition) {
-        return {}
+        return {} as typeof ui.value.transition
       }
 
       return {
diff --git a/src/runtime/components/overlays/Slideover.vue b/src/runtime/components/overlays/Slideover.vue
index 415cff5a8e..6691692194 100644
--- a/src/runtime/components/overlays/Slideover.vue
+++ b/src/runtime/components/overlays/Slideover.vue
@@ -1,11 +1,11 @@
 <template>
   <TransitionRoot as="template" :appear="appear" :show="isOpen" @after-leave="onAfterLeave">
     <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }, { 'items-end': side === 'bottom' }]" v-bind="attrs" @close="close">
-      <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
+      <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition" :class="ui.overlay.transition.enterFrom">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
       </TransitionChild>
 
-      <TransitionChild as="template" :appear="appear" v-bind="transitionClass">
+      <TransitionChild as="template" :appear="appear" v-bind="transitionClass" :class="transitionClass.enterFrom">
         <HDialogPanel :class="[ui.base, sideType === 'horizontal' ? [ui.width, 'h-full'] : [ui.height, 'w-full'], ui.background, ui.ring, ui.rounded, ui.padding, ui.shadow]">
           <slot />
         </HDialogPanel>
@@ -86,7 +86,12 @@ export default defineComponent({
 
     const transitionClass = computed(() => {
       if (!props.transition) {
-        return {}
+        return {} as typeof ui.value.transition & {
+          enterFrom: string
+          enterTo: string
+          leaveFrom: string
+          leaveTo: string
+        }
       }
 
       let enterFrom, leaveTo
@@ -120,6 +125,7 @@ export default defineComponent({
         leaveTo
       }
     })
+
     const sideType = computed(() => {
       switch (props.side) {
       case 'left':