Filters

Make it easy, make it filter.

Example

Props

🕹️ standard props
filters
Filter[]
Array of filters applied or available.
[]
lang
'it' | 'en'
Language of the component.
'en'
multiEditTabs
Tab[]
Optional tabs for multi-edit mode.
addFilterLabel
string
Label shown on the button to add filters.
'Filters'
cancelFilterLabel
string
Label for cancel filter action.
'Cancel'
applyFilterLabel
string
Label for apply filter action.
'Apply filter'
showActiveFilters
boolean
Whether to show currently active filters.
true
filterTitleLabel
string
Title shown in the filter dialog.
'Filter by'
dateLocale
Locale
Locale object for date formatting.
'en'
betweenSeparator
string
Text used between values in a between filter.
'and'
trueString
string
String used to represent a `true` boolean.
'true'
falseString
string
String used to represent a `false` boolean.
'false'
editFilterMode
'one-edit' | 'multi-edit'
How filter editing behaves.
'one-edit'
labelsMapper
LabelMapper
Maps operators to display labels.
Based on language
drawerSpace
string
Drawer space on mobile screen size
20rem
🎨 style props
--filters-button-cancel-background-color
color
Background color of the cancel button.
rgb(var(--global-color-background-300, .5))
--filters-button-cancel-color
color
Text color of the cancel button.
rgb(var(--global-color-contrast-900))
--filters-wrapper-width
size
Width of the filter wrapper container.
auto
--filters-button-height
size
Height of the filter button.
28px
--filters-button-border-radius
size
Border radius of the filter button.
4px
--filters-card-background-color
color
Height of the filter button.
rgb(var(--global-color-background-100))
--filters-card-border
border
Height of the filter button.
1px solid rgb(var(--global-color-background-300))
--filters-card-border-radius
size
Height of the filter button.
8px
--filters-card-padding
size
Height of the filter button.
12px
--filters-card-box-shadow
box shadow
Height of the filter button.
0 0 8px rgba(0, 0, 0, 0.06)
--filters-card-hover-box-shadow
box shadow
Height of the filter button.
0 0 10px rgba(0, 0, 0, 0.10)
--filters-card-hover-transition
transition
Height of the filter button.
box-shadow 0.2s ease
--filters-card-title-font-weight
weight
Height of the filter button.
600
--filters-card-title-font-size
size
Height of the filter button.
15px
--filters-card-title-color
color
Height of the filter button.
rgb(var(--global-color-contrast-800))
--filters-card-title-margin-bottom
size
Height of the filter button.
8px

Slots

customSnippet

Custom UI for editing a single filter.

Available variables:

Name	Type	Description
filter	Filter | undefined	Current filter being edited.
updateFunction	function	Updates the current filter.
mAndDown	boolean	True if screen size is medium or smaller.

customChipSnippet

Custom rendering of individual filter chip.

Available variables:

Name	Type	Description
filter	Filter	The filter to render.

appendSnippet
Slot for appending additional elements to the filter component.
contentSnippet

Custom content for the entire filter area.

Default content:

<div class="multi-filters-container" style:grid-template-columns={mAndDown ? '1fr' : '1fr 1fr'}>
  {#each filters as filter, i}
    <div class="filter" class:wide={filter.type === 'select' || filter.type === 'custom'}>
      <div class="input">
        {#if !filter.advanced && filter.type !== 'custom'}
          <div class="label">
            {filter.label}
          </div>
        {/if}
        <div class="field">
          <FilterEditor
            bind:filter={filters[i]}
            {lang}
            {labelsMapper}
            editFilterMode="multi-edit"
            bind:tmpFilter={tmpFilters[filter.name]}
            mobile={mAndDown}
          >
            {#snippet customSnippet({ filter })}
              {@render customInternalSnippet?.({ filter, updateFunction, mAndDown })}
            {/snippet}
          </FilterEditor>
        </div>
      </div>
    </div>
  {/each}
</div>
      

Available variables:

Name	Type	Description
mAndDown	boolean	True if screen size is medium or smaller.
updateMultiFilterValues	function	Updates the values of multiple filters.
handleRemoveAllFilters	function	Removes all filters.
filters	Filter[]	Array of current filters.

Events

onaddFilterClick
Triggered when the add filter button is clicked.
onapplyFilter
Triggered when filters are applied.
onremoveAllFilters
Triggered when all filters are removed.
onremoveFilter

Triggered when an individual filter is removed.

Attribute	Type	Description
filter	Filter	The filter that was removed.

onclick
DOM click event on component root.
onkeydown
DOM keydown event on component root.