Common

useClassBuilder

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

Composable interno — utilizzato dai componenti della libreria. Non e parte dell'API pubblica ma documentato per manutenzione e contribuzioni.

Firma TypeScript

export function useClassBuilder(options: UseClassBuilderOptions): ClassBuilderResult

export interface UseClassBuilderOptions {
  baseClass: string;
  props: {
    severity?: MaybeRef<Severity | undefined>;
    size?: MaybeRef<Size | undefined>;
    variant?: MaybeRef<string | undefined>;
    rounded?: MaybeRef<boolean | undefined>;
    disabled?: MaybeRef<boolean | undefined>;
    loading?: MaybeRef<boolean | undefined>;
  };
  classMap?: {
    severity?: Record<string, string>;
    size?: Record<string, string>;
    variant?: Record<string, string>;
  };
  separator?: string;  // default: '-'
}

export interface ClassBuilderResult {
  classes: ComputedRef<string[]>;
  severityClass: ComputedRef<string>;
  sizeClass: ComputedRef<string>;
  variantClass: ComputedRef<string>;
  roundedClass: ComputedRef<string>;
  disabledClass: ComputedRef<string>;
  loadingClass: ComputedRef<string>;
}

Parametri

Parametro	Tipo	Descrizione
`options.baseClass`	`string`	Classe base del componente (es. `'hs-badge'`)
`options.props`	`object`	Refs delle props rilevanti del componente
`options.classMap`	`object` (opzionale)	Mappe custom per override dei default
`options.separator`	`string` (opzionale, default: `'-'`)	Separatore tra classe base e modifier

Valore di Ritorno

Proprietà	Tipo	Descrizione
`classes`	`ComputedRef<string[]>`	Array completo di tutte le classi combinate
`severityClass`	`ComputedRef<string>`	Classe per severity (es. `hs-badge-success`)
`sizeClass`	`ComputedRef<string>`	Classe per size (es. `hs-badge-size-small`)
`variantClass`	`ComputedRef<string>`	Classe per variant
`roundedClass`	`ComputedRef<string>`	Classe per bordi arrotondati
`disabledClass`	`ComputedRef<string>`	Classe per stato disabilitato
`loadingClass`	`ComputedRef<string>`	Classe per stato loading

Esempio

import { useClassBuilder } from '@pzeta/vue-components/internal'

// Uso base in un componente Badge
const { classes } = useClassBuilder({
  baseClass: 'hs-badge',
  props: toRefs(props)
})

// Con mappe custom per classi non standard
const { severityClass } = useClassBuilder({
  baseClass: 'hs-message',
  props: toRefs(props),
  classMap: {
    severity: {
      success: 'hs-message-success',
      error: 'hs-message-danger'
    }
  }
})

Note

Elimina la duplicazione del mapping severity/size/variant presente in 7+ componenti.
Usa toValue() su ogni prop per supportare sia Ref<T> che valori diretti (MaybeRef).
Se un classMap custom viene fornito per una chiave specifica, ha priorita sul pattern default.
Il pattern default per severity e {baseClass}{sep}{severity}, per size e {baseClass}{sep}size{sep}{size}.
Funzioni utility esportate: getSizeClass(baseClass, size) e getSeverityClass(baseClass, severity) per uso non-composable.

Common

Composables di utilità condivisa — class building, severity, lifecycle, dropdown, popover, navigazione, selezione.

useCloseableContent

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