rafatoração de componentes de entrada

src/playground/App.vue

@@ -8,7 +8,6 @@
       <v-tab value="botao">Botão</v-tab>
       <v-tab value="indicador">Indicador</v-tab>
       <v-tab value="cartao">Cartão</v-tab>
-      <v-tab value="campo">Campo</v-tab>
       <v-tab value="entradas">Entradas</v-tab>
       <v-tab value="data_hora">Data e hora</v-tab>
       <v-tab value="tabela">Tabela</v-tab>
@@ -20,7 +19,6 @@
     <BotaoPlayground v-if="aba === 'botao'" />
     <IndicadorPlayground v-else-if="aba === 'indicador'" />
     <CartaoPlayground v-else-if="aba === 'cartao'" />
-    <CampoPlayground v-else-if="aba === 'campo'" />
     <EntradasPlayground v-else-if="aba === 'entradas'" />
     <DataHoraPlayground v-else-if="aba === 'data_hora'" />
     <TabelaPlayground v-else-if="aba === 'tabela'" />
@@ -33,7 +31,6 @@ import { defineComponent } from "vue";
 import BotaoPlayground from "./botao.playground.vue";
 import IndicadorPlayground from "./indicador.playground.vue";
 import CartaoPlayground from "./cartao.playground.vue";
-import CampoPlayground from "./campo.playground.vue";
 import EntradasPlayground from "./entradas.playground.vue";
 import DataHoraPlayground from "./data_hora.playground.vue";
 import TabelaPlayground from "./tabela.playground.vue";
@@ -43,7 +40,6 @@ type AbaPlayground =
   | "botao"
   | "indicador"
   | "cartao"
-  | "campo"
   | "entradas"
   | "data_hora"
   | "tabela"
@@ -53,7 +49,6 @@ const mapaHashParaAba: Record<string, AbaPlayground> = {
   botao: "botao",
   indicador: "indicador",
   cartao: "cartao",
-  campo: "campo",
   entradas: "entradas",
   "data-hora": "data_hora",
   tabela: "tabela",
@@ -64,7 +59,6 @@ const mapaAbaParaHash: Record<AbaPlayground, string> = {
   botao: "botao",
   indicador: "indicador",
   cartao: "cartao",
-  campo: "campo",
   entradas: "entradas",
   data_hora: "data-hora",
   tabela: "tabela",
@@ -77,7 +71,6 @@ export default defineComponent({
     BotaoPlayground,
     IndicadorPlayground,
     CartaoPlayground,
-    CampoPlayground,
     EntradasPlayground,
     DataHoraPlayground,
     TabelaPlayground,

src/playground/campo.playground.vue

@@ -1,127 +0,0 @@
-<template>
-  <section class="stack">
-    <h2>EliInput (campo)</h2>
-
-    <div class="grid">
-      <EliInput v-model="nome" label="Nome" placeholder="Digite seu nome" />
-      <EliInput v-model="telefone" type="telefone" label="Telefone" />
-      <EliInput v-model="documento" type="cpfCnpj" label="CPF / CNPJ" />
-
-      <EliInput v-model="idade" type="numericoInteiro" label="Idade" />
-      <EliInput v-model="valor" type="numericoMoeda" label="Valor" />
-      <EliInput v-model="taxa" type="porcentagem" label="Taxa" placeholder="0,00" />
-      <EliInput v-model="cep" type="cep" label="CEP" placeholder="00000-000" />
-
-      <EliInput
-        v-model="estado"
-        type="select"
-        label="Estado"
-        multiple
-        :options="[
-          { label: 'São Paulo', value: 'SP' },
-          { label: 'Rio de Janeiro', value: 'RJ' },
-        ]"
-      />
-
-      <EliInput
-        v-model="cor"
-        type="radio"
-        label="Cor favorita"
-        :options="[
-          { label: 'Azul', value: 'azul' },
-          { label: 'Verde', value: 'verde' },
-        ]"
-      />
-
-      <EliInput
-        v-model="habilidades"
-        type="checkbox"
-        label="Habilidades"
-        :options="[
-          { label: 'Vue', value: 'vue' },
-          { label: 'React', value: 'react' },
-        ]"
-      />
-    </div>
-
-    <pre class="debug">{{ debug }}</pre>
-  </section>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, ref } from "vue";
-import { EliInput } from "@/componentes/campo";
-
-type Cor = "azul" | "verde" | null;
-type Habilidade = "vue" | "react";
-
-export default defineComponent({
-  name: "CampoPlayground",
-  components: { EliInput },
-  setup() {
-    const nome = ref("");
-    const telefone = ref("");
-    const documento = ref("");
-    const idade = ref("");
-    const valor = ref("");
-    const taxa = ref("");
-    const cep = ref("");
-    const estado = ref<string[]>([]);
-    const cor = ref<Cor>(null);
-    const habilidades = ref<Habilidade[]>([]);
-
-    const debug = computed(() =>
-      JSON.stringify(
-        {
-          nome: nome.value,
-          telefone: telefone.value,
-          documento: documento.value,
-          idade: idade.value,
-          valor: valor.value,
-          taxa: taxa.value,
-          cep: cep.value,
-          estado: estado.value,
-          cor: cor.value,
-          habilidades: habilidades.value,
-        },
-        null,
-        2
-      )
-    );
-
-    return {
-      nome,
-      telefone,
-      documento,
-      idade,
-      valor,
-      taxa,
-      cep,
-      estado,
-      cor,
-      habilidades,
-      debug,
-    };
-  },
-});
-</script>
-
-<style scoped>
-.stack {
-  display: grid;
-  gap: 16px;
-}
-
-.grid {
-  display: grid;
-  gap: 12px;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-}
-
-.debug {
-  padding: 12px;
-  background: rgba(0, 0, 0, 0.04);
-  border-radius: 8px;
-  overflow: auto;
-}
-</style>

src/playground/cartao.playground.vue

@@ -3,10 +3,9 @@
     <h2>EliCartao (pipeline)</h2>
 
     <div class="toolbar">
-      <EliInput
-        v-model="filtro"
-        label="Buscar"
-        placeholder="Cliente, título, valor..."
+      <EliEntradaTexto
+        v-model:value="filtro"
+        :opcoes="{ rotulo: 'Buscar', placeholder: 'Cliente, título, valor...' }"
         density="compact"
       />
 
@@ -48,7 +47,7 @@
 import { defineComponent, ref } from "vue";
 import { EliBadge } from "@/componentes/indicador";
 import { EliBotao } from "@/componentes/botao";
-import { EliInput } from "@/componentes/campo";
+import { EliEntradaTexto } from "@/componentes/EliEntrada";
 import { EliCartao } from "@/componentes/cartao";
 import type { CartaoStatus } from "@/tipos";
 
@@ -68,7 +67,7 @@ type Coluna = {
 
 export default defineComponent({
   name: "CartaoPlayground",
-  components: { EliBadge, EliBotao, EliInput, EliCartao },
+  components: { EliBadge, EliBotao, EliEntradaTexto, EliCartao },
   setup() {
     const filtro = ref("");
 

src/playground/ola_mundo.playground.vue

@@ -3,7 +3,7 @@
     <h2>EliOlaMundo</h2>
     <p class="muted">
       Demo integrada (útil para smoke-test visual). Para testes específicos,
-      prefira os playgrounds de <code>EliBotao</code>, <code>EliInput</code> e
+      prefira os playgrounds de <code>EliBotao</code>, <code>EliEntradas</code> e
       <code>EliBadge</code>.
     </p>