publico/vue-componentes
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

adiconado imput de porcentagem

Browse source
This commit is contained in:
Luiz Silva 2026-01-10 13:37:34 -03:00
parent 5bfde6ee66
commit 8bb5aea15e
15 changed files with 260 additions and 184 deletions
Download patch file Download diff file Expand all files Collapse all files

23
IA.md
View file

@ -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

21
README.md
View file

@ -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

2
dist/eli-vue.css vendored
View file

@ -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%}

353
dist/eli-vue.es.js vendored
View file

@ -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 { VBtn as Ee } from "vuetify/components/VBtn";
import { VBadge as Ce } from "vuetify/components/VBadge";
import { VCheckbox as Ie } from "vuetify/components/VCheckbox";
import { VIcon as Oe } from "vuetify/components/VIcon";
import { VRadio as Te } from "vuetify/components/VRadio";
import { VRadioGroup as Ue } from "vuetify/components/VRadioGroup";
import { VSelect as Ye } from "vuetify/components/VSelect";
import { VTextField as ye } from "vuetify/components/VTextField";
import { VTextarea as He } from "vuetify/components/VTextarea";
import { VCard as ve, VCardTitle as ge, VCardText as he, VCardActions as be } from "vuetify/components/VCard";
import { VContainer as Ae } from "vuetify/components/VGrid";
const Pe = R({
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 Ce } from "vuetify/components/VBtn";
import { VBadge as Ie } from "vuetify/components/VBadge";
import { VCheckbox as Oe } from "vuetify/components/VCheckbox";
import { VIcon as Te } from "vuetify/components/VIcon";
import { VRadio as Ue } from "vuetify/components/VRadio";
import { VRadioGroup as Ye } from "vuetify/components/VRadioGroup";
import { VSelect as He } from "vuetify/components/VSelect";
import { VTextField as $e } from "vuetify/components/VTextField";
import { VTextarea as Ae } from "vuetify/components/VTextarea";
import { VCard as ge, VCardTitle as ve, VCardText as he, VCardActions as be } from "vuetify/components/VCard";
import { VContainer as Pe } from "vuetify/components/VGrid";
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)
c[y] = v;
for (const [$, g] of t)
c[$] = g;
return c;
};
function je(e, t, c, y, v, w) {
return k(), H(Ee, F({
function Ne(e, t, c, $, g, w) {
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) {
return e.showBadge ? (k(), H(Ce, F({
function Le(e, t, c, $, g, w) {
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"]]);
function Le(e) {
return e.replace(/\D+/g, "");
}
const le = /* @__PURE__ */ J(Fe, [["render", Le], ["__scopeId", "data-v-de2fbf2f"]]);
function ze(e) {
const t = Le(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);
return e.replace(/\D+/g, "");
}
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) => {
t("update:modelValue", g), t("change", g);
set: (h) => {
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) {
const T = g.target;
let h = T.value;
function Y(h) {
const T = h.target;
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) => {
if (g && typeof g == "object" && "value" in g) {
const h = g.value;
const L = E(() => (e.options || []).map((h) => {
if (h && typeof h == "object" && "value" in h) {
const v = h.value;
return {
label: g.label ?? String(h),
value: h,
disabled: g.disabled
label: h.label ?? String(v),
value: v,
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) {
return k(), G("div", Ge, [
e.isTextLike ? (k(), H(ye, F({
function _e(e, t, c, $, g, w) {
return B(), G("div", Qe, [
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, [
(k(!0), G(de, null, fe(e.computedItems, (d) => (k(), H(Ie, {
}, 8, ["modelValue", "row"])) : e.type === "checkbox" ? (B(), G("div", Ke, [
(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" };
function et(e, t, c, y, v, w) {
}), et = { class: "grid-example" };
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, [
$(f, {
ae("div", et, [
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,
classeStatus: v,
corStatus: $,
classeStatus: g,
onClick: w
};
}
}), rt = { class: "eli-cartao__titulo-texto" }, nt = { class: "eli-cartao__status" };
function ot(e, t, c, y, v, w) {
}), nt = { class: "eli-cartao__titulo-texto" }, ot = { class: "eli-cartao__status" };
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, [
$(d, {
ae("div", ot, [
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"]]);
function st(e) {
const st = /* @__PURE__ */ J(rt, [["render", lt], ["__scopeId", "data-v-6c492bd9"]]);
function it(e) {
return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
}
var re = { exports: {} }, it = re.exports, ce;
function ut() {
var re = { exports: {} }, ut = re.exports, ce;
function dt() {
return ce || (ce = 1, (function(e, t) {
(function(c, y) {
e.exports = y();
})(it, (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) {
(function(c, $) {
e.exports = $();
})(ut, (function() {
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;
if (i === V || i === g) {
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 === 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;
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) {
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, 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();
const ee = /* @__PURE__ */ st(dt), ft = R({
var ft = dt();
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" };
function ct(e, t, c, y, v, w) {
return k(), G("div", mt, [
$(ye, F({
}), ct = { class: "eli-data-hora" };
function pt(e, t, c, $, g, w) {
return B(), G("div", ct, [
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,
pt as EliDataHora,
Se as EliInput,
tt as EliOlaMundo,
kt as default
st as EliCartao,
yt as EliDataHora,
Me as EliInput,
at as EliOlaMundo,
Et as default
};

2
dist/eli-vue.umd.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/types/componentes/campo/EliInput.vue.d.ts vendored
View file

@ -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;

6
dist/types/componentes/campo/utils/numerico.d.ts vendored
View file

@ -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;

2
dist/types/componentes/ola_mundo/EliOlaMundo.vue.d.ts vendored
View file

@ -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;

2
dist/types/tipos/campo.d.ts vendored
View file

@ -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;

2
package.json
View file

@ -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",

9
src/componentes/campo/EliInput.vue
View file

@ -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;

3
src/componentes/campo/README.md
View file

@ -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.

9
src/componentes/campo/utils/numerico.ts
View file

@ -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 "";

4
src/playground/campo.playground.vue
View file

@ -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,

4
src/tipos/campo.ts
View file

@ -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;