Common

useCloseableContent

Composable interno per gestire visibilita e chiusura di elementi dismissable (Badge, Chip, Message, Toast).

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

Firma TypeScript

export function useCloseableContent(options?: UseCloseableContentOptions): CloseableContentResult

export interface UseCloseableContentOptions {
  closable?: MaybeRef<boolean | undefined>;
  onClose?: (event: Event) => void;
  initialVisible?: boolean;    // default: true
  controlled?: boolean;        // default: false
}

export interface CloseableContentResult {
  visible: Ref<boolean>;
  handleClose: (event: Event) => void;
  handleCloseKeydown: (event: KeyboardEvent) => void;
  show: () => void;
  hide: () => void;
  toggle: () => void;
}

Parametri

Parametro	Tipo	Descrizione
`options.closable`	`MaybeRef<boolean>`	Se mostrare il pulsante chiusura
`options.onClose`	`(event: Event) => void`	Callback chiamata alla chiusura
`options.initialVisible`	`boolean`	Visibilita iniziale (default: `true`)
`options.controlled`	`boolean`	Se true il parent controlla la visibilita (default: `false`)

Valore di Ritorno

Proprietà	Tipo	Descrizione
`visible`	`Ref<boolean>`	Stato di visibilita corrente
`handleClose`	`(event: Event) => void`	Handler per click sul pulsante close
`handleCloseKeydown`	`(event: KeyboardEvent) => void`	Handler keyboard (Enter/Space) sul pulsante close
`show`	`() => void`	Rende visibile l'elemento
`hide`	`() => void`	Nasconde l'elemento
`toggle`	`() => void`	Inverte la visibilita

Esempio

const { visible, handleClose, handleCloseKeydown } = useCloseableContent({
  closable: () => props.closable,
  onClose: (event) => emit('close', event)
})

<template>
  <div v-if="visible" class="badge">
    <span>{{ label }}</span>
    <button v-if="closable" @click="handleClose" @keydown="handleCloseKeydown">
      <i class="pi pi-times"></i>
    </button>
  </div>
</template>

Note

In modalita uncontrolled (default), handleClose imposta visible.value = false automaticamente.
In modalita controlled (controlled: true), la chiusura non modifica visible — il componente parent e responsabile di decidere la visibilita in base alla callback onClose.
handleCloseKeydown supporta i tasti Enter e Space per accessibilita (ARIA).
Funzione utility createCloseHandler(callback) esportata per creare handler con preventDefault automatico.

useClassBuilder

Composable interno per costruire classi CSS coerenti basate su severity, size, variant e stato.

useDropdownLifecycle

Composable interno per gestire il ciclo di vita di un dropdown (open/close, click-outside, cleanup).