diff --git a/IA.md b/IA.md index 8afb668..8cdc4f6 100644 --- a/IA.md +++ b/IA.md @@ -61,7 +61,7 @@ createApp(App) ### 2) Importação direta (quando não quiser plugin) ```ts -import { EliBotao, EliInput, EliBadge, EliCartao } from "eli-vue"; +import { EliBotao, EliInput, EliBadge, EliCartao, EliDataHora } from "eli-vue"; ``` > Observação: ainda pode ser necessário importar o CSS do pacote: @@ -105,6 +105,30 @@ export default defineComponent({ ``` +### Data e hora (entrada) com suporte a UTC/Z + +```vue + + + +``` + --- ## Troubleshooting (para IAs) @@ -150,3 +174,4 @@ Atualize este `IA.md` quando houver mudanças em qualquer um destes pontos: - lista de exports públicos (novos componentes, renomes, remoções) - mudanças de comportamento relevantes para consumo + diff --git a/dist/eli-vue.css b/dist/eli-vue.css index 7fecca8..fecdba6 100644 --- a/dist/eli-vue.css +++ b/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} +[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-523063f3]{width:100%} diff --git a/dist/eli-vue.es.js b/dist/eli-vue.es.js index 5200fc4..54ca5ac 100644 --- a/dist/eli-vue.es.js +++ b/dist/eli-vue.es.js @@ -1,16 +1,16 @@ -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({ +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({ name: "EliBotao", inheritAttrs: !1, props: { @@ -35,30 +35,30 @@ const ee = S({ default: !1 } } -}), w = (e, l) => { - const r = e.__vccOpts || e; - for (const [p, u] of l) - r[p] = u; - return r; +}), J = (e, t) => { + const c = e.__vccOpts || e; + for (const [y, v] of t) + c[y] = v; + return c; }; -function le(e, l, r, p, u, g) { - return m(), y(X, b({ +function je(e, t, c, y, v, w) { + return k(), H(Ee, F({ 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") + default: D(() => [ + W(e.$slots, "default") ]), _: 3 }, 16, ["color", "variant", "size", "disabled", "loading"]); } -const H = /* @__PURE__ */ w(ee, [["render", le]]), A = { +const Ve = /* @__PURE__ */ J(Pe, [["render", je]]), me = { suave: "4px", pill: "10px" -}, oe = S({ +}, Ne = R({ name: "EliBadge", inheritAttrs: !1, props: { @@ -97,14 +97,14 @@ const H = /* @__PURE__ */ w(ee, [["render", le]]), A = { } }, 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 + 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(() => ({ + "--eli-badge-radius": t.value })); - return { showBadge: r, badgeStyle: p }; + return { showBadge: c, badgeStyle: y }; } }); -function ae(e, l, r, p, u, g) { - return e.showBadge ? (m(), y(Y, b({ +function Fe(e, t, c, y, v, w) { + return e.showBadge ? (k(), H(Ce, F({ key: 0, color: e.color }, e.$attrs, { @@ -115,43 +115,43 @@ function ae(e, l, r, p, u, g) { content: e.badge, style: e.badgeStyle }), { - default: d(() => [ - v(e.$slots, "default", {}, void 0, !0) + default: D(() => [ + W(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); + }, 16, ["color", "location", "offset-x", "offset-y", "dot", "content", "style"])) : W(e.$slots, "default", { key: 1 }, void 0, !0); } -const M = /* @__PURE__ */ w(oe, [["render", ae], ["__scopeId", "data-v-de2fbf2f"]]); -function te(e) { +const le = /* @__PURE__ */ J(Ne, [["render", Fe], ["__scopeId", "data-v-de2fbf2f"]]); +function Le(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 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); } -function ne(e) { +function We(e) { return e.replace(/\D+/g, ""); } +function Re(e) { + const t = We(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) { - 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 Je(e) { + const t = e.replace(/[^\d,]/g, ""), c = t.split(","); + return c.length > 2 ? c[0] + "," + c.slice(1).join("") : t; } -function ue(e) { - const l = T(e); - return l ? (parseInt(l, 10) / 100).toFixed(2).replace(".", ",").replace(/\B(?=(\d{3})+(?!\d))/g, ".") : ""; +function qe(e) { + const t = se(e); + return t ? (parseInt(t, 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"); +function Ze(e) { + const t = se(e).slice(0, 8); + return t.length <= 5 ? t : t.replace(/^(\d{5})(\d{1,3})$/, "$1-$2"); } -const me = S({ +const Xe = R({ name: "EliInput", inheritAttrs: !1, props: { @@ -193,13 +193,13 @@ const me = S({ chips: Boolean }, emits: ["update:modelValue", "change", "focus", "blur"], - setup(e, { emit: l, attrs: r }) { - const p = i(!1), u = i(!1), g = c({ + setup(e, { emit: t, attrs: c }) { + const y = C(!1), v = C(!1), w = E({ get: () => e.modelValue, - set: (f) => { - l("update:modelValue", f), l("change", f); + set: (g) => { + t("update:modelValue", g), t("change", g); } - }), t = c( + }), d = E( () => [ "text", "password", @@ -213,79 +213,79 @@ const me = S({ "numericoMoeda", "cep" ].includes(e.type) - ), n = c( - () => e.type === "password" ? u.value ? "text" : "password" : "text" - ), V = c(() => { + ), f = E( + () => e.type === "password" ? v.value ? "text" : "password" : "text" + ), I = E(() => { if (e.type === "telefone") return "tel"; if (e.type.startsWith("numerico")) return "numeric"; - }), o = c( - () => e.error ? "error" : p.value ? e.color : void 0 + }), l = E( + () => e.error ? "error" : y.value ? e.color : void 0 ); - function h(f) { - const $ = f.target; - let s = $.value; + function Y(g) { + const T = g.target; + let h = T.value; switch (e.type) { case "numericoInteiro": - s = T(s); + h = se(h); break; case "numericoDecimal": - s = de(s); + h = Je(h); break; case "numericoMoeda": - s = ue(s); + h = qe(h); break; case "telefone": - s = se(s); + h = Re(h); break; case "cpfCnpj": - s = re(s); + h = ze(h); break; case "cep": - s = ie(s); + h = Ze(h); break; } - $.value = s, l("update:modelValue", s), l("change", s); + T.value = h, t("update:modelValue", h), t("change", h); } - function I() { - u.value = !u.value; + function V() { + v.value = !v.value; } - const U = c(() => (e.options || []).map((f) => { - if (f && typeof f == "object" && "value" in f) { - const s = f.value; + const L = E(() => (e.options || []).map((g) => { + if (g && typeof g == "object" && "value" in g) { + const h = g.value; return { - label: f.label ?? String(s), - value: s, - disabled: f.disabled + label: g.label ?? String(h), + value: h, + disabled: g.disabled }; } - const $ = f; - return { label: String($), value: $ }; + const T = g; + return { label: String(T), value: T }; })); 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 + attrs: c, + value: w, + isTextLike: d, + inputHtmlType: f, + inputMode: I, + internalColor: l, + showPassword: v, + togglePassword: V, + onInput: Y, + onFocus: () => t("focus"), + onBlur: () => t("blur"), + computedItems: L }; } -}), pe = { class: "eli-input" }, fe = { +}), Ge = { class: "eli-input" }, Qe = { key: 4, class: "checkbox-group" }; -function ce(e, l, r, p, u, g) { - return m(), k("div", pe, [ - e.isTextLike ? (m(), y(Z, b({ +function Ke(e, t, c, y, v, w) { + return k(), G("div", Ge, [ + e.isTextLike ? (k(), H(ye, F({ key: 0, modelValue: e.value, - "onUpdate:modelValue": l[0] || (l[0] = (t) => e.value = t), + "onUpdate:modelValue": t[0] || (t[0] = (d) => e.value = d), type: e.inputHtmlType, label: e.label, placeholder: e.placeholder, @@ -303,34 +303,34 @@ function ce(e, l, r, p, u, g) { onFocus: e.onFocus, onBlur: e.onBlur, onInput: e.onInput - }), L({ _: 2 }, [ + }), ke({ _: 2 }, [ e.type === "password" && e.showPasswordToggle ? { name: "append-inner", - fn: d(() => [ - a(G, { + fn: D(() => [ + $(Oe, { class: "cursor-pointer", onClick: e.togglePassword }, { - default: d(() => [ - B(F(e.showPassword ? "mdi-eye-off" : "mdi-eye"), 1) + default: D(() => [ + Q($e(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({ + ]), 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({ key: 1, modelValue: e.value, - "onUpdate:modelValue": l[1] || (l[1] = (t) => e.value = t), + "onUpdate:modelValue": t[1] || (t[1] = (d) => e.value = d), 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({ + }, e.attrs), null, 16, ["modelValue", "label", "rows", "density", "variant"])) : e.type === "select" ? (k(), H(Ye, F({ key: 2, modelValue: e.value, - "onUpdate:modelValue": l[2] || (l[2] = (t) => e.value = t), + "onUpdate:modelValue": t[2] || (t[2] = (d) => e.value = d), items: e.computedItems, label: e.label, placeholder: e.placeholder, @@ -347,127 +347,127 @@ function ce(e, l, r, p, u, g) { }, 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, { + }), null, 16, ["modelValue", "items", "label", "placeholder", "multiple", "chips", "clearable", "disabled", "density", "variant", "error", "error-messages", "onFocus", "onBlur"])) : e.type === "radio" ? (k(), H(Ue, { key: 3, modelValue: e.value, - "onUpdate:modelValue": l[3] || (l[3] = (t) => e.value = t), + "onUpdate:modelValue": t[3] || (t[3] = (d) => e.value = d), 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 + default: D(() => [ + (k(!0), G(de, null, fe(e.computedItems, (d) => (k(), H(Te, { + key: String(d.value), + label: d.label, + value: d.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), + }, 8, ["modelValue", "row"])) : e.type === "checkbox" ? (k(), G("div", Qe, [ + (k(!0), G(de, null, fe(e.computedItems, (d) => (k(), H(Ie, { + key: String(d.value), modelValue: e.value, - "onUpdate:modelValue": l[4] || (l[4] = (n) => e.value = n), - label: t.label, - value: t.value, + "onUpdate:modelValue": t[4] || (t[4] = (f) => e.value = f), + label: d.label, + value: d.value, density: e.density }, null, 8, ["modelValue", "label", "value", "density"]))), 128)) - ])) : D("", !0) + ])) : pe("", !0) ]); } -const J = /* @__PURE__ */ w(me, [["render", ce], ["__scopeId", "data-v-2f57f5c8"]]), ye = S({ +const Se = /* @__PURE__ */ J(Xe, [["render", Ke], ["__scopeId", "data-v-2f57f5c8"]]), _e = R({ name: "EliOlaMundo", components: { - EliBotao: H, - EliBadge: M, - EliInput: J + EliBotao: Ve, + EliBadge: le, + EliInput: Se }, 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([]); + 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([]); 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 + email: f, + documento: Y, + estado: t, + telefone: y, + mensagem: I, + senha: l, + cor: V, + habilidades: L, + idade: v, + altura: w, + cep: c, + valor: d }; } -}), 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, { +}), xe = { class: "grid-example" }; +function et(e, t, c, y, v, w) { + const d = te("EliBadge"), f = te("EliInput"), I = te("EliBotao"); + return k(), H(Ae, null, { + default: D(() => [ + $(ve, { class: "mx-auto", max_width: "400" }, { - default: d(() => [ - a(R, null, { - default: d(() => [ - a(t, { + default: D(() => [ + $(ge, null, { + default: D(() => [ + $(d, { badge: "Novo", "offset-x": "-15", location: "right center" }, { - default: d(() => [...l[14] || (l[14] = [ - B(" Olá Mundo! ", -1) + default: D(() => [...t[14] || (t[14] = [ + Q(" 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, { + $(he, null, { + default: D(() => [ + t[15] || (t[15] = Q(" Este é um componente de exemplo integrado com Vuetify. ", -1)), + ae("div", xe, [ + $(f, { modelValue: e.nome, - "onUpdate:modelValue": l[0] || (l[0] = (o) => e.nome = o), + "onUpdate:modelValue": t[0] || (t[0] = (l) => e.nome = l), label: "Nome", placeholder: "Digite o nome", density: "compact" }, null, 8, ["modelValue"]), - a(n, { + $(f, { modelValue: e.idade, - "onUpdate:modelValue": l[1] || (l[1] = (o) => e.idade = o), + "onUpdate:modelValue": t[1] || (t[1] = (l) => e.idade = l), type: "numericoInteiro", label: "Idade", density: "default" }, null, 8, ["modelValue"]), - a(n, { + $(f, { modelValue: e.altura, - "onUpdate:modelValue": l[2] || (l[2] = (o) => e.altura = o), + "onUpdate:modelValue": t[2] || (t[2] = (l) => e.altura = l), type: "numericoDecimal", label: "Altura", density: "comfortable" }, null, 8, ["modelValue"]), - a(n, { + $(f, { modelValue: e.valor, - "onUpdate:modelValue": l[3] || (l[3] = (o) => e.valor = o), + "onUpdate:modelValue": t[3] || (t[3] = (l) => e.valor = l), type: "numericoMoeda", label: "Valor" }, null, 8, ["modelValue"]), - a(n, { + $(f, { modelValue: e.telefone, - "onUpdate:modelValue": l[4] || (l[4] = (o) => e.telefone = o), + "onUpdate:modelValue": t[4] || (t[4] = (l) => e.telefone = l), type: "telefone", label: "Telefone" }, null, 8, ["modelValue"]), - a(n, { + $(f, { modelValue: e.cep, - "onUpdate:modelValue": l[5] || (l[5] = (o) => e.cep = o), + "onUpdate:modelValue": t[5] || (t[5] = (l) => e.cep = l), type: "cep", label: "CEP", placeholder: "00000-000" }, null, 8, ["modelValue"]), - a(n, { + $(f, { type: "select", label: "Estado", options: [ @@ -475,58 +475,58 @@ function be(e, l, r, p, u, g) { { label: "Rio de Janeiro", value: "RJ" } ], modelValue: e.estado, - "onUpdate:modelValue": l[6] || (l[6] = (o) => e.estado = o), + "onUpdate:modelValue": t[6] || (t[6] = (l) => e.estado = l), multiple: "" }, null, 8, ["modelValue"]), - a(n, { + $(f, { modelValue: e.documento, - "onUpdate:modelValue": l[7] || (l[7] = (o) => e.documento = o), + "onUpdate:modelValue": t[7] || (t[7] = (l) => e.documento = l), type: "cpfCnpj", label: "CPF / CNPJ" }, null, 8, ["modelValue"]), - a(n, { + $(f, { modelValue: e.email, - "onUpdate:modelValue": l[8] || (l[8] = (o) => e.email = o), + "onUpdate:modelValue": t[8] || (t[8] = (l) => e.email = l), label: "Email", placeholder: "email@exemplo.com" }, null, 8, ["modelValue"]), - a(n, { + $(f, { modelValue: e.senha, - "onUpdate:modelValue": l[9] || (l[9] = (o) => e.senha = o), + "onUpdate:modelValue": t[9] || (t[9] = (l) => e.senha = l), label: "Senha", type: "password", showPasswordToggle: !0, placeholder: "Digite sua senha" }, null, 8, ["modelValue"]), - a(n, { + $(f, { type: "textarea", modelValue: e.mensagem, - "onUpdate:modelValue": l[10] || (l[10] = (o) => e.mensagem = o), + "onUpdate:modelValue": t[10] || (t[10] = (l) => e.mensagem = l), label: "Mensagem", rows: 5 }, null, 8, ["modelValue"]), - a(n, { + $(f, { type: "radio", modelValue: e.cor, - "onUpdate:modelValue": l[11] || (l[11] = (o) => e.cor = o), + "onUpdate:modelValue": t[11] || (t[11] = (l) => e.cor = l), label: "Cor favorita", options: [ { label: "Azul", value: "azul" }, { label: "Verde", value: "verde" } ] }, null, 8, ["modelValue"]), - a(n, { + $(f, { type: "checkbox", modelValue: e.habilidades, - "onUpdate:modelValue": l[12] || (l[12] = (o) => e.habilidades = o), + "onUpdate:modelValue": t[12] || (t[12] = (l) => e.habilidades = l), options: [ { label: "Vue", value: "vue" }, { label: "React", value: "react" } ] }, null, 8, ["modelValue"]), - a(n, { + $(f, { modelValue: e.nome, - "onUpdate:modelValue": l[13] || (l[13] = (o) => e.nome = o), + "onUpdate:modelValue": t[13] || (t[13] = (l) => e.nome = l), label: "Nome", error: !0, "error-messages": ["Obrigatório"] @@ -535,15 +535,15 @@ function be(e, l, r, p, u, g) { ]), _: 1 }), - a(O, null, { - default: d(() => [ - a(V, { + $(be, null, { + default: D(() => [ + $(I, { color: "primary", variant: "elevated", block: "" }, { - default: d(() => [...l[16] || (l[16] = [ - B(" Botão Vuetify ", -1) + default: D(() => [...t[16] || (t[16] = [ + Q(" Botão Vuetify ", -1) ])]), _: 1 }) @@ -557,9 +557,9 @@ function be(e, l, r, p, u, g) { _: 1 }); } -const ve = /* @__PURE__ */ w(ye, [["render", be]]), Ve = S({ +const tt = /* @__PURE__ */ J(_e, [["render", et]]), at = R({ name: "EliCartao", - components: { EliBadge: M }, + components: { EliBadge: le }, inheritAttrs: !1, props: { /** Título de fallback caso o slot `titulo` não seja usado. */ @@ -585,8 +585,8 @@ const ve = /* @__PURE__ */ w(ye, [["render", be]]), Ve = S({ /** Emit opcional para padronizar clique no cartão. */ clicar: (e) => !0 }, - setup(e, { emit: l }) { - const r = c(() => e.status), p = c(() => { + setup(e, { emit: t }) { + const c = E(() => e.status), y = E(() => { switch (e.status) { case "novo": return "primary"; @@ -597,40 +597,40 @@ const ve = /* @__PURE__ */ w(ye, [["render", be]]), Ve = S({ case "cancelado": return "error"; } - }), u = c(() => `eli-cartao--${e.status}`); - function g() { - l("clicar", e.status); + }), v = E(() => `eli-cartao--${e.status}`); + function w() { + t("clicar", e.status); } return { - rotuloStatus: r, - corStatus: p, - classeStatus: u, - onClick: g + rotuloStatus: c, + corStatus: y, + classeStatus: v, + onClick: w }; } -}), $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({ +}), rt = { class: "eli-cartao__titulo-texto" }, nt = { class: "eli-cartao__status" }; +function ot(e, t, c, y, v, w) { + const d = te("EliBadge"); + return k(), H(ve, F({ 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) + default: D(() => [ + $(ge, { class: "eli-cartao__titulo" }, { + default: D(() => [ + ae("div", rt, [ + W(e.$slots, "titulo", {}, () => [ + Q($e(e.titulo), 1) ], !0) ]), - C("div", Be, [ - a(t, { + ae("div", nt, [ + $(d, { badge: e.rotuloStatus, radius: "pill", color: e.corStatus }, { - default: d(() => [...l[0] || (l[0] = [ - C("span", null, null, -1) + default: D(() => [...t[0] || (t[0] = [ + ae("span", null, null, -1) ])]), _: 1 }, 8, ["badge", "color"]) @@ -638,35 +638,473 @@ function Se(e, l, r, p, u, g) { ]), _: 3 }), - a(j, { class: "eli-cartao__conteudo" }, { - default: d(() => [ - v(e.$slots, "default", {}, void 0, !0) + $(he, { class: "eli-cartao__conteudo" }, { + default: D(() => [ + W(e.$slots, "default", {}, void 0, !0) ]), _: 3 }), - e.$slots.acoes ? (m(), y(O, { + e.$slots.acoes ? (k(), H(be, { key: 0, class: "eli-cartao__acoes" }, { - default: d(() => [ - v(e.$slots, "acoes", {}, void 0, !0) + default: D(() => [ + W(e.$slots, "acoes", {}, void 0, !0) ]), _: 3 - })) : D("", !0) + })) : pe("", !0) ]), _: 3 }, 16, ["variant", "class"]); } -const we = /* @__PURE__ */ w(Ve, [["render", Se], ["__scopeId", "data-v-6c492bd9"]]), Fe = { +const lt = /* @__PURE__ */ J(at, [["render", ot], ["__scopeId", "data-v-6c492bd9"]]); +function st(e) { + return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e; +} +var re = { exports: {} }, it = re.exports, ce; +function ut() { + 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) { + var n = ["th", "st", "nd", "rd"], a = s % 100; + return "[" + s + (n[(a - 20) % 10] || n[a] || n[0]) + "]"; + } }, ne = function(s, n, a) { + var o = String(s); + return !o || o.length >= n ? s : "" + Array(n + 1 - o.length).join(a) + s; + }, Be = { s: ne, z: function(s) { + var n = -s.utcOffset(), a = Math.abs(n), o = Math.floor(a / 60), r = a % 60; + return (n <= 0 ? "+" : "-") + ne(o, 2, "0") + ":" + ne(r, 2, "0"); + }, m: function s(n, a) { + if (n.date() < a.date()) return -s(a, n); + var o = 12 * (a.year() - n.year()) + (a.month() - n.month()), r = n.clone().add(o, V), i = a - r < 0, u = n.clone().add(o + (i ? -1 : 1), V); + return +(-(o + (a - r) / (i ? r - u : u - r)) || 0); + }, 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$/, ""); + }, u: function(s) { + return s === void 0; + } }, q = "en", P = {}; + P[q] = De; + var ie = "$isDayjsObject", oe = function(s) { + return s instanceof _ || !(!s || !s[ie]); + }, K = function s(n, a, o) { + var r; + if (!n) return q; + if (typeof n == "string") { + var i = n.toLowerCase(); + P[i] && (r = i), a && (P[i] = a, r = i); + var u = n.split("-"); + if (!r && u.length > 1) return s(u[0]); + } else { + var p = n.name; + P[p] = n, r = p; + } + return !o && r && (q = r), r || !o && q; + }, S = function(s, n) { + if (oe(s)) return s.clone(); + var a = typeof n == "object" ? n : {}; + return a.date = s, a.args = arguments, new _(a); + }, m = Be; + m.l = K, m.i = oe, m.w = function(s, n) { + return S(s, { locale: n.$L, utc: n.$u, x: n.$x, $offset: n.$offset }); + }; + var _ = (function() { + function s(a) { + this.$L = K(a.locale, null, !0), this.parse(a), this.$x = this.$x || a.x || {}, this[ie] = !0; + } + var n = s.prototype; + return n.parse = function(a) { + this.$d = (function(o) { + var r = o.date, i = o.utc; + if (r === null) return /* @__PURE__ */ new Date(NaN); + 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); + 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); + } + } + return new Date(r); + })(a), this.init(); + }, n.init = function() { + var a = this.$d; + this.$y = a.getFullYear(), this.$M = a.getMonth(), this.$D = a.getDate(), this.$W = a.getDay(), this.$H = a.getHours(), this.$m = a.getMinutes(), this.$s = a.getSeconds(), this.$ms = a.getMilliseconds(); + }, n.$utils = function() { + return m; + }, n.isValid = function() { + return this.$d.toString() !== h; + }, n.isSame = function(a, o) { + var r = S(a); + return this.startOf(o) <= r && r <= this.endOf(o); + }, n.isAfter = function(a, o) { + return S(a) < this.startOf(o); + }, n.isBefore = function(a, o) { + return this.endOf(o) < S(a); + }, n.$g = function(a, o, r) { + return m.u(a) ? this[o] : this.set(r, a); + }, n.unix = function() { + return Math.floor(this.valueOf() / 1e3); + }, n.valueOf = function() { + return this.$d.getTime(); + }, n.startOf = function(a, o) { + var r = this, i = !!m.u(o) || o, u = m.p(a), p = function(N, O) { + var A = m.w(r.$u ? Date.UTC(r.$y, O, N) : new Date(r.$y, O, N), r); + 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" : ""); + switch (u) { + case g: + return i ? p(1, 0) : p(31, 11); + case V: + return i ? p(1, B) : p(0, B + 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); + case l: + case T: + return b(z + "Hours", 0); + case I: + return b(z + "Minutes", 1); + case f: + return b(z + "Seconds", 2); + case d: + return b(z + "Milliseconds", 3); + default: + return this.clone(); + } + }, 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 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); + return this.init(), this; + }, n.set = function(a, o) { + return this.clone().$set(a, o); + }, n.get = function(a) { + return this[m.p(a)](); + }, n.add = function(a, o) { + var r, i = this; + a = Number(a); + var u = m.p(o), p = function(B) { + var U = S(i); + return m.w(U.date(U.date() + Math.round(B * a)), i); + }; + if (u === V) return this.set(V, this.$M + a); + if (u === g) return this.set(g, 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; + 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) { + return O && (O[A] || O(o, i)) || X[A].slice(0, x); + }, Z = function(O) { + return m.s(p % 12 || 12, O, "0"); + }, N = z || function(O, A, X) { + var x = O < 12 ? "AM" : "PM"; + return X ? x.toLowerCase() : x; + }; + return i.replace(we, (function(O, A) { + return A || (function(X) { + switch (X) { + case "YY": + return String(o.$y).slice(-2); + case "YYYY": + return m.s(o.$y, 4, "0"); + case "M": + return M + 1; + case "MM": + return m.s(M + 1, 2, "0"); + case "MMM": + return j(r.monthsShort, M, U, 3); + case "MMMM": + return j(U, M); + case "D": + return o.$D; + case "DD": + return m.s(o.$D, 2, "0"); + case "d": + return String(o.$W); + case "dd": + return j(r.weekdaysMin, o.$W, B, 2); + case "ddd": + return j(r.weekdaysShort, o.$W, B, 3); + case "dddd": + return B[o.$W]; + case "H": + return String(p); + case "HH": + return m.s(p, 2, "0"); + case "h": + return Z(1); + case "hh": + return Z(2); + case "a": + return N(p, b, !0); + case "A": + return N(p, b, !1); + case "m": + return String(b); + case "mm": + return m.s(b, 2, "0"); + case "s": + return String(o.$s); + case "ss": + return m.s(o.$s, 2, "0"); + case "SSS": + return m.s(o.$ms, 3, "0"); + case "Z": + return u; + } + return null; + })(O) || u.replace(":", ""); + })); + }, 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() { + return m.m(u, b); + }; + switch (p) { + case g: + i = U() / 12; + break; + case V: + i = U(); + break; + case L: + i = U() / 3; + break; + case Y: + i = (B - M) / 6048e5; + break; + case l: + i = (B - M) / 864e5; + break; + case I: + i = B / v; + break; + case f: + i = B / y; + break; + case d: + i = B / c; + break; + default: + i = B; + } + return r ? i : m.a(i); + }, n.daysInMonth = function() { + return this.endOf(V).$D; + }, n.$locale = function() { + return P[this.$L]; + }, n.locale = function(a, o) { + if (!a) return this.$L; + var r = this.clone(), i = K(a, o, !0); + return i && (r.$L = i), r; + }, n.clone = function() { + return m.w(this.$d, this); + }, n.toDate = function() { + return new Date(this.valueOf()); + }, n.toJSON = function() { + return this.isValid() ? this.toISOString() : null; + }, n.toISOString = function() { + return this.$d.toISOString(); + }, n.toString = function() { + 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) { + ue[s[1]] = function(n) { + return this.$g(n, s[0], s[1]); + }; + })), S.extend = function(s, n) { + return s.$i || (s(n, _, S), s.$i = !0), S; + }, S.locale = K, S.isDayjs = oe, S.unix = function(s) { + return S(1e3 * s); + }, S.en = P[q], S.Ls = P, S.p = {}, S; + })); + })(re)), re.exports; +} +var dt = ut(); +const ee = /* @__PURE__ */ st(dt), ft = R({ + name: "EliDataHora", + inheritAttrs: !1, + props: { + /** + * Valor em ISO 8601: + * - com offset (ex.: `2026-01-09T13:15:00-03:00`) + * - ou UTC absoluto (ex.: `2026-01-09T16:15:00Z`) + */ + modelValue: { + type: String, + default: null + }, + /** + * Define o tipo de entrada. + * - `dataHora`: usa `datetime-local` + * - `data`: usa `date` + */ + modo: { + type: String, + default: "dataHora" + }, + /** Rótulo exibido no v-text-field (Vuetify). */ + rotulo: { + type: String, + default: "Data e hora" + }, + /** Placeholder do input. */ + placeholder: { + type: String, + default: "" + }, + /** Desabilita a interação. */ + desabilitado: { + type: Boolean, + default: !1 + }, + /** Se true, mostra ícone para limpar o valor (Vuetify clearable). */ + limpavel: { + type: Boolean, + default: !1 + }, + /** Estado de erro (visual). */ + erro: { + type: Boolean, + default: !1 + }, + /** Mensagens de erro. */ + mensagensErro: { + type: [String, Array], + default: () => [] + }, + /** Texto de apoio. */ + dica: { + type: String, + default: "" + }, + /** Mantém a dica sempre visível. */ + dicaPersistente: { + type: Boolean, + default: !1 + }, + /** Densidade do campo (Vuetify). */ + densidade: { + type: String, + default: "comfortable" + }, + /** Variante do v-text-field (Vuetify). */ + variante: { + type: String, + default: "outlined" + }, + /** + * Valor mínimo permitido. + * ISO 8601 (offset ou `Z`). + */ + min: { + // ISO 8601 (offset ou Z) + type: String, + default: void 0 + }, + /** + * Valor máximo permitido. + * ISO 8601 (offset ou `Z`). + */ + max: { + // ISO 8601 (offset ou Z) + type: String, + default: void 0 + } + }, + emits: { + /** v-model padrão. */ + "update:modelValue": (e) => !0, + /** Alias para consumidores que querem um evento semântico. */ + alterar: (e) => !0, + foco: () => !0, + desfoco: () => !0 + }, + setup(e, { emit: t, attrs: c }) { + const y = E( + () => e.modo === "data" ? "date" : "datetime-local" + ); + function v(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) : "", + set: (l) => { + const Y = l && l.length > 0 ? l : null; + if (!Y) { + t("update:modelValue", null), t("alterar", null); + return; + } + const V = w(Y); + t("update:modelValue", V), t("alterar", V); + } + }), f = E(() => { + if (e.min) + return v(e.min); + }), I = E(() => { + if (e.max) + return v(e.max); + }); + return { attrs: c, valor: d, emit: t, minLocal: f, maxLocal: I, tipoInput: y }; + } +}), mt = { class: "eli-data-hora" }; +function ct(e, t, c, y, v, w) { + return k(), G("div", mt, [ + $(ye, F({ + modelValue: e.valor, + "onUpdate:modelValue": t[0] || (t[0] = (d) => e.valor = d), + type: e.tipoInput, + label: e.rotulo, + placeholder: e.placeholder, + disabled: e.desabilitado, + clearable: e.limpavel, + error: e.erro, + "error-messages": e.mensagensErro, + hint: e.dica, + "persistent-hint": e.dicaPersistente, + density: e.densidade, + variant: e.variante, + min: e.minLocal, + max: e.maxLocal + }, e.attrs, { + onFocus: t[1] || (t[1] = (d) => e.emit("foco")), + onBlur: t[2] || (t[2] = (d) => e.emit("desfoco")) + }), 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-523063f3"]]), kt = { install(e) { - e.component("EliOlaMundo", ve), e.component("EliBotao", H), e.component("EliBadge", M), e.component("EliInput", J), e.component("EliCartao", we); + e.component("EliOlaMundo", tt), e.component("EliBotao", Ve), e.component("EliBadge", le), e.component("EliInput", Se), e.component("EliCartao", lt), e.component("EliDataHora", pt); } }; export { - M as EliBadge, - H as EliBotao, - we as EliCartao, - J as EliInput, - ve as EliOlaMundo, - Fe as default + le as EliBadge, + Ve as EliBotao, + lt as EliCartao, + pt as EliDataHora, + Se as EliInput, + tt as EliOlaMundo, + kt as default }; diff --git a/dist/eli-vue.umd.js b/dist/eli-vue.umd.js index 3d88e47..9b9fe28 100644 --- a/dist/eli-vue.umd.js +++ b/dist/eli-vue.umd.js @@ -1 +1 @@ -(function(a,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue"),require("vuetify/components/VBtn"),require("vuetify/components/VBadge"),require("vuetify/components/VCheckbox"),require("vuetify/components/VIcon"),require("vuetify/components/VRadio"),require("vuetify/components/VRadioGroup"),require("vuetify/components/VSelect"),require("vuetify/components/VTextField"),require("vuetify/components/VTextarea"),require("vuetify/components/VCard"),require("vuetify/components/VGrid")):typeof define=="function"&&define.amd?define(["exports","vue","vuetify/components/VBtn","vuetify/components/VBadge","vuetify/components/VCheckbox","vuetify/components/VIcon","vuetify/components/VRadio","vuetify/components/VRadioGroup","vuetify/components/VSelect","vuetify/components/VTextField","vuetify/components/VTextarea","vuetify/components/VCard","vuetify/components/VGrid"],o):(a=typeof globalThis<"u"?globalThis:a||self,o(a.eli_vue={},a.Vue,a.VBtn,a.VBadge,a.VCheckbox,a.VIcon,a.VRadio,a.VRadioGroup,a.VSelect,a.VTextField,a.VTextarea,a.VCard,a.VGrid))})(this,(function(a,o,E,T,I,P,U,M,F,q,A,c,R){"use strict";const D=o.defineComponent({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}}}),f=(e,t)=>{const r=e.__vccOpts||e;for(const[u,s]of t)r[u]=s;return r};function j(e,t,r,u,s,m){return o.openBlock(),o.createBlock(E.VBtn,o.mergeProps({color:e.color,variant:e.variant,size:e.size,disabled:e.disabled,loading:e.loading},e.$attrs,{class:"text-none pt-1"}),{default:o.withCtx(()=>[o.renderSlot(e.$slots,"default")]),_:3},16,["color","variant","size","disabled","loading"])}const b=f(D,[["render",j]]),w={suave:"4px",pill:"10px"},O=o.defineComponent({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},radius:{type:String,default:"suave"}},setup(e){const t=o.computed(()=>e.radius in w?w[e.radius]:e.radius),r=o.computed(()=>e.dot||e.badge!==void 0?e.visible:!1),u=o.computed(()=>({"--eli-badge-radius":t.value}));return{showBadge:r,badgeStyle:u}}});function z(e,t,r,u,s,m){return e.showBadge?(o.openBlock(),o.createBlock(T.VBadge,o.mergeProps({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:o.withCtx(()=>[o.renderSlot(e.$slots,"default",{},void 0,!0)]),_:3},16,["color","location","offset-x","offset-y","dot","content","style"])):o.renderSlot(e.$slots,"default",{key:1},void 0,!0)}const g=f(O,[["render",z],["__scopeId","data-v-de2fbf2f"]]);function G(e){return e.replace(/\D+/g,"")}function H(e){const t=G(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 L(e){return e.replace(/\D+/g,"")}function J(e){const t=L(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 B(e){return e.replace(/\D+/g,"")}function X(e){const t=e.replace(/[^\d,]/g,""),r=t.split(",");return r.length>2?r[0]+","+r.slice(1).join(""):t}function Y(e){const t=B(e);return t?(parseInt(t,10)/100).toFixed(2).replace(".",",").replace(/\B(?=(\d{3})+(?!\d))/g,"."):""}function W(e){const t=B(e).slice(0,8);return t.length<=5?t:t.replace(/^(\d{5})(\d{1,3})$/,"$1-$2")}const K=o.defineComponent({name:"EliInput",inheritAttrs:!1,props:{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},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:t,attrs:r}){const u=o.ref(!1),s=o.ref(!1),m=o.computed({get:()=>e.modelValue,set:p=>{t("update:modelValue",p),t("change",p)}}),n=o.computed(()=>["text","password","email","search","url","telefone","cpfCnpj","numericoInteiro","numericoDecimal","numericoMoeda","cep"].includes(e.type)),d=o.computed(()=>e.type==="password"?s.value?"text":"password":"text"),V=o.computed(()=>{if(e.type==="telefone")return"tel";if(e.type.startsWith("numerico"))return"numeric"}),l=o.computed(()=>e.error?"error":u.value?e.color:void 0);function k(p){const y=p.target;let i=y.value;switch(e.type){case"numericoInteiro":i=B(i);break;case"numericoDecimal":i=X(i);break;case"numericoMoeda":i=Y(i);break;case"telefone":i=J(i);break;case"cpfCnpj":i=H(i);break;case"cep":i=W(i);break}y.value=i,t("update:modelValue",i),t("change",i)}function C(){s.value=!s.value}const S=o.computed(()=>(e.options||[]).map(p=>{if(p&&typeof p=="object"&&"value"in p){const i=p.value;return{label:p.label??String(i),value:i,disabled:p.disabled}}const y=p;return{label:String(y),value:y}}));return{attrs:r,value:m,isTextLike:n,inputHtmlType:d,inputMode:V,internalColor:l,showPassword:s,togglePassword:C,onInput:k,onFocus:()=>t("focus"),onBlur:()=>t("blur"),computedItems:S}}}),Q={class:"eli-input"},Z={key:4,class:"checkbox-group"};function v(e,t,r,u,s,m){return o.openBlock(),o.createElementBlock("div",Q,[e.isTextLike?(o.openBlock(),o.createBlock(q.VTextField,o.mergeProps({key:0,modelValue:e.value,"onUpdate:modelValue":t[0]||(t[0]=n=>e.value=n),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}),o.createSlots({_:2},[e.type==="password"&&e.showPasswordToggle?{name:"append-inner",fn:o.withCtx(()=>[o.createVNode(P.VIcon,{class:"cursor-pointer",onClick:e.togglePassword},{default:o.withCtx(()=>[o.createTextVNode(o.toDisplayString(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"?(o.openBlock(),o.createBlock(A.VTextarea,o.mergeProps({key:1,modelValue:e.value,"onUpdate:modelValue":t[1]||(t[1]=n=>e.value=n),label:e.label,rows:e.rows,density:e.density,variant:e.variant},e.attrs),null,16,["modelValue","label","rows","density","variant"])):e.type==="select"?(o.openBlock(),o.createBlock(F.VSelect,o.mergeProps({key:2,modelValue:e.value,"onUpdate:modelValue":t[2]||(t[2]=n=>e.value=n),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"?(o.openBlock(),o.createBlock(M.VRadioGroup,{key:3,modelValue:e.value,"onUpdate:modelValue":t[3]||(t[3]=n=>e.value=n),row:e.row},{default:o.withCtx(()=>[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(e.computedItems,n=>(o.openBlock(),o.createBlock(U.VRadio,{key:String(n.value),label:n.label,value:n.value},null,8,["label","value"]))),128))]),_:1},8,["modelValue","row"])):e.type==="checkbox"?(o.openBlock(),o.createElementBlock("div",Z,[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(e.computedItems,n=>(o.openBlock(),o.createBlock(I.VCheckbox,{key:String(n.value),modelValue:e.value,"onUpdate:modelValue":t[4]||(t[4]=d=>e.value=d),label:n.label,value:n.value,density:e.density},null,8,["modelValue","label","value","density"]))),128))])):o.createCommentVNode("",!0)])}const $=f(K,[["render",v],["__scopeId","data-v-2f57f5c8"]]),x=o.defineComponent({name:"EliOlaMundo",components:{EliBotao:b,EliBadge:g,EliInput:$},setup(){const e=o.ref(""),t=o.ref([]),r=o.ref(""),u=o.ref(""),s=o.ref(""),m=o.ref(""),n=o.ref(""),d=o.ref(""),V=o.ref(""),l=o.ref(""),k=o.ref(""),C=o.ref(null),S=o.ref([]);return{nome:e,email:d,documento:k,estado:t,telefone:u,mensagem:V,senha:l,cor:C,habilidades:S,idade:s,altura:m,cep:r,valor:n}}}),_={class:"grid-example"};function ee(e,t,r,u,s,m){const n=o.resolveComponent("EliBadge"),d=o.resolveComponent("EliInput"),V=o.resolveComponent("EliBotao");return o.openBlock(),o.createBlock(R.VContainer,null,{default:o.withCtx(()=>[o.createVNode(c.VCard,{class:"mx-auto",max_width:"400"},{default:o.withCtx(()=>[o.createVNode(c.VCardTitle,null,{default:o.withCtx(()=>[o.createVNode(n,{badge:"Novo","offset-x":"-15",location:"right center"},{default:o.withCtx(()=>[...t[14]||(t[14]=[o.createTextVNode(" Olá Mundo! ",-1)])]),_:1})]),_:1}),o.createVNode(c.VCardText,null,{default:o.withCtx(()=>[t[15]||(t[15]=o.createTextVNode(" Este é um componente de exemplo integrado com Vuetify. ",-1)),o.createElementVNode("div",_,[o.createVNode(d,{modelValue:e.nome,"onUpdate:modelValue":t[0]||(t[0]=l=>e.nome=l),label:"Nome",placeholder:"Digite o nome",density:"compact"},null,8,["modelValue"]),o.createVNode(d,{modelValue:e.idade,"onUpdate:modelValue":t[1]||(t[1]=l=>e.idade=l),type:"numericoInteiro",label:"Idade",density:"default"},null,8,["modelValue"]),o.createVNode(d,{modelValue:e.altura,"onUpdate:modelValue":t[2]||(t[2]=l=>e.altura=l),type:"numericoDecimal",label:"Altura",density:"comfortable"},null,8,["modelValue"]),o.createVNode(d,{modelValue:e.valor,"onUpdate:modelValue":t[3]||(t[3]=l=>e.valor=l),type:"numericoMoeda",label:"Valor"},null,8,["modelValue"]),o.createVNode(d,{modelValue:e.telefone,"onUpdate:modelValue":t[4]||(t[4]=l=>e.telefone=l),type:"telefone",label:"Telefone"},null,8,["modelValue"]),o.createVNode(d,{modelValue:e.cep,"onUpdate:modelValue":t[5]||(t[5]=l=>e.cep=l),type:"cep",label:"CEP",placeholder:"00000-000"},null,8,["modelValue"]),o.createVNode(d,{type:"select",label:"Estado",options:[{label:"São Paulo",value:"SP"},{label:"Rio de Janeiro",value:"RJ"}],modelValue:e.estado,"onUpdate:modelValue":t[6]||(t[6]=l=>e.estado=l),multiple:""},null,8,["modelValue"]),o.createVNode(d,{modelValue:e.documento,"onUpdate:modelValue":t[7]||(t[7]=l=>e.documento=l),type:"cpfCnpj",label:"CPF / CNPJ"},null,8,["modelValue"]),o.createVNode(d,{modelValue:e.email,"onUpdate:modelValue":t[8]||(t[8]=l=>e.email=l),label:"Email",placeholder:"email@exemplo.com"},null,8,["modelValue"]),o.createVNode(d,{modelValue:e.senha,"onUpdate:modelValue":t[9]||(t[9]=l=>e.senha=l),label:"Senha",type:"password",showPasswordToggle:!0,placeholder:"Digite sua senha"},null,8,["modelValue"]),o.createVNode(d,{type:"textarea",modelValue:e.mensagem,"onUpdate:modelValue":t[10]||(t[10]=l=>e.mensagem=l),label:"Mensagem",rows:5},null,8,["modelValue"]),o.createVNode(d,{type:"radio",modelValue:e.cor,"onUpdate:modelValue":t[11]||(t[11]=l=>e.cor=l),label:"Cor favorita",options:[{label:"Azul",value:"azul"},{label:"Verde",value:"verde"}]},null,8,["modelValue"]),o.createVNode(d,{type:"checkbox",modelValue:e.habilidades,"onUpdate:modelValue":t[12]||(t[12]=l=>e.habilidades=l),options:[{label:"Vue",value:"vue"},{label:"React",value:"react"}]},null,8,["modelValue"]),o.createVNode(d,{modelValue:e.nome,"onUpdate:modelValue":t[13]||(t[13]=l=>e.nome=l),label:"Nome",error:!0,"error-messages":["Obrigatório"]},null,8,["modelValue"])])]),_:1}),o.createVNode(c.VCardActions,null,{default:o.withCtx(()=>[o.createVNode(V,{color:"primary",variant:"elevated",block:""},{default:o.withCtx(()=>[...t[16]||(t[16]=[o.createTextVNode(" Botão Vuetify ",-1)])]),_:1})]),_:1})]),_:1})]),_:1})}const h=f(x,[["render",ee]]),oe=o.defineComponent({name:"EliCartao",components:{EliBadge:g},inheritAttrs:!1,props:{titulo:{type:String,default:""},status:{type:String,required:!0},variant:{type:String,default:"outlined"}},emits:{clicar:e=>!0},setup(e,{emit:t}){const r=o.computed(()=>e.status),u=o.computed(()=>{switch(e.status){case"novo":return"primary";case"rascunho":return"secondary";case"vendido":return"success";case"cancelado":return"error"}}),s=o.computed(()=>`eli-cartao--${e.status}`);function m(){t("clicar",e.status)}return{rotuloStatus:r,corStatus:u,classeStatus:s,onClick:m}}}),te={class:"eli-cartao__titulo-texto"},le={class:"eli-cartao__status"};function ae(e,t,r,u,s,m){const n=o.resolveComponent("EliBadge");return o.openBlock(),o.createBlock(c.VCard,o.mergeProps({class:["eli-cartao",e.classeStatus],variant:e.variant},e.$attrs),{default:o.withCtx(()=>[o.createVNode(c.VCardTitle,{class:"eli-cartao__titulo"},{default:o.withCtx(()=>[o.createElementVNode("div",te,[o.renderSlot(e.$slots,"titulo",{},()=>[o.createTextVNode(o.toDisplayString(e.titulo),1)],!0)]),o.createElementVNode("div",le,[o.createVNode(n,{badge:e.rotuloStatus,radius:"pill",color:e.corStatus},{default:o.withCtx(()=>[...t[0]||(t[0]=[o.createElementVNode("span",null,null,-1)])]),_:1},8,["badge","color"])])]),_:3}),o.createVNode(c.VCardText,{class:"eli-cartao__conteudo"},{default:o.withCtx(()=>[o.renderSlot(e.$slots,"default",{},void 0,!0)]),_:3}),e.$slots.acoes?(o.openBlock(),o.createBlock(c.VCardActions,{key:0,class:"eli-cartao__acoes"},{default:o.withCtx(()=>[o.renderSlot(e.$slots,"acoes",{},void 0,!0)]),_:3})):o.createCommentVNode("",!0)]),_:3},16,["variant","class"])}const N=f(oe,[["render",ae],["__scopeId","data-v-6c492bd9"]]),ne={install(e){e.component("EliOlaMundo",h),e.component("EliBotao",b),e.component("EliBadge",g),e.component("EliInput",$),e.component("EliCartao",N)}};a.EliBadge=g,a.EliBotao=b,a.EliCartao=N,a.EliInput=$,a.EliOlaMundo=h,a.default=ne,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})})); +(function(h,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("vuetify/components/VBtn"),require("vuetify/components/VBadge"),require("vuetify/components/VCheckbox"),require("vuetify/components/VIcon"),require("vuetify/components/VRadio"),require("vuetify/components/VRadioGroup"),require("vuetify/components/VSelect"),require("vuetify/components/VTextField"),require("vuetify/components/VTextarea"),require("vuetify/components/VCard"),require("vuetify/components/VGrid")):typeof define=="function"&&define.amd?define(["exports","vue","vuetify/components/VBtn","vuetify/components/VBadge","vuetify/components/VCheckbox","vuetify/components/VIcon","vuetify/components/VRadio","vuetify/components/VRadioGroup","vuetify/components/VSelect","vuetify/components/VTextField","vuetify/components/VTextarea","vuetify/components/VCard","vuetify/components/VGrid"],t):(h=typeof globalThis<"u"?globalThis:h||self,t(h.eli_vue={},h.Vue,h.VBtn,h.VBadge,h.VCheckbox,h.VIcon,h.VRadio,h.VRadioGroup,h.VSelect,h.VTextField,h.VTextarea,h.VCard,h.VGrid))})(this,(function(h,t,se,de,ue,ce,fe,me,pe,ee,ye,I,he){"use strict";const $e=t.defineComponent({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}}}),Y=(e,o)=>{const p=e.__vccOpts||e;for(const[$,V]of o)p[$]=V;return p};function Ve(e,o,p,$,V,M){return t.openBlock(),t.createBlock(se.VBtn,t.mergeProps({color:e.color,variant:e.variant,size:e.size,disabled:e.disabled,loading:e.loading},e.$attrs,{class:"text-none pt-1"}),{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),_:3},16,["color","variant","size","disabled","loading"])}const X=Y($e,[["render",Ve]]),te={suave:"4px",pill:"10px"},ge=t.defineComponent({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},radius:{type:String,default:"suave"}},setup(e){const o=t.computed(()=>e.radius in te?te[e.radius]:e.radius),p=t.computed(()=>e.dot||e.badge!==void 0?e.visible:!1),$=t.computed(()=>({"--eli-badge-radius":o.value}));return{showBadge:p,badgeStyle:$}}});function be(e,o,p,$,V,M){return e.showBadge?(t.openBlock(),t.createBlock(de.VBadge,t.mergeProps({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:t.withCtx(()=>[t.renderSlot(e.$slots,"default",{},void 0,!0)]),_:3},16,["color","location","offset-x","offset-y","dot","content","style"])):t.renderSlot(e.$slots,"default",{key:1},void 0,!0)}const R=Y(ge,[["render",be],["__scopeId","data-v-de2fbf2f"]]);function Se(e){return e.replace(/\D+/g,"")}function Be(e){const o=Se(e);return o.length<=11?o.replace(/(\d{3})(\d)/,"$1.$2").replace(/(\d{3})(\d)/,"$1.$2").replace(/(\d{3})(\d{1,2})$/,"$1-$2").slice(0,14):o.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,"")}function ke(e){const o=we(e);return o?o.length<=10?o.replace(/^(\d{2})(\d)/,"($1) $2").replace(/(\d{4})(\d)/,"$1-$2").slice(0,14):o.replace(/^(\d{2})(\d)/,"($1) $2").replace(/(\d{5})(\d)/,"$1-$2").slice(0,15):""}function Q(e){return e.replace(/\D+/g,"")}function Me(e){const o=e.replace(/[^\d,]/g,""),p=o.split(",");return p.length>2?p[0]+","+p.slice(1).join(""):o}function Ce(e){const o=Q(e);return o?(parseInt(o,10)/100).toFixed(2).replace(".",",").replace(/\B(?=(\d{3})+(?!\d))/g,"."):""}function De(e){const o=Q(e).slice(0,8);return o.length<=5?o:o.replace(/^(\d{5})(\d{1,3})$/,"$1-$2")}const Ee=t.defineComponent({name:"EliInput",inheritAttrs:!1,props:{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},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:o,attrs:p}){const $=t.ref(!1),V=t.ref(!1),M=t.computed({get:()=>e.modelValue,set:g=>{o("update:modelValue",g),o("change",g)}}),c=t.computed(()=>["text","password","email","search","url","telefone","cpfCnpj","numericoInteiro","numericoDecimal","numericoMoeda","cep"].includes(e.type)),f=t.computed(()=>e.type==="password"?V.value?"text":"password":"text"),D=t.computed(()=>{if(e.type==="telefone")return"tel";if(e.type.startsWith("numerico"))return"numeric"}),i=t.computed(()=>e.error?"error":$.value?e.color:void 0);function v(g){const N=g.target;let b=N.value;switch(e.type){case"numericoInteiro":b=Q(b);break;case"numericoDecimal":b=Me(b);break;case"numericoMoeda":b=Ce(b);break;case"telefone":b=ke(b);break;case"cpfCnpj":b=Be(b);break;case"cep":b=De(b);break}N.value=b,o("update:modelValue",b),o("change",b)}function B(){V.value=!V.value}const A=t.computed(()=>(e.options||[]).map(g=>{if(g&&typeof g=="object"&&"value"in g){const b=g.value;return{label:g.label??String(b),value:b,disabled:g.disabled}}const N=g;return{label:String(N),value:N}}));return{attrs:p,value:M,isTextLike:c,inputHtmlType:f,inputMode:D,internalColor:i,showPassword:V,togglePassword:B,onInput:v,onFocus:()=>o("focus"),onBlur:()=>o("blur"),computedItems:A}}}),Ne={class:"eli-input"},Te={key:4,class:"checkbox-group"};function ve(e,o,p,$,V,M){return t.openBlock(),t.createElementBlock("div",Ne,[e.isTextLike?(t.openBlock(),t.createBlock(ee.VTextField,t.mergeProps({key:0,modelValue:e.value,"onUpdate:modelValue":o[0]||(o[0]=c=>e.value=c),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}),t.createSlots({_:2},[e.type==="password"&&e.showPasswordToggle?{name:"append-inner",fn:t.withCtx(()=>[t.createVNode(ce.VIcon,{class:"cursor-pointer",onClick:e.togglePassword},{default:t.withCtx(()=>[t.createTextVNode(t.toDisplayString(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"?(t.openBlock(),t.createBlock(ye.VTextarea,t.mergeProps({key:1,modelValue:e.value,"onUpdate:modelValue":o[1]||(o[1]=c=>e.value=c),label:e.label,rows:e.rows,density:e.density,variant:e.variant},e.attrs),null,16,["modelValue","label","rows","density","variant"])):e.type==="select"?(t.openBlock(),t.createBlock(pe.VSelect,t.mergeProps({key:2,modelValue:e.value,"onUpdate:modelValue":o[2]||(o[2]=c=>e.value=c),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"?(t.openBlock(),t.createBlock(me.VRadioGroup,{key:3,modelValue:e.value,"onUpdate:modelValue":o[3]||(o[3]=c=>e.value=c),row:e.row},{default:t.withCtx(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.computedItems,c=>(t.openBlock(),t.createBlock(fe.VRadio,{key:String(c.value),label:c.label,value:c.value},null,8,["label","value"]))),128))]),_:1},8,["modelValue","row"])):e.type==="checkbox"?(t.openBlock(),t.createElementBlock("div",Te,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.computedItems,c=>(t.openBlock(),t.createBlock(ue.VCheckbox,{key:String(c.value),modelValue:e.value,"onUpdate:modelValue":o[4]||(o[4]=f=>e.value=f),label:c.label,value:c.value,density:e.density},null,8,["modelValue","label","value","density"]))),128))])):t.createCommentVNode("",!0)])}const K=Y(Ee,[["render",ve],["__scopeId","data-v-2f57f5c8"]]),Ie=t.defineComponent({name:"EliOlaMundo",components:{EliBotao:X,EliBadge:R,EliInput:K},setup(){const e=t.ref(""),o=t.ref([]),p=t.ref(""),$=t.ref(""),V=t.ref(""),M=t.ref(""),c=t.ref(""),f=t.ref(""),D=t.ref(""),i=t.ref(""),v=t.ref(""),B=t.ref(null),A=t.ref([]);return{nome:e,email:f,documento:v,estado:o,telefone:$,mensagem:D,senha:i,cor:B,habilidades:A,idade:V,altura:M,cep:p,valor:c}}}),Oe={class:"grid-example"};function Pe(e,o,p,$,V,M){const c=t.resolveComponent("EliBadge"),f=t.resolveComponent("EliInput"),D=t.resolveComponent("EliBotao");return t.openBlock(),t.createBlock(he.VContainer,null,{default:t.withCtx(()=>[t.createVNode(I.VCard,{class:"mx-auto",max_width:"400"},{default:t.withCtx(()=>[t.createVNode(I.VCardTitle,null,{default:t.withCtx(()=>[t.createVNode(c,{badge:"Novo","offset-x":"-15",location:"right center"},{default:t.withCtx(()=>[...o[14]||(o[14]=[t.createTextVNode(" Olá Mundo! ",-1)])]),_:1})]),_:1}),t.createVNode(I.VCardText,null,{default:t.withCtx(()=>[o[15]||(o[15]=t.createTextVNode(" Este é um componente de exemplo integrado com Vuetify. ",-1)),t.createElementVNode("div",Oe,[t.createVNode(f,{modelValue:e.nome,"onUpdate:modelValue":o[0]||(o[0]=i=>e.nome=i),label:"Nome",placeholder:"Digite o nome",density:"compact"},null,8,["modelValue"]),t.createVNode(f,{modelValue:e.idade,"onUpdate:modelValue":o[1]||(o[1]=i=>e.idade=i),type:"numericoInteiro",label:"Idade",density:"default"},null,8,["modelValue"]),t.createVNode(f,{modelValue:e.altura,"onUpdate:modelValue":o[2]||(o[2]=i=>e.altura=i),type:"numericoDecimal",label:"Altura",density:"comfortable"},null,8,["modelValue"]),t.createVNode(f,{modelValue:e.valor,"onUpdate:modelValue":o[3]||(o[3]=i=>e.valor=i),type:"numericoMoeda",label:"Valor"},null,8,["modelValue"]),t.createVNode(f,{modelValue:e.telefone,"onUpdate:modelValue":o[4]||(o[4]=i=>e.telefone=i),type:"telefone",label:"Telefone"},null,8,["modelValue"]),t.createVNode(f,{modelValue:e.cep,"onUpdate:modelValue":o[5]||(o[5]=i=>e.cep=i),type:"cep",label:"CEP",placeholder:"00000-000"},null,8,["modelValue"]),t.createVNode(f,{type:"select",label:"Estado",options:[{label:"São Paulo",value:"SP"},{label:"Rio de Janeiro",value:"RJ"}],modelValue:e.estado,"onUpdate:modelValue":o[6]||(o[6]=i=>e.estado=i),multiple:""},null,8,["modelValue"]),t.createVNode(f,{modelValue:e.documento,"onUpdate:modelValue":o[7]||(o[7]=i=>e.documento=i),type:"cpfCnpj",label:"CPF / CNPJ"},null,8,["modelValue"]),t.createVNode(f,{modelValue:e.email,"onUpdate:modelValue":o[8]||(o[8]=i=>e.email=i),label:"Email",placeholder:"email@exemplo.com"},null,8,["modelValue"]),t.createVNode(f,{modelValue:e.senha,"onUpdate:modelValue":o[9]||(o[9]=i=>e.senha=i),label:"Senha",type:"password",showPasswordToggle:!0,placeholder:"Digite sua senha"},null,8,["modelValue"]),t.createVNode(f,{type:"textarea",modelValue:e.mensagem,"onUpdate:modelValue":o[10]||(o[10]=i=>e.mensagem=i),label:"Mensagem",rows:5},null,8,["modelValue"]),t.createVNode(f,{type:"radio",modelValue:e.cor,"onUpdate:modelValue":o[11]||(o[11]=i=>e.cor=i),label:"Cor favorita",options:[{label:"Azul",value:"azul"},{label:"Verde",value:"verde"}]},null,8,["modelValue"]),t.createVNode(f,{type:"checkbox",modelValue:e.habilidades,"onUpdate:modelValue":o[12]||(o[12]=i=>e.habilidades=i),options:[{label:"Vue",value:"vue"},{label:"React",value:"react"}]},null,8,["modelValue"]),t.createVNode(f,{modelValue:e.nome,"onUpdate:modelValue":o[13]||(o[13]=i=>e.nome=i),label:"Nome",error:!0,"error-messages":["Obrigatório"]},null,8,["modelValue"])])]),_:1}),t.createVNode(I.VCardActions,null,{default:t.withCtx(()=>[t.createVNode(D,{color:"primary",variant:"elevated",block:""},{default:t.withCtx(()=>[...o[16]||(o[16]=[t.createTextVNode(" Botão Vuetify ",-1)])]),_:1})]),_:1})]),_:1})]),_:1})}const oe=Y(Ie,[["render",Pe]]),Ue=t.defineComponent({name:"EliCartao",components:{EliBadge:R},inheritAttrs:!1,props:{titulo:{type:String,default:""},status:{type:String,required:!0},variant:{type:String,default:"outlined"}},emits:{clicar:e=>!0},setup(e,{emit:o}){const p=t.computed(()=>e.status),$=t.computed(()=>{switch(e.status){case"novo":return"primary";case"rascunho":return"secondary";case"vendido":return"success";case"cancelado":return"error"}}),V=t.computed(()=>`eli-cartao--${e.status}`);function M(){o("clicar",e.status)}return{rotuloStatus:p,corStatus:$,classeStatus:V,onClick:M}}}),He={class:"eli-cartao__titulo-texto"},Ye={class:"eli-cartao__status"};function Ae(e,o,p,$,V,M){const c=t.resolveComponent("EliBadge");return t.openBlock(),t.createBlock(I.VCard,t.mergeProps({class:["eli-cartao",e.classeStatus],variant:e.variant},e.$attrs),{default:t.withCtx(()=>[t.createVNode(I.VCardTitle,{class:"eli-cartao__titulo"},{default:t.withCtx(()=>[t.createElementVNode("div",He,[t.renderSlot(e.$slots,"titulo",{},()=>[t.createTextVNode(t.toDisplayString(e.titulo),1)],!0)]),t.createElementVNode("div",Ye,[t.createVNode(c,{badge:e.rotuloStatus,radius:"pill",color:e.corStatus},{default:t.withCtx(()=>[...o[0]||(o[0]=[t.createElementVNode("span",null,null,-1)])]),_:1},8,["badge","color"])])]),_:3}),t.createVNode(I.VCardText,{class:"eli-cartao__conteudo"},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default",{},void 0,!0)]),_:3}),e.$slots.acoes?(t.openBlock(),t.createBlock(I.VCardActions,{key:0,class:"eli-cartao__acoes"},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"acoes",{},void 0,!0)]),_:3})):t.createCommentVNode("",!0)]),_:3},16,["variant","class"])}const ne=Y(Ue,[["render",Ae],["__scopeId","data-v-6c492bd9"]]);function je(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var z={exports:{}},Fe=z.exports,re;function Le(){return re||(re=1,(function(e,o){(function(p,$){e.exports=$()})(Fe,(function(){var p=1e3,$=6e4,V=36e5,M="millisecond",c="second",f="minute",D="hour",i="day",v="week",B="month",A="quarter",g="year",N="date",b="Invalid Date",Je=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,Ze=/\[([^\]]+)]|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,Xe={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 a=["th","st","nd","rd"],n=s%100;return"["+s+(a[(n-20)%10]||a[n]||a[0])+"]"}},x=function(s,a,n){var l=String(s);return!l||l.length>=a?s:""+Array(a+1-l.length).join(n)+s},Qe={s:x,z:function(s){var a=-s.utcOffset(),n=Math.abs(a),l=Math.floor(n/60),r=n%60;return(a<=0?"+":"-")+x(l,2,"0")+":"+x(r,2,"0")},m:function s(a,n){if(a.date()1)return s(u[0])}else{var y=a.name;P[y]=a,r=y}return!l&&r&&(F=r),r||!l&&F},w=function(s,a){if(_(s))return s.clone();var n=typeof a=="object"?a:{};return n.date=s,n.args=arguments,new J(n)},m=Qe;m.l=G,m.i=_,m.w=function(s,a){return w(s,{locale:a.$L,utc:a.$u,x:a.$x,$offset:a.$offset})};var J=(function(){function s(n){this.$L=G(n.locale,null,!0),this.parse(n),this.$x=this.$x||n.x||{},this[le]=!0}var a=s.prototype;return a.parse=function(n){this.$d=(function(l){var r=l.date,d=l.utc;if(r===null)return new Date(NaN);if(m.u(r))return new Date;if(r instanceof Date)return new Date(r);if(typeof r=="string"&&!/Z$/i.test(r)){var u=r.match(Je);if(u){var y=u[2]-1||0,S=(u[7]||"0").substring(0,3);return d?new Date(Date.UTC(u[1],y,u[3]||1,u[4]||0,u[5]||0,u[6]||0,S)):new Date(u[1],y,u[3]||1,u[4]||0,u[5]||0,u[6]||0,S)}}return new Date(r)})(n),this.init()},a.init=function(){var n=this.$d;this.$y=n.getFullYear(),this.$M=n.getMonth(),this.$D=n.getDate(),this.$W=n.getDay(),this.$H=n.getHours(),this.$m=n.getMinutes(),this.$s=n.getSeconds(),this.$ms=n.getMilliseconds()},a.$utils=function(){return m},a.isValid=function(){return this.$d.toString()!==b},a.isSame=function(n,l){var r=w(n);return this.startOf(l)<=r&&r<=this.endOf(l)},a.isAfter=function(n,l){return w(n)[]},dica:{type:String,default:""},dicaPersistente:{type:Boolean,default:!1},densidade:{type:String,default:"comfortable"},variante:{type:String,default:"outlined"},min:{type:String,default:void 0},max:{type:String,default:void 0}},emits:{"update:modelValue":e=>!0,alterar:e=>!0,foco:()=>!0,desfoco:()=>!0},setup(e,{emit:o,attrs:p}){const $=t.computed(()=>e.modo==="data"?"date":"datetime-local");function V(i){return e.modo==="data"?W(i).format("YYYY-MM-DD"):W(i).format("YYYY-MM-DDTHH:mm")}function M(i){return e.modo==="data"?W(`${i}T00:00`).format():W(i).format()}const c=t.computed({get:()=>e.modelValue?V(e.modelValue):"",set:i=>{const v=i&&i.length>0?i:null;if(!v){o("update:modelValue",null),o("alterar",null);return}const B=M(v);o("update:modelValue",B),o("alterar",B)}}),f=t.computed(()=>{if(e.min)return V(e.min)}),D=t.computed(()=>{if(e.max)return V(e.max)});return{attrs:p,valor:c,emit:o,minLocal:f,maxLocal:D,tipoInput:$}}}),ze={class:"eli-data-hora"};function We(e,o,p,$,V,M){return t.openBlock(),t.createElementBlock("div",ze,[t.createVNode(ee.VTextField,t.mergeProps({modelValue:e.valor,"onUpdate:modelValue":o[0]||(o[0]=c=>e.valor=c),type:e.tipoInput,label:e.rotulo,placeholder:e.placeholder,disabled:e.desabilitado,clearable:e.limpavel,error:e.erro,"error-messages":e.mensagensErro,hint:e.dica,"persistent-hint":e.dicaPersistente,density:e.densidade,variant:e.variante,min:e.minLocal,max:e.maxLocal},e.attrs,{onFocus:o[1]||(o[1]=c=>e.emit("foco")),onBlur:o[2]||(o[2]=c=>e.emit("desfoco"))}),null,16,["modelValue","type","label","placeholder","disabled","clearable","error","error-messages","hint","persistent-hint","density","variant","min","max"])])}const ae=Y(Re,[["render",We],["__scopeId","data-v-523063f3"]]),Ge={install(e){e.component("EliOlaMundo",oe),e.component("EliBotao",X),e.component("EliBadge",R),e.component("EliInput",K),e.component("EliCartao",ne),e.component("EliDataHora",ae)}};h.EliBadge=R,h.EliBotao=X,h.EliCartao=ne,h.EliDataHora=ae,h.EliInput=K,h.EliOlaMundo=oe,h.default=Ge,Object.defineProperties(h,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})})); diff --git a/dist/types/componentes/data_hora/EliDataHora.vue.d.ts b/dist/types/componentes/data_hora/EliDataHora.vue.d.ts new file mode 100644 index 0000000..aca5dcf --- /dev/null +++ b/dist/types/componentes/data_hora/EliDataHora.vue.d.ts @@ -0,0 +1,221 @@ +import { PropType } from "vue"; +import type { CampoDensidade, CampoVariante } from "../../tipos"; +declare const __VLS_export: import("vue").DefineComponent; + default: null; + }; + /** + * Define o tipo de entrada. + * - `dataHora`: usa `datetime-local` + * - `data`: usa `date` + */ + modo: { + type: PropType<"data" | "dataHora">; + default: string; + }; + /** Rótulo exibido no v-text-field (Vuetify). */ + rotulo: { + type: StringConstructor; + default: string; + }; + /** Placeholder do input. */ + placeholder: { + type: StringConstructor; + default: string; + }; + /** Desabilita a interação. */ + desabilitado: { + type: BooleanConstructor; + default: boolean; + }; + /** Se true, mostra ícone para limpar o valor (Vuetify clearable). */ + limpavel: { + type: BooleanConstructor; + default: boolean; + }; + /** Estado de erro (visual). */ + erro: { + type: BooleanConstructor; + default: boolean; + }; + /** Mensagens de erro. */ + mensagensErro: { + type: PropType; + default: () => never[]; + }; + /** Texto de apoio. */ + dica: { + type: StringConstructor; + default: string; + }; + /** Mantém a dica sempre visível. */ + dicaPersistente: { + type: BooleanConstructor; + default: boolean; + }; + /** Densidade do campo (Vuetify). */ + densidade: { + type: PropType; + default: string; + }; + /** Variante do v-text-field (Vuetify). */ + variante: { + type: PropType; + default: string; + }; + /** + * Valor mínimo permitido. + * ISO 8601 (offset ou `Z`). + */ + min: { + type: PropType; + default: undefined; + }; + /** + * Valor máximo permitido. + * ISO 8601 (offset ou `Z`). + */ + max: { + type: PropType; + default: undefined; + }; +}>, { + attrs: { + [x: string]: unknown; + }; + valor: import("vue").WritableComputedRef; + emit: ((event: "update:modelValue", _valor: string | null) => void) & ((event: "alterar", _valor: string | null) => void) & ((event: "foco") => void) & ((event: "desfoco") => void); + minLocal: import("vue").ComputedRef; + maxLocal: import("vue").ComputedRef; + tipoInput: import("vue").ComputedRef<"date" | "datetime-local">; +}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, { + /** v-model padrão. */ + "update:modelValue": (_valor: string | null) => true; + /** Alias para consumidores que querem um evento semântico. */ + alterar: (_valor: string | null) => true; + foco: () => true; + desfoco: () => true; +}, string, import("vue").PublicProps, Readonly; + default: null; + }; + /** + * Define o tipo de entrada. + * - `dataHora`: usa `datetime-local` + * - `data`: usa `date` + */ + modo: { + type: PropType<"data" | "dataHora">; + default: string; + }; + /** Rótulo exibido no v-text-field (Vuetify). */ + rotulo: { + type: StringConstructor; + default: string; + }; + /** Placeholder do input. */ + placeholder: { + type: StringConstructor; + default: string; + }; + /** Desabilita a interação. */ + desabilitado: { + type: BooleanConstructor; + default: boolean; + }; + /** Se true, mostra ícone para limpar o valor (Vuetify clearable). */ + limpavel: { + type: BooleanConstructor; + default: boolean; + }; + /** Estado de erro (visual). */ + erro: { + type: BooleanConstructor; + default: boolean; + }; + /** Mensagens de erro. */ + mensagensErro: { + type: PropType; + default: () => never[]; + }; + /** Texto de apoio. */ + dica: { + type: StringConstructor; + default: string; + }; + /** Mantém a dica sempre visível. */ + dicaPersistente: { + type: BooleanConstructor; + default: boolean; + }; + /** Densidade do campo (Vuetify). */ + densidade: { + type: PropType; + default: string; + }; + /** Variante do v-text-field (Vuetify). */ + variante: { + type: PropType; + default: string; + }; + /** + * Valor mínimo permitido. + * ISO 8601 (offset ou `Z`). + */ + min: { + type: PropType; + default: undefined; + }; + /** + * Valor máximo permitido. + * ISO 8601 (offset ou `Z`). + */ + max: { + type: PropType; + default: undefined; + }; +}>> & Readonly<{ + "onUpdate:modelValue"?: ((_valor: string | null) => any) | undefined; + onAlterar?: ((_valor: string | null) => any) | undefined; + onFoco?: (() => any) | undefined; + onDesfoco?: (() => any) | undefined; +}>, { + placeholder: string; + modelValue: string | null; + modo: "data" | "dataHora"; + rotulo: string; + desabilitado: boolean; + limpavel: boolean; + erro: boolean; + mensagensErro: string | string[]; + dica: string; + dicaPersistente: boolean; + densidade: CampoDensidade; + variante: CampoVariante; + min: string | undefined; + max: string | undefined; +}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>; +/** + * EliDataHora + * + * Campo para entrada de data + hora. + * + * Modelo: + * - O componente **recebe** `modelValue` em ISO 8601 (UTC `Z` ou com offset). + * - Converte para horário local para exibir no `datetime-local`. + * - Ao editar, **emite** ISO 8601 com o **offset local**. + */ +declare const _default: typeof __VLS_export; +export default _default; diff --git a/dist/types/componentes/data_hora/index.d.ts b/dist/types/componentes/data_hora/index.d.ts new file mode 100644 index 0000000..65a3e65 --- /dev/null +++ b/dist/types/componentes/data_hora/index.d.ts @@ -0,0 +1 @@ +export { default as EliDataHora } from "./EliDataHora.vue"; diff --git a/dist/types/index.d.ts b/dist/types/index.d.ts index 0c128cf..4f78cdc 100644 --- a/dist/types/index.d.ts +++ b/dist/types/index.d.ts @@ -4,10 +4,12 @@ import { EliBotao } from "./componentes/botao"; import { EliBadge } from "./componentes/indicador"; import { EliInput } from "./componentes/campo"; import { EliCartao } from "./componentes/cartao"; +import { EliDataHora } from "./componentes/data_hora"; export { EliOlaMundo }; export { EliBotao }; export { EliBadge }; export { EliInput }; export { EliCartao }; +export { EliDataHora }; declare const EliVue: Plugin; export default EliVue; diff --git a/package.json b/package.json index ef227af..f3671d8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "eli-vue", - "version": "0.1.6", + "version": "0.1.13", "private": false, "main": "./dist/eli-vue.umd.js", "module": "./dist/eli-vue.es.js", @@ -33,5 +33,8 @@ "vue": "^3.4.0", "vue-tsc": "^3.1.6", "vuetify": "^3.11.2" + }, + "dependencies": { + "dayjs": "^1.11.19" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9d6f269..d52d64d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,6 +7,10 @@ settings: importers: .: + dependencies: + dayjs: + specifier: ^1.11.19 + version: 1.11.19 devDependencies: '@mdi/font': specifier: ^7.4.47 @@ -488,6 +492,9 @@ packages: csstype@3.2.3: resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==} + dayjs@1.11.19: + resolution: {integrity: sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==} + debug@4.4.3: resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==} engines: {node: '>=6.0'} @@ -1037,6 +1044,8 @@ snapshots: csstype@3.2.3: {} + dayjs@1.11.19: {} + debug@4.4.3: dependencies: ms: 2.1.3 diff --git a/src/componentes/data_hora/EliDataHora.vue b/src/componentes/data_hora/EliDataHora.vue new file mode 100644 index 0000000..8d8ed18 --- /dev/null +++ b/src/componentes/data_hora/EliDataHora.vue @@ -0,0 +1,231 @@ + + + + + + diff --git a/src/componentes/data_hora/README.md b/src/componentes/data_hora/README.md new file mode 100644 index 0000000..693b91a --- /dev/null +++ b/src/componentes/data_hora/README.md @@ -0,0 +1,108 @@ +# EliDataHora + +O `EliDataHora` é um componente de **entrada de data e hora** baseado em `v-text-field` (Vuetify), usando o tipo nativo do HTML `datetime-local`. + +Ele foi criado para oferecer uma solução **estável e leve** sem depender de componentes experimentais do Vuetify. + +## Objetivo + +- Permitir o usuário selecionar **data + hora** com UX nativa do navegador. +- Padronizar a API em português (props/eventos) no Design System. + +## API + +### Props + +| Prop | Tipo | Padrão | Descrição | +|------|------|--------|-----------| +| `modelValue` | `string \| null` | `null` | **Sempre em ISO 8601**, aceitando UTC absoluto (`Z`) ou com offset (ex.: `2026-01-09T16:15:00Z`, `2026-01-09T13:15:00-03:00`). O componente converte para horário **local** antes de exibir. | +| `modo` | `"data" \| "dataHora"` | `"dataHora"` | Define se o campo permite selecionar apenas data (`date`) ou data+hora (`datetime-local`). | +| `rotulo` | `string` | `"Data e hora"` | Label do campo. | +| `placeholder` | `string` | `""` | Placeholder do campo. | +| `desabilitado` | `boolean` | `false` | Desabilita o campo. | +| `limpavel` | `boolean` | `false` | Habilita botão de limpar (Vuetify `clearable`). | +| `erro` | `boolean` | `false` | Estado de erro visual. | +| `mensagensErro` | `string \| string[]` | `[]` | Mensagens de erro. | +| `dica` | `string` | `""` | Hint/ajuda abaixo do campo. | +| `dicaPersistente` | `boolean` | `false` | Mantém dica sempre visível. | +| `densidade` | `CampoDensidade` | `"comfortable"` | Densidade (Vuetify). | +| `variante` | `CampoVariante` | `"outlined"` | Variante (Vuetify). | +| `min` | `string \| undefined` | `undefined` | Mínimo permitido em ISO 8601 (offset ou `Z`). | +| `max` | `string \| undefined` | `undefined` | Máximo permitido em ISO 8601 (offset ou `Z`). | + +> Observação: o atributo HTML `datetime-local` **não inclui timezone**. +> Este componente resolve isso convertendo: +> +> - **entrada**: ISO 8601 (UTC/offset) → **exibição** em horário local +> - **saída**: valor selecionado → ISO 8601 com **offset local** + +### Emits + +| Evento | Payload | Quando dispara | +|--------|---------|---------------| +| `update:modelValue` | `string \| null` | Sempre que o valor muda (padrão do v-model). O payload é ISO 8601 com **offset local**. | +| `alterar` | `string \| null` | Alias semântico para mudanças de valor (mesmo payload do v-model). | +| `foco` | `void` | Ao focar o campo. | +| `desfoco` | `void` | Ao sair do foco. | + +### Slots + +Este componente não define slots próprios. Você pode usar slots do `v-text-field` via `v-bind="$attrs"` caso precise (ver exemplos abaixo). + +## Exemplos + +### 1) Uso básico com v-model + +```vue + + + +``` + +### 2) Com limites (min/max) e validação visual + +```vue + +``` + +## Casos de borda / comportamento esperado + +- Ao limpar o campo, o componente emite `null` (não string vazia). +- O navegador pode variar a UI do seletor (isso é esperado do `datetime-local`). +- `min/max` devem ser strings em ISO 8601 (offset ou `Z`). +- Em `modo="data"`, o componente emite ISO no **início do dia** (`00:00:00`) no fuso local. + +## Acessibilidade + +- O `v-text-field` do Vuetify já oferece base de acessibilidade. +- Sempre prefira passar `rotulo` significativo. + +## Decisões de implementação + +- Usamos `datetime-local` por ser amplamente suportado e não depender de APIs experimentais. +- O componente usa `dayjs` para converter entradas UTC/offset para local antes de exibir e para emitir ISO 8601 com offset local. +- Mantemos o valor como `string | null` para evitar conversões implícitas e permitir que cada projeto decida como persistir (UTC/local). diff --git a/src/componentes/data_hora/index.ts b/src/componentes/data_hora/index.ts new file mode 100644 index 0000000..002d336 --- /dev/null +++ b/src/componentes/data_hora/index.ts @@ -0,0 +1 @@ +export { default as EliDataHora } from "./EliDataHora.vue"; \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 626f4be..17cd756 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,12 +4,14 @@ import { EliBotao } from "./componentes/botao"; import { EliBadge } from "./componentes/indicador"; import { EliInput } from "./componentes/campo"; import { EliCartao } from "./componentes/cartao"; +import { EliDataHora } from "./componentes/data_hora"; export { EliOlaMundo }; export { EliBotao }; export { EliBadge }; export { EliInput }; export { EliCartao }; +export { EliDataHora }; const EliVue: Plugin = { install(app: App) { @@ -18,6 +20,7 @@ const EliVue: Plugin = { app.component("EliBadge", EliBadge); app.component("EliInput", EliInput); app.component("EliCartao", EliCartao); + app.component("EliDataHora", EliDataHora); }, }; diff --git a/src/playground/App.vue b/src/playground/App.vue index a35d589..81f0ced 100644 --- a/src/playground/App.vue +++ b/src/playground/App.vue @@ -7,6 +7,7 @@ Indicador Cartão Campo + Data e hora Demo @@ -16,6 +17,7 @@ + @@ -26,6 +28,7 @@ import BotaoPlayground from "./botao.playground.vue"; import IndicadorPlayground from "./indicador.playground.vue"; import CartaoPlayground from "./cartao.playground.vue"; import CampoPlayground from "./campo.playground.vue"; +import DataHoraPlayground from "./data_hora.playground.vue"; import OlaMundoPlayground from "./ola_mundo.playground.vue"; export default defineComponent({ @@ -35,11 +38,18 @@ export default defineComponent({ IndicadorPlayground, CartaoPlayground, CampoPlayground, + DataHoraPlayground, OlaMundoPlayground, }, data() { return { - aba: "botao" as "botao" | "indicador" | "cartao" | "campo" | "ola_mundo", + aba: "botao" as + | "botao" + | "indicador" + | "cartao" + | "campo" + | "data_hora" + | "ola_mundo", }; } }) diff --git a/src/playground/data_hora.playground.vue b/src/playground/data_hora.playground.vue new file mode 100644 index 0000000..f3cbbc5 --- /dev/null +++ b/src/playground/data_hora.playground.vue @@ -0,0 +1,145 @@ + + + + + \ No newline at end of file