Vue Form

Panoramica

@pzeta/vue-form è la libreria PZeta per costruire form complessi schema-driven in Vue 3. Il componente principale DynamicFormLayouts accetta uno schema dichiarativo e renderizza automaticamente i campi corretti con validazione on-blur, errori inline, condizioni dinamiche e propagazione disabled/readonly ai discendenti.

Versione corrente: 2.18.4 — peer deps vue@^3.5.43, @pzeta/vue-components@^1.23.0, @pzeta/vue-i18n@^1.2.0 (più optional @tiptap/*, @googlemaps/js-api-loader, @pzeta/postgrest e @pzeta/mfe-contracts).

Funzionalità principali

• DynamicFormLayouts schema-driven con 30+ tipi di input, validation on-blur, layout normal/tabs/wizard/accordion, tracking dirty/valid/dirty-values
• Schema come oggetto literal: forma canonica { sections: [...] } — diff-friendly, serializzabile, mappa 1:1 sui tipi FormSchema / SectionDefinition / RowDefinition / FieldDefinition
• Wrapper UI: DynamicFormDialog, DynamicFormDrawer, DynamicFormDrawerWithTable, DynamicFormListDialog per scenari modali e CRUD completi
• Helper opzionali field/row/section/form per casi di forte riuso/factorizzazione — vedi Schema builders per i criteri di scelta
• 80+ validatori organizzati in 11 categorie (core, string, numeric, date, format, italian, financial, network, security, documents, file, other)
• Validatori custom registrabili runtime via ValidationService.registerValidator
• Cross-field validation: regole validationRules (match, different, requiredIf, ecc.) valutate in tempo reale
• i18n integrato: I18nFormPlugin con merge automatico di traduzioni, italiano precaricato + inglese lazy
• Componenti remote: SelectRemote, ListboxRemote, TreeRemote, AutoCompleteRemote (ricerca sul server mentre si digita), ecc. con fetchFn o endpoint + filtri dinamici
• Componenti speciali: AddressAutocompleteInput (Google Places), BarcodeScanner (BarcodeDetector API), CameraCapture, TiptapEditor (con immagini, tabelle e il blocco «/Trascrizione vocale»)
• Campi strutturati: list (righe tipizzate con colonne nello schema), cron (espressione con anteprima leggibile) e tags (etichette a testo libero)
• Campi generati con l'AI: opzione di campo ai e componente AiFieldTrigger

Novità dalla 2.14

Sotto-pagine

Quick start

// main.ts
import { createApp } from 'vue'
import { VueFormPlugin, I18nFormPlugin } from '@pzeta/vue-form'
import '@pzeta/vue-form/style.css'

const app = createApp(App)

// 1. Configura i18n PRIMA di tutto
app.use(I18nFormPlugin)

// 2. Registra componenti
app.use(VueFormPlugin)

app.mount('#app')

<script setup lang="ts">
import { ref } from 'vue'
import { DynamicFormLayouts } from '@pzeta/vue-form'
import type { FormSchema } from '@pzeta/vue-form'

const formData = ref({})

// Forma raccomandata: schema come oggetto literal
const schema: FormSchema = {
  sections: [
    {
      title: 'Anagrafica',
      icon: 'pi pi-user',
      rows: [
        {
          fields: [
            { name: 'nome', type: 'text', label: 'Nome', span: 6, required: true, validation: 'required' },
            { name: 'email', type: 'email', label: 'Email', span: 6, required: true, validation: 'required|email' },
          ],
        },
        {
          fields: [
            {
              name: 'paese',
              type: 'select',
              label: 'Paese',
              props: {
                options: [
                  { label: 'Italia', value: 'IT' },
                  { label: 'Francia', value: 'FR' },
                ],
                optionLabel: 'label',
                optionValue: 'value',
              },
            },
          ],
        },
      ],
    },
  ],
}
</script>

<template>
  <DynamicFormLayouts v-model="formData" :schema="schema" />
</template>

Quando usare cosa