feat: migrate MainScroll and MainScrollItem components

packages/_vue3-migration-test/src/components/index.ts

@@ -2,4 +2,5 @@ export * from './animations';
 export { default as TestBaseColumnPickerDropdown } from './column-picker/test-base-column-picker-dropdown.vue';
 export { default as TestBaseColumnPickerList } from './column-picker/test-base-column-picker-list.vue';
 export { default as TestBaseDropdown } from './test-base-dropdown.vue';
+export * from '../x-modules/scroll';
 export { default as TestBaseEventButton } from './test-base-event-button.vue';

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

@@ -4,6 +4,7 @@ import { createStore } from 'vuex';
 import { xPlugin } from '../../x-components/src/plugins/x-plugin';
 import App from './App.vue';
 import router from './router';
+import { scrollXModule } from './x-modules/scroll/x-module';
 
 // Warnings that cannot be solved in Vue 2 (a.k.a. breaking  changes) are suppressed
 const VUE_COMPAT_MODE = Number(import.meta.env.VITE_VUE_COMPAT_MODE);
@@ -30,5 +31,11 @@ const store = createStore({});
 createApp(App as Component)
   .use(router)
   .use(store)
-  .use(xPlugin, { adapter, store })
+  .use(xPlugin, {
+    adapter,
+    store,
+    __PRIVATE__xModules: {
+      scroll: scrollXModule
+    }
+  })
   .mount('#app');

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

@@ -8,6 +8,7 @@ import {
   TestSortDropdown,
   TestSortList,
   TestSortPickerList,
+  TestScroll,
   TestBaseColumnPickerDropdown
 } from './';
 
@@ -22,6 +23,11 @@ const routes = [
     name: 'Fade',
     component: TestFade
   },
+  {
+    path: '/scroll',
+    name: 'Scroll',
+    component: TestScroll
+  },
   {
     path: '/base-dropdown',
     name: 'BaseDropdown',

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

@@ -0,0 +1,2 @@
+export { default as TestScroll } from './test-scroll.vue';
+export * from './x-module';

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+  import MainScroll from '../../../../x-components/src/x-modules/scroll/components/main-scroll.vue';
+  // eslint-disable-next-line max-len
+  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/x-module.ts

@@ -0,0 +1,7 @@
+export const scrollXModule = {
+  storeModule: {
+    state: {
+      pendingScrollTo: 'item-10'
+    }
+  }
+};

packages/x-components/src/components/animations/__tests__/disable-animation-mixin.spec.ts

@@ -1,14 +1,13 @@
 import { mount, Wrapper } from '@vue/test-utils';
-import { Component, Prop } from 'vue-property-decorator';
+import { Component, Prop, Provide } from 'vue-property-decorator';
 import Vue, { ComponentOptions, CreateElement, VNode } from 'vue';
 import DisableAnimationMixin from '../disable-animation.mixin';
-import { XProvide } from '../../decorators/injection.decorators';
 import { DISABLE_ANIMATIONS_KEY } from '../../decorators/injection.consts';
 
 @Component
 class Provider extends Vue {
   @Prop()
-  @XProvide(DISABLE_ANIMATIONS_KEY)
+  @Provide(DISABLE_ANIMATIONS_KEY as string)
   public disableAnimation!: boolean;
 
   render(h: CreateElement): VNode {

packages/x-components/src/components/animations/disable-animation.mixin.ts

@@ -1,6 +1,5 @@
 import Vue from 'vue';
-import { Component } from 'vue-property-decorator';
-import { XInject } from '../decorators/injection.decorators';
+import { Component, Inject } from 'vue-property-decorator';
 import { DISABLE_ANIMATIONS_KEY } from '../decorators/injection.consts';
 
 /**
@@ -22,7 +21,7 @@ export default class DisableAnimationMixin extends Vue {
    *
    * @public
    */
-  @XInject(DISABLE_ANIMATIONS_KEY)
+  @Inject({ from: DISABLE_ANIMATIONS_KEY as string, default: false })
   public disableAnimation!: boolean;
 
   /**

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

@@ -69,7 +69,7 @@
         </Scroll>
       </BaseIdTogglePanel>
 
-      <MainScroll>
+      <MainScroll class="x-flex x-flex-auto">
         <Scroll v-if="hasContent('main-body')" id="main-scroll" class="x-layout__body-scroll">
           <section class="x-layout__main-body x-list x-list--vertical">
             <!-- @slot Slot that can be used to insert the body content. -->

packages/x-components/src/composables/use-state.ts

@@ -19,7 +19,7 @@ export function useState<
   const store = useStore();
 
   return paths.reduce<Dictionary<ComputedRef>>((stateDictionary, path) => {
-    stateDictionary[path] = computed(() => store.state.x[module]?.[path]);
+    stateDictionary[path] = computed(() => store?.state.x[module]?.[path]);
     return stateDictionary;
   }, {});
 }

packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue

@@ -1,15 +1,26 @@
 <template>
-  <component :is="tag" v-on="$listeners" :data-scroll="item.id">
+  <component :is="tag" ref="rootRef" v-on="$listeners" :data-scroll="item.id">
     <slot />
   </component>
 </template>
 <script lang="ts">
   import { Identifiable } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { NoElement, State, xComponentMixin } from '../../../components';
-  import { XInject } from '../../../components/decorators/injection.decorators';
+  import Vue, {
+    defineComponent,
+    inject,
+    nextTick,
+    onBeforeUnmount,
+    onMounted,
+    PropType,
+    ref,
+    watch,
+    Ref,
+    WatchCallback
+  } from 'vue';
   import { scrollXModule } from '../x-module';
+  import { useState } from '../../../composables/use-state';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
+  import { useXBus } from '../../../composables/use-x-bus';
   import { ScrollObserverKey } from './scroll.const';
   import { ScrollVisibilityObserver } from './scroll.types';
 
@@ -19,95 +30,132 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(scrollXModule)]
-  })
-  export default class MainScrollItem extends Vue {
-    /**
-     * Rendered HTML node.
-     *
-     * @public
-     */
-    public $el!: HTMLElement;
-
-    /**
-     * The item data. Used to set the scroll identifier.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    public item!: Identifiable;
-
-    /**
-     * The tag to render.
-     *
-     * @public
-     */
-    @Prop({ default: () => NoElement })
-    public tag!: string | typeof Vue;
-
-    /**
-     * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem.item}
-     * `id` property, this component should be scrolled into view.
-     *
-     * @internal
-     */
-    @State('scroll', 'pendingScrollTo')
-    public pendingScrollTo!: string;
-
-    /**
-     * Observer to detect the first visible element.
-     *
-     * @internal
-     */
-    @XInject(ScrollObserverKey)
-    public firstVisibleItemObserver!: ScrollVisibilityObserver | null;
-
-    /**
-     * Initialise scroll behavior.
-     * - Observes the rendered element to detect if it is the first visible item.
-     * - If the rendered element matches the {@link MainScrollItem.pendingScrollTo}, scrolls the
-     * element into the first position of the view.
-     *
-     * @internal
-     */
-    async mounted(): Promise<void> {
-      await this.$nextTick(); // Mounted does not guarantee that child components are mounted too
-      // eslint-disable-next-line @typescript-eslint/unbound-method
-      this.$watch('firstVisibleItemObserver', this.observeItem, { immediate: true });
-    }
-
-    /**
-     * Detaches the observer from the rendered element to prevent memory leaks.
-     *
-     * @internal
-     */
-    beforeDestroy(): void {
-      this.firstVisibleItemObserver?.unobserve(this.$el);
-    }
-
-    /**
-     * Initialises the element visibility observation, stopping the previous one if it has.
-     *
-     * @param newObserver - The new observer for the HTML element.
-     * @param oldObserver - The old observer for the HTML element.
-     */
-    observeItem(
-      newObserver: ScrollVisibilityObserver | null,
-      oldObserver: ScrollVisibilityObserver | null
-    ): void {
-      oldObserver?.unobserve(this.$el);
-      newObserver?.observe(this.$el);
-      if (this.pendingScrollTo === this.item.id) {
-        Vue.nextTick(() => {
-          this.$el.scrollIntoView({
-            block: 'center'
-          });
-        });
-        this.$x.emit('ScrollRestoreSucceeded');
+  export default defineComponent({
+    name: 'MainScrollItem',
+    xModule: scrollXModule.name,
+    props: {
+      /**
+       * The item data. Used to set the scroll identifier.
+       *
+       * @public
+       */
+      item: {
+        type: Object as PropType<Identifiable>,
+        required: true
+      },
+      /**
+       * The tag to render.
+       *
+       * @public
+       */
+      tag: {
+        type: [String, Object] as PropType<string | typeof Vue>,
+        default: 'div'
       }
+    },
+    setup(props) {
+      type ElementRef = {
+        $el: HTMLElement;
+      };
+
+      useRegisterXModule(scrollXModule);
+      const xBus = useXBus();
+
+      /**
+       * Rendered HTML node.
+       *
+       * @public
+       */
+      const rootRef = ref<ElementRef | HTMLElement | null>(null);
+
+      /**
+       * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem} item
+       * `id` property, this component should be scrolled into view.
+       *
+       * @internal
+       */
+      const { pendingScrollTo } = useState('scroll', ['pendingScrollTo']);
+
+      /**
+       * Observer to detect the first visible element.
+       *
+       * @internal
+       */
+      const firstVisibleItemObserver = inject<Ref<ScrollVisibilityObserver> | null>(
+        ScrollObserverKey as string,
+        null
+      );
+      /**
+       * 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.
+       *
+       * @internal
+       */
+      const isElementRef = (value: any): value is ElementRef => {
+        return value && value.$el instanceof HTMLElement;
+      };
+      /**
+       * Initialises the element visibility observation, stopping the previous one if it has.
+       *
+       * @param newObserver - The new observer for the HTML element.
+       * @param oldObserver - The old observer for the HTML element.
+       */
+      const observeItem: WatchCallback<ScrollVisibilityObserver> = (
+        newObserver: ScrollVisibilityObserver | null,
+        oldObserver: ScrollVisibilityObserver | null
+      ): void => {
+        {
+          if (rootRef.value !== null) {
+            const htmlElement = isElementRef(rootRef.value) ? rootRef.value.$el : rootRef.value;
+
+            oldObserver?.unobserve(htmlElement);
+            newObserver?.observe(htmlElement);
+            if (pendingScrollTo.value === props.item.id) {
+              Vue.nextTick(() => {
+                htmlElement.scrollIntoView({
+                  block: 'center'
+                });
+              });
+              xBus.emit('ScrollRestoreSucceeded');
+            }
+          }
+        }
+      };
+
+      /**
+       * Detaches the observer from the rendered element to prevent memory leaks.
+       *
+       * @internal
+       */
+      onBeforeUnmount(() => {
+        if (rootRef.value !== null) {
+          const htmlElement = isElementRef(rootRef.value) ? rootRef.value.$el : rootRef.value;
+          firstVisibleItemObserver?.value.unobserve(htmlElement);
+        }
+      });
+
+      /**
+       * Initialise scroll behavior.
+       * - Observes the rendered element to detect if it is the first visible item.
+       * - If the rendered element matches the {@link MainScrollItem.pendingScrollTo}, scrolls the
+       * element into the first position of the view.
+       *
+       * @internal
+       */
+      onMounted(() => {
+        nextTick(() => {
+          // Mounted does not guarantee that child components are mounted too
+          if (firstVisibleItemObserver) {
+            watch(firstVisibleItemObserver, observeItem, { immediate: true });
+          }
+        });
+      });
+
+      return { rootRef, firstVisibleItemObserver, observeItem, isElementRef };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">