adiconado imput de porcentagem

IA.md

@@ -105,6 +105,27 @@ export default defineComponent({
 </script>
 ```
 
+### Input de porcentagem
+
+Quando precisar de um campo numérico com sufixo `%`, use `type="porcentagem"`.
+
+```vue
+<template>
+  <EliInput v-model="taxa" type="porcentagem" label="Taxa" placeholder="0,00" />
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  setup() {
+    const taxa = ref("");
+    return { taxa };
+  },
+});
+</script>
+```
+
 ### Data e hora (entrada) com suporte a UTC/Z
 
 ```vue
@@ -173,5 +194,3 @@ Atualize este `IA.md` quando houver mudanças em qualquer um destes pontos:
 - forma de uso do plugin/export principal
 - lista de exports públicos (novos componentes, renomes, remoções)
 - mudanças de comportamento relevantes para consumo
-
-

README.md

@@ -160,6 +160,27 @@ export default defineComponent({
 </script>
 ```
 
+### EliInput (porcentagem)
+
+Use `type="porcentagem"` quando precisar de um campo numérico com sufixo `%` embutido.
+
+```vue
+<template>
+  <EliInput v-model="taxa" type="porcentagem" label="Taxa" placeholder="0,00" />
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+
+export default defineComponent({
+  setup() {
+    const taxa = ref("");
+    return { taxa };
+  },
+});
+</script>
+```
+
 ### EliBadge
 
 ```vue

dist/eli-vue.css

@@ -1 +1 @@
-[data-v-de2fbf2f] .v-badge__badge,[data-v-de2fbf2f] .v-badge__content{border-radius:var(--eli-badge-radius)!important}.eli-input[data-v-2f57f5c8]{width:100%}.checkbox-group[data-v-2f57f5c8]{display:flex;gap:8px;flex-wrap:wrap}.cursor-pointer[data-v-2f57f5c8]{cursor:pointer}.eli-cartao[data-v-6c492bd9]{border-radius:12px}.eli-cartao__titulo[data-v-6c492bd9]{display:flex;align-items:center;justify-content:space-between;gap:12px}.eli-cartao__titulo-texto[data-v-6c492bd9]{min-width:0}.eli-cartao__conteudo[data-v-6c492bd9]{padding-top:8px}.eli-cartao__acoes[data-v-6c492bd9]{padding-top:0}.eli-cartao--cancelado[data-v-6c492bd9]{opacity:.85}.eli-data-hora[data-v-71afabb6]{width:100%}
+[data-v-de2fbf2f] .v-badge__badge,[data-v-de2fbf2f] .v-badge__content{border-radius:var(--eli-badge-radius)!important}.eli-input[data-v-756cb549]{width:100%}.checkbox-group[data-v-756cb549]{display:flex;gap:8px;flex-wrap:wrap}.cursor-pointer[data-v-756cb549]{cursor:pointer}.eli-cartao[data-v-6c492bd9]{border-radius:12px}.eli-cartao__titulo[data-v-6c492bd9]{display:flex;align-items:center;justify-content:space-between;gap:12px}.eli-cartao__titulo-texto[data-v-6c492bd9]{min-width:0}.eli-cartao__conteudo[data-v-6c492bd9]{padding-top:8px}.eli-cartao__acoes[data-v-6c492bd9]{padding-top:0}.eli-cartao--cancelado[data-v-6c492bd9]{opacity:.85}.eli-data-hora[data-v-71afabb6]{width:100%}

dist/eli-vue.es.js

@@ -1,16 +1,16 @@
-import { defineComponent as R, createBlock as H, openBlock as k, mergeProps as F, withCtx as D, renderSlot as W, computed as E, ref as C, createElementBlock as G, createCommentVNode as pe, createSlots as ke, createVNode as $, createTextVNode as Q, toDisplayString as $e, Fragment as de, renderList as fe, resolveComponent as te, createElementVNode as ae } from "vue";
+import { defineComponent as R, createBlock as H, openBlock as B, mergeProps as F, withCtx as D, renderSlot as W, computed as E, ref as C, createElementBlock as G, createCommentVNode as pe, createSlots as Ee, createVNode as y, createTextVNode as Q, toDisplayString as ye, Fragment as de, renderList as fe, resolveComponent as te, createElementVNode as ae } from "vue";
-import { VBtn as Ee } from "vuetify/components/VBtn";
+import { VBtn as Ce } from "vuetify/components/VBtn";
-import { VBadge as Ce } from "vuetify/components/VBadge";
+import { VBadge as Ie } from "vuetify/components/VBadge";
-import { VCheckbox as Ie } from "vuetify/components/VCheckbox";
+import { VCheckbox as Oe } from "vuetify/components/VCheckbox";
-import { VIcon as Oe } from "vuetify/components/VIcon";
+import { VIcon as Te } from "vuetify/components/VIcon";
-import { VRadio as Te } from "vuetify/components/VRadio";
+import { VRadio as Ue } from "vuetify/components/VRadio";
-import { VRadioGroup as Ue } from "vuetify/components/VRadioGroup";
+import { VRadioGroup as Ye } from "vuetify/components/VRadioGroup";
-import { VSelect as Ye } from "vuetify/components/VSelect";
+import { VSelect as He } from "vuetify/components/VSelect";
-import { VTextField as ye } from "vuetify/components/VTextField";
+import { VTextField as $e } from "vuetify/components/VTextField";
-import { VTextarea as He } from "vuetify/components/VTextarea";
+import { VTextarea as Ae } from "vuetify/components/VTextarea";
-import { VCard as ve, VCardTitle as ge, VCardText as he, VCardActions as be } from "vuetify/components/VCard";
+import { VCard as ge, VCardTitle as ve, VCardText as he, VCardActions as be } from "vuetify/components/VCard";
-import { VContainer as Ae } from "vuetify/components/VGrid";
+import { VContainer as Pe } from "vuetify/components/VGrid";
-const Pe = R({
+const je = R({
   name: "EliBotao",
   inheritAttrs: !1,
   props: {
@@ -37,12 +37,12 @@ const Pe = R({
   }
 }), J = (e, t) => {
   const c = e.__vccOpts || e;
-  for (const [y, v] of t)
+  for (const [$, g] of t)
-    c[y] = v;
+    c[$] = g;
   return c;
 };
-function je(e, t, c, y, v, w) {
+function Ne(e, t, c, $, g, w) {
-  return k(), H(Ee, F({
+  return B(), H(Ce, F({
     color: e.color,
     variant: e.variant,
     size: e.size,
@@ -55,10 +55,10 @@ function je(e, t, c, y, v, w) {
     _: 3
   }, 16, ["color", "variant", "size", "disabled", "loading"]);
 }
-const Ve = /* @__PURE__ */ J(Pe, [["render", je]]), me = {
+const Ve = /* @__PURE__ */ J(je, [["render", Ne]]), me = {
   suave: "4px",
   pill: "10px"
-}, Ne = R({
+}, Fe = R({
   name: "EliBadge",
   inheritAttrs: !1,
   props: {
@@ -97,14 +97,14 @@ const Ve = /* @__PURE__ */ J(Pe, [["render", je]]), me = {
     }
   },
   setup(e) {
-    const t = E(() => e.radius in me ? me[e.radius] : e.radius), c = E(() => e.dot || e.badge !== void 0 ? e.visible : !1), y = E(() => ({
+    const t = E(() => e.radius in me ? me[e.radius] : e.radius), c = E(() => e.dot || e.badge !== void 0 ? e.visible : !1), $ = E(() => ({
       "--eli-badge-radius": t.value
     }));
-    return { showBadge: c, badgeStyle: y };
+    return { showBadge: c, badgeStyle: $ };
   }
 });
-function Fe(e, t, c, y, v, w) {
+function Le(e, t, c, $, g, w) {
-  return e.showBadge ? (k(), H(Ce, F({
+  return e.showBadge ? (B(), H(Ie, F({
     key: 0,
     color: e.color
   }, e.$attrs, {
@@ -121,37 +121,40 @@ function Fe(e, t, c, y, v, w) {
     _: 3
   }, 16, ["color", "location", "offset-x", "offset-y", "dot", "content", "style"])) : W(e.$slots, "default", { key: 1 }, void 0, !0);
 }
-const le = /* @__PURE__ */ J(Ne, [["render", Fe], ["__scopeId", "data-v-de2fbf2f"]]);
+const le = /* @__PURE__ */ J(Fe, [["render", Le], ["__scopeId", "data-v-de2fbf2f"]]);
-function Le(e) {
-  return e.replace(/\D+/g, "");
-}
 function ze(e) {
-  const t = Le(e);
+  return e.replace(/\D+/g, "");
-  return t.length <= 11 ? t.replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d{1,2})$/, "$1-$2").slice(0, 14) : t.replace(/^(\d{2})(\d)/, "$1.$2").replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3").replace(/\.(\d{3})(\d)/, ".$1/$2").replace(/(\d{4})(\d)/, "$1-$2").slice(0, 18);
 }
 function We(e) {
-  return e.replace(/\D+/g, "");
+  const t = ze(e);
+  return t.length <= 11 ? t.replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d{1,2})$/, "$1-$2").slice(0, 14) : t.replace(/^(\d{2})(\d)/, "$1.$2").replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3").replace(/\.(\d{3})(\d)/, ".$1/$2").replace(/(\d{4})(\d)/, "$1-$2").slice(0, 18);
 }
 function Re(e) {
-  const t = We(e);
+  return e.replace(/\D+/g, "");
+}
+function Je(e) {
+  const t = Re(e);
   return t ? t.length <= 10 ? t.replace(/^(\d{2})(\d)/, "($1) $2").replace(/(\d{4})(\d)/, "$1-$2").slice(0, 14) : t.replace(/^(\d{2})(\d)/, "($1) $2").replace(/(\d{5})(\d)/, "$1-$2").slice(0, 15) : "";
 }
 function se(e) {
   return e.replace(/\D+/g, "");
 }
-function Je(e) {
+function Se(e) {
   const t = e.replace(/[^\d,]/g, ""), c = t.split(",");
   return c.length > 2 ? c[0] + "," + c.slice(1).join("") : t;
 }
 function qe(e) {
+  return Se(e.replace(/%/g, ""));
+}
+function Ze(e) {
   const t = se(e);
   return t ? (parseInt(t, 10) / 100).toFixed(2).replace(".", ",").replace(/\B(?=(\d{3})+(?!\d))/g, ".") : "";
 }
-function Ze(e) {
+function Xe(e) {
   const t = se(e).slice(0, 8);
   return t.length <= 5 ? t : t.replace(/^(\d{5})(\d{1,3})$/, "$1-$2");
 }
-const Xe = R({
+const Ge = R({
   name: "EliInput",
   inheritAttrs: !1,
   props: {
@@ -194,10 +197,10 @@ const Xe = R({
   },
   emits: ["update:modelValue", "change", "focus", "blur"],
   setup(e, { emit: t, attrs: c }) {
-    const y = C(!1), v = C(!1), w = E({
+    const $ = C(!1), g = C(!1), w = E({
       get: () => e.modelValue,
-      set: (g) => {
+      set: (h) => {
-        t("update:modelValue", g), t("change", g);
+        t("update:modelValue", h), t("change", h);
       }
     }), d = E(
       () => [
@@ -211,54 +214,59 @@ const Xe = R({
         "numericoInteiro",
         "numericoDecimal",
         "numericoMoeda",
+        "porcentagem",
         "cep"
       ].includes(e.type)
     ), f = E(
-      () => e.type === "password" ? v.value ? "text" : "password" : "text"
+      () => e.type === "password" ? g.value ? "text" : "password" : "text"
     ), I = E(() => {
       if (e.type === "telefone") return "tel";
+      if (e.type === "porcentagem") return "decimal";
       if (e.type.startsWith("numerico")) return "numeric";
     }), l = E(
-      () => e.error ? "error" : y.value ? e.color : void 0
+      () => e.error ? "error" : $.value ? e.color : void 0
     );
-    function Y(g) {
+    function Y(h) {
-      const T = g.target;
+      const T = h.target;
-      let h = T.value;
+      let v = T.value;
       switch (e.type) {
         case "numericoInteiro":
-          h = se(h);
+          v = se(v);
           break;
         case "numericoDecimal":
-          h = Je(h);
+          v = Se(v);
           break;
         case "numericoMoeda":
-          h = qe(h);
+          v = Ze(v);
+          break;
+        case "porcentagem":
+          v = qe(v);
           break;
         case "telefone":
-          h = Re(h);
+          v = Je(v);
           break;
         case "cpfCnpj":
-          h = ze(h);
+          v = We(v);
           break;
         case "cep":
-          h = Ze(h);
+          v = Xe(v);
           break;
       }
-      T.value = h, t("update:modelValue", h), t("change", h);
+      T.value = v, t("update:modelValue", v), t("change", v);
     }
     function V() {
-      v.value = !v.value;
+      g.value = !g.value;
     }
-    const L = E(() => (e.options || []).map((g) => {
+    const L = E(() => (e.options || []).map((h) => {
-      if (g && typeof g == "object" && "value" in g) {
+      if (h && typeof h == "object" && "value" in h) {
-        const h = g.value;
+        const v = h.value;
         return {
-          label: g.label ?? String(h),
+          label: h.label ?? String(v),
-          value: h,
+          value: v,
-          disabled: g.disabled
+          disabled: h.disabled
         };
       }
-      const T = g;
+      const T = h;
       return { label: String(T), value: T };
     }));
     return {
@@ -268,7 +276,7 @@ const Xe = R({
       inputHtmlType: f,
       inputMode: I,
       internalColor: l,
-      showPassword: v,
+      showPassword: g,
       togglePassword: V,
       onInput: Y,
       onFocus: () => t("focus"),
@@ -276,13 +284,13 @@ const Xe = R({
       computedItems: L
     };
   }
-}), Ge = { class: "eli-input" }, Qe = {
+}), Qe = { class: "eli-input" }, Ke = {
   key: 4,
   class: "checkbox-group"
 };
-function Ke(e, t, c, y, v, w) {
+function _e(e, t, c, $, g, w) {
-  return k(), G("div", Ge, [
+  return B(), G("div", Qe, [
-    e.isTextLike ? (k(), H(ye, F({
+    e.isTextLike ? (B(), H($e, F({
       key: 0,
       modelValue: e.value,
       "onUpdate:modelValue": t[0] || (t[0] = (d) => e.value = d),
@@ -298,28 +306,29 @@ function Ke(e, t, c, y, v, w) {
       density: e.density,
       variant: e.variant,
       color: e.internalColor,
-      inputmode: e.inputMode
+      inputmode: e.inputMode,
+      suffix: e.type === "porcentagem" ? "%" : void 0
     }, e.attrs, {
       onFocus: e.onFocus,
       onBlur: e.onBlur,
       onInput: e.onInput
-    }), ke({ _: 2 }, [
+    }), Ee({ _: 2 }, [
       e.type === "password" && e.showPasswordToggle ? {
         name: "append-inner",
         fn: D(() => [
-          $(Oe, {
+          y(Te, {
             class: "cursor-pointer",
             onClick: e.togglePassword
           }, {
             default: D(() => [
-              Q($e(e.showPassword ? "mdi-eye-off" : "mdi-eye"), 1)
+              Q(ye(e.showPassword ? "mdi-eye-off" : "mdi-eye"), 1)
             ]),
             _: 1
           }, 8, ["onClick"])
         ]),
         key: "0"
       } : void 0
-    ]), 1040, ["modelValue", "type", "label", "placeholder", "disabled", "clearable", "error", "error-messages", "hint", "persistent-hint", "density", "variant", "color", "inputmode", "onFocus", "onBlur", "onInput"])) : e.type === "textarea" ? (k(), H(He, F({
+    ]), 1040, ["modelValue", "type", "label", "placeholder", "disabled", "clearable", "error", "error-messages", "hint", "persistent-hint", "density", "variant", "color", "inputmode", "suffix", "onFocus", "onBlur", "onInput"])) : e.type === "textarea" ? (B(), H(Ae, F({
       key: 1,
       modelValue: e.value,
       "onUpdate:modelValue": t[1] || (t[1] = (d) => e.value = d),
@@ -327,7 +336,7 @@ function Ke(e, t, c, y, v, w) {
       rows: e.rows,
       density: e.density,
       variant: e.variant
-    }, e.attrs), null, 16, ["modelValue", "label", "rows", "density", "variant"])) : e.type === "select" ? (k(), H(Ye, F({
+    }, e.attrs), null, 16, ["modelValue", "label", "rows", "density", "variant"])) : e.type === "select" ? (B(), H(He, F({
       key: 2,
       modelValue: e.value,
       "onUpdate:modelValue": t[2] || (t[2] = (d) => e.value = d),
@@ -347,22 +356,22 @@ function Ke(e, t, c, y, v, w) {
     }, e.attrs, {
       onFocus: e.onFocus,
       onBlur: e.onBlur
-    }), null, 16, ["modelValue", "items", "label", "placeholder", "multiple", "chips", "clearable", "disabled", "density", "variant", "error", "error-messages", "onFocus", "onBlur"])) : e.type === "radio" ? (k(), H(Ue, {
+    }), null, 16, ["modelValue", "items", "label", "placeholder", "multiple", "chips", "clearable", "disabled", "density", "variant", "error", "error-messages", "onFocus", "onBlur"])) : e.type === "radio" ? (B(), H(Ye, {
       key: 3,
       modelValue: e.value,
       "onUpdate:modelValue": t[3] || (t[3] = (d) => e.value = d),
       row: e.row
     }, {
       default: D(() => [
-        (k(!0), G(de, null, fe(e.computedItems, (d) => (k(), H(Te, {
+        (B(!0), G(de, null, fe(e.computedItems, (d) => (B(), H(Ue, {
           key: String(d.value),
           label: d.label,
           value: d.value
         }, null, 8, ["label", "value"]))), 128))
       ]),
       _: 1
-    }, 8, ["modelValue", "row"])) : e.type === "checkbox" ? (k(), G("div", Qe, [
+    }, 8, ["modelValue", "row"])) : e.type === "checkbox" ? (B(), G("div", Ke, [
-      (k(!0), G(de, null, fe(e.computedItems, (d) => (k(), H(Ie, {
+      (B(!0), G(de, null, fe(e.computedItems, (d) => (B(), H(Oe, {
         key: String(d.value),
         modelValue: e.value,
         "onUpdate:modelValue": t[4] || (t[4] = (f) => e.value = f),
@@ -373,44 +382,44 @@ function Ke(e, t, c, y, v, w) {
     ])) : pe("", !0)
   ]);
 }
-const Se = /* @__PURE__ */ J(Xe, [["render", Ke], ["__scopeId", "data-v-2f57f5c8"]]), _e = R({
+const Me = /* @__PURE__ */ J(Ge, [["render", _e], ["__scopeId", "data-v-756cb549"]]), xe = R({
   name: "EliOlaMundo",
   components: {
     EliBotao: Ve,
     EliBadge: le,
-    EliInput: Se
+    EliInput: Me
   },
   setup() {
-    const e = C(""), t = C([]), c = C(""), y = C(""), v = C(""), w = C(""), d = C(""), f = C(""), I = C(""), l = C(""), Y = C(""), V = C(null), L = C([]);
+    const e = C(""), t = C([]), c = C(""), $ = C(""), g = C(""), w = C(""), d = C(""), f = C(""), I = C(""), l = C(""), Y = C(""), V = C(null), L = C([]);
     return {
       nome: e,
       email: f,
       documento: Y,
       estado: t,
-      telefone: y,
+      telefone: $,
       mensagem: I,
       senha: l,
       cor: V,
       habilidades: L,
-      idade: v,
+      idade: g,
       altura: w,
       cep: c,
       valor: d
     };
   }
-}), xe = { class: "grid-example" };
+}), et = { class: "grid-example" };
-function et(e, t, c, y, v, w) {
+function tt(e, t, c, $, g, w) {
   const d = te("EliBadge"), f = te("EliInput"), I = te("EliBotao");
-  return k(), H(Ae, null, {
+  return B(), H(Pe, null, {
     default: D(() => [
-      $(ve, {
+      y(ge, {
         class: "mx-auto",
         max_width: "400"
       }, {
         default: D(() => [
-          $(ge, null, {
+          y(ve, null, {
             default: D(() => [
-              $(d, {
+              y(d, {
                 badge: "Novo",
                 "offset-x": "-15",
                 location: "right center"
@@ -423,51 +432,51 @@ function et(e, t, c, y, v, w) {
             ]),
             _: 1
           }),
-          $(he, null, {
+          y(he, null, {
             default: D(() => [
               t[15] || (t[15] = Q(" Este é um componente de exemplo integrado com Vuetify. ", -1)),
-              ae("div", xe, [
+              ae("div", et, [
-                $(f, {
+                y(f, {
                   modelValue: e.nome,
                   "onUpdate:modelValue": t[0] || (t[0] = (l) => e.nome = l),
                   label: "Nome",
                   placeholder: "Digite o nome",
                   density: "compact"
                 }, null, 8, ["modelValue"]),
-                $(f, {
+                y(f, {
                   modelValue: e.idade,
                   "onUpdate:modelValue": t[1] || (t[1] = (l) => e.idade = l),
                   type: "numericoInteiro",
                   label: "Idade",
                   density: "default"
                 }, null, 8, ["modelValue"]),
-                $(f, {
+                y(f, {
                   modelValue: e.altura,
                   "onUpdate:modelValue": t[2] || (t[2] = (l) => e.altura = l),
                   type: "numericoDecimal",
                   label: "Altura",
                   density: "comfortable"
                 }, null, 8, ["modelValue"]),
-                $(f, {
+                y(f, {
                   modelValue: e.valor,
                   "onUpdate:modelValue": t[3] || (t[3] = (l) => e.valor = l),
                   type: "numericoMoeda",
                   label: "Valor"
                 }, null, 8, ["modelValue"]),
-                $(f, {
+                y(f, {
                   modelValue: e.telefone,
                   "onUpdate:modelValue": t[4] || (t[4] = (l) => e.telefone = l),
                   type: "telefone",
                   label: "Telefone"
                 }, null, 8, ["modelValue"]),
-                $(f, {
+                y(f, {
                   modelValue: e.cep,
                   "onUpdate:modelValue": t[5] || (t[5] = (l) => e.cep = l),
                   type: "cep",
                   label: "CEP",
                   placeholder: "00000-000"
                 }, null, 8, ["modelValue"]),
-                $(f, {
+                y(f, {
                   type: "select",
                   label: "Estado",
                   options: [
@@ -478,19 +487,19 @@ function et(e, t, c, y, v, w) {
                   "onUpdate:modelValue": t[6] || (t[6] = (l) => e.estado = l),
                   multiple: ""
                 }, null, 8, ["modelValue"]),
-                $(f, {
+                y(f, {
                   modelValue: e.documento,
                   "onUpdate:modelValue": t[7] || (t[7] = (l) => e.documento = l),
                   type: "cpfCnpj",
                   label: "CPF / CNPJ"
                 }, null, 8, ["modelValue"]),
-                $(f, {
+                y(f, {
                   modelValue: e.email,
                   "onUpdate:modelValue": t[8] || (t[8] = (l) => e.email = l),
                   label: "Email",
                   placeholder: "email@exemplo.com"
                 }, null, 8, ["modelValue"]),
-                $(f, {
+                y(f, {
                   modelValue: e.senha,
                   "onUpdate:modelValue": t[9] || (t[9] = (l) => e.senha = l),
                   label: "Senha",
@@ -498,14 +507,14 @@ function et(e, t, c, y, v, w) {
                   showPasswordToggle: !0,
                   placeholder: "Digite sua senha"
                 }, null, 8, ["modelValue"]),
-                $(f, {
+                y(f, {
                   type: "textarea",
                   modelValue: e.mensagem,
                   "onUpdate:modelValue": t[10] || (t[10] = (l) => e.mensagem = l),
                   label: "Mensagem",
                   rows: 5
                 }, null, 8, ["modelValue"]),
-                $(f, {
+                y(f, {
                   type: "radio",
                   modelValue: e.cor,
                   "onUpdate:modelValue": t[11] || (t[11] = (l) => e.cor = l),
@@ -515,7 +524,7 @@ function et(e, t, c, y, v, w) {
                     { label: "Verde", value: "verde" }
                   ]
                 }, null, 8, ["modelValue"]),
-                $(f, {
+                y(f, {
                   type: "checkbox",
                   modelValue: e.habilidades,
                   "onUpdate:modelValue": t[12] || (t[12] = (l) => e.habilidades = l),
@@ -524,7 +533,7 @@ function et(e, t, c, y, v, w) {
                     { label: "React", value: "react" }
                   ]
                 }, null, 8, ["modelValue"]),
-                $(f, {
+                y(f, {
                   modelValue: e.nome,
                   "onUpdate:modelValue": t[13] || (t[13] = (l) => e.nome = l),
                   label: "Nome",
@@ -535,9 +544,9 @@ function et(e, t, c, y, v, w) {
             ]),
             _: 1
           }),
-          $(be, null, {
+          y(be, null, {
             default: D(() => [
-              $(I, {
+              y(I, {
                 color: "primary",
                 variant: "elevated",
                 block: ""
@@ -557,7 +566,7 @@ function et(e, t, c, y, v, w) {
     _: 1
   });
 }
-const tt = /* @__PURE__ */ J(_e, [["render", et]]), at = R({
+const at = /* @__PURE__ */ J(xe, [["render", tt]]), rt = R({
   name: "EliCartao",
   components: { EliBadge: le },
   inheritAttrs: !1,
@@ -586,7 +595,7 @@ const tt = /* @__PURE__ */ J(_e, [["render", et]]), at = R({
     clicar: (e) => !0
   },
   setup(e, { emit: t }) {
-    const c = E(() => e.status), y = E(() => {
+    const c = E(() => e.status), $ = E(() => {
       switch (e.status) {
         case "novo":
           return "primary";
@@ -597,34 +606,34 @@ const tt = /* @__PURE__ */ J(_e, [["render", et]]), at = R({
         case "cancelado":
           return "error";
       }
-    }), v = E(() => `eli-cartao--${e.status}`);
+    }), g = E(() => `eli-cartao--${e.status}`);
     function w() {
       t("clicar", e.status);
     }
     return {
       rotuloStatus: c,
-      corStatus: y,
+      corStatus: $,
-      classeStatus: v,
+      classeStatus: g,
       onClick: w
     };
   }
-}), rt = { class: "eli-cartao__titulo-texto" }, nt = { class: "eli-cartao__status" };
+}), nt = { class: "eli-cartao__titulo-texto" }, ot = { class: "eli-cartao__status" };
-function ot(e, t, c, y, v, w) {
+function lt(e, t, c, $, g, w) {
   const d = te("EliBadge");
-  return k(), H(ve, F({
+  return B(), H(ge, F({
     class: ["eli-cartao", e.classeStatus],
     variant: e.variant
   }, e.$attrs), {
     default: D(() => [
-      $(ge, { class: "eli-cartao__titulo" }, {
+      y(ve, { class: "eli-cartao__titulo" }, {
         default: D(() => [
-          ae("div", rt, [
+          ae("div", nt, [
             W(e.$slots, "titulo", {}, () => [
-              Q($e(e.titulo), 1)
+              Q(ye(e.titulo), 1)
             ], !0)
           ]),
-          ae("div", nt, [
+          ae("div", ot, [
-            $(d, {
+            y(d, {
               badge: e.rotuloStatus,
               radius: "pill",
               color: e.corStatus
@@ -638,13 +647,13 @@ function ot(e, t, c, y, v, w) {
         ]),
         _: 3
       }),
-      $(he, { class: "eli-cartao__conteudo" }, {
+      y(he, { class: "eli-cartao__conteudo" }, {
         default: D(() => [
           W(e.$slots, "default", {}, void 0, !0)
         ]),
         _: 3
       }),
-      e.$slots.acoes ? (k(), H(be, {
+      e.$slots.acoes ? (B(), H(be, {
         key: 0,
         class: "eli-cartao__acoes"
       }, {
@@ -657,17 +666,17 @@ function ot(e, t, c, y, v, w) {
     _: 3
   }, 16, ["variant", "class"]);
 }
-const lt = /* @__PURE__ */ J(at, [["render", ot], ["__scopeId", "data-v-6c492bd9"]]);
+const st = /* @__PURE__ */ J(rt, [["render", lt], ["__scopeId", "data-v-6c492bd9"]]);
-function st(e) {
+function it(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var re = { exports: {} }, it = re.exports, ce;
+var re = { exports: {} }, ut = re.exports, ce;
-function ut() {
+function dt() {
   return ce || (ce = 1, (function(e, t) {
-    (function(c, y) {
+    (function(c, $) {
-      e.exports = y();
+      e.exports = $();
-    })(it, (function() {
+    })(ut, (function() {
-      var c = 1e3, y = 6e4, v = 36e5, w = "millisecond", d = "second", f = "minute", I = "hour", l = "day", Y = "week", V = "month", L = "quarter", g = "year", T = "date", h = "Invalid Date", Me = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, we = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, De = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(s) {
+      var c = 1e3, $ = 6e4, g = 36e5, w = "millisecond", d = "second", f = "minute", I = "hour", l = "day", Y = "week", V = "month", L = "quarter", h = "year", T = "date", v = "Invalid Date", we = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, De = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, ke = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(s) {
         var n = ["th", "st", "nd", "rd"], a = s % 100;
         return "[" + s + (n[(a - 20) % 10] || n[a] || n[0]) + "]";
       } }, ne = function(s, n, a) {
@@ -683,11 +692,11 @@ function ut() {
       }, a: function(s) {
         return s < 0 ? Math.ceil(s) || 0 : Math.floor(s);
       }, p: function(s) {
-        return { M: V, y: g, w: Y, d: l, D: T, h: I, m: f, s: d, ms: w, Q: L }[s] || String(s || "").toLowerCase().replace(/s$/, "");
+        return { M: V, y: h, w: Y, d: l, D: T, h: I, m: f, s: d, ms: w, Q: L }[s] || String(s || "").toLowerCase().replace(/s$/, "");
       }, u: function(s) {
         return s === void 0;
       } }, q = "en", P = {};
-      P[q] = De;
+      P[q] = ke;
       var ie = "$isDayjsObject", oe = function(s) {
         return s instanceof _ || !(!s || !s[ie]);
       }, K = function s(n, a, o) {
@@ -723,7 +732,7 @@ function ut() {
             if (m.u(r)) return /* @__PURE__ */ new Date();
             if (r instanceof Date) return new Date(r);
             if (typeof r == "string" && !/Z$/i.test(r)) {
-              var u = r.match(Me);
+              var u = r.match(we);
               if (u) {
                 var p = u[2] - 1 || 0, b = (u[7] || "0").substring(0, 3);
                 return i ? new Date(Date.UTC(u[1], p, u[3] || 1, u[4] || 0, u[5] || 0, u[6] || 0, b)) : new Date(u[1], p, u[3] || 1, u[4] || 0, u[5] || 0, u[6] || 0, b);
@@ -737,7 +746,7 @@ function ut() {
         }, n.$utils = function() {
           return m;
         }, n.isValid = function() {
-          return this.$d.toString() !== h;
+          return this.$d.toString() !== v;
         }, n.isSame = function(a, o) {
           var r = S(a);
           return this.startOf(o) <= r && r <= this.endOf(o);
@@ -757,15 +766,15 @@ function ut() {
             return i ? A : A.endOf(l);
           }, b = function(N, O) {
             return m.w(r.toDate()[N].apply(r.toDate("s"), (i ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(O)), r);
-          }, M = this.$W, B = this.$M, U = this.$D, z = "set" + (this.$u ? "UTC" : "");
+          }, M = this.$W, k = this.$M, U = this.$D, z = "set" + (this.$u ? "UTC" : "");
           switch (u) {
-            case g:
+            case h:
               return i ? p(1, 0) : p(31, 11);
             case V:
-              return i ? p(1, B) : p(0, B + 1);
+              return i ? p(1, k) : p(0, k + 1);
             case Y:
               var j = this.$locale().weekStart || 0, Z = (M < j ? M + 7 : M) - j;
-              return p(i ? U - Z : U + (6 - Z), B);
+              return p(i ? U - Z : U + (6 - Z), k);
             case l:
             case T:
               return b(z + "Hours", 0);
@@ -781,8 +790,8 @@ function ut() {
         }, n.endOf = function(a) {
           return this.startOf(a, !1);
         }, n.$set = function(a, o) {
-          var r, i = m.p(a), u = "set" + (this.$u ? "UTC" : ""), p = (r = {}, r[l] = u + "Date", r[T] = u + "Date", r[V] = u + "Month", r[g] = u + "FullYear", r[I] = u + "Hours", r[f] = u + "Minutes", r[d] = u + "Seconds", r[w] = u + "Milliseconds", r)[i], b = i === l ? this.$D + (o - this.$W) : o;
+          var r, i = m.p(a), u = "set" + (this.$u ? "UTC" : ""), p = (r = {}, r[l] = u + "Date", r[T] = u + "Date", r[V] = u + "Month", r[h] = u + "FullYear", r[I] = u + "Hours", r[f] = u + "Minutes", r[d] = u + "Seconds", r[w] = u + "Milliseconds", r)[i], b = i === l ? this.$D + (o - this.$W) : o;
-          if (i === V || i === g) {
+          if (i === V || i === h) {
             var M = this.clone().set(T, 1);
             M.$d[p](b), M.init(), this.$d = M.set(T, Math.min(this.$D, M.daysInMonth())).$d;
           } else p && this.$d[p](b);
@@ -794,22 +803,22 @@ function ut() {
         }, n.add = function(a, o) {
           var r, i = this;
           a = Number(a);
-          var u = m.p(o), p = function(B) {
+          var u = m.p(o), p = function(k) {
             var U = S(i);
-            return m.w(U.date(U.date() + Math.round(B * a)), i);
+            return m.w(U.date(U.date() + Math.round(k * a)), i);
           };
           if (u === V) return this.set(V, this.$M + a);
-          if (u === g) return this.set(g, this.$y + a);
+          if (u === h) return this.set(h, this.$y + a);
           if (u === l) return p(1);
           if (u === Y) return p(7);
-          var b = (r = {}, r[f] = y, r[I] = v, r[d] = c, r)[u] || 1, M = this.$d.getTime() + a * b;
+          var b = (r = {}, r[f] = $, r[I] = g, r[d] = c, r)[u] || 1, M = this.$d.getTime() + a * b;
           return m.w(M, this);
         }, n.subtract = function(a, o) {
           return this.add(-1 * a, o);
         }, n.format = function(a) {
           var o = this, r = this.$locale();
-          if (!this.isValid()) return r.invalidDate || h;
+          if (!this.isValid()) return r.invalidDate || v;
-          var i = a || "YYYY-MM-DDTHH:mm:ssZ", u = m.z(this), p = this.$H, b = this.$m, M = this.$M, B = r.weekdays, U = r.months, z = r.meridiem, j = function(O, A, X, x) {
+          var i = a || "YYYY-MM-DDTHH:mm:ssZ", u = m.z(this), p = this.$H, b = this.$m, M = this.$M, k = r.weekdays, U = r.months, z = r.meridiem, j = function(O, A, X, x) {
             return O && (O[A] || O(o, i)) || X[A].slice(0, x);
           }, Z = function(O) {
             return m.s(p % 12 || 12, O, "0");
@@ -817,7 +826,7 @@ function ut() {
             var x = O < 12 ? "AM" : "PM";
             return X ? x.toLowerCase() : x;
           };
-          return i.replace(we, (function(O, A) {
+          return i.replace(De, (function(O, A) {
             return A || (function(X) {
               switch (X) {
                 case "YY":
@@ -839,11 +848,11 @@ function ut() {
                 case "d":
                   return String(o.$W);
                 case "dd":
-                  return j(r.weekdaysMin, o.$W, B, 2);
+                  return j(r.weekdaysMin, o.$W, k, 2);
                 case "ddd":
-                  return j(r.weekdaysShort, o.$W, B, 3);
+                  return j(r.weekdaysShort, o.$W, k, 3);
                 case "dddd":
-                  return B[o.$W];
+                  return k[o.$W];
                 case "H":
                   return String(p);
                 case "HH":
@@ -875,11 +884,11 @@ function ut() {
         }, n.utcOffset = function() {
           return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
         }, n.diff = function(a, o, r) {
-          var i, u = this, p = m.p(o), b = S(a), M = (b.utcOffset() - this.utcOffset()) * y, B = this - b, U = function() {
+          var i, u = this, p = m.p(o), b = S(a), M = (b.utcOffset() - this.utcOffset()) * $, k = this - b, U = function() {
             return m.m(u, b);
           };
           switch (p) {
-            case g:
+            case h:
               i = U() / 12;
               break;
             case V:
@@ -889,22 +898,22 @@ function ut() {
               i = U() / 3;
               break;
             case Y:
-              i = (B - M) / 6048e5;
+              i = (k - M) / 6048e5;
               break;
             case l:
-              i = (B - M) / 864e5;
+              i = (k - M) / 864e5;
               break;
             case I:
-              i = B / v;
+              i = k / g;
               break;
             case f:
-              i = B / y;
+              i = k / $;
               break;
             case d:
-              i = B / c;
+              i = k / c;
               break;
             default:
-              i = B;
+              i = k;
           }
           return r ? i : m.a(i);
         }, n.daysInMonth = function() {
@@ -927,7 +936,7 @@ function ut() {
           return this.$d.toUTCString();
         }, s;
       })(), ue = _.prototype;
-      return S.prototype = ue, [["$ms", w], ["$s", d], ["$m", f], ["$H", I], ["$W", l], ["$M", V], ["$y", g], ["$D", T]].forEach((function(s) {
+      return S.prototype = ue, [["$ms", w], ["$s", d], ["$m", f], ["$H", I], ["$W", l], ["$M", V], ["$y", h], ["$D", T]].forEach((function(s) {
         ue[s[1]] = function(n) {
           return this.$g(n, s[0], s[1]);
         };
@@ -939,8 +948,8 @@ function ut() {
     }));
   })(re)), re.exports;
 }
-var dt = ut();
+var ft = dt();
-const ee = /* @__PURE__ */ st(dt), ft = R({
+const ee = /* @__PURE__ */ it(ft), mt = R({
   name: "EliDataHora",
   inheritAttrs: !1,
   props: {
@@ -1040,17 +1049,17 @@ const ee = /* @__PURE__ */ st(dt), ft = R({
     desfoco: () => !0
   },
   setup(e, { emit: t, attrs: c }) {
-    const y = E(
+    const $ = E(
       () => e.modo === "data" ? "date" : "datetime-local"
     );
-    function v(l) {
+    function g(l) {
       return e.modo === "data" ? ee(l).format("YYYY-MM-DD") : ee(l).format("YYYY-MM-DDTHH:mm");
     }
     function w(l) {
       return e.modo === "data" ? ee(`${l}T00:00`).format() : ee(l).format();
     }
     const d = E({
-      get: () => e.modelValue ? v(e.modelValue) : "",
+      get: () => e.modelValue ? g(e.modelValue) : "",
       set: (l) => {
         const Y = l && l.length > 0 ? l : null;
         if (!Y) {
@@ -1062,17 +1071,17 @@ const ee = /* @__PURE__ */ st(dt), ft = R({
       }
     }), f = E(() => {
       if (e.min)
-        return v(e.min);
+        return g(e.min);
     }), I = E(() => {
       if (e.max)
-        return v(e.max);
+        return g(e.max);
     });
-    return { attrs: c, valor: d, emit: t, minLocal: f, maxLocal: I, tipoInput: y };
+    return { attrs: c, valor: d, emit: t, minLocal: f, maxLocal: I, tipoInput: $ };
   }
-}), mt = { class: "eli-data-hora" };
+}), ct = { class: "eli-data-hora" };
-function ct(e, t, c, y, v, w) {
+function pt(e, t, c, $, g, w) {
-  return k(), G("div", mt, [
+  return B(), G("div", ct, [
-    $(ye, F({
+    y($e, F({
       modelValue: e.valor,
       "onUpdate:modelValue": t[0] || (t[0] = (d) => e.valor = d),
       type: e.tipoInput,
@@ -1094,17 +1103,17 @@ function ct(e, t, c, y, v, w) {
     }), null, 16, ["modelValue", "type", "label", "placeholder", "disabled", "clearable", "error", "error-messages", "hint", "persistent-hint", "density", "variant", "min", "max"])
   ]);
 }
-const pt = /* @__PURE__ */ J(ft, [["render", ct], ["__scopeId", "data-v-71afabb6"]]), kt = {
+const yt = /* @__PURE__ */ J(mt, [["render", pt], ["__scopeId", "data-v-71afabb6"]]), Et = {
   install(e) {
-    e.component("EliOlaMundo", tt), e.component("EliBotao", Ve), e.component("EliBadge", le), e.component("EliInput", Se), e.component("EliCartao", lt), e.component("EliDataHora", pt);
+    e.component("EliOlaMundo", at), e.component("EliBotao", Ve), e.component("EliBadge", le), e.component("EliInput", Me), e.component("EliCartao", st), e.component("EliDataHora", yt);
   }
 };
 export {
   le as EliBadge,
   Ve as EliBotao,
-  lt as EliCartao,
+  st as EliCartao,
-  pt as EliDataHora,
+  yt as EliDataHora,
-  Se as EliInput,
+  Me as EliInput,
-  tt as EliOlaMundo,
+  at as EliOlaMundo,
-  kt as default
+  Et as default
 };

dist/types/componentes/campo/EliInput.vue.d.ts

@@ -59,7 +59,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     value: import("vue").WritableComputedRef<CampoValor | CampoValorMultiplo, CampoValor | CampoValorMultiplo>;
     isTextLike: import("vue").ComputedRef<boolean>;
     inputHtmlType: import("vue").ComputedRef<"text" | "password">;
-    inputMode: import("vue").ComputedRef<"tel" | "numeric" | undefined>;
+    inputMode: import("vue").ComputedRef<"tel" | "decimal" | "numeric" | undefined>;
     internalColor: import("vue").ComputedRef<string | undefined>;
     showPassword: import("vue").Ref<boolean, boolean>;
     togglePassword: () => void;

dist/types/componentes/campo/utils/numerico.d.ts

@@ -1,3 +1,9 @@
 export declare function somenteNumeros(valor: string): string;
 export declare function formatarDecimal(valor: string): string;
+/**
+ * Formatação para percentual:
+ * - remove '%' caso venha junto (ex: colar "10%")
+ * - mantém apenas dígitos e vírgula (no máximo uma)
+ */
+export declare function formatarPorcentagem(valor: string): string;
 export declare function formatarMoeda(valor: string): string;

dist/types/componentes/ola_mundo/EliOlaMundo.vue.d.ts

@@ -195,7 +195,7 @@ declare const __VLS_export: import("vue").DefineComponent<{}, {
         value: import("vue").WritableComputedRef<import("../../tipos/campo.js").CampoValor | import("../../tipos/campo.js").CampoValorMultiplo, import("../../tipos/campo.js").CampoValor | import("../../tipos/campo.js").CampoValorMultiplo>;
         isTextLike: import("vue").ComputedRef<boolean>;
         inputHtmlType: import("vue").ComputedRef<"text" | "password">;
-        inputMode: import("vue").ComputedRef<"tel" | "numeric" | undefined>;
+        inputMode: import("vue").ComputedRef<"tel" | "decimal" | "numeric" | undefined>;
         internalColor: import("vue").ComputedRef<string | undefined>;
         showPassword: import("vue").Ref<boolean, boolean>;
         togglePassword: () => void;

dist/types/tipos/campo.d.ts

@@ -15,5 +15,5 @@ export type CampoOpcaoBruta<TValor extends CampoValor = CampoValor> = TValor | {
 };
 export type CampoVariante = "outlined" | "filled" | "plain" | "solo" | "solo-filled" | "solo-inverted" | "underlined";
 export type CampoDensidade = "default" | "comfortable" | "compact";
-export type CampoTipoNumerico = "numericoInteiro" | "numericoDecimal" | "numericoMoeda";
+export type CampoTipoNumerico = "numericoInteiro" | "numericoDecimal" | "numericoMoeda" | "porcentagem";
 export type CampoTipo = "text" | "password" | "email" | "search" | "url" | "textarea" | "radio" | "checkbox" | "telefone" | "cpfCnpj" | "cep" | "select" | CampoTipoNumerico;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eli-vue",
-  "version": "0.1.15",
+  "version": "0.1.19",
   "private": false,
   "main": "./dist/eli-vue.umd.js",
   "module": "./dist/eli-vue.es.js",

src/componentes/campo/EliInput.vue

@@ -17,6 +17,7 @@
       :variant="variant"
       :color="internalColor"
       :inputmode="inputMode"
+      :suffix="type === 'porcentagem' ? '%' : undefined"
       v-bind="attrs"
       @focus="onFocus"
       @blur="onBlur"
@@ -110,7 +111,7 @@ import type {
 } from "../../tipos";
 import { formatarCpfCnpj } from "./utils/cpfCnpj";
 import { formatTelefone } from "./utils/telefone";
-import { formatarDecimal, formatarMoeda, somenteNumeros } from "./utils/numerico"
+import { formatarDecimal, formatarMoeda, formatarPorcentagem, somenteNumeros } from "./utils/numerico"
 import { formatarCep } from "./utils/cep";
 
 export default defineComponent({
@@ -182,6 +183,7 @@ export default defineComponent({
         "numericoInteiro",
         "numericoDecimal",
         "numericoMoeda",
+        "porcentagem",
         "cep",
       ].includes(props.type)
     );
@@ -196,6 +198,7 @@ export default defineComponent({
 
     const inputMode = computed(() => {
       if (props.type === "telefone") return "tel";
+      if (props.type === "porcentagem") return "decimal";
       if (props.type.startsWith("numerico")) return "numeric";
       return undefined;
     });
@@ -221,6 +224,10 @@ export default defineComponent({
           resultado = formatarMoeda(resultado);
           break;
 
+        case "porcentagem":
+          resultado = formatarPorcentagem(resultado);
+          break;
+
         case "telefone":
           resultado = formatTelefone(resultado);
           break;

src/componentes/campo/README.md

@@ -37,7 +37,7 @@ type Option = { label: string; value: ValorCampo; disabled?: boolean };
 
 type InputVariant = 'outlined' | 'filled' | 'plain' | 'solo' | 'solo-filled' | 'solo-inverted' | 'underlined';
 type Density = 'default' | 'comfortable' | 'compact';
-type TipoNumerico = 'numericoInteiro' | 'numericoDecimal' | 'numericoMoeda';
+type TipoNumerico = 'numericoInteiro' | 'numericoDecimal' | 'numericoMoeda' | 'porcentagem';
 
 type InputType =
   | 'text' | 'password' | 'email' | 'search' | 'url' | 'textarea'
@@ -103,6 +103,7 @@ type InputType =
 * numericoInteiro — remove tudo que não for dígito.
 * numericoDecimal — mantém separador decimal (aplica formatarDecimal).
 * numericoMoeda — formata para moeda conforme util (formatarMoeda).
+* porcentagem — aplica formatação decimal e exibe sufixo `%` automaticamente.
 * telefone — aplica máscara/format formatTelefone.
 * cpfCnpj — aplica formatarCpfCnpj.
 * cep — aplica formatarCep.

src/componentes/campo/utils/numerico.ts

@@ -8,6 +8,15 @@ export function formatarDecimal(valor: string) {
   return partes.length > 2 ? partes[0] + "," + partes.slice(1).join("") : limpo;
 }
 
+/**
+ * Formatação para percentual:
+ * - remove '%' caso venha junto (ex: colar "10%")
+ * - mantém apenas dígitos e vírgula (no máximo uma)
+ */
+export function formatarPorcentagem(valor: string) {
+  return formatarDecimal(valor.replace(/%/g, ""));
+}
+
 export function formatarMoeda(valor: string) {
   const numero = somenteNumeros(valor);
   if (!numero) return "";

src/playground/campo.playground.vue

@@ -9,6 +9,7 @@
 
       <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
@@ -63,6 +64,7 @@ export default defineComponent({
     const documento = ref("");
     const idade = ref("");
     const valor = ref("");
+    const taxa = ref("");
     const cep = ref("");
     const estado = ref<string[]>([]);
     const cor = ref<Cor>(null);
@@ -76,6 +78,7 @@ export default defineComponent({
           documento: documento.value,
           idade: idade.value,
           valor: valor.value,
+          taxa: taxa.value,
           cep: cep.value,
           estado: estado.value,
           cor: cor.value,
@@ -92,6 +95,7 @@ export default defineComponent({
       documento,
       idade,
       valor,
+      taxa,
       cep,
       estado,
       cor,

src/tipos/campo.ts

@@ -33,7 +33,8 @@ export type CampoDensidade = "default" | "comfortable" | "compact";
 export type CampoTipoNumerico =
   | "numericoInteiro"
   | "numericoDecimal"
-  | "numericoMoeda";
+  | "numericoMoeda"
+  | "porcentagem";
 
 export type CampoTipo =
   | "text"
@@ -49,4 +50,3 @@ export type CampoTipo =
   | "cep"
   | "select"
   | CampoTipoNumerico;
-