maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
314 lines (313 loc) • 11.2 kB
JavaScript
import { computed as s, useId as Q, defineComponent as W, defineAsyncComponent as c, ref as h, onMounted as X, useSlots as Y, openBlock as o, createElementBlock as f, normalizeClass as m, normalizeStyle as Z, unref as l, toDisplayString as k, createCommentVNode as a, createElementVNode as I, renderSlot as w, createBlock as u, resolveDynamicComponent as V, withDirectives as x, mergeProps as _, toHandlers as ee, vModelDynamic as te, withModifiers as oe, withCtx as M, createVNode as L } from "vue";
import '../assets/MazInput.BAiQiFTc.css';function ae({
componentName: r,
providedId: i
}) {
return s(() => i ?? `${r}-${Q().replace(/:/g, "")}`);
}
function ne(r, i) {
let t;
return function(...n) {
clearTimeout(t), t = setTimeout(() => {
r.apply(this, n);
}, i);
};
}
const le = ["for"], re = {
key: 0,
class: "m-input-wrapper-left"
}, se = ["id", "name", "placeholder", "aria-label", "type", "inputmode", "disabled", "readonly", "autocomplete", "required"], ie = {
key: 1,
class: "m-input-wrapper-right"
}, ue = /* @__PURE__ */ W({
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(r, { emit: i }) {
const t = r, n = i, v = c(() => import("./MazBtn.BsXkp99v.mjs")), B = c(() => import("./MazIcon.Cq1v4J3r.mjs")), T = c(() => import("./eye-slash.BoO00xzs.mjs")), D = c(() => import("./eye.f8zAUc30.mjs")), E = c(() => import("./check.BmubdHc_.mjs")), b = h(!1), p = h(!1), $ = h(), C = ae({
componentName: "MazInput",
providedId: t.id
});
X(() => {
var e;
t.autoFocus && ((e = $.value) == null || e.focus());
});
const S = s(() => t.type === "password"), q = s(() => b.value ? "text" : t.type), A = 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 (p.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";
}
}), g = Y(), F = s(() => y.value !== void 0 && y.value !== ""), N = ne(
(e) => {
n("update:model-value", e);
},
typeof t.debounce == "number" ? t.debounce : t.debounceDelay ?? 500
);
function P(e) {
if (t.debounce)
return N(e);
n("update:model-value", e);
}
const y = s({
get: () => t.modelValue,
set: (e) => P(e)
}), O = s(() => (!!t.label || !!t.hint) && (p.value || !!F.value || !!t.placeholder || ["date", "month", "week"].includes(t.type))), R = s(() => !!t.label || !!t.hint);
function U() {
return !!g["right-icon"] || S.value || !!g["valid-button"] || t.validButton || !!t.rightIcon;
}
function j() {
return !!g["left-icon"] || !!t.leftIcon;
}
function H(e) {
n("focus", e), p.value = !0;
}
function G(e) {
n("blur", e), p.value = !1;
}
function J(e) {
return n("change", e);
}
function K(e) {
return n("input", e);
}
return (e, d) => (o(), f(
"div",
{
class: m(["m-input", [
{
"--is-focused": p.value || e.borderActive,
"--should-up": O.value,
"--has-label": R.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 ? (o(), f("label", {
key: 0,
for: l(C),
class: "m-input-top-label"
}, k(e.topLabel), 9, le)) : a("v-if", !0),
I(
"div",
{
class: m(["m-input-wrapper m-reset-css", [
e.inputClasses,
A.value,
e.roundedSize ? `--rounded-${e.roundedSize}` : { "maz-rounded": !e.noRadius },
{ "--block": e.block }
]])
},
[
j() ? (o(), f("div", re, [
e.$slots["left-icon"] || e.leftIcon ? w(e.$slots, "left-icon", { key: 0 }, () => [
typeof e.leftIcon == "string" ? (o(), u(l(B), {
key: 0,
name: e.leftIcon,
class: "maz-text-xl maz-text-muted"
}, null, 8, ["name"])) : e.leftIcon ? (o(), u(V(e.leftIcon), {
key: 1,
class: "maz-text-xl maz-text-muted"
})) : a("v-if", !0)
], !0) : a("v-if", !0)
])) : a("v-if", !0),
I(
"div",
{
class: m(["m-input-wrapper-input", [`--${e.size}`, { "--top-label": !!e.topLabel }]])
},
[
x(I("input", _({ id: l(C) }, e.$attrs, {
ref_key: "input",
ref: $,
"onUpdate:modelValue": d[0] || (d[0] = (z) => y.value = z),
name: e.name,
placeholder: e.placeholder,
"aria-label": e.label || e.placeholder,
type: q.value,
inputmode: e.inputmode,
disabled: e.disabled,
readonly: e.readonly,
autocomplete: e.autocomplete,
required: e.required,
class: "m-input-input"
}, ee({
blur: G,
focus: H,
change: J,
input: K
}, !0), {
onClick: d[1] || (d[1] = (z) => e.$emit("click", z))
}), null, 16, se), [
[te, y.value]
]),
e.label || e.hint ? (o(), f(
"span",
{
key: 0,
class: m(["m-input-label", [
{
"maz-text-danger-600": e.error,
"maz-text-success-600": e.success,
"maz-text-warning-600": e.warning
}
]])
},
k(e.hint || e.label),
3
/* TEXT, CLASS */
)) : a("v-if", !0)
],
2
/* CLASS */
),
U() ? (o(), f("div", ie, [
e.$slots["right-icon"] || e.rightIcon ? w(e.$slots, "right-icon", { key: 0 }, () => [
typeof e.rightIcon == "string" ? (o(), u(l(B), {
key: 0,
name: e.rightIcon,
class: "maz-text-xl maz-text-muted"
}, null, 8, ["name"])) : e.rightIcon ? (o(), u(V(e.rightIcon), {
key: 1,
class: "maz-text-xl maz-text-muted"
})) : a("v-if", !0)
], !0) : a("v-if", !0),
S.value ? (o(), u(l(v), {
key: 1,
color: "transparent",
tabindex: "-1",
size: "mini",
onClick: d[2] || (d[2] = oe((z) => b.value = !b.value, ["stop"]))
}, {
default: M(() => [
b.value ? (o(), u(l(T), {
key: 0,
class: "maz-text-xl maz-text-muted"
})) : (o(), u(l(D), {
key: 1,
class: "maz-text-xl maz-text-muted"
}))
]),
_: 1
/* STABLE */
})) : a("v-if", !0),
e.$slots["valid-button"] || e.validButton ? w(e.$slots, "valid-button", { key: 2 }, () => [
L(l(v), {
color: "transparent",
disabled: e.disabled,
tabindex: "-1",
loading: e.validButtonLoading,
class: "m-input-valid-button",
size: "mini",
type: "submit"
}, {
default: M(() => [
L(l(E), { class: "maz-text-2xl maz-text-normal" })
]),
_: 1
/* STABLE */
}, 8, ["disabled", "loading"])
], !0) : a("v-if", !0)
])) : a("v-if", !0)
],
2
/* CLASS */
),
e.assistiveText ? (o(), f(
"div",
{
key: 1,
class: m(["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
}
]])
},
k(e.assistiveText),
3
/* TEXT, CLASS */
)) : a("v-if", !0)
],
6
/* CLASS, STYLE */
));
}
}), de = (r, i) => {
const t = r.__vccOpts || r;
for (const [n, v] of i)
t[n] = v;
return t;
}, pe = /* @__PURE__ */ de(ue, [["__scopeId", "data-v-8def99c5"]]);
export {
pe as M,
de as _
};