fix: pr comments

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
   }
 ];
 

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';

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/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.

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>

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,

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>