WeDtSelectFilter

A compact and intuitive component for selecting statuses through a select. It supports single and multiple selection, search, raw value emission, and direct integration with WeDataTable filters.

Selected items appear as chips in the activator area. Multiple selection is enabled by default and can be switched to single selection from within the component.

<template>
  <WeDtSelectFilter
    v-model="filters.status"
    :items="statusItems"
    label="Status"
  />
</template>

<script setup>
const filters = ref({
  status: null,
})

const statusItems = [
  { text: 'Active', value: 'active', color: 'success' },
  { text: 'Warning', value: 'warning', color: 'warning' },
  { text: 'Error', value: 'error', color: 'error' },
]
</script>

Mode

The component can work in two different modes:

1. Structured filter mode (default)

Emits an object like:

{
  operator: 'in',
  value: ['active', 'draft']
}

If a single item is selected in single-selection mode:

{
  operator: 'in',
  value: ['active']
}

2. Raw value mode

By enabling emitRawValue = true, it emits only the value (value) without the filter object.

['active', 'draft']

Props

Prop	Type	Default	Description
items	Array	StatusItem[]	List of selectable options
label	String	null	Label shown in the activator and header
maxChips	Number	2	Maximum number of chips displayed before showing a +N counter
emitRawValue	Boolean	false	When true, v-model returns only raw values
location	String	'bottom end'	Position of the dropdown menu
hideSearch	Boolean	false	Hides the search input when enabled

NB: StatusItem[] contains the following fields:

• title: label displayed for the item
• text: fallback label shown when title is missing
• value: associated value returned by the filter
• color (optional) chip color in both menu and activator area.