Feedback

Toast

Sistema di notifiche temporanee posizionate sullo schermo. Si usa tramite il composable useToast() per mostrare messaggi da qualsiasi componente.

Import

import { Toast, useToast } from '@pzeta/vue-components'
// oppure tramite plugin:
import { FeedbackPlugin } from '@pzeta/vue-components'
app.use(FeedbackPlugin)

Setup dell'applicazione

Il componente <Toast> deve essere montato una sola volta nel layout principale. Poi si usa useToast() da qualsiasi componente figlio.

<!-- App.vue o layout principale -->
<script setup lang="ts">
import { Toast } from '@pzeta/vue-components'
</script>

<template>
  <Toast />
  <RouterView />
</template>

Utilizzo con useToast()

API del composable useToast()

Metodo	Firma	Descrizione
`add`	`(message: ToastMessage) => number`	Aggiunge un toast con configurazione completa, ritorna l'ID
`remove`	`(id: number) => void`	Rimuove un toast specifico per ID
`removeAll`	`() => void`	Rimuove tutti i toast attivi
`info`	`(message: string, title?: string) => number`	Shortcut per toast informativo
`success`	`(message: string, title?: string) => number`	Shortcut per toast di successo
`warn`	`(message: string, title?: string) => number`	Shortcut per toast di avviso
`error`	`(message: string, title?: string) => number`	Shortcut per toast di errore

Props del componente Toast

Prop	Tipo	Default	Descrizione
`position`	`'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right' \| 'center'`	`'top-right'`	Posizione predefinita per tutti i toast
`group`	`string \| null`	`null`	Gruppo per filtrare quali toast mostrare (più istanze Toast)
`closeIcon`	`string`	—	Icona di chiusura predefinita (default dal config globale)
`baseZIndex`	`number`	`9999`	Z-index base per lo stacking
`autoZIndex`	`boolean`	`true`	Calcola automaticamente lo z-index incrementale
`breakpoints`	`Record<string, { width?, left?, right? }>`	`{ '960px': { width: '90vw', left: '5vw', right: '5vw' } }`	Configurazione responsive

Emits del componente Toast

Evento	Payload	Descrizione
`close`	`number`	Emesso con l'ID del toast quando viene chiuso

Slot del componente Toast

Slot	Scope	Descrizione
`container`	`{ message: InternalToast, closeCallback: () => void }`	Headless: template completo del toast
`message`	`{ message: InternalToast, closeCallback: () => void }`	Template custom del contenuto (mantiene il container)

Interfaccia ToastMessage

interface ToastMessage {
  severity?: 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast'
  title?: string        // Titolo in grassetto
  message?: string      // Testo principale
  detail?: string       // Descrizione secondaria
  icon?: string | null  // Icona custom (classe CSS)
  closable?: boolean    // Default: true
  sticky?: boolean      // Default: false (se true ignora life)
  life?: number         // ms prima della chiusura (default: 3000)
  closeIcon?: string    // Icona di chiusura custom
  position?: ToastPosition  // Sovrascrive la posizione del componente
}

Esempi

Toast con configurazione avanzata

Toast persistente (sticky)

Gestione ID per rimozione programmatica

Posizioni diverse

Template custom via slot

Accessibilità

Ogni toast ha role="alert".
aria-live="assertive" per severity error, aria-live="polite" per le altre.
Il pulsante di chiusura ha aria-label localizzato.

TypeScript

import type { ToastProps, ToastEmits, ToastMessage, ToastSeverity, ToastPosition } from '@pzeta/vue-components'
import { useToast, type ToastService } from '@pzeta/vue-components'

// ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'center'
// ToastSeverity = 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast'

Tag

Etichetta colorata per categorizzare contenuti. Simile a Badge ma con padding maggiore e aspetto flat, ideale per label e stato.

Tooltip

Testo contestuale che appare al hover/focus su un elemento. Disponibile come componente Vue e come direttiva v-tooltip per uso diretto su qualsiasi elemento HTML.