@empathyco/x-components
Version:
Empathy X Components
76 lines (61 loc) • 2.76 kB
Markdown
---
title: 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.
| Name | Description | Type | Default |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------- | -------------------- | ------------------------------ |
| <code>groupId</code> | An facet group identifier to distinguish the provided facets from other facets like the<br />`Search X-Module` facets. | <code>GroupId</code> | <code>'provided-facets'</code> |
| <code>facets</code> | The facets to provide to the `Facets X-Module` state. They have to include the<br />@empathyco/x-types
A list of events that the component will emit:
- [`UserChangedSelectedFilters`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
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`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
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.
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.
```vue
<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>
```