From 240e046e68869efe5b26ebd18d8ba8533b972ed9 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Wed, 8 May 2024 14:26:52 +0200
Subject: [PATCH 01/11] refactor: migrate `FiltersInjection` mixin

---
 .../x-components/src/composables/index.ts     |   1 +
 .../src/composables/use-filters-injection.ts  |  76 ++++++++
 .../x-components/src/views/home/aside.vue     |   2 +-
 .../lists/exclude-filters-with-no-results.vue |  66 ++++---
 .../facets/components/lists/filters-list.vue  | 124 ++++++++-----
 .../components/lists/filters-search.vue       | 171 +++++++++++-------
 .../components/lists/sliced-filters.vue       | 170 ++++++++++-------
 .../components/lists/sorted-filters.vue       |  74 +++++---
 8 files changed, 452 insertions(+), 232 deletions(-)
 create mode 100644 packages/x-components/src/composables/use-filters-injection.ts

diff --git a/packages/x-components/src/composables/index.ts b/packages/x-components/src/composables/index.ts
index 309944c00e..861553723d 100644
--- a/packages/x-components/src/composables/index.ts
+++ b/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';
diff --git a/packages/x-components/src/composables/use-filters-injection.ts b/packages/x-components/src/composables/use-filters-injection.ts
new file mode 100644
index 0000000000..44b1ea762d
--- /dev/null
+++ b/packages/x-components/src/composables/use-filters-injection.ts
@@ -0,0 +1,76 @@
+import { Filter, HierarchicalFilter, isHierarchicalFilter } from '@empathyco/x-types';
+import { computed, inject, Ref } from 'vue';
+import { isArrayEmpty } from '../utils/index';
+
+/**
+ * Composable to share filters injection logic.
+ *
+ * @param props - Composable props.
+ * @returns An array of filters.
+ *
+ * @public
+ */
+export function useFiltersInjection(props: {
+  /** The list of filters to be rendered as slots. */
+  filters?: Filter[] | 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.
+   */
+  parentId?: Filter['id'] | undefined;
+}) {
+  /**
+   * The injected filters array.
+   *
+   * @public
+   */
+  const injectedFilters = inject<Ref<Filter[]> | undefined>('filters');
+
+  /**
+   * An array of filters formed by those that are passed through prop or injected.
+   *
+   * @returns An array of filters.
+   *
+   * @internal
+   */
+  const propOrInjectedFilters = computed((): void | Filter[] => {
+    return (
+      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
+   * removes from the filter list passed as a param, the filters that are not part of the level of
+   * the hierarchy, depending on the value of the `parentId` prop. In case this prop is undefined,
+   * then only the first level of filters hierarchy are returned. In the case the prop `parentId` is
+   * defined, then only the filters with the same `parentId` are returned.
+   *
+   * @param filters - The list of the filters to apply the filter.
+   * @returns The list of the filters filtered by parentId.
+   * @internal
+   */
+  const filterByParentId = (filters: Filter[]): Filter[] => {
+    if (!isArrayEmpty(filters) && isHierarchicalFilter(filters[0])) {
+      return (filters as HierarchicalFilter[]).filter(
+        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[]));
+}
diff --git a/packages/x-components/src/views/home/aside.vue b/packages/x-components/src/views/home/aside.vue
index 81ab1993e8..6b3ffade0e 100644
--- a/packages/x-components/src/views/home/aside.vue
+++ b/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"
diff --git a/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue b/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
index 56c29d9e6e..8f275a6edc 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
+++ b/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, CreateElement, defineComponent, PropType, provide, VNode } 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,51 @@
    *
    * @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']>,
+        required: false
+      }
+    },
+    setup(props) {
+      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);
+
+      return { filtersWithResults };
+    },
     render(h: CreateElement): VNode {
       return this.$scopedSlots.default?.({ filters: this.filtersWithResults })?.[0] ?? h();
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue b/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue
index edfd823626..e728365048 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue
@@ -23,13 +23,13 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { mixins } from 'vue-class-component';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { xComponentMixin } from '../../../../components';
+  import { computed, defineComponent, PropType } from 'vue';
+  import { Filter } from '@empathyco/x-types';
   import { VueCSSClasses } from '../../../../utils/types';
   import { facetsXModule } from '../../x-module';
-  import FiltersInjectionMixin from './filters-injection.mixin';
+  import { AnimationProp } from '../../../../types/index';
+  import { useRegisterXModule } from '../../../../composables/use-register-x-module';
+  import { useFiltersInjection } from '../../../../composables/use-filters-injection';
 
   /**
    * Renders a list with a list item per each
@@ -38,51 +38,83 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(facetsXModule)]
-  })
-  export default class FiltersList extends mixins(FiltersInjectionMixin) {
-    /**
-     * Animation component that will be used to animate the base filters.
-     *
-     * @public
-     */
-    @Prop({ default: 'ul' })
-    protected animation!: Vue | string;
-
-    /**
-     * It handles if the filters should be rendered.
-     *
-     * @returns True if there are filters.
-     *
-     * @public
-     */
-    protected get hasFiltersToRender(): boolean {
-      return this.renderedFilters?.length > 0;
-    }
-
-    /**
-     * Checks if at least one filter is selected.
-     *
-     * @returns True if at least one filter is selected. False otherwise.
-     * @internal
-     */
-    protected get hasSelectedFilters(): boolean {
-      return !!this.renderedFilters?.some(filter => filter.selected);
-    }
+  export default defineComponent({
+    name: 'FiltersList',
+    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']>,
+        required: false
+      },
+
+      /**
+       * Animation component that will be used to animate the base filters.
+       *
+       * @public
+       */
+      animation: {
+        type: AnimationProp,
+        default: 'ul'
+      }
+    },
+    setup(props) {
+      useRegisterXModule(facetsXModule);
+
+      const renderedFilters = useFiltersInjection(props);
+
+      /**
+       * It handles if the filters should be rendered.
+       *
+       * @returns True if there are filters.
+       *
+       * @public
+       */
+      const hasFiltersToRender = computed(() => {
+        return renderedFilters?.value.length > 0;
+      });
+
+      /**
+       * Checks if at least one filter is selected.
+       *
+       * @returns True if at least one filter is selected. False otherwise.
+       * @internal
+       */
+      const hasSelectedFilters = computed(() => {
+        return !!renderedFilters?.value.some(filter => filter.selected);
+      });
+
+      /**
+       * Dynamic CSS classes for the root element of this component.
+       *
+       * @returns An object containing the dynamic CSS classes and a boolean indicating if they should
+       * be added or not.
+       */
+      const cssClasses = computed((): VueCSSClasses => {
+        return {
+          'x-filters--has-selected-filters': hasSelectedFilters.value
+        };
+      });
 
-    /**
-     * Dynamic CSS classes for the root element of this component.
-     *
-     * @returns An object containing the dynamic CSS classes and a boolean indicating if they should
-     * be added or not.
-     */
-    protected get cssClasses(): VueCSSClasses {
       return {
-        'x-filters--has-selected-filters': this.hasSelectedFilters
+        hasFiltersToRender,
+        cssClasses,
+        renderedFilters
       };
     }
-  }
+  });
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue b/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue
index 011f8b8eb5..5d76855ff9 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue
@@ -27,90 +27,123 @@
 
 <script lang="ts">
   import { Filter, isBooleanFilter } from '@empathyco/x-types';
-  import { mixins } from 'vue-class-component';
-  import { Component, Prop, Watch } from 'vue-property-decorator';
-  import { xComponentMixin, XProvide } from '../../../../components';
+  import { computed, defineComponent, PropType, provide, ref, watch } from 'vue';
   import { debounce } from '../../../../utils/debounce';
   import { normalizeString } from '../../../../utils/normalize';
   import { DebouncedFunction, VueCSSClasses } from '../../../../utils/types';
   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';
 
   /**
    * Renders the filters sifted with the input query.
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(facetsXModule)]
-  })
-  export default class FiltersSearch extends mixins(FiltersInjectionMixin) {
-    /** The debounce time for applying the filter sifting. */
-    @Prop({ default: 200 })
-    protected debounceInMs!: number;
-
-    protected query = '';
-    protected setQueryDebounced!: DebouncedFunction<[string]>;
-
-    protected filtersSearchInputMessage = 'search into the filter values';
-
-    /**
-     * Set the debounce function for setting the query debounced.
-     *
-     * @internal
-     */
-    @Watch('debounceInMs', { immediate: true })
-    updateSetQueryDebounced(): void {
-      this.setQueryDebounced = debounce(query => {
-        this.query = query;
-      }, this.debounceInMs);
-    }
+  export default defineComponent({
+    name: 'FiltersSearch',
+    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']>,
+        required: false
+      },
+
+      /** The debounce time for applying the filter sifting. */
+      debounceInMs: {
+        type: Number,
+        default: 200
+      }
+    },
+    setup(props) {
+      useRegisterXModule(facetsXModule);
+      const renderedFilters = useFiltersInjection(props);
+
+      let query = ref('');
+      let setQueryDebounced!: DebouncedFunction<[string]>;
+      const filtersSearchInputMessage = 'search into the filter values';
+
+      const debounceInMs = computed(() => props.debounceInMs);
+
+      /**
+       * Set the debounce function for setting the query debounced.
+       *
+       * @internal
+       */
+      const updateSetQueryDebounced = () => {
+        setQueryDebounced = debounce(queryDebounced => {
+          query.value = queryDebounced;
+        }, props.debounceInMs);
+      };
+      watch(debounceInMs, updateSetQueryDebounced, { immediate: true });
+
+      /**
+       * Sift the array of filters which matches with the query.
+       *
+       * @returns Array of sifted filters.
+       * @internal
+       */
+      const siftedFilters = computed((): Filter[] => {
+        const normalizedQuery = normalizeString(query.value);
+        return renderedFilters.value.filter(
+          filter =>
+            isBooleanFilter(filter) && normalizeString(filter.label).includes(normalizedQuery)
+        );
+      });
+      provide('filters', siftedFilters);
+
+      /**
+       * Adds the dynamic css classes to the component.
+       *
+       * @returns The class to be added to the component.
+       * @internal
+       */
+      const cssClasses = computed((): VueCSSClasses => {
+        return { 'x-filters-search--is-sifted': !!query.value };
+      });
+
+      /**
+       * Set the query through the debounced function.
+       *
+       * @param query - The query to sift filters.
+       * @internal
+       */
+      const setQuery = (query: string): void => {
+        setQueryDebounced(query);
+      };
 
-    /**
-     * Sift the array of filters which matches with the query.
-     *
-     * @returns Array of sifted filters.
-     * @internal
-     */
-    @XProvide('filters')
-    public get siftedFilters(): Filter[] {
-      const normalizedQuery = normalizeString(this.query);
-      return this.renderedFilters.filter(
-        filter => isBooleanFilter(filter) && normalizeString(filter.label).includes(normalizedQuery)
-      );
-    }
+      /**
+       * Clear the query.
+       *
+       * @internal
+       */
+      const clearQuery = (): void => {
+        query.value = '';
+      };
 
-    /**
-     * Adds the dynamic css classes to the component.
-     *
-     * @returns The class to be added to the component.
-     * @internal
-     */
-    protected get cssClasses(): VueCSSClasses {
       return {
-        'x-filters-search--is-sifted': !!this.query
+        filtersSearchInputMessage,
+        clearQuery,
+        setQuery,
+        cssClasses,
+        siftedFilters,
+        query
       };
     }
-
-    /**
-     * Set the query through the debounced function.
-     *
-     * @param query - The query to sift filters.
-     * @internal
-     */
-    protected setQuery(query: string): void {
-      this.setQueryDebounced(query);
-    }
-
-    /**
-     * Clear the query.
-     *
-     * @internal
-     */
-    protected clearQuery(): void {
-      this.query = '';
-    }
-  }
+  });
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/x-components/src/x-modules/facets/components/lists/sliced-filters.vue b/packages/x-components/src/x-modules/facets/components/lists/sliced-filters.vue
index 6c83301b8e..3a46ef6224 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/sliced-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/sliced-filters.vue
@@ -46,13 +46,11 @@
 
 <script lang="ts">
   import { Filter } from '@empathyco/x-types';
-  import { mixins } from 'vue-class-component';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { xComponentMixin, XProvide } from '../../../../components';
+  import { computed, defineComponent, PropType, provide, ref } from 'vue';
   import { VueCSSClasses } from '../../../../utils';
   import { facetsXModule } from '../../x-module';
-  import { dynamicPropsMixin } from '../../../../components/dynamic-props.mixin';
-  import FiltersInjectionMixin from './filters-injection.mixin';
+  import { useRegisterXModule } from '../../../../composables/use-register-x-module';
+  import { useFiltersInjection } from '../../../../composables/use-filters-injection';
 
   /**
    * Component that slices a list of filters and returns them using the default scoped slot,
@@ -61,76 +59,112 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(facetsXModule), dynamicPropsMixin(['buttonClass'])]
-  })
-  export default class SlicedFilters extends mixins(FiltersInjectionMixin) {
-    /**
-     * The maximum number of filters to show.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    protected max!: number;
-
-    /** For showing the remaining filters. */
-    public showMoreFilters = true;
-
-    /**
-     * Show the buttons template when length filters is greater than property max.
-     *
-     * @returns Boolean if length filters is greater than property max.
-     * @internal
-     */
-    protected get showButton(): boolean {
-      return this.renderedFilters.length > this.max;
-    }
+  export default defineComponent({
+    name: 'SlicedFilters',
+    xModule: facetsXModule.name,
+    props: {
+      /**
+       * The list of filters to be rendered as slots.
+       *
+       * @public
+       */
+      filters: Array as PropType<Filter[]>,
 
-    /**
-     * Sliced the array of filters depends on click button show more.
-     *
-     * @returns Array of sliced filters or all filters.
-     * @internal
-     */
-    @XProvide('filters')
-    public get slicedFilters(): Filter[] {
-      return this.showMoreFilters ? this.renderedFilters.slice(0, this.max) : this.renderedFilters;
-    }
+      /**
+       * 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']>,
+        required: false
+      },
 
-    /**
-     * The difference between length filters and max to show.
-     *
-     * @returns Number of remaining filters to show.
-     * @internal
-     */
-    protected get difference(): number {
-      return this.renderedFilters.length - this.max;
-    }
+      /**
+       * The maximum number of filters to show.
+       *
+       * @public
+       */
+      max: {
+        type: Number,
+        required: true
+      },
 
-    /**
-     * Show or hide the remaining filters. It also emits a Vue event based on the clicked button.
-     *
-     * @param event - The click event.
-     *
-     * @internal
-     */
-    protected toggleShowMoreFilters(event: MouseEvent): void {
-      this.showMoreFilters = !this.showMoreFilters;
-      this.$emit(this.showMoreFilters ? 'click:show-less' : 'click:show-more', event);
-    }
+      buttonClass: String
+    },
+    emits: ['click:show-less', 'click:show-more'],
+    setup(props, { emit }) {
+      useRegisterXModule(facetsXModule);
+
+      /** For showing the remaining filters. */
+      let showMoreFilters = ref(true);
+
+      const renderedFilters = useFiltersInjection(props);
+
+      /**
+       * Show the buttons template when length filters is greater than property max.
+       *
+       * @returns Boolean if length filters is greater than property max.
+       * @internal
+       */
+      const showButton = computed(() => renderedFilters.value.length > props.max);
+
+      /**
+       * Sliced the array of filters depends on click button show more.
+       *
+       * @returns Array of sliced filters or all filters.
+       * @internal
+       */
+      const slicedFilters = computed((): Filter[] => {
+        return showMoreFilters.value
+          ? renderedFilters.value.slice(0, props.max)
+          : renderedFilters.value;
+      });
+      provide('filters', slicedFilters);
+
+      /**
+       * The difference between length filters and max to show.
+       *
+       * @returns Number of remaining filters to show.
+       * @internal
+       */
+      const difference = computed(() => renderedFilters.value.length - props.max);
+
+      /**
+       * Show or hide the remaining filters. It also emits a Vue event based on the clicked button.
+       *
+       * @param event - The click event.
+       *
+       * @internal
+       */
+      const toggleShowMoreFilters = (event: MouseEvent): void => {
+        showMoreFilters.value = !showMoreFilters.value;
+        emit(showMoreFilters.value ? 'click:show-less' : 'click:show-more', event);
+      };
+
+      /**
+       * Adds the dynamic css classes to the component.
+       *
+       * @returns The classes to be added to the component.
+       * @internal
+       */
+      const cssClasses = computed((): VueCSSClasses => {
+        return {
+          'x-sliced-filters--is-sliced': showButton.value
+        };
+      });
 
-    /**
-     * Adds the dynamic css classes to the component.
-     *
-     * @returns The classes to be added to the component.
-     * @internal
-     */
-    protected get cssClasses(): VueCSSClasses {
       return {
-        'x-sliced-filters--is-sliced': this.showButton
+        cssClasses,
+        toggleShowMoreFilters,
+        showButton,
+        difference,
+        slicedFilters,
+        showMoreFilters
       };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue b/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
index 9736638b4f..3ac1b6de73 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
@@ -1,43 +1,65 @@
 <script lang="ts">
   import { BooleanFilter, Filter, isBooleanFilter } from '@empathyco/x-types';
-  import { mixins } from 'vue-class-component';
-  import { Component } from 'vue-property-decorator';
-  import { CreateElement, VNode } from 'vue';
-  import { xComponentMixin, XProvide } from '../../../../components';
+  import { computed, CreateElement, defineComponent, PropType, provide, VNode } from 'vue';
   import { isArrayEmpty } from '../../../../utils';
   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';
 
   /**
    * Component that sorts a list of filters and returns them using the default scoped slot.
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(facetsXModule)]
-  })
-  export default class SortedFilters extends mixins(FiltersInjectionMixin) {
-    /**
-     * An array of filters with the selected filters at the beginning of the list.
-     *
-     * @returns Array of filters.
-     * @internal
-     */
-    @XProvide('filters')
-    public get sortedFilters(): Filter[] {
-      if (!isArrayEmpty(this.renderedFilters) && isBooleanFilter(this.renderedFilters[0])) {
-        return ([...this.renderedFilters] as BooleanFilter[]).sort(({ selected }) => {
-          return selected ? -1 : 1;
-        });
+  export default defineComponent({
+    name: 'SortedFilters',
+    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']>,
+        required: false
       }
-
-      return this.renderedFilters;
-    }
-
+    },
+    setup(props) {
+      useRegisterXModule(facetsXModule);
+      const renderedFilters = useFiltersInjection(props);
+
+      /**
+       * An array of filters with the selected filters at the beginning of the list.
+       *
+       * @returns Array of filters.
+       * @internal
+       */
+      const sortedFilters = computed((): Filter[] => {
+        if (!isArrayEmpty(renderedFilters.value) && isBooleanFilter(renderedFilters.value[0])) {
+          return ([...renderedFilters.value] as BooleanFilter[]).sort(({ selected }) => {
+            return selected ? -1 : 1;
+          });
+        }
+
+        return renderedFilters.value;
+      });
+      provide('filters', sortedFilters);
+
+      return { sortedFilters };
+    },
     render(h: CreateElement): VNode {
       return this.$scopedSlots.default?.({ filters: this.sortedFilters })?.[0] ?? h();
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">

From 8806e5d518673f87ee90c9e12efd4112ba906afd Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Thu, 9 May 2024 12:55:40 +0200
Subject: [PATCH 02/11] fix: render function

---
 .../components/lists/exclude-filters-with-no-results.vue    | 6 +++---
 .../x-modules/facets/components/lists/sorted-filters.vue    | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue b/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
index 8f275a6edc..9d2a3af97f 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
@@ -37,7 +37,7 @@
         required: false
       }
     },
-    setup(props) {
+    setup(props, { slots }) {
       useRegisterXModule(facetsXModule);
       const renderedFilters = useFiltersInjection(props);
 
@@ -54,10 +54,10 @@
       });
       provide('filters', filtersWithResults);
 
-      return { filtersWithResults };
+      return { filtersWithResults, slots };
     },
     render(h: CreateElement): VNode {
-      return this.$scopedSlots.default?.({ filters: this.filtersWithResults })?.[0] ?? h();
+      return this.slots.default?.({ filters: this.filtersWithResults })?.[0] ?? h();
     }
   });
 </script>
diff --git a/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue b/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
index 3ac1b6de73..de41ff4b64 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
@@ -33,7 +33,7 @@
         required: false
       }
     },
-    setup(props) {
+    setup(props, { slots }) {
       useRegisterXModule(facetsXModule);
       const renderedFilters = useFiltersInjection(props);
 
@@ -54,10 +54,10 @@
       });
       provide('filters', sortedFilters);
 
-      return { sortedFilters };
+      return { sortedFilters, slots };
     },
     render(h: CreateElement): VNode {
-      return this.$scopedSlots.default?.({ filters: this.sortedFilters })?.[0] ?? h();
+      return this.slots.default?.({ filters: this.sortedFilters })?.[0] ?? h();
     }
   });
 </script>

From 668383ce64ab6ef3e36cde1cad59208e76a02be7 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Thu, 9 May 2024 13:04:41 +0200
Subject: [PATCH 03/11] chore: add `FiltersInjection` mixin in playground

---
 packages/_vue3-migration-test/src/main.ts     |  4 +-
 packages/_vue3-migration-test/src/router.ts   |  8 +++-
 .../src/x-modules/facets/components/index.ts  |  1 +
 .../components/test-filters-injection.vue     | 43 +++++++++++++++++++
 .../src/x-modules/facets/index.ts             |  2 +
 .../src/x-modules/facets/x-module.ts          | 43 +++++++++++++++++++
 .../src/x-modules/index.ts                    |  1 +
 7 files changed, 100 insertions(+), 2 deletions(-)
 create mode 100644 packages/_vue3-migration-test/src/x-modules/facets/components/index.ts
 create mode 100644 packages/_vue3-migration-test/src/x-modules/facets/components/test-filters-injection.vue
 create mode 100644 packages/_vue3-migration-test/src/x-modules/facets/index.ts
 create mode 100644 packages/_vue3-migration-test/src/x-modules/facets/x-module.ts

diff --git a/packages/_vue3-migration-test/src/main.ts b/packages/_vue3-migration-test/src/main.ts
index 52ed2ba47f..00937c4299 100644
--- a/packages/_vue3-migration-test/src/main.ts
+++ b/packages/_vue3-migration-test/src/main.ts
@@ -7,6 +7,7 @@ import router from './router';
 import { searchXModule } from './x-modules/search/x-module';
 import { nextQueriesXModule } from './x-modules/next-queries/x-module';
 import { scrollXModule } from './x-modules/scroll/x-module';
+import { facetsXModule } from './x-modules/facets/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);
@@ -39,7 +40,8 @@ createApp(App as Component)
     __PRIVATE__xModules: {
       search: searchXModule,
       nextQueries: nextQueriesXModule,
-      scroll: scrollXModule
+      scroll: scrollXModule,
+      facets: facetsXModule
     }
   })
   .mount('#app');
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index b2fbc93b16..988761e6de 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -10,7 +10,8 @@ import {
   TestSortPickerList,
   TestElementsList,
   TestScroll,
-  TestBaseColumnPickerDropdown
+  TestBaseColumnPickerDropdown,
+  TestFiltersInjection
 } from './';
 
 const routes = [
@@ -68,6 +69,11 @@ const routes = [
     path: '/elements-list',
     name: 'ElementsList',
     component: TestElementsList
+  },
+  {
+    path: '/filters-injection',
+    name: 'FiltersInjection',
+    component: TestFiltersInjection
   }
 ];
 
diff --git a/packages/_vue3-migration-test/src/x-modules/facets/components/index.ts b/packages/_vue3-migration-test/src/x-modules/facets/components/index.ts
new file mode 100644
index 0000000000..8a6d568e3a
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/facets/components/index.ts
@@ -0,0 +1 @@
+export { default as TestFiltersInjection } from './test-filters-injection.vue';
diff --git a/packages/_vue3-migration-test/src/x-modules/facets/components/test-filters-injection.vue b/packages/_vue3-migration-test/src/x-modules/facets/components/test-filters-injection.vue
new file mode 100644
index 0000000000..c00f39a59c
--- /dev/null
+++ b/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>
diff --git a/packages/_vue3-migration-test/src/x-modules/facets/index.ts b/packages/_vue3-migration-test/src/x-modules/facets/index.ts
new file mode 100644
index 0000000000..38da673ebb
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/facets/index.ts
@@ -0,0 +1,2 @@
+export * from './components';
+export * from './x-module';
diff --git a/packages/_vue3-migration-test/src/x-modules/facets/x-module.ts b/packages/_vue3-migration-test/src/x-modules/facets/x-module.ts
new file mode 100644
index 0000000000..46d8f02353
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/facets/x-module.ts
@@ -0,0 +1,43 @@
+import { Facet } from '@empathyco/x-types';
+import { createSimpleFacetStub } from '../../../../x-components/src/__stubs__/facets-stubs.factory';
+import { PrivateXModuleOptions } from '../../../../x-components/src/plugins/x-plugin.types';
+import { arrayToObject } from '../../../../x-components/src/utils/array';
+import { FacetsXModule } from '../../../../x-components/src/x-modules/facets/x-module';
+
+const facets: Record<Facet['id'], Facet> = {
+  gender: createSimpleFacetStub('gender', createFilter => [
+    createFilter('Men', false),
+    createFilter('Women', true)
+  ]),
+  brand: createSimpleFacetStub('brand', createFilter => [
+    createFilter('Audi', true),
+    createFilter('BMW', false)
+  ]),
+  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(
+  Object.values(facets).flatMap(facet => facet.filters),
+  'id'
+);
+
+export const facetsXModule: PrivateXModuleOptions<FacetsXModule> = {
+  storeModule: {
+    state: {
+      facets,
+      filters
+    }
+  }
+};
diff --git a/packages/_vue3-migration-test/src/x-modules/index.ts b/packages/_vue3-migration-test/src/x-modules/index.ts
index 9eb244b491..56b46d9cb9 100644
--- a/packages/_vue3-migration-test/src/x-modules/index.ts
+++ b/packages/_vue3-migration-test/src/x-modules/index.ts
@@ -1,3 +1,4 @@
 export * from './search';
 export { default as TestElementsList } from './test-elements-list.vue';
 export * from './scroll';
+export * from './facets';

From 0a6387e8b501a1f088b1d9b1f4cfc39458b5913c Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Thu, 9 May 2024 14:05:51 +0200
Subject: [PATCH 04/11] fix: remove extra import

---
 packages/_vue3-migration-test/src/x-modules/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/_vue3-migration-test/src/x-modules/index.ts b/packages/_vue3-migration-test/src/x-modules/index.ts
index c0d3bd1d09..5c28632c91 100644
--- a/packages/_vue3-migration-test/src/x-modules/index.ts
+++ b/packages/_vue3-migration-test/src/x-modules/index.ts
@@ -3,4 +3,3 @@ export * from './next-queries';
 export * from './search';
 export { default as TestElementsList } from './test-elements-list.vue';
 export * from './scroll';
-export * from './facets';

From 9f324bc3eef2b1501487fa1b5db201f9acabfea6 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Thu, 9 May 2024 14:24:13 +0200
Subject: [PATCH 05/11] chore: remove mixin test and create test for the new
 composable

---
 .../__tests__/use-filters-injection.spec.ts}  | 55 +++++++-----
 .../lists/filters-injection.mixin.ts          | 88 -------------------
 2 files changed, 34 insertions(+), 109 deletions(-)
 rename packages/x-components/src/{x-modules/facets/components/lists/__tests__/filters-injection-mixin.spec.ts => composables/__tests__/use-filters-injection.spec.ts} (83%)
 delete mode 100644 packages/x-components/src/x-modules/facets/components/lists/filters-injection.mixin.ts

diff --git a/packages/x-components/src/x-modules/facets/components/lists/__tests__/filters-injection-mixin.spec.ts b/packages/x-components/src/composables/__tests__/use-filters-injection.spec.ts
similarity index 83%
rename from packages/x-components/src/x-modules/facets/components/lists/__tests__/filters-injection-mixin.spec.ts
rename to packages/x-components/src/composables/__tests__/use-filters-injection.spec.ts
index bed0463913..69ae5cb052 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/__tests__/filters-injection-mixin.spec.ts
+++ b/packages/x-components/src/composables/__tests__/use-filters-injection.spec.ts
@@ -1,29 +1,42 @@
+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>
@@ -31,8 +44,8 @@ const Filters: ComponentOptions<Vue> = {
   `
 };
 
-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
     });
diff --git a/packages/x-components/src/x-modules/facets/components/lists/filters-injection.mixin.ts b/packages/x-components/src/x-modules/facets/components/lists/filters-injection.mixin.ts
deleted file mode 100644
index 4276f2f20c..0000000000
--- a/packages/x-components/src/x-modules/facets/components/lists/filters-injection.mixin.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-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';
-
-/**
- * Mixin to share filters injection logic.
- *
- * @public
- */
-@Component
-export default class FiltersInjectionMixin extends Vue {
-  /**
-   * The list of filters to be rendered as slots.
-   *
-   * @public
-   */
-  @Prop()
-  protected filters!: 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
-   */
-  @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);
-  }
-
-  /**
-   * An array of filters formed by those that are passed through prop or injected.
-   *
-   * @returns An array of filters.
-   *
-   * @internal
-   */
-  protected get propOrInjectedFilters(): Filter[] {
-    return (
-      this.filters ??
-      this.injectedFilters ??
-      //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
-   * removes from the filter list passed as a param, the filters that are not part of the level of
-   * the hierarchy, depending on the value of the `parentId` prop. In case this prop is undefined,
-   * then only the first level of filters hierarchy are returned. In the case the prop `parentId` is
-   * defined, then only the filters with the same `parentId` are returned.
-   *
-   * @param filters - The list of the filters to apply the filter.
-   * @returns The list of the filters filtered by parentId.
-   * @internal
-   */
-  protected filterByParentId(filters: Filter[]): Filter[] {
-    if (!isArrayEmpty(filters) && isHierarchicalFilter(filters[0])) {
-      return (filters as HierarchicalFilter[]).filter(
-        filter => filter.parentId === (this.parentId ?? null)
-      );
-    } else {
-      return filters;
-    }
-  }
-}

From a55d128fe34acc0ffde860eb4e1540047b6280fb Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Thu, 9 May 2024 14:28:38 +0200
Subject: [PATCH 06/11] chore: remove mixin import

---
 packages/x-components/src/x-modules/facets/components/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/x-components/src/x-modules/facets/components/index.ts b/packages/x-components/src/x-modules/facets/components/index.ts
index 9b21fc831a..a41c4bc04d 100644
--- a/packages/x-components/src/x-modules/facets/components/index.ts
+++ b/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';

From 6b1266bf85680362122230ba2aeab4cd974ee853 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Mon, 13 May 2024 10:45:16 +0200
Subject: [PATCH 07/11] fix: assign a default value to the inject

---
 packages/x-components/src/composables/use-filters-injection.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-components/src/composables/use-filters-injection.ts b/packages/x-components/src/composables/use-filters-injection.ts
index 44b1ea762d..a581084a4b 100644
--- a/packages/x-components/src/composables/use-filters-injection.ts
+++ b/packages/x-components/src/composables/use-filters-injection.ts
@@ -24,7 +24,7 @@ export function useFiltersInjection(props: {
    *
    * @public
    */
-  const injectedFilters = inject<Ref<Filter[]> | undefined>('filters');
+  const injectedFilters = inject<Ref<Filter[]> | undefined>('filters', undefined);
 
   /**
    * An array of filters formed by those that are passed through prop or injected.

From b85309ebebbaa42f1fde95442fcc9bec12d1308b Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Tue, 14 May 2024 08:55:47 +0200
Subject: [PATCH 08/11] fix: pr comments

---
 packages/_vue3-migration-test/src/router.ts   |  8 +---
 .../src/x-modules/facets/components/index.ts  |  1 -
 .../facets/components/test-facets.vue         | 36 ++++++++++++----
 .../components/test-filters-injection.vue     | 43 -------------------
 .../src/composables/use-filters-injection.ts  |  4 +-
 .../lists/exclude-filters-with-no-results.vue | 10 ++---
 .../components/lists/filters-search.vue       |  6 +--
 .../components/lists/sorted-filters.vue       |  7 +--
 8 files changed, 37 insertions(+), 78 deletions(-)
 delete mode 100644 packages/_vue3-migration-test/src/x-modules/facets/components/test-filters-injection.vue

diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index 9d21e02df0..b0338e1304 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -14,8 +14,7 @@ import {
   TestScroll,
   TestSortDropdown,
   TestSortList,
-  TestSortPickerList,
-  TestFiltersInjection
+  TestSortPickerList
 } from './';
 
 const routes = [
@@ -93,11 +92,6 @@ const routes = [
     path: '/elements-list',
     name: 'ElementsList',
     component: TestElementsList
-  },
-  {
-    path: '/filters-injection',
-    name: 'FiltersInjection',
-    component: TestFiltersInjection
   }
 ];
 
diff --git a/packages/_vue3-migration-test/src/x-modules/facets/components/index.ts b/packages/_vue3-migration-test/src/x-modules/facets/components/index.ts
index b35b294264..82e5a09c6f 100644
--- a/packages/_vue3-migration-test/src/x-modules/facets/components/index.ts
+++ b/packages/_vue3-migration-test/src/x-modules/facets/components/index.ts
@@ -1,2 +1 @@
-export { default as TestFiltersInjection } from './test-filters-injection.vue';
 export { default as TestFacets } from './test-facets.vue';
diff --git a/packages/_vue3-migration-test/src/x-modules/facets/components/test-facets.vue b/packages/_vue3-migration-test/src/x-modules/facets/components/test-facets.vue
index 3874309a8a..b9f3dffde1 100644
--- a/packages/_vue3-migration-test/src/x-modules/facets/components/test-facets.vue
+++ b/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>
diff --git a/packages/_vue3-migration-test/src/x-modules/facets/components/test-filters-injection.vue b/packages/_vue3-migration-test/src/x-modules/facets/components/test-filters-injection.vue
deleted file mode 100644
index c00f39a59c..0000000000
--- a/packages/_vue3-migration-test/src/x-modules/facets/components/test-filters-injection.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<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>
diff --git a/packages/x-components/src/composables/use-filters-injection.ts b/packages/x-components/src/composables/use-filters-injection.ts
index a581084a4b..c647c5f5fd 100644
--- a/packages/x-components/src/composables/use-filters-injection.ts
+++ b/packages/x-components/src/composables/use-filters-injection.ts
@@ -1,6 +1,6 @@
 import { Filter, HierarchicalFilter, isHierarchicalFilter } from '@empathyco/x-types';
 import { computed, inject, Ref } from 'vue';
-import { isArrayEmpty } from '../utils/index';
+import { isArrayEmpty } from '../utils/array';
 
 /**
  * Composable to share filters injection logic.
@@ -12,7 +12,7 @@ import { isArrayEmpty } from '../utils/index';
  */
 export function useFiltersInjection(props: {
   /** The list of filters to be rendered as slots. */
-  filters?: Filter[] | undefined;
+  filters?: 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.
diff --git a/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue b/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
index 9d2a3af97f..c2e2b1c2fd 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Filter, isBooleanFilter } from '@empathyco/x-types';
-  import { computed, CreateElement, defineComponent, PropType, provide, VNode } from 'vue';
+  import { computed, defineComponent, PropType, provide, h } from 'vue';
   import { facetsXModule } from '../../x-module';
   import { useRegisterXModule } from '../../../../composables/use-register-x-module';
   import { useFiltersInjection } from '../../../../composables/use-filters-injection';
@@ -33,8 +33,7 @@
        * @public
        */
       parentId: {
-        type: String as PropType<Filter['id']>,
-        required: false
+        type: String as PropType<Filter['id']>
       }
     },
     setup(props, { slots }) {
@@ -54,10 +53,7 @@
       });
       provide('filters', filtersWithResults);
 
-      return { filtersWithResults, slots };
-    },
-    render(h: CreateElement): VNode {
-      return this.slots.default?.({ filters: this.filtersWithResults })?.[0] ?? h();
+      return () => (slots.default ? slots.default({ filters: filtersWithResults.value }) : h());
     }
   });
 </script>
diff --git a/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue b/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue
index 5d76855ff9..9800792bfa 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue
@@ -14,7 +14,7 @@
         type="search"
         class="x-filters-search__input x-input"
         data-test="filters-search-input"
-        :aria-label="filtersSearchInputMessage"
+        :aria-label="'search into the filter values'"
       />
     </slot>
     <!--
@@ -73,8 +73,7 @@
       const renderedFilters = useFiltersInjection(props);
 
       let query = ref('');
-      let setQueryDebounced!: DebouncedFunction<[string]>;
-      const filtersSearchInputMessage = 'search into the filter values';
+      let setQueryDebounced: DebouncedFunction<[string]>;
 
       const debounceInMs = computed(() => props.debounceInMs);
 
@@ -135,7 +134,6 @@
       };
 
       return {
-        filtersSearchInputMessage,
         clearQuery,
         setQuery,
         cssClasses,
diff --git a/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue b/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
index de41ff4b64..fede5f165b 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { BooleanFilter, Filter, isBooleanFilter } from '@empathyco/x-types';
-  import { computed, CreateElement, defineComponent, PropType, provide, VNode } from 'vue';
+  import { computed, defineComponent, PropType, provide, h } from 'vue';
   import { isArrayEmpty } from '../../../../utils';
   import { facetsXModule } from '../../x-module';
   import { useRegisterXModule } from '../../../../composables/use-register-x-module';
@@ -54,10 +54,7 @@
       });
       provide('filters', sortedFilters);
 
-      return { sortedFilters, slots };
-    },
-    render(h: CreateElement): VNode {
-      return this.slots.default?.({ filters: this.sortedFilters })?.[0] ?? h();
+      return () => (slots.default ? slots.default({ filters: sortedFilters.value }) : h());
     }
   });
 </script>

From 09ae739302612a5dd4884f24637db9c4fc60b630 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Tue, 14 May 2024 08:56:17 +0200
Subject: [PATCH 09/11] fix: avoid barrel

---
 .../src/x-modules/facets/components/lists/filters-list.vue      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue b/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue
index e728365048..4d145c3116 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue
@@ -27,7 +27,7 @@
   import { Filter } from '@empathyco/x-types';
   import { VueCSSClasses } from '../../../../utils/types';
   import { facetsXModule } from '../../x-module';
-  import { AnimationProp } from '../../../../types/index';
+  import { AnimationProp } from '../../../../types/animation-prop';
   import { useRegisterXModule } from '../../../../composables/use-register-x-module';
   import { useFiltersInjection } from '../../../../composables/use-filters-injection';
 

From b2c342f46f20c3937cf21d8a2ff39dd3e21f613c Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Wed, 15 May 2024 08:39:20 +0200
Subject: [PATCH 10/11] feat: move use-filters-injection file && refactor
 category filter creation

---
 .../src/x-modules/facets/x-module.ts              | 15 +++++----------
 .../__tests__/use-filters-injection.spec.ts       |  2 +-
 packages/x-components/src/composables/index.ts    |  1 -
 .../lists/exclude-filters-with-no-results.vue     |  2 +-
 .../facets/components/lists/filters-list.vue      |  2 +-
 .../facets/components/lists/filters-search.vue    |  2 +-
 .../facets/components/lists/sliced-filters.vue    |  2 +-
 .../facets/components/lists/sorted-filters.vue    |  2 +-
 .../src/x-modules/facets/composables/index.ts     |  1 +
 .../facets}/composables/use-filters-injection.ts  |  4 ++--
 10 files changed, 14 insertions(+), 19 deletions(-)
 rename packages/x-components/src/{ => x-modules/facets}/composables/use-filters-injection.ts (96%)

diff --git a/packages/_vue3-migration-test/src/x-modules/facets/x-module.ts b/packages/_vue3-migration-test/src/x-modules/facets/x-module.ts
index 5128969319..6e2c86a0c9 100644
--- a/packages/_vue3-migration-test/src/x-modules/facets/x-module.ts
+++ b/packages/_vue3-migration-test/src/x-modules/facets/x-module.ts
@@ -17,16 +17,11 @@ const facets: Record<Facet['id'], Facet> = {
     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)
-  ])
+  category: createSimpleFacetStub('category', createFilter =>
+    ['dress', 'floral', 'skirt', 'print', 'midi', 'fitted', 'short', 'long'].map((query, index) =>
+      createFilter(query, false, index)
+    )
+  )
 };
 const filters = arrayToObject(
   Object.values(facets).flatMap(facet => facet.filters),
diff --git a/packages/x-components/src/composables/__tests__/use-filters-injection.spec.ts b/packages/x-components/src/composables/__tests__/use-filters-injection.spec.ts
index 69ae5cb052..65c811728a 100644
--- a/packages/x-components/src/composables/__tests__/use-filters-injection.spec.ts
+++ b/packages/x-components/src/composables/__tests__/use-filters-injection.spec.ts
@@ -5,7 +5,7 @@ import {
   createHierarchicalFilter,
   createSimpleFilter
 } from '../../__stubs__/filters-stubs.factory';
-import { useFiltersInjection } from '../use-filters-injection';
+import { useFiltersInjection } from '../../x-modules/facets/composables/use-filters-injection';
 
 const Provider = defineComponent({
   name: 'Provider',
diff --git a/packages/x-components/src/composables/index.ts b/packages/x-components/src/composables/index.ts
index 861553723d..309944c00e 100644
--- a/packages/x-components/src/composables/index.ts
+++ b/packages/x-components/src/composables/index.ts
@@ -7,4 +7,3 @@ export * from './use-store';
 export * from './use-state';
 export * from './use-getter';
 export * from './use-alias-api';
-export * from './use-filters-injection';
diff --git a/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue b/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
index c2e2b1c2fd..bf29ecb616 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/exclude-filters-with-no-results.vue
@@ -3,7 +3,7 @@
   import { computed, defineComponent, PropType, provide, h } from 'vue';
   import { facetsXModule } from '../../x-module';
   import { useRegisterXModule } from '../../../../composables/use-register-x-module';
-  import { useFiltersInjection } from '../../../../composables/use-filters-injection';
+  import { useFiltersInjection } from '../../composables/use-filters-injection';
 
   /**
    * The `ExcludeFiltersWithNoResults` component filters the provided list of filters, excluding
diff --git a/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue b/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue
index 4d145c3116..52f1dde2f3 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue
@@ -29,7 +29,7 @@
   import { facetsXModule } from '../../x-module';
   import { AnimationProp } from '../../../../types/animation-prop';
   import { useRegisterXModule } from '../../../../composables/use-register-x-module';
-  import { useFiltersInjection } from '../../../../composables/use-filters-injection';
+  import { useFiltersInjection } from '../../composables/use-filters-injection';
 
   /**
    * Renders a list with a list item per each
diff --git a/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue b/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue
index 9800792bfa..7bccb66310 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/filters-search.vue
@@ -33,7 +33,7 @@
   import { DebouncedFunction, VueCSSClasses } from '../../../../utils/types';
   import { facetsXModule } from '../../x-module';
   import { useRegisterXModule } from '../../../../composables/use-register-x-module';
-  import { useFiltersInjection } from '../../../../composables/use-filters-injection';
+  import { useFiltersInjection } from '../../composables/use-filters-injection';
 
   /**
    * Renders the filters sifted with the input query.
diff --git a/packages/x-components/src/x-modules/facets/components/lists/sliced-filters.vue b/packages/x-components/src/x-modules/facets/components/lists/sliced-filters.vue
index 3a46ef6224..e4111595c6 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/sliced-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/sliced-filters.vue
@@ -50,7 +50,7 @@
   import { VueCSSClasses } from '../../../../utils';
   import { facetsXModule } from '../../x-module';
   import { useRegisterXModule } from '../../../../composables/use-register-x-module';
-  import { useFiltersInjection } from '../../../../composables/use-filters-injection';
+  import { useFiltersInjection } from '../../composables/use-filters-injection';
 
   /**
    * Component that slices a list of filters and returns them using the default scoped slot,
diff --git a/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue b/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
index fede5f165b..9886f9f769 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/sorted-filters.vue
@@ -4,7 +4,7 @@
   import { isArrayEmpty } from '../../../../utils';
   import { facetsXModule } from '../../x-module';
   import { useRegisterXModule } from '../../../../composables/use-register-x-module';
-  import { useFiltersInjection } from '../../../../composables/use-filters-injection';
+  import { useFiltersInjection } from '../../composables/use-filters-injection';
 
   /**
    * Component that sorts a list of filters and returns them using the default scoped slot.
diff --git a/packages/x-components/src/x-modules/facets/composables/index.ts b/packages/x-components/src/x-modules/facets/composables/index.ts
index 72b390d4cf..a4e9215039 100644
--- a/packages/x-components/src/x-modules/facets/composables/index.ts
+++ b/packages/x-components/src/x-modules/facets/composables/index.ts
@@ -1 +1,2 @@
 export * from './use-facets';
+export * from './use-filters-injection';
diff --git a/packages/x-components/src/composables/use-filters-injection.ts b/packages/x-components/src/x-modules/facets/composables/use-filters-injection.ts
similarity index 96%
rename from packages/x-components/src/composables/use-filters-injection.ts
rename to packages/x-components/src/x-modules/facets/composables/use-filters-injection.ts
index c647c5f5fd..1c3b539912 100644
--- a/packages/x-components/src/composables/use-filters-injection.ts
+++ b/packages/x-components/src/x-modules/facets/composables/use-filters-injection.ts
@@ -1,6 +1,6 @@
 import { Filter, HierarchicalFilter, isHierarchicalFilter } from '@empathyco/x-types';
 import { computed, inject, Ref } from 'vue';
-import { isArrayEmpty } from '../utils/array';
+import { isArrayEmpty } from '../../../utils/array';
 
 /**
  * Composable to share filters injection logic.
@@ -17,7 +17,7 @@ export function useFiltersInjection(props: {
     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.
    */
-  parentId?: Filter['id'] | undefined;
+  parentId?: Filter['id'];
 }) {
   /**
    * The injected filters array.

From b69d8f6eb4c8b3e7a7b2f91f688a2ecb056b550d Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Wed, 15 May 2024 11:42:54 +0200
Subject: [PATCH 11/11] chore: move use-filters-injection test

---
 .../composables/__tests__/use-filters-injection.spec.ts       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)
 rename packages/x-components/src/{ => x-modules/facets}/composables/__tests__/use-filters-injection.spec.ts (97%)

diff --git a/packages/x-components/src/composables/__tests__/use-filters-injection.spec.ts b/packages/x-components/src/x-modules/facets/composables/__tests__/use-filters-injection.spec.ts
similarity index 97%
rename from packages/x-components/src/composables/__tests__/use-filters-injection.spec.ts
rename to packages/x-components/src/x-modules/facets/composables/__tests__/use-filters-injection.spec.ts
index 65c811728a..b92e0464e6 100644
--- a/packages/x-components/src/composables/__tests__/use-filters-injection.spec.ts
+++ b/packages/x-components/src/x-modules/facets/composables/__tests__/use-filters-injection.spec.ts
@@ -4,8 +4,8 @@ import { mount, Wrapper } from '@vue/test-utils';
 import {
   createHierarchicalFilter,
   createSimpleFilter
-} from '../../__stubs__/filters-stubs.factory';
-import { useFiltersInjection } from '../../x-modules/facets/composables/use-filters-injection';
+} from '../../../../__stubs__/filters-stubs.factory';
+import { useFiltersInjection } from '../use-filters-injection';
 
 const Provider = defineComponent({
   name: 'Provider',