feat: migrate FiltersInjection mixin

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

@@ -14,7 +14,8 @@ import {
   TestScroll,
   TestSortDropdown,
   TestSortList,
-  TestSortPickerList
+  TestSortPickerList,
+  TestFiltersInjection
 } from './';
 
 const routes = [
@@ -92,6 +93,11 @@ const routes = [
     path: '/elements-list',
     name: 'ElementsList',
     component: TestElementsList
+  },
+  {
+    path: '/filters-injection',
+    name: 'FiltersInjection',
+    component: TestFiltersInjection
   }
 ];
 

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

@@ -1 +1,2 @@
+export { default as TestFiltersInjection } from './test-filters-injection.vue';
 export { default as TestFacets } from './test-facets.vue';

packages/_vue3-migration-test/src/x-modules/facets/components/test-filters-injection.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+  import FiltersSearch from '../../../../../x-components/src/x-modules/facets/components/lists/filters-search.vue';
+  import SlicedFilters from '../../../../../x-components/src/x-modules/facets/components/lists/sliced-filters.vue';
+  import SortedFilters from '../../../../../x-components/src/x-modules/facets/components/lists/sorted-filters.vue';
+  import ExcludeFiltersWithNoResults from '../../../../../x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue';
+  import FiltersList from '../../../../../x-components/src/x-modules/facets/components/lists/filters-list.vue';
+  import { useState } from '../../../../../x-components/src/composables/use-state';
+  import { useRegisterXModule } from '../../../../../x-components/src/composables/use-register-x-module';
+  import { facetsXModule } from '../../../../../x-components/src/x-modules/facets/x-module';
+
+  useRegisterXModule(facetsXModule);
+
+  const facet = useState('facets', ['facets']).facets.value['category'];
+</script>
+
+<template>
+  <div>
+    <ExcludeFiltersWithNoResults :filters="facet.filters">
+      <SortedFilters>
+        <FiltersSearch :data-test="`filters-search-${facet.id}`">
+          <SlicedFilters :max="4" :data-test="`${facet.label}-sliced-filters`">
+            <FiltersList
+              v-slot="{
+                // eslint-disable-next-line vue/no-unused-vars
+                filter
+              }"
+            >
+              {{ filter.label }}
+              {{ filter.totalResults }}
+            </FiltersList>
+          </SlicedFilters>
+        </FiltersSearch>
+      </SortedFilters>
+    </ExcludeFiltersWithNoResults>
+  </div>
+</template>
+
+<style scoped lang="scss">
+  .list {
+    overflow: auto;
+    height: 100px;
+  }
+</style>

packages/_vue3-migration-test/src/x-modules/facets/x-module.ts

@@ -16,6 +16,16 @@ const facets: Record<Facet['id'], Facet> = {
   color: createSimpleFacetStub('color', createFilter => [
     createFilter('red', true),
     createFilter('blue', false)
+  ]),
+  category: createSimpleFacetStub('category', createFilter => [
+    createFilter('dress', false),
+    createFilter('floral', false, 5),
+    createFilter('skirt', false, 9),
+    createFilter('print', false, 9),
+    createFilter('midi', false, 3),
+    createFilter('fitted', false, 0),
+    createFilter('short', false),
+    createFilter('long', false, 15)
   ])
 };
 const filters = arrayToObject(

packages/x-components/src/x-modules/facets/components/lists/__tests__/filters-injection-mixin.spec.ts → packages/x-components/src/composables/__tests__/use-filters-injection.spec.ts

@@ -1,38 +1,51 @@
+import Vue, { ComponentOptions, defineComponent, PropType, provide, ref } from 'vue';
 import { Filter } from '@empathyco/x-types';
 import { mount, Wrapper } from '@vue/test-utils';
-import Vue, { ComponentOptions } from 'vue';
-import { Component, Prop } from 'vue-property-decorator';
 import {
   createHierarchicalFilter,
   createSimpleFilter
-} from '../../../../../__stubs__/filters-stubs.factory';
-import { XProvide } from '../../../../../components/decorators/injection.decorators';
-import FiltersInjectionMixin from '../filters-injection.mixin';
-
-@Component({
+} from '../../__stubs__/filters-stubs.factory';
+import { useFiltersInjection } from '../use-filters-injection';
+
+const Provider = defineComponent({
+  name: 'Provider',
+  props: {
+    injectedData: {
+      type: Array as PropType<Filter[]>
+    }
+  },
+  setup(props) {
+    const filters = ref(props.injectedData);
+    provide('filters', filters);
+  },
   template: `
     <div>
       <slot />
     </div>
   `
-})
-class Provider extends Vue {
-  @Prop()
-  @XProvide('filters')
-  public injectedData!: any;
-}
+});
 
 const Filters: ComponentOptions<Vue> = {
-  mixins: [FiltersInjectionMixin],
+  props: {
+    filters: Array as PropType<Filter[]>,
+    parentId: {
+      type: String as PropType<Filter['id']>,
+      required: false
+    }
+  },
+  setup(props) {
+    const renderedFilters = useFiltersInjection(props);
+    return { renderedFilters };
+  },
   template: `
     <div>
     <li v-for="filter of renderedFilters" :key="filter.id">{{ filter.id }}</li>
     </div>
   `
 };
 
-describe('test filters injection mixin', () => {
-  function renderFiltersMixin({
+describe('test filters injection composable', () => {
+  function renderFiltersComposable({
     propFilters,
     injectedFilters,
     parentId
@@ -76,7 +89,7 @@ describe('test filters injection mixin', () => {
     const whiteFilter = createSimpleFilter('color', 'white');
     const blackFilter = createSimpleFilter('color', 'black');
     const blueFilter = createSimpleFilter('color', 'blue');
-    const { setPropFilters, getRenderedFilterIds } = renderFiltersMixin({
+    const { setPropFilters, getRenderedFilterIds } = renderFiltersComposable({
       propFilters: [whiteFilter, blackFilter]
     });
     let renderedIds = getRenderedFilterIds();
@@ -96,7 +109,7 @@ describe('test filters injection mixin', () => {
     const whiteFilter = createSimpleFilter('color', 'white');
     const blackFilter = createSimpleFilter('color', 'black');
     const blueFilter = createSimpleFilter('color', 'blue');
-    const { getRenderedFilterIds } = renderFiltersMixin({
+    const { getRenderedFilterIds } = renderFiltersComposable({
       injectedFilters: [whiteFilter, blackFilter, blueFilter]
     });
     const renderedIds = getRenderedFilterIds();
@@ -110,7 +123,7 @@ describe('test filters injection mixin', () => {
     const whiteFilter = createSimpleFilter('color', 'white');
     const blackFilter = createSimpleFilter('color', 'black');
     const blueFilter = createSimpleFilter('color', 'blue');
-    const { getRenderedFilterIds } = renderFiltersMixin({
+    const { getRenderedFilterIds } = renderFiltersComposable({
       propFilters: [whiteFilter, blackFilter],
       injectedFilters: [blueFilter]
     });
@@ -137,7 +150,7 @@ describe('test filters injection mixin', () => {
     categoryShirts.parentId = categoryJeans.parentId = categoryMen.id;
     const categoryWomen = createHierarchicalFilter('category', 'women', false);
 
-    const { getRenderedFilterIds } = renderFiltersMixin({
+    const { getRenderedFilterIds } = renderFiltersComposable({
       propFilters: [categoryShirts, categoryJeans, categoryMen, categoryWomen]
     });
     const renderedIds = getRenderedFilterIds();
@@ -164,7 +177,7 @@ describe('test filters injection mixin', () => {
     categoryShirts.parentId = categoryJeans.parentId = categoryMen.id;
     const categoryWomen = createHierarchicalFilter('category', 'women', false);
 
-    const { getRenderedFilterIds } = renderFiltersMixin({
+    const { getRenderedFilterIds } = renderFiltersComposable({
       propFilters: [categoryShirts, categoryJeans, categoryMen, categoryWomen],
       parentId: categoryMen.id
     });

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

@@ -7,3 +7,4 @@ export * from './use-store';
 export * from './use-state';
 export * from './use-getter';
 export * from './use-alias-api';
+export * from './use-filters-injection';

packages/x-components/src/x-modules/facets/components/lists/filters-injection.mixin.ts → packages/x-components/src/composables/use-filters-injection.ts

@@ -1,52 +1,30 @@
 import { Filter, HierarchicalFilter, isHierarchicalFilter } from '@empathyco/x-types';
-import Vue from 'vue';
-import Component from 'vue-class-component';
-import { Prop } from 'vue-property-decorator';
-import { XInject } from '../../../../components/decorators/injection.decorators';
-import { isArrayEmpty } from '../../../../utils/array';
+import { computed, inject, Ref } from 'vue';
+import { isArrayEmpty } from '../utils/index';
 
 /**
- * Mixin to share filters injection logic.
+ * Composable to share filters injection logic.
+ *
+ * @param props - Composable props.
+ * @returns An array of filters.
  *
  * @public
  */
-@Component
-export default class FiltersInjectionMixin extends Vue {
+export function useFiltersInjection(props: {
+  /** The list of filters to be rendered as slots. */
+  filters?: Filter[] | undefined;
   /**
-   * The list of filters to be rendered as slots.
-   *
-   * @public
+    This prop is used in the `HierarchicalFilter` component and only in that case. It is necessary
+   to make the `renderedFilters` to return only the filters of each level of the hierarchy.
    */
-  @Prop()
-  protected filters!: Filter[];
-
+  parentId?: Filter['id'] | undefined;
+}) {
   /**
-   * This prop is used in the `HierarchicalFilter` component and only in that case. It is necessary
-   * to make the `renderedFilters` to return only the filters of each level of the hierarchy.
+   * The injected filters array.
    *
    * @public
    */
-  @Prop({ required: false })
-  protected parentId?: Filter['id'];
-
-  /** The injected filters array.
-   *
-   * @public
-   */
-  @XInject('filters')
-  public injectedFilters!: Filter[];
-
-  /**
-   * The prop or injected filters array, filtered by parentId if they are
-   * {@link @empathyco/x-types#HierarchicalFilter}.
-   *
-   * @returns An array of filters.
-   *
-   * @internal
-   */
-  protected get renderedFilters(): Filter[] {
-    return this.filterByParentId(this.propOrInjectedFilters);
-  }
+  const injectedFilters = inject<Ref<Filter[]> | undefined>('filters', undefined);
 
   /**
    * An array of filters formed by those that are passed through prop or injected.
@@ -55,15 +33,15 @@ export default class FiltersInjectionMixin extends Vue {
    *
    * @internal
    */
-  protected get propOrInjectedFilters(): Filter[] {
+  const propOrInjectedFilters = computed((): void | Filter[] => {
     return (
-      this.filters ??
-      this.injectedFilters ??
+      props.filters ??
+      injectedFilters?.value ??
       //TODO: add here logger
       //eslint-disable-next-line no-console
       console.warn('It is necessary to pass a prop or inject the list of filters')
     );
-  }
+  });
 
   /**
    * In the case that the filters are {@link @empathyco/x-types#HierarchicalFilter}, this method
@@ -76,13 +54,23 @@ export default class FiltersInjectionMixin extends Vue {
    * @returns The list of the filters filtered by parentId.
    * @internal
    */
-  protected filterByParentId(filters: Filter[]): Filter[] {
+  const filterByParentId = (filters: Filter[]): Filter[] => {
     if (!isArrayEmpty(filters) && isHierarchicalFilter(filters[0])) {
       return (filters as HierarchicalFilter[]).filter(
-        filter => filter.parentId === (this.parentId ?? null)
+        filter => filter.parentId === (props.parentId ?? null)
       );
     } else {
       return filters;
     }
-  }
+  };
+
+  /**
+   * The prop or injected filters array, filtered by parentId if they are
+   * {@link @empathyco/x-types#HierarchicalFilter}.
+   *
+   * @returns An array of filters.
+   *
+   * @internal
+   */
+  return computed<Filter[]>(() => filterByParentId(propOrInjectedFilters.value as Filter[]));
 }

packages/x-components/src/views/home/aside.vue

@@ -35,7 +35,7 @@
             <ChevronDown />
           </template>
           <!-- Filters -->
-          <SlicedFilters max="4" :filters="facet.filters">
+          <SlicedFilters :max="4" :filters="facet.filters">
             <FiltersList v-slot="{ filter }">
               <HierarchicalFilter
                 :filter="filter"

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

@@ -14,7 +14,6 @@ export { default as PreselectedFilters } from './preselected-filters.vue';
 // Lists
 // eslint-disable-next-line max-len
 export { default as ExcludeFiltersWithNoResults } from './lists/exclude-filters-with-no-results.vue';
-export { default as FiltersInjectionMixin } from './lists/filters-injection.mixin';
 export { default as FiltersList } from './lists/filters-list.vue';
 export { default as FiltersSearch } from './lists/filters-search.vue';
 export { default as SelectedFilters } from './lists/selected-filters.vue';