Éléments (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="/members" handle-redirect lang="en"></vimine-sign-in>
<vimine-card lang="en"></vimine-card>
<vimine-enroll slug="your-slug"></vimine-enroll>

defineVimineElements(options | client) crée (ou reprend) le client navigateur et enregistre les trois éléments ; il renvoie le client pour que le reste de la page puisse le partager.

Élément	Attributs
<vimine-sign-in>	scope, return-to, label, label-signed-in, everywhere, handle-redirect, lang	bouton de connexion / déconnexion ; avec handle-redirect, il termine de lui-même l’échange du code sur la page de callback ; émet vimine-change { signedIn }
<vimine-card>	lang	la carte du membre connecté (SVG avec le QR à jour) ; se redessine quand la session change ; émet vimine-card
<vimine-enroll>	slug, app-url, height, lang	le formulaire d’adhésion (iframe), dans la langue de l’élément ; à une personne qui a déjà un compte Vimine, il propose Continuer sur Vimine, qui ouvre la page dans un nouvel onglet où elle adhère en une étape (pourquoi un nouvel onglet)
<vimine-events>	slug, filter, limit, detail-url, app-url, lang	les événements de l’association : les publics pour un visiteur, tous pour un membre connecté, avec les types d’inscription (contribution, places). Un membre connecté a un bouton S’inscrire par type. À un visiteur, il propose Adhérer à l’association et réserver, qui ouvre la page d’adhésion de Vimine avec l’événement dans un nouvel onglet (comment ça marche), et Déjà membre ? Se connecter ; là où l’association ne prend pas de demandes d’adhésion, il ne reste que Se connecter pour s’inscrire (depuis 0.3.1). detail-url avec {slug} ajoute un lien vers le détail ; déclenche vimine-registration { registration }

Shadow DOM : stylez avec --vimine-font, --vimine-color, --vimine-accent, --vimine-accent-contrast, --vimine-radius, --vimine-padding, --vimine-muted, --vimine-error, --vimine-card-width, --vimine-card-shadow. Les textes suivent la langue de l’élément ou de la page (lang, une des langues de Vimine), en italien sinon.

<vimine-enroll> porte aussi votre style dans le formulaire, qui est une page Vimine dans une iframe (depuis 0.3.2). Il lit quatre variables à sa connexion et les transmet à la page :

vimine-enroll {
    --vimine-scheme: light;          /* light ou dark : le thème de la page */
    --vimine-accent: #1e3a5f;        /* boutons, liens, champs actifs, le nom de l’association */
    --vimine-background: transparent; /* le fond derrière les encadrés : une couleur, ou transparent */
    --vimine-typeface: lora;          /* la police de toute la page */
}

N’importe quelle couleur convient (un nom, rgb(), hsl()) : l’élément la transmet en hexadécimal. L’accent reste le vôtre là où il se lit sur les encadrés du formulaire ; sinon, la page l’éclaircit ou l’assombrit jusqu’à ce qu’il se lise. Sans les variables, le formulaire a l’apparence de Vimine. Les variables se transmettent par héritage : une seule règle sur :root sert tous les éléments.

--vimine-typeface définit la police de toute la page, champs compris, parmi celles que Vimine sert lui-même : inter, roboto, open-sans, montserrat, nunito, lora, merriweather, roboto-slab — ou system, celle de l’appareil. Une page dans une iframe ne peut pas utiliser les polices de votre site, et rien n’est téléchargé chez un tiers.