maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
603 lines (602 loc) • 22.2 kB
JavaScript
import { openBlock as n, createElementBlock as B, createElementVNode as A, defineComponent as N, defineAsyncComponent as S, useAttrs as oe, computed as s, createBlock as p, resolveDynamicComponent as j, normalizeClass as b, normalizeStyle as q, withCtx as O, renderSlot as T, unref as m, createCommentVNode as c, createVNode as D, useId as te, ref as C, onMounted as ae, useSlots as le, toDisplayString as E, withDirectives as ne, mergeProps as G, toHandlers as re, vModelDynamic as se, withModifiers as J, TransitionGroup as ie, Fragment as ue, renderList as de, createTextVNode as fe, withKeys as H } from "vue";
import '../assets/MazInputTags.CZgq4l94.css';function K(f) {
return !!f;
}
const ce = {
xmlns: "http://www.w3.org/2000/svg",
width: "1em",
height: "1em",
fill: "none",
viewBox: "0 0 24 24"
};
function me(f, l) {
return n(), B("svg", ce, l[0] || (l[0] = [
A(
"path",
{
stroke: "currentColor",
"stroke-linecap": "round",
"stroke-linejoin": "round",
"stroke-width": "1.5",
d: "m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
},
null,
-1
/* HOISTED */
)
]));
}
const pe = { render: me }, ve = {
key: 0,
class: "m-btn-loader-container"
}, be = /* @__PURE__ */ N({
__name: "MazBtn",
props: {
variant: { default: "button" },
size: { default: "md" },
color: { default: "primary" },
type: { default: "button" },
rounded: { type: Boolean },
roundedSize: { default: "lg" },
noRounded: { type: Boolean },
outline: { type: Boolean },
pastel: { type: Boolean },
block: { type: Boolean },
noUnderline: { type: Boolean },
loading: { type: Boolean },
disabled: { type: Boolean },
fab: { type: Boolean },
icon: { type: [String, Function, Object], default: void 0 },
leftIcon: { type: [String, Function, Object], default: void 0 },
rightIcon: { type: [String, Function, Object], default: void 0 },
noPadding: { type: Boolean },
noElevation: { type: Boolean },
justify: { default: "center" }
},
setup(f) {
const l = f, o = S(() => import("./MazSpinner.DaGCwMP7.mjs")), d = S(() => import("./MazIcon.Cq1v4J3r.mjs")), { href: I, to: k } = oe(), y = s(() => I ? "a" : k ? "router-link" : "button"), g = s(() => l.pastel ? `--${l.color}-pastel` : l.outline ? `--${l.color}-outline` : `--${l.color}`), $ = s(
() => (l.loading || l.disabled) && y.value === "button"
), v = s(() => $.value ? "--cursor-default" : "--cursor-pointer"), w = s(() => `--is-${l.variant}`), V = s(() => l.loading && l.variant === "button"), M = s(() => y.value === "button" ? l.type : void 0), z = s(() => l.size === "xl" ? "maz-text-3xl" : l.size === "lg" ? "maz-text-2xl" : l.size === "md" ? "maz-text-xl" : l.size === "sm" ? "maz-text-lg" : l.size === "xs" ? "maz-text-base" : l.size === "mini" ? "maz-text-sm" : "maz-text-xl");
return (t, a) => (n(), p(j(y.value), {
disabled: $.value || void 0,
class: b(["m-btn m-reset-css", [
`--${t.size}`,
!t.fab && !t.rounded && t.roundedSize && `--rounded-${t.roundedSize}`,
g.value,
v.value,
w.value,
{
"--block": t.block,
"--no-underline": t.noUnderline,
"--fab": t.fab,
"--loading": t.loading,
"--disabled": $.value,
"--rounded": t.rounded,
"--no-rounded": t.noRounded,
"--no-padding": t.noPadding,
"--no-elevation": t.noElevation
}
]]),
style: q([`--justify: ${t.justify}`]),
type: M.value
}, {
default: O(() => [
T(t.$slots, "left-icon", {}, () => [
typeof t.leftIcon == "string" ? (n(), p(m(d), {
key: 0,
name: t.leftIcon,
class: b([z.value])
}, null, 8, ["name", "class"])) : t.leftIcon ? (n(), p(j(t.leftIcon), {
key: 1,
class: b([z.value])
}, null, 8, ["class"])) : c("v-if", !0)
], !0),
T(t.$slots, "icon", {}, () => [
typeof t.icon == "string" ? (n(), p(m(d), {
key: 0,
name: t.icon,
class: b([z.value])
}, null, 8, ["name", "class"])) : t.icon ? (n(), p(j(t.icon), {
key: 1,
class: b([z.value])
}, null, 8, ["class"])) : c("v-if", !0)
], !0),
T(t.$slots, "default", {}, void 0, !0),
T(t.$slots, "right-icon", {}, () => [
typeof t.rightIcon == "string" ? (n(), p(m(d), {
key: 0,
name: t.rightIcon,
class: b([z.value])
}, null, 8, ["name", "class"])) : t.rightIcon ? (n(), p(j(t.rightIcon), {
key: 1,
class: b([z.value])
}, null, 8, ["class"])) : c("v-if", !0)
], !0),
V.value ? (n(), B("div", ve, [
D(m(o), {
size: "2em",
color: t.color
}, null, 8, ["color"])
])) : c("v-if", !0)
]),
_: 3
/* FORWARDED */
}, 8, ["disabled", "class", "style", "type"]));
}
}), R = (f, l) => {
const o = f.__vccOpts || f;
for (const [d, I] of l)
o[d] = I;
return o;
}, Q = /* @__PURE__ */ R(be, [["__scopeId", "data-v-6b881156"]]), ye = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
__proto__: null,
default: Q
}, Symbol.toStringTag, { value: "Module" }));
function ge({
componentName: f,
providedId: l
}) {
return s(() => l ?? `${f}-${te().replace(/:/g, "")}`);
}
function ze(f, l) {
let o;
return function(...d) {
clearTimeout(o), o = setTimeout(() => {
f.apply(this, d);
}, l);
};
}
const he = ["for"], ke = {
key: 0,
class: "m-input-wrapper-left"
}, Be = ["id", "name", "placeholder", "aria-label", "type", "inputmode", "disabled", "readonly", "autocomplete", "required"], Ie = {
key: 1,
class: "m-input-wrapper-right"
}, we = /* @__PURE__ */ N({
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(f, { emit: l }) {
const o = f, d = l, I = S(() => Promise.resolve().then(() => ye)), k = S(() => import("./MazIcon.Cq1v4J3r.mjs")), y = S(() => import("./eye-slash.BoO00xzs.mjs")), g = S(() => import("./eye.f8zAUc30.mjs")), $ = S(() => import("./check.BmubdHc_.mjs")), v = C(!1), w = C(!1), V = C(), M = ge({
componentName: "MazInput",
providedId: o.id
});
ae(() => {
var e;
o.autoFocus && ((e = V.value) == null || e.focus());
});
const z = s(() => o.type === "password"), t = s(() => v.value ? "text" : o.type), a = s(() => {
if (!o.noBorder) {
if (o.error)
return "maz-border-danger";
if (o.success)
return "maz-border-success";
if (o.warning)
return "maz-border-warning";
if (w.value || o.borderActive) {
if (o.color === "black")
return "maz-border-black";
if (o.color === "danger")
return "maz-border-danger";
if (o.color === "info")
return "maz-border-info";
if (o.color === "primary")
return "maz-border-primary";
if (o.color === "secondary")
return "maz-border-secondary";
if (o.color === "success")
return "maz-border-success";
if (o.color === "warning")
return "maz-border-warning";
if (o.color === "white")
return "maz-border-white";
}
return "--default-border";
}
}), r = le(), i = s(() => h.value !== void 0 && h.value !== ""), u = ze(
(e) => {
d("update:model-value", e);
},
typeof o.debounce == "number" ? o.debounce : o.debounceDelay ?? 500
);
function F(e) {
if (o.debounce)
return u(e);
d("update:model-value", e);
}
const h = s({
get: () => o.modelValue,
set: (e) => F(e)
}), U = s(() => (!!o.label || !!o.hint) && (w.value || !!i.value || !!o.placeholder || ["date", "month", "week"].includes(o.type))), W = s(() => !!o.label || !!o.hint);
function X() {
return !!r["right-icon"] || z.value || !!r["valid-button"] || o.validButton || !!o.rightIcon;
}
function Y() {
return !!r["left-icon"] || !!o.leftIcon;
}
function Z(e) {
d("focus", e), w.value = !0;
}
function x(e) {
d("blur", e), w.value = !1;
}
function _(e) {
return d("change", e);
}
function ee(e) {
return d("input", e);
}
return (e, L) => (n(), B(
"div",
{
class: b(["m-input", [
{
"--is-focused": w.value || e.borderActive,
"--should-up": U.value,
"--has-label": W.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
},
o.class,
`--${e.color}`
]]),
style: q(e.style)
},
[
e.topLabel ? (n(), B("label", {
key: 0,
for: m(M),
class: "m-input-top-label"
}, E(e.topLabel), 9, he)) : c("v-if", !0),
A(
"div",
{
class: b(["m-input-wrapper m-reset-css", [
e.inputClasses,
a.value,
e.roundedSize ? `--rounded-${e.roundedSize}` : { "maz-rounded": !e.noRadius },
{ "--block": e.block }
]])
},
[
Y() ? (n(), B("div", ke, [
e.$slots["left-icon"] || e.leftIcon ? T(e.$slots, "left-icon", { key: 0 }, () => [
typeof e.leftIcon == "string" ? (n(), p(m(k), {
key: 0,
name: e.leftIcon,
class: "maz-text-xl maz-text-muted"
}, null, 8, ["name"])) : e.leftIcon ? (n(), p(j(e.leftIcon), {
key: 1,
class: "maz-text-xl maz-text-muted"
})) : c("v-if", !0)
], !0) : c("v-if", !0)
])) : c("v-if", !0),
A(
"div",
{
class: b(["m-input-wrapper-input", [`--${e.size}`, { "--top-label": !!e.topLabel }]])
},
[
ne(A("input", G({ id: m(M) }, e.$attrs, {
ref_key: "input",
ref: V,
"onUpdate:modelValue": L[0] || (L[0] = (P) => h.value = P),
name: e.name,
placeholder: e.placeholder,
"aria-label": e.label || e.placeholder,
type: t.value,
inputmode: e.inputmode,
disabled: e.disabled,
readonly: e.readonly,
autocomplete: e.autocomplete,
required: e.required,
class: "m-input-input"
}, re({
blur: x,
focus: Z,
change: _,
input: ee
}, !0), {
onClick: L[1] || (L[1] = (P) => e.$emit("click", P))
}), null, 16, Be), [
[se, h.value]
]),
e.label || e.hint ? (n(), B(
"span",
{
key: 0,
class: b(["m-input-label", [
{
"maz-text-danger-600": e.error,
"maz-text-success-600": e.success,
"maz-text-warning-600": e.warning
}
]])
},
E(e.hint || e.label),
3
/* TEXT, CLASS */
)) : c("v-if", !0)
],
2
/* CLASS */
),
X() ? (n(), B("div", Ie, [
e.$slots["right-icon"] || e.rightIcon ? T(e.$slots, "right-icon", { key: 0 }, () => [
typeof e.rightIcon == "string" ? (n(), p(m(k), {
key: 0,
name: e.rightIcon,
class: "maz-text-xl maz-text-muted"
}, null, 8, ["name"])) : e.rightIcon ? (n(), p(j(e.rightIcon), {
key: 1,
class: "maz-text-xl maz-text-muted"
})) : c("v-if", !0)
], !0) : c("v-if", !0),
z.value ? (n(), p(m(I), {
key: 1,
color: "transparent",
tabindex: "-1",
size: "mini",
onClick: L[2] || (L[2] = J((P) => v.value = !v.value, ["stop"]))
}, {
default: O(() => [
v.value ? (n(), p(m(y), {
key: 0,
class: "maz-text-xl maz-text-muted"
})) : (n(), p(m(g), {
key: 1,
class: "maz-text-xl maz-text-muted"
}))
]),
_: 1
/* STABLE */
})) : c("v-if", !0),
e.$slots["valid-button"] || e.validButton ? T(e.$slots, "valid-button", { key: 2 }, () => [
D(m(I), {
color: "transparent",
disabled: e.disabled,
tabindex: "-1",
loading: e.validButtonLoading,
class: "m-input-valid-button",
size: "mini",
type: "submit"
}, {
default: O(() => [
D(m($), { class: "maz-text-2xl maz-text-normal" })
]),
_: 1
/* STABLE */
}, 8, ["disabled", "loading"])
], !0) : c("v-if", !0)
])) : c("v-if", !0)
],
2
/* CLASS */
),
e.assistiveText ? (n(), B(
"div",
{
key: 1,
class: b(["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
}
]])
},
E(e.assistiveText),
3
/* TEXT, CLASS */
)) : c("v-if", !0)
],
6
/* CLASS, STYLE */
));
}
}), $e = /* @__PURE__ */ R(we, [["__scopeId", "data-v-8def99c5"]]), Ce = /* @__PURE__ */ N({
inheritAttrs: !1,
__name: "MazInputTags",
props: {
style: { default: void 0 },
class: { default: void 0 },
modelValue: { default: void 0 },
placeholder: { default: void 0 },
label: { default: void 0 },
disabled: { type: Boolean, default: !1 },
error: { type: Boolean, default: !1 },
success: { type: Boolean, default: !1 },
warning: { type: Boolean, default: !1 },
size: { default: "md" },
color: { default: "primary" },
block: { type: Boolean },
addTagsOnBlur: { type: Boolean, default: !0 },
hint: {}
},
emits: ["update:model-value"],
setup(f, { emit: l }) {
const o = f, d = l, I = C(!1), k = C(), y = C(), g = C(), $ = C(), v = s(
() => {
var a;
return (a = o.modelValue) == null ? void 0 : a.map((r) => ({
tag: r,
id: crypto.randomUUID()
}));
}
);
function w(a) {
if (k.value) {
g.value = void 0, a.preventDefault();
const i = k.value.trim().split(",").map((u) => u.trim() === "," ? void 0 : u.trim()).filter(K).filter(
(u) => {
var F, h;
return !((h = (F = o.modelValue) == null ? void 0 : F.filter(K)) != null && h.some((U) => U === u));
}
);
d(
"update:model-value",
o.modelValue ? [...o.modelValue, ...i] : [...i]
), k.value = void 0;
}
}
const V = s(() => {
if (o.error)
return "maz-border-danger";
if (o.success)
return "maz-border-success";
if (o.warning)
return "maz-border-warning";
if (I.value) {
if (o.color === "primary")
return "maz-border-primary";
if (o.color === "secondary")
return "maz-border-secondary";
if (o.color === "info")
return "maz-border-info";
if (o.color === "danger")
return "maz-border-danger";
if (o.color === "success")
return "maz-border-success";
if (o.color === "warning")
return "maz-border-warning";
if (o.color === "black")
return "maz-border-black";
if (o.color === "white")
return "maz-border-white";
}
return "maz-border-border dark:maz-border-color-lighter";
});
function M() {
var a, r, i;
k.value || v.value && ((a = v.value) == null ? void 0 : a.length) === 0 || ($.value && clearTimeout($.value), g.value ? (z(g.value), g.value = void 0) : (g.value = (i = (r = v.value) == null ? void 0 : r[v.value.length - 1]) == null ? void 0 : i.id, $.value = setTimeout(() => {
g.value = void 0;
}, 2e3)));
}
function z(a) {
var i;
const r = (i = v.value) == null ? void 0 : i.filter((u) => u.id !== a).map((u) => u.tag);
d("update:model-value", r);
}
const t = s(() => o.size === "mini" || o.size === "xs" ? "mini" : o.size === "sm" ? "xs" : o.size === "md" ? "sm" : o.size === "lg" ? "md" : o.size === "xl" ? "lg" : o.size);
return (a, r) => (n(), B(
"div",
{
class: b(["m-input-tags m-reset-css", [V.value, `--${a.color}`, `--${a.size}`, o.class, { "--block": a.block }]]),
style: q(a.style),
onFocusCapture: r[4] || (r[4] = (i) => I.value = !0),
onBlurCapture: r[5] || (r[5] = (i) => I.value = !1)
},
[
D(ie, { name: "maz-tags" }, {
default: O(() => [
(n(!0), B(
ue,
null,
de(v.value, ({ tag: i, id: u }, F) => (n(), B("div", {
key: `tag-${F}`,
class: "m-input-tags__wrapper"
}, [
D(Q, {
class: "m-input-tags__tag",
disabled: a.disabled,
size: t.value,
color: y.value === u || g.value === u ? "danger" : a.color,
"right-icon": y.value === u || g.value === u ? m(pe) : void 0,
onClick: J((h) => z(u), ["stop"]),
onMouseenter: (h) => y.value = u,
onFocus: (h) => y.value = u,
onMouseleave: r[0] || (r[0] = (h) => y.value = void 0),
onBlur: r[1] || (r[1] = (h) => y.value = void 0)
}, {
default: O(() => [
fe(
E(i),
1
/* TEXT */
)
]),
_: 2
/* DYNAMIC */
}, 1032, ["disabled", "size", "color", "right-icon", "onClick", "onMouseenter", "onFocus"])
]))),
128
/* KEYED_FRAGMENT */
))
]),
_: 1
/* STABLE */
}),
D($e, G({
key: "input-tags",
modelValue: k.value,
"onUpdate:modelValue": r[2] || (r[2] = (i) => k.value = i)
}, a.$attrs, {
placeholder: a.placeholder,
label: a.label,
"aria-label": a.label || a.placeholder,
error: a.error,
hint: a.hint,
success: a.success,
warning: a.warning,
disabled: a.disabled,
color: a.color,
block: a.block,
size: a.size,
"no-border": "",
class: "m-input-tags__input",
onKeydown: [
H(w, ["enter"]),
H(M, ["delete"])
],
onBlur: r[3] || (r[3] = (i) => a.addTagsOnBlur ? w(i) : void 0)
}), null, 16, ["modelValue", "placeholder", "label", "aria-label", "error", "hint", "success", "warning", "disabled", "color", "block", "size"])
],
38
/* CLASS, STYLE, NEED_HYDRATION */
));
}
}), Te = /* @__PURE__ */ R(Ce, [["__scopeId", "data-v-4736a457"]]);
export {
Te as M,
R as _
};