SelectedFiltersList

This component renders a list of selected filters from every facet, or from the facet ids passed as property. It uses the SelectedFilters component (state).

It provides two slots: a scoped one which name is the filter facet id; and a default one. Both exposes the filter and renders the filter label by default.

The property "alwaysVisible" handles if the component is rendered if no filters are selected.

Props

Name	Description	Type	Default
facetsIds	Array of facets ids used to get the selected filters for those facets.	Array
alwaysVisible	Flag to render the component even if there are no filters selected.	boolean	false
animation	Animation component that will be used to animate the selected filters list.	union	'ul'

Slots

Name	Description	Bindings (name - type - description)
slotName	Custom filter rendering. Dynamic slot defined in the template with the filter	filter Filter - Filter to render.
default	Default filter rendering. It renders the filter label by default.	filter Filter - Filter to render.

Example

This component renders a list of selected filters from every facet, or from the facets which facets ids are passed as property. It uses the SelectedFilters component (state).

It provides two slots: a scoped one which name is the filter facet id; and a default one. Both exposes the filter and renders the filter label by default.

The property "alwaysVisible" handles if the component is rendered if no filters are selected.

Default usage

<template>
  <SelectedFiltersList />
</template>
<script>
  import { SelectedFiltersList } from '@empathyco/x-components/facets';
  export default {
    components: {
      SelectedFiltersList
    }
  };
</script>

Customized usage

<template>
  <SelectedFiltersList #default="{ filter }">Default: {{ filter.label }}</SelectedFiltersList>
</template>
<script>
  import { SelectedFilters } from '@empathyco/x-components/facets';
  export default {
    components: {
      SelectedFilters
    }
  };
</script>

<template>
  <SelectedFiltersList>
    <template #default="{ filter }">Default: {{ filter.label }}</template>
    <template #brand_facet="{ filter }">Brand: {{ filter.label }}</template>
    <template #age_facet="{ filter }">Age: {{ filter.label }}</template>
    <template #price_facet="{ filter }">Price: {{ filter.label }}</template>
  </SelectedFiltersList>
</template>
<script>
  import { SelectedFilters } from '@empathyco/x-components/facets';
  export default {
    components: {
      SelectedFilters
    }
  };
</script>

Always visible

If "alwaysVisible" is true, the component is rendered no matter if there are some filter selected. If "alwaysVisible" is false (default), the component is rendered if there are some filter selected.

<SelectedFiltersList :alwaysVisible="true" />

Output:

<div class="x-selected-filters">
  <ul class="x-selected-filters-list" data-test="selected-filters-list"></ul>
</div>

Providing an array of facet ids

In this example, the selected filters computed are the ones that match the facet ids passed as properties.

<SelectedFilters :facetsIds="['brand_facet', 'gender_facet']" />