Elementos (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) crea (o recibe) el cliente de navegador y registra los tres elementos; devuelve el cliente para que el resto de la página pueda compartirlo.

Elemento	Atributos
<vimine-sign-in>	scope, return-to, label, label-signed-in, everywhere, handle-redirect, lang	botón Iniciar sesión / Cerrar sesión; con handle-redirect completa por sí solo el intercambio del código en la página de callback; emite vimine-change { signedIn }
<vimine-card>	lang	el carné del socio que ha iniciado sesión (SVG con el QR en vivo); se vuelve a dibujar cuando cambia la sesión; emite vimine-card
<vimine-enroll>	slug, app-url, height, lang	el formulario de inscripción (iframe), en el idioma del elemento; a quien ya tiene una cuenta de Vimine se le ofrece Continuar en Vimine, que abre la página en una pestaña nueva donde se hace socio en un solo paso (por qué una pestaña nueva)
<vimine-events>	slug, filter, limit, detail-url, app-url, lang	los eventos de la asociación: los públicos para un visitante, todos para un socio que ha iniciado sesión, con los tipos de inscripción (contribución, plazas). Un socio que ha iniciado sesión tiene un botón Inscríbete por tipo. A un visitante se le ofrece Hazte socio y reserva, que abre en una pestaña nueva la página de inscripción de Vimine con el evento (cómo funciona), y ¿Ya eres socio? Inicia sesión; donde la asociación no acepta solicitudes de inscripción solo queda Inicia sesión para inscribirte (desde la 0.3.1). detail-url con {slug} añade un enlace a los detalles; emite vimine-registration { registration }

Shadow DOM: el estilo se aplica con --vimine-font, --vimine-color, --vimine-accent, --vimine-accent-contrast, --vimine-radius, --vimine-padding, --vimine-muted, --vimine-error, --vimine-card-width, --vimine-card-shadow. Los textos siguen el idioma del elemento o de la página (lang, uno de los idiomas de Vimine); si no, en italiano.

<vimine-enroll> lleva tu estilo también al formulario, que es una página de Vimine en un iframe (desde la 0.3.2). Lee cuatro variables al conectarse y se las pasa a la página:

vimine-enroll {
    --vimine-scheme: light;          /* light o dark: el esquema de la página */
    --vimine-accent: #1e3a5f;        /* botones, enlaces, campos con el foco, el nombre de la asociación */
    --vimine-background: transparent; /* el fondo detrás de las tarjetas: un color, o transparent */
    --vimine-typeface: lora;          /* el tipo de letra de toda la página */
}

Vale cualquier color (un nombre, rgb(), hsl()): el elemento lo pasa en hexadecimal. El color de acento sigue siendo el tuyo donde se lee bien sobre las tarjetas del formulario; si no, la página lo aclara o lo oscurece hasta que se lea. Sin las variables, el formulario tiene el aspecto de Vimine. Las variables se heredan: una sola regla en :root sirve para todos los elementos.

--vimine-typeface fija el tipo de letra de toda la página, campos incluidos, entre los que sirve el propio Vimine: inter, roboto, open-sans, montserrat, nunito, lora, merriweather, roboto-slab — o system, el del dispositivo. Una página en un iframe no puede usar las fuentes de tu sitio, y no se descarga nada de terceros.