TagsInput

Panoramica

TagsInput è il tipo di campo tags (dalla 2.20.0): un elenco di etichette scritte dall'utente, per esempio i tag di una campagna. Il valore è un array di stringhe (string[]).

È reso con TagInput di @pzeta/vue-components (dalla 1.32.0), con etichetta, errore e testo d'aiuto come gli altri campi:

• l'etichetta si conferma con la virgola, il punto e virgola, l'Invio, l'uscita dal campo, il pulsante «Aggiungi» o scegliendo un suggerimento. Lo spazio non separa: un'etichetta può avere più parole;
• un elenco incollato si divide da solo;
• i doppioni si scartano e si segnalano, senza distinguere maiuscole e accenti («Novità» e «novita» sono la stessa etichetta);
• un'etichetta si rimuove col suo pulsante, o con Backspace sul campo vuoto (il fuoco passa all'ultima etichetta, un secondo Backspace la toglie).

{
  name: 'tag',
  type: 'tags',
  label: 'Tag',
  help: 'Le etichette con cui ritrovare la campagna',
  props: { maxItems: 20, maxLength: 50, suggestions: tagGiaUsati },
  validation: 'maxItems:20',
}

Anteprima live

Limiti e validazione

props.maxItems e props.maxLength guidano chi scrive: un'etichetta troppo lunga, o oltre il numero massimo, resta nel campo col suo errore invece di entrare nell'elenco, e con maxItems il testo d'aiuto mostra il contatore («3 di 20»).

Quello che decide se il form è valido sono le regole dello schema. Per il numero di etichette si usa maxItems:N / minItems:N: max:N su un elenco non conta gli elementi e passa sempre. Con required il campo resta obbligatorio finché l'elenco è vuoto.

Testo non ancora confermato

L'etichetta che l'utente sta scrivendo non è ancora nel valore del form: entra con la virgola, l'Invio o l'uscita dal campo. Perché non vada persa, il form la conferma prima di validare o salvare:

• validate() di DynamicFormLayouts e validate()/submit() di DynamicFormDialog;
• il pulsante di salvataggio di DynamicFormDialog e DynamicFormDrawer, e quello di aggiunta di DynamicFormListDialog.

Se il testo resta da correggere (un'etichetta troppo lunga, oltre il limite) il form non è valido, il salvataggio non parte e il campo prende il fuoco con il suo errore. Chi salva con un pulsante proprio, senza validate(), chiama commitDrafts() del DynamicFormLayouts:

const formRef = ref<InstanceType<typeof DynamicFormLayouts>>()

async function salva() {
  // false: resta un'etichetta da correggere, e il campo ha già il fuoco
  if (!formRef.value?.commitDrafts()) return
  await nextTick() // il testo appena confermato arriva al v-model
  await api.salva(formData.value)
}

Props

Le props dello schema arrivano a TagInput.

Eventi