Common

useDropdownLifecycle

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

Composable interno — utilizzato da tutti i componenti dropdown della libreria (Select, MultiSelect, TreeSelect, DatePicker, ecc.).

Firma TypeScript

export function useDropdownLifecycle(options: UseDropdownLifecycleOptions): UseDropdownLifecycleReturn

export interface UseDropdownLifecycleOptions {
  containerRef: Ref<HTMLElement | null>;
  excludeRefs?: Ref<HTMLElement | null>[];
  disabled?: MaybeRefOrGetter<boolean>;
  readonly?: MaybeRefOrGetter<boolean>;
  onBeforeOpen?: () => void;
  onOpen?: () => void;
  onBeforeClose?: () => void;
  onClose?: () => void;
}

export interface UseDropdownLifecycleReturn {
  isOpen: Ref<boolean>;
  toggleDropdown: () => void;
  openDropdown: () => void;
  closeDropdown: () => void;
}

Parametri

Parametro	Tipo	Descrizione
`containerRef`	`Ref<HTMLElement \| null>`	Ref del container principale; i click interni non chiudono il dropdown
`excludeRefs`	`Ref<HTMLElement \| null>[]`	Refs aggiuntivi esclusi dal click-outside (es. popup teleportati)
`disabled`	`MaybeRefOrGetter<boolean>`	Impedisce apertura/chiusura se true
`readonly`	`MaybeRefOrGetter<boolean>`	Impedisce apertura/chiusura se true
`onBeforeOpen`	`() => void`	Callback prima dell'apertura
`onOpen`	`() => void`	Callback dopo l'apertura
`onBeforeClose`	`() => void`	Callback prima della chiusura
`onClose`	`() => void`	Callback dopo la chiusura

Valore di Ritorno

Proprietà	Tipo	Descrizione
`isOpen`	`Ref<boolean>`	Stato corrente del dropdown
`toggleDropdown`	`() => void`	Apre o chiude in base allo stato corrente
`openDropdown`	`() => void`	Apre il dropdown (no-op se gia aperto o disabled/readonly)
`closeDropdown`	`() => void`	Chiude il dropdown (no-op se gia chiuso)

Esempio

const containerRef = ref<HTMLElement | null>(null)

const { isOpen, toggleDropdown, closeDropdown } = useDropdownLifecycle({
  containerRef,
  disabled: () => props.disabled,
  readonly: () => props.readonly,
  onOpen: () => {
    updateDropdownPosition()
    startTracking()
    emit('show')
  },
  onClose: () => {
    resetFocus()
    stopTracking()
    emit('hide')
  },
})

Note

Il listener click e registrato su document in onMounted e rimosso in onBeforeUnmount.
Usa capture phase per intercettare click su elementi teleportati al body.
excludeRefs e utile per DatePicker dove il calendario e teleportato fuori dal container principale.
I callback onBeforeOpen/onBeforeClose sono eseguiti prima della modifica di isOpen.

useCloseableContent

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

useDropdownPosition

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