FiltersSearch

Renders the filters sifted with the input query.

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
debounceInMs	The debounce time for applying the filter sifting.	number	200

Slots

Name	Description	Bindings (name - type - description)
search	Search content. It is the content which triggers the filters sifting.	query string - The query to search in filters. setQuery Function - The function to set the query. The query is passed as clearQuery Function - The function to clear the query.
default	(Required) Sifted filters content.	siftedFilters Filter[] - Sifted filters data.

Examples

It renders an input and a list of filters passed as prop or being injected. The list of filters can be sifted with the query typed in the input. This component has also a debounce prop to set the time in milliseconds to apply the filters search. Moreover, it has two scoped slots. The first one for customize the search triggering with three slot props; the query, a function to set the query by sifting and a third one for cleaning the query. The second scoped slot is required and it is for displaying the list of filters sifted. It has a slot prop with these filters sifted.

Important

The component has two ways of receive the filters list, it can be injected by another component or be send it as a prop. If the component doesnt have a parent component that receive and exposed a filters list to their children, it is mandatory to send it as prop.

Basic usage

Using default and required slot:

<FiltersSearch :filters="filters" v-slot="{ siftedFilters }">
  <ul v-for="filter in siftedFilters">
    <li :key="filter.id">{{ filter.label }}</li>
  </ul>
</FiltersSearch>

Setting debounce time:

<FiltersSearch :filters="filters" :debounceInMs="500" v-slot="{ siftedFilters }">
  <ul v-for="filter in siftedFilters">
    <li :key="filter.id">{{ filter.label }}</li>
  </ul>
</FiltersSearch>

Replacing search triggering:

<FiltersSearch :filters="filters">
  <template #search="{ query, setQuery, clearQuery }">
    <input
      @input="setQuery($event.target.value)"
      :value="query"
      class="x-input x-filters-search__input"
      :aria-label="filtersSearchInputMessage"/>
    <button @click="clearQuery">X</button>
  </template>
  <template #default="{ siftedFilters }">
    <ul v-for="filter in siftedFilters">
      <li :key="filter.id">{{ filter.label }}</li>
    </ul>
  </template>
</FiltersSearch>

Using injection: It can receive the filters list by injection. It only works if it has a parent component that receives and exposes the filters list. Using the injection, It is not necessary to send the prop to the child components, it has to be send it in the parent component, the rest of components will inject this list.

<Facets v-slot="{ facet }">
  <SlicedFilters :filters="facet.filters" :max="8">
    <FiltersSearch >
        <Filters v-slot="{ filter }">
          <SimpleFilter :filter="filter" data-test="brand-filter" />
        </Filters>
    </FiltersSearch>
  </SlicedFilters>
</Facets>