ClearFilters

Renders a simple button, emitting the needed events when clicked.

Props

Name	Description	Type	Default
facetsIds	Array of facets ids used to get the selected filters for those facets.	Array<Facet['id']>
alwaysVisible	Flag to render the component even if there are no filters selected.	boolean

Slots

Name	Description	Bindings (name - type - description)
default

Events

A list of events that the component will emit:

• UserClickedClearAllFilters (opens new window): 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 (opens new window): 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

<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.

<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.

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