maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
448 lines (447 loc) • 15.7 kB
JavaScript
import { openBlock as i, createElementBlock as y, createElementVNode as C, computed as s, useId as Q, defineComponent as L, defineAsyncComponent as z, ref as I, onMounted as O, useSlots as X, normalizeClass as w, normalizeStyle as Z, unref as m, toDisplayString as A, createCommentVNode as u, renderSlot as E, createBlock as p, resolveDynamicComponent as D, withDirectives as x, mergeProps as _, toHandlers as ee, vModelDynamic as te, withModifiers as oe, withCtx as P, createVNode as q, watch as re, withKeys as ne, nextTick as ae } from "vue";
import '../assets/MazInputPrice.BAiQiFTc.css';const le = {
xmlns: "http://www.w3.org/2000/svg",
width: "1em",
height: "1em",
fill: "none",
viewBox: "0 0 24 24"
};
function ie(l, n) {
return i(), y("svg", le, n[0] || (n[0] = [
C(
"path",
{
stroke: "currentColor",
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "1.5",
d: "M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0m3 0h.008v.008H18zm-12 0h.008v.008H6z"
},
null,
-1
/* HOISTED */
)
]));
}
const ue = { render: ie }, se = {
style: "currency",
minimumFractionDigits: 2,
round: !1
};
function de(l, n, t) {
let r = Number(l);
return t.round && (r = Math.floor(r), t.minimumFractionDigits = 0), new Intl.NumberFormat(n, t).format(r);
}
function ce(l, n, t) {
if (l === void 0)
throw new TypeError("[maz-ui](FilterCurrency) The `number` attribute is required.");
if (n === void 0)
throw new TypeError("[maz-ui](FilterCurrency) The `locale` attribute is required.");
if (typeof n != "string")
throw new TypeError("[maz-ui](FilterCurrency) The `locale` attribute must be a string.");
if (t.currency === void 0)
throw new TypeError("[maz-ui](FilterCurrency) The `options.currency` attribute is required.");
}
function me(l, n, t) {
const r = {
...se,
...t
};
ce(l, n, r);
try {
return de(l, n, r);
} catch (d) {
throw new Error(`[maz-ui](FilterCurrency) ${d}`);
}
}
function fe({
componentName: l,
providedId: n
}) {
return s(() => n ?? `${l}-${Q().replace(/:/g, "")}`);
}
function pe(l, n) {
let t;
return function(...r) {
clearTimeout(t), t = setTimeout(() => {
l.apply(this, r);
}, n);
};
}
const ve = ["for"], ye = {
key: 0,
class: "m-input-wrapper-left"
}, be = ["id", "name", "placeholder", "aria-label", "type", "inputmode", "disabled", "readonly", "autocomplete", "required"], he = {
key: 1,
class: "m-input-wrapper-right"
}, ge = /* @__PURE__ */ L({
inheritAttrs: !1,
__name: "MazInput",
props: {
style: { default: void 0 },
class: { default: void 0 },
modelValue: { default: void 0 },
placeholder: { default: void 0 },
label: { default: void 0 },
topLabel: {},
assistiveText: {},
name: { default: void 0 },
color: { default: "primary" },
type: { default: "text" },
required: { type: Boolean, default: !1 },
disabled: { type: Boolean, default: !1 },
readonly: { type: Boolean, default: !1 },
id: { default: void 0 },
error: { type: Boolean, default: !1 },
success: { type: Boolean, default: !1 },
warning: { type: Boolean, default: !1 },
hint: { default: void 0 },
inputClasses: { default: void 0 },
noBorder: { type: Boolean, default: !1 },
noRadius: { type: Boolean, default: !1 },
inputmode: { default: "text" },
size: { default: "md" },
debounce: { type: [Boolean, Number], default: !1 },
debounceDelay: { default: 500 },
validButton: { type: Boolean, default: !1 },
validButtonLoading: { type: Boolean, default: !1 },
autoFocus: { type: Boolean, default: !1 },
borderActive: { type: Boolean, default: !1 },
leftIcon: { type: [String, Function, Object], default: void 0 },
rightIcon: { type: [String, Function, Object], default: void 0 },
roundedSize: { default: void 0 },
block: { type: Boolean },
autocomplete: {}
},
emits: ["update:model-value", "focus", "blur", "click", "change", "input"],
setup(l, { emit: n }) {
const t = l, r = n, d = z(() => import("./MazBtn.NVrWAz8O.mjs")), b = z(() => import("./MazIcon.Cq1v4J3r.mjs")), M = z(() => import("./eye-slash.BoO00xzs.mjs")), k = z(() => import("./eye.f8zAUc30.mjs")), B = z(() => import("./check.BmubdHc_.mjs")), f = I(!1), v = I(!1), h = I(), V = fe({
componentName: "MazInput",
providedId: t.id
});
O(() => {
var e;
t.autoFocus && ((e = h.value) == null || e.focus());
});
const T = s(() => t.type === "password"), S = s(() => f.value ? "text" : t.type), F = s(() => {
if (!t.noBorder) {
if (t.error)
return "maz-border-danger";
if (t.success)
return "maz-border-success";
if (t.warning)
return "maz-border-warning";
if (v.value || t.borderActive) {
if (t.color === "black")
return "maz-border-black";
if (t.color === "danger")
return "maz-border-danger";
if (t.color === "info")
return "maz-border-info";
if (t.color === "primary")
return "maz-border-primary";
if (t.color === "secondary")
return "maz-border-secondary";
if (t.color === "success")
return "maz-border-success";
if (t.color === "warning")
return "maz-border-warning";
if (t.color === "white")
return "maz-border-white";
}
return "--default-border";
}
}), o = X(), c = s(() => N.value !== void 0 && N.value !== ""), a = pe(
(e) => {
r("update:model-value", e);
},
typeof t.debounce == "number" ? t.debounce : t.debounceDelay ?? 500
);
function H(e) {
if (t.debounce)
return a(e);
r("update:model-value", e);
}
const N = s({
get: () => t.modelValue,
set: (e) => H(e)
}), R = s(() => (!!t.label || !!t.hint) && (v.value || !!c.value || !!t.placeholder || ["date", "month", "week"].includes(t.type))), U = s(() => !!t.label || !!t.hint);
function j() {
return !!o["right-icon"] || T.value || !!o["valid-button"] || t.validButton || !!t.rightIcon;
}
function K() {
return !!o["left-icon"] || !!t.leftIcon;
}
function Y(e) {
r("focus", e), v.value = !0;
}
function G(e) {
r("blur", e), v.value = !1;
}
function W(e) {
return r("change", e);
}
function J(e) {
return r("input", e);
}
return (e, g) => (i(), y(
"div",
{
class: w(["m-input", [
{
"--is-focused": v.value || e.borderActive,
"--should-up": R.value,
"--has-label": U.value,
"--is-disabled": e.disabled,
"--is-readonly": e.readonly,
"--has-z-2": e.error || e.warning || e.success,
"--has-state": e.error || e.warning || e.success,
"--block": e.block
},
t.class,
`--${e.color}`
]]),
style: Z(e.style)
},
[
e.topLabel ? (i(), y("label", {
key: 0,
for: m(V),
class: "m-input-top-label"
}, A(e.topLabel), 9, ve)) : u("v-if", !0),
C(
"div",
{
class: w(["m-input-wrapper m-reset-css", [
e.inputClasses,
F.value,
e.roundedSize ? `--rounded-${e.roundedSize}` : { "maz-rounded": !e.noRadius },
{ "--block": e.block }
]])
},
[
K() ? (i(), y("div", ye, [
e.$slots["left-icon"] || e.leftIcon ? E(e.$slots, "left-icon", { key: 0 }, () => [
typeof e.leftIcon == "string" ? (i(), p(m(b), {
key: 0,
name: e.leftIcon,
class: "maz-text-xl maz-text-muted"
}, null, 8, ["name"])) : e.leftIcon ? (i(), p(D(e.leftIcon), {
key: 1,
class: "maz-text-xl maz-text-muted"
})) : u("v-if", !0)
], !0) : u("v-if", !0)
])) : u("v-if", !0),
C(
"div",
{
class: w(["m-input-wrapper-input", [`--${e.size}`, { "--top-label": !!e.topLabel }]])
},
[
x(C("input", _({ id: m(V) }, e.$attrs, {
ref_key: "input",
ref: h,
"onUpdate:modelValue": g[0] || (g[0] = ($) => N.value = $),
name: e.name,
placeholder: e.placeholder,
"aria-label": e.label || e.placeholder,
type: S.value,
inputmode: e.inputmode,
disabled: e.disabled,
readonly: e.readonly,
autocomplete: e.autocomplete,
required: e.required,
class: "m-input-input"
}, ee({
blur: G,
focus: Y,
change: W,
input: J
}, !0), {
onClick: g[1] || (g[1] = ($) => e.$emit("click", $))
}), null, 16, be), [
[te, N.value]
]),
e.label || e.hint ? (i(), y(
"span",
{
key: 0,
class: w(["m-input-label", [
{
"maz-text-danger-600": e.error,
"maz-text-success-600": e.success,
"maz-text-warning-600": e.warning
}
]])
},
A(e.hint || e.label),
3
/* TEXT, CLASS */
)) : u("v-if", !0)
],
2
/* CLASS */
),
j() ? (i(), y("div", he, [
e.$slots["right-icon"] || e.rightIcon ? E(e.$slots, "right-icon", { key: 0 }, () => [
typeof e.rightIcon == "string" ? (i(), p(m(b), {
key: 0,
name: e.rightIcon,
class: "maz-text-xl maz-text-muted"
}, null, 8, ["name"])) : e.rightIcon ? (i(), p(D(e.rightIcon), {
key: 1,
class: "maz-text-xl maz-text-muted"
})) : u("v-if", !0)
], !0) : u("v-if", !0),
T.value ? (i(), p(m(d), {
key: 1,
color: "transparent",
tabindex: "-1",
size: "mini",
onClick: g[2] || (g[2] = oe(($) => f.value = !f.value, ["stop"]))
}, {
default: P(() => [
f.value ? (i(), p(m(M), {
key: 0,
class: "maz-text-xl maz-text-muted"
})) : (i(), p(m(k), {
key: 1,
class: "maz-text-xl maz-text-muted"
}))
]),
_: 1
/* STABLE */
})) : u("v-if", !0),
e.$slots["valid-button"] || e.validButton ? E(e.$slots, "valid-button", { key: 2 }, () => [
q(m(d), {
color: "transparent",
disabled: e.disabled,
tabindex: "-1",
loading: e.validButtonLoading,
class: "m-input-valid-button",
size: "mini",
type: "submit"
}, {
default: P(() => [
q(m(B), { class: "maz-text-2xl maz-text-normal" })
]),
_: 1
/* STABLE */
}, 8, ["disabled", "loading"])
], !0) : u("v-if", !0)
])) : u("v-if", !0)
],
2
/* CLASS */
),
e.assistiveText ? (i(), y(
"div",
{
key: 1,
class: w(["m-input-bottom-text", [
{
"maz-text-danger-600": e.error,
"maz-text-success-600": e.success,
"maz-text-warning-600": e.warning,
"maz-text-muted": !e.error && !e.success && !e.warning
}
]])
},
A(e.assistiveText),
3
/* TEXT, CLASS */
)) : u("v-if", !0)
],
6
/* CLASS, STYLE */
));
}
}), ze = (l, n) => {
const t = l.__vccOpts || l;
for (const [r, d] of n)
t[r] = d;
return t;
}, we = /* @__PURE__ */ ze(ge, [["__scopeId", "data-v-8def99c5"]]), ke = /* @__PURE__ */ L({
__name: "MazInputPrice",
props: {
modelValue: { default: void 0 },
currency: { default: "EUR" },
locale: { default: "fr-FR" },
min: { default: Number.NEGATIVE_INFINITY },
max: { default: Number.POSITIVE_INFINITY },
noIcon: { type: Boolean, default: !1 },
block: { type: Boolean },
error: { type: Boolean },
hint: {},
success: { type: Boolean },
warning: { type: Boolean },
currencyOptions: {}
},
emits: ["update:model-value", "input", "formatted", "blur", "focus"],
setup(l, { emit: n }) {
const t = l, r = n, d = I(f(t.modelValue));
re(() => t.modelValue, F);
const b = I(!1), M = s(() => {
var o;
return (o = t.modelValue) == null ? void 0 : o.toString();
}), k = s(() => t.modelValue), B = s(
() => typeof k.value == "number" ? me(k.value, t.locale, { ...t.currencyOptions, currency: t.currency }) : void 0
);
function f(o) {
const c = typeof o == "string" && o.startsWith("-");
let a = typeof o == "string" ? Number.parseFloat(o.replace(",", ".").replaceAll(/[^\d.]/g, "")) : o;
return a = c && a ? -a : a, (typeof a != "number" || Number.isNaN(a)) && (a = void 0), a && a < t.min && (a = t.min), a && a > t.max && (a = t.max), a;
}
const v = s(() => {
if (b.value)
return M.value;
if (typeof t.modelValue == "number")
return B.value;
});
async function h(o) {
const c = f(o);
r("update:model-value", c), await ae(), r("formatted", B.value);
}
O(() => {
h(t.modelValue);
});
function V(o) {
b.value = !1, h(d.value), r("blur", o);
}
function T(o) {
b.value = !0, r("focus", o);
}
function S() {
r("input", d.value);
}
function F(o) {
d.value = f(o);
}
return (o, c) => (i(), p(we, {
"model-value": v.value,
class: "maz-input-price m-reset-css",
block: o.block,
error: o.error,
success: o.success,
warning: o.warning,
hint: o.hint,
onFocus: T,
onBlur: V,
onInput: S,
onKeydown: c[0] || (c[0] = ne((a) => h(d.value), ["enter"])),
"onUpdate:modelValue": c[1] || (c[1] = (a) => F(a))
}, {
"left-icon": P(() => [
o.noIcon ? u("v-if", !0) : E(o.$slots, "left-icon", { key: 0 }, () => [
q(m(ue), { class: "maz-text-xl" })
])
]),
_: 3
/* FORWARDED */
}, 8, ["model-value", "block", "error", "success", "warning", "hint"]));
}
});
export {
ze as _,
ke as a
};