Campi Filtro

Text

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

Panoramica

Campo di testo libero. Genera un filtro ilike.*valore* su una o più colonne PostgREST. Supporta invio con Enter tramite submitOnEnter.

Anteprima live

Tipo

type: 'text'

Configurazione

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

const field: TextFieldConfig = {
  key: 'search',
  type: 'text',
  label: 'Cerca',
  placeholder: 'Nome, descrizione...',
  showSearchIcon: true,
  submitOnEnter: true,
  maxLength: 100,
  postgrest: {
    column: ['nome', 'descrizione', 'codicefiscale'],
  },
}

Props specifiche

Prop	Tipo	Default	Descrizione
`key`	`string`	—	Chiave nel model
`label`	`string`	—	Label del campo
`placeholder`	`string`	—	Placeholder
`showSearchIcon`	`boolean`	`false`	Mostra icona lente (InputGroup)
`submitOnEnter`	`boolean`	`false`	Emette `@apply` alla pressione di Enter
`maxLength`	`number`	`255`	Lunghezza massima input
`colSpan`	`number`	`1`	Colonne grid occupate
`visible`	`boolean \| Ref<boolean>`	`true`	Visibilità reattiva
`disabled`	`boolean`	`false`	Disabilita il campo

Query PostgREST generata

// Singola colonna (default)
// { search: 'ilike.*mario*' }

// Multi-colonna → parametro 'or'
// { or: '(nome.ilike.*mario*,descrizione.ilike.*mario*)' }

Con postgrest.column: ['nome', 'descrizione'] le condizioni vengono combinate in OR automaticamente.

Select

Dropdown di selezione singola con opzioni statiche o reattive.

useSearchToolbar

Composable headless per gestire lo stato filtri senza il componente UI. Stessa API di SearchToolbar (filtri base + preset + rule builder + group-by + ricerche salvate).