Merge branch 'main' into feat/EMP-4077-migrate-x-modules-search-box-t…

…o-composition-api

# Conflicts:
#	packages/_vue3-migration-test/src/router.ts

packages/_vue3-migration-test/.eslintrc.js

@@ -5,6 +5,8 @@ module.exports = {
     project: 'tsconfig.eslint.json'
   },
   rules: {
-    'max-len': 'off'
+    'max-len': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    'vue/no-multiple-template-root': 'off'
   }
 };

packages/_vue3-migration-test/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-alpha.10](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.10) (2024-05-17)
+
+
+### ⚠ BREAKING CHANGES
+
+* **scroll:** `WindowScroll' component will no longer be available and has been removed.
+
+### Features
+
+* **scroll:** replace `ScrollMixin` by `UseScroll` composable (#1473) ([26244cd](https://github.com/empathyco/x/commit/26244cdc8ced863918f0ceb8138ca89bf6792461))
+
+
+
 ## [1.0.0-alpha.9](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.9) (2024-05-15)
 
 

packages/_vue3-migration-test/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue3-migration-test",
   "private": "true",
-  "version": "1.0.0-alpha.9",
+  "version": "1.0.0-alpha.10",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",

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

@@ -15,6 +15,7 @@ import {
   TestSortDropdown,
   TestSortList,
   TestSortPickerList,
+  TestBaseScroll,
   TestSearchBox
 } from './';
 
@@ -74,6 +75,11 @@ const routes = [
     name: 'Scroll',
     component: TestScroll
   },
+  {
+    path: '/base-scroll',
+    name: 'BaseScroll',
+    component: TestBaseScroll
+  },
   {
     path: '/sort-dropdown',
     name: 'SortDropdown',

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

@@ -1,2 +1,3 @@
 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-base-scroll.vue

@@ -0,0 +1,56 @@
+<template>
+  <BaseScroll
+    @scroll="onScroll"
+    @scroll:direction-change="onScrollDirectionChange"
+    @scroll:at-start="onScrollAtStart"
+    @scroll:almost-at-end="onScrollAlmostAtEnd"
+    @scroll:at-end="onScrollAtEnd"
+  >
+    <ul>
+      <li v-for="item in items" :key="item.id">base-scroll-{{ item.id }}</li>
+    </ul>
+  </BaseScroll>
+  <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 { ref } from 'vue';
+  import BaseScroll from '../../../../x-components/src/components/scroll/base-scroll.vue';
+  import { ScrollDirection } from '../../../../x-components/src/components/scroll/scroll.types';
+
+  const items = Array.from({ length: 24 }, (_, index) => ({ id: `item-${index}` }));
+  const scroll = ref(0);
+  const scrollDirection = ref<ScrollDirection>('UP');
+  const isScrollAtStart = ref(false);
+  const isScrollAlmostAtEnd = ref(false);
+  const isScrollAtEnd = ref(false);
+
+  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>
+  /* Inheritance of `design-system-deprecated` */
+  .x-base-scroll {
+    overflow: auto;
+    height: 100px;
+  }
+</style>

packages/x-components/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.0-alpha.13](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-17)
+
+
+### ⚠ BREAKING CHANGES
+
+* **scroll:** `WindowScroll' component will no longer be available and has been removed.
+
+### Features
+
+* **scroll:** replace `ScrollMixin` by `UseScroll` composable (#1473) ([26244cd](https://github.com/empathyco/x/commit/26244cdc8ced863918f0ceb8138ca89bf6792461))
+
+
+
 ## [5.0.0-alpha.12](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-15)
 
 

packages/x-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "5.0.0-alpha.12",
+  "version": "5.0.0-alpha.13",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",

packages/x-components/src/components/scroll/base-scroll.vue

@@ -1,22 +1,101 @@
 <template>
-  <div @scroll="throttledStoreScrollData" class="x-scroll x-base-scroll" data-test="base-scroll">
+  <div
+    ref="baseScrollEl"
+    @scroll="throttledStoreScrollData"
+    class="x-scroll x-base-scroll"
+    data-test="base-scroll"
+  >
     <slot />
   </div>
 </template>
 
 <script lang="ts">
-  import { mixins } from 'vue-class-component';
-  import { Component } from 'vue-property-decorator';
-  import ScrollMixin from './scroll.mixin';
+  import { defineComponent, PropType, ref } from 'vue';
+  import { XEvent } from '../../wiring/events.types';
+  import { useScroll } from './use-scroll';
 
   /**
    * Base scroll component that depending on the user interactivity emits different events for
    * knowing when the user scrolls, the direction of scroll and if user reaches the start or end.
    *
    * @public
    */
-  @Component
-  export default class BaseScroll extends mixins(ScrollMixin) {}
+  export default defineComponent({
+    name: 'BaseScroll',
+    props: {
+      /**
+       * Distance to the end of the scroll that when reached will emit the
+       * `scroll:about-to-end` event.
+       *
+       * @public
+       */
+      distanceToBottom: {
+        type: Number,
+        default: 100
+      },
+      /**
+       * Positive vertical distance to still consider that the element is the first one visible.
+       * For example, if set to 100, after scrolling 100 pixels, the first rendered element
+       * will still be considered the first one.
+       */
+      firstElementThresholdPx: {
+        type: Number,
+        default: 100
+      },
+      /**
+       * Time duration to ignore the subsequent scroll events after an emission.
+       * Higher values will decrease events precision but can prevent performance issues.
+       *
+       * @public
+       */
+      throttleMs: {
+        type: Number,
+        default: 100
+      },
+      /**
+       * If true (default), sets the scroll position to the top when certain events are emitted.
+       *
+       * @public
+       */
+      resetOnChange: {
+        type: Boolean,
+        default: true
+      },
+      /**
+       * List of events that should reset the scroll when emitted.
+       *
+       * @public
+       */
+      resetOn: {
+        type: Array as PropType<XEvent | XEvent[]>,
+        default: () => [
+          'SearchBoxQueryChanged',
+          'SortChanged',
+          'SelectedFiltersChanged',
+          'SelectedFiltersForRequestChanged',
+          'SelectedRelatedTagsChanged',
+          'UserChangedExtraParams'
+        ]
+      }
+    },
+    emits: [
+      'scroll',
+      'scroll:at-start',
+      'scroll:almost-at-end',
+      'scroll:at-end',
+      'scroll:direction-change'
+    ],
+    setup(props, context) {
+      const baseScrollEl = ref<HTMLElement>();
+
+      const { throttledStoreScrollData } = useScroll(props, context, baseScrollEl);
+
+      return {
+        throttledStoreScrollData,
+        baseScrollEl
+      };
+    }
+  });
 </script>
 
 <docs lang="mdx">

packages/x-components/src/components/scroll/index.ts

@@ -1,3 +1,3 @@
 export { default as BaseScroll } from './base-scroll.vue';
-export { default as ScrollMixin } from './scroll.mixin';
 export * from './scroll.types';
+export * from './use-scroll';