@empathyco/x-components
Version:
Empathy X Components
88 lines (63 loc) • 2.67 kB
Markdown
---
title: ClearFilters
---
# ClearFilters
Renders a simple button, emitting the needed events when clicked.
## Props
| Name | Description | Type | Default |
| -------------------------- | ---------------------------------------------------------------------- | ------------------------------- | ------------- |
| <code>facetsIds</code> | Array of facets ids used to get the selected filters for those facets. | <code>Array<Facet['id']></code> | <code></code> |
| <code>alwaysVisible</code> | Flag to render the component even if there are no filters selected. | <code>boolean</code> | <code></code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | ----------- | ----------------------------------------- |
| <code>default</code> | | |
## Events
A list of events that the component will emit:
- [`UserClickedClearAllFilters`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
the event is emitted after the user clicks the button to clear a certain facets filter. The event
payload is the id of the facets that are going to be cleared.
- [`UserClickedClearAllFilters`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
the event is emitted after the user clicks the button. The event payload is undefined.
## Examples
This component renders a button, which on clicked emits the `UserClickedClearAllFilters` or
`UserClickedClearAllFilters` event.
### Basic usage
```vue
<template>
<ClearFilters />
</template>
<script setup>
import { ClearFilters } from "@empathyco/x-components/facets";
</script>
```
### Customizing its contents
In this example, show the custom message in button.
```vue
<template>
<ClearFilters v-slot="{ selectedFilters }">
Delete {{ selectedFilters.length }} selected
</ClearFilters>
</template>
<script setup>
import { ClearFilters } from "@empathyco/x-components/facets";
</script>
```
In this example, show the custom message in button with always visible a true and list of facets
ids.
```vue
<template>
<ClearFilters
v-slot="{ selectedFilters }"
:alwaysVisible="true"
:facetsIds="facetsIds"
>
Delete {{ selectedFilters.length }} selected
</ClearFilters>
</template>
<script setup>
import { ClearFilters } from "@empathyco/x-components/facets";
import { ref } from "vue";
const facetsIds = ref(["brand_facet", "gender_facet"]);
</script>
```