feat: migrate ItemsListInjection mixin

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

@@ -2,6 +2,10 @@ import { XComponentsAdapter } from '@empathyco/x-types';
 import { Component, configureCompat, createApp } from 'vue';
 import { createStore } from 'vuex';
 import { xPlugin } from '../../x-components/src/plugins/x-plugin';
+import { getResultsStub } from '../../x-components/src/__stubs__/results-stubs.factory';
+import { getBannersStub } from '../../x-components/src/__stubs__/banners-stubs.factory';
+import { getPromotedsStub } from '../../x-components/src/__stubs__/promoteds-stubs.factory';
+import { getNextQueriesStub } from '../../x-components/src/__stubs__/next-queries-stubs.factory';
 import App from './App.vue';
 import router from './router';
 
@@ -30,5 +34,30 @@ const store = createStore({});
 createApp(App as Component)
   .use(router)
   .use(store)
-  .use(xPlugin, { adapter, store })
+  .use(xPlugin, {
+    adapter,
+    store,
+    __PRIVATE__xModules: {
+      search: {
+        storeModule: {
+          state: {
+            query: 'dress',
+            results: getResultsStub(10),
+            promoteds: getPromotedsStub(),
+            banners: getBannersStub(),
+            status: 'success'
+          }
+        }
+      },
+      nextQueries: {
+        storeModule: {
+          state: {
+            query: 'dress',
+            nextQueries: getNextQueriesStub(),
+            status: 'success'
+          }
+        }
+      }
+    }
+  })
   .mount('#app');

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

@@ -8,6 +8,7 @@ import {
   TestSortDropdown,
   TestSortList,
   TestSortPickerList,
+  TestElementsList,
   TestBaseColumnPickerDropdown
 } from './';
 
@@ -56,6 +57,11 @@ const routes = [
     path: '/sort-picker-list',
     name: 'SortPickerList',
     component: TestSortPickerList
+  },
+  {
+    path: '/elements-list',
+    name: 'ElementsList',
+    component: TestElementsList
   }
 ];
 

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

@@ -1,3 +1,4 @@
 export { default as TestSortDropdown } from './test-sort-dropdown.vue';
 export { default as TestSortList } from './test-sort-list.vue';
 export { default as TestSortPickerList } from './test-sort-picker-list.vue';
+export { default as TestElementsList } from './test-elements-list.vue';

packages/_vue3-migration-test/src/x-modules/search/components/test-elements-list.vue

@@ -0,0 +1,43 @@
+<template>
+  <LocationProvider location="results">
+    <ResultsList>
+      <PromotedsList>
+        <BannersList>
+          <NextQueriesList>
+            <BaseGrid>
+              <template #result="{ item: result }">
+                {{ result.id }}
+              </template>
+
+              <template #banner="{ item: banner }">
+                {{ banner.id }}
+              </template>
+
+              <template #promoted="{ item: promoted }">
+                {{ promoted.title }}
+              </template>
+              <template #next-queries-group="{ item: { nextQueries } }">
+                <li v-for="nextQuery in nextQueries" :key="nextQuery.query" class="next-query">
+                  {{ nextQuery.query }}
+                </li>
+              </template>
+            </BaseGrid>
+          </NextQueriesList>
+        </BannersList>
+      </PromotedsList>
+    </ResultsList>
+  </LocationProvider>
+</template>
+
+<script setup lang="ts">
+  // eslint-disable-next-line max-len
+  import PromotedsList from '../../../../../x-components/src/x-modules/search/components/promoteds-list.vue';
+  // eslint-disable-next-line max-len
+  import ResultsList from '../../../../../x-components/src/x-modules/search/components/results-list.vue';
+  // eslint-disable-next-line max-len
+  import BannersList from '../../../../../x-components/src/x-modules/search/components/banners-list.vue';
+  import BaseGrid from '../../../../../x-components/src/components/base-grid.vue';
+  import LocationProvider from '../../../../../x-components/src/components/location-provider.vue';
+  // eslint-disable-next-line max-len
+  import NextQueriesList from '../../../../../x-components/src/x-modules/next-queries/components/next-queries-list.vue';
+</script>

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

@@ -19,7 +19,7 @@
         the item using that slot composition to render.
             @binding {item} item - Item to render
       -->
-      <slot v-if="$scopedSlots[slotName]" :name="slotName" :item="item" />
+      <slot v-if="slots[slotName]" :name="slotName" :item="item" />
       <!--
         @slot (required) Default item rendering. This slot will be used by default for rendering
         the item without an specific slot implementation.
@@ -41,10 +41,10 @@
     ref,
     watch
   } from 'vue';
-  import { useResizeObserver } from '@vueuse/core';
+  import { MaybeComputedElementRef, useResizeObserver } from '@vueuse/core';
   import { toKebabCase } from '../utils/string';
   import { ListItem, VueCSSClasses } from '../utils/types';
-  import { AnimationProp } from '../types/index';
+  import { AnimationProp } from '../types/animation-prop';
   import { useXBus } from '../composables/use-x-bus';
   import { LIST_ITEMS_KEY } from './decorators/injection.consts';
 
@@ -103,7 +103,11 @@
         type: Array as PropType<ListItem[]>
       }
     },
-    setup(props) {
+    setup(props, { slots }) {
+      type ElementRef = {
+        $el: HTMLElement;
+      };
+
       const xBus = useXBus();
       /**
        * It injects {@link ListItem} provided by an ancestor.
@@ -112,7 +116,7 @@
        */
       const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);
 
-      const gridEl = ref<HTMLElement | null>(null);
+      const gridEl = ref<ElementRef | HTMLElement | null>(null);
 
       let renderedColumnsNumber = ref(0);
       /**
@@ -193,16 +197,28 @@
         })
       );
 
+      /**
+       * 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;
+      };
+
       /**
        * Updates the number of columns rendered inside the grid.
        *
        * @internal
        */
       const updateRenderedColumnsNumber = (): void => {
-        if (gridEl.value !== null && gridEl.value instanceof HTMLElement) {
-          const { gridTemplateColumns } = getComputedStyle(gridEl.value);
-          renderedColumnsNumber.value = gridTemplateColumns.split(' ').length;
-        }
+        const { gridTemplateColumns } = getComputedStyle(
+          isElementRef(gridEl.value) ? gridEl.value.$el : (gridEl.value as Element)
+        );
+        renderedColumnsNumber.value = gridTemplateColumns.split(' ').length;
       };
 
       /**
@@ -211,14 +227,18 @@
        * @internal
        */
       // eslint-disable-next-line @typescript-eslint/unbound-method
-      const resizeObserver = useResizeObserver(gridEl, updateRenderedColumnsNumber);
+      const resizeObserver = useResizeObserver(
+        gridEl as MaybeComputedElementRef,
+        updateRenderedColumnsNumber
+      );
       onBeforeUnmount(() => resizeObserver.stop());
 
       return {
         gridItems,
         cssClasses,
         style,
-        gridEl
+        gridEl,
+        slots
       };
     }
   });

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

@@ -35,6 +35,5 @@ export * from './decorators/debounce.decorators';
 export * from './decorators/injection.consts';
 export * from './decorators/injection.decorators';
 export * from './decorators/store.decorators';
-export * from './items-list-injection.mixin';
 export * from './x-component.mixin';
 export * from './x-component.utils';

packages/x-components/src/components/items-list.vue

@@ -23,56 +23,75 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Mixins, Prop } from 'vue-property-decorator';
+  import { computed, defineComponent, PropType } from 'vue';
   import { ListItem } from '../utils/types';
   import { toKebabCase } from '../utils/string';
-  import { dynamicPropsMixin } from './dynamic-props.mixin';
+  import { animationProp } from '../utils/options-api';
 
   /**
    * It renders a list of {@link ListItem} providing a slot for each `slotName` which depends on
    * the `modelName`of the item.
    *
    * @public
    */
-  @Component
-  export default class ItemsList extends Mixins(dynamicPropsMixin(['itemClass'])) {
-    /**
-     * Animation component that will be used to animate the list.
-     *
-     * @public
-     */
-    @Prop({ default: 'ul' })
-    protected animation!: Vue | string;
+  export default defineComponent({
+    name: 'ItemsList',
+    props: {
+      /**
+       * Animation component that will be used to animate the list.
+       *
+       * @public
+       */
+      animation: {
+        type: animationProp,
+        default: 'ul'
+      },
 
-    /**
-     * List of items.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    protected items!: ListItem[];
+      /**
+       * List of items.
+       *
+       * @public
+       */
+      items: {
+        type: Array as PropType<ListItem[]>,
+        required: true
+      },
 
-    /**
-     * The list of the items with additional properties.
-     *
-     * @returns A list of items with `dataTest`, `class` and the `slotName` for each item.
-     *
-     * @internal
-     */
-    protected get computedItems(): {
-      dataTest: string;
-      class: Array<string | undefined>;
-    }[] {
-      return this.items.map(item => {
-        const modelName = toKebabCase(item.modelName);
-        return {
-          ...item,
-          dataTest: `${modelName}s-list-item`,
-          class: [`x-${modelName}s-list-item`, this.itemClass],
-          slotName: modelName
-        };
-      });
+      /**
+       * Item's classes.
+       *
+       * @public
+       */
+      itemClass: {
+        type: String
+      }
+    },
+    setup(props) {
+      /**
+       * The list of the items with additional properties.
+       *
+       * @returns A list of items with `dataTest`, `class` and the `slotName` for each item.
+       *
+       * @internal
+       */
+      const computedItems = computed(
+        (): {
+          dataTest: string;
+          class: Array<string | undefined>;
+        }[] => {
+          return props.items.map(item => {
+            const modelName = toKebabCase(item.modelName);
+            return {
+              ...item,
+              dataTest: `${modelName}s-list-item`,
+              class: [`x-${modelName}s-list-item`, props.itemClass],
+              slotName: modelName
+            };
+          });
+        }
+      );
+
+      return { computedItems };
     }
-  }
+  });
 </script>

packages/x-components/src/components/location-provider.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { defineComponent, PropType, provide, toRef } from 'vue';
   import { FeatureLocation } from '../types';
-  import { useNoElementRender } from '../composables/index';
+  import { useNoElementRender } from '../composables/use-no-element-render';
 
   /**
    * Location Provider component.