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

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