build

IA.md

@@ -61,7 +61,15 @@ createApp(App)
 ### 2) Importação direta (quando não quiser plugin)
 
 ```ts
-import { EliBotao, EliInput, EliBadge, EliCartao, EliDataHora } from "eli-vue";
+import {
+  EliBotao,
+  EliBadge,
+  EliCartao,
+  EliTabela,
+  EliEntradaTexto,
+  EliEntradaNumero,
+  EliEntradaDataHora,
+} from "eli-vue";
 ```
 
 > Observação: ainda pode ser necessário importar o CSS do pacote:
@@ -82,11 +90,18 @@ import "eli-vue/dist/eli-vue.css";
 </template>
 ```
 
-### Input com v-model
+### Entradas (EliEntrada*) com v-model
+
+O `eli-vue` usa uma família de componentes `EliEntrada*` (em vez do antigo `EliInput`).
+
+#### Texto
 
 ```vue
 <template>
-  <EliInput v-model="nome" label="Nome" placeholder="Digite seu nome" />
+  <EliEntradaTexto
+    v-model:value="nome"
+    :opcoes="{ rotulo: 'Nome', placeholder: 'Digite seu nome' }"
+  />
 </template>
 
 <script lang="ts">
@@ -94,33 +109,37 @@ import { defineComponent, ref } from "vue";
 
 export default defineComponent({
   setup() {
-    const nome = ref("");
-    function salvar() {
-      // ...
-    }
-
-    return { nome, salvar };
+    const nome = ref<string | null>("");
+    return { nome };
   },
 });
 </script>
 ```
 
-### Input de porcentagem
+#### Texto com formato/máscara
 
-Quando precisar de um campo numérico com sufixo `%`, use `type="porcentagem"`.
+> Regra importante: o `value` emitido é **sempre o texto formatado** (igual ao que aparece no input).
 
 ```vue
 <template>
-  <EliInput v-model="taxa" type="porcentagem" label="Taxa" placeholder="0,00" />
+  <EliEntradaTexto
+    v-model:value="documento"
+    :opcoes="{ rotulo: 'CPF/CNPJ', formato: 'cpfCnpj' }"
+  />
+
+  <EliEntradaTexto
+    v-model:value="telefone"
+    :opcoes="{ rotulo: 'Telefone', formato: 'telefone' }"
+  />
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from "vue";
-
 export default defineComponent({
   setup() {
-    const taxa = ref("");
-    return { taxa };
+    const documento = ref<string | null>("");
+    const telefone = ref<string | null>("");
+    return { documento, telefone };
   },
 });
 </script>
@@ -131,10 +150,10 @@ export default defineComponent({
 ```vue
 <template>
   <!-- Valor chega do backend em ISO 8601 (UTC/offset), e o componente exibe em horário local -->
-  <EliDataHora v-model="dataHora" rotulo="Agendamento" />
+  <EliEntradaDataHora v-model:value="dataHora" :opcoes="{ rotulo: 'Agendamento' }" />
 
   <!-- Somente data -->
-  <EliDataHora v-model="data" modo="data" rotulo="Nascimento" />
+  <EliEntradaDataHora v-model:value="data" :opcoes="{ rotulo: 'Nascimento', modo: 'data' }" />
 </template>
 
 <script lang="ts">
@@ -152,6 +171,67 @@ export default defineComponent({
 
 ---
 
+## EliTabela (com filtro avançado)
+
+O componente `EliTabela` suporta:
+- ordenação
+- paginação
+- caixa de busca
+- **filtro avançado (modal)**
+
+### Contrato da tabela (resumo)
+
+O tipo principal é `EliTabelaConsulta<T>` (genérico), exportado de `eli-vue`.
+
+O `filtroAvancado` é uma lista de filtros pré-definidos (o usuário só escolhe quais usar e informa valores):
+
+```ts
+filtroAvancado?: {
+  rotulo: string
+  coluna: keyof T
+  operador: string // ex.: "like", "=", ">", "in", "isNull"
+  entrada: ["texto" | "numero" | "dataHora", { rotulo: string; ... }]
+}[]
+```
+
+### Exemplo mínimo
+
+```ts
+import { EliTabela, celulaTabela } from "eli-vue";
+import type { EliTabelaConsulta } from "eli-vue";
+import type { ComponenteEntrada } from "eli-vue/dist/types/componentes/EliEntrada/tiposEntradas";
+
+type Linha = { nome: string; documento: string; email: string };
+
+const tabela: EliTabelaConsulta<Linha> = {
+  nome: "Exemplo",
+  mostrarCaixaDeBusca: true,
+  registros_por_consulta: 10,
+  colunas: [
+    { rotulo: "Nome", celula: (l) => celulaTabela("textoSimples", { texto: l.nome }), visivel: true },
+  ],
+  filtroAvancado: [
+    {
+      rotulo: "Documento",
+      coluna: "documento",
+      operador: "like",
+      entrada: ["texto", { rotulo: "Documento", formato: "cpfCnpj" }] as unknown as ComponenteEntrada,
+    },
+  ],
+  consulta: async () => ({
+    cod: 0,
+    eCerto: true,
+    eErro: false,
+    mensagem: undefined,
+    valor: { quantidade: 0, valores: [] },
+  }),
+};
+```
+
+> Observação: em modo simulação/local, a tabela pode buscar uma lista completa e aplicar filtro/paginação localmente.
+
+---
+
 ## Troubleshooting (para IAs)
 
 ### 1) “Failed to resolve component”