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