SortedFilters

Component that sorts a list of filters and returns them using the default scoped slot.

Props

Name	Description	Type	Default
filters	The list of filters to be rendered as slots.	Array
parentId	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.	TSIndexedAccessType

Example

The sorted filters component takes a list of filters and returns this new filters list sorted by the selected filter property.

Remarks

• The component can receive the filters list by property or using the XInjection feature.
• It also provides the resultant list bound in the default slot or with the XProvide feature.

Both XInjection and XProvide features are from the extended FiltersInjectionMixin. You don't have to use XInjection and XProvide together, e.g. you can use pass the filters using a prop and then returns the result with XProvide.

Basic usage

Using props and binding the result

<template>
  <Facets v-slot="{ facet }">
    <SortedFilters :filters="facet.filters" #default="{ sortedFilters }">
      <Filters :items="sortedFilters" v-slot="{ filter }">
        <SimpleFilter :filter="filter" />
      </Filters>
    </SortedFilters>
  </Facets>
</template>
<script>
  import { Facets, SimpleFilter, Filters } from '@empathyco/x-components';
  export default {
    components: {
      Facets,
      Filters,
      SimpleFilter
    }
  };
</script>

Using XInject and XProvide

<Facets v-slot="{ facet }">
  <FiltersSearch :filters="facet.filters">
    <SortedFilters>
      <Filters v-slot="{ filter }">
        <SimpleFilter :filter="filter"/>
      </Filters>
    </SortedFilters>
  </FiltersSearch>
</Facets>
<script>
  import { Facets, FiltersSearch, SimpleFilter, Filters } from '@empathyco/x-components';
  export default {
    components: {
      Facets,
      FiltersSearch,
      Filters,
      SimpleFilter
    }
  };
</script>