# 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.