From 9d634f183c42a468b0ef89281b17a685df6dc67d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20CG?= <victorcg@empathy.co>
Date: Thu, 27 Jun 2024 12:41:42 +0200
Subject: [PATCH] refactor(staggered-fade-and-slide): use Vue native staggered
 transition

---
 .../src/components/animations/index.ts        |   1 +
 .../test-staggered-fade-and-slide.vue         |  72 ++++++++
 .../src/components/test-search.vue            |   2 +
 packages/_vue3-migration-test/src/router.ts   |   6 +
 .../src/components/animations/index.ts        |   1 +
 .../vue3-staggered-fade-and-slide.vue         | 172 ++++++++++++++++++
 .../x-components/src/components/base-grid.vue |  65 ++++---
 7 files changed, 290 insertions(+), 29 deletions(-)
 create mode 100644 packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue
 create mode 100644 packages/x-components/src/components/animations/vue3-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 f1ee0800dd..a102e70e6b 100644
--- a/packages/_vue3-migration-test/src/components/animations/index.ts
+++ b/packages/_vue3-migration-test/src/components/animations/index.ts
@@ -4,3 +4,4 @@ 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
new file mode 100644
index 0000000000..6d3a6a9d54
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue
@@ -0,0 +1,72 @@
+<template>
+  <h1>Dinamic content:</h1>
+  <button @click="insert">Insert at random index</button>
+  <button @click="reset">Reset</button>
+
+  <Vue3StaggeredFadeAndSlide :stagger="500">
+    <li v-for="item in items" :key="item.id">
+      {{ item.id }} - {{ item.name }}
+      <button @click="remove(item)">x</button>
+    </li>
+  </Vue3StaggeredFadeAndSlide>
+
+  <br />
+  <h1>Animation as prop</h1>
+  <BaseSuggestions :suggestions="suggestions" :animation="Vue3StaggeredFadeAndSlide" :stagger="50">
+    <template #default="{ suggestion }">
+      <span>{{ suggestion.query }}</span>
+    </template>
+  </BaseSuggestions>
+
+  <br />
+  <h1>Static content:</h1>
+  <Vue3StaggeredFadeAndSlide :stagger="50">
+    <li key="1">Element to animate</li>
+    <li key="2">Element to animate</li>
+    <li key="3">Element to animate</li>
+  </Vue3StaggeredFadeAndSlide>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import Vue3StaggeredFadeAndSlide from '../../../../x-components/src/components/animations/vue3-staggered-fade-and-slide.vue';
+  import BaseSuggestions from '../../../../x-components/src/components/suggestions/base-suggestions.vue';
+  import {
+    getQuerySuggestionsStub,
+    createResultStub,
+    getResultsStub
+  } from '../../../../x-components/src/__stubs__';
+
+  const suggestions = getQuerySuggestionsStub('chip', 5);
+  const getInitialItems = () => getResultsStub(5);
+  const items = ref(getInitialItems());
+  let id = items.value.length + 1;
+
+  /**
+   * Insert a new item at a random index.
+   */
+  function insert() {
+    const i = Math.round(Math.random() * items.value.length);
+    items.value.splice(i, 0, createResultStub(`Product ${id++}`));
+  }
+
+  /**
+   * Reset the list of items.
+   */
+  function reset() {
+    items.value = getInitialItems();
+    id = items.value.length + 1;
+  }
+
+  /**
+   * Remove an item from the list.
+   *
+   * @param item - The item to remove.
+   */
+  function remove(item: any) {
+    const i = items.value.indexOf(item);
+    if (i > -1) {
+      items.value.splice(i, 1);
+    }
+  }
+</script>
diff --git a/packages/_vue3-migration-test/src/components/test-search.vue b/packages/_vue3-migration-test/src/components/test-search.vue
index 52a714c1c7..d16fa58f27 100644
--- a/packages/_vue3-migration-test/src/components/test-search.vue
+++ b/packages/_vue3-migration-test/src/components/test-search.vue
@@ -19,6 +19,7 @@
       style="--x-size-min-width-grid-item: 150px"
       class="x-gap-12"
       :columns="4"
+      :animation="Vue3StaggeredFadeAndSlide"
     >
       <template #result="{ item: result }">
         <BaseResultLink :result="result">
@@ -38,6 +39,7 @@
   import ClearSearchInput from '../../../x-components/src/x-modules/search-box/components/clear-search-input.vue';
   import SearchButton from '../../../x-components/src/x-modules/search-box/components/search-button.vue';
   import { use$x } from '../../../x-components/src/composables/use-$x';
+  import Vue3StaggeredFadeAndSlide from '../../../x-components/src/components/animations/vue3-staggered-fade-and-slide.vue';
   // TODO `$x` name cannot be used while XPlugin defines its own `this.$x` in the mixin
   const _$x = use$x();
 </script>
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index b085e6abb8..519946ce05 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -12,6 +12,7 @@ import {
   TestFacets,
   TestFade,
   TestFadeAndSlide,
+  TestStaggeredFadeAndSlide,
   TestScroll,
   TestSortDropdown,
   TestSortList,
@@ -87,6 +88,11 @@ 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/index.ts b/packages/x-components/src/components/animations/index.ts
index 26240a7f04..4bddd1d953 100644
--- a/packages/x-components/src/components/animations/index.ts
+++ b/packages/x-components/src/components/animations/index.ts
@@ -5,6 +5,7 @@ export { default as CrossFade } from './cross-fade.vue';
 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 Vue3StaggeredFadeAndSlide } from './vue3-staggered-fade-and-slide.vue';
 export { default as StaggeringTransitionGroup } from './staggering-transition-group.vue';
 export { createDirectionalAnimationFactory } from './create-directional-animation-factory';
 export { animateClipPath } from './animate-clip-path/animate-clip-path.factory';
diff --git a/packages/x-components/src/components/animations/vue3-staggered-fade-and-slide.vue b/packages/x-components/src/components/animations/vue3-staggered-fade-and-slide.vue
new file mode 100644
index 0000000000..2ac72150da
--- /dev/null
+++ b/packages/x-components/src/components/animations/vue3-staggered-fade-and-slide.vue
@@ -0,0 +1,172 @@
+<template>
+  <!-- eslint-disable vue/attributes-order -->
+  <TransitionGroup
+    v-bind="$attrs"
+    v-on="$listeners"
+    @enter="enter"
+    @after-enter="afterEnter"
+    :appear="appear"
+    :name="name"
+    :tag="tag"
+  >
+    <slot />
+  </TransitionGroup>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { useDisableAnimation } from './use-disable-animation';
+
+  /**
+   * Renders a transition group wrapping the elements passed in the default slot and animating
+   * them with a staggered fade and slide animation.
+   *
+   * @public
+   */
+  export default defineComponent({
+    name: 'StaggeredFadeAndSlide',
+    inheritAttrs: false,
+    props: {
+      /**
+       * Indicates if the transition must be applied on the initial render of the node.
+       */
+      appear: {
+        type: Boolean,
+        default: true
+      },
+      /**
+       * The tag of the node to render to the DOM.
+       */
+      tag: {
+        type: String,
+        default: 'div'
+      },
+      /**
+       * The time in ms to stagger each item.
+       */
+      stagger: {
+        type: Number,
+        default: 25
+      }
+    },
+    setup(props) {
+      /**
+       * The duration of the transition in ms.
+       */
+      const transitionDuration = 250;
+      /**
+       * The counter to keep track of the staggered delay.
+       */
+      const staggerCounter = ref(0);
+      /**
+       * The counter to keep track of the animations.
+       */
+      const animationList = ref<HTMLElement[]>([]);
+      /**
+       * The name of the animation.
+       */
+      const animationName = ref('x-staggered-fade-and-slide');
+      /**
+       * The name of the animation.
+       */
+      const { name } = useDisableAnimation(animationName.value);
+
+      /**
+       * Calculate the delay for the next element.
+       *
+       * @returns The delay in ms.
+       */
+      function getNextTransitionDelay(): number {
+        return staggerCounter.value++ * props.stagger;
+      }
+
+      /**
+       * The enter transition.
+       *
+       * @param el
+       * @param done
+       */
+      function enter(el: HTMLElement, done: () => void) {
+        animationList.value.push(el);
+        const delay = getNextTransitionDelay();
+        el.style.transitionDelay = `${delay}ms`;
+        setTimeout(() => {
+          el.style.transitionDelay = '0ms';
+          done();
+        }, transitionDuration + delay);
+      }
+
+      /**
+       * The after enter transition.
+       *
+       * @param el
+       */
+      function afterEnter(el: HTMLElement) {
+        animationList.value = animationList.value.filter(item => item !== el);
+        if (animationList.value.length === 0) {
+          staggerCounter.value = 0;
+        }
+      }
+
+      return {
+        name,
+        enter,
+        afterEnter
+      };
+    }
+  });
+</script>
+
+<style lang="scss">
+  $transition-duration: 0.25s;
+  /* 1. Declare transitions */
+  .x-staggered-fade-and-slide-enter-active,
+  .x-staggered-fade-and-slide-leave-active {
+    transition: $transition-duration ease-out;
+    transition-property: opacity, transform;
+  }
+
+  .x-staggered-fade-and-slide-move {
+    transition: transform $transition-duration ease-out;
+  }
+
+  /* 2. declare enter from and leave to state */
+  .x-staggered-fade-and-slide-enter,
+  .x-staggered-fade-and-slide-enter-from,
+  .x-staggered-fade-and-slide-leave-to {
+    opacity: 0;
+    transform: translate3d(0, 50%, 0);
+  }
+
+  /* 3. ensure leaving items are taken out of layout flow so that moving
+      animations can be calculated correctly. */
+  .x-staggered-fade-and-slide-leave-active {
+    position: absolute;
+  }
+</style>
+
+<docs lang="mdx">
+The Staggered fade and slide components works as the normal fade and slide components, but it also
+adds a configurable delay to each transition.
+
+## Example
+
+### Used with animatable components
+
+```vue
+<AnimatableComponent :animation="StaggeredFadeAndSlide" />
+```
+
+### Used as a regular component:
+
+This components exposes all the props and events of the Staggering transition group, like the `tag`
+or the `stagger` props:
+
+```vue
+<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>
+```
+</docs>
diff --git a/packages/x-components/src/components/base-grid.vue b/packages/x-components/src/components/base-grid.vue
index 1d4a096948..b3451f1ce8 100644
--- a/packages/x-components/src/components/base-grid.vue
+++ b/packages/x-components/src/components/base-grid.vue
@@ -1,7 +1,6 @@
 <template>
   <component
     :is="animation"
-    ref="gridEl"
     :style="style"
     class="x-base-grid"
     :class="cssClasses"
@@ -36,6 +35,7 @@
     defineComponent,
     inject,
     onBeforeUnmount,
+    onMounted,
     PropType,
     Ref,
     ref,
@@ -104,11 +104,23 @@
       }
     },
     setup(props, { slots }) {
-      type ElementRef = {
-        $el: HTMLElement;
-      };
-
       const xBus = useXBus();
+
+      /**
+       * Number of columns rendered inside the grid.
+       */
+      const renderedColumnsNumber = ref(0);
+
+      /**
+       * Reference to the root element of the grid.
+       */
+      const rootEl = ref<Element | null>(null);
+
+      /**
+       * ResizeObserver instance to keep track of the number of columns rendered inside the grid.
+       */
+      let resizeObserver: { stop: () => void };
+
       /**
        * It injects {@link ListItem} provided by an ancestor.
        *
@@ -119,9 +131,6 @@
         undefined
       );
 
-      const gridEl = ref<ElementRef | HTMLElement | null>(null);
-
-      let renderedColumnsNumber = ref(0);
       /**
        * Emits the {@link XEventsTypes.RenderedColumnsNumberChanged}
        * event whenever the number of columns rendered inside the grid changes.
@@ -131,9 +140,7 @@
       watch(
         renderedColumnsNumber,
         () => xBus.emit('RenderedColumnsNumberChanged', renderedColumnsNumber.value),
-        {
-          immediate: false
-        }
+        { immediate: false }
       );
 
       /**
@@ -201,45 +208,45 @@
       );
 
       /**
-       * Checks if a given value is an `ElementRef` object.
-       *
-       * @param value - The value to check.
-       * @returns `true` if the value is an `ElementRef` object, `false` otherwise.
+       * Updates the number of columns rendered inside the grid.
        *
        * @internal
        */
-      const isElementRef = (value: any): value is ElementRef => {
-        return value && value.$el instanceof HTMLElement;
+      const updateRenderedColumnsNumber = (): void => {
+        if (rootEl.value) {
+          const { gridTemplateColumns } = getComputedStyle(rootEl.value);
+          renderedColumnsNumber.value = gridTemplateColumns.split(' ').length;
+        }
       };
 
       /**
-       * Updates the number of columns rendered inside the grid.
+       * Initialises the rendered columns number and sets a ResizeObserver to keep it updated.
        *
        * @internal
        */
-      const updateRenderedColumnsNumber = (): void => {
-        const { gridTemplateColumns } = getComputedStyle(
-          isElementRef(gridEl.value) ? gridEl.value.$el : (gridEl.value as Element)
+      onMounted(() => {
+        /**
+         * Using querySelector to get the root element of the grid instead of using the ref directly
+         * because with the introductions of Fragments, Vue returns every DOM element inside the component.
+         */
+        rootEl.value = document.querySelector('.x-base-grid');
+        resizeObserver = useResizeObserver(
+          rootEl as MaybeComputedElementRef,
+          updateRenderedColumnsNumber
         );
-        renderedColumnsNumber.value = gridTemplateColumns.split(' ').length;
-      };
+      });
 
       /**
-       * Initialises the rendered columns number and sets a ResizeObserver to keep it updated.
+       * Stops the ResizeObserver when the component is unmounted.
        *
        * @internal
        */
-      const resizeObserver = useResizeObserver(
-        gridEl as MaybeComputedElementRef,
-        updateRenderedColumnsNumber
-      );
       onBeforeUnmount(() => resizeObserver.stop());
 
       return {
         gridItems,
         cssClasses,
         style,
-        gridEl,
         slots
       };
     }