Elements (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) creates (or takes) the browser client and registers the three elements; it returns the client so the rest of the page can share it.

Element	Attributes
<vimine-sign-in>	scope, return-to, label, label-signed-in, everywhere, handle-redirect, lang	Sign in / Sign out button; with handle-redirect it completes the code exchange on the callback page by itself; emits vimine-change { signedIn }
<vimine-card>	lang	the signed-in member’s card (SVG with the live QR); re-renders on session changes; emits vimine-card
<vimine-enroll>	slug, app-url, height, lang	the enrolment form (iframe), in the element’s language; someone who already has a Vimine account is offered Continue on Vimine, which opens the page in a new tab where they join in one step (why a new tab)
<vimine-events>	slug, filter, limit, detail-url, app-url, lang	the association’s events: the public ones for a visitor, every one for a signed-in member, with the registration types (contribution, places). A signed-in member gets a Register button per type. A visitor is offered Join the association and book, which opens Vimine’s enrolment page with the event in a new tab (how it works), and Already a member? Sign in; where the association takes no membership requests only Sign in to register is left (since 0.3.1). detail-url with {slug} adds a details link; fires vimine-registration { registration }

Shadow DOM: style through --vimine-font, --vimine-color, --vimine-accent, --vimine-accent-contrast, --vimine-radius, --vimine-padding, --vimine-muted, --vimine-error, --vimine-card-width, --vimine-card-shadow. Strings follow the language of the element or the page (lang, any language Vimine speaks), Italian otherwise.

<vimine-enroll> carries your style into the form too, which is a Vimine page in an iframe (since 0.3.2). It reads four variables when it connects and passes them to the page:

vimine-enroll {
    --vimine-scheme: light;          /* light or dark: the page's scheme */
    --vimine-accent: #1e3a5f;        /* buttons, links, focused fields, the association's name */
    --vimine-background: transparent; /* the ground behind the cards: a colour, or transparent */
    --vimine-typeface: lora;          /* the face of the whole page */
}

Any colour works (a name, rgb(), hsl()): the element passes it as hex. The accent stays yours where it reads on the form’s cards; otherwise the page lightens or darkens it until it does. Without the variables the form looks like Vimine. The variables inherit: one rule on :root serves every element.

--vimine-typeface sets the face of the whole page, fields included, among those Vimine serves itself: inter, roboto, open-sans, montserrat, nunito, lora, merriweather, roboto-slab — or system, the device’s own. A page in an iframe cannot use your site’s fonts, and nothing is downloaded from a third party.