vue-componentes/dist/eli-vue.es.js
2026-01-03 18:08:35 -03:00

672 lines
20 KiB
JavaScript

import { defineComponent as S, createBlock as y, openBlock as m, mergeProps as b, withCtx as d, renderSlot as v, computed as c, ref as i, createElementBlock as k, createCommentVNode as D, createSlots as L, createVNode as a, createTextVNode as B, toDisplayString as F, Fragment as P, renderList as N, resolveComponent as E, createElementVNode as C } from "vue";
import { VBtn as X } from "vuetify/components/VBtn";
import { VBadge as Y } from "vuetify/components/VBadge";
import { VCheckbox as q } from "vuetify/components/VCheckbox";
import { VIcon as G } from "vuetify/components/VIcon";
import { VRadio as W } from "vuetify/components/VRadio";
import { VRadioGroup as K } from "vuetify/components/VRadioGroup";
import { VSelect as Q } from "vuetify/components/VSelect";
import { VTextField as Z } from "vuetify/components/VTextField";
import { VTextarea as _ } from "vuetify/components/VTextarea";
import { VCard as z, VCardTitle as R, VCardText as j, VCardActions as O } from "vuetify/components/VCard";
import { VContainer as x } from "vuetify/components/VGrid";
const ee = S({
name: "EliBotao",
inheritAttrs: !1,
props: {
color: {
type: String,
default: "primary"
},
variant: {
type: String,
default: "elevated"
},
size: {
type: String,
default: "default"
},
disabled: {
type: Boolean,
default: !1
},
loading: {
type: Boolean,
default: !1
}
}
}), w = (e, l) => {
const r = e.__vccOpts || e;
for (const [p, u] of l)
r[p] = u;
return r;
};
function le(e, l, r, p, u, g) {
return m(), y(X, b({
color: e.color,
variant: e.variant,
size: e.size,
disabled: e.disabled,
loading: e.loading
}, e.$attrs, { class: "text-none pt-1" }), {
default: d(() => [
v(e.$slots, "default")
]),
_: 3
}, 16, ["color", "variant", "size", "disabled", "loading"]);
}
const H = /* @__PURE__ */ w(ee, [["render", le]]), A = {
suave: "4px",
pill: "10px"
}, oe = S({
name: "EliBadge",
inheritAttrs: !1,
props: {
color: {
type: String,
default: "primary"
},
location: {
type: String,
default: "top right"
},
offsetX: {
type: String,
default: "0"
},
offsetY: {
type: String,
default: "0"
},
dot: {
type: Boolean,
default: !1
},
visible: {
type: Boolean,
default: !0
},
badge: {
type: [String, Number],
default: void 0
},
/** 🔥 NOVO: controla só o radius */
radius: {
type: String,
default: "suave"
}
},
setup(e) {
const l = c(() => e.radius in A ? A[e.radius] : e.radius), r = c(() => e.dot || e.badge !== void 0 ? e.visible : !1), p = c(() => ({
"--eli-badge-radius": l.value
}));
return { showBadge: r, badgeStyle: p };
}
});
function ae(e, l, r, p, u, g) {
return e.showBadge ? (m(), y(Y, b({
key: 0,
color: e.color
}, e.$attrs, {
location: e.location,
"offset-x": e.offsetX,
"offset-y": e.offsetY,
dot: e.dot,
content: e.badge,
style: e.badgeStyle
}), {
default: d(() => [
v(e.$slots, "default", {}, void 0, !0)
]),
_: 3
}, 16, ["color", "location", "offset-x", "offset-y", "dot", "content", "style"])) : v(e.$slots, "default", { key: 1 }, void 0, !0);
}
const M = /* @__PURE__ */ w(oe, [["render", ae], ["__scopeId", "data-v-de2fbf2f"]]);
function te(e) {
return e.replace(/\D+/g, "");
}
function re(e) {
const l = te(e);
return l.length <= 11 ? l.replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d)/, "$1.$2").replace(/(\d{3})(\d{1,2})$/, "$1-$2").slice(0, 14) : l.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 ne(e) {
return e.replace(/\D+/g, "");
}
function se(e) {
const l = ne(e);
return l ? l.length <= 10 ? l.replace(/^(\d{2})(\d)/, "($1) $2").replace(/(\d{4})(\d)/, "$1-$2").slice(0, 14) : l.replace(/^(\d{2})(\d)/, "($1) $2").replace(/(\d{5})(\d)/, "$1-$2").slice(0, 15) : "";
}
function T(e) {
return e.replace(/\D+/g, "");
}
function de(e) {
const l = e.replace(/[^\d,]/g, ""), r = l.split(",");
return r.length > 2 ? r[0] + "," + r.slice(1).join("") : l;
}
function ue(e) {
const l = T(e);
return l ? (parseInt(l, 10) / 100).toFixed(2).replace(".", ",").replace(/\B(?=(\d{3})+(?!\d))/g, ".") : "";
}
function ie(e) {
const l = T(e).slice(0, 8);
return l.length <= 5 ? l : l.replace(/^(\d{5})(\d{1,3})$/, "$1-$2");
}
const me = S({
name: "EliInput",
inheritAttrs: !1,
props: {
/**
* Aceita valor simples (text-like) ou lista de valores (checkbox/select multiple).
* O componente não converte tipos automaticamente: mantém o que receber.
*/
modelValue: {
type: [String, Number, Boolean, Array],
default: ""
},
type: { type: String, default: "text" },
label: String,
placeholder: String,
disabled: Boolean,
error: Boolean,
errorMessages: {
type: [String, Array],
default: () => []
},
hint: String,
persistentHint: Boolean,
rows: { type: Number, default: 4 },
/**
* Para select/radio/checkbox.
* Aceita lista já normalizada ({ label, value }) ou valores primitivos.
*/
options: {
type: Array,
default: () => []
},
clearable: Boolean,
variant: { type: String, default: "outlined" },
density: { type: String, default: "comfortable" },
color: { type: String, default: "primary" },
row: Boolean,
showPasswordToggle: Boolean,
multiple: Boolean,
chips: Boolean
},
emits: ["update:modelValue", "change", "focus", "blur"],
setup(e, { emit: l, attrs: r }) {
const p = i(!1), u = i(!1), g = c({
get: () => e.modelValue,
set: (f) => {
l("update:modelValue", f), l("change", f);
}
}), t = c(
() => [
"text",
"password",
"email",
"search",
"url",
"telefone",
"cpfCnpj",
"numericoInteiro",
"numericoDecimal",
"numericoMoeda",
"cep"
].includes(e.type)
), n = c(
() => e.type === "password" ? u.value ? "text" : "password" : "text"
), V = c(() => {
if (e.type === "telefone") return "tel";
if (e.type.startsWith("numerico")) return "numeric";
}), o = c(
() => e.error ? "error" : p.value ? e.color : void 0
);
function h(f) {
const $ = f.target;
let s = $.value;
switch (e.type) {
case "numericoInteiro":
s = T(s);
break;
case "numericoDecimal":
s = de(s);
break;
case "numericoMoeda":
s = ue(s);
break;
case "telefone":
s = se(s);
break;
case "cpfCnpj":
s = re(s);
break;
case "cep":
s = ie(s);
break;
}
$.value = s, l("update:modelValue", s), l("change", s);
}
function I() {
u.value = !u.value;
}
const U = c(() => (e.options || []).map((f) => {
if (f && typeof f == "object" && "value" in f) {
const s = f.value;
return {
label: f.label ?? String(s),
value: s,
disabled: f.disabled
};
}
const $ = f;
return { label: String($), value: $ };
}));
return {
attrs: r,
value: g,
isTextLike: t,
inputHtmlType: n,
inputMode: V,
internalColor: o,
showPassword: u,
togglePassword: I,
onInput: h,
onFocus: () => l("focus"),
onBlur: () => l("blur"),
computedItems: U
};
}
}), pe = { class: "eli-input" }, fe = {
key: 4,
class: "checkbox-group"
};
function ce(e, l, r, p, u, g) {
return m(), k("div", pe, [
e.isTextLike ? (m(), y(Z, b({
key: 0,
modelValue: e.value,
"onUpdate:modelValue": l[0] || (l[0] = (t) => e.value = t),
type: e.inputHtmlType,
label: e.label,
placeholder: e.placeholder,
disabled: e.disabled,
clearable: e.clearable && e.type !== "password",
error: e.error,
"error-messages": e.errorMessages,
hint: e.hint,
"persistent-hint": e.persistentHint,
density: e.density,
variant: e.variant,
color: e.internalColor,
inputmode: e.inputMode
}, e.attrs, {
onFocus: e.onFocus,
onBlur: e.onBlur,
onInput: e.onInput
}), L({ _: 2 }, [
e.type === "password" && e.showPasswordToggle ? {
name: "append-inner",
fn: d(() => [
a(G, {
class: "cursor-pointer",
onClick: e.togglePassword
}, {
default: d(() => [
B(F(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" ? (m(), y(_, b({
key: 1,
modelValue: e.value,
"onUpdate:modelValue": l[1] || (l[1] = (t) => e.value = t),
label: e.label,
rows: e.rows,
density: e.density,
variant: e.variant
}, e.attrs), null, 16, ["modelValue", "label", "rows", "density", "variant"])) : e.type === "select" ? (m(), y(Q, b({
key: 2,
modelValue: e.value,
"onUpdate:modelValue": l[2] || (l[2] = (t) => e.value = t),
items: e.computedItems,
label: e.label,
placeholder: e.placeholder,
multiple: e.multiple,
chips: e.chips,
clearable: e.clearable,
disabled: e.disabled,
density: e.density,
variant: e.variant,
"item-title": "label",
"item-value": "value",
error: e.error,
"error-messages": e.errorMessages
}, 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" ? (m(), y(K, {
key: 3,
modelValue: e.value,
"onUpdate:modelValue": l[3] || (l[3] = (t) => e.value = t),
row: e.row
}, {
default: d(() => [
(m(!0), k(P, null, N(e.computedItems, (t) => (m(), y(W, {
key: String(t.value),
label: t.label,
value: t.value
}, null, 8, ["label", "value"]))), 128))
]),
_: 1
}, 8, ["modelValue", "row"])) : e.type === "checkbox" ? (m(), k("div", fe, [
(m(!0), k(P, null, N(e.computedItems, (t) => (m(), y(q, {
key: String(t.value),
modelValue: e.value,
"onUpdate:modelValue": l[4] || (l[4] = (n) => e.value = n),
label: t.label,
value: t.value,
density: e.density
}, null, 8, ["modelValue", "label", "value", "density"]))), 128))
])) : D("", !0)
]);
}
const J = /* @__PURE__ */ w(me, [["render", ce], ["__scopeId", "data-v-2f57f5c8"]]), ye = S({
name: "EliOlaMundo",
components: {
EliBotao: H,
EliBadge: M,
EliInput: J
},
setup() {
const e = i(""), l = i([]), r = i(""), p = i(""), u = i(""), g = i(""), t = i(""), n = i(""), V = i(""), o = i(""), h = i(""), I = i(null), U = i([]);
return {
nome: e,
email: n,
documento: h,
estado: l,
telefone: p,
mensagem: V,
senha: o,
cor: I,
habilidades: U,
idade: u,
altura: g,
cep: r,
valor: t
};
}
}), ge = { class: "grid-example" };
function be(e, l, r, p, u, g) {
const t = E("EliBadge"), n = E("EliInput"), V = E("EliBotao");
return m(), y(x, null, {
default: d(() => [
a(z, {
class: "mx-auto",
max_width: "400"
}, {
default: d(() => [
a(R, null, {
default: d(() => [
a(t, {
badge: "Novo",
"offset-x": "-15",
location: "right center"
}, {
default: d(() => [...l[14] || (l[14] = [
B(" Olá Mundo! ", -1)
])]),
_: 1
})
]),
_: 1
}),
a(j, null, {
default: d(() => [
l[15] || (l[15] = B(" Este é um componente de exemplo integrado com Vuetify. ", -1)),
C("div", ge, [
a(n, {
modelValue: e.nome,
"onUpdate:modelValue": l[0] || (l[0] = (o) => e.nome = o),
label: "Nome",
placeholder: "Digite o nome",
density: "compact"
}, null, 8, ["modelValue"]),
a(n, {
modelValue: e.idade,
"onUpdate:modelValue": l[1] || (l[1] = (o) => e.idade = o),
type: "numericoInteiro",
label: "Idade",
density: "default"
}, null, 8, ["modelValue"]),
a(n, {
modelValue: e.altura,
"onUpdate:modelValue": l[2] || (l[2] = (o) => e.altura = o),
type: "numericoDecimal",
label: "Altura",
density: "comfortable"
}, null, 8, ["modelValue"]),
a(n, {
modelValue: e.valor,
"onUpdate:modelValue": l[3] || (l[3] = (o) => e.valor = o),
type: "numericoMoeda",
label: "Valor"
}, null, 8, ["modelValue"]),
a(n, {
modelValue: e.telefone,
"onUpdate:modelValue": l[4] || (l[4] = (o) => e.telefone = o),
type: "telefone",
label: "Telefone"
}, null, 8, ["modelValue"]),
a(n, {
modelValue: e.cep,
"onUpdate:modelValue": l[5] || (l[5] = (o) => e.cep = o),
type: "cep",
label: "CEP",
placeholder: "00000-000"
}, null, 8, ["modelValue"]),
a(n, {
type: "select",
label: "Estado",
options: [
{ label: "São Paulo", value: "SP" },
{ label: "Rio de Janeiro", value: "RJ" }
],
modelValue: e.estado,
"onUpdate:modelValue": l[6] || (l[6] = (o) => e.estado = o),
multiple: ""
}, null, 8, ["modelValue"]),
a(n, {
modelValue: e.documento,
"onUpdate:modelValue": l[7] || (l[7] = (o) => e.documento = o),
type: "cpfCnpj",
label: "CPF / CNPJ"
}, null, 8, ["modelValue"]),
a(n, {
modelValue: e.email,
"onUpdate:modelValue": l[8] || (l[8] = (o) => e.email = o),
label: "Email",
placeholder: "email@exemplo.com"
}, null, 8, ["modelValue"]),
a(n, {
modelValue: e.senha,
"onUpdate:modelValue": l[9] || (l[9] = (o) => e.senha = o),
label: "Senha",
type: "password",
showPasswordToggle: !0,
placeholder: "Digite sua senha"
}, null, 8, ["modelValue"]),
a(n, {
type: "textarea",
modelValue: e.mensagem,
"onUpdate:modelValue": l[10] || (l[10] = (o) => e.mensagem = o),
label: "Mensagem",
rows: 5
}, null, 8, ["modelValue"]),
a(n, {
type: "radio",
modelValue: e.cor,
"onUpdate:modelValue": l[11] || (l[11] = (o) => e.cor = o),
label: "Cor favorita",
options: [
{ label: "Azul", value: "azul" },
{ label: "Verde", value: "verde" }
]
}, null, 8, ["modelValue"]),
a(n, {
type: "checkbox",
modelValue: e.habilidades,
"onUpdate:modelValue": l[12] || (l[12] = (o) => e.habilidades = o),
options: [
{ label: "Vue", value: "vue" },
{ label: "React", value: "react" }
]
}, null, 8, ["modelValue"]),
a(n, {
modelValue: e.nome,
"onUpdate:modelValue": l[13] || (l[13] = (o) => e.nome = o),
label: "Nome",
error: !0,
"error-messages": ["Obrigatório"]
}, null, 8, ["modelValue"])
])
]),
_: 1
}),
a(O, null, {
default: d(() => [
a(V, {
color: "primary",
variant: "elevated",
block: ""
}, {
default: d(() => [...l[16] || (l[16] = [
B(" Botão Vuetify ", -1)
])]),
_: 1
})
]),
_: 1
})
]),
_: 1
})
]),
_: 1
});
}
const ve = /* @__PURE__ */ w(ye, [["render", be]]), Ve = S({
name: "EliCartao",
components: { EliBadge: M },
inheritAttrs: !1,
props: {
/** Título de fallback caso o slot `titulo` não seja usado. */
titulo: {
type: String,
default: ""
},
/**
* Status semântico do cartão.
* Usado para cor/label e para permitir filtros por status.
*/
status: {
type: String,
required: !0
},
/** Variante visual do v-card (Vuetify). */
variant: {
type: String,
default: "outlined"
}
},
emits: {
/** Emit opcional para padronizar clique no cartão. */
clicar: (e) => !0
},
setup(e, { emit: l }) {
const r = c(() => e.status), p = c(() => {
switch (e.status) {
case "novo":
return "primary";
case "rascunho":
return "secondary";
case "vendido":
return "success";
case "cancelado":
return "error";
}
}), u = c(() => `eli-cartao--${e.status}`);
function g() {
l("clicar", e.status);
}
return {
rotuloStatus: r,
corStatus: p,
classeStatus: u,
onClick: g
};
}
}), $e = { class: "eli-cartao__titulo-texto" }, Be = { class: "eli-cartao__status" };
function Se(e, l, r, p, u, g) {
const t = E("EliBadge");
return m(), y(z, b({
class: ["eli-cartao", e.classeStatus],
variant: e.variant
}, e.$attrs), {
default: d(() => [
a(R, { class: "eli-cartao__titulo" }, {
default: d(() => [
C("div", $e, [
v(e.$slots, "titulo", {}, () => [
B(F(e.titulo), 1)
], !0)
]),
C("div", Be, [
a(t, {
badge: e.rotuloStatus,
radius: "pill",
color: e.corStatus
}, {
default: d(() => [...l[0] || (l[0] = [
C("span", null, null, -1)
])]),
_: 1
}, 8, ["badge", "color"])
])
]),
_: 3
}),
a(j, { class: "eli-cartao__conteudo" }, {
default: d(() => [
v(e.$slots, "default", {}, void 0, !0)
]),
_: 3
}),
e.$slots.acoes ? (m(), y(O, {
key: 0,
class: "eli-cartao__acoes"
}, {
default: d(() => [
v(e.$slots, "acoes", {}, void 0, !0)
]),
_: 3
})) : D("", !0)
]),
_: 3
}, 16, ["variant", "class"]);
}
const we = /* @__PURE__ */ w(Ve, [["render", Se], ["__scopeId", "data-v-6c492bd9"]]), Fe = {
install(e) {
e.component("EliOlaMundo", ve), e.component("EliBotao", H), e.component("EliBadge", M), e.component("EliInput", J), e.component("EliCartao", we);
}
};
export {
M as EliBadge,
H as EliBotao,
we as EliCartao,
J as EliInput,
ve as EliOlaMundo,
Fe as default
};