@datametria/vue-components
Version:
DATAMETRIA Vue.js 3 Component Library with Multi-Brand Theming - 51 components + 10 composables with theming support, WCAG 2.2 AA, dark mode, responsive system
1,296 lines (1,295 loc) • 178 kB
JavaScript
import { defineComponent as N, computed as B, createElementBlock as o, openBlock as l, normalizeClass as F, createCommentVNode as C, renderSlot as O, ref as I, createElementVNode as c, withDirectives as Q, toDisplayString as M, vModelDynamic as pe, watch as G, createTextVNode as H, normalizeStyle as U, onMounted as Z, onUnmounted as ie, createBlock as J, Teleport as te, withModifiers as Y, vModelText as re, Fragment as q, renderList as W, inject as de, provide as ce, nextTick as ae, withKeys as se, reactive as $e, onBeforeUnmount as he, createVNode as oe, Transition as ne, withCtx as le, createStaticVNode as be, vModelSelect as ue, resolveComponent as we, useCssVars as xe, resolveDynamicComponent as ge } from "vue";
var me = /* @__PURE__ */ ((e) => (e.PRIMARY = "primary", e.SECONDARY = "secondary", e.OUTLINE = "outline", e.GHOST = "ghost", e))(me || {}), _e = /* @__PURE__ */ ((e) => (e.SM = "sm", e.MD = "md", e.LG = "lg", e))(_e || {});
const Ce = ["disabled", "type", "aria-busy", "aria-disabled"], Ve = {
key: 0,
class: "spinner",
role: "status",
"aria-label": "Carregando"
}, De = /* @__PURE__ */ N({
__name: "DatametriaButton",
props: {
variant: { default: me.PRIMARY },
size: { default: _e.MD },
disabled: { type: Boolean, default: !1 },
loading: { type: Boolean, default: !1 },
fullWidth: { type: Boolean, default: !1 },
type: { default: "button" }
},
emits: ["click"],
setup(e) {
const i = e;
if (process.env.NODE_ENV === "development") {
const t = Object.values(me);
t.includes(i.variant) || console.warn(`[DatametriaButton] Invalid variant "${i.variant}". Valid options: ${t.join(", ")}`);
}
const a = B(() => [
"datametria-button",
`datametria-button--${i.variant}`,
`datametria-button--${i.size}`,
{
"datametria-button--full-width": i.fullWidth,
"datametria-button--loading": i.loading,
"datametria-button--disabled": i.disabled
}
]);
return (t, s) => (l(), o("button", {
class: F(a.value),
disabled: e.disabled || e.loading,
type: e.type,
"aria-busy": e.loading,
"aria-disabled": e.disabled,
onClick: s[0] || (s[0] = (n) => t.$emit("click", n))
}, [
e.loading ? (l(), o("span", Ve)) : C("", !0),
O(t.$slots, "default", {}, void 0, !0)
], 10, Ce));
}
}), K = (e, i) => {
const a = e.__vccOpts || e;
for (const [t, s] of i)
a[t] = s;
return a;
}, li = /* @__PURE__ */ K(De, [["__scopeId", "data-v-920bfc9a"]]), Se = {
key: 0,
class: "datametria-input__prepend"
}, Be = { class: "datametria-input__inner" }, Me = {
key: 0,
class: "datametria-input__prefix"
}, Te = { key: 0 }, Ie = ["type", "placeholder", "disabled", "readonly", "maxlength"], Ee = {
key: 1,
class: "datametria-input__suffix"
}, ze = { key: 0 }, Le = {
key: 1,
class: "datametria-input__append"
}, Re = /* @__PURE__ */ N({
__name: "DatametriaInput",
props: {
modelValue: {},
type: { default: "text" },
placeholder: { default: "" },
disabled: { type: Boolean, default: !1 },
readonly: { type: Boolean, default: !1 },
clearable: { type: Boolean, default: !1 },
maxlength: {},
prefixIcon: {},
suffixIcon: {},
size: { default: "default" }
},
emits: ["update:modelValue", "input", "change", "focus", "blur", "clear"],
setup(e, { expose: i, emit: a }) {
const t = e, s = a, n = I(), r = I(!1), d = B({
get: () => t.modelValue,
set: ($) => s("update:modelValue", $)
}), v = B(() => t.clearable && !t.disabled && !t.readonly && d.value), f = B(() => ({
"datametria-input--disabled": t.disabled,
"datametria-input--focused": r.value,
[`datametria-input--${t.size}`]: t.size !== "default"
})), S = B(() => "datametria-input__field"), w = ($) => {
const g = $.target;
s("input", g.value);
}, k = ($) => {
const g = $.target;
s("change", g.value);
}, x = ($) => {
r.value = !0, s("focus", $);
}, p = ($) => {
r.value = !1, s("blur", $);
}, b = () => {
var $;
s("update:modelValue", ""), s("clear"), ($ = n.value) == null || $.focus();
};
return i({
focus: () => {
var $;
return ($ = n.value) == null ? void 0 : $.focus();
},
blur: () => {
var $;
return ($ = n.value) == null ? void 0 : $.blur();
}
}), ($, g) => (l(), o("div", {
class: F(["datametria-input", f.value])
}, [
$.$slots.prepend ? (l(), o("div", Se, [
O($.$slots, "prepend", {}, void 0, !0)
])) : C("", !0),
c("div", Be, [
$.$slots.prefix || e.prefixIcon ? (l(), o("span", Me, [
O($.$slots, "prefix", {}, () => [
e.prefixIcon ? (l(), o("span", Te, M(e.prefixIcon), 1)) : C("", !0)
], !0)
])) : C("", !0),
Q(c("input", {
ref_key: "inputRef",
ref: n,
"onUpdate:modelValue": g[0] || (g[0] = (_) => d.value = _),
type: e.type,
placeholder: e.placeholder,
disabled: e.disabled,
readonly: e.readonly,
maxlength: e.maxlength,
class: F(S.value),
onInput: w,
onChange: k,
onFocus: x,
onBlur: p
}, null, 42, Ie), [
[pe, d.value]
]),
v.value || $.$slots.suffix || e.suffixIcon ? (l(), o("span", Ee, [
v.value ? (l(), o("button", {
key: 0,
class: "datametria-input__clear",
onClick: b,
type: "button"
}, " × ")) : C("", !0),
O($.$slots, "suffix", {}, () => [
e.suffixIcon ? (l(), o("span", ze, M(e.suffixIcon), 1)) : C("", !0)
], !0)
])) : C("", !0)
]),
$.$slots.append ? (l(), o("div", Le, [
O($.$slots, "append", {}, void 0, !0)
])) : C("", !0)
], 2));
}
}), oi = /* @__PURE__ */ K(Re, [["__scopeId", "data-v-810b2202"]]), Fe = { class: "datametria-password-input" }, Ae = ["for"], Oe = {
key: 0,
class: "datametria-password-input__required"
}, Pe = { class: "datametria-password-input__wrapper" }, Ne = ["id", "value", "type", "placeholder", "disabled", "required", "autocomplete", "aria-invalid", "aria-describedby"], Ke = ["aria-label"], je = {
key: 0,
class: "datametria-password-input__icon",
fill: "none",
viewBox: "0 0 24 24",
stroke: "currentColor"
}, qe = {
key: 1,
class: "datametria-password-input__icon",
fill: "none",
viewBox: "0 0 24 24",
stroke: "currentColor"
}, We = {
key: 1,
class: "datametria-password-input__warning"
}, Ue = {
key: 2,
class: "datametria-password-input__strength"
}, He = { class: "datametria-password-input__strength-bar" }, Ye = ["id"], Ge = { class: "datametria-password-input__requirements-list" }, Xe = { class: "datametria-password-input__check" }, Je = { class: "datametria-password-input__check" }, Qe = { class: "datametria-password-input__check" }, Ze = { class: "datametria-password-input__check" }, et = { class: "datametria-password-input__check" }, tt = ["id"], at = ["id"], st = /* @__PURE__ */ N({
__name: "DatametriaPasswordInput",
props: {
modelValue: { default: "" },
label: {},
placeholder: {},
errorMessage: {},
helpText: {},
disabled: { type: Boolean, default: !1 },
required: { type: Boolean, default: !1 },
minLength: { default: 8 },
showStrength: { type: Boolean, default: !0 },
showRequirements: { type: Boolean, default: !0 },
autocomplete: { default: "current-password" }
},
emits: ["update:modelValue", "strength-change"],
setup(e, { emit: i }) {
const a = e, t = i, s = B(() => `password-${Math.random().toString(36).substr(2, 9)}`), n = I(!1), r = I(!1), d = I(!1), v = B(() => ({
minLength: a.modelValue.length >= a.minLength,
hasUppercase: /[A-Z]/.test(a.modelValue),
hasLowercase: /[a-z]/.test(a.modelValue),
hasNumber: /\d/.test(a.modelValue),
hasSpecial: /[!@#$%^&*(),.?":{}|<>]/.test(a.modelValue)
})), f = B(() => {
if (!a.modelValue) return 0;
let L = 0;
const T = v.value;
return T.minLength && (L += 20), T.hasUppercase && (L += 20), T.hasLowercase && (L += 20), T.hasNumber && (L += 20), T.hasSpecial && (L += 20), L;
}), S = B(() => f.value), w = B(() => {
const L = f.value;
return L === 0 ? "" : L <= 40 ? "Fraca" : L <= 60 ? "Média" : L <= 80 ? "Boa" : "Forte";
}), k = B(() => [
"datametria-password-input__strength-fill",
{
"datametria-password-input__strength-fill--weak": f.value <= 40,
"datametria-password-input__strength-fill--medium": f.value > 40 && f.value <= 60,
"datametria-password-input__strength-fill--good": f.value > 60 && f.value <= 80,
"datametria-password-input__strength-fill--strong": f.value > 80
}
]), x = B(() => [
"datametria-password-input__strength-text",
{
"datametria-password-input__strength-text--weak": f.value <= 40,
"datametria-password-input__strength-text--medium": f.value > 40 && f.value <= 60,
"datametria-password-input__strength-text--good": f.value > 60 && f.value <= 80,
"datametria-password-input__strength-text--strong": f.value > 80
}
]), p = B(() => [
"datametria-password-input__field",
{
"datametria-password-input__field--error": a.errorMessage,
"datametria-password-input__field--disabled": a.disabled
}
]), b = B(() => {
const L = [];
return a.showRequirements && r.value && L.push(`${s.value}-requirements`), a.errorMessage && L.push(`${s.value}-error`), a.helpText && !a.errorMessage && L.push(`${s.value}-help`), L.length > 0 ? L.join(" ") : void 0;
}), $ = (L) => {
const T = L.target.value;
t("update:modelValue", T);
}, g = () => {
r.value = !0;
}, _ = () => {
r.value = !1;
}, y = () => {
n.value = !n.value;
}, z = (L) => {
d.value = L.getModifierState("CapsLock");
};
return G(f, (L) => {
a.modelValue && t("strength-change", L);
}), (L, T) => (l(), o("div", Fe, [
e.label ? (l(), o("label", {
key: 0,
for: s.value,
class: "datametria-password-input__label"
}, [
H(M(e.label) + " ", 1),
e.required ? (l(), o("span", Oe, "*")) : C("", !0)
], 8, Ae)) : C("", !0),
c("div", Pe, [
c("input", {
id: s.value,
value: e.modelValue,
type: n.value ? "text" : "password",
placeholder: e.placeholder,
disabled: e.disabled,
required: e.required,
autocomplete: e.autocomplete,
class: F(p.value),
"aria-invalid": !!e.errorMessage,
"aria-describedby": b.value,
onInput: $,
onFocus: g,
onBlur: _,
onKeyup: z
}, null, 42, Ne),
c("button", {
type: "button",
class: "datametria-password-input__toggle",
"aria-label": n.value ? "Ocultar senha" : "Mostrar senha",
onClick: y,
tabindex: "-1"
}, [
n.value ? (l(), o("svg", je, [...T[0] || (T[0] = [
c("path", {
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "2",
d: "M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
}, null, -1)
])])) : (l(), o("svg", qe, [...T[1] || (T[1] = [
c("path", {
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "2",
d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
}, null, -1),
c("path", {
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "2",
d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
}, null, -1)
])]))
], 8, Ke)
]),
d.value ? (l(), o("p", We, " ⚠️ Caps Lock está ativado ")) : C("", !0),
e.showStrength && e.modelValue ? (l(), o("div", Ue, [
c("div", He, [
c("div", {
class: F(k.value),
style: U({ width: `${S.value}%` })
}, null, 6)
]),
c("span", {
class: F(x.value)
}, M(w.value), 3)
])) : C("", !0),
e.showRequirements && r.value ? (l(), o("div", {
key: 3,
id: `${s.value}-requirements`,
class: "datametria-password-input__requirements"
}, [
T[6] || (T[6] = c("p", { class: "datametria-password-input__requirements-title" }, "A senha deve conter:", -1)),
c("ul", Ge, [
c("li", {
class: F({ valid: v.value.minLength })
}, [
c("span", Xe, M(v.value.minLength ? "✓" : "○"), 1),
H(" Mínimo " + M(e.minLength) + " caracteres ", 1)
], 2),
c("li", {
class: F({ valid: v.value.hasUppercase })
}, [
c("span", Je, M(v.value.hasUppercase ? "✓" : "○"), 1),
T[2] || (T[2] = H(" Pelo menos 1 letra maiúscula ", -1))
], 2),
c("li", {
class: F({ valid: v.value.hasLowercase })
}, [
c("span", Qe, M(v.value.hasLowercase ? "✓" : "○"), 1),
T[3] || (T[3] = H(" Pelo menos 1 letra minúscula ", -1))
], 2),
c("li", {
class: F({ valid: v.value.hasNumber })
}, [
c("span", Ze, M(v.value.hasNumber ? "✓" : "○"), 1),
T[4] || (T[4] = H(" Pelo menos 1 número ", -1))
], 2),
c("li", {
class: F({ valid: v.value.hasSpecial })
}, [
c("span", et, M(v.value.hasSpecial ? "✓" : "○"), 1),
T[5] || (T[5] = H(" Pelo menos 1 caractere especial ", -1))
], 2)
])
], 8, Ye)) : C("", !0),
e.errorMessage ? (l(), o("p", {
key: 4,
id: `${s.value}-error`,
class: "datametria-password-input__error"
}, M(e.errorMessage), 9, tt)) : C("", !0),
e.helpText && !e.errorMessage ? (l(), o("p", {
key: 5,
id: `${s.value}-help`,
class: "datametria-password-input__help"
}, M(e.helpText), 9, at)) : C("", !0)
]));
}
}), ni = /* @__PURE__ */ K(st, [["__scopeId", "data-v-68f8806d"]]), lt = {
key: 0,
class: "datametria-select__value"
}, ot = {
key: 1,
class: "datametria-select__placeholder"
}, nt = { class: "datametria-select__options" }, it = ["onClick"], rt = {
key: 0,
class: "datametria-select__empty"
}, dt = /* @__PURE__ */ N({
__name: "DatametriaSelect",
props: {
modelValue: {},
options: {},
placeholder: { default: "Selecione" },
disabled: { type: Boolean, default: !1 },
clearable: { type: Boolean, default: !1 },
filterable: { type: Boolean, default: !1 },
multiple: { type: Boolean, default: !1 }
},
emits: ["update:modelValue", "change"],
setup(e, { emit: i }) {
const a = e, t = i, s = I(!1), n = I(""), r = I({}), d = B(() => {
var x;
return a.multiple && Array.isArray(a.modelValue) ? a.modelValue.map(
(b) => {
var $;
return ($ = a.options.find((g) => g.value === b)) == null ? void 0 : $.label;
}
).filter(Boolean).join(", ") : ((x = a.options.find((p) => p.value === a.modelValue)) == null ? void 0 : x.label) || "";
}), v = B(() => !a.filterable || !n.value ? a.options : a.options.filter(
(x) => x.label.toLowerCase().includes(n.value.toLowerCase())
)), f = (x) => a.multiple && Array.isArray(a.modelValue) ? a.modelValue.includes(x) : a.modelValue === x, S = () => {
a.disabled || (s.value = !s.value);
}, w = (x) => {
if (a.multiple) {
const p = Array.isArray(a.modelValue) ? [...a.modelValue] : [], b = p.indexOf(x.value);
b > -1 ? p.splice(b, 1) : p.push(x.value), t("update:modelValue", p), t("change", p);
} else
t("update:modelValue", x.value), t("change", x.value), s.value = !1;
}, k = (x) => {
x.target.closest(".datametria-select") || (s.value = !1);
};
return Z(() => {
document.addEventListener("click", k);
}), ie(() => {
document.removeEventListener("click", k);
}), (x, p) => (l(), o("div", {
class: F(["datametria-select", { "is-disabled": e.disabled }])
}, [
c("div", {
class: "datametria-select__trigger",
onClick: S
}, [
d.value ? (l(), o("span", lt, M(d.value), 1)) : (l(), o("span", ot, M(e.placeholder), 1)),
p[2] || (p[2] = c("span", { class: "datametria-select__arrow" }, "▼", -1))
]),
(l(), J(te, { to: "body" }, [
s.value ? (l(), o("div", {
key: 0,
class: "datametria-select__dropdown",
style: U(r.value)
}, [
e.filterable ? Q((l(), o("input", {
key: 0,
"onUpdate:modelValue": p[0] || (p[0] = (b) => n.value = b),
class: "datametria-select__filter",
placeholder: "Buscar...",
onClick: p[1] || (p[1] = Y(() => {
}, ["stop"]))
}, null, 512)), [
[re, n.value]
]) : C("", !0),
c("div", nt, [
(l(!0), o(q, null, W(v.value, (b) => (l(), o("div", {
key: b.value,
class: F(["datametria-select__option", { "is-selected": f(b.value) }]),
onClick: ($) => w(b)
}, M(b.label), 11, it))), 128)),
v.value.length === 0 ? (l(), o("div", rt, " Nenhum resultado ")) : C("", !0)
])
], 4)) : C("", !0)
]))
], 2));
}
}), ii = /* @__PURE__ */ K(dt, [["__scopeId", "data-v-5f44a0e3"]]), ct = { class: "datametria-checkbox__input" }, ut = ["checked", "disabled", "indeterminate"], mt = {
key: 0,
class: "datametria-checkbox__label"
}, vt = /* @__PURE__ */ N({
__name: "DatametriaCheckbox",
props: {
modelValue: { type: [Boolean, String, Number], default: !1 },
label: {},
disabled: { type: Boolean, default: !1 },
indeterminate: { type: Boolean, default: !1 },
trueValue: { type: [Boolean, String, Number], default: !0 },
falseValue: { type: [Boolean, String, Number], default: !1 }
},
emits: ["update:modelValue", "change"],
setup(e, { expose: i, emit: a }) {
const t = e, s = a, n = I(), r = de("checkboxGroup", null), d = B(() => r ? r.modelValue.value.includes(t.modelValue) : t.modelValue === t.trueValue), v = (f) => {
if (t.disabled) return;
const w = f.target.checked;
if (r) {
const k = [...r.modelValue.value];
if (w)
k.push(t.modelValue);
else {
const x = k.indexOf(t.modelValue);
x > -1 && k.splice(x, 1);
}
r.updateValue(k), s("update:modelValue", k), s("change", k);
} else {
const k = w ? t.trueValue : t.falseValue;
s("update:modelValue", k), s("change", k);
}
};
return G(() => t.indeterminate, (f) => {
n.value && (n.value.indeterminate = f);
}, { immediate: !0 }), i({
inputRef: n
}), (f, S) => (l(), o("label", {
class: F(["datametria-checkbox", {
"is-checked": d.value,
"is-disabled": e.disabled,
"is-indeterminate": e.indeterminate
}])
}, [
c("span", ct, [
c("input", {
ref_key: "inputRef",
ref: n,
type: "checkbox",
checked: d.value,
disabled: e.disabled,
indeterminate: e.indeterminate,
onChange: v
}, null, 40, ut),
S[0] || (S[0] = c("span", { class: "datametria-checkbox__inner" }, null, -1))
]),
e.label || f.$slots.default ? (l(), o("span", mt, [
O(f.$slots, "default", {}, () => [
H(M(e.label), 1)
], !0)
])) : C("", !0)
], 2));
}
}), ri = /* @__PURE__ */ K(vt, [["__scopeId", "data-v-06a43c6d"]]), ft = {
class: "datametria-checkbox-group",
role: "group"
}, pt = /* @__PURE__ */ N({
__name: "DatametriaCheckboxGroup",
props: {
modelValue: { default: () => [] },
disabled: { type: Boolean, default: !1 }
},
emits: ["update:modelValue", "change"],
setup(e, { emit: i }) {
const a = e, t = i, s = (n) => {
t("update:modelValue", n), t("change", n);
};
return ce("checkboxGroup", {
modelValue: B(() => a.modelValue),
disabled: B(() => a.disabled),
updateValue: s
}), (n, r) => (l(), o("div", ft, [
O(n.$slots, "default", {}, void 0, !0)
]));
}
}), di = /* @__PURE__ */ K(pt, [["__scopeId", "data-v-9134bf4b"]]), ht = { class: "datametria-radio__input" }, bt = ["checked", "disabled", "value"], gt = {
key: 0,
class: "datametria-radio__label"
}, _t = /* @__PURE__ */ N({
__name: "DatametriaRadio",
props: {
modelValue: { type: [String, Number, Boolean] },
label: {},
disabled: { type: Boolean, default: !1 }
},
emits: ["update:modelValue", "change"],
setup(e, { expose: i, emit: a }) {
const t = e, s = a, n = I(), r = de("radioGroup", null), d = B(() => r ? r.modelValue.value === t.modelValue : !1), v = () => {
t.disabled || (r && r.updateValue(t.modelValue), s("update:modelValue", t.modelValue), s("change", t.modelValue));
};
return i({
inputRef: n
}), (f, S) => (l(), o("label", {
class: F(["datametria-radio", {
"is-checked": d.value,
"is-disabled": e.disabled
}])
}, [
c("span", ht, [
c("input", {
ref_key: "inputRef",
ref: n,
type: "radio",
checked: d.value,
disabled: e.disabled,
value: e.modelValue,
onChange: v
}, null, 40, bt),
S[0] || (S[0] = c("span", { class: "datametria-radio__inner" }, null, -1))
]),
e.label || f.$slots.default ? (l(), o("span", gt, [
O(f.$slots, "default", {}, () => [
H(M(e.label), 1)
], !0)
])) : C("", !0)
], 2));
}
}), ci = /* @__PURE__ */ K(_t, [["__scopeId", "data-v-86222e31"]]), yt = {
class: "datametria-radio-group",
role: "radiogroup"
}, kt = /* @__PURE__ */ N({
__name: "DatametriaRadioGroup",
props: {
modelValue: { type: [String, Number, Boolean] },
disabled: { type: Boolean, default: !1 }
},
emits: ["update:modelValue", "change"],
setup(e, { emit: i }) {
const a = e, t = i, s = (n) => {
t("update:modelValue", n), t("change", n);
};
return ce("radioGroup", {
modelValue: B(() => a.modelValue),
disabled: B(() => a.disabled),
updateValue: s
}), (n, r) => (l(), o("div", yt, [
O(n.$slots, "default", {}, void 0, !0)
]));
}
}), ui = /* @__PURE__ */ K(kt, [["__scopeId", "data-v-b0c12ada"]]), $t = ["aria-checked", "disabled"], wt = {
key: 0,
class: "datametria-switch__loading"
}, xt = /* @__PURE__ */ N({
__name: "DatametriaSwitch",
props: {
modelValue: { type: Boolean, default: !1 },
disabled: { type: Boolean, default: !1 },
loading: { type: Boolean, default: !1 },
activeColor: { default: "#0072ce" },
inactiveColor: { default: "#dcdfe6" }
},
emits: ["update:modelValue", "change"],
setup(e, { emit: i }) {
const a = e, t = i, s = B(() => ({
backgroundColor: a.modelValue ? a.activeColor : a.inactiveColor
})), n = () => {
if (a.disabled || a.loading) return;
const r = !a.modelValue;
t("update:modelValue", r), t("change", r);
};
return (r, d) => (l(), o("button", {
type: "button",
role: "switch",
class: F(["datametria-switch", {
"is-checked": e.modelValue,
"is-disabled": e.disabled,
"is-loading": e.loading
}]),
"aria-checked": e.modelValue,
disabled: e.disabled || e.loading,
onClick: n
}, [
c("span", {
class: "datametria-switch__core",
style: U(s.value)
}, [
e.loading ? (l(), o("span", wt, [...d[0] || (d[0] = [
c("span", { class: "spinner" }, null, -1)
])])) : C("", !0)
], 4)
], 10, $t));
}
}), mi = /* @__PURE__ */ K(xt, [["__scopeId", "data-v-ade9c28c"]]), Ct = ["placeholder", "disabled", "readonly", "rows", "maxlength"], Vt = {
key: 0,
class: "datametria-textarea__count"
}, Dt = /* @__PURE__ */ N({
__name: "DatametriaTextarea",
props: {
modelValue: { default: "" },
placeholder: { default: "" },
disabled: { type: Boolean, default: !1 },
readonly: { type: Boolean, default: !1 },
rows: { default: 3 },
maxlength: {},
showWordLimit: { type: Boolean, default: !1 },
autosize: { type: [Boolean, Object], default: !1 }
},
emits: ["update:modelValue", "input", "focus", "blur"],
setup(e, { expose: i, emit: a }) {
const t = e, s = a, n = I(), r = I(t.modelValue), d = I(!1), v = B(() => ({
"datametria-textarea--disabled": t.disabled,
"datametria-textarea--focused": d.value
})), f = B(() => {
if (!t.autosize)
return t.rows;
}), S = (p) => {
const b = p.target;
r.value = b.value, s("update:modelValue", b.value), s("input", b.value), t.autosize && ae(() => x());
}, w = (p) => {
d.value = !0, s("focus", p);
}, k = (p) => {
d.value = !1, s("blur", p);
}, x = () => {
if (!n.value || !t.autosize) return;
const p = n.value;
p.style.height = "auto";
let b = 0, $ = 1 / 0;
if (typeof t.autosize == "object") {
if (t.autosize.minRows) {
const y = parseInt(getComputedStyle(p).lineHeight);
b = t.autosize.minRows * y;
}
if (t.autosize.maxRows) {
const y = parseInt(getComputedStyle(p).lineHeight);
$ = t.autosize.maxRows * y;
}
}
const g = p.scrollHeight, _ = Math.max(b, Math.min($, g));
p.style.height = `${_}px`;
};
return G(() => t.modelValue, (p) => {
p !== r.value && (r.value = p, t.autosize && ae(() => x()));
}), Z(() => {
t.autosize && ae(() => x());
}), i({
focus: () => {
var p;
return (p = n.value) == null ? void 0 : p.focus();
},
blur: () => {
var p;
return (p = n.value) == null ? void 0 : p.blur();
}
}), (p, b) => (l(), o("div", {
class: F(["datametria-textarea", v.value])
}, [
Q(c("textarea", {
ref_key: "textareaRef",
ref: n,
"onUpdate:modelValue": b[0] || (b[0] = ($) => r.value = $),
class: "datametria-textarea__inner",
placeholder: e.placeholder,
disabled: e.disabled,
readonly: e.readonly,
rows: f.value,
maxlength: e.maxlength,
onInput: S,
onFocus: w,
onBlur: k
}, null, 40, Ct), [
[re, r.value]
]),
e.showWordLimit && e.maxlength ? (l(), o("div", Vt, M(r.value.length) + " / " + M(e.maxlength), 1)) : C("", !0)
], 2));
}
}), vi = /* @__PURE__ */ K(Dt, [["__scopeId", "data-v-c4077cb5"]]), St = ["placeholder", "disabled", "readonly"], Bt = {
key: 0,
class: "datametria-datepicker__shortcuts"
}, Mt = ["onClick"], Tt = { class: "datametria-datepicker__calendar" }, It = { class: "datametria-datepicker__header" }, Et = { class: "datametria-datepicker__weekdays" }, zt = { class: "datametria-datepicker__days" }, Lt = ["disabled", "onClick"], Rt = /* @__PURE__ */ N({
__name: "DatametriaDatePicker",
props: {
modelValue: { default: null },
type: { default: "date" },
format: { default: "DD/MM/YYYY" },
placeholder: { default: "Selecione uma data" },
disabled: { type: Boolean, default: !1 },
readonly: { type: Boolean, default: !1 },
disabledDate: {},
shortcuts: { default: () => [] }
},
emits: ["update:modelValue", "change"],
setup(e, { emit: i }) {
const a = e, t = i, s = I(), n = I(), r = I(!1), d = I(/* @__PURE__ */ new Date()), v = I(null), f = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"], S = B(() => `${[
"Janeiro",
"Fevereiro",
"Março",
"Abril",
"Maio",
"Junho",
"Julho",
"Agosto",
"Setembro",
"Outubro",
"Novembro",
"Dezembro"
][d.value.getMonth()]} ${d.value.getFullYear()}`), w = B(() => a.modelValue ? a.type === "range" && Array.isArray(a.modelValue) ? `${p(a.modelValue[0])} - ${p(a.modelValue[1])}` : p(a.modelValue) : ""), k = B(() => {
const V = d.value.getFullYear(), R = d.value.getMonth(), m = new Date(V, R, 1), u = new Date(V, R + 1, 0), D = [], h = m.getDay();
for (let j = h - 1; j >= 0; j--) {
const ee = new Date(V, R, -j);
D.push({ date: ee, disabled: !1, otherMonth: !0 });
}
for (let j = 1; j <= u.getDate(); j++) {
const ee = new Date(V, R, j);
D.push({ date: ee, disabled: !1, otherMonth: !1 });
}
const E = 42 - D.length;
for (let j = 1; j <= E; j++) {
const ee = new Date(V, R + 1, j);
D.push({ date: ee, disabled: !1, otherMonth: !0 });
}
return D;
}), x = B(() => {
if (!s.value) return {};
const V = s.value.getBoundingClientRect();
return {
position: "fixed",
top: `${V.bottom + 4}px`,
left: `${V.left}px`,
zIndex: 9999
};
}), p = (V) => {
const R = String(V.getDate()).padStart(2, "0"), m = String(V.getMonth() + 1).padStart(2, "0"), u = V.getFullYear();
return `${R}/${m}/${u}`;
}, b = (V) => a.disabledDate ? a.disabledDate(V) : !1, $ = (V) => a.modelValue ? a.type === "range" && Array.isArray(a.modelValue) ? _(V, a.modelValue[0]) || _(V, a.modelValue[1]) : _(V, a.modelValue) : !1, g = (V) => {
if (a.type !== "range" || !Array.isArray(a.modelValue)) return !1;
const [R, m] = a.modelValue;
return V > R && V < m;
}, _ = (V, R) => V.getDate() === R.getDate() && V.getMonth() === R.getMonth() && V.getFullYear() === R.getFullYear(), y = (V) => {
if (a.type === "range")
if (!v.value)
v.value = V;
else {
const R = v.value < V ? v.value : V, m = v.value < V ? V : v.value;
t("update:modelValue", [R, m]), t("change", [R, m]), v.value = null, r.value = !1;
}
else
t("update:modelValue", V), t("change", V), r.value = !1;
}, z = () => {
!a.disabled && !a.readonly && (r.value = !0);
}, L = (V) => {
setTimeout(() => {
var R;
(R = n.value) != null && R.contains(V.relatedTarget) || (r.value = !1);
}, 200);
}, T = (V) => {
t("update:modelValue", V.value), t("change", V.value), r.value = !1;
}, A = () => {
d.value = new Date(d.value.getFullYear(), d.value.getMonth() - 1);
}, P = () => {
d.value = new Date(d.value.getFullYear(), d.value.getMonth() + 1);
};
return G(() => a.modelValue, (V) => {
V && !Array.isArray(V) && (d.value = new Date(V));
}), (V, R) => (l(), o("div", {
class: F(["datametria-datepicker", { "datametria-datepicker--disabled": e.disabled }])
}, [
Q(c("input", {
ref_key: "inputRef",
ref: s,
"onUpdate:modelValue": R[0] || (R[0] = (m) => w.value = m),
type: "text",
class: "datametria-datepicker__input",
placeholder: e.placeholder,
disabled: e.disabled,
readonly: e.readonly,
onFocus: z,
onBlur: L
}, null, 40, St), [
[re, w.value]
]),
(l(), J(te, { to: "body" }, [
r.value ? (l(), o("div", {
key: 0,
ref_key: "dropdownRef",
ref: n,
class: "datametria-datepicker__dropdown",
style: U(x.value)
}, [
e.shortcuts.length ? (l(), o("div", Bt, [
(l(!0), o(q, null, W(e.shortcuts, (m) => (l(), o("button", {
key: m.text,
class: "datametria-datepicker__shortcut",
onClick: (u) => T(m)
}, M(m.text), 9, Mt))), 128))
])) : C("", !0),
c("div", Tt, [
c("div", It, [
c("button", { onClick: A }, "<"),
c("span", null, M(S.value), 1),
c("button", { onClick: P }, ">")
]),
c("div", Et, [
(l(), o(q, null, W(f, (m) => c("span", { key: m }, M(m), 1)), 64))
]),
c("div", zt, [
(l(!0), o(q, null, W(k.value, (m) => (l(), o("button", {
key: m.date.getTime(),
class: F(["datametria-datepicker__day", {
"datametria-datepicker__day--disabled": m.disabled || b(m.date),
"datametria-datepicker__day--selected": $(m.date),
"datametria-datepicker__day--in-range": g(m.date),
"datametria-datepicker__day--other-month": m.otherMonth
}]),
disabled: m.disabled || b(m.date),
onClick: (u) => y(m.date)
}, M(m.date.getDate()), 11, Lt))), 128))
])
])
], 4)) : C("", !0)
]))
], 2));
}
}), fi = /* @__PURE__ */ K(Rt, [["__scopeId", "data-v-6a2e42d9"]]), Ft = ["placeholder", "disabled", "readonly"], At = { class: "datametria-timepicker__spinners" }, Ot = { class: "datametria-timepicker__spinner" }, Pt = { class: "datametria-timepicker__spinner-list" }, Nt = ["onClick"], Kt = { class: "datametria-timepicker__spinner" }, jt = { class: "datametria-timepicker__spinner-list" }, qt = ["onClick"], Wt = {
key: 0,
class: "datametria-timepicker__spinner"
}, Ut = { class: "datametria-timepicker__spinner-list" }, Ht = ["onClick"], Yt = /* @__PURE__ */ N({
__name: "DatametriaTimePicker",
props: {
modelValue: { default: null },
format: { default: "HH:mm:ss" },
step: { default: 1 },
placeholder: { default: "Selecione um horário" },
disabled: { type: Boolean, default: !1 },
readonly: { type: Boolean, default: !1 },
range: { type: Boolean, default: !1 }
},
emits: ["update:modelValue", "change"],
setup(e, { emit: i }) {
const a = e, t = i, s = I(), n = I(), r = I(!1), d = I(0), v = I(0), f = I(0), S = B(() => a.format.includes("ss")), w = B(() => {
const V = [];
for (let R = 0; R < 24; R += a.step)
V.push(R);
return V;
}), k = B(() => {
const V = [];
for (let R = 0; R < 60; R += a.step)
V.push(R);
return V;
}), x = B(() => {
const V = [];
for (let R = 0; R < 60; R += a.step)
V.push(R);
return V;
}), p = B(() => a.modelValue ? a.modelValue : ""), b = B(() => {
if (!s.value) return {};
const V = s.value.getBoundingClientRect();
return {
position: "fixed",
top: `${V.bottom + 4}px`,
left: `${V.left}px`,
zIndex: 9999
};
}), $ = (V) => String(V).padStart(2, "0"), g = () => {
const V = $(d.value), R = $(v.value), m = $(f.value);
return S.value ? `${V}:${R}:${m}` : `${V}:${R}`;
}, _ = (V) => {
if (!V) return;
const R = V.split(":");
R.length >= 2 && (d.value = parseInt(R[0]) || 0, v.value = parseInt(R[1]) || 0, R.length >= 3 && (f.value = parseInt(R[2]) || 0));
}, y = (V) => {
d.value = V, T();
}, z = (V) => {
v.value = V, T();
}, L = (V) => {
f.value = V, T();
}, T = () => {
const V = g();
t("update:modelValue", V), t("change", V);
}, A = () => {
!a.disabled && !a.readonly && (r.value = !0);
}, P = (V) => {
setTimeout(() => {
var R;
(R = n.value) != null && R.contains(V.relatedTarget) || (r.value = !1);
}, 200);
};
return G(() => a.modelValue, (V) => {
V && _(V);
}, { immediate: !0 }), (V, R) => (l(), o("div", {
class: F(["datametria-timepicker", { "datametria-timepicker--disabled": e.disabled }])
}, [
Q(c("input", {
ref_key: "inputRef",
ref: s,
"onUpdate:modelValue": R[0] || (R[0] = (m) => p.value = m),
type: "text",
class: "datametria-timepicker__input",
placeholder: e.placeholder,
disabled: e.disabled,
readonly: e.readonly,
onFocus: A,
onBlur: P
}, null, 40, Ft), [
[re, p.value]
]),
(l(), J(te, { to: "body" }, [
r.value ? (l(), o("div", {
key: 0,
ref_key: "dropdownRef",
ref: n,
class: "datametria-timepicker__dropdown",
style: U(b.value)
}, [
c("div", At, [
c("div", Ot, [
R[1] || (R[1] = c("div", { class: "datametria-timepicker__spinner-title" }, "Hora", -1)),
c("div", Pt, [
(l(!0), o(q, null, W(w.value, (m) => (l(), o("button", {
key: m,
class: F(["datametria-timepicker__spinner-item", { "datametria-timepicker__spinner-item--active": m === d.value }]),
onClick: (u) => y(m)
}, M($(m)), 11, Nt))), 128))
])
]),
c("div", Kt, [
R[2] || (R[2] = c("div", { class: "datametria-timepicker__spinner-title" }, "Minuto", -1)),
c("div", jt, [
(l(!0), o(q, null, W(k.value, (m) => (l(), o("button", {
key: m,
class: F(["datametria-timepicker__spinner-item", { "datametria-timepicker__spinner-item--active": m === v.value }]),
onClick: (u) => z(m)
}, M($(m)), 11, qt))), 128))
])
]),
S.value ? (l(), o("div", Wt, [
R[3] || (R[3] = c("div", { class: "datametria-timepicker__spinner-title" }, "Segundo", -1)),
c("div", Ut, [
(l(!0), o(q, null, W(x.value, (m) => (l(), o("button", {
key: m,
class: F(["datametria-timepicker__spinner-item", { "datametria-timepicker__spinner-item--active": m === f.value }]),
onClick: (u) => L(m)
}, M($(m)), 11, Ht))), 128))
])
])) : C("", !0)
])
], 4)) : C("", !0)
]))
], 2));
}
}), pi = /* @__PURE__ */ K(Yt, [["__scopeId", "data-v-9c8ff62c"]]), Gt = {
key: 0,
class: "dm-slider__header"
}, Xt = ["for"], Jt = {
key: 0,
class: "dm-slider__required",
"aria-label": "obrigatório"
}, Qt = {
key: 1,
class: "dm-slider__value"
}, Zt = { class: "dm-slider__wrapper" }, ea = ["id", "value", "min", "max", "step", "disabled", "required", "aria-label", "aria-describedby", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-valuetext"], ta = {
key: 1,
class: "dm-slider__range"
}, aa = { class: "dm-slider__min" }, sa = { class: "dm-slider__max" }, la = {
key: 2,
class: "dm-slider__messages"
}, oa = ["id"], na = ["id"], ia = /* @__PURE__ */ N({
__name: "DatametriaSlider",
props: {
modelValue: {},
min: { default: 0 },
max: { default: 100 },
step: { default: 1 },
label: {},
disabled: { type: Boolean },
required: { type: Boolean },
showValue: { type: Boolean, default: !0 },
showMinMax: { type: Boolean, default: !1 },
errorMessage: {},
helperText: {},
ariaLabel: {},
formatter: {}
},
emits: ["update:modelValue", "change", "input", "focus", "blur"],
setup(e, { expose: i, emit: a }) {
const t = e, s = a, n = I(), r = I(!1), d = B(() => `dm-slider-${Math.random().toString(36).substr(2, 9)}`), v = B(() => {
const T = t.max - t.min;
return (t.modelValue - t.min) / T * 100;
}), f = B(() => t.formatter ? t.formatter(t.modelValue) : t.modelValue.toString()), S = B(() => {
const T = [];
return t.errorMessage ? T.push(`${d.value}-error`) : t.helperText && T.push(`${d.value}-helper`), T.length > 0 ? T.join(" ") : void 0;
}), w = B(() => t.formatter ? t.formatter(t.modelValue) : `${t.modelValue}`), k = (T) => t.formatter ? t.formatter(T) : T.toString(), x = (T) => {
const A = T.target, P = parseFloat(A.value);
s("update:modelValue", P), s("input", P);
}, p = (T) => {
const A = T.target, P = parseFloat(A.value);
s("change", P);
}, b = (T) => {
s("focus", T);
}, $ = (T) => {
s("blur", T);
}, g = (T) => {
if (t.disabled) return;
const P = T.currentTarget.getBoundingClientRect(), V = (T.clientX - P.left) / P.width, R = t.max - t.min, m = t.min + V * R, u = Math.round(m / t.step) * t.step, D = Math.max(t.min, Math.min(t.max, u));
s("update:modelValue", D), s("change", D);
}, _ = (T) => {
if (t.disabled) return;
r.value = !0, T.preventDefault();
const A = (V) => {
if (!r.value) return;
const R = T.target.parentElement;
if (!R) return;
const m = R.getBoundingClientRect(), u = Math.max(0, Math.min(1, (V.clientX - m.left) / m.width)), D = t.max - t.min, h = t.min + u * D, E = Math.round(h / t.step) * t.step, j = Math.max(t.min, Math.min(t.max, E));
s("update:modelValue", j), s("input", j);
}, P = () => {
r.value && (r.value = !1, s("change", t.modelValue)), document.removeEventListener("mousemove", A), document.removeEventListener("mouseup", P);
};
document.addEventListener("mousemove", A), document.addEventListener("mouseup", P);
}, y = (T) => {
if (t.disabled) return;
r.value = !0, T.preventDefault();
const A = (V) => {
if (!r.value) return;
const R = T.target.parentElement;
if (!R) return;
const m = R.getBoundingClientRect(), u = V.touches[0], D = Math.max(0, Math.min(1, (u.clientX - m.left) / m.width)), h = t.max - t.min, E = t.min + D * h, j = Math.round(E / t.step) * t.step, ee = Math.max(t.min, Math.min(t.max, j));
s("update:modelValue", ee), s("input", ee);
}, P = () => {
r.value && (r.value = !1, s("change", t.modelValue)), document.removeEventListener("touchmove", A), document.removeEventListener("touchend", P);
};
document.addEventListener("touchmove", A), document.addEventListener("touchend", P);
};
return i({
focus: () => {
ae(() => {
var T;
(T = n.value) == null || T.focus();
});
},
blur: () => {
var T;
(T = n.value) == null || T.blur();
},
inputRef: n
}), (T, A) => (l(), o("div", {
class: F(["dm-slider", { "dm-slider--disabled": e.disabled }])
}, [
e.label || e.showValue ? (l(), o("div", Gt, [
e.label ? (l(), o("label", {
key: 0,
for: d.value,
class: "dm-slider__label"
}, [
H(M(e.label) + " ", 1),
e.required ? (l(), o("span", Jt, "*")) : C("", !0)
], 8, Xt)) : C("", !0),
e.showValue ? (l(), o("span", Qt, M(f.value), 1)) : C("", !0)
])) : C("", !0),
c("div", Zt, [
c("div", {
class: "dm-slider__track",
onClick: g
}, [
c("div", {
class: "dm-slider__progress",
style: U({ width: `${v.value}%` })
}, null, 4),
c("div", {
class: "dm-slider__thumb",
style: U({ left: `${v.value}%` }),
onMousedown: _,
onTouchstart: y
}, null, 36)
]),
c("input", {
id: d.value,
ref_key: "inputRef",
ref: n,
type: "range",
class: "dm-slider__input",
value: e.modelValue,
min: e.min,
max: e.max,
step: e.step,
disabled: e.disabled,
required: e.required,
"aria-label": e.ariaLabel,
"aria-describedby": S.value,
"aria-valuemin": e.min,
"aria-valuemax": e.max,
"aria-valuenow": e.modelValue,
"aria-valuetext": w.value,
onInput: x,
onChange: p,
onFocus: b,
onBlur: $
}, null, 40, ea)
]),
e.showMinMax ? (l(), o("div", ta, [
c("span", aa, M(k(e.min)), 1),
c("span", sa, M(k(e.max)), 1)
])) : C("", !0),
e.errorMessage || e.helperText ? (l(), o("div", la, [
e.errorMessage ? (l(), o("p", {
key: 0,
id: `${d.value}-error`,
class: "dm-slider__error",
role: "alert"
}, M(e.errorMessage), 9, oa)) : e.helperText ? (l(), o("p", {
key: 1,
id: `${d.value}-helper`,
class: "dm-slider__helper"
}, M(e.helperText), 9, na)) : C("", !0)
])) : C("", !0)
], 2));
}
}), hi = /* @__PURE__ */ K(ia, [["__scopeId", "data-v-5576db83"]]), ra = ["accept", "multiple", "disabled"], da = {
key: 0,
class: "dm-file-upload__spinner"
}, ca = {
key: 1,
class: "dm-file-upload__content"
}, ua = { class: "dm-file-upload__text" }, ma = { class: "dm-file-upload__primary-text" }, va = { class: "dm-file-upload__secondary-text" }, fa = {
key: 0,
class: "dm-file-upload__progress"
}, pa = { class: "dm-file-upload__progress-track" }, ha = { class: "dm-file-upload__progress-text" }, ba = {
key: 1,
class: "dm-file-upload__files"
}, ga = { class: "dm-file-upload__file-info" }, _a = { class: "dm-file-upload__file-name" }, ya = { class: "dm-file-upload__file-size" }, ka = ["onClick"], $a = {
key: 2,
class: "dm-file-upload__error"
}, wa = /* @__PURE__ */ N({
__name: "DatametriaFileUpload",
props: {
modelValue: {},
accept: {},
multiple: { type: Boolean, default: !1 },
maxSize: {},
maxFiles: {},
disabled: { type: Boolean, default: !1 },
loading: { type: Boolean, default: !1 },
progress: {},
uploadText: {},
error: {}
},
emits: ["update:modelValue", "file-added", "file-removed"],
setup(e, { emit: i }) {
const a = e, t = i, s = I(), n = I(!1), r = I([]), d = I(""), v = B(() => a.error || d.value), f = () => {
!a.disabled && s.value && s.value.click();
}, S = (_) => {
const y = _.target;
y.files && b(Array.from(y.files));
}, w = (_) => {
var z;
if (_.preventDefault(), n.value = !1, a.disabled) return;
const y = (z = _.dataTransfer) == null ? void 0 : z.files;
y && b(Array.from(y));
}, k = (_) => {
_.preventDefault();
}, x = (_) => {
_.preventDefault(), a.disabled || (n.value = !0);
}, p = (_) => {
var y;
_.preventDefault(), (y = _.currentTarget) != null && y.contains(_.relatedTarget) || (n.value = !1);
}, b = (_) => {
if (d.value = "", a.accept) {
const y = a.accept.split(",").map((L) => L.trim()), z = _.filter((L) => !y.some((T) => T.startsWith(".") ? L.name.toLowerCase().endsWith(T.toLowerCase()) : L.type.match(T.replace("*", ".*"))));
if (z.length > 0) {
d.value = `Invalid file type(s): ${z.map((L) => L.name).join(", ")}`;
return;
}
}
if (a.maxSize) {
const y = _.filter((z) => z.size > a.maxSize);
if (y.length > 0) {
d.value = `File(s) too large: ${y.map((z) => z.name).join(", ")}`;
return;
}
}
if (a.multiple) {
const y = r.value.length + _.length;
if (a.maxFiles && y > a.maxFiles) {
d.value = `Maximum ${a.maxFiles} files allowed`;
return;
}
r.value.push(..._), t("update:modelValue", r.value);
} else
r.value = [_[0]], t("update:modelValue", _[0]);
_.forEach((y) => {
t("file-added", y);
});
}, $ = (_) => {
const y = r.value[_];
r.value.splice(_, 1), a.multiple ? t("update:modelValue", r.value) : t("update:modelValue", r.value[0] || null), t("file-removed", y, _);
}, g = (_) => {
if (_ === 0) return "0 Bytes";
const y = 1024, z = ["Bytes", "KB", "MB", "GB"], L = Math.floor(Math.log(_) / Math.log(y));
return parseFloat((_ / Math.pow(y, L)).toFixed(2)) + " " + z[L];
};
return (_, y) => (l(), o("div", {
class: F(["dm-file-upload", { "dm-file-upload--disabled": e.disabled, "dm-file-upload--loading": e.loading }])
}, [
c("div", {
class: F(["dm-file-upload__area", { "dm-file-upload__area--dragover": n.value }]),
onClick: f,
onDrop: w,
onDragover: k,
onDragenter: x,
onDragleave: p
}, [
c("input", {
ref_key: "fileInputRef",
ref: s,
type: "file",
class: "dm-file-upload__input",
accept: e.accept,
multiple: e.multiple,
disabled: e.disabled,
onChange: S
}, null, 40, ra),
e.loading ? (l(), o("div", da)) : (l(), o("div", ca, [
y[0] || (y[0] = c("div", { class: "dm-file-upload__icon" }, [
c("svg", {
viewBox: "0 0 24 24",
fill: "currentColor"
}, [
c("path", { d: "M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" })
])
], -1)),
c("div", ua, [
c("p", ma, M(e.uploadText || "Click to upload or drag and drop"), 1),
c("p", va, M(e.accept ? `Supported formats: ${e.accept}` : "All file types supported"), 1)
])
]))
], 34),
e.progress !== void 0 ? (l(), o("div", fa, [
c("div", pa, [
c("div", {
class: "dm-file-upload__progress-bar",
style: U({ width: `${e.progress}%` })
}, null, 4)
]),
c("span", ha, M(e.progress) + "%", 1)
])) : C("", !0),
r.value.length > 0 ? (l(), o("div", ba, [
(l(!0), o(q, null, W(r.value, (z, L) => (l(), o("div", {
key: `${z.name}-${L}`,