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) cria (ou recebe) o cliente do navegador e registra os três elementos; ele devolve o cliente para que o resto da página possa compartilhá-lo.

Elemento	Atributos
<vimine-sign-in>	scope, return-to, label, label-signed-in, everywhere, handle-redirect, lang	botão Entrar / Sair; com handle-redirect ele conclui sozinho a troca do código na página de callback; emite vimine-change { signedIn }
<vimine-card>	lang	a carteirinha do associado que entrou (SVG com o QR ao vivo); é renderizado de novo quando a sessão muda; emite vimine-card
<vimine-enroll>	slug, app-url, height, lang	o formulário de adesão (iframe), no idioma do elemento; a quem já tem uma conta Vimine é oferecido Continue no Vimine, que abre a página numa nova aba onde a pessoa se associa num só passo (por que uma nova aba)
<vimine-events>	slug, filter, limit, detail-url, app-url, lang	os eventos da associação: os públicos para um visitante, todos para um associado que entrou, com os tipos de inscrição (contribuição, vagas). Um associado que entrou recebe um botão Inscrever-se por tipo. A um visitante é oferecido Associe-se e reserve, que abre a página de adesão do Vimine com o evento numa nova aba (como funciona), e Já sou associado: entrar; quando a associação não recebe pedidos de adesão, resta só Entre para se inscrever (desde a 0.3.1). detail-url com {slug} adiciona um link de detalhes; dispara vimine-registration { registration }

Shadow DOM: estilize por meio de --vimine-font, --vimine-color, --vimine-accent, --vimine-accent-contrast, --vimine-radius, --vimine-padding, --vimine-muted, --vimine-error, --vimine-card-width, --vimine-card-shadow. Os textos seguem o idioma do elemento ou da página (lang, um dos idiomas do Vimine); senão, em italiano.

O <vimine-enroll> também leva o seu estilo para o formulário, que é uma página do Vimine num iframe (desde a 0.3.2). Ele lê quatro variáveis quando se conecta e as passa para a página:

vimine-enroll {
    --vimine-scheme: light;          /* light ou dark: o esquema da página */
    --vimine-accent: #1e3a5f;        /* botões, links, campos em foco, o nome da associação */
    --vimine-background: transparent; /* o fundo atrás dos cartões: uma cor, ou transparent */
    --vimine-typeface: lora;          /* a fonte da página inteira */
}

Qualquer cor funciona (um nome, rgb(), hsl()): o elemento a passa em hexadecimal. O destaque continua sendo o seu onde ele se lê bem sobre os cartões do formulário; senão a página o clareia ou escurece até que se leia. Sem as variáveis, o formulário tem a aparência do Vimine. As variáveis são herdadas: uma regra em :root serve para todos os elementos.

--vimine-typeface define a fonte da página inteira, campos incluídos, entre as que o próprio Vimine serve: inter, roboto, open-sans, montserrat, nunito, lora, merriweather, roboto-slab — ou system, a do dispositivo. Uma página num iframe não pode usar as fontes do seu site, e nada é baixado de terceiros.