FacetsProvider

This component allows to provide facets by prop, to add them to the state of the Facets X-Module. These facets will be added to the Facets X-Module state together with the facets emitted by the Search X-Module through the SearchXEvents.FacetsChanged event.

Props

Name	Description	Type	Default
groupId	An facet group identifier to distinguish the provided facets from other facets like the Search X-Module facets.	GroupId	'provided-facets'
facets	The facets to provide to the Facets X-Module state. They have to include the @empathyco/x-types#Filter.	Facet[]

Events

A list of events that the component will emit:

• UserChangedSelectedFilters (opens new window): the event is emitted after the user performed an action that changed the selected filters. The payload is the new list of selected filters.
• FacetsGroupProvided (opens new window): the event is emitted after updating the facets prop with a new list of facets. The payload contains a Facets Group with the facets and the group id.

Example

This component allows to provide facets by prop, to add them to the state of the Facets X-Module. These facets will be added to the Facets X-Module state together with the facets emitted by the Search X-Module through the SearchXEvents.FacetsChanged event.

<template>
  <FacetsProvider :facets="myFacets" />
</template>
<script setup>
import { FacetsProvider } from '@empathyco/x-components/facets'
import { ref } from 'vue'
const myFacets = ref([
  {
    modelName: 'SimpleFacet',
    id: 'color-facet',
    label: 'Color',
    filters: [
      {
        modelName: 'SimpleFilter',
        id: 'color:red',
        facetId: 'color-facet',
        label: 'Red',
        selected: false,
        value: 'color:red',
        totalResults: 10,
      },
      {
        modelName: 'SimpleFilter',
        id: 'color:blue',
        facetId: 'color-facet',
        label: 'Blue',
        selected: false,
        value: 'color:blue',
        totalResults: 10,
      },
    ],
  },
])
</script>