chore: alinhar projeto às regras do agent

src/playground/campo.playground.vue

@@ -0,0 +1,123 @@
+<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="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 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,
+          cep: cep.value,
+          estado: estado.value,
+          cor: cor.value,
+          habilidades: habilidades.value,
+        },
+        null,
+        2
+      )
+    );
+
+    return {
+      nome,
+      telefone,
+      documento,
+      idade,
+      valor,
+      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>