feat: migrate FiltersInjection mixin

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

@@ -4,14 +4,27 @@
     <Facets :renderableFacets="facetsIds.join(',')">
       <template #default="{ facet }">
         <h3>{{ facet.label }}</h3>
-        <ul>
-          <li v-for="filter in facet.filters" :key="filter.id">
-            <BaseEventButton :events="{ UserClickedAFilter: filter }">
-              {{ filter.label }}
-              <span v-if="filter.selected">✅</span>
-            </BaseEventButton>
-          </li>
-        </ul>
+
+        <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
+                  }"
+                >
+                  <BaseEventButton :events="{ UserClickedAFilter: filter }">
+                    {{ filter.label }}
+                    {{ filter.totalResults }}
+                    <span v-if="filter.selected">✅</span>
+                  </BaseEventButton>
+                </FiltersList>
+              </SlicedFilters>
+            </FiltersSearch>
+          </SortedFilters>
+        </ExcludeFiltersWithNoResults>
       </template>
     </Facets>
     <h2>SelectedFilters</h2>
@@ -39,6 +52,11 @@
   import Facets from '../../../../../x-components/src/x-modules/facets/components/facets/facets.vue';
   import SelectedFilters from '../../../../../x-components/src/x-modules/facets/components/lists/selected-filters.vue';
   import SelectedFiltersList from '../../../../../x-components/src/x-modules/facets/components/lists/selected-filters-list.vue';
+  import SortedFilters from '../../../../../x-components/src/x-modules/facets/components/lists/sorted-filters.vue';
+  import SlicedFilters from '../../../../../x-components/src/x-modules/facets/components/lists/sliced-filters.vue';
+  import FiltersSearch from '../../../../../x-components/src/x-modules/facets/components/lists/filters-search.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';
 
-  const facetsIds = ['gender', 'brand'];
+  const facetsIds = ['gender', 'brand', 'category'];
 </script>

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/array';
 
 /**
- * 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[];
   /**
-   * 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';

packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue

@@ -1,11 +1,9 @@
 <script lang="ts">
   import { Filter, isBooleanFilter } from '@empathyco/x-types';
-  import { CreateElement, VNode } from 'vue';
-  import { mixins } from 'vue-class-component';
-  import { Component } from 'vue-property-decorator';
-  import { xComponentMixin, XProvide } from '../../../../components';
+  import { computed, defineComponent, PropType, provide, h } from 'vue';
   import { facetsXModule } from '../../x-module';
-  import FiltersInjectionMixin from './filters-injection.mixin';
+  import { useRegisterXModule } from '../../../../composables/use-register-x-module';
+  import { useFiltersInjection } from '../../../../composables/use-filters-injection';
 
   /**
    * The `ExcludeFiltersWithNoResults` component filters the provided list of filters, excluding
@@ -17,27 +15,47 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(facetsXModule)]
-  })
-  export default class ExcludeFiltersWithNoResults extends mixins(FiltersInjectionMixin) {
-    /**
-     * Removes the filters that have exactly 0 results associated.
-     *
-     * @returns A sublist of the filters prop, excluding the ones with no results.
-     * @internal
-     */
-    @XProvide('filters')
-    public get filtersWithResults(): Filter[] {
-      return this.renderedFilters.filter(
-        filter => !isBooleanFilter(filter) || filter.totalResults !== 0
-      );
-    }
+  export default defineComponent({
+    name: 'ExcludeFiltersWithNoResults',
+    xModule: facetsXModule.name,
+    props: {
+      /**
+       * The list of filters to be rendered as slots.
+       *
+       * @public
+       */
+      filters: Array as PropType<Filter[]>,
+
+      /**
+       * 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.
+       *
+       * @public
+       */
+      parentId: {
+        type: String as PropType<Filter['id']>
+      }
+    },
+    setup(props, { slots }) {
+      useRegisterXModule(facetsXModule);
+      const renderedFilters = useFiltersInjection(props);
+
+      /**
+       * Removes the filters that have exactly 0 results associated.
+       *
+       * @returns A sublist of the filters prop, excluding the ones with no results.
+       * @internal
+       */
+      const filtersWithResults = computed((): Filter[] => {
+        return renderedFilters.value.filter(
+          filter => !isBooleanFilter(filter) || filter.totalResults !== 0
+        );
+      });
+      provide('filters', filtersWithResults);
 
-    render(h: CreateElement): VNode {
-      return this.$scopedSlots.default?.({ filters: this.filtersWithResults })?.[0] ?? h();
+      return () => (slots.default ? slots.default({ filters: filtersWithResults.value }) : h());
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">