Attribute Filter

The Attribute Filter component provides a user interface for filtering items based on various attributes. By default, it utilizes the chip component as the trigger element and the list component to display filter options, but it can be customized to use other components as needed.

Basic Usage

Status

0

<template>
  <SprAttributeFilter
    id="attribute_filter1"
    :filter-label="'Status'"
    width="70px"
    popper-width="300px"
    placement="bottom-start"
    :filter-menu-list="filterList"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const filterList = ref([
  { text: 'Approved', value: 'Approved' },
  { text: 'Completed', value: 'Completed' },
  { text: 'In Progress', value: 'In Progress' },
  { text: 'Pending', value: 'Pending' },
  { text: 'Rejected', value: 'Rejected' },
  { text: 'On Hold', value: 'On Hold' },
]);
</script>

Multi Select

Status

0

<template>
  <SprAttributeFilter
    id="attribute_filter5"
    :filter-label="'Status'"
    width="70px"
    popper-width="300px"
    placement="bottom-start"
    :filter-menu-list="filterList"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const filterList = ref([
  { text: 'Approved', value: 'Approved' },
  { text: 'Completed', value: 'Completed' },
  { text: 'In Progress', value: 'In Progress' },
  { text: 'Pending', value: 'Pending' },
  { text: 'Rejected', value: 'Rejected' },
  { text: 'On Hold', value: 'On Hold' },
]);
</script>

Attribute Filter Trigger

By default, Attribute Filter is triggered by the chip component. You can change the trigger component by providing a default slot.

<template>
  <SprAttributeFilter
    id="attribute_filter2"
    :filter-label="'Status'"
    width="70px"
    popper-width="300px"
    placement="bottom-start"
    :filter-menu-list="filterList"
  >
    <SprButton tone="success"> Status </SprButton>
  </SprAttributeFilter>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const filterList = ref([
  { text: 'Approved', value: 'Approved' },
  { text: 'Completed', value: 'Completed' },
  { text: 'In Progress', value: 'In Progress' },
  { text: 'Pending', value: 'Pending' },
  { text: 'Rejected', value: 'Rejected' },
  { text: 'On Hold', value: 'On Hold' },
]);
</script>

Search

To render a search input inside the Attribute Filter popper, set the searchable prop to true. You can also bind a model to the search input using the v-model:search directive.

INFO

For API searching, disable local searching by setting the disableLocalSearch prop to true.

Status w/ Local Search

0

Status w/o Local Search

0

<template>
  <div class="spr-flex spr-items-center spr-gap-2">
    <SprAttributeFilter
      id="attribute_filter3"
      :filter-label="'Status w/ Local Search'"
      width="180px"
      v-model:search="searchString1"
      popper-width="300px"
      placement="bottom-start"
      :searchable="true"
      :filter-menu-list="filterList"
    />

    <SprAttributeFilter
      id="attribute_filter4"
      :filter-label="'Status w/o Local Search'"
      width="180px"
      popper-width="300px"
      placement="bottom-start"
      :searchable="true"
      :disable-local-search="true"
      :filter-menu-list="filterList"
      @update:search="handleSearch"
    />
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';

const searchString1 = ref('');
const searchString2 = ref('');

const filterList = ref([
  { text: 'Approved', value: 'Approved' },
  { text: 'Completed', value: 'Completed' },
  { text: 'In Progress', value: 'In Progress' },
  { text: 'Pending', value: 'Pending' },
  { text: 'Rejected', value: 'Rejected' },
  { text: 'On Hold', value: 'On Hold' },
]);

const handleSearch = (search: string) => {
  //do something with search term
};
</script>

API Reference

Props

Name	Description	Type	Default
id	Unique identifier for the component	string	'attribute_filter'
filterLabel	Label displayed on the filter trigger	string	'Filter'
headerLabel	Label displayed on the filter popper header	string	'Add Filter'
disabled	When true, disables the chip component and the filter dropdown from being opened	boolean	false
multiselect	Enables multiple selection of filter options	boolean	false
filterMenuList	List of filter options to display in the dropdown	{text: string, value: string}[] | string[]	[]
searchable	Enable to render a search input within the filter dropdown	boolean	false
disableLocalSearch	When true, disables the local search functionality within the filter dropdown	boolean	false
showSelectedFilterCount	When true, displays a badge in the chip component trigger indicating the number of selected filters	boolean	true
selectedFilterCount	Set the text to display in the badge indicating the number of selected filters. If not provided and the no list prop is false, it will default to the length of the selected filters.	string	undefined
badgeVariant	Variant style for the badge displayed on the chip component trigger	'brand' | 'information' | 'danger' | 'disabled'	'danger'
noList	When true, will not display the filter list. To be used if body slot is provided.	boolean	false
clearable	When true, will render an X icon in the default chip trigger to clear selected filters or if no list, will trigger the onClearFilter event.	boolean	false

Dropdown Specific Props

Name	Description	Type	Default
placement	Controls the position of the filter dropdown relative to the trigger	'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'	'bottom'
wrapper-position	CSS position value for the filter dropdown	string	'relative'
width	Width of the filter wrapper (including the trigger element)	string	'100%'
popper-width	Width of the filter dropdown that appears when triggered	string	'100%'
popper-inner-width	Width of the inner content area of the filter dropdown	string	'unset'
popper-strategy	Positioning strategy for the filter dropdown, especially important in modals	'absolute' | 'fixed'	'absolute'
triggers	Array of events that will trigger the filter dropdown to open	'click' | 'hover' | 'focus' | 'touch'[]	[]
popper-triggers	Array of events that will trigger the filter dropdown menu (popper element) to open	'click' | 'hover' | 'focus' | 'touch'[]	[]
auto-hide	When true, automatically hides the filter dropdown when clicking outside it	boolean	true

Events

Name	Description	Parameters
onSaveFilter	Emitted when clicking the save button in the default footer	(savedFilters: MenuListType[])
onOpenFilter	Emitted when the filter dropdown is shown	-
onCloseFilter	Emitted when the filter dropdown is closed	-
onSelectFilter	Emitted when selecting a filter option from the dropdown	(selectedFilters: MenuListType[])
infiniteScrollTrigger	Emitted when the user scrolls to the bottom of the filter dropdown	-
@update:search	Emitted when the search input value changes	(searchString: string)
onClearFilter	Emitted when the clear action is triggered to reset selected filters	-

Slots

Name	Description
default	Slot for the trigger of the filter dropdown. Defaults to the chip component
header	Slot for the header inside the filter dropdown
actions	Slot for additional actions inside the filter dropdown. Slotted between the header (search container if searchable) and the body
body	Slot for the main content. Defaults to the list component.
footer	Slot for the footer inside the filter dropdown. Defaults to a cancel and save button