Criado IA.md
This commit is contained in:
parent
5bb6732b81
commit
b63c4e3d9a
2 changed files with 164 additions and 0 deletions
12
.agent
12
.agent
|
|
@ -188,6 +188,18 @@ Sempre que uma mudança for relevante para desenvolvedores/usuários/IA, **atual
|
||||||
- README da raiz (se impactar o projeto)
|
- README da raiz (se impactar o projeto)
|
||||||
- README do componente (se impactar API/uso/comportamento)
|
- README do componente (se impactar API/uso/comportamento)
|
||||||
|
|
||||||
|
### Documentação para IAs consumidoras (IA.md)
|
||||||
|
|
||||||
|
O arquivo **`IA.md`** (na raiz) é um guia para **IAs que vão consumir/importar** o pacote `eli-vue`.
|
||||||
|
|
||||||
|
Sempre que houver mudanças relevantes de consumo, **`IA.md` deve ser atualizado** — por exemplo:
|
||||||
|
|
||||||
|
- instalação / comandos recomendados (pnpm/npm/yarn)
|
||||||
|
- peerDependencies (Vue/Vuetify) e requisitos mínimos
|
||||||
|
- forma de uso do plugin (`import EliVue from "eli-vue"`) e registro
|
||||||
|
- caminho/nome do CSS publicado em `dist/` (ex.: `eli-vue/dist/eli-vue.css`)
|
||||||
|
- exports públicos (componentes adicionados/removidos/renomeados)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Postura do agente ao gerar código
|
## Postura do agente ao gerar código
|
||||||
|
|
|
||||||
152
IA.md
Normal file
152
IA.md
Normal file
|
|
@ -0,0 +1,152 @@
|
||||||
|
# IA.md — Guia para IAs (consumidoras) do pacote `eli-vue`
|
||||||
|
|
||||||
|
Este arquivo existe para **IAs e automações** que precisam **importar e usar** o pacote `eli-vue` em projetos Vue 3.
|
||||||
|
|
||||||
|
> Fonte da verdade das regras internas do repositório: **`.agent`**.
|
||||||
|
> Este `IA.md` é focado no **uso do pacote como dependência** (projeto consumidor).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## O que é o `eli-vue`
|
||||||
|
|
||||||
|
Biblioteca (Design System) de componentes para **Vue 3** com **TypeScript** e integração com **Vuetify 3**.
|
||||||
|
|
||||||
|
### Premissas importantes
|
||||||
|
|
||||||
|
- O `eli-vue` **não cria** nem configura Vuetify no seu projeto.
|
||||||
|
- `vue` e `vuetify` são **peerDependencies**: o projeto consumidor precisa ter ambos instalados.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Instalação (projeto consumidor)
|
||||||
|
|
||||||
|
> Preferência do repo: `pnpm`.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm add eli-vue
|
||||||
|
```
|
||||||
|
|
||||||
|
Se o projeto ainda não tiver as peer dependencies, instale também:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm add vue vuetify
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Uso recomendado
|
||||||
|
|
||||||
|
### 1) Registro global via plugin (recomendado)
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { createApp } from "vue";
|
||||||
|
import App from "./App.vue";
|
||||||
|
|
||||||
|
// Vuetify
|
||||||
|
import "vuetify/styles";
|
||||||
|
import { createVuetify } from "vuetify";
|
||||||
|
|
||||||
|
// eli-vue
|
||||||
|
import EliVue from "eli-vue";
|
||||||
|
import "eli-vue/dist/eli-vue.css";
|
||||||
|
|
||||||
|
const vuetify = createVuetify({});
|
||||||
|
|
||||||
|
createApp(App)
|
||||||
|
.use(vuetify)
|
||||||
|
.use(EliVue)
|
||||||
|
.mount("#app");
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2) Importação direta (quando não quiser plugin)
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { EliBotao, EliInput, EliBadge, EliCartao } from "eli-vue";
|
||||||
|
```
|
||||||
|
|
||||||
|
> Observação: ainda pode ser necessário importar o CSS do pacote:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import "eli-vue/dist/eli-vue.css";
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Exemplos mínimos
|
||||||
|
|
||||||
|
### Botão
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<EliBotao @click="salvar">Salvar</EliBotao>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Input com v-model
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<EliInput v-model="nome" label="Nome" placeholder="Digite seu nome" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, ref } from "vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
setup() {
|
||||||
|
const nome = ref("");
|
||||||
|
function salvar() {
|
||||||
|
// ...
|
||||||
|
}
|
||||||
|
|
||||||
|
return { nome, salvar };
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Troubleshooting (para IAs)
|
||||||
|
|
||||||
|
### 1) “Failed to resolve component”
|
||||||
|
|
||||||
|
Provável causa: componente não foi registrado.
|
||||||
|
|
||||||
|
- Se estiver usando plugin: confirme `app.use(EliVue)`
|
||||||
|
- Se estiver importando direto: registre localmente no componente
|
||||||
|
|
||||||
|
### 2) Estilos não aplicam
|
||||||
|
|
||||||
|
Confirme que o projeto importou:
|
||||||
|
|
||||||
|
- `vuetify/styles`
|
||||||
|
- `eli-vue/dist/eli-vue.css`
|
||||||
|
|
||||||
|
### 3) Ícones não aparecem
|
||||||
|
|
||||||
|
Alguns exemplos usam `<v-icon>` (MDI). O `eli-vue` **não instala** ícones automaticamente no projeto consumidor.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Como a IA deve agir ao modificar um projeto consumidor
|
||||||
|
|
||||||
|
Quando for integrar `eli-vue` num projeto existente:
|
||||||
|
|
||||||
|
1) Verifique se **Vue 3** e **Vuetify 3** já estão configurados.
|
||||||
|
2) Prefira usar o **plugin** do `eli-vue` (simplifica registro).
|
||||||
|
3) Garanta o import do CSS do pacote (`eli-vue/dist/eli-vue.css`).
|
||||||
|
4) Ao ver erros de tipos, valide se o projeto está usando TypeScript e se o build está resolvendo `types` corretamente.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Quando este arquivo deve ser atualizado
|
||||||
|
|
||||||
|
Atualize este `IA.md` quando houver mudanças em qualquer um destes pontos:
|
||||||
|
|
||||||
|
- caminho/nome do CSS em `dist/`
|
||||||
|
- forma de instalação e/ou peerDependencies
|
||||||
|
- forma de uso do plugin/export principal
|
||||||
|
- lista de exports públicos (novos componentes, renomes, remoções)
|
||||||
|
- mudanças de comportamento relevantes para consumo
|
||||||
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue