feat: migrate Scroll and ScrolToTop componentes (#1562)

packages/_vue3-migration-test/src/router.ts

@@ -17,7 +17,7 @@ import {
   TestSortDropdown,
   TestSortList,
   TestSortPickerList,
-  TestBaseScroll,
+  TestMainScroll,
   TestBaseModal,
   TestSearchBox,
   TestBaseVariableColumnGrid,
@@ -134,9 +134,9 @@ const routes = [
     component: TestScroll
   },
   {
-    path: '/base-scroll',
-    name: 'BaseScroll',
-    component: TestBaseScroll
+    path: '/main-scroll',
+    name: 'MainScroll',
+    component: TestMainScroll
   },
   {
     path: '/sort-dropdown',

packages/_vue3-migration-test/src/x-modules/scroll/index.ts

@@ -1,3 +1,3 @@
+export { default as TestMainScroll } from './test-main-scroll.vue';
 export { default as TestScroll } from './test-scroll.vue';
-export { default as TestBaseScroll } from './test-base-scroll.vue';
 export * from './x-module';

packages/_vue3-migration-test/src/x-modules/scroll/test-main-scroll.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+  import MainScroll from '../../../../x-components/src/x-modules/scroll/components/main-scroll.vue';
+  import MainScrollItem from '../../../../x-components/src/x-modules/scroll/components/main-scroll-item.vue';
+  const items = Array.from({ length: 24 }, (_, index) => ({ id: `item-${index}` }));
+</script>
+
+<template>
+  <MainScroll>
+    <ul class="list" data-test="scroll">
+      <MainScrollItem v-for="item in items" :key="item.id" class="item" tag="article" :item="item">
+        {{ item.id }}
+      </MainScrollItem>
+    </ul>
+  </MainScroll>
+</template>
+
+<style scoped lang="scss">
+  .list {
+    overflow: auto;
+    height: 100px;
+  }
+</style>

packages/_vue3-migration-test/src/x-modules/scroll/test-scroll.vue

@@ -1,43 +1,60 @@
 <template>
-  <MainScroll class="CUSTOM-CLASS" data-custom="CUSTOM-DATA-ATTR">
-    <ul class="list" data-test="scroll">
-      <MainScrollItem v-for="item in items" :key="item.id" class="item" tag="article" :item="item">
-        {{ item.id }}
-      </MainScrollItem>
+  <Scroll
+    @scroll="onScroll"
+    @scroll:direction-change="onScrollDirectionChange"
+    @scroll:at-start="onScrollAtStart"
+    @scroll:almost-at-end="onScrollAlmostAtEnd"
+    @scroll:at-end="onScrollAtEnd"
+    id="main-scroll"
+  >
+    <ul>
+      <li v-for="item in items" :key="item.id">base-scroll-{{ item.id }}</li>
     </ul>
-  </MainScroll>
-  <MainScroll>
-    <ul class="list" data-test="scroll">
-      <MainScrollItem v-for="item in items" :key="item.id" class="item" tag="article" :item="item">
-        {{ item.id }}
-      </MainScrollItem>
-    </ul>
-  </MainScroll>
+  </Scroll>
+  <ScrollToTop :threshold-px="100" class="x-button--round" scroll-id="main-scroll">
+    <span>Top</span>
+  </ScrollToTop>
+  <table>
+    <tr>
+      <td>Position</td>
+      <td>Direction</td>
+      <td>At start</td>
+      <td>Almost at end</td>
+      <td>At end</td>
+    </tr>
+    <tr style="font-weight: bold">
+      <td>{{ scroll }}</td>
+      <td>{{ scrollDirection }}</td>
+      <td>{{ isScrollAtStart }}</td>
+      <td>{{ isScrollAlmostAtEnd }}</td>
+      <td>{{ isScrollAtEnd }}</td>
+    </tr>
+  </table>
 </template>
 
 <script setup lang="ts">
-  import { useXBus } from '../../../../x-components/src/composables/use-x-bus';
-  import { XEvent } from '../../../../x-components/src/wiring/events.types';
-  import MainScroll from '../../../../x-components/src/x-modules/scroll/components/main-scroll.vue';
-  import MainScrollItem from '../../../../x-components/src/x-modules/scroll/components/main-scroll-item.vue';
-
-  const xBus = useXBus();
+  import { ref } from 'vue';
+  import Scroll from '../../../../x-components/src/x-modules/scroll/components/scroll.vue';
+  import { ScrollDirection } from '../../../../x-components/src/components/scroll/scroll.types';
+  import ScrollToTop from '../../../../x-components/src/x-modules/scroll/components/scroll-to-top.vue';
 
   const items = Array.from({ length: 24 }, (_, index) => ({ id: `item-${index}` }));
-  const events: XEvent[] = [
-    'UserScrolledToElement',
-    'ScrollRestoreSucceeded',
-    'ScrollRestoreFailed'
-  ];
+  const scroll = ref(0);
+  const scrollDirection = ref<ScrollDirection>('UP');
+  const isScrollAtStart = ref(false);
+  const isScrollAlmostAtEnd = ref(false);
+  const isScrollAtEnd = ref(false);
 
-  events.forEach(event => {
-    // eslint-disable-next-line no-console
-    xBus.on(event, true).subscribe(args => console.log(`${event} event ->`, args));
-  });
+  const onScroll = (pos: number) => (scroll.value = pos);
+  const onScrollDirectionChange = (dir: ScrollDirection) => (scrollDirection.value = dir);
+  const onScrollAtStart = (is: boolean) => (isScrollAtStart.value = is);
+  const onScrollAlmostAtEnd = (is: boolean) => (isScrollAlmostAtEnd.value = is);
+  const onScrollAtEnd = (is: boolean) => (isScrollAtEnd.value = is);
 </script>
 
-<style scoped lang="scss">
-  .list {
+<style>
+  /* Inheritance of `design-system-deprecated` */
+  .x-base-scroll {
     overflow: auto;
     height: 100px;
   }

packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue

@@ -86,7 +86,8 @@
 </template>
 
 <script lang="ts">
-  import { computed, defineComponent, ref } from 'vue';
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  import Vue, { computed, defineComponent, ref } from 'vue';
   import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';
   import Scroll from '../../x-modules/scroll/components/scroll.vue';
   import BaseIdModal from '../modals/base-id-modal.vue';

packages/x-components/src/components/layouts/multi-column-max-width-layout.vue

@@ -92,7 +92,8 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  import Vue, { defineComponent } from 'vue';
   import Scroll from '../../x-modules/scroll/components/scroll.vue';
   import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';
   import AnimateWidth from '../animations/animate-width.vue';

packages/x-components/src/components/layouts/single-column-layout.vue

@@ -74,7 +74,8 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  import Vue, { defineComponent } from 'vue';
   import Scroll from '../../x-modules/scroll/components/scroll.vue';
   import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';
   import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';

packages/x-components/src/x-modules/scroll/components/__tests__/scroll.spec.ts

@@ -1,8 +1,10 @@
 import { mount, Wrapper } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { WireMetadata } from '../../../../wiring/wiring.types';
 import { scrollXModule } from '../../x-module';
 import Scroll from '../scroll.vue';
+import { XPlugin } from '../../../../plugins/index';
 
 async function renderScroll({
   template = '<Scroll :throttleMs="throttleMs" :id="id"/>',
@@ -40,7 +42,7 @@ async function renderScroll({
 
   /* Because the scroll mixins uses a $nextTick in the mounted hook, we have to add a wait here
   so it has really finish mounting */
-  await wrapper.vm.$nextTick();
+  await nextTick();
 
   return {
     wrapper,
@@ -49,7 +51,7 @@ async function renderScroll({
       scrollElement.scrollTop = to;
       wrapper.trigger('scroll');
       jest.advanceTimersByTime(durationMs);
-      await wrapper.vm.$nextTick();
+      await nextTick();
     }
   };
 }
@@ -74,13 +76,13 @@ describe('testing Scroll Component', () => {
   });
 
   it('throttles the scroll event', async () => {
-    const { wrapper, scroll, scrollElement } = await renderScroll({
+    const { scroll, scrollElement } = await renderScroll({
       throttleMs: 200,
       id: 'main-scroll'
     });
 
     const listenerScrolled = jest.fn();
-    wrapper.vm.$x.on('UserScrolled', true).subscribe(listenerScrolled);
+    XPlugin.bus.on('UserScrolled', true).subscribe(listenerScrolled);
     expect(listenerScrolled).not.toHaveBeenCalled();
 
     await scroll({
@@ -112,13 +114,13 @@ describe('testing Scroll Component', () => {
 
   // eslint-disable-next-line max-len
   it('emits the `UserChangedScrollDirection` event when the user changes scrolling direction', async () => {
-    const { wrapper, scroll, scrollElement } = await renderScroll({
+    const { scroll, scrollElement } = await renderScroll({
       throttleMs: 200,
       id: 'main-scroll'
     });
 
     const listenerChangeDirection = jest.fn();
-    wrapper.vm.$x.on('UserChangedScrollDirection', true).subscribe(listenerChangeDirection);
+    XPlugin.bus.on('UserChangedScrollDirection', true).subscribe(listenerChangeDirection);
     expect(listenerChangeDirection).toHaveBeenCalledTimes(0);
 
     await scroll({
@@ -161,13 +163,13 @@ describe('testing Scroll Component', () => {
   });
 
   it('emits the `UserReachedScrollStart` event when the user scrolls back to the top', async () => {
-    const { wrapper, scroll, scrollElement } = await renderScroll({
+    const { scroll, scrollElement } = await renderScroll({
       throttleMs: 200,
       id: 'main-scroll'
     });
 
     const listenerScrollStart = jest.fn();
-    wrapper.vm.$x.on('UserReachedScrollStart', true).subscribe(listenerScrollStart);
+    XPlugin.bus.on('UserReachedScrollStart', true).subscribe(listenerScrollStart);
     expect(listenerScrollStart).toHaveBeenCalledTimes(0);
 
     await scroll({
@@ -201,7 +203,7 @@ describe('testing Scroll Component', () => {
 
   // eslint-disable-next-line max-len
   it('emits `UserAlmostReachedScrollEnd` and`UserReachedScrollEnd` when the user scrolls to the bottom', async () => {
-    const { wrapper, scroll, scrollElement } = await renderScroll({
+    const { scroll, scrollElement } = await renderScroll({
       throttleMs: 200,
       id: 'main-scroll',
       scrollHeight: 800,
@@ -210,9 +212,9 @@ describe('testing Scroll Component', () => {
     });
 
     const listenerAlmostReachedScrollEnd = jest.fn();
-    wrapper.vm.$x.on('UserAlmostReachedScrollEnd', true).subscribe(listenerAlmostReachedScrollEnd);
+    XPlugin.bus.on('UserAlmostReachedScrollEnd', true).subscribe(listenerAlmostReachedScrollEnd);
     const listenerReachedScrollEnd = jest.fn();
-    wrapper.vm.$x.on('UserReachedScrollEnd', true).subscribe(listenerReachedScrollEnd);
+    XPlugin.bus.on('UserReachedScrollEnd', true).subscribe(listenerReachedScrollEnd);
 
     await scroll({
       to: 501,