Common

useLifeTimer

Composable interno per auto-dismissal con timer, progress tracking e pausa/ripresa.

Composable interno — utilizzato dai componenti Message e Toast della libreria.

Firma TypeScript

export function useLifeTimer(options: UseLifeTimerOptions): LifeTimerResult

export interface UseLifeTimerOptions {
  life: MaybeRef<number | null | undefined>;  // durata in ms
  sticky?: MaybeRef<boolean | undefined>;
  onLifeEnd: () => void;
  progressInterval?: number;  // default: 10ms
  trackProgress?: boolean;    // default: true
}

export interface LifeTimerResult {
  startTimer: () => void;
  stopTimer: () => void;
  resetTimer: () => void;
  pauseTimer: () => void;
  resumeTimer: () => void;
  remainingTime: Ref<number>;
  progressPercentage: ComputedRef<number>;
  isRunning: Ref<boolean>;
  isPaused: Ref<boolean>;
}

Parametri

Parametro	Tipo	Descrizione
`options.life`	`MaybeRef<number \| null \| undefined>`	Durata in ms; se null/0 il timer non parte
`options.sticky`	`MaybeRef<boolean>`	Se true il timer non parte (elemento permanente)
`options.onLifeEnd`	`() => void`	Callback eseguita alla scadenza del timer
`options.progressInterval`	`number`	Intervallo di aggiornamento progress in ms (default: 10)
`options.trackProgress`	`boolean`	Se tracciare il progresso (default: true)

Valore di Ritorno

Proprietà	Tipo	Descrizione
`startTimer`	`() => void`	Avvia il timer
`stopTimer`	`() => void`	Ferma e resetta il timer
`resetTimer`	`() => void`	Ferma e riavvia il timer
`pauseTimer`	`() => void`	Sospende il timer (utile su hover)
`resumeTimer`	`() => void`	Riprende il timer dopo una pausa
`remainingTime`	`Ref<number>`	Millisecondi rimanenti
`progressPercentage`	`ComputedRef<number>`	Percentuale progresso 0-100 (100=inizio, 0=scaduto)
`isRunning`	`Ref<boolean>`	True se il timer e attivo
`isPaused`	`Ref<boolean>`	True se il timer e in pausa

Esempio

const { startTimer, pauseTimer, resumeTimer, progressPercentage } = useLifeTimer({
  life: () => props.life,
  sticky: () => props.sticky,
  onLifeEnd: () => {
    visible.value = false
    emit('close')
  }
})

onMounted(() => startTimer())

// Pausa su hover per leggere il messaggio
const handleMouseEnter = () => pauseTimer()
const handleMouseLeave = () => resumeTimer()

<!-- Progress bar -->
<div :style="{ width: progressPercentage + '%' }"></div>

Note

Il timer non parte se sticky=true oppure life e null/0.
resumeTimer calcola correttamente il tempo rimanente sottraendo il tempo trascorso prima della pausa.
Il composable esegue cleanup automatico di tutti i timer su onBeforeUnmount.
Reagisce ai cambiamenti di life e sticky tramite watcher: se il timer e attivo, lo resetta con i nuovi valori.
progressPercentage va da 100 (timer appena avviato) a 0 (timer scaduto), compatibile con progress bar CSS.

useDropdownPosition

Composable interno per posizionamento dropdown con position:fixed, flip verticale e scroll tracking.

useListNavigation

Composable interno per navigazione tastiera in liste con skip disabilitati e auto-scroll.