63 lines
1.7 KiB
Markdown
63 lines
1.7 KiB
Markdown
# 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:
|
|
|
|
```bash
|
|
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)
|
|
|
|
```ts
|
|
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
|
|
|
|
```ts
|
|
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
|
|
|
|
```bash
|
|
pnpm dev
|
|
```
|
|
|
|
O playground fica em `src/playground` e serve para validar visualmente os componentes durante o desenvolvimento.
|