# Elementos (low-code)

> Os custom elements <vimine-sign-in>, <vimine-card> e <vimine-enroll> — uma tag HTML, nenhum framework.

URL: https://developers.vimine.network/pt/sdk/elements/

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

```html
<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](https://developers.vimine.network/pt/guides/embed-and-verify/#quem-já-tem-uma-conta-vimine)) |
| `<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](https://developers.vimine.network/pt/guides/events/#quem-ainda-não-é-associado)), 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:

```css
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.