Components

FieldMapper e FieldMapperRow

Tabella di mapping colonne sorgente → campi destinazione e singola riga di mapping.

FieldMapper

Tabella interattiva che renderizza il mapping completo. Mostra tre colonne:

Colonna file — nome dell'header sorgente + (sotto, in font ridotto) un campione del valore della prima riga
Campo destinazione — Select con i CampoMetadato disponibili, più l'opzione -- Non mappare --
Commenti — descrizione del campo destinazione, oppure "Valori possibili: …" se il campo è di tipo select con opzioni

In testa è presente il contatore "X / Y colonne mappate" e il pulsante "Reset mapping".

Props

Prop	Tipo	Descrizione
`mappings`	`MappingColonna[]`	Mapping corrente
`campiDestinazione`	`CampoMetadato[]`	Campi target disponibili
`anteprimaRighe`	`Record<string, unknown>[]`	Prime righe del file (per il campione sotto il nome colonna)

Emits

Evento	Payload	Descrizione
`updateMapping`	`index: number, campo: string`	Nuova selezione `campoDestinazione`
`updateTransform`	`index: number, trasformazione: string`	Nuova trasformazione
`updateDefault`	`index: number, valore: string`	Nuovo valore di default
`reset`	—	Reset mapping

Esempio

<FieldMapper
  :mappings="fieldMapping.mappings.value"
  :campi-destinazione="campiDestinazione"
  :anteprima-righe="anteprimaRighe"
  @update-mapping="fieldMapping.updateMapping"
  @reset="fieldMapping.resetMappings"
/>

Note

La tabella usa DataTable di @pzeta/vue-components con paginator: false (l'idea è che tutte le colonne sorgente siano visibili senza paginazione).
Il campione mostra solo le prime righe non vuote — null, undefined, '' non vengono renderizzati.
Quando il campo destinazione selezionato è di tipo select con opzioni, la colonna Commenti mostra Valori possibili: opt1, opt2, ... per aiutare l'utente a capire perché alcune righe potrebbero fallire la validazione.

Componente atomico per renderizzare una singola riga di mapping. Esposto pubblicamente per layout custom — FieldMapper non lo usa direttamente (usa DataTable con template), quindi FieldMapperRow è utile quando si vuole un layout <table> HTML standard o un'altra impaginazione.

Props

Prop	Tipo	Descrizione
`mapping`	`MappingColonna`	Singolo mapping
`campiDestinazione`	`CampoMetadato[]`	Lista campi target
`index`	`number`	Indice della riga
`campioneDato`	`unknown`	Valore di esempio per la cella sotto al nome

Emits

Evento	Payload	Descrizione
`updateMapping`	`index: number, campo: string`	Cambia destinazione
`updateTransform`	`index: number, trasformazione: string`	Imposta trasformazione
`updateDefault`	`index: number, valore: string`	Imposta default

Esempio

<table class="w-full">
  <thead>
    <tr>
      <th>Colonna file</th>
      <th>Campo destinazione</th>
      <th>Commenti</th>
    </tr>
  </thead>
  <tbody>
    <FieldMapperRow
      v-for="(m, i) in fieldMapping.mappings.value"
      :key="i"
      :mapping="m"
      :campi-destinazione="campiDestinazione"
      :index="i"
      :campione-dato="anteprimaRighe[0]?.[m.colonnaSorgente]"
      @update-mapping="fieldMapping.updateMapping"
    />
  </tbody>
</table>

Markup

FieldMapperRow renderizza un elemento <tr> (deve essere usato all'interno di un <tbody>). La logica di evidenziazione (Valori possibili/descrizione) è identica a FieldMapper.

Export

ExportDialog, ExportFieldSelector, FormatOptions.

ImageUploader

Uploader multiplo di immagini collegate a una sessione di import.