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
clearable	Boolean	true	Allow clearing the input
loading	Boolean	false	Displays loading animation in the search field and at the bottom of the dropdown
multiple	Boolean	true	Enables multiple selection
mandatory	Boolean	false	Prevents deselecting the last selected item if true
truncateChipText	Boolean	true	Truncates chip content when too long
width	String | Number	400px	Width of the dropdown menu
onIntersectLast	Function	undefined	Callback when the last virtual scroll item is intersected

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.
• icon (optional): icon displayed in menu or chip

Slots

Name	Props	Description
item-title	{ item }	Custom renderer for the item label inside the dropdown