@pzeta/utils
Getting Started

Quick Start

Primo esempio funzionante di SearchToolbar con filtri base e generazione query PostgREST.

Esempio base

L'evento @apply emette uno stato completo SearchState (filtri + preset + rules + group-by). Quando usi solo i filtri base, leggi state.filters e passalo a buildPostgrestQuery.

Esempio con stato completo

Quando attivi i layer avanzati (preset, rule builder, group-by), usa buildPostgrestQueryFromState per ottenere la query combinata di tutti i layer:

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

function onApply(state: SearchState) {
  const query = buildPostgrestQueryFromState(state, {
    fields,
    presets,
    ruleBuilderFields,
    groupByFields,
  })
  // → { and: '(stato.eq.attivo,nome.ilike.*mario*)', order: 'datacreazione.desc' }
}

Con useSearchToolbar (headless)

Quando devi controllare i filtri programmaticamente senza il componente UI:

import { useSearchToolbar, buildPostgrestQuery } from '@pzeta/vue-ricerca'

const { filters, isValid, hasActiveFilters, apply, reset } = useSearchToolbar({
  fields,
  initialValues: { stato: 'attivo' },
  onApply: (state) => {
    const query = buildPostgrestQuery(state.filters, fields)
    // fetch con query params
  },
})

Flusso dati

FieldConfig[] ─► SearchToolbar ─► @apply(SearchState) ─► buildPostgrestQuery(state.filters, fields) ─► query params
                       │                                  buildPostgrestQueryFromState(state, config) ─► query con tutti i layer
                       │
                       └── v-model:filtri (Record<string, unknown>)
La libreria non esegue chiamate HTTP: genera solo i parametri di filtro come Record<string, string>. L'integrazione con fetch/axios/PostgREST client rimane a carico del consumer.

Installazione

Come installare e configurare @pzeta/vue-ricerca in un progetto Vue 3.

SearchToolbar

Componente principale config-driven. Filtri base + layer avanzati componibili (preset, rule builder, group-by, ricerche salvate).