Introdução
O que é o Vitral e o que fica em cada pacote.
O Vitral é uma biblioteca de componentes para Vue 3 com design tokens em três camadas, presets, pass-through para qualquer parte, um modo sem estilo e composables para toasts e confirmações. A aparência é um parâmetro: os presets vão do nativo da web ao desktop, e o seu se apoia nos mesmos tokens.
O conjunto cobre os controles de que uma aplicação é feita, as peças maiores (gráficos, uma agenda, um quadro de tarefas, um editor de texto rico) e os painéis de layout de que toda tela de verdade precisa: StackPanel, DockPanel, Grid com dimensionamento em estrela, SplitView e Splitter.
Em inglês, vitral se diz stained glass.
A aparência é um parâmetro
Nada disso vem embutido. Um tema é uma árvore de tokens compilada em variáveis CSS, então os mesmos componentes aparecem como Prism, Ink, Avalonia ou o que mais você definir, sem fork, sem rebuild e sem uma segunda biblioteca de componentes.
Como é usar
<script setup lang="ts">
import { Button, InputText, Select } from '@vitral/vue';
import { ref } from 'vue';
const name = ref('');
const city = ref(null);
const cities = [
{ name: 'São Paulo', code: 'SP' },
{ name: 'Recife', code: 'REC' }
];
</script>
<template>
<label for="name">Name</label>
<InputText id="name" v-model="name" clearable />
<label for="city">City</label>
<Select id="city" v-model="city" :options="cities" option-label="name" option-value="code" filter />
<Button label="Save" icon="check" />
</template>Os pacotes
| Pacote | O que contém | Framework |
|---|---|---|
| @vitral/core | Focus trap, pilha de camadas descartáveis, posicionamento, z-index, navegação em listas e typeahead, a camada de dados (FilterService, queryData, createDataSource), árvores, cálculos de calendário, formatação e leitura de números, locales | Nenhum |
| @vitral/themes | O motor de tokens (definePreset, palette, compileTheme, createThemeManager) e os presets Prism, Ink, Avalonia e Simple | Nenhum |
| @vitral/styles | O CSS e o mapa de classes de cada componente, escritos sobre tokens, também distribuídos como um único vitral.css | Nenhum |
| @vitral/icons | Ícones SVG como dados | Nenhum |
| @vitral/dom | Aquilo com que os pacotes sem framework renderizam: um patcher com chaves, classes de parte com pass-through, um arrasto de ponteiro, uma rolagem automática e um ícone | Nenhum |
| @vitral/controls | O select, o menu e o painel ancorado de que esses pacotes precisam, sobre a mesma aritmética do core e com os mesmos estilos | Nenhum |
| @vitral/chart | Gráficos em SVG: o motor e createChart(), um renderizador com legenda, tooltip, barra de ferramentas, zoom, brush e teclado. O componente <Chart> o envolve | Nenhum |
| @vitral/datagrid | A tabela de dados: o motor (consulta, ordenação, filtro, páginas, seleção, o layout das colunas) e createDataGrid(), que desenha uma <table> de verdade | Nenhum |
| @vitral/schedule | O calendário e a agenda: o motor (visões, períodos, recorrência, layout) e createSchedule(), com o teclado e os gestos de ponteiro | Nenhum |
| @vitral/taskboard | O quadro de tarefas: o motor (colunas, raias, movimentos, limites de trabalho em andamento) e createTaskboard(), com um arrastar e soltar que o teclado também faz | Nenhum |
| @vitral/editor | A interface do editor de texto rico sobre o motor que está no core: createTextEditor(), a barra de ferramentas, os painéis, a barra flutuante, o menu de barra e a alça de bloco | Nenhum |
| @vitral/spreadsheet | A planilha: o motor (referências A1, fórmulas, o grafo de dependências que diz até onde uma edição chega) e createSpreadsheet(), uma grade virtualizada com o teclado que as planilhas sempre tiveram | Nenhum |
| @vitral/forms | Estado e validação de formulários: caminhos aninhados, arrays de campos, regras prontas, verificações assíncronas e resolvers para bibliotecas de schema | Nenhum |
| @vitral/vue | Componentes, composables, diretivas e o plugin | Vue 3 |
| @vitral/nuxt | O módulo Nuxt: configuração a partir do nuxt.config, auto-imports, estilos renderizados no servidor, o esquema de cores num cookie | Nuxt 4 |
Tudo o que não precisa de framework vive num pacote que não importa nenhum. É isso que deve baratear, mais adiante, um adaptador para React ou Angular: ele escreve a renderização e reaproveita o comportamento, a aparência e o contrato de marcação. Sete deles vão além: o gráfico, a tabela, a agenda, o quadro, o editor e a planilha se desenham sozinhos, e as regras do formulário não desenham nada — então <Chart> e companhia são wrappers, e uma página sem framework chama a mesma função que eles.
Para agentes de código
Esta documentação também é publicada em texto puro, no formato que o llmstxt.org descreve, para que um assistente possa lê-la sem navegador: llms.txt é o índice, llms-full.txt reúne todas as páginas num arquivo só, e qualquer página vira Markdown ao se acrescentar .md à sua URL. O texto de um componente traz suas props, eventos e slots, lidos do código-fonte, e o código completo dos exemplos da sua página.
Próximos passos
- Instalação: o plugin, suas opções, os auto-imports e o caminho sem JavaScript.
- Renderização no servidor: SSR e o módulo Nuxt.
- Temas: como um token vira uma variável CSS, e como mudar um.
- Presets: os temas que vêm prontos, e como começar o seu.
- Templates: aplicações inteiras construídas com os componentes, para visualizar e copiar.
- Componentes: o catálogo, com exemplos ao vivo e tabelas de API.