TypedSignature

Import

import { TypedSignature } from '@pzeta/vue-components'

I tipi (TypedSignatureFont, TypedSignatureProps…) si importano dalla radice del pacchetto dalla 1.24.1: nella 1.24.0 non erano esportati.

Esempio Base

È l'alternativa a SignatureInput quando non si vuole disegnare la firma: l'utente sceglie lo stile, il componente emette l'immagine da caricare.

Stili inclusi

I caratteri sono versioni ridotte all'alfabeto latino (woff2, circa 92 KB in tutto) di font SIL Open Font License 1.1, rinominati «PZ Firma Corsivo», «PZ Firma Elegante»… perché versioni modificate (due hanno un Reserved Font Name). Licenza e copyright sono nel pacchetto, in src/assets/fonts/signature/OFL.txt.

Caricamento

Non c'è nessun @font-face nel CSS: i caratteri sono in un modulo separato della libreria (chunk signatureFonts, circa 120 KB) importato quando il componente si monta, e registrati con l'API FontFace. Chi non usa la firma tipografica non li scarica, e un microfrontend — che non può dichiarare @font-face, perché il CSS arriva solo dalla shell — li può usare. Se un carattere non si carica, l'anteprima e il PNG ripiegano su cursive.

Props

TypedSignatureFont

interface TypedSignatureFont {
  value: string   // valore salvato nel v-model (es. 'corsivo')
  label: string   // nome dello stile mostrato all'utente
  family: string  // un solo nome di famiglia: diventa `'<family>', cursive`
  url?: string    // file del carattere (woff2, ttf…): se presente viene caricato con FontFace
}

Con fonts si propongono altri stili: con url il carattere viene caricato, senza si usa una famiglia già disponibile nella pagina.

Emits

Le battute ravvicinate sono raccolte in un solo PNG (dopo 120 ms dall'ultimo cambio). Senza testo non viene emesso nulla.

Metodi esposti

<script setup lang="ts">
import { ref } from 'vue'
import { TypedSignature } from '@pzeta/vue-components'

const firma = ref<InstanceType<typeof TypedSignature> | null>(null)

async function conferma() {
  const png = await firma.value?.toPng()
  if (png) await caricaFirma(png)
}
</script>

<template>
  <TypedSignature ref="firma" v-model="stile" :text="nomeCognome" />
</template>

Esempi

Stili propri e inchiostro blu

Comportamento

• Il PNG è trasparente, largo width e alto height; il testo è centrato e il carattere si riduce finché il nome non sta nella larghezza.
• Senza nome l'anteprima mostra un testo d'esempio («Nome Cognome»).
• L'anteprima di ogni stile sta su un fondo chiaro: l'inchiostro è quello del PNG, scuro, e resta leggibile anche nel tema scuro.

Accessibilità

• Gli stili sono radio nativi con name condiviso dentro un fieldset: frecce per cambiare stile, un solo tab-stop. Il nome di ogni radio è quello dello stile; l'anteprima è decorativa (aria-hidden).
• Il gruppo prende il nome da label (legend) o da ariaLabel; durante il caricamento dei caratteri ha aria-busy.
• Stringhe nella sezione i18n signature (typedLabel, typedPlaceholder, typedStyle*).

TypeScript

import type {
  TypedSignatureProps,
  TypedSignatureEmits,
  TypedSignatureFont,
} from '@pzeta/vue-components'