WeDtClustersFilter

A compact and intuitive component for selecting statuses through clickable cards. It supports single or multiple selection, custom colors, raw mode, and direct integration with WeDataTable filters.

Usage

<template>
  <WeStatusCardFilter
    v-model="filters.status"
    :items="statusItems"
  />
</template>

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

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: '=',
  value: 'draft'
}

NB: If value is an array, the operator automatically becomes in

2. Raw value mode

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

Props

Prop	Type	Default	Description
item	Array	StatusItem[]	List of selectable status items
all	Boolean	true	Adds an initial All entry. If a string is provided, it becomes the custom label; if false, the option is hidden
emitRawValue	Boolean	false	When true, v-model returns only the raw value instead of the filter object

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): visual color applied to the selected item