From f915731cc8ea662a2066fee054f47885ee2154a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20CG?= <victorcg88@users.noreply.github.com>
Date: Mon, 5 Aug 2024 16:10:24 +0200
Subject: [PATCH] refactor(animation-factory): fix Vue3 breaking changes
 (#1579)

* refactor(animation-factory): fix Vue3 breaking changes

* refactor(animation-factory): await animation to load

* refactor(animation-factory): improve type infer

* refactor(animations): Vue3 transition class breaking change
---
 .../animations/test-animation-factory.vue     | 47 ++++---------------
 .../animate-clip-path.style.scss              | 16 +++----
 .../animate-translate.style.scss              | 16 +++----
 .../components/animations/animate-width.vue   |  2 +-
 .../create-directional-animation-factory.ts   | 22 ++++-----
 .../src/components/animations/cross-fade.vue  |  2 +-
 .../components/animations/fade-and-slide.vue  |  2 +-
 .../src/components/animations/fade.vue        |  2 +-
 .../animations/staggered-fade-and-slide.vue   |  2 +-
 packages/x-components/src/views/home/Home.vue |  6 +--
 10 files changed, 44 insertions(+), 73 deletions(-)

diff --git a/packages/_vue3-migration-test/src/components/animations/test-animation-factory.vue b/packages/_vue3-migration-test/src/components/animations/test-animation-factory.vue
index 3aa3de66cf..e27e830812 100644
--- a/packages/_vue3-migration-test/src/components/animations/test-animation-factory.vue
+++ b/packages/_vue3-migration-test/src/components/animations/test-animation-factory.vue
@@ -1,35 +1,5 @@
 <template>
   <div class="animate-modal">
-    <p>
-      BREAKING Vue3: `h()` hyperscript doesn't support rendering `'transition'` using strings.
-      Instead, replace it by `Transition` component of Vue 3 itself `import { Transition } from
-      'vue'`.
-      <br />
-      <a href="https://github.com/vuejs/core/issues/826#issuecomment-598207464">
-        https://github.com/vuejs/core/issues/826#issuecomment-598207464
-      </a>
-      <br />
-      <a href="https://github.com/vuejs/test-utils/issues/471#issuecomment-804477181">
-        https://github.com/vuejs/test-utils/issues/471#issuecomment-804477181
-      </a>
-    </p>
-    <p>
-      BREAKING Vue3: Review Transition Class Change. Replace instances of `.v-enter` to
-      `.v-enter-from` Replace instances of `.v-leave` to `.v-leave-from`.
-      <br />
-      <a href="https://v3-migration.vuejs.org/breaking-changes/transition.html">
-        https://v3-migration.vuejs.org/breaking-changes/transition.html
-      </a>
-    </p>
-    <p>
-      BREAKING Vue3: VNodes now have a flat props structure.
-      <br />
-      <a
-        href="https://v3-migration.vuejs.org/breaking-changes/render-function-api.html#vnode-props-format"
-      >
-        https://v3-migration.vuejs.org/breaking-changes/render-function-api.html#vnode-props-format
-      </a>
-    </p>
     <button @click="openWithClipPath">Open modal with CLIP PATH animation</button>
     <button @click="openWithScale">Open modal with SCALE animation</button>
     <button @click="openWithTranslate">Open modal with TRANSLATE animation</button>
@@ -49,34 +19,37 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, shallowRef } from 'vue';
+  import { nextTick, ref, shallowRef } from 'vue';
   import BaseModal from '../../../../x-components/src/components/modals/base-modal.vue';
   import { animateClipPath } from '../../../../x-components/src/components/animations/animate-clip-path/animate-clip-path.factory';
   import { animateScale } from '../../../../x-components/src/components/animations/animate-scale/animate-scale.factory';
   import { animateTranslate } from '../../../../x-components/src/components/animations/animate-translate/animate-translate.factory';
 
-  const clipPathAnimation = animateClipPath('bottom');
+  const clipPathAnimation = animateClipPath('left');
   const scaleAnimation = animateScale('bottom');
-  const translateAnimation = animateTranslate('bottom');
+  const translateAnimation = animateTranslate('right');
 
-  const currentAnimation = shallowRef(clipPathAnimation);
+  const currentAnimation = shallowRef(scaleAnimation);
   const open = ref(false);
 
   /** Open modal with ClipPath animation. */
-  function openWithClipPath() {
+  async function openWithClipPath() {
     currentAnimation.value = clipPathAnimation;
+    await nextTick();
     open.value = true;
   }
 
   /** Open modal with Scale animation. */
-  function openWithScale() {
+  async function openWithScale() {
     currentAnimation.value = scaleAnimation;
+    await nextTick();
     open.value = true;
   }
 
   /** Open modal with Translate animation. */
-  function openWithTranslate() {
+  async function openWithTranslate() {
     currentAnimation.value = translateAnimation;
+    await nextTick();
     open.value = true;
   }
 </script>
diff --git a/packages/x-components/src/components/animations/animate-clip-path/animate-clip-path.style.scss b/packages/x-components/src/components/animations/animate-clip-path/animate-clip-path.style.scss
index 4aebee8a07..319fd773a9 100644
--- a/packages/x-components/src/components/animations/animate-clip-path/animate-clip-path.style.scss
+++ b/packages/x-components/src/components/animations/animate-clip-path/animate-clip-path.style.scss
@@ -8,21 +8,21 @@
   }
 
   &--top {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       clip-path: inset(0 0 100% 0 round var(--x-size-border-radius-animation-clip-path, 0));
     }
   }
 
   &--bottom {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       clip-path: inset(100% 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));
     }
   }
 
   &--top-to-bottom {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       clip-path: inset(0 0 100% 0 round var(--x-size-border-radius-animation-clip-path, 0));
     }
     &#{$p}--leave-to {
@@ -31,7 +31,7 @@
   }
 
   &--bottom-to-top {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       clip-path: inset(100% 0 0 0 round var(--x-size-border-radius-animation-clip-path, 0));
     }
     &#{$p}--leave-to {
@@ -40,21 +40,21 @@
   }
 
   &--left {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       clip-path: inset(0 100% 0 0 round var(--x-size-border-radius-animation-clip-path, 0));
     }
   }
 
   &--right {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       clip-path: inset(0 0 0 100% round var(--x-size-border-radius-animation-clip-path, 0));
     }
   }
 
   &--left-to-right {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       clip-path: inset(0 100% 0 0 round var(--x-size-border-radius-animation-clip-path, 0));
     }
     &#{$p}--leave-to {
@@ -63,7 +63,7 @@
   }
 
   &--right-to-left {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       clip-path: inset(0 0 0 100% round var(--x-size-border-radius-animation-clip-path, 0));
     }
     &#{$p}--leave-to {
diff --git a/packages/x-components/src/components/animations/animate-translate/animate-translate.style.scss b/packages/x-components/src/components/animations/animate-translate/animate-translate.style.scss
index 6712b99f7c..ac17affc57 100644
--- a/packages/x-components/src/components/animations/animate-translate/animate-translate.style.scss
+++ b/packages/x-components/src/components/animations/animate-translate/animate-translate.style.scss
@@ -7,21 +7,21 @@
   }
 
   &--top {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       transform: translateY(-100%);
     }
   }
 
   &--bottom {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       transform: translateY(100%);
     }
   }
 
   &--top-to-bottom {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       transform: translateY(-100%);
     }
     &#{$p}--leave-to {
@@ -30,7 +30,7 @@
   }
 
   &--bottom-to-top {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       transform: translateY(100%);
     }
     &#{$p}--leave-to {
@@ -39,21 +39,21 @@
   }
 
   &--left {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       transform: translateX(-100%);
     }
   }
 
   &--right {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       transform: translateX(100%);
     }
   }
 
   &--left-to-right {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       transform: translateX(-100%);
     }
     &#{$p}--leave-to {
@@ -62,7 +62,7 @@
   }
 
   &--right-to-left {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       transform: translateX(100%);
     }
     &#{$p}--leave-to {
diff --git a/packages/x-components/src/components/animations/animate-width.vue b/packages/x-components/src/components/animations/animate-width.vue
index 90cc5b99db..784c746e61 100644
--- a/packages/x-components/src/components/animations/animate-width.vue
+++ b/packages/x-components/src/components/animations/animate-width.vue
@@ -26,7 +26,7 @@
       overflow-x: hidden;
     }
 
-    &--enter,
+    &--enter-from,
     &--leave-to {
       width: 0 !important;
     }
diff --git a/packages/x-components/src/components/animations/create-directional-animation-factory.ts b/packages/x-components/src/components/animations/create-directional-animation-factory.ts
index 06969117ef..68c1919ffd 100644
--- a/packages/x-components/src/components/animations/create-directional-animation-factory.ts
+++ b/packages/x-components/src/components/animations/create-directional-animation-factory.ts
@@ -1,4 +1,4 @@
-import { defineComponent, h } from 'vue';
+import { DefineComponent, defineComponent, h, Transition } from 'vue';
 
 export type AnimationOrigin =
   | 'top'
@@ -19,23 +19,21 @@ export type AnimationOrigin =
  *
  * @internal
  */
-export function createDirectionalAnimationFactory(animationName: string) {
-  return (animationOrigin: AnimationOrigin = 'top') =>
+export function createDirectionalAnimationFactory(
+  animationName: string
+): (animationOrigin?: AnimationOrigin) => DefineComponent {
+  return (animationOrigin = 'top') =>
     defineComponent({
       name: `transition-${animationName}-${animationOrigin}`,
-      inheritAttrs: false,
-      setup(_, { attrs, listeners, slots }) {
+      setup(_, { slots }) {
         return () =>
           h(
-            'transition',
+            Transition,
             {
-              props: {
-                name: `x-${animationName}--${animationOrigin} x-${animationName}-`,
-                ...attrs
-              },
-              on: listeners
+              name: `x-${animationName}--${animationOrigin} x-${animationName}-`
             },
-            slots.default?.() ?? []
+            // Vue recommends using function for better performance.
+            () => slots.default?.() ?? ''
           );
       }
     });
diff --git a/packages/x-components/src/components/animations/cross-fade.vue b/packages/x-components/src/components/animations/cross-fade.vue
index c67499c74e..e4257f7146 100644
--- a/packages/x-components/src/components/animations/cross-fade.vue
+++ b/packages/x-components/src/components/animations/cross-fade.vue
@@ -41,7 +41,7 @@
     }
 
     &--leave-to,
-    &--enter {
+    &--enter-from {
       opacity: 0;
     }
   }
diff --git a/packages/x-components/src/components/animations/fade-and-slide.vue b/packages/x-components/src/components/animations/fade-and-slide.vue
index 865ae548e8..77ab1f411f 100644
--- a/packages/x-components/src/components/animations/fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/fade-and-slide.vue
@@ -55,7 +55,7 @@
         transform $transition-transform-duration ease-out;
     }
 
-    &--enter,
+    &--enter-from,
     &--leave-to {
       transform: translate(-20%, 0);
       opacity: 0;
diff --git a/packages/x-components/src/components/animations/fade.vue b/packages/x-components/src/components/animations/fade.vue
index 69fee3b704..c7cc5218ef 100644
--- a/packages/x-components/src/components/animations/fade.vue
+++ b/packages/x-components/src/components/animations/fade.vue
@@ -34,7 +34,7 @@
     }
 
     &--leave-to,
-    &--enter {
+    &--enter-from {
       opacity: 0 !important;
     }
   }
diff --git a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
index e9bd78269c..ab61530a8f 100644
--- a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
@@ -58,7 +58,7 @@
         transition: transform $transition-duration ease-out;
       }
 
-      &--enter,
+      &--enter-from,
       &--leave-to {
         transform: translate3d(0, 50%, 0);
         opacity: 0;
diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
index bc57bfeb61..4b89638b22 100644
--- a/packages/x-components/src/views/home/Home.vue
+++ b/packages/x-components/src/views/home/Home.vue
@@ -458,7 +458,7 @@
 <script lang="ts">
   /* eslint-disable max-len */
   import { computed, ComputedRef, defineComponent, provide } from 'vue';
-  // import { animateClipPath } from '../../components/animations/animate-clip-path/animate-clip-path.factory';
+  import { animateClipPath } from '../../components/animations/animate-clip-path/animate-clip-path.factory';
   // import StaggeredFadeAndSlide from '../../components/animations/staggered-fade-and-slide.vue';
   import AutoProgressBar from '../../components/auto-progress-bar.vue';
   import BaseDropdown from '../../components/base-dropdown.vue';
@@ -601,7 +601,7 @@
       ];
       const columnPickerValues = [0, 2, 4];
       // const resultsAnimation = StaggeredFadeAndSlide;
-      // const modalAnimation = animateClipPath();
+      const modalAnimation = animateClipPath();
       const selectedColumns = 4;
       const sortValues = ['', 'price asc', 'price desc'];
       const isAnyQueryLoadedInPreview = useQueriesPreview().isAnyQueryLoadedInPreview;
@@ -663,7 +663,7 @@
       };
       return {
         resultsAnimation: undefined,
-        modalAnimation: undefined,
+        modalAnimation,
         queriesPreviewInfo,
         stores,
         initialExtraParams,