Typescript

Injection Keys

InjectionKey tipizzate per la comunicazione provide/inject tra componenti padre e figlio — AccordionKey, ButtonGroupKey, TabsKey, ToastServiceKey e altre.

Le injection keys permettono la comunicazione type-safe tra componenti padre e figlio usando il pattern provide/inject di Vue 3. Ogni chiave è un Symbol tipizzato che garantisce il corretto tipo del valore iniettato.

Sorgenti: src/types/injection-keys.ts, src/composables/useToast.ts, src/composables/useConfirm.ts, src/composables/useConfirmPopup.ts, src/config/configPlugin.ts.

AccordionKey

export const AccordionKey: InjectionKey<AccordionContext> = Symbol('accordion');

Iniettato dal componente Accordion root per condividere lo stato con i pannelli figlio (AccordionPanel, AccordionHeader, AccordionContent).

export interface AccordionContext {
  activeValue: Ref<AccordionActiveValue>;
  multiple: boolean;
  lazy: boolean;
  expandIcon: string | null;
  collapseIcon: string | null;
  togglePanel: (value: AccordionValue, event?: Event) => void;
  shouldRenderPanel: (value: AccordionValue) => boolean;
}

Campo	Tipo	Descrizione
`activeValue`	`Ref<AccordionActiveValue>`	Valore/valori dei pannelli aperti
`multiple`	`boolean`	Permette più pannelli aperti simultaneamente
`lazy`	`boolean`	Lazy load del contenuto dei pannelli
`expandIcon`	`string \| null`	Icona di espansione
`collapseIcon`	`string \| null`	Icona di collasso
`togglePanel`	`Function`	Apre/chiude un pannello per valore
`shouldRenderPanel`	`Function`	Determina se il contenuto deve essere renderizzato

AccordionPanelKey

export const AccordionPanelKey: InjectionKey<AccordionPanelContext> = Symbol('accordionPanel');

Iniettato dal singolo AccordionPanel per condividere il proprio stato con header e content interni.

export interface AccordionPanelContext {
  value: AccordionValue;
  disabled: boolean;
  isActive: Ref<boolean>;
  toggle: () => void;
}

ButtonGroupKey

export const ButtonGroupKey: InjectionKey<ButtonGroupContext | null> = Symbol('buttonGroupContext');

Iniettato dal componente ButtonGroup (o SelectButton) per coordinare la selezione tra i pulsanti figlio. Può essere null quando il pulsante è usato fuori da un gruppo.

export interface ButtonGroupContext {
  selectedValue: ComputedRef<string | number | null | undefined>;
  onSelect: (value: string | number | null) => void;
}

Campo	Tipo	Descrizione
`selectedValue`	`ComputedRef<string \| number \| null \| undefined>`	Valore attualmente selezionato nel gruppo
`onSelect`	`Function`	Notifica la selezione di un pulsante al gruppo

StepperKey

export const StepperKey: InjectionKey<ComputedRef<StepperContext>> = Symbol('stepperContext');

Iniettato dal componente Stepper root per condividere lo stato di avanzamento con gli step figlio.

export interface StepperContext {
  activeValue: string | number | undefined;
  completedValues: Set<string | number>;
  orientation: StepperOrientation;
  linear: boolean;
  severity?: Severity;
  size?: Size;
  selectStep: (value: string | number) => void;
  completeStep: (value: string | number) => void;
  isStepCompleted: (value: string | number) => boolean;
  registerStep: (value: string | number) => void;
}

Campo	Tipo	Descrizione
`activeValue`	`string \| number \| undefined`	Step correntemente attivo
`completedValues`	`Set<string \| number>`	Insieme degli step completati
`orientation`	`StepperOrientation`	Orientamento orizzontale/verticale
`linear`	`boolean`	Forza progressione lineare
`severity`	`Severity`	Colore degli step
`size`	`Size`	Dimensione degli step
`selectStep`	`Function`	Naviga verso uno step
`completeStep`	`Function`	Segna uno step come completato
`isStepCompleted`	`Function`	Verifica se uno step è completato
`registerStep`	`Function`	Registra uno step nel contesto

TabsKey

export const TabsKey: InjectionKey<ComputedRef<TabsContext>> = Symbol('tabsContext');

Iniettato dal componente Tabs root per condividere lo stato con TabList, Tab e TabPanel.

export interface TabsContext {
  activeValue: string | number;
  variant: TabsVariant;
  size: Size;
  severity?: Severity;
  rounded?: boolean;
  orientation: TabsOrientation;
  closeIcon: string;
  selectTab: (value: string | number, event?: Event) => void;
  registerTab: (value: string | number, index: number) => void;
}

Campo	Tipo	Descrizione
`activeValue`	`string \| number`	Tab attualmente attivo
`variant`	`TabsVariant`	Variante visiva delle tab
`size`	`Size`	Dimensione delle tab
`severity`	`Severity`	Colore delle tab
`rounded`	`boolean`	Bordi arrotondati
`orientation`	`TabsOrientation`	Orientamento orizzontale/verticale
`closeIcon`	`string`	Icona chiusura tab (per tab chiudibili)
`selectTab`	`Function`	Attiva una tab per valore
`registerTab`	`Function`	Registra una tab nel contesto

ToastServiceKey

export const ToastServiceKey: InjectionKey<ToastService> = Symbol('ToastService');

Iniettato dal componente ToastProvider (o dall'app root) per rendere disponibile il servizio toast tramite il composable useToast().

export interface ToastService {
  add: (message: ToastMessage) => number;
  remove: (id: number) => void;
  removeAll: () => void;
  info: (title: string, message?: string, life?: number) => number;
  success: (title: string, message?: string, life?: number) => number;
  warn: (title: string, message?: string, life?: number) => number;
  error: (title: string, message?: string, life?: number) => number;
}

Utilizzo tramite composable:

import { useToast } from '@pzeta/vue-components'

const toast = useToast()
toast.success('Salvato', 'Operazione completata con successo')
toast.error('Errore', 'Si è verificato un problema')

ConfirmServiceKey

export const ConfirmServiceKey: InjectionKey<ConfirmService> = Symbol('ConfirmService');

Iniettato dal componente ConfirmDialog per rendere disponibile il servizio di conferma tramite il composable useConfirm().

Utilizzo tramite composable:

import { useConfirm } from '@pzeta/vue-components'

const confirm = useConfirm()
confirm.require({
  message: 'Sei sicuro di voler procedere?',
  header: 'Conferma',
  severity: 'warn',
  accept: () => doAction()
})

ConfirmPopupServiceKey

export const ConfirmPopupServiceKey: InjectionKey<UseConfirmPopup> = Symbol('ConfirmPopupService');

Iniettato dal componente ConfirmPopup per il servizio di conferma inline (popover), alternativo al dialog modale.

ConfigKey

export const ConfigKey: InjectionKey<PzetaConfig> = Symbol('pzeta-config');

Iniettato dal ConfigPlugin a livello applicazione per rendere disponibile la configurazione globale (icone dei componenti) tramite il composable useIcons().

export interface PzetaConfig {
  icons: ComponentIcons;
  setIcons: (newIcons: DeepPartial<ComponentIcons>) => void;
}

Setup:

import { createApp } from 'vue'
import { ConfigPlugin } from '@pzeta/vue-components'

const app = createApp(App)
app.use(ConfigPlugin, {
  icons: {
    common: { close: 'fa fa-times' }
  }
})

Composite Types

Tipi composti che combinano più interfacce base per pattern di componenti frequenti — TextInputBaseProps, DropdownBaseProps, ModalOverlayBaseProps.

Overview Temi

Sistema di temi CSS e Tailwind 4 di @pzeta/vue-components.