Version:

Install ​

shell
npm i @mate-vue/filter-panel

Import ​

vue
<script setup>
import { MateFilterPanel } from '@mate-vue/filter-panel';
</script>

Variants ​

Micro ​

vue
<MateFilterPanel 
    header-hidden 
    @search-click="e => search()" 
    @reset-click="e => resetValues()">
    <MateTextField label="Username" :value="username"></MateTextField>
    <MateTextField label="First name" :value="firstName"></MateTextField>
    <MateDatePicker label="Date of birth" :value="dateOfBirth"></MateDatePicker>
</MateFilterPanel>

Minimal ​

vue
<MateFilterPanel
    @search-click="e => search()" 
    @reset-click="e => resetValues()">
    <span slot="header-collapsed">Active search criteria {{ searchCriteriaCount }}</span>
    <MateTextField label="Username" :value="username"></MateTextField>
    <MateTextField label="First name" :value="firstName"></MateTextField>
    <MateDatePicker label="Date of birth" :value="dateOfBirth"></MateDatePicker>
</MateFilterPanel>

Standard ​

vue
<MateFilterPanel
    @search-click="e => search()"
    @reset-click="e => resetValues()">
  <span slot="header-collapsed">Active search criteria {{ searchCriteriaCount }}</span>
  <MateMenuBar slot="header-expanded"></MateMenuBar>
  <template #default v-for="(field, index) in fields" :key="index">
    {{ field.element.label }}
    <MateTextField v-if="field.element === username" v-model:label="Username" :value="field.value"></MateTextField>
  </template>
</MateFilterPanel>