rafatoração de componentes de entrada

src/componentes/EliEntrada/EliEntradaTexto.vue

@@ -1,6 +1,8 @@
 <template>
   <v-text-field
     v-model="localValue"
+    :type="inputHtmlType"
+    :inputmode="inputMode"
     :label="opcoes?.rotulo"
     :placeholder="opcoes?.placeholder"
     :counter="opcoes?.limiteCaracteres"
@@ -8,12 +10,16 @@
     v-bind="attrs"
     @focus="() => emit('focus')"
     @blur="() => emit('blur')"
+    @input="onInput"
   />
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from "vue";
 import type { PadroesEntradas } from "./tiposEntradas";
+import { formatarCpfCnpj } from "./utils/cpfCnpj";
+import { formatTelefone } from "./utils/telefone";
+import { formatarCep } from "./utils/cep";
 
 type EntradaTexto = PadroesEntradas["texto"];
 
@@ -40,6 +46,8 @@ export default defineComponent({
     blur: () => true,
   },
   setup(props, { attrs, emit }) {
+    const formato = computed(() => props.opcoes?.formato ?? "texto");
+
     const localValue = computed<EntradaTexto["value"]>({
       get: () => props.value,
       set: (v) => {
@@ -49,7 +57,43 @@ export default defineComponent({
       },
     });
 
-    return { attrs, emit, localValue };
+    const inputHtmlType = computed(() => {
+      if (formato.value === "email") return "email";
+      if (formato.value === "url") return "url";
+      return "text";
+    });
+
+    const inputMode = computed<string | undefined>(() => {
+      if (formato.value === "telefone") return "tel";
+      if (formato.value === "cpfCnpj" || formato.value === "cep") return "numeric";
+      return undefined;
+    });
+
+    function aplicarFormato(valor: string) {
+      switch (formato.value) {
+        case "telefone":
+          return formatTelefone(valor);
+        case "cpfCnpj":
+          return formatarCpfCnpj(valor);
+        case "cep":
+          return formatarCep(valor);
+        default:
+          return valor;
+      }
+    }
+
+    function onInput(e: Event) {
+      const target = e.target as HTMLInputElement;
+      const resultado = aplicarFormato(target.value);
+
+      // garante que o input mostre o valor formatado
+      target.value = resultado;
+
+      // regra do projeto: value sempre igual ao que aparece
+      localValue.value = resultado;
+    }
+
+    return { attrs, emit, localValue, inputHtmlType, inputMode, onInput };
   },
 });
 </script>