Getting Started
Installazione
Come installare e configurare @pzeta/vue-ricerca in un progetto Vue 3.
Installazione
npm install @pzeta/vue-ricerca
Peer dependencies
| Pacchetto | Versione |
|---|---|
vue | ^3.5.0 |
@pzeta/vue-components | ^1.3.24 |
@pzeta/vue-form | ^2.0.0 |
Registrazione del plugin
// main.ts
import { createApp } from 'vue'
import { VueRicercaPlugin } from '@pzeta/vue-ricerca'
import '@pzeta/vue-ricerca/style.css'
import App from './App.vue'
const app = createApp(App)
app.use(VueRicercaPlugin)
app.mount('#app')
Opzioni plugin
import { VueRicercaPlugin } from '@pzeta/vue-ricerca'
// Prefisso personalizzato
app.use(VueRicercaPlugin, { prefix: 'Pz' })
// → Componente registrato come 'PzSearchToolbar'
// Registrazione selettiva
app.use(VueRicercaPlugin, {
components: ['SearchToolbar'],
})
| Opzione | Tipo | Default | Descrizione |
|---|---|---|---|
prefix | string | '' | Prefisso aggiunto al nome di ogni componente registrato |
components | ComponentName[] | tutti | Lista componenti da registrare; omesso = tutti |
Attualmente l'unico componente esposto dal plugin è
SearchToolbar. Tutti i componenti interni (PresetFilterBar, RuleBuilder, GroupBySelector, SavedSearchPanel) sono renderizzati condizionalmente da SearchToolbar in base alle prop passate.Importazione a singolo componente (senza plugin)
import { SearchToolbar } from '@pzeta/vue-ricerca'
import '@pzeta/vue-ricerca/style.css'
Importazione utility e tipi
// Tipi
import type {
FieldConfig,
TextFieldConfig,
SelectFieldConfig,
DateFieldConfig,
DateRangeFieldConfig,
NumberFieldConfig,
NumberRangeFieldConfig,
BooleanFieldConfig,
PostgrestConfig,
PostgrestOperator,
GridConfig,
ActionConfig,
CollapseMode,
SearchState,
SearchToolbarProps,
SearchToolbarEmits,
PresetFilter,
PresetFilterGroup,
Rule,
RuleGroup,
RuleOperator,
RuleFieldType,
RuleFieldDefinition,
GroupByFieldConfig,
GroupByEntry,
SavedSearch,
SavedSearchState,
SavedSearchAdapter,
UseSearchToolbarOptions,
UseSearchToolbarReturn,
} from '@pzeta/vue-ricerca'
// Utility
import {
buildPostgrestQuery,
buildPostgrestQueryFromState,
buildRuleGroupQuery,
buildRuleCondition,
generateRuleId,
buildDefaultValues,
validateRanges,
RULE_OPERATORS_BY_TYPE,
RULE_OPERATOR_LABELS,
isRule,
isRuleGroup,
} from '@pzeta/vue-ricerca'
// Composable
import { useSearchToolbar } from '@pzeta/vue-ricerca'