Components

IconSelect

Dropdown per la selezione di icone con anteprima visuale, filtro e raggruppamento per categoria.

Panoramica

IconSelect è un componente select specializzato per la selezione di icone. Visualizza l'anteprima dell'icona sia nel dropdown che nel valore selezionato. Include il set completo di PrimeIcons e supporta icone personalizzate con raggruppamento per categoria.

Il valore emesso è la classe CSS dell'icona (es. 'pi pi-home').

Caratteristiche principali:

Set icone PrimeIcons predefinito con possibilità di override
Filtro/ricerca icone per nome
Raggruppamento per categoria (opzionale)
Pulsante di reset selezione

Casi d'uso tipici: configurazione voci di menu, selezione icone per categorie, personalizzazione elementi UI.

Anteprima live

Utilizzo nello schema

const schema = [{
  name: 'iconaMenu',
  type: 'icon',
  label: 'Icona voce menu',
  props: {
    showFilter: true,
    showClear: true,
  }
}, {
  name: 'iconaCategoria',
  type: 'icon',
  label: 'Icona categoria',
  props: {
    icons: iconePersonalizzate,   // Set icone custom
    categorized: true,             // Raggruppa per categoria
    showFilter: true,
  }
}]

Utilizzo diretto

Con icone personalizzate e raggruppamento

Props

Prop	Tipo	Default	Descrizione
`modelValue`	`string \| null`	`null`	Classe CSS icona selezionata (v-model), es. `'pi pi-home'`
`label`	`string`	—	Etichetta del campo
`helperText`	`string`	—	Testo di supporto sotto il campo
`error`	`string`	—	Messaggio di errore (attiva stato invalid)
`disabled`	`boolean`	`false`	Disabilita il campo
`invalid`	`boolean`	`false`	Attiva visivamente lo stato di errore
`required`	`boolean`	`false`	Indica campo obbligatorio
`icons`	`IconItem[]`	PrimeIcons completo	Set di icone disponibili
`showClear`	`boolean`	`true`	Mostra pulsante per resettare la selezione
`clearIcon`	`string`	`'pi pi-times'`	Icona del pulsante reset
`showFilter`	`boolean`	`true`	Abilita filtro/ricerca per nome icona
`filterPlaceholder`	`string`	(da i18n)	Placeholder del campo filtro
`categorized`	`boolean`	`false`	Raggruppa le icone per campo `category`

Struttura `IconItem`

interface IconItem {
  name: string       // Classe CSS icona, es. 'pi pi-home'
  label: string      // Etichetta leggibile, es. 'Home'
  category?: string  // Categoria per raggruppamento (usata con categorized: true)
}

Eventi

Evento	Payload	Descrizione
`update:modelValue`	`string \| null`	Classe CSS dell'icona selezionata, o `null` al reset

Validazione suggerita

import { z } from 'zod'

const schema = z.object({
  iconaMenu: z.string()
    .startsWith('pi ', 'Seleziona un\'icona valida')
    .nullable()
    .refine(v => v !== null, { message: 'L\'icona è obbligatoria' }),
})

HiddenInput

Input nascosto per trasportare valori nel form senza alcuna interfaccia visiva.

InplaceSelectRemote

Select inline con editing in-place: visualizza il valore come testo e apre un dropdown al click per la modifica.