1 min read

AllFilter

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:

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

<AllFilter :facet="facet" />

Customizing its content

<AllFilter v-slot="{ facet }" :facet="facet">
  Select all {{ facet.label }}
</AllFilter>

Basic example within facets

<Facets>
  <template #default="{ facet }">
    <AllFilter :facet="facet" />
    <Filters v-slot="{ filter }" :filters="facet.filters">
      <SimpleFilter :filter="filter" />
    </Filters>
  </template>
</Facets>

Custom example within facets

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