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:
UserClickedAllFilter
(opens new window): the event is emitted after the user clicks the button. The event payload is the id of the facet that thisAllFilter
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>