From 651a25116c26637fdd4f47c382168d7128ed6a6f Mon Sep 17 00:00:00 2001
From: varodv <72568818+alvarodE@users.noreply.github.com>
Date: Tue, 14 May 2024 09:38:05 +0200
Subject: [PATCH 1/7] feat: Replace DisableAnimationMixin by
 useDisableAnimation composable

---
 ....spec.ts => use-disable-animation.spec.ts} | 48 ++++++---------
 .../animations/disable-animation.mixin.ts     | 36 ------------
 .../components/animations/fade-and-slide.vue  | 58 +++++++++----------
 .../src/components/animations/index.ts        |  2 +-
 .../animations/staggered-fade-and-slide.vue   | 53 +++++++++--------
 .../animations/use-disable-animation.ts       | 30 ++++++++++
 6 files changed, 108 insertions(+), 119 deletions(-)
 rename packages/x-components/src/components/animations/__tests__/{disable-animation-mixin.spec.ts => use-disable-animation.spec.ts} (60%)
 delete mode 100644 packages/x-components/src/components/animations/disable-animation.mixin.ts
 create mode 100644 packages/x-components/src/components/animations/use-disable-animation.ts

diff --git a/packages/x-components/src/components/animations/__tests__/disable-animation-mixin.spec.ts b/packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts
similarity index 60%
rename from packages/x-components/src/components/animations/__tests__/disable-animation-mixin.spec.ts
rename to packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts
index c3bc5bf904..b2d1bac74d 100644
--- a/packages/x-components/src/components/animations/__tests__/disable-animation-mixin.spec.ts
+++ b/packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts
@@ -1,36 +1,33 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import { Component, Prop, Provide } from 'vue-property-decorator';
-import Vue, { ComponentOptions, CreateElement, VNode } from 'vue';
-import DisableAnimationMixin from '../disable-animation.mixin';
+import { mount } from '@vue/test-utils';
+import { defineComponent, provide } from 'vue';
 import { DISABLE_ANIMATIONS_KEY } from '../../decorators/injection.consts';
+import { useDisableAnimation } from '../use-disable-animation';
 
-@Component
-class Provider extends Vue {
-  @Prop()
-  @Provide(DISABLE_ANIMATIONS_KEY as string)
-  public disableAnimation!: boolean;
-
-  render(h: CreateElement): VNode {
+const Provider = defineComponent({
+  props: {
+    disableAnimation: Boolean
+  },
+  setup(props) {
+    provide(DISABLE_ANIMATIONS_KEY as string, props.disableAnimation);
+  },
+  render(h) {
     return this.$slots.default?.[0] ?? h();
   }
-}
+});
 
 /**
  * Animation component.
  */
-const Animation: ComponentOptions<Vue> = {
-  mixins: [DisableAnimationMixin],
+const Animation = defineComponent({
+  setup() {
+    return useDisableAnimation('x-animation');
+  },
   template: `
     <transition-group :name="name">
      <p>Animation</p>
     </transition-group>
-  `,
-  data() {
-    return {
-      animationName: 'x-animation'
-    };
-  }
-};
+  `
+});
 
 /**
  * Function that returns an Animation wrapper.
@@ -38,9 +35,7 @@ const Animation: ComponentOptions<Vue> = {
  * @param disableAnimation - Flag to disable the animation.
  * @returns Animation wrapper.
  */
-function renderDisableAnimation({
-  disableAnimation = true
-}: DisableAnimationOptions = {}): DisableAnimationAPI {
+function renderDisableAnimation({ disableAnimation = true }: DisableAnimationOptions = {}) {
   const wrapper = mount({
     template: `
         <Provider :disableAnimation="disableAnimation">
@@ -78,8 +73,3 @@ interface DisableAnimationOptions {
   /** Flag to disable the animation. */
   disableAnimation?: boolean;
 }
-
-interface DisableAnimationAPI {
-  /** The wrapper of the mounted component. */
-  wrapper: Wrapper<Vue>;
-}
diff --git a/packages/x-components/src/components/animations/disable-animation.mixin.ts b/packages/x-components/src/components/animations/disable-animation.mixin.ts
deleted file mode 100644
index 9581fa47cf..0000000000
--- a/packages/x-components/src/components/animations/disable-animation.mixin.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import Vue from 'vue';
-import { Component, Inject } from 'vue-property-decorator';
-import { DISABLE_ANIMATIONS_KEY } from '../decorators/injection.consts';
-
-/**
- * Mixin to ease disabling animations.
- *
- * @public
- */
-@Component
-export default class DisableAnimationMixin extends Vue {
-  /**
-   * The name of the animation.
-   *
-   * @public
-   */
-  protected animationName!: string;
-
-  /**
-   * Flag to disable the animation.
-   *
-   * @public
-   */
-  @Inject({ from: DISABLE_ANIMATIONS_KEY as string, default: false })
-  public disableAnimation!: boolean;
-
-  /**
-   * The animation's name based on the {@link DisableAnimationMixin.disableAnimation} flag.
-   *
-   * @returns The animation name.
-   * @internal
-   */
-  protected get name(): string {
-    return this.disableAnimation ? '__no-animation__' : this.animationName;
-  }
-}
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 727d14dd87..120918734f 100644
--- a/packages/x-components/src/components/animations/fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/fade-and-slide.vue
@@ -13,9 +13,8 @@
 </template>
 
 <script lang="ts">
-  import { mixins } from 'vue-class-component';
-  import { Prop, Component } from 'vue-property-decorator';
-  import DisableAnimationMixin from './disable-animation.mixin';
+  import { defineComponent } from 'vue';
+  import { useDisableAnimation } from './use-disable-animation';
 
   /**
    * Renders a transition group wrapping the elements passed in the default slot and animating
@@ -23,34 +22,35 @@
    *
    * @public
    */
-  @Component({
-    inheritAttrs: false
-  })
-  export default class FadeAndSlide extends mixins(DisableAnimationMixin) {
-    /**
-     * The name of the animation.
-     *
-     * @public
-     */
-    protected animationName = 'x-fade-and-slide-';
+  export default defineComponent({
+    name: 'FadeAndSlide',
+    inheritAttrs: false,
+    props: {
+      /**
+       * HTML Element that the transition-group children will be wrapped in.
+       */
+      tag: String,
+      /**
+       * Indicates if the transition must be applied on the initial render of the node.
+       */
+      appear: {
+        type: Boolean,
+        default: true
+      }
+    },
+    setup: function () {
+      /**
+       * The name of the animation.
+       */
+      const animationName = 'x-fade-and-slide-';
 
-    /**
-     * HTML Element that the transition-group children will be wrapped in.
-     *
-     * @public
-     */
-    @Prop()
-    protected tag!: string;
+      const { name } = useDisableAnimation(animationName);
 
-    /**
-     * Indicates if the transition must be applied on the initial render of the node.
-     */
-    @Prop({
-      type: Boolean,
-      default: true
-    })
-    public appear!: boolean;
-  }
+      return {
+        name
+      };
+    }
+  });
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/x-components/src/components/animations/index.ts b/packages/x-components/src/components/animations/index.ts
index 7f6d8c69d6..26240a7f04 100644
--- a/packages/x-components/src/components/animations/index.ts
+++ b/packages/x-components/src/components/animations/index.ts
@@ -6,9 +6,9 @@ export { default as Fade } from './fade.vue';
 export { default as FadeAndSlide } from './fade-and-slide.vue';
 export { default as StaggeredFadeAndSlide } from './staggered-fade-and-slide.vue';
 export { default as StaggeringTransitionGroup } from './staggering-transition-group.vue';
-export { default as DisableAnimationMixin } from './disable-animation.mixin';
 export { createDirectionalAnimationFactory } from './create-directional-animation-factory';
 export { animateClipPath } from './animate-clip-path/animate-clip-path.factory';
 export { animateScale } from './animate-scale/animate-scale.factory';
 export { animateTranslate } from './animate-translate/animate-translate.factory';
 export * from './use-collapse-animation';
+export * from './use-disable-animation';
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 17c820d927..d4fa2be045 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
@@ -12,37 +12,42 @@
 </template>
 
 <script lang="ts">
-  import { mixins } from 'vue-class-component';
-  import { Component, Prop } from 'vue-property-decorator';
-  import StaggeringTransitionGroup from '../animations/staggering-transition-group.vue';
-  import DisableAnimationMixin from './disable-animation.mixin';
+  import { defineComponent } from 'vue';
+  import StaggeringTransitionGroup from './staggering-transition-group.vue';
+  import { useDisableAnimation } from './use-disable-animation';
 
   /**
    * Renders a transition group wrapping the elements passed in the default slot and animating
-   * them with an staggered fade and slide animation.
+   * them with a staggered fade and slide animation.
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'StaggeredFadeAndSlide',
     components: { StaggeringTransitionGroup },
-    inheritAttrs: false
-  })
-  export default class StaggeredFadeAndSlide extends mixins(DisableAnimationMixin) {
-    /**
-     * Indicates if the transition must be applied on the initial render of the node.
-     */
-    @Prop({
-      type: Boolean,
-      default: true
-    })
-    public appear!: boolean;
-    /**
-     * The name of the animation.
-     *
-     * @public
-     */
-    protected animationName = 'x-staggered-fade-and-slide-';
-  }
+    inheritAttrs: false,
+    props: {
+      /**
+       * Indicates if the transition must be applied on the initial render of the node.
+       */
+      appear: {
+        type: Boolean,
+        default: true
+      }
+    },
+    setup: function () {
+      /**
+       * The name of the animation.
+       */
+      const animationName = 'x-staggered-fade-and-slide-';
+
+      const { name } = useDisableAnimation(animationName);
+
+      return {
+        name
+      };
+    }
+  });
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/x-components/src/components/animations/use-disable-animation.ts b/packages/x-components/src/components/animations/use-disable-animation.ts
new file mode 100644
index 0000000000..ddb9512462
--- /dev/null
+++ b/packages/x-components/src/components/animations/use-disable-animation.ts
@@ -0,0 +1,30 @@
+import { computed, inject } from 'vue';
+import { DISABLE_ANIMATIONS_KEY } from '../decorators/injection.consts';
+
+/**
+ * Composable to ease disabling animations.
+ *
+ * @param animationName - The name of the animation.
+ * @returns Composable with the computed name of the animation.
+ *
+ * @public
+ */
+export function useDisableAnimation(animationName: string) {
+  /**
+   * Flag to disable the animation.
+   */
+  const disableAnimation = inject(DISABLE_ANIMATIONS_KEY as string, false);
+
+  /**
+   * The animation's name based on the DISABLE_ANIMATIONS_KEY flag.
+   *
+   * @returns The animation name.
+   */
+  const name = computed<string>(() => {
+    return disableAnimation ? '__no-animation__' : animationName;
+  });
+
+  return {
+    name
+  };
+}

From 0bce3b4ebc9109bf0bb35038955863f887a682ef Mon Sep 17 00:00:00 2001
From: varodv <72568818+alvarodE@users.noreply.github.com>
Date: Tue, 14 May 2024 09:38:52 +0200
Subject: [PATCH 2/7] Add components to vue3-migration-test playground

---
 .../src/components/animations/index.ts             |  2 ++
 .../components/animations/test-fade-and-slide.vue  | 11 +++++++++++
 .../animations/test-staggered-fade-and-slide.vue   | 11 +++++++++++
 packages/_vue3-migration-test/src/router.ts        | 14 +++++++++++++-
 4 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 packages/_vue3-migration-test/src/components/animations/test-fade-and-slide.vue
 create mode 100644 packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue

diff --git a/packages/_vue3-migration-test/src/components/animations/index.ts b/packages/_vue3-migration-test/src/components/animations/index.ts
index 4d2c00cf2b..a102e70e6b 100644
--- a/packages/_vue3-migration-test/src/components/animations/index.ts
+++ b/packages/_vue3-migration-test/src/components/animations/index.ts
@@ -3,3 +3,5 @@ export { default as TestCollapseHeight } from './test-collapse-height.vue';
 export { default as TestCollapseWidth } from './test-collapse-width.vue';
 export { default as TestCrossFade } from './test-cross-fade.vue';
 export { default as TestFade } from './test-fade.vue';
+export { default as TestFadeAndSlide } from './test-fade-and-slide.vue';
+export { default as TestStaggeredFadeAndSlide } from './test-staggered-fade-and-slide.vue';
diff --git a/packages/_vue3-migration-test/src/components/animations/test-fade-and-slide.vue b/packages/_vue3-migration-test/src/components/animations/test-fade-and-slide.vue
new file mode 100644
index 0000000000..8553f4e244
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/animations/test-fade-and-slide.vue
@@ -0,0 +1,11 @@
+<template>
+  <FadeAndSlide tag="ul">
+    <li>Element to animate</li>
+    <li>Element to animate</li>
+    <li>Element to animate</li>
+  </FadeAndSlide>
+</template>
+
+<script setup lang="ts">
+  import FadeAndSlide from '../../../../x-components/src/components/animations/fade-and-slide.vue';
+</script>
diff --git a/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue b/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue
new file mode 100644
index 0000000000..4384f4ca0c
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue
@@ -0,0 +1,11 @@
+<template>
+  <StaggeredFadeAndSlide tag="ul" :stagger="50">
+    <li>Element to animate</li>
+    <li>Element to animate</li>
+    <li>Element to animate</li>
+  </StaggeredFadeAndSlide>
+</template>
+
+<script setup lang="ts">
+  import StaggeredFadeAndSlide from '../../../../x-components/src/components/animations/staggered-fade-and-slide.vue';
+</script>
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index ca88b5ca0b..a662d92a64 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -11,6 +11,7 @@ import {
   TestElementsList,
   TestFacets,
   TestFade,
+  TestFadeAndSlide,
   TestScroll,
   TestSortDropdown,
   TestSortList,
@@ -38,7 +39,8 @@ import {
   TestSemanticQueries,
   TestRecommendations,
   TestNextQueries,
-  TestIdentifierResults
+  TestIdentifierResults,
+  TestStaggeredFadeAndSlide
 } from './';
 
 const routes = [
@@ -72,6 +74,16 @@ const routes = [
     name: 'BaseModal',
     component: TestBaseModal
   },
+  {
+    path: '/fade-and-slide',
+    name: 'FadeAndSlide',
+    component: TestFadeAndSlide
+  },
+  {
+    path: '/staggered-fade-and-slide',
+    name: 'StaggeredFadeAndSlide',
+    component: TestStaggeredFadeAndSlide
+  },
   {
     path: '/base-dropdown',
     name: 'BaseDropdown',

From 21a7ab16b21eb752bf77a49a9c750c24cb82c765 Mon Sep 17 00:00:00 2001
From: varodv <72568818+alvarodE@users.noreply.github.com>
Date: Tue, 14 May 2024 12:52:05 +0200
Subject: [PATCH 3/7] Migrate StaggeringTransitionGroup component

---
 .../test-staggered-fade-and-slide.vue         |   6 +-
 .../animations/staggered-fade-and-slide.vue   |   6 +-
 .../staggering-transition-group.vue           | 715 +++++++++---------
 3 files changed, 344 insertions(+), 383 deletions(-)

diff --git a/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue b/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue
index 4384f4ca0c..1d04d4334e 100644
--- a/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue
+++ b/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue
@@ -1,8 +1,8 @@
 <template>
   <StaggeredFadeAndSlide tag="ul" :stagger="50">
-    <li>Element to animate</li>
-    <li>Element to animate</li>
-    <li>Element to animate</li>
+    <li key="1">Element to animate</li>
+    <li key="2">Element to animate</li>
+    <li key="3">Element to animate</li>
   </StaggeredFadeAndSlide>
 </template>
 
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 d4fa2be045..f86758edd3 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
@@ -96,9 +96,9 @@ or the `stagger` props:
 
 ```vue
 <StaggeredFadeAndSlide tag="ul" :stagger="50">
-  <li>Element to animate</li>
-  <li>Element to animate</li>
-  <li>Element to animate</li>
+  <li key="1">Element to animate</li>
+  <li key="2">Element to animate</li>
+  <li key="3">Element to animate</li>
 </StaggeredFadeAndSlide>
 ```
 </docs>
diff --git a/packages/x-components/src/components/animations/staggering-transition-group.vue b/packages/x-components/src/components/animations/staggering-transition-group.vue
index 13b8b05859..2f4d0184ab 100644
--- a/packages/x-components/src/components/animations/staggering-transition-group.vue
+++ b/packages/x-components/src/components/animations/staggering-transition-group.vue
@@ -1,7 +1,6 @@
 <script lang="ts">
-  import Vue, { CreateElement, VNode } from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { noOp } from '../../utils';
+  import { computed, defineComponent, h, onBeforeUpdate, onMounted, onUpdated, VNode } from 'vue';
+  import { noOp } from '../../utils/function';
 
   /* eslint-disable @typescript-eslint/unbound-method */
   /**
@@ -10,408 +9,370 @@
    *
    * @public
    */
-  @Component
-  export default class StaggeringTransitionGroup extends Vue {
-    /**
-     * The name of the transition. Used to generate the CSS classes.
-     *
-     * @public
-     */
-    @Prop({ default: 'v' })
-    public name!: string;
-
-    /**
-     * The CSS move class name.
-     *
-     * @public
-     */
-    @Prop()
-    public moveClass!: string;
-
-    /**
-     * The tag of the node to render to the DOM.
-     *
-     * @public
-     */
-    @Prop({ default: 'div' })
-    public tag!: string;
-
-    /**
-     * The time in ms to stagger each item.
-     *
-     * @public
-     */
-    @Prop({ default: 25 })
-    public staggering!: number;
-
-    /**
-     * The CSS class for the moving transitions.
-     *
-     * @returns The move transition name.
-     * @internal
-     */
-    protected get moveClassName(): string {
-      return this.moveClass ?? `${this.name}-move`;
-    }
+  export default defineComponent({
+    name: 'StaggeringTransitionGroup',
+    props: {
+      /**
+       * The name of the transition. Used to generate the CSS classes.
+       */
+      name: {
+        type: String,
+        default: 'v'
+      },
+      /**
+       * The CSS move class name.
+       */
+      moveClass: String,
+      /**
+       * The tag of the node to render to the DOM.
+       */
+      tag: {
+        type: String,
+        default: 'div'
+      },
+      /**
+       * The time in ms to stagger each item.
+       */
+      staggering: {
+        type: Number,
+        default: 25
+      }
+    },
+    setup: function (props, { attrs, listeners, slots }) {
+      let rootVNode: VNode;
+
+      /**
+       * The CSS class for the moving transitions.
+       *
+       * @returns The move transition name.
+       */
+      const moveClassName = computed<string>(() => {
+        return props.moveClass ?? `${props.name}-move`;
+      });
 
-    /**
-     * The transition data contains the needed events and props to perform a transition using Vue
-     * virtual node's API.
-     *
-     * The `beforeLeave` hook is extended to also restore the previous position of the element using
-     * the position absolute.
-     * The `afterEnter` and `afterLeave` hooks are extended to also clean the transition delay
-     * applied by the stagger.
-     *
-     * @returns The transition data for Vue virtual nodes.
-     * @internal
-     */
-    protected get transitionData(): TransitionData {
-      const transitionData: TransitionData = { ...this.$props, ...this.$attrs, ...this.$listeners };
-
-      transitionData.beforeLeave = this.addRestorePositionHook(transitionData.beforeLeave);
-      transitionData.afterEnter = this.addClearStaggeringCall(transitionData.afterEnter);
-      transitionData.afterLeave = this.addClearStaggeringCall(transitionData.afterLeave);
-
-      return transitionData;
-    }
+      /**
+       * The transition data contains the needed events and props to perform a transition using Vue
+       * virtual node's API.
+       *
+       * The `beforeLeave` hook is extended to also restore the previous position of the element using
+       * the position absolute.
+       * The `afterEnter` and `afterLeave` hooks are extended to also clean the transition delay
+       * applied by the stagger.
+       *
+       * @returns The transition data for Vue virtual nodes.
+       */
+      const transitionData = computed<TransitionData>(() => {
+        const transitionData: TransitionData = { ...props, ...attrs, ...listeners };
+
+        transitionData.beforeLeave = addRestorePositionHook(transitionData.beforeLeave);
+        transitionData.afterEnter = addClearStaggeringCall(transitionData.afterEnter);
+        transitionData.afterLeave = addClearStaggeringCall(transitionData.afterLeave);
+
+        return transitionData;
+      });
 
-    /**
-     * The list of old virtual nodes, generated by the previous called render method.
-     *
-     * @internal
-     */
-    protected oldChildren!: TransitionVNode[];
-    /**
-     * The list of new virtual nodes, generated by the last called render method.
-     *
-     * @internal
-     */
-    protected newChildren!: TransitionVNode[];
-    /**
-     * A map containing the previous positions relative to the container, for each item
-     * rendered inside the slot of this component.
-     * This is used together with the `newPositions` to calculate the move transition.
-     *
-     * @internal
-     */
-    protected oldPositions!: WeakMap<Element, Bounds>;
-    /**
-     * A map containing the new positions relative to the container, for each item
-     * rendered inside the slot of this component.
-     * This is used together with the `newPositions` to calculate the move transition.
-     *
-     * @internal
-     */
-    protected newPositions!: WeakMap<Element, Bounds>;
-    /**
-     * A map containing the move cleanup functions pending to have been called. When invoked
-     * this functions remove all the styles and classes associated to the move transition.
-     *
-     * @internal
-     */
-    protected pendingCleanupMoveCallbacks!: WeakMap<Element, () => void>;
-    /**
-     * The counter for the stagger, used to calculate the delay for the transition of each child
-     * element. It is reset every time the render method is triggered.
-     *
-     * @internal
-     */
-    protected staggerCounter!: number;
-    /**
-     * The bounds of the container rendered using the `tag` prop. This is used to calculate the
-     * relative positions of each leaving child, which are then applied with the position absolute.
-     *
-     * @internal
-     */
-    protected wrapperBounds!: DOMRect;
-
-    beforeCreate(): void {
       // Initialize properties here to avoid making them reactive, which would cause infinite loops.
-      this.oldChildren = [];
-      this.newChildren = [];
-      this.oldPositions = new WeakMap();
-      this.newPositions = new WeakMap();
-      this.pendingCleanupMoveCallbacks = new WeakMap<Element, () => void>();
-      this.staggerCounter = 0;
-    }
+      /**
+       * The list of old virtual nodes, generated by the previous called render method.
+       */
+      let oldChildren: TransitionVNode[] = [];
+      /**
+       * The list of new virtual nodes, generated by the last called render method.
+       */
+      let newChildren: TransitionVNode[] = [];
+      /**
+       * A map containing the previous positions relative to the container, for each item
+       * rendered inside the slot of this component.
+       * This is used together with the `newPositions` to calculate the move transition.
+       */
+      const oldPositions: WeakMap<Element, Bounds> = new WeakMap();
+      /**
+       * A map containing the new positions relative to the container, for each item
+       * rendered inside the slot of this component.
+       * This is used together with the `newPositions` to calculate the move transition.
+       */
+      const newPositions: WeakMap<Element, Bounds> = new WeakMap();
+      /**
+       * A map containing the move cleanup functions pending to have been called. When invoked
+       * this functions remove all the styles and classes associated to the move transition.
+       */
+      const pendingCleanupMoveCallbacks: WeakMap<Element, () => void> = new WeakMap<
+        Element,
+        () => void
+      >();
+      /**
+       * The counter for the stagger, used to calculate the delay for the transition of each child
+       * element. It is reset every time the render method is triggered.
+       */
+      let staggerCounter = 0;
+      /**
+       * The bounds of the container rendered using the `tag` prop. This is used to calculate the
+       * relative positions of each leaving child, which are then applied with the position absolute.
+       */
+      let wrapperBounds: DOMRect;
+
+      onMounted(() => {
+        newChildren.forEach(applyStagger);
+      });
 
-    render(createElement: CreateElement): VNode {
-      this.staggerCounter = 0;
-      // New children are now the old ones
-      this.oldChildren = this.newChildren;
-      // Only vnodes with a tag (i.e. no HTML comments) and with a `key` property are valid.
-      this.newChildren = (this.$slots.default ?? []).filter(this.isTransitionValidVNode);
-
-      // Apply transition data to both new and old nodes & store the position of the old nodes.
-      this.newChildren.forEach(this.addTransitionData);
-      this.oldChildren.forEach(this.syncOldNodes);
-
-      return createElement(
-        this.tag,
-        { staticClass: 'x-staggering-transition-group' },
-        this.newChildren
-      );
-    }
+      onBeforeUpdate(() => {
+        wrapperBounds = (rootVNode.elm as HTMLElement).getBoundingClientRect();
+      });
 
-    mounted(): void {
-      this.newChildren.forEach(this.applyStagger);
-    }
+      onUpdated(() => {
+        wrapperBounds = (rootVNode.elm as HTMLElement).getBoundingClientRect();
+        newChildren.forEach(recordNewPosition);
+        const { leavingNodes, stayingNodes, enteringNodes } = getNodesByTransitionType();
 
-    beforeUpdate(): void {
-      this.wrapperBounds = this.$el.getBoundingClientRect();
-    }
+        leavingNodes.forEach(vNode => {
+          applyStagger(vNode);
+          disableClickingEvents(vNode);
+        });
+        const movedChildren = stayingNodes.filter(applyTranslation);
+        const movedStagger = movedChildren.map(getNextTransitionDelay);
+        enteringNodes.forEach(applyStagger);
 
-    updated(): void {
-      this.wrapperBounds = this.$el.getBoundingClientRect();
-      this.newChildren.forEach(this.recordNewPosition);
-      const { leavingNodes, stayingNodes, enteringNodes } = this.getNodesByTransitionType();
+        // force reflow to put everything in position
+        document.body.getBoundingClientRect();
 
-      leavingNodes.forEach(vNode => {
-        this.applyStagger(vNode);
-        this.disableClickingEvents(vNode);
+        movedChildren.forEach(startMoveAnimation(movedStagger));
       });
-      const movedChildren = stayingNodes.filter(this.applyTranslation);
-      const movedStagger = movedChildren.map(this.getNextTransitionDelay);
-      enteringNodes.forEach(this.applyStagger);
-
-      // force reflow to put everything in position
-      document.body.getBoundingClientRect();
 
-      movedChildren.forEach(this.startMoveAnimation(movedStagger));
-    }
-
-    /**
-     * Extends the provided leave transition hook restoring the position of the element with an
-     * absolute position.
-     * Additionally, it removes the element position from the maps of positions.
-     *
-     * @param transitionHook - The leave transition hook to extend.
-     * @returns The new leave transition hook extended.
-     * @internal
-     */
-    protected addRestorePositionHook(transitionHook: TransitionHook = noOp): TransitionHook {
-      return element => {
-        const { top, left, width, height } = this.oldPositions.get(element)!;
-        const { marginTop, marginLeft } = window.getComputedStyle(element);
-        const style = element.style;
-        style.position = 'absolute';
-        style.top = `${top - parseFloat(marginTop)}px`;
-        style.left = `${left - parseFloat(marginLeft)}px`;
-        style.width = `${width}px`;
-        style.height = `${height}px`;
-        this.newPositions.delete(element);
-        this.oldPositions.delete(element);
-        const pendingCallback = this.pendingCleanupMoveCallbacks.get(element);
-        pendingCallback?.();
-        transitionHook(element);
-      };
-    }
+      /**
+       * Extends the provided leave transition hook restoring the position of the element with an
+       * absolute position.
+       * Additionally, it removes the element position from the maps of positions.
+       *
+       * @param transitionHook - The leave transition hook to extend.
+       * @returns The new leave transition hook extended.
+       */
+      function addRestorePositionHook(transitionHook: TransitionHook = noOp): TransitionHook {
+        return element => {
+          const { top, left, width, height } = oldPositions.get(element)!;
+          const { marginTop, marginLeft } = window.getComputedStyle(element);
+          const style = element.style;
+          style.position = 'absolute';
+          style.top = `${top - parseFloat(marginTop)}px`;
+          style.left = `${left - parseFloat(marginLeft)}px`;
+          style.width = `${width}px`;
+          style.height = `${height}px`;
+          newPositions.delete(element);
+          oldPositions.delete(element);
+          const pendingCallback = pendingCleanupMoveCallbacks.get(element);
+          pendingCallback?.();
+          transitionHook(element);
+        };
+      }
 
-    /**
-     * Extends the provided transition hook clearing the transition delay.
-     *
-     * @param transitionHook - The transition hook to extend.
-     * @returns The new transition hook, that also clears the transitionDelay from the element.
-     * @internal
-     */
-    protected addClearStaggeringCall(transitionHook: TransitionHook = noOp): TransitionHook {
-      return element => {
-        element.style.transitionDelay = '';
-        transitionHook(element);
-      };
-    }
+      /**
+       * Extends the provided transition hook clearing the transition delay.
+       *
+       * @param transitionHook - The transition hook to extend.
+       * @returns The new transition hook, that also clears the transitionDelay from the element.
+       */
+      function addClearStaggeringCall(transitionHook: TransitionHook = noOp): TransitionHook {
+        return element => {
+          element.style.transitionDelay = '';
+          transitionHook(element);
+        };
+      }
 
-    /**
-     * Returns if the vNode contains a non empty key, and a non empty tag.
-     *
-     * @param vNode - The VNode to check if it is a valid transition node, containing a `tag` and a
-     * `key` property.
-     * @returns True when the vNode contains a non empty key and a non empty tag. False otherwise.
-     * @internal
-     */
-    protected isTransitionValidVNode(vNode: VNode): vNode is TransitionVNode {
-      // TODO Add warning with logger: <staggering-transition-group> children must be keyed.
-      return !!vNode.key && !!vNode.tag;
-    }
+      /**
+       * Returns if the vNode contains a non empty key, and a non empty tag.
+       *
+       * @param vNode - The VNode to check if it is a valid transition node, containing a `tag` and a
+       * `key` property.
+       * @returns True when the vNode contains a non empty key and a non empty tag. False otherwise.
+       */
+      function isTransitionValidVNode(vNode: VNode): vNode is TransitionVNode {
+        // TODO Add warning with logger: <staggering-transition-group> children must be keyed.
+        return !!vNode.key && !!vNode.tag;
+      }
 
-    /**
-     * Adds the generated transition data to the vNode, creating the `data` property if necessary.
-     *
-     * @param vNode - The VNode to add the transition data to.
-     * @internal
-     */
-    protected addTransitionData(vNode: TransitionVNode): void {
-      if (!vNode.data) {
-        vNode.data = {};
+      /**
+       * Adds the generated transition data to the vNode, creating the `data` property if necessary.
+       *
+       * @param vNode - The VNode to add the transition data to.
+       */
+      function addTransitionData(vNode: TransitionVNode): void {
+        if (!vNode.data) {
+          vNode.data = {};
+        }
+        vNode.data.transition = transitionData.value;
       }
-      vNode.data.transition = this.transitionData;
-    }
 
-    /**
-     * Re-applies the transition data to an old node, just in case it changed from the previous
-     * render call. It also records the position of the node, to then calculate the move
-     * transitions.
-     *
-     * @param vNode - The vNode to add the transition data to, and record his current position as
-     * old.
-     * @internal
-     */
-    protected syncOldNodes(vNode: TransitionVNode): void {
-      // Synchronize transition data, in case it changed in the last frame.
-      // We can trust data to be defined because each new node has the transition applied
-      vNode.data!.transition = this.transitionData;
-      this.recordOldPosition(vNode);
-    }
+      /**
+       * Re-applies the transition data to an old node, just in case it changed from the previous
+       * render call. It also records the position of the node, to then calculate the move
+       * transitions.
+       *
+       * @param vNode - The vNode to add the transition data to, and record his current position as
+       * old.
+       */
+      function syncOldNodes(vNode: TransitionVNode): void {
+        // Synchronize transition data, in case it changed in the last frame.
+        // We can trust data to be defined because each new node has the transition applied
+        vNode.data!.transition = transitionData.value;
+        recordOldPosition(vNode);
+      }
 
-    /**
-     * Saves the position of the vNode in the map of old positions.
-     *
-     * @param vNode - The node to store its position.
-     * @internal
-     */
-    protected recordOldPosition(vNode: TransitionVNode): void {
-      this.oldPositions.set(vNode.elm, this.createRelativeBounds(vNode));
-    }
+      /**
+       * Saves the position of the vNode in the map of old positions.
+       *
+       * @param vNode - The node to store its position.
+       */
+      function recordOldPosition(vNode: TransitionVNode): void {
+        oldPositions.set(vNode.elm, createRelativeBounds(vNode));
+      }
 
-    /**
-     * Saves the position of the vNode in the map of new positions.
-     *
-     * @param vNode - The node to store its position.
-     * @internal
-     */
-    protected recordNewPosition(vNode: TransitionVNode): void {
-      this.newPositions.set(vNode.elm, this.createRelativeBounds(vNode));
-    }
+      /**
+       * Saves the position of the vNode in the map of new positions.
+       *
+       * @param vNode - The node to store its position.
+       */
+      function recordNewPosition(vNode: TransitionVNode): void {
+        newPositions.set(vNode.elm, createRelativeBounds(vNode));
+      }
 
-    /**
-     * Creates an object containing the position of the vNode relative to its container.
-     *
-     * @param vNode - The virtual node to store its relative position.
-     * @returns The relative bounds of the provided virtual node.
-     * @internal
-     */
-    protected createRelativeBounds(vNode: TransitionVNode): Bounds {
-      const { left, top, width, height } = vNode.elm.getBoundingClientRect();
-      const { left: wrapperLeft, top: wrapperTop } = this.wrapperBounds;
-      return {
-        left: left - wrapperLeft,
-        top: top - wrapperTop,
-        width,
-        height
-      };
-    }
+      /**
+       * Creates an object containing the position of the vNode relative to its container.
+       *
+       * @param vNode - The virtual node to store its relative position.
+       * @returns The relative bounds of the provided virtual node.
+       */
+      function createRelativeBounds(vNode: TransitionVNode): Bounds {
+        const { left, top, width, height } = vNode.elm.getBoundingClientRect();
+        const { left: wrapperLeft, top: wrapperTop } = wrapperBounds;
+        return {
+          left: left - wrapperLeft,
+          top: top - wrapperTop,
+          width,
+          height
+        };
+      }
 
-    /**
-     * Splits the children of the component into three groups:
-     * - Nodes that are leaving.
-     * - Nodes that are entering.
-     * - Nodes that stay.
-     *
-     * This is then used to apply the stagger in the correct order: leave -\> move -\> enter.
-     *
-     * @returns The children nodes, divided in different groups depending on if they are leaving,
-     * staying or entering.
-     * @internal
-     */
-    protected getNodesByTransitionType(): TransitionTypeNodes {
-      const leave = this.oldChildren.filter(child => !this.newPositions.has(child.elm));
-      const enter = this.newChildren.filter(child => !this.oldPositions.has(child.elm));
-      const stay = this.oldChildren.filter(child => this.newPositions.has(child.elm));
-      return {
-        leavingNodes: leave,
-        enteringNodes: enter,
-        stayingNodes: stay
-      };
-    }
+      /**
+       * Splits the children of the component into three groups:
+       * - Nodes that are leaving.
+       * - Nodes that are entering.
+       * - Nodes that stay.
+       *
+       * This is then used to apply the stagger in the correct order: leave -\> move -\> enter.
+       *
+       * @returns The children nodes, divided in different groups depending on if they are leaving,
+       * staying or entering.
+       */
+      function getNodesByTransitionType(): TransitionTypeNodes {
+        const leave = oldChildren.filter(child => !newPositions.has(child.elm));
+        const enter = newChildren.filter(child => !oldPositions.has(child.elm));
+        const stay = oldChildren.filter(child => newPositions.has(child.elm));
+        return {
+          leavingNodes: leave,
+          enteringNodes: enter,
+          stayingNodes: stay
+        };
+      }
 
-    /**
-     * Applies an incremental delay to the virtual node element.
-     *
-     * @param vNode - The virtual node to apply the stagger to.
-     * @internal
-     */
-    protected applyStagger(vNode: TransitionVNode): void {
-      vNode.elm.style.transitionDelay = this.getNextTransitionDelay();
-    }
+      /**
+       * Applies an incremental delay to the virtual node element.
+       *
+       * @param vNode - The virtual node to apply the stagger to.
+       */
+      function applyStagger(vNode: TransitionVNode): void {
+        vNode.elm.style.transitionDelay = getNextTransitionDelay();
+      }
 
-    /**
-     * Disables listening to click events in a virtual node element.
-     *
-     * @remarks This is done to avoid letting the user click elements that are performing the moving
-     * animation to leave the DOM but are still rendered.
-     *
-     * @param vNode - The virtual node to disable listening to click events.
-     * @internal
-     */
-    protected disableClickingEvents(vNode: TransitionVNode): void {
-      vNode.elm.style.pointerEvents = 'none';
-    }
+      /**
+       * Disables listening to click events in a virtual node element.
+       *
+       * @remarks This is done to avoid letting the user click elements that are performing the moving
+       * animation to leave the DOM but are still rendered.
+       *
+       * @param vNode - The virtual node to disable listening to click events.
+       */
+      function disableClickingEvents(vNode: TransitionVNode): void {
+        vNode.elm.style.pointerEvents = 'none';
+      }
 
-    /**
-     * Calculates the next transition delay property, incrementing the `staggerCounter` property
-     * each time it is called.
-     *
-     * @returns The value for the next element `style.transitionDelay` property.
-     * @internal
-     */
-    protected getNextTransitionDelay(): string {
-      return `${this.staggerCounter++ * this.staggering}ms`;
-    }
+      /**
+       * Calculates the next transition delay property, incrementing the `staggerCounter` property
+       * each time it is called.
+       *
+       * @returns The value for the next element `style.transitionDelay` property.
+       */
+      function getNextTransitionDelay(): string {
+        return `${staggerCounter++ * props.staggering}ms`;
+      }
 
-    /**
-     * Calculates if the virtual node should have a move transition. If its has it, then it
-     * applies it immediately using the `style.transform`.
-     *
-     * @param vNode - The virtual node to calculate if it should have a move transition.
-     * @returns True when a move transition was applied to the virtual node.
-     * @internal
-     */
-    protected applyTranslation(vNode: TransitionVNode): boolean {
-      const oldPosition = this.oldPositions.get(vNode.elm as Element)!;
-      const newPosition = this.newPositions.get(vNode.elm as Element)!;
-      const dx = oldPosition.left - newPosition.left;
-      const dy = oldPosition.top - newPosition.top;
-      if (dx !== 0 || dy !== 0) {
-        const style = vNode.elm.style;
-        style.transform = `translate3d(${dx}px,${dy}px,0)`;
-        style.transitionDuration = '0s';
-        return true;
+      /**
+       * Calculates if the virtual node should have a move transition. If its has it, then it
+       * applies it immediately using the `style.transform`.
+       *
+       * @param vNode - The virtual node to calculate if it should have a move transition.
+       * @returns True when a move transition was applied to the virtual node.
+       */
+      function applyTranslation(vNode: TransitionVNode): boolean {
+        const oldPosition = oldPositions.get(vNode.elm as Element)!;
+        const newPosition = newPositions.get(vNode.elm as Element)!;
+        const dx = oldPosition.left - newPosition.left;
+        const dy = oldPosition.top - newPosition.top;
+        if (dx !== 0 || dy !== 0) {
+          const style = vNode.elm.style;
+          style.transform = `translate3d(${dx}px,${dy}px,0)`;
+          style.transitionDuration = '0s';
+          return true;
+        }
+        return false;
       }
-      return false;
-    }
 
-    /**
-     * Generates a function to start the moving animations to each node that it needs them with the
-     * provided stagger.
-     *
-     * @param moveStagger - A list containing the delay to add to each node.
-     * @returns A function that starts the moving animation with the provided stagger to a single
-     * virtual node.
-     * @internal
-     */
-    protected startMoveAnimation(
-      moveStagger: string[]
-    ): (vNode: TransitionVNode, index: number) => void {
-      return (vNode, index) => {
-        const element = vNode.elm;
-        const style = element.style;
-        element.classList.add(this.moveClassName);
-        style.transform = style.transitionDuration = '';
-        style.transitionDelay = moveStagger[index];
-        const cleanMoveTransition = (event?: TransitionEvent): void => {
-          if (!event || (event.target === element && /transform$/.test(event.propertyName))) {
-            element.removeEventListener('transitionend', cleanMoveTransition);
-            element.style.transitionDelay = '';
-            element.classList.remove(this.moveClassName);
-            this.pendingCleanupMoveCallbacks.delete(element);
-          }
+      /**
+       * Generates a function to start the moving animations to each node that it needs them with the
+       * provided stagger.
+       *
+       * @param moveStagger - A list containing the delay to add to each node.
+       * @returns A function that starts the moving animation with the provided stagger to a single
+       * virtual node.
+       */
+      function startMoveAnimation(
+        moveStagger: string[]
+      ): (vNode: TransitionVNode, index: number) => void {
+        return (vNode, index) => {
+          const element = vNode.elm;
+          const style = element.style;
+          element.classList.add(moveClassName.value);
+          style.transform = style.transitionDuration = '';
+          style.transitionDelay = moveStagger[index];
+          const cleanMoveTransition = (event?: TransitionEvent): void => {
+            if (!event || (event.target === element && /transform$/.test(event.propertyName))) {
+              element.removeEventListener('transitionend', cleanMoveTransition);
+              element.style.transitionDelay = '';
+              element.classList.remove(moveClassName.value);
+              pendingCleanupMoveCallbacks.delete(element);
+            }
+          };
+          pendingCleanupMoveCallbacks.set(element, cleanMoveTransition);
+          element.addEventListener('transitionend', cleanMoveTransition);
         };
-        this.pendingCleanupMoveCallbacks.set(element, cleanMoveTransition);
-        element.addEventListener('transitionend', cleanMoveTransition);
+      }
+
+      return () => {
+        staggerCounter = 0;
+        // New children are now the old ones
+        oldChildren = newChildren;
+        // Only vnodes with a tag (i.e. no HTML comments) and with a `key` property are valid.
+        newChildren = (
+          (typeof slots.default === 'function' ? slots.default() : slots.default) ?? []
+        ).filter(isTransitionValidVNode);
+
+        // Apply transition data to both new and old nodes & store the position of the old nodes.
+        newChildren.forEach(addTransitionData);
+        oldChildren.forEach(syncOldNodes);
+
+        rootVNode = h(props.tag, { staticClass: 'x-staggering-transition-group' }, newChildren);
+        return rootVNode;
       };
     }
-  }
+  });
 
   /**
    * Contains arrays of nodes, splitted by the action they should have.

From 25dca9830ba89abcf13bb1b1a149bbc8c33ce5e7 Mon Sep 17 00:00:00 2001
From: varodv <72568818+alvarodE@users.noreply.github.com>
Date: Tue, 14 May 2024 17:44:04 +0200
Subject: [PATCH 4/7] Fix v-bind order migration warning

---
 .../src/components/animations/collapse-height.vue             | 4 +++-
 .../x-components/src/components/animations/collapse-width.vue | 4 +++-
 .../x-components/src/components/animations/cross-fade.vue     | 3 ++-
 .../x-components/src/components/animations/fade-and-slide.vue | 4 +++-
 .../src/components/animations/staggered-fade-and-slide.vue    | 4 +++-
 5 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/x-components/src/components/animations/collapse-height.vue b/packages/x-components/src/components/animations/collapse-height.vue
index 9ded2cfd63..bcaa5c252c 100644
--- a/packages/x-components/src/components/animations/collapse-height.vue
+++ b/packages/x-components/src/components/animations/collapse-height.vue
@@ -1,13 +1,15 @@
 <template>
+  <!-- eslint-disable vue/attributes-order -->
   <transition
+    v-bind="$attrs"
     v-on="$listeners"
     @enter="expand"
     @after-enter="cleanUpAnimationStyles"
     @leave="collapse"
     name="x-collapse-height-"
-    v-bind="$attrs"
     :appear="appear"
   >
+    <!-- eslint-enable -->
     <!-- @slot (Required) to add content to the transition -->
     <slot />
   </transition>
diff --git a/packages/x-components/src/components/animations/collapse-width.vue b/packages/x-components/src/components/animations/collapse-width.vue
index 0d9a408d26..2c991056d3 100644
--- a/packages/x-components/src/components/animations/collapse-width.vue
+++ b/packages/x-components/src/components/animations/collapse-width.vue
@@ -1,13 +1,15 @@
 <template>
+  <!-- eslint-disable vue/attributes-order -->
   <transition
+    v-bind="$attrs"
     v-on="$listeners"
     @enter="expand"
     @after-enter="cleanUpAnimationStyles"
     @leave="collapse"
     name="x-collapse-width-"
-    v-bind="$attrs"
     :appear="appear"
   >
+    <!-- eslint-enable -->
     <!-- @slot (Required) to add content to the transition -->
     <slot />
   </transition>
diff --git a/packages/x-components/src/components/animations/cross-fade.vue b/packages/x-components/src/components/animations/cross-fade.vue
index 1bece28416..f61f14c711 100644
--- a/packages/x-components/src/components/animations/cross-fade.vue
+++ b/packages/x-components/src/components/animations/cross-fade.vue
@@ -1,5 +1,6 @@
 <template>
-  <transition v-on="$listeners" name="x-cross-fade-" v-bind="$attrs" :appear="appear">
+  <!-- eslint-disable-next-line vue/attributes-order -->
+  <transition v-bind="$attrs" v-on="$listeners" name="x-cross-fade-" :appear="appear">
     <!-- @slot (Required) to add content to the transition -->
     <slot />
   </transition>
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 120918734f..976ca2065c 100644
--- a/packages/x-components/src/components/animations/fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/fade-and-slide.vue
@@ -1,12 +1,14 @@
 <template>
+  <!-- eslint-disable vue/attributes-order -->
   <transition-group
+    v-bind="$attrs"
     v-on="$listeners"
     class="x-fade-and-slide"
     :name="name"
     :tag="tag"
-    v-bind="$attrs"
     :appear="appear"
   >
+    <!-- eslint-enable -->
     <!-- @slot (Required) Transition-group content -->
     <slot />
   </transition-group>
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 f86758edd3..9ffc80d227 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
@@ -1,11 +1,13 @@
 <template>
+  <!-- eslint-disable vue/attributes-order -->
   <staggering-transition-group
+    v-bind="$attrs"
     v-on="$listeners"
     class="x-staggered-fade-and-slide"
     :name="name"
-    v-bind="$attrs"
     :appear="appear"
   >
+    <!-- eslint-enable -->
     <!-- @slot (Required) Transition-group content -->
     <slot />
   </staggering-transition-group>

From 938c6a97c49ff3ace03cb3694b10b5546f66206b Mon Sep 17 00:00:00 2001
From: varodv <72568818+alvarodE@users.noreply.github.com>
Date: Tue, 14 May 2024 17:44:52 +0200
Subject: [PATCH 5/7] Recover WATCH_ARRAY migration warning

---
 packages/_vue3-migration-test/src/main.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/_vue3-migration-test/src/main.ts b/packages/_vue3-migration-test/src/main.ts
index 7e289d91e0..de859ebc69 100644
--- a/packages/_vue3-migration-test/src/main.ts
+++ b/packages/_vue3-migration-test/src/main.ts
@@ -38,8 +38,7 @@ if (VUE_COMPAT_MODE === 2) {
     INSTANCE_LISTENERS: 'suppress-warning',
     INSTANCE_ATTRS_CLASS_STYLE: 'suppress-warning',
     RENDER_FUNCTION: false,
-    COMPONENT_V_MODEL: false,
-    WATCH_ARRAY: false
+    COMPONENT_V_MODEL: false
   });
 }
 

From 472cebabb7c40a84cd53be5dfaaf8734b4ff0496 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20CG?= <victorcg@empathy.co>
Date: Wed, 12 Jun 2024 13:02:46 +0200
Subject: [PATCH 6/7] migrate v-deep and fix staggering-transition-group

---
 .../src/components/animations/index.ts        |  1 -
 .../test-staggered-fade-and-slide.vue         | 11 --------
 packages/_vue3-migration-test/src/router.ts   |  8 +-----
 .../__tests__/use-disable-animation.spec.ts   |  4 +--
 .../components/animations/collapse-height.vue |  1 -
 .../components/animations/collapse-width.vue  |  1 -
 .../components/animations/fade-and-slide.vue  |  5 +---
 .../animations/staggered-fade-and-slide.vue   |  9 +++----
 .../staggering-transition-group.vue           | 26 ++++++++++++++-----
 .../animations/use-disable-animation.ts       | 12 +++------
 10 files changed, 30 insertions(+), 48 deletions(-)
 delete mode 100644 packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue

diff --git a/packages/_vue3-migration-test/src/components/animations/index.ts b/packages/_vue3-migration-test/src/components/animations/index.ts
index a102e70e6b..f1ee0800dd 100644
--- a/packages/_vue3-migration-test/src/components/animations/index.ts
+++ b/packages/_vue3-migration-test/src/components/animations/index.ts
@@ -4,4 +4,3 @@ export { default as TestCollapseWidth } from './test-collapse-width.vue';
 export { default as TestCrossFade } from './test-cross-fade.vue';
 export { default as TestFade } from './test-fade.vue';
 export { default as TestFadeAndSlide } from './test-fade-and-slide.vue';
-export { default as TestStaggeredFadeAndSlide } from './test-staggered-fade-and-slide.vue';
diff --git a/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue b/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue
deleted file mode 100644
index 1d04d4334e..0000000000
--- a/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <StaggeredFadeAndSlide tag="ul" :stagger="50">
-    <li key="1">Element to animate</li>
-    <li key="2">Element to animate</li>
-    <li key="3">Element to animate</li>
-  </StaggeredFadeAndSlide>
-</template>
-
-<script setup lang="ts">
-  import StaggeredFadeAndSlide from '../../../../x-components/src/components/animations/staggered-fade-and-slide.vue';
-</script>
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index a662d92a64..6a9454ec3a 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -39,8 +39,7 @@ import {
   TestSemanticQueries,
   TestRecommendations,
   TestNextQueries,
-  TestIdentifierResults,
-  TestStaggeredFadeAndSlide
+  TestIdentifierResults
 } from './';
 
 const routes = [
@@ -79,11 +78,6 @@ const routes = [
     name: 'FadeAndSlide',
     component: TestFadeAndSlide
   },
-  {
-    path: '/staggered-fade-and-slide',
-    name: 'StaggeredFadeAndSlide',
-    component: TestStaggeredFadeAndSlide
-  },
   {
     path: '/base-dropdown',
     name: 'BaseDropdown',
diff --git a/packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts b/packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts
index b2d1bac74d..91a642a215 100644
--- a/packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts
+++ b/packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import { defineComponent, provide } from 'vue';
+import { defineComponent, provide, ref } from 'vue';
 import { DISABLE_ANIMATIONS_KEY } from '../../decorators/injection.consts';
 import { useDisableAnimation } from '../use-disable-animation';
 
@@ -8,7 +8,7 @@ const Provider = defineComponent({
     disableAnimation: Boolean
   },
   setup(props) {
-    provide(DISABLE_ANIMATIONS_KEY as string, props.disableAnimation);
+    provide(DISABLE_ANIMATIONS_KEY as string, ref(props.disableAnimation));
   },
   render(h) {
     return this.$slots.default?.[0] ?? h();
diff --git a/packages/x-components/src/components/animations/collapse-height.vue b/packages/x-components/src/components/animations/collapse-height.vue
index bcaa5c252c..7c512b4871 100644
--- a/packages/x-components/src/components/animations/collapse-height.vue
+++ b/packages/x-components/src/components/animations/collapse-height.vue
@@ -9,7 +9,6 @@
     name="x-collapse-height-"
     :appear="appear"
   >
-    <!-- eslint-enable -->
     <!-- @slot (Required) to add content to the transition -->
     <slot />
   </transition>
diff --git a/packages/x-components/src/components/animations/collapse-width.vue b/packages/x-components/src/components/animations/collapse-width.vue
index 2c991056d3..ca59254b75 100644
--- a/packages/x-components/src/components/animations/collapse-width.vue
+++ b/packages/x-components/src/components/animations/collapse-width.vue
@@ -9,7 +9,6 @@
     name="x-collapse-width-"
     :appear="appear"
   >
-    <!-- eslint-enable -->
     <!-- @slot (Required) to add content to the transition -->
     <slot />
   </transition>
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 976ca2065c..9dbdb13c21 100644
--- a/packages/x-components/src/components/animations/fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/fade-and-slide.vue
@@ -8,7 +8,6 @@
     :tag="tag"
     :appear="appear"
   >
-    <!-- eslint-enable -->
     <!-- @slot (Required) Transition-group content -->
     <slot />
   </transition-group>
@@ -48,9 +47,7 @@
 
       const { name } = useDisableAnimation(animationName);
 
-      return {
-        name
-      };
+      return { name };
     }
   });
 </script>
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 9ffc80d227..033f8ec17e 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
@@ -1,16 +1,15 @@
 <template>
   <!-- eslint-disable vue/attributes-order -->
-  <staggering-transition-group
+  <StaggeringTransitionGroup
     v-bind="$attrs"
     v-on="$listeners"
     class="x-staggered-fade-and-slide"
     :name="name"
     :appear="appear"
   >
-    <!-- eslint-enable -->
     <!-- @slot (Required) Transition-group content -->
     <slot />
-  </staggering-transition-group>
+  </StaggeringTransitionGroup>
 </template>
 
 <script lang="ts">
@@ -45,9 +44,7 @@
 
       const { name } = useDisableAnimation(animationName);
 
-      return {
-        name
-      };
+      return { name };
     }
   });
 </script>
diff --git a/packages/x-components/src/components/animations/staggering-transition-group.vue b/packages/x-components/src/components/animations/staggering-transition-group.vue
index 2f4d0184ab..5e84c1b6bd 100644
--- a/packages/x-components/src/components/animations/staggering-transition-group.vue
+++ b/packages/x-components/src/components/animations/staggering-transition-group.vue
@@ -1,5 +1,14 @@
 <script lang="ts">
-  import { computed, defineComponent, h, onBeforeUpdate, onMounted, onUpdated, VNode } from 'vue';
+  import {
+    computed,
+    defineComponent,
+    h,
+    onBeforeUpdate,
+    onMounted,
+    onUpdated,
+    ref,
+    VNode
+  } from 'vue';
   import { noOp } from '../../utils/function';
 
   /* eslint-disable @typescript-eslint/unbound-method */
@@ -38,8 +47,12 @@
         default: 25
       }
     },
-    setup: function (props, { attrs, listeners, slots }) {
-      let rootVNode: VNode;
+    setup(props, { attrs, listeners, slots }) {
+      /**
+       * The reference to the element rendered by the component.
+       * Passed to the 'h' render function which will set the ref when the element is created.
+       */
+      const el = ref<HTMLElement>();
 
       /**
        * The CSS class for the moving transitions.
@@ -116,11 +129,11 @@
       });
 
       onBeforeUpdate(() => {
-        wrapperBounds = (rootVNode.elm as HTMLElement).getBoundingClientRect();
+        wrapperBounds = el.value!.getBoundingClientRect();
       });
 
       onUpdated(() => {
-        wrapperBounds = (rootVNode.elm as HTMLElement).getBoundingClientRect();
+        wrapperBounds = el.value!.getBoundingClientRect();
         newChildren.forEach(recordNewPosition);
         const { leavingNodes, stayingNodes, enteringNodes } = getNodesByTransitionType();
 
@@ -368,8 +381,7 @@
         newChildren.forEach(addTransitionData);
         oldChildren.forEach(syncOldNodes);
 
-        rootVNode = h(props.tag, { staticClass: 'x-staggering-transition-group' }, newChildren);
-        return rootVNode;
+        return h(props.tag, { ref: el, class: 'x-staggering-transition-group' }, newChildren);
       };
     }
   });
diff --git a/packages/x-components/src/components/animations/use-disable-animation.ts b/packages/x-components/src/components/animations/use-disable-animation.ts
index ddb9512462..3699717c98 100644
--- a/packages/x-components/src/components/animations/use-disable-animation.ts
+++ b/packages/x-components/src/components/animations/use-disable-animation.ts
@@ -1,4 +1,4 @@
-import { computed, inject } from 'vue';
+import { computed, inject, ref } from 'vue';
 import { DISABLE_ANIMATIONS_KEY } from '../decorators/injection.consts';
 
 /**
@@ -13,18 +13,14 @@ export function useDisableAnimation(animationName: string) {
   /**
    * Flag to disable the animation.
    */
-  const disableAnimation = inject(DISABLE_ANIMATIONS_KEY as string, false);
+  const disableAnimation = inject(DISABLE_ANIMATIONS_KEY as string, ref(false));
 
   /**
    * The animation's name based on the DISABLE_ANIMATIONS_KEY flag.
    *
    * @returns The animation name.
    */
-  const name = computed<string>(() => {
-    return disableAnimation ? '__no-animation__' : animationName;
-  });
+  const name = computed(() => (disableAnimation.value ? '__no-animation__' : animationName));
 
-  return {
-    name
-  };
+  return { name };
 }

From 079a6f1e67973bdbce246bdef81e249c8218c1c7 Mon Sep 17 00:00:00 2001
From: "Jose A. Cabaneros" <joseacabaneros@gmail.com>
Date: Thu, 20 Jun 2024 12:12:42 +0200
Subject: [PATCH 7/7] fix(vue3): fix minor Vue3 warnings about migration

---
 .../animations/test-fade-and-slide.vue        | 12 ++++--
 .../src/components/animations/test-fade.vue   | 10 ++---
 .../modals/test-base-events-modal.vue         |  4 +-
 .../src/components/panels/test-base-panel.vue |  6 +--
 .../components/animations/fade-and-slide.vue  |  4 +-
 .../components/modals/base-events-modal.vue   | 37 ++++---------------
 .../panels/base-id-toggle-panel-button.vue    |  2 +-
 .../src/components/panels/base-tabs-panel.vue |  2 +-
 8 files changed, 27 insertions(+), 50 deletions(-)

diff --git a/packages/_vue3-migration-test/src/components/animations/test-fade-and-slide.vue b/packages/_vue3-migration-test/src/components/animations/test-fade-and-slide.vue
index 8553f4e244..1ce1542ea9 100644
--- a/packages/_vue3-migration-test/src/components/animations/test-fade-and-slide.vue
+++ b/packages/_vue3-migration-test/src/components/animations/test-fade-and-slide.vue
@@ -1,11 +1,17 @@
 <template>
+  <button @click="toggleItems">Toggle</button>
   <FadeAndSlide tag="ul">
-    <li>Element to animate</li>
-    <li>Element to animate</li>
-    <li>Element to animate</li>
+    <li v-for="item in items" :key="item">
+      {{ item }}
+    </li>
   </FadeAndSlide>
 </template>
 
 <script setup lang="ts">
+  import { ref } from 'vue';
   import FadeAndSlide from '../../../../x-components/src/components/animations/fade-and-slide.vue';
+
+  const items = ref<string[]>([]);
+  const toggleItems = () =>
+    (items.value = items.value.length ? [] : [1, 2, 3, 4, 5].map(i => `Item number ${i}`));
 </script>
diff --git a/packages/_vue3-migration-test/src/components/animations/test-fade.vue b/packages/_vue3-migration-test/src/components/animations/test-fade.vue
index a9049c556f..5bd91ab0dd 100644
--- a/packages/_vue3-migration-test/src/components/animations/test-fade.vue
+++ b/packages/_vue3-migration-test/src/components/animations/test-fade.vue
@@ -1,10 +1,8 @@
 <template>
-  <div>
-    <button @click="shouldRender = !shouldRender">Toggle</button>
-    <Fade>
-      <p v-if="shouldRender">León is southern Spain</p>
-    </Fade>
-  </div>
+  <button @click="shouldRender = !shouldRender">Toggle</button>
+  <Fade>
+    <p v-if="shouldRender">León is southern Spain</p>
+  </Fade>
 </template>
 
 <script setup lang="ts">
diff --git a/packages/_vue3-migration-test/src/components/modals/test-base-events-modal.vue b/packages/_vue3-migration-test/src/components/modals/test-base-events-modal.vue
index 935e5363a2..9db8152065 100644
--- a/packages/_vue3-migration-test/src/components/modals/test-base-events-modal.vue
+++ b/packages/_vue3-migration-test/src/components/modals/test-base-events-modal.vue
@@ -4,7 +4,6 @@
     <BaseEventsModal
       :animation="Fade"
       :focusOnOpen="true"
-      v-bind="$attrs"
       contentClass="content"
       overlayClass="overlay"
     >
@@ -19,10 +18,9 @@
   import BaseEventsModal from '../../../../x-components/src/components/modals/base-events-modal.vue';
   import Fade from '../../../../x-components/src/components/animations/fade.vue';
   import { use$x } from '../../../../x-components/src/composables/use-$x';
-  const _$x = use$x();
 
+  const _$x = use$x();
   const openModal = () => _$x.emit('UserClickedOpenEventsModal');
-
   const closeModal = () => _$x.emit('UserClickedCloseEventsModal');
 </script>
 
diff --git a/packages/_vue3-migration-test/src/components/panels/test-base-panel.vue b/packages/_vue3-migration-test/src/components/panels/test-base-panel.vue
index 714b37b7b5..67c987b933 100644
--- a/packages/_vue3-migration-test/src/components/panels/test-base-panel.vue
+++ b/packages/_vue3-migration-test/src/components/panels/test-base-panel.vue
@@ -5,9 +5,7 @@
       <template #header-content="{ open }">
         <p>Header, open: {{ open ? 'close' : 'open' }}</p>
       </template>
-      <template>
-        <p>Default content</p>
-      </template>
+      <p>Default content</p>
     </BaseHeaderTogglePanel>
 
     <h2>Base id toggle panel, Base id toggle panel button and Base Toggle panel</h2>
@@ -21,11 +19,9 @@
       <template #summer>
         <div>Summer Top Sales</div>
       </template>
-
       <template #fall>
         <div>Fall Top Sales</div>
       </template>
-
       <template #outlet>
         <div>Outlet Top Sales</div>
       </template>
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 9dbdb13c21..d49de3320a 100644
--- a/packages/x-components/src/components/animations/fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/fade-and-slide.vue
@@ -52,11 +52,11 @@
   });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
   $transition-opacity-duration: 0.2s;
   $transition-transform-duration: 0.3s;
 
-  .x-fade-and-slide::v-deep .x-fade-and-slide {
+  .x-fade-and-slide {
     &--move,
     &--enter-active,
     &--leave-active {
diff --git a/packages/x-components/src/components/modals/base-events-modal.vue b/packages/x-components/src/components/modals/base-events-modal.vue
index 9eae82ebc5..4d4a7fe449 100644
--- a/packages/x-components/src/components/modals/base-events-modal.vue
+++ b/packages/x-components/src/components/modals/base-events-modal.vue
@@ -36,46 +36,32 @@
       BaseModal
     },
     props: {
-      /**
-       * Animation to use for opening/closing the modal.
-       */
-      animation: AnimationProp,
-
-      /**
-       * Array of {@link XEvent} to listen to open the modal.
-       */
+      /** Array of {@link XEvent} to listen to open the modal. */
       eventsToOpenModal: {
         type: Array as PropType<XEvent[]>,
         default: (): XEvent[] => ['UserClickedOpenEventsModal']
       },
-
-      /**
-       * Array of {@link XEvent} to listen to close the modal.
-       */
+      /** Array of {@link XEvent} to listen to close the modal. */
       eventsToCloseModal: {
         type: Array as PropType<XEvent[]>,
         default: (): XEvent[] => ['UserClickedCloseEventsModal', 'UserClickedOutOfEventsModal']
       },
-
-      /**
-       * Event to emit when any part of the website out of the modal has been clicked.
-       */
+      /** Event to emit when any part of the website out of the modal has been clicked. */
       bodyClickEvent: {
         type: String as PropType<XEvent>,
         default: 'UserClickedOutOfEventsModal'
-      }
+      },
+      /** Animation to use for opening/closing the modal. */
+      animation: AnimationProp
     },
     setup(props) {
       const $x = use$x();
 
-      /**
-       * Whether the modal is open or not.
-       */
+      /** Whether the modal is open or not. */
       const isOpen = ref(false);
 
       /** The element that opened the modal. */
       const openerElement = ref<HTMLElement>();
-
       const baseModalEl = ref<HTMLElement>();
 
       /**
@@ -83,8 +69,6 @@
        *
        * @param _payload - The payload of the event that opened the modal.
        * @param metadata - The metadata of the event that opened the modal.
-       *
-       * @internal
        */
       props.eventsToOpenModal?.forEach(event =>
         $x.on(event, true).subscribe(({ metadata }) => {
@@ -95,11 +79,7 @@
         })
       );
 
-      /**
-       * Closes the modal.
-       *
-       * @internal
-       */
+      /** Closes the modal. */
       props.eventsToCloseModal?.forEach(event =>
         $x.on(event, false).subscribe(() => {
           if (isOpen.value) {
@@ -113,7 +93,6 @@
        * event target is the button that opened the modal.
        *
        * @param event - The event that triggered the close attempt.
-       * @public
        */
       const emitBodyClickEvent = (event: MouseEvent | FocusEvent) => {
         // Prevents clicking the open button when the panel is already open to close the panel.
diff --git a/packages/x-components/src/components/panels/base-id-toggle-panel-button.vue b/packages/x-components/src/components/panels/base-id-toggle-panel-button.vue
index a549219f0f..e3b875c08d 100644
--- a/packages/x-components/src/components/panels/base-id-toggle-panel-button.vue
+++ b/packages/x-components/src/components/panels/base-id-toggle-panel-button.vue
@@ -4,7 +4,7 @@
     :events="events"
     class="x-base-id-toggle-panel-button x-button"
     data-test="base-id-toggle-button"
-    :aria-pressed="isPanelOpen"
+    :aria-pressed="isPanelOpen.toString()"
   >
     <!-- @slot (Required) Button content with a text, an icon or both -->
     <slot :isPanelOpen="isPanelOpen" />
diff --git a/packages/x-components/src/components/panels/base-tabs-panel.vue b/packages/x-components/src/components/panels/base-tabs-panel.vue
index 9379c435ba..11d72b1df6 100644
--- a/packages/x-components/src/components/panels/base-tabs-panel.vue
+++ b/packages/x-components/src/components/panels/base-tabs-panel.vue
@@ -24,7 +24,7 @@
           :id="`base-tabs-panel-${tab}`"
           class="x-tabs-panel__list-item x-tabs-panel__button x-button"
           :class="tabIsSelected(tab) ? activeTabClass : tabClass"
-          :aria-selected="tabIsSelected(tab)"
+          :aria-selected="tabIsSelected(tab).toString()"
           data-test="base-tabs-panel-button"
           role="tab"
         >