FiltersList

Renders a list with a list item per each @empathyco/x-types#BooleanFilter in the filters prop array. Each list item has a scoped slot, passing the filter as slot prop.

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
animation	Animation component that will be used to animate the base filters.	union	'ul'

Slots

Name	Description	Bindings (name - type - description)
default	(Required) Filter content	filter Filter - Search-types filter data.

Examples

Renders a list with a list item per each filter in the filters prop array. Each list item has a scoped slot, passing the filter as slot prop.

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 slot:

<FiltersList :filters="filters">
  <template #default="{ filter }">
    <p>{{ filter.label }}</p>
  </template>
</FiltersList>

Using default slot abbreviated syntax:

<FiltersList :filters="filters" v-slot="{ filter }">
  <p>{{ filter.label }}</p>
</FiltersList>

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.

<SlicedFilters :filters="filters">
  <FiltersList v-slot="{ filter }">
    <p>{{ filter.label }}</p>
  </FiltersList>
</SlicedFilters>