Campi Filtro

Select

Dropdown di selezione singola con opzioni statiche o reattive.

Panoramica

Dropdown per la selezione di un singolo valore. Genera un filtro eq.valore o con operatore personalizzato. Supporta opzioni statiche e array reattivi (Ref<[]>).

Anteprima live

Tipo

type: 'select'

Configurazione

import type { SelectFieldConfig } from '@pzeta/vue-ricerca'

const field: SelectFieldConfig = {
  key: 'stato',
  type: 'select',
  label: 'Stato',
  options: [
    { label: 'Attivo', value: 'attivo' },
    { label: 'Inattivo', value: 'inattivo' },
    { label: 'Sospeso', value: 'sospeso' },
  ],
  optionLabel: 'label',
  optionValue: 'value',
  showClear: true,
  filter: true,
}

Con opzioni asincrone

const opzioni = ref<Array<{ label: string; value: string }>>([])
onMounted(async () => {
  opzioni.value = await fetchCategorie()
})

const field: SelectFieldConfig = {
  key: 'idcategoria',
  type: 'select',
  label: 'Categoria',
  options: opzioni,   // Ref<[]> — si aggiorna automaticamente
  optionLabel: 'nome',
  optionValue: 'idcategoria',
}

Props specifiche

Prop	Tipo	Default	Descrizione
`key`	`string`	—	Chiave nel model
`label`	`string`	—	Label del campo
`options`	`unknown[] \| Ref<unknown[]>`	—	Opzioni della dropdown
`optionLabel`	`string`	—	Proprietà da mostrare come testo
`optionValue`	`string`	—	Proprietà da usare come valore
`showClear`	`boolean`	`true`	Bottone cancella selezione
`filter`	`boolean`	`false`	Filtro inline nella dropdown
`colSpan`	`number`	`1`	Colonne grid occupate
`visible`	`boolean \| Ref<boolean>`	`true`	Visibilità reattiva

Query PostgREST generata

// { stato: 'eq.attivo' }

Con operatore personalizzato:

postgrest: { operator: 'neq' }
// { stato: 'neq.attivo' }

NumberRange

Coppia di input numerici Da/A con due chiavi separate nel model.

Text

Campo testo con icona ricerca e filtro ILIKE su una o più colonne PostgREST.