Elementi (low-code)

import { defineVimineElements } from '@vimine/sdk/elements';
defineVimineElements({ clientId: 'vmc_…', redirectUri: 'https://www.example.org/callback' });

<vimine-sign-in scope="membership:read" return-to="/area-soci" handle-redirect></vimine-sign-in>
<vimine-card></vimine-card>
<vimine-enroll slug="tuo-slug"></vimine-enroll>

defineVimineElements(options | client) crea (o riceve) il client del browser e registra i tre elementi; li condivide con il resto della pagina restituendolo.

Elemento	Attributi
<vimine-sign-in>	scope, return-to, label, label-signed-in, everywhere, handle-redirect, lang	pulsante Accedi / Esci; con handle-redirect completa da solo lo scambio del codice sulla pagina di ritorno; emette vimine-change { signedIn }
<vimine-card>	lang	la tessera del socio connesso (SVG con QR aggiornato); si aggiorna al cambio di sessione; emette vimine-card
<vimine-enroll>	slug, app-url, height, lang	il modulo di iscrizione (iframe), nella lingua dell’elemento; a chi ha già un account Vimine offre Continua su Vimine, che apre la pagina in una nuova scheda dove si aderisce in un passo (perché una nuova scheda)
<vimine-events>	slug, filter, limit, detail-url, app-url, lang	gli eventi dell’associazione: quelli pubblici per un visitatore, tutti per un socio connesso, con i tipi di iscrizione (contributo, posti). Il socio connesso ha un pulsante Iscriviti per ogni tipo. Al visitatore l’evento propone Iscriviti all’associazione e prenota, che apre in una nuova scheda la pagina di iscrizione di Vimine con l’evento (come funziona), e Sono già socio: accedi; se l’associazione non accetta richieste di adesione resta il solo Accedi per iscriverti (dalla 0.3.1). detail-url con {slug} aggiunge il link alla scheda; emette vimine-registration { registration }

Shadow DOM: lo stile passa dalle variabili --vimine-font, --vimine-color, --vimine-accent, --vimine-accent-contrast, --vimine-radius, --vimine-padding, --vimine-muted, --vimine-error, --vimine-card-width, --vimine-card-shadow. Le stringhe seguono la lingua dell’elemento o della pagina (lang, una delle lingue di Vimine), in italiano altrimenti.

<vimine-enroll> porta il tuo stile anche dentro il modulo, che è una pagina di Vimine in un iframe (dalla 0.3.2). Legge quattro variabili quando si collega e le passa alla pagina:

vimine-enroll {
    --vimine-scheme: light;          /* light o dark: lo schema della pagina */
    --vimine-accent: #1e3a5f;        /* pulsanti, link, campi attivi, il nome dell'associazione */
    --vimine-background: transparent; /* lo sfondo dietro le schede: un colore, o transparent */
    --vimine-typeface: lora;          /* il carattere di tutta la pagina */
}

Un colore qualsiasi va bene (un nome, rgb(), hsl()): l’elemento lo passa in esadecimale. L’accento resta il tuo dove si legge sulle schede del modulo; altrimenti la pagina lo schiarisce o lo scurisce finché si legge. Senza variabili il modulo ha l’aspetto di Vimine. Le variabili si ereditano: una regola su :root vale per tutti gli elementi.

--vimine-typeface sceglie il carattere di tutta la pagina, campi compresi, tra quelli che Vimine serve da sé: inter, roboto, open-sans, montserrat, nunito, lora, merriweather, roboto-slab — oppure system, quello del dispositivo. Una pagina in un iframe non può usare i font del tuo sito, e nulla viene scaricato da terzi.