Components

FilterBar

A component used to compose, edit and display filter criteria.

Usage

Loading preview...

<template>
  <MeFilterBar
    v-model="criteria"
    :fields="[
      { key: 'string', label: 'String', type: 'string' },
      { key: 'date', label: 'Date', type: 'date' },
    ]"
    class="w-full"
  />
</template>

<script setup>
const criteria = ref([])
</script>

Fields

The required fields prop defines the available fields from which filters can be composed.

<template>
  <MeFilterBar
    :fields="[
      { key: 'string', label: 'String', type: 'string' },
      { key: 'date', label: 'Date', type: 'date' },
    ]"
    class="w-full"
  />
</template>

Criteria

The modelValue prop can be bound using v-model. It represents the current criteria as an array of FilterBarCriterion. See MeCriterionInput for more info.

type FilterBarCriterion = {
  criterion?: MeCriterion
  deletable?: boolean
  disabled?: boolean
  fields?: MeCriterionField[]
  hideField?: boolean
  hideOperator?: boolean
  operators?: MeOperatorKeysValues[]
}

type FilterBarModel = FilterBarCriterion[]

<template>
  <MeFilterBar
    v-model="criteria"
    :fields="[
      { key: 'string', label: 'String', type: 'string' },
      { key: 'date', label: 'Date', type: 'date' }
    ]"
    class="w-full"
  />
</template>

<script setup lang="ts">
const criteria = ref([
  { criterion: {
    field: { key: 'string', label: 'String', type: 'string' },
    operatorKey: 'equal',
    value: 'Value'
  } }
])
</script>

Disabled action buttons

The props disabledAdd, disabledSave, disabledClear disable the three action buttons: add, save, and clear.

<template>
  <MeFilterBar
    :fields="[
      { key: 'string', label: 'String', type: 'string' },
      { key: 'date', label: 'Date', type: 'date' }
    ]"
    :model-value="[{
      criterion: {
        field: { key: 'string', label: 'String', type: 'string' },
        operatorKey: 'equal',
        value: 'Value'
      }
    }]"
    disabled-add
    disabled-save
    disabled-clear
    class="w-full"
  />
</template>

Hidden action buttons

The props hideAdd, hideSave, hideClear hide the three action buttons: add, save, and clear.

<template>
  <MeFilterBar
    :fields="[
      { key: 'string', label: 'String', type: 'string' },
      { key: 'date', label: 'Date', type: 'date' }
    ]"
    :model-value="[{
      criterion: {
        field: { key: 'string', label: 'String', type: 'string' },
        operatorKey: 'equal',
        value: 'Value'
      }
    }]"
    hide-add
    hide-save
    hide-clear
    class="w-full"
  />
</template>

Slots

Custom content can be inserted using the leading and trailing slots.

<template>
  <MeFilterBar
    :fields="[
      { key: 'string', label: 'String', type: 'string' },
      { key: 'date', label: 'Date', type: 'date' }
    ]"
    class="w-full"
  >
    <template #leading>
      <UButton
        color="neutral"
        variant="outline"
        :ui="{ base: 'rounded-sm' }"
      >
        Leading
      </UButton>
    </template>

    <template #trailing>
      <UButton
        color="neutral"
        variant="outline"
        :ui="{ base: 'rounded-sm' }"
      >
        Trailing
      </UButton>
    </template>
  </MeFilterBar>
</template>

API

Props

Prop	Default	Type
`modelValue`	`[]`	`FilterBarCriterion[]` Criteria do be displayed.
`fields` (required)		`MeCriterionField[]` Available filter fields. See MeCriterionInput for more info.
`disabledAdd`	`false`	`Boolean` Disables add button.
`disabledClear`	`false`	`Boolean` Disables clear button.
`disabledSave`	`false`	`Boolean` Disables save button.
`hideAdd`	`false`	`Boolean` Hides add button.
`hideClear`	`false`	`Boolean` Hides clear button.
`hideSave`	`false`	`Boolean` Hides save button.

Emits

Event	Type
`addCriterion`	`FilterBarCriterion`
`removeCriterion`	`FilterBarCriterion`
`updateCriterion`	`FilterBarCriterion` Debounced by 500ms when the value field is the one being updated.
`saveCriteria`	`FilterBarModel`
`clearCriteria`	`[]`

Slots

Slot	Type
`leading`	`{}`
`trailing`	`{}`

DualList

A double list used to pick items from one list to another

Forehead

A document header component used to structure and emphasize important information.