Federico Perugini
Developer & Architect

EV2 — Eventi ⇄ Effetti

Clicca il bottone: dispatcha `ui:reveal` sul kernel; la sezione qui sotto (nascosta) reagisce all'evento del bus e compare.

Action { actionType: "event", eventName: "ui:reveal" }
→ ponte dispatch→emit → reaction on:event(ui:reveal) → animate:fadeIn

Sezione demo (reagisce a ui:reveal)

Parto nascosta; compaio quando ricevo l'evento ui:reveal dal bus.

Text

Blocco di testo semplice: tag e classi dal viewMode, stile dal tema.

Questo è un blocco Text renderizzato dal suo viewMode.
viewMode: "Text"
slot: "content"
text: "…"

RichText

Renderizza un documento Lexical: supporta l’intera scala di heading e i paragrafi.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragrafo di esempio con testo normale sotto gli heading.

viewMode: "RichText"
slot: "content"
richText: <documento Lexical>

Separator

Divisore Radix per separare visivamente blocchi di contenuto.

Contenuto sopra il separatore.
Contenuto sotto il separatore.
viewMode: "Separator"
slot: "content"
orientation: "horizontal"
decorative: true

Avatar

Immagine profilo con fallback a iniziali quando manca la media.

viewMode: "Avatar"
slot: "content"
alt: "WoodyLab"
fallback: "WL"

Progress

Barra di avanzamento con valore corrente su un massimo.

viewMode: "Progress"
slot: "content"
value: 60
max: 100

ThemeSwitch

Interruttore chiaro/scuro: gestisce da sé `data-theme` e localStorage.

viewMode: "ThemeSwitch"
slot: "content"

Toggle

Bottone a due stati (attivo/inattivo), utile per opzioni booleane.

viewMode: "Toggle"
slot: "content"
label: "Grassetto"
defaultPressed: false

Buttons (Action)

Vetrina di varianti colore del componente Action non navigante.

viewMode: "ButtonPrimary" | "ButtonSecondary" | …
slot: "content"
action: { text, actionType: "none", actionTarget: "#" }

ToggleGroup

Selezione singola tra più opzioni mutuamente esclusive.

viewMode: "ToggleGroup"
slot: "content"
type: "single"
defaultValue: "center"
items: [{ value, label }]

Collapsible

Contenuto che si espande e si chiude al click sul trigger.

viewMode: "Collapsible"
slot: "content"
defaultOpen: true
content: [collapsibleTrigger, collapsibleContent]

HoverCard

Riquadro che appare al passaggio del mouse su un elemento trigger.

Passa il mouse qui
viewMode: "HoverCard"
slot: "content"
openDelay: 150
content: [hoverCardTrigger, hoverCardContent]

Tabs

Pannelli a schede: ogni tab proietta trigger e contenuto sui propri slot.

viewMode: "Tabs"
slot: "content"
defaultValue: "account"
items: [{ value, content: [tabTrigger, tabContent] }]

Swiper

Slider/carosello (swiperjs.com): ogni modulo (navigation, pagination, autoplay, effetti…) è configurabile da admin.

Immagine

Infrastruttura

Ogni modulo dello Swiper è configurabile da admin.

Immagine

Codice & moduli

Navigation, pagination, autoplay, effetti — dal viewMode.

Immagine

Overlay leggibile

Immagine di sfondo + testo bianco su overlay scuro.

items: [ imageSlide(url, titolo, testo) ]
slide = SlideImage (figura fill) + SlideCaption (richText h2/p su overlay bg-dark/70)

Card

Contenitore con slot header / content / footer per raggruppare contenuti.

Titolo della Card
Corpo della Card — il contenuto principale va nello slot content.
viewMode: "Card"
slots: header | content | footer

Accordion

Elenco di voci espandibili: una alla volta mostra il proprio pannello.

Sì. Segue il pattern WAI-ARIA.

viewMode: "Accordion"
defaultValue: "0"
items: [{ content: [accordionTrigger, accordionContent] }]

AlertDialog

Modale di conferma Radix con trigger, titolo, descrizione e azioni.