Appearance

Filters ​

The FilterChip, FilterDropdown & FilterSelect components are meant to be composed together to filter a list of items. They are intended to be used within DataViewFilters.

Brands

Select All ​

The can-select-all boolean prop renders an additional "All" option for selecting all options.

Brands

Filter Dropdowns ​

FilterDropdown will emit an apply event. Downstream apps will be responsibile for keep track of filter values, and updating the active filter count. Due to this responsibility, it is recommended to use a form state ref that is mapped to your filter form fields.

vue
<script setup lang="ts">
import { ref, computed } from 'vue';
import FilterDropdown from '../../src/components/FilterDropdown/FilterDropdown.vue';
import Input from '../../src/components/Input/Input.vue';

const filterState = ref({
  input: undefined,
  input2: undefined,
  input3: undefined,
  input4: undefined,
});

const activeFilterCount = ref({
  category1: 0,
  category2: 0
});

function setActiveFilterCount() {
  activeFilterCount.value.category1 = [filterState.value.input, filterState.value.input2].filter((input) => input !== undefined && input !== '').length;
  activeFilterCount.value.category2 = [filterState.value.input3, filterState.value.input4].filter((input) => input !== undefined && input !== '').length;
}

function filterResults() {
  setActiveFilterCount();
  console.log(filterState.value)
  // use filterState to build out your payload
}
</script>
<template>
  <FilterDropdown
    label="Category"
    :active-filter-count="activeFilterCount"
    @apply="filterResults"
  >
    <Input v-model="filterState.input" />
  </FilterDropdown>
</template>

The height of the dropdown is limited to 400px. If the content inside is greater than 400px, then a scrollbar will appear.

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.