@mozaic-ds/vue
Version:
Mozaic-Vue is the Vue.js implementation of ADEO Design system
1,221 lines (1,220 loc) • 37.5 kB
JavaScript
import { defineComponent as y, computed as v, createElementBlock as n, openBlock as l, normalizeClass as $, toDisplayString as f, createBlock as w, resolveDynamicComponent as j, withCtx as S, createCommentVNode as h, createElementVNode as d, renderSlot as g, Fragment as B, renderList as C, createVNode as V, createTextVNode as M, normalizeStyle as Z, mergeProps as k, ref as I, watch as O, withDirectives as T, vModelDynamic as P, vModelText as G } from "vue";
const U = /* @__PURE__ */ y({
__name: "MBadge",
props: {
label: {},
appearance: { default: "standard" },
size: { default: "s" }
},
setup(o) {
const a = o, t = v(() => ({
[`mc-badge--${a.appearance}`]: a.appearance && a.appearance != "standard",
[`mc-badge--${a.size}`]: a.size && a.size != "s"
}));
return (e, i) => (l(), n("span", {
class: $(["mc-badge", t.value])
}, f(e.label), 3));
}
}), _ = (o, a) => {
const t = o.__vccOpts || o;
for (const [e, i] of a)
t[e] = i;
return t;
}, Xa = /* @__PURE__ */ _(U, [["__scopeId", "data-v-b427cc61"]]), D = {
key: 0,
class: "mc-link__icon",
"aria-hidden": "true"
}, F = { class: "mc-link__label" }, N = {
key: 1,
class: "mc-link__icon",
"aria-hidden": "true"
}, R = /* @__PURE__ */ y({
__name: "MLink",
props: {
iconPosition: { default: "left" },
appearance: { default: "standard" },
size: { default: "s" },
href: { default: void 0 },
target: { default: void 0 },
inline: { type: Boolean },
router: { type: Boolean }
},
setup(o) {
const a = o, t = v(() => ({
[`mc-link--${a.appearance}`]: a.appearance && a.appearance != "standard",
[`mc-link--${a.size}`]: a.size && a.size != "s",
"mc-link--inline": a.inline,
"mc-link--stand-alone": !a.inline
}));
return (e, i) => (l(), w(j(e.router ? "router-link" : "a"), {
class: $(["mc-link", t.value]),
href: e.href,
target: e.target,
to: e.router ? e.href : void 0
}, {
default: S(() => [
e.$slots.icon && e.iconPosition == "left" ? (l(), n("span", D, [
g(e.$slots, "icon", {}, void 0, !0)
])) : h("", !0),
d("span", F, [
g(e.$slots, "default", {}, void 0, !0)
]),
e.$slots.icon && e.iconPosition == "right" ? (l(), n("span", N, [
g(e.$slots, "icon", {}, void 0, !0)
])) : h("", !0)
]),
_: 3
}, 8, ["class", "href", "target", "to"]));
}
}), A = /* @__PURE__ */ _(R, [["__scopeId", "data-v-ad3d954f"]]), H = { class: "mc-breadcrumb__container" }, E = /* @__PURE__ */ y({
__name: "MBreadcrumb",
props: {
appearance: {},
links: {}
},
setup(o) {
const a = o, t = v(() => ({
[`mc-breadcrumb--${a.appearance}`]: a.appearance && a.appearance != "standard"
})), e = (i) => {
var s;
return i === (((s = a.links) == null ? void 0 : s.length) ?? 0) - 1;
};
return (i, s) => (l(), n("nav", {
class: $(["mc-breadcrumb", t.value]),
"aria-label": "Breadcrumb"
}, [
d("ul", H, [
(l(!0), n(B, null, C(i.links, (u, r) => (l(), n("li", {
class: "mc-breadcrumb__item",
key: `breadcrumb-${r}`
}, [
V(A, {
href: u.href,
router: u.router,
appearance: i.appearance,
inline: "",
class: $({
"mc-breadcrumb__current": e(r)
}),
"aria-current": e(r) ? "page" : void 0
}, {
default: S(() => [
M(f(u.label), 1)
]),
_: 2
}, 1032, ["href", "router", "appearance", "class", "aria-current"])
]))), 128))
])
], 2));
}
}), Ya = /* @__PURE__ */ _(E, [["__scopeId", "data-v-09df4905"]]), Q = { class: "mc-loader__spinner" }, W = ["viewBox"], J = ["r"], K = {
key: 0,
class: "mc-loader__text",
role: "status"
}, X = /* @__PURE__ */ y({
__name: "MLoader",
props: {
appearance: { default: "standard" },
size: { default: "m" },
text: {}
},
setup(o) {
const a = o, t = v(() => ({
[`mc-loader--${a.size}`]: a.size && a.size !== "m",
[`mc-loader--${a.appearance}`]: a.appearance && a.appearance !== "standard"
})), e = v(() => {
let s;
switch (a.size) {
case "s":
s = "0 0 24 24";
break;
case "l":
s = "0 0 64 64";
break;
default:
s = "0 0 32 32";
}
return s;
}), i = v(() => {
let s;
switch (a.size) {
case "s":
s = 6;
break;
case "l":
s = 19;
break;
default:
s = 9;
}
return s;
});
return (s, u) => (l(), n("div", {
class: $(["mc-loader", t.value])
}, [
d("span", Q, [
(l(), n("svg", {
class: "mc-loader__icon",
xmlns: "http://www.w3.org/2000/svg",
viewBox: e.value,
"aria-hidden": "true"
}, [
d("circle", {
class: "mc-loader__path",
cx: "50%",
cy: "50%",
r: i.value
}, null, 8, J)
], 8, W))
]),
s.text ? (l(), n("p", K, f(s.text), 1)) : h("", !0)
], 2));
}
}), Y = /* @__PURE__ */ _(X, [["__scopeId", "data-v-56c66912"]]), x = ["disabled", "type"], ee = {
key: 0,
class: "mc-button__icon"
}, ae = {
key: 1,
class: "mc-button__icon",
style: { position: "absolute" }
}, se = {
key: 2,
class: "mc-button__icon"
}, te = {
key: 4,
class: "mc-button__icon"
}, le = /* @__PURE__ */ y({
__name: "MButton",
props: {
appearance: { default: "standard" },
size: { default: "m" },
disabled: { type: Boolean },
ghost: { type: Boolean },
outlined: { type: Boolean },
iconPosition: {},
type: { default: "button" },
isLoading: { type: Boolean }
},
setup(o) {
const a = o, t = v(() => ({
[`mc-button--${a.appearance}`]: a.appearance && a.appearance != "standard",
[`mc-button--${a.size}`]: a.size && a.size != "m",
"mc-button--ghost": a.ghost,
"mc-button--outlined": a.outlined,
"mc-button--icon-only": a.iconPosition == "only"
}));
return (e, i) => (l(), n("button", {
class: $(["mc-button", t.value]),
disabled: e.disabled,
type: e.type
}, [
e.$slots.icon && e.iconPosition == "left" && !e.isLoading ? (l(), n("span", ee, [
g(e.$slots, "icon", {}, void 0, !0)
])) : h("", !0),
e.isLoading ? (l(), n("span", ae, [
V(Y, {
style: { color: "currentColor" },
size: "s"
})
])) : h("", !0),
e.$slots.icon && e.iconPosition == "only" ? (l(), n("span", se, [
g(e.$slots, "icon", {}, void 0, !0)
])) : (l(), n("span", {
key: 3,
class: "mc-button__label",
style: Z({ visibility: e.isLoading ? "hidden" : "visible" })
}, [
g(e.$slots, "default", {}, () => [
i[0] || (i[0] = M("Button Label"))
], !0)
], 4)),
e.$slots.icon && e.iconPosition == "right" && !e.isLoading ? (l(), n("span", te, [
g(e.$slots, "icon", {}, void 0, !0)
])) : h("", !0)
], 10, x));
}
}), ne = /* @__PURE__ */ _(le, [["__scopeId", "data-v-f4f43ab6"]]), oe = { class: "mc-checkbox" }, ie = ["id", "name", "checked", "indeterminate", "disabled", "aria-invalid"], de = ["for"], re = /* @__PURE__ */ y({
__name: "MCheckbox",
props: {
id: {},
name: {},
label: {},
modelValue: { type: Boolean },
indeterminate: { type: Boolean },
isInvalid: { type: Boolean },
disabled: { type: Boolean }
},
emits: ["update:modelValue"],
setup(o, { emit: a }) {
const t = o, e = v(() => ({
"is-invalid": t.isInvalid
})), i = a;
return (s, u) => (l(), n("div", oe, [
d("input", k({
id: s.id,
type: "checkbox",
class: ["mc-checkbox__input", e.value],
name: s.name,
checked: s.modelValue,
indeterminate: s.indeterminate,
disabled: s.disabled,
"aria-invalid": s.isInvalid
}, s.$attrs, {
onChange: u[0] || (u[0] = (r) => i("update:modelValue", r.target.checked))
}), null, 16, ie),
s.label ? (l(), n("label", {
key: 0,
for: s.id,
class: "mc-checkbox__label"
}, f(s.label), 9, de)) : h("", !0)
]));
}
}), ce = /* @__PURE__ */ _(re, [["__scopeId", "data-v-37fd0a35"]]), ue = /* @__PURE__ */ y({
__name: "MCheckboxGroup",
props: {
name: {},
modelValue: {},
options: {},
inline: { type: Boolean }
},
emits: ["update:modelValue"],
setup(o, { emit: a }) {
const t = o, e = I([]);
O(
() => t.modelValue,
(p) => {
e.value = p || [];
},
{ immediate: !0 }
);
const i = (p, c) => {
let m = [...e.value];
p && !m.includes(c) ? m.push(c) : m = m.filter((b) => b !== c), r("update:modelValue", m), e.value = m;
}, s = v(() => ({
"mc-field__container--inline": t.inline
})), u = v(() => ({
"mc-field__container--inline__item": t.inline
})), r = a;
return (p, c) => (l(), n("div", {
class: $(["mc-field__container", s.value])
}, [
(l(!0), n(B, null, C(p.options, (m) => (l(), w(ce, {
id: m.id,
key: m.id,
label: m.label,
"is-invalid": m.isInvalid,
name: p.name,
class: $(["mc-field__item", u.value]),
"model-value": p.modelValue ? p.modelValue.includes(m.value) : void 0,
disabled: m.disabled,
"onUpdate:modelValue": (b) => i(b, m.value)
}, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "onUpdate:modelValue"]))), 128))
], 2));
}
}), xa = /* @__PURE__ */ _(ue, [["__scopeId", "data-v-8ee4699f"]]), pe = { class: "mc-field" }, me = ["for"], _e = {
key: 0,
class: "mc-field__requirement"
}, ve = ["id"], be = { class: "mc-field__content" }, fe = ["id"], he = /* @__PURE__ */ y({
__name: "MField",
props: {
id: {},
label: {},
requirementText: {},
helpText: {},
helpId: {},
isValid: { type: Boolean },
isInvalid: { type: Boolean },
messageId: {},
message: {}
},
setup(o) {
const a = o, t = v(() => ({
"is-valid": a.isValid,
"is-invalid": a.isInvalid
}));
return (e, i) => (l(), n("div", pe, [
d("label", {
class: "mc-field__label",
for: e.id
}, [
M(f(e.label) + " ", 1),
e.requirementText ? (l(), n("span", _e, "(" + f(e.requirementText) + ")", 1)) : h("", !0)
], 8, me),
e.helpId && e.helpText ? (l(), n("span", {
key: 0,
id: e.helpId,
class: "mc-field__help"
}, f(e.helpText), 9, ve)) : h("", !0),
d("div", be, [
g(e.$slots, "default", {}, void 0, !0)
]),
(e.isValid || e.isInvalid) && e.message ? (l(), n("span", {
key: 1,
class: $(["mc-field__validation-message", t.value]),
id: e.messageId
}, f(e.message), 11, fe)) : h("", !0)
]));
}
}), es = /* @__PURE__ */ _(he, [["__scopeId", "data-v-ead078c4"]]), $e = { class: "mc-field--group" }, ye = ["for"], ge = {
key: 0,
class: "mc-field__requirement"
}, Ve = {
key: 0,
class: "mc-field__help"
}, ke = { class: "mc-field__content" }, Ie = /* @__PURE__ */ y({
__name: "MFieldGroup",
props: {
id: {},
legend: {},
requirementText: {},
helpText: {},
isValid: { type: Boolean },
isInvalid: { type: Boolean },
message: {}
},
setup(o) {
const a = o, t = v(() => ({
"is-valid": a.isValid,
"is-invalid": a.isInvalid
}));
return (e, i) => (l(), n("fieldset", $e, [
d("legend", {
class: "mc-field__legend",
for: e.id
}, [
M(f(e.legend) + " ", 1),
e.requirementText ? (l(), n("span", ge, "(" + f(e.requirementText) + ")", 1)) : h("", !0)
], 8, ye),
e.helpText ? (l(), n("span", Ve, f(e.helpText), 1)) : h("", !0),
d("div", ke, [
g(e.$slots, "default", {}, void 0, !0)
]),
(e.isValid || e.isInvalid) && e.message ? (l(), n("span", {
key: 1,
class: $(["mc-field__validation-message", t.value])
}, f(e.message), 3)) : h("", !0)
]));
}
}), as = /* @__PURE__ */ _(Ie, [["__scopeId", "data-v-fc0c08dc"]]), we = ["disabled", "type"], Be = { class: "mc-button__icon" }, Ce = /* @__PURE__ */ y({
__name: "MIconButton",
props: {
appearance: { default: "standard" },
size: { default: "m" },
disabled: { type: Boolean },
ghost: { type: Boolean },
outlined: { type: Boolean },
type: { default: "button" }
},
setup(o) {
const a = o, t = v(() => ({
[`mc-button--${a.appearance}`]: a.appearance && a.appearance != "standard",
[`mc-button--${a.size}`]: a.size && a.size != "m",
"mc-button--ghost": a.ghost,
"mc-button--outlined": a.outlined
}));
return (e, i) => (l(), n("button", {
class: $(["mc-button mc-button--icon-button", t.value]),
disabled: e.disabled,
type: e.type
}, [
d("span", Be, [
g(e.$slots, "icon", {}, void 0, !0)
])
], 10, we));
}
}), ss = /* @__PURE__ */ _(Ce, [["__scopeId", "data-v-abf78562"]]), Me = ["aria-labelledby"], ze = /* @__PURE__ */ y({
__name: "MOverlay",
props: {
isVisible: { type: Boolean },
dialogLabel: {}
},
setup(o) {
return (a, t) => (l(), n("div", {
class: $(["mc-overlay", { "is-visible": a.isVisible }])
}, [
d("div", {
role: "dialog",
tabindex: "-1",
"aria-labelledby": a.dialogLabel
}, [
g(a.$slots, "default", {}, void 0, !0)
], 8, Me)
], 2));
}
}), ts = /* @__PURE__ */ _(ze, [["__scopeId", "data-v-db90fdb3"]]), Le = {
name: "CrossCircleFilled24",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, Se = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24"
};
function Oe(o, a, t, e, i, s) {
return l(), n("svg", Se, a[0] || (a[0] = [
d("path", {
"fill-rule": "evenodd",
d: "M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z"
}, null, -1)
]));
}
const q = /* @__PURE__ */ _(Le, [["render", Oe]]), je = ["id", "type", "name", "placeholder", "disabled", "aria-invalid", "readonly"], Te = {
key: 0,
class: "mc-controls-options"
}, qe = { class: "mc-controls-options__label" }, Ze = /* @__PURE__ */ y({
__name: "MPasswordInput",
props: {
id: {},
name: {},
modelValue: {},
placeholder: {},
isInvalid: { type: Boolean },
disabled: { type: Boolean },
readonly: { type: Boolean },
isClearable: { type: Boolean },
clearLabel: { default: "Clear content" },
buttonLabel: { default: () => ({ show: "Show", hide: "Hide" }) }
},
emits: ["update:modelValue"],
setup(o, { emit: a }) {
const t = o, e = v(() => ({
"is-invalid": t.isInvalid
})), i = I(t.modelValue), s = I(!1), u = () => {
i.value = "", m("update:modelValue", "");
}, r = () => {
s.value = !s.value;
}, p = v(() => s.value ? "text" : "password"), c = v(() => s.value ? "true" : "false"), m = a;
return (b, z) => (l(), n("div", {
class: $(["mc-password-input mc-text-input", e.value])
}, [
T(d("input", k({
class: "mc-password-input__control mc-text-input__control",
"onUpdate:modelValue": z[0] || (z[0] = (L) => i.value = L),
id: b.id,
type: p.value,
name: b.name,
placeholder: b.placeholder,
disabled: b.disabled,
"aria-invalid": b.isInvalid,
readonly: b.readonly
}, b.$attrs, {
onInput: z[1] || (z[1] = (L) => m("update:modelValue", L.target.value))
}), null, 16, je), [
[P, i.value]
]),
b.isClearable && i.value ? (l(), n("div", Te, [
d("button", {
class: "mc-controls-options__button",
onClick: u
}, [
V(q, {
class: "mc-controls-options__icon",
"aria-hidden": "true"
}),
d("span", qe, f(b.clearLabel), 1)
])
])) : h("", !0),
V(ne, {
ref: "button",
role: "switch",
"aria-checked": c.value,
disabled: b.disabled,
onClick: r,
size: "s",
ghost: ""
}, {
default: S(() => [
M(f(s.value ? b.buttonLabel.hide : b.buttonLabel.show), 1)
]),
_: 1
}, 8, ["aria-checked", "disabled"])
], 2));
}
}), ls = /* @__PURE__ */ _(Ze, [["__scopeId", "data-v-a5164b59"]]), Pe = {
name: "More24",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, Ge = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24"
};
function Ue(o, a, t, e, i, s) {
return l(), n("svg", Ge, a[0] || (a[0] = [
d("g", { "clip-path": "url(#a)" }, [
d("path", {
"fill-rule": "evenodd",
d: "M13 5a1 1 0 1 0-2 0v6H5a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2h-6V5Z"
})
], -1),
d("defs", null, [
d("clipPath", { id: "a" }, [
d("rect", {
width: "24",
height: "24",
fill: "#fff"
})
])
], -1)
]));
}
const De = /* @__PURE__ */ _(Pe, [["render", Ue]]), Fe = {
name: "Less24",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, Ne = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24"
};
function Re(o, a, t, e, i, s) {
return l(), n("svg", Ne, a[0] || (a[0] = [
d("g", { "clip-path": "url(#a)" }, [
d("path", {
"fill-rule": "evenodd",
d: "M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Z"
})
], -1),
d("defs", null, [
d("clipPath", { id: "a" }, [
d("rect", {
width: "24",
height: "24",
fill: "#fff"
})
])
], -1)
]));
}
const Ae = /* @__PURE__ */ _(Fe, [["render", Re]]), He = ["id", "name", "disabled", "min", "max", "step", "readonly", "aria-invalid", "aria-valuemin", "aria-valuemax", "aria-valuenow"], Ee = ["aria-controls", "disabled"], Qe = { class: "mc-quantity-selector__icon" }, We = { class: "mc-quantity-selector__label" }, Je = ["aria-controls", "disabled"], Ke = { class: "mc-quantity-selector__icon" }, Xe = { class: "mc-quantity-selector__label" }, Ye = /* @__PURE__ */ y({
__name: "MQuantitySelector",
props: {
id: {},
name: { default: "quantity-selector-input" },
modelValue: { default: 1 },
isInvalid: { type: Boolean },
disabled: { type: Boolean },
size: { default: "m" },
min: { default: 1 },
max: { default: 100 },
step: { default: 1 },
readonly: { type: Boolean },
incrementlabel: { default: "Increment" },
decrementLabel: { default: "Decrement" }
},
emits: ["update:modelValue"],
setup(o, { emit: a }) {
const t = o, e = I(t.modelValue);
O(e, (c) => {
c !== t.modelValue && p("update:modelValue", c);
});
const i = v(() => ({
[`mc-quantity-selector--${t.size}`]: t.size && t.size != "m",
"is-invalid": t.isInvalid
})), s = () => {
e.value + t.step <= t.max ? e.value += t.step : e.value = t.max;
}, u = () => {
e.value - t.step > t.min ? e.value -= t.step : e.value = t.min;
}, r = (c) => {
e.value = c, e.value > t.max && (e.value = t.max), e.value <= t.min && (e.value = t.min), p("update:modelValue", e.value);
}, p = a;
return (c, m) => (l(), n("div", {
class: $(["mc-quantity-selector", i.value])
}, [
T(d("input", k({
id: c.id,
"onUpdate:modelValue": m[0] || (m[0] = (b) => e.value = b),
class: "mc-quantity-selector__control",
type: "number",
name: c.name,
disabled: c.disabled,
min: c.min,
max: c.max,
step: c.step,
readonly: c.readonly,
"aria-invalid": c.isInvalid,
"aria-valuemin": c.min,
"aria-valuemax": c.max,
"aria-valuenow": e.value
}, c.$attrs, {
onChange: m[1] || (m[1] = (b) => r(Number(b.target.value)))
}), null, 16, He), [
[G, e.value]
]),
c.readonly ? h("", !0) : (l(), n("button", {
key: 0,
type: "button",
"aria-controls": c.id,
class: "mc-quantity-selector__button mc-quantity-selector__button--increase",
tabindex: "-1",
disabled: c.disabled || e.value === c.max,
onClick: s
}, [
d("span", Qe, [
V(De)
]),
d("span", We, f(c.incrementlabel), 1)
], 8, Ee)),
c.readonly ? h("", !0) : (l(), n("button", {
key: 1,
type: "button",
"aria-controls": c.id,
class: "mc-quantity-selector__button mc-quantity-selector__button--decrease",
tabindex: "-1",
disabled: c.disabled || e.value === c.min,
onClick: u
}, [
d("span", Ke, [
V(Ae)
]),
d("span", Xe, f(c.decrementLabel), 1)
], 8, Je))
], 2));
}
}), ns = /* @__PURE__ */ _(Ye, [["__scopeId", "data-v-a732650a"]]), xe = { class: "mc-radio" }, ea = ["id", "name", "checked", "disabled", "aria-invalid"], aa = ["for"], sa = /* @__PURE__ */ y({
__name: "MRadio",
props: {
id: {},
name: {},
label: {},
modelValue: { type: Boolean },
isInvalid: { type: Boolean },
disabled: { type: Boolean }
},
emits: ["update:modelValue"],
setup(o, { emit: a }) {
const t = o, e = v(() => ({
"is-invalid": t.isInvalid
})), i = a;
return (s, u) => (l(), n("div", xe, [
d("input", k({
id: s.id,
type: "radio",
class: ["mc-radio__input", e.value],
name: s.name,
checked: s.modelValue,
disabled: s.disabled,
"aria-invalid": s.isInvalid
}, s.$attrs, {
onChange: u[0] || (u[0] = (r) => i("update:modelValue", r.target.checked))
}), null, 16, ea),
s.label ? (l(), n("label", {
key: 0,
for: s.id,
class: "mc-radio__label"
}, f(s.label), 9, aa)) : h("", !0)
]));
}
}), ta = /* @__PURE__ */ _(sa, [["__scopeId", "data-v-da78938c"]]), la = /* @__PURE__ */ y({
__name: "MRadioGroup",
props: {
name: {},
modelValue: {},
options: {},
isInvalid: { type: Boolean },
inline: { type: Boolean }
},
emits: ["update:modelValue"],
setup(o, { emit: a }) {
const t = o, e = v(() => ({
"mc-field__container--inline": t.inline
})), i = v(() => ({
"mc-field__container--inline__item": t.inline
})), s = a;
return (u, r) => (l(), n("div", {
class: $(["mc-field__container", e.value])
}, [
(l(!0), n(B, null, C(u.options, (p) => (l(), w(ta, {
id: p.id,
key: p.id,
label: p.label,
"is-invalid": u.isInvalid,
name: u.name,
class: $(["mc-field__item", i.value]),
"model-value": u.modelValue === p.value,
disabled: p.disabled,
"onUpdate:modelValue": (c) => c ? s("update:modelValue", p.value) : null
}, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "onUpdate:modelValue"]))), 128))
], 2));
}
}), os = /* @__PURE__ */ _(la, [["__scopeId", "data-v-d2f5e103"]]), na = ["id", "name", "value", "disabled"], oa = {
key: 0,
value: "",
disabled: ""
}, ia = ["value", "disabled"], da = /* @__PURE__ */ y({
__name: "MSelect",
props: {
id: {},
name: {},
options: {},
modelValue: {},
placeholder: {},
isInvalid: { type: Boolean },
disabled: { type: Boolean },
size: { default: "m" },
readonly: { type: Boolean }
},
emits: ["update:modelValue"],
setup(o, { emit: a }) {
const t = o, e = v(() => ({
[`mc-select--${t.size}`]: t.size && t.size != "m",
"mc-select--readonly": t.readonly,
"is-invalid": t.isInvalid
})), i = a;
return (s, u) => (l(), n("select", k({
id: s.id,
class: ["mc-select", e.value],
name: s.name,
value: s.modelValue,
disabled: s.disabled
}, s.$attrs, {
onChange: u[0] || (u[0] = (r) => i("update:modelValue", r.target.value))
}), [
s.placeholder ? (l(), n("option", oa, " -- " + f(s.placeholder) + " -- ", 1)) : h("", !0),
(l(!0), n(B, null, C(s.options, (r, p) => (l(), n("option", k({
key: p,
value: r.value,
ref_for: !0
}, r.attributes, {
disabled: r.disabled
}), f(r.text), 17, ia))), 128))
], 16, na));
}
}), is = /* @__PURE__ */ _(da, [["__scopeId", "data-v-68c735e4"]]), ra = /* @__PURE__ */ y({
__name: "MStatusDot",
props: {
status: { default: "info" },
size: {}
},
setup(o) {
const a = o, t = v(() => ({
[`mc-status-dot--${a.status}`]: a.status && a.status != "info",
[`mc-status-dot--${a.size}`]: a.size && a.size != "m"
}));
return (e, i) => (l(), n("span", {
class: $(["mc-status-dot", t.value])
}, null, 2));
}
}), ca = /* @__PURE__ */ _(ra, [["__scopeId", "data-v-417b563f"]]), ua = { class: "mc-status-badge__label" }, pa = /* @__PURE__ */ y({
__name: "MStatusBadge",
props: {
label: {},
status: { default: "info" }
},
setup(o) {
const a = o, t = v(() => ({
[`mc-status-badge--${a.status}`]: a.status && a.status != "info"
}));
return (e, i) => (l(), n("div", {
class: $(["mc-status-badge", t.value])
}, [
V(ca, { status: e.status }, null, 8, ["status"]),
d("span", ua, f(e.label), 1)
], 2));
}
}), ds = /* @__PURE__ */ _(pa, [["__scopeId", "data-v-3e437a03"]]), ma = {
name: "Cross20",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, _a = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 20 20"
};
function va(o, a, t, e, i, s) {
return l(), n("svg", _a, a[0] || (a[0] = [
d("g", { "clip-path": "url(#a)" }, [
d("path", {
"fill-rule": "evenodd",
d: "M16.364 4.697a.75.75 0 1 0-1.061-1.06L10 8.938 4.697 3.636a.75.75 0 0 0-1.06 1.06L8.938 10l-5.303 5.303a.75.75 0 0 0 1.061 1.06L10 11.06l5.303 5.303a.75.75 0 0 0 1.06-1.06L11.062 10l5.303-5.303Z"
})
], -1),
d("defs", null, [
d("clipPath", { id: "a" }, [
d("rect", {
width: "20",
height: "20",
fill: "#fff"
})
])
], -1)
]));
}
const ba = /* @__PURE__ */ _(ma, [["render", va]]), fa = {
name: "InfoCircle32",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, ha = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 32 32"
};
function $a(o, a, t, e, i, s) {
return l(), n("svg", ha, a[0] || (a[0] = [
d("path", {
"fill-rule": "evenodd",
d: "M16 5C9.925 5 5 9.925 5 16s4.925 11 11 11 11-4.925 11-11S22.075 5 16 5ZM3 16C3 8.82 8.82 3 16 3s13 5.82 13 13-5.82 13-13 13S3 23.18 3 16Zm13-2.333a1 1 0 0 1 1 1v6.666a1 1 0 1 1-2 0v-6.666a1 1 0 0 1 1-1ZM16 12a1.333 1.333 0 1 0 0-2.667A1.333 1.333 0 0 0 16 12Z"
}, null, -1)
]));
}
const ya = /* @__PURE__ */ _(fa, [["render", $a]]), ga = {
name: "WarningCircle32",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, Va = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 32 32"
};
function ka(o, a, t, e, i, s) {
return l(), n("svg", Va, a[0] || (a[0] = [
d("path", {
"fill-rule": "evenodd",
d: "M16 5C9.925 5 5 9.925 5 16s4.925 11 11 11 11-4.925 11-11S22.075 5 16 5ZM3 16C3 8.82 8.82 3 16 3s13 5.82 13 13-5.82 13-13 13S3 23.18 3 16Zm13-6.333a1 1 0 0 1 1 1v6.666a1 1 0 1 1-2 0v-6.666a1 1 0 0 1 1-1Zm0 13A1.333 1.333 0 1 0 16 20a1.333 1.333 0 0 0 0 2.667Z"
}, null, -1)
]));
}
const Ia = /* @__PURE__ */ _(ga, [["render", ka]]), wa = {
name: "CrossCircle32",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, Ba = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 32 32"
};
function Ca(o, a, t, e, i, s) {
return l(), n("svg", Ba, a[0] || (a[0] = [
d("path", {
"fill-rule": "evenodd",
d: "M5 16C5 9.925 9.925 5 16 5s11 4.925 11 11-4.925 11-11 11S5 22.075 5 16ZM16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3Zm-3.293 8.293a1 1 0 0 0-1.414 1.414L14.586 16l-3.293 3.293a1 1 0 0 0 1.414 1.414L16 17.414l3.293 3.293a1 1 0 0 0 1.414-1.414L17.414 16l3.293-3.293a1 1 0 0 0-1.414-1.414L16 14.586l-3.293-3.293Z"
}, null, -1)
]));
}
const Ma = /* @__PURE__ */ _(wa, [["render", Ca]]), za = {
name: "CheckCircle32",
props: {
/**
* Icon color
*/
color: {
type: String,
default: "currentColor"
}
}
}, La = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 32 32"
};
function Sa(o, a, t, e, i, s) {
return l(), n("svg", La, a[0] || (a[0] = [
d("path", {
"fill-rule": "evenodd",
d: "M5 16C5 9.925 9.925 5 16 5s11 4.925 11 11-4.925 11-11 11S5 22.075 5 16ZM16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3Zm6.707 10.374a1 1 0 0 0-1.414-1.414l-6.626 6.626-3.293-3.293a1 1 0 0 0-1.414 1.414l4 4a1 1 0 0 0 1.414 0l7.333-7.333Z"
}, null, -1)
]));
}
const Oa = /* @__PURE__ */ _(za, [["render", Sa]]), ja = { class: "mc-status-notification__content" }, Ta = { class: "mc-status-notification__title" }, qa = { class: "mc-status-notification__message" }, Za = {
key: 0,
class: "mc-status-notification__footer"
}, Pa = /* @__PURE__ */ y({
__name: "MStatusNotification",
props: {
title: {},
description: {},
status: { default: "info" },
closable: { type: Boolean }
},
emits: ["close"],
setup(o, { emit: a }) {
const t = o, e = v(() => ({
[`mc-status-notification--${t.status}`]: t.status && t.status != "info"
})), i = v(() => {
switch (t.status) {
case "success":
return Oa;
case "warning":
return Ia;
case "error":
return Ma;
case "info":
default:
return ya;
}
}), s = a;
return (u, r) => (l(), n("section", {
class: $(["mc-status-notification", e.value]),
role: "status"
}, [
(l(), w(j(i.value), {
class: "mc-status-notification__icon",
"aria-hidden": "true"
})),
d("div", ja, [
d("h2", Ta, f(u.title), 1),
d("p", qa, f(u.description), 1),
u.$slots.footer ? (l(), n("div", Za, [
g(u.$slots, "footer", {}, void 0, !0)
])) : h("", !0)
]),
u.closable ? (l(), n("button", {
key: 0,
class: "mc-status-notification-closable__close",
onClick: r[0] || (r[0] = (p) => s("close"))
}, [
V(ba, {
class: "mc-status-notification-closable__icon",
"aria-hidden": "true"
}),
r[1] || (r[1] = d("span", { class: "mc-status-notification-closable__text" }, "Close", -1))
])) : h("", !0)
], 2));
}
}), rs = /* @__PURE__ */ _(Pa, [["__scopeId", "data-v-d6e3be16"]]), Ga = ["id", "aria-invalid", "value", "name", "placeholder", "disabled", "minlength", "maxlength", "rows", "readonly"], Ua = /* @__PURE__ */ y({
__name: "MTextArea",
props: {
id: {},
name: {},
modelValue: {},
placeholder: {},
isInvalid: { type: Boolean },
disabled: { type: Boolean },
rows: { default: 2 },
minLength: {},
maxLength: {},
readonly: { type: Boolean }
},
emits: ["update:modelValue"],
setup(o, { emit: a }) {
const t = o, e = v(() => ({
"is-invalid": t.isInvalid
})), i = a;
return (s, u) => (l(), n("textarea", k({
id: s.id,
class: ["mc-textarea", e.value],
"aria-invalid": s.isInvalid,
value: s.modelValue,
name: s.name,
placeholder: s.placeholder,
disabled: s.disabled,
minlength: s.minLength,
maxlength: s.maxLength,
rows: s.rows,
readonly: s.readonly
}, s.$attrs, {
onInput: u[0] || (u[0] = (r) => i("update:modelValue", r.target.value))
}), null, 16, Ga));
}
}), cs = /* @__PURE__ */ _(Ua, [["__scopeId", "data-v-8184b69c"]]), Da = {
key: 0,
class: "mc-text-input__icon"
}, Fa = ["id", "value", "type", "name", "placeholder", "disabled", "aria-invalid", "readonly"], Na = {
key: 1,
class: "mc-controls-options"
}, Ra = /* @__PURE__ */ y({
__name: "MTextInput",
props: {
id: {},
name: {},
modelValue: {},
placeholder: {},
inputType: { default: "text" },
isInvalid: { type: Boolean },
disabled: { type: Boolean },
size: { default: "m" },
readonly: { type: Boolean },
isClearable: { type: Boolean },
clearLabel: { default: "clear content" }
},
emits: ["update:modelValue"],
setup(o, { emit: a }) {
const t = o, e = v(() => ({
[`mc-text-input--${t.size}`]: t.size && t.size != "m",
"is-invalid": t.isInvalid
})), i = I(t.modelValue), s = () => {
i.value = "", u("update:modelValue", "");
}, u = a;
return (r, p) => (l(), n("div", {
class: $(["mc-text-input", e.value])
}, [
r.$slots.icon ? (l(), n("span", Da, [
g(r.$slots, "icon", {}, void 0, !0)
])) : h("", !0),
d("input", k({
id: r.id,
class: "mc-text-input__control",
value: i.value,
type: r.inputType,
name: r.name,
placeholder: r.placeholder,
disabled: r.disabled,
"aria-invalid": r.isInvalid,
readonly: r.readonly
}, r.$attrs, {
onInput: p[0] || (p[0] = (c) => u("update:modelValue", c.target.value))
}), null, 16, Fa),
r.isClearable && i.value ? (l(), n("div", Na, [
d("button", {
type: "button",
class: "mc-controls-options__button",
onClick: s
}, [
V(q, {
class: "mc-controls-options__icon",
"aria-hidden": "true"
}),
p[1] || (p[1] = d("span", { class: "mc-controls-options__label" }, "{clearLabel}", -1))
])
])) : h("", !0)
], 2));
}
}), us = /* @__PURE__ */ _(Ra, [["__scopeId", "data-v-38f67338"]]), Aa = ["for"], Ha = ["id", "name", "checked", "disabled"], Ea = ["for"], Qa = /* @__PURE__ */ y({
__name: "MToggle",
props: {
id: {},
name: {},
label: {},
modelValue: { type: Boolean },
size: { default: "s" },
disabled: { type: Boolean }
},
emits: ["update:modelValue"],
setup(o, { emit: a }) {
const t = o, e = v(() => ({
[`mc-toggle--${t.size}`]: t.size && t.size != "s"
})), i = a;
return (s, u) => (l(), n("div", {
class: $(["mc-toggle", e.value])
}, [
d("label", {
class: "mc-toggle__container",
for: s.id
}, [
d("input", k({
id: s.id,
type: "checkbox",
class: "mc-toggle__input",
name: s.name,
checked: s.modelValue,
disabled: s.disabled
}, s.$attrs, {
onChange: u[0] || (u[0] = (r) => i("update:modelValue", r.target.checked))
}), null, 16, Ha),
s.label ? (l(), n("span", {
key: 0,
for: s.id,
class: "mc-toggle__label"
}, f(s.label), 9, Ea)) : h("", !0)
], 8, Aa)
], 2));
}
}), Wa = /* @__PURE__ */ _(Qa, [["__scopeId", "data-v-5be734e7"]]), Ja = /* @__PURE__ */ y({
__name: "MToggleGroup",
props: {
name: {},
modelValue: {},
options: {},
inline: { type: Boolean }
},
emits: ["update:modelValue"],
setup(o, { emit: a }) {
const t = o, e = I([]);
O(
() => t.modelValue,
(p) => {
e.value = p || [];
},
{ immediate: !0 }
);
const i = (p, c) => {
let m = [...e.value];
p && !m.includes(c) ? m.push(c) : m = m.filter((b) => b !== c), r("update:modelValue", m), e.value = m;
}, s = v(() => ({
"mc-field__container--inline": t.inline
})), u = v(() => ({
"mc-field__container--inline__item": t.inline
})), r = a;
return (p, c) => (l(), n("div", {
class: $(s.value)
}, [
(l(!0), n(B, null, C(p.options, (m) => (l(), w(Wa, {
id: m.id,
key: m.id,
label: m.label,
"is-invalid": m.isInvalid,
name: p.name,
class: $(u.value),
"model-value": p.modelValue ? p.modelValue.includes(m.value) : void 0,
disabled: m.disabled,
"onUpdate:modelValue": (b) => i(b, m.value)
}, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "onUpdate:modelValue"]))), 128))
], 2));
}
}), ps = /* @__PURE__ */ _(Ja, [["__scopeId", "data-v-c6b10172"]]);
export {
Xa as MBadge,
Ya as MBreadcrumb,
ne as MButton,
ce as MCheckbox,
xa as MCheckboxGroup,
es as MField,
as as MFieldGroup,
ss as MIconButton,
A as MLink,
Y as MLoader,
ts as MOverlay,
ls as MPasswordInput,
ns as MQuantitySelector,
ta as MRadio,
os as MRadioGroup,
is as MSelect,
ds as MStatusBadge,
rs as MStatusNotification,
cs as MTextArea,
us as MTextInput,
Wa as MToggle,
ps as MToggleGroup
};
//# sourceMappingURL=mozaic-vue.js.map