AllFilter

This component receives a required facet with @empathyco/x-types#BooleanFilter as prop and renders a button, which on clicked emits the FacetsXEvents.UserClickedAllFilter event. By default the rendered button displays a message with the facet label but this content is customizable through the default slot.

Props

Name	Description	Type	Default
facet	The facet data.	Facet

Slots

Name	Description	Bindings (name - type - description)
default	The content to render inside the button

Events

A list of events that the component will emit:

• UserClickedAllFilter (opens new window): the event is emitted after the user clicks the button. The event payload is the id of the facet that this AllFilter component corresponds to.

Examples

This component receives a required facet as prop and renders a button, which on clicked emits the UserClickedAllFilter event. By default the rendered button displays a message with the facet label but this content is customizable through the default slot.

Basic usage

<template>
  <AllFilter :facet="facet" />
</template>
<script setup>
import { AllFilter } from '@empathyco/x-components/facets'
</script>

Customizing its content

<template>
  <AllFilter v-slot="{ facet }" :facet="facet"> Select all {{ facet.label }} </AllFilter>
</template>
<script setup>
import { AllFilter } from '@empathyco/x-components/facets'
</script>

Basic example within facets

<template>
  <Facets>
    <template #default="{ facet }">
      <AllFilter :facet="facet" />
      <Filters v-slot="{ filter }" :filters="facet.filters">
        <SimpleFilter :filter="filter" />
      </Filters>
    </template>
  </Facets>
</template>
<script setup>
import { Facets, Filters, AllFilter, SimpleFilter } from '@empathyco/x-components/facets'
</script>

Custom example within facets

<template>
  <Facets>
    <template #default="{ facet }">
      <AllFilter v-slot="{ facet }" :facet="facet"> Select all {{ facet.label }} </AllFilter>
      <Filters v-slot="{ filter }" :filters="facet.filters">
        <SimpleFilter :filter="filter" />
      </Filters>
    </template>
  </Facets>
</template>
<script setup>
import { Facets, Filters, AllFilter, SimpleFilter } from '@empathyco/x-components/facets'
</script>