Components

ListInput

Elenco di righe tipizzate dentro un form, con le colonne dichiarate nello schema (tipo di campo `list`).

Panoramica

ListInput è il tipo di campo list (dalla 2.17.0): un elenco di oggetti dentro il form, una riga per elemento e una colonna per proprietà. Le colonne si dichiarano nello schema.

Colonne text, number, select (con options) e checkbox.
Aggiunta e rimozione delle righe; maxRows pone un limite.
Le celle required vuote vengono evidenziate quando il campo è invalido.
È una tabella semantica: ogni colonna ha la sua intestazione e ogni cella un nome accessibile («Nome, riga 2»).

Caso tipico: gli argomenti di uno strumento AI (nome / tipo / descrizione), che altrimenti finirebbero in una textarea da interpretare.

Anteprima live

Colonne

interface ListColumn {
  name: string                 // chiave nell'oggetto della riga
  label: string                // intestazione, e nome accessibile delle celle
  type?: 'text' | 'number' | 'select' | 'checkbox'   // default 'text'
  options?: Array<{ label: string; value: unknown }> // per 'select'
  placeholder?: string
  required?: boolean           // evidenziata se vuota quando il campo è invalido
  default?: unknown            // valore delle righe nuove
}

Una riga nuova parte da default oppure dal valore vuoto del tipo: '' per text, null per number e select, false per checkbox.

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`Array<Record<string, unknown>> \| null`	`[]`	Righe (v-model)
`columns`	`ListColumn[]`	—	Richiesta. Colonne di ogni riga
`label`	`string`	—	Etichetta del campo
`helperText`	`string`	—	Testo di aiuto
`error`	`string`	—	Messaggio d'errore
`disabled`	`boolean`	`false`	Disabilita celle, aggiunta e rimozione
`readonly`	`boolean`	`false`	Celle in sola lettura, niente aggiunta né rimozione
`invalid`	`boolean`	`false`	Stato invalido: evidenzia le celle obbligatorie vuote
`required`	`boolean`	`false`	Asterisco sull'etichetta
`addLabel`	`string`	«Aggiungi riga»	Testo del pulsante di aggiunta
`maxRows`	`number`	`0`	Numero massimo di righe; `0` = nessun limite

Eventi

Evento	Payload	Descrizione
`update:modelValue`	`Array<Record<string, unknown>>`	Righe aggiornate (sempre un array nuovo)
`blur`	—	Il focus esce dal campo

Utilizzo diretto

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

const colonne: ListColumn[] = [
  { name: 'nome', label: 'Nome', required: true },
  { name: 'quantita', label: 'Quantità', type: 'number', default: 1 },
]
const righe = ref([])
</script>

<template>
  <ListInput v-model="righe" :columns="colonne" label="Capi" />
</template>

InplaceSelectRemote

Select inline con editing in-place: visualizza il valore come testo e apre un dropdown al click per la modifica.

ListboxRemote

Listbox con caricamento dati remoto, selezione singola o multipla, raggruppamento e immagini nelle opzioni.