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

---
 .../test-staggered-fade-and-slide.vue         |  61 +++++++
 .../src/x-modules/test-elements-list.vue      |   3 +-
 .../animations/staggered-fade-and-slide.vue   | 136 +++++++++++----
 packages/x-components/src/router.ts           |   5 +
 .../src/views/home/animations-test.vue        | 157 ++++++++++++++++++
 5 files changed, 328 insertions(+), 34 deletions(-)
 create mode 100644 packages/x-components/src/views/home/animations-test.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
index 1d04d4334e..3bcc3bab5d 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,4 +1,25 @@
 <template>
+  <h1>Dinamic content:</h1>
+  <button @click="insert">Insert at random index</button>
+  <button @click="reset">Reset</button>
+
+  <StaggeredFadeAndSlide tag="ul" :stagger="500">
+    <li v-for="item in items" :key="item.id">
+      {{ item.id }} - {{ item.name }}
+      <button @click="remove(item)">x</button>
+    </li>
+  </StaggeredFadeAndSlide>
+
+  <br />
+  <h1>Animation as prop</h1>
+  <BaseSuggestions :suggestions="suggestions" :animation="StaggeredFadeAndSlide" :stagger="50">
+    <template #default="{ suggestion }">
+      <span>{{ suggestion.query }}</span>
+    </template>
+  </BaseSuggestions>
+
+  <br />
+  <h1>Static content:</h1>
   <StaggeredFadeAndSlide tag="ul" :stagger="50">
     <li key="1">Element to animate</li>
     <li key="2">Element to animate</li>
@@ -7,5 +28,45 @@
 </template>
 
 <script setup lang="ts">
+  import { ref } from 'vue';
   import StaggeredFadeAndSlide from '../../../../x-components/src/components/animations/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/x-modules/test-elements-list.vue b/packages/_vue3-migration-test/src/x-modules/test-elements-list.vue
index 6312c90e66..3eea582ac1 100644
--- a/packages/_vue3-migration-test/src/x-modules/test-elements-list.vue
+++ b/packages/_vue3-migration-test/src/x-modules/test-elements-list.vue
@@ -4,7 +4,7 @@
       <PromotedsList>
         <BannersList>
           <NextQueriesList>
-            <BaseGrid>
+            <BaseGrid :animation="StaggeredFadeAndSlide">
               <template #result="{ item: result }">
                 {{ result.id }}
               </template>
@@ -36,4 +36,5 @@
   import BaseGrid from '../../../x-components/src/components/base-grid.vue';
   import LocationProvider from '../../../x-components/src/components/location-provider.vue';
   import NextQueriesList from '../../../x-components/src/x-modules/next-queries/components/next-queries-list.vue';
+  import StaggeredFadeAndSlide from '../../../x-components/src/components/animations/staggered-fade-and-slide.vue';
 </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 19ec77f23c..2ac72150da 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,19 +1,20 @@
 <template>
-  <StaggeringTransitionGroup
-    v-on="$listeners"
+  <!-- eslint-disable vue/attributes-order -->
+  <TransitionGroup
     v-bind="$attrs"
-    class="x-staggered-fade-and-slide"
-    :name="name"
+    v-on="$listeners"
+    @enter="enter"
+    @after-enter="afterEnter"
     :appear="appear"
+    :name="name"
+    :tag="tag"
   >
-    <!-- @slot (Required) Transition-group content -->
     <slot />
-  </StaggeringTransitionGroup>
+  </TransitionGroup>
 </template>
 
 <script lang="ts">
-  import { defineComponent } from 'vue';
-  import StaggeringTransitionGroup from './staggering-transition-group.vue';
+  import { defineComponent, ref } from 'vue';
   import { useDisableAnimation } from './use-disable-animation';
 
   /**
@@ -24,7 +25,6 @@
    */
   export default defineComponent({
     name: 'StaggeredFadeAndSlide',
-    components: { StaggeringTransitionGroup },
     inheritAttrs: false,
     props: {
       /**
@@ -33,45 +33,115 @@
       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: function () {
+    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 = 'x-staggered-fade-and-slide-';
+      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;
+      }
 
-      const { name } = useDisableAnimation(animationName);
+      /**
+       * 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 };
+      return {
+        name,
+        enter,
+        afterEnter
+      };
     }
   });
 </script>
 
-<style lang="scss" scoped>
+<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 {
-    z-index: 0;
-
-    &::v-deep .x-staggered-fade-and-slide {
-      &--enter-active,
-      &--leave-active {
-        transition: $transition-duration ease-out;
-        transition-property: opacity, transform;
-      }
+  .x-staggered-fade-and-slide-move {
+    transition: transform $transition-duration ease-out;
+  }
 
-      &--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);
+  }
 
-      &--enter,
-      &--leave-to {
-        transform: translate3d(0, 50%, 0);
-        opacity: 0;
-        z-index: -1;
-      }
-    }
+  /* 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>
 
diff --git a/packages/x-components/src/router.ts b/packages/x-components/src/router.ts
index 3a948b9096..54141d0268 100644
--- a/packages/x-components/src/router.ts
+++ b/packages/x-components/src/router.ts
@@ -9,6 +9,11 @@ const routes: RouteConfig[] = [
     name: 'Home',
     component: () => import('./views/home/Home.vue')
   },
+  {
+    path: '/animations',
+    name: 'Animations Test',
+    component: () => import('./views/home/animations-test.vue')
+  },
   {
     path: '/products/:id',
     name: 'Product page',
diff --git a/packages/x-components/src/views/home/animations-test.vue b/packages/x-components/src/views/home/animations-test.vue
new file mode 100644
index 0000000000..7b53a524cb
--- /dev/null
+++ b/packages/x-components/src/views/home/animations-test.vue
@@ -0,0 +1,157 @@
+<template>
+  <div>
+    <h1>Static content:</h1>
+    <StaggeredFadeAndSlide tag="ul">
+      <li key="1">Element to animate</li>
+      <li key="2">Element to animate</li>
+      <li key="3">Element to animate</li>
+    </StaggeredFadeAndSlide>
+    <br />
+    <h1>Animation as prop</h1>
+    <BaseSuggestions :suggestions="suggestions" :animation="animation">
+      <template #default="{ suggestion }">
+        <span>{{ suggestion.query }}</span>
+      </template>
+    </BaseSuggestions>
+    <br />
+
+    <h1>Dinamic content:</h1>
+    <button @click="insert" style="border: 1px solid black">Insert at random index</button>
+    <button @click="reset" style="border: 1px solid black">Reset</button>
+    <StaggeredFadeAndSlide tag="ul">
+      <li v-for="item in items" :key="item" class="item">
+        {{ item }}
+        <button @click="remove(item)" style="border: 1px solid black">x</button>
+      </li>
+    </StaggeredFadeAndSlide>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { getQuerySuggestionsStub } from '../../__stubs__';
+  import { BaseSuggestions } from '../../components/suggestions';
+  import StaggeredFadeAndSlide from '../../components/animations/staggered-fade-and-slide.vue';
+
+  export default defineComponent({
+    name: 'AnimationsTest',
+    components: {
+      BaseSuggestions,
+      StaggeredFadeAndSlide
+    },
+    setup() {
+      /**
+       * Get the query suggestions.
+       */
+      const suggestions = getQuerySuggestionsStub('chip', 5);
+
+      /**
+       * The animation to use.
+       */
+      const animation = StaggeredFadeAndSlide;
+
+      /**
+       * Get the initial items for the list.
+       *
+       * @returns The initial items.
+       */
+      const getInitialItems = () => [1, 2, 3, 4, 5];
+
+      /**
+       * Items to be displayed in the list.
+       */
+      const items = ref(getInitialItems());
+      /**
+       * Id for the next item to be inserted.
+       */
+      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, 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);
+        }
+      }
+
+      /**
+       * Expose the public API.
+       */
+      return {
+        animation,
+        suggestions,
+        insert,
+        reset,
+        remove,
+        items
+      };
+    }
+  });
+</script>
+<style>
+  .slide-enter,
+  .slide-enter-from,
+  .slide-leave-to {
+    opacity: 0;
+    transform: translate3d(0, 50%, 0);
+  }
+
+  .slide-move,
+  .slide-enter-active,
+  .slide-leave-active {
+    transition: 0.25s ease-out;
+    transition-property: opacity transform;
+  }
+
+  .slide-leave-active {
+    position: absolute;
+  }
+
+  /**
+  * Fade
+  */
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 7.5s;
+  }
+
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
+  }
+
+  /**
+  * Fade and slide
+  */
+  .test-enter-active,
+  .test-leave-active {
+    transition: 7.25s ease-out;
+    transition-property: opacity transform;
+  }
+
+  .test-enter,
+  .test-leave-to {
+    opacity: 0;
+    transform: translate3d(0, 50%, 0);
+  }
+</style>