vue-componentes/README.md

eli-vue — Design System (Vue 3 + TypeScript)

Biblioteca de componentes Vue 3 (Design System) para reutilização em múltiplos projetos, com foco em:

• consistência visual e comportamental
• tipagem forte (TypeScript strict)
• documentação em português
• exemplos executáveis via playground

As regras do repositório estão descritas em .agent.

Instalação

Como dependência do projeto:

pnpm add eli-vue

Observação: vue e vuetify são peerDependencies. Garanta que seu projeto já os tenha instalados.

Uso

1) Registro global (plugin)

import { createApp } from "vue";
import EliVue from "eli-vue";

import App from "./App.vue";

createApp(App).use(EliVue).mount("#app");

2) Importação direta de componentes

import { EliBotao, EliInput, EliBadge } from "eli-vue";

Convenções do projeto

• Componentes usam prefixo Eli (ex.: EliBotao, EliInput).
• Pastas seguem português (ex.: src/componentes/botao, src/componentes/campo, src/componentes/indicador).
• Sem TSX; padrão SFC: <template> + <script lang="ts"> + defineComponent.
• Evitar any.

Como criar um novo componente (checklist)

1. Criar pasta em src/componentes/<nome_em_portugues>/
2. Criar EliNomeDoComponente.vue com defineComponent + comentários úteis
3. Criar index.ts re-exportando o componente
4. Criar README.md do componente (API, exemplos, casos de borda)
5. Criar playground em src/playground/<nome>.playground.vue (3+ variações)
6. Exportar no src/index.ts

Como rodar o playground

pnpm dev

O playground fica em src/playground e serve para validar visualmente os componentes durante o desenvolvimento.