maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
205 lines (204 loc) • 7.71 kB
JavaScript
import { defineComponent as A, defineAsyncComponent as c, useSlots as H, computed as r, ref as N, watch as T, openBlock as a, createElementBlock as n, normalizeClass as u, createBlock as p, resolveDynamicComponent as w, withModifiers as _, withCtx as f, renderSlot as i, createTextVNode as j, toDisplayString as E, createCommentVNode as s, unref as h, createVNode as $, mergeProps as P, createElementVNode as B, withDirectives as W, vShow as I } from "vue";
import '../assets/MazCard.BVy6g9-V.css';const R = {
key: 0,
class: "m-card__gallery__wrapper"
}, G = { class: "maz-min-w-0 maz-flex-1" }, L = {
key: 0,
class: "m-card__title"
}, q = {
key: 1,
class: "m-card__subtitle"
}, F = {
key: 2,
class: "m-card__content"
}, J = {
key: 2,
class: "m-card__actions maz-flex maz-p-2"
}, K = /* @__PURE__ */ A({
__name: "MazCard",
props: {
images: { default: void 0 },
orientation: { default: "column" },
href: { default: void 0 },
to: { default: void 0 },
hrefTarget: { default: "_self" },
footerAlign: { default: "right" },
galleryWidth: { default: 200 },
galleryHeight: { default: 150 },
zoom: { type: Boolean },
elevation: { type: Boolean, default: !0 },
radius: { type: Boolean, default: !0 },
bordered: { type: Boolean },
imagesShowCount: { default: 3 },
noRemaining: { type: Boolean, default: !0 },
scale: { type: Boolean, default: !0 },
wrapperClass: { default: void 0 },
noPadding: { type: Boolean },
overflowHidden: { type: Boolean },
collapsable: { type: Boolean },
collapsible: { type: Boolean },
collapseOpen: { type: Boolean },
header: { default: void 0 },
block: { type: Boolean }
},
setup(m) {
const o = m, v = c(() => import("./MazBtn.BcPKpdoJ.mjs")), g = c(() => import("./MazGallery.2XDJQmg_.mjs")), z = c(() => import("./MazTransitionExpand.DL0tmQvU.mjs")), S = c(() => import("./chevron-down.BkvtON3b.mjs")), M = H(), t = r(() => o.collapsible || o.collapsable), l = N(t.value ? o.collapseOpen : !0), k = r(() => o.href || o.to);
T(
() => o.collapseOpen,
(e) => {
t.value && (l.value = e);
}
);
const C = r(() => ({
is: o.href ? "a" : o.to ? "router-link" : "div",
...o.href && { href: o.href },
...o.to && { to: o.to },
target: o.hrefTarget
})), y = r(() => ["column", "column-reverse"].includes(o.orientation)), b = r(() => {
const e = /* @__PURE__ */ new Set(["default", "title", "subtitle", "content"]);
return Object.keys(M).some((d) => e.has(d));
}), O = r(() => b.value ? o.galleryWidth : "100%"), D = r(
() => o.footerAlign === "right" ? "maz-text-end" : "maz-text-start"
);
return (e, d) => (a(), n(
"div",
{
class: u(["m-card m-reset-css", [
{
"m-card--linked": k.value,
"m-card--no-scale": !e.scale,
"maz-elevation": e.elevation,
"--block": e.block,
"maz-overflow-hidden": e.overflowHidden || !l.value,
"maz-rounded": e.radius,
"maz-border maz-border-solid maz-border-color-light": e.bordered
}
]])
},
[
e.$slots.header || e.header || t.value ? (a(), p(w(t.value ? "button" : "div"), {
key: 0,
class: u(["m-card__header maz-border-b maz-border-solid", [
l.value ? "maz-rounded-t maz-border-color-light" : "maz-border-transparent",
{ "--is-collapsible": t.value },
{ "maz-justify-end": (!e.$slots.header || !e.header) && t.value },
{ "maz-justify-between": e.$slots.header || e.header }
]]),
tabindex: "-1",
onClick: d[1] || (d[1] = _((V) => t.value ? l.value = !l.value : void 0, ["stop"]))
}, {
default: f(() => [
e.$slots.header || e.header ? i(e.$slots, "header", { key: 0 }, () => [
j(
E(e.header),
1
/* TEXT */
)
], !0) : s("v-if", !0),
t.value ? (a(), p(h(v), {
key: 1,
color: "transparent",
class: "maz-ml-2 maz-text-sm",
size: "xs",
onClick: d[0] || (d[0] = _((V) => l.value = !l.value, ["stop"]))
}, {
default: f(() => [
$(h(S), {
class: u([{ "--is-open": l.value }, "m-card__collapse-icon maz-text-xl"])
}, null, 8, ["class"])
]),
_: 1
/* STABLE */
})) : s("v-if", !0)
]),
_: 3
/* FORWARDED */
}, 8, ["class"])) : s("v-if", !0),
(a(), p(w(C.value.is), P(C.value, {
class: ["m-card__wrapper", [`m-card__wrapper--${e.orientation}`, { "m-card__link": k.value }]]
}), {
default: f(() => [
e.images ? (a(), n("div", R, [
$(h(g), {
"no-radius": !e.radius,
width: O.value,
height: e.galleryHeight,
"images-shown-count": e.imagesShowCount,
images: e.images,
"no-zoom": !e.zoom,
"no-width": y.value,
"no-height": !y.value && b.value,
"no-remaining": e.noRemaining,
class: "m-card__gallery maz-flex-1"
}, null, 8, ["no-radius", "width", "height", "images-shown-count", "images", "no-zoom", "no-width", "no-height", "no-remaining"])
])) : s("v-if", !0),
B("div", G, [
(a(), p(w(t.value ? h(z) : "div"), { class: "maz-h-full" }, {
default: f(() => [
W(B(
"div",
{
class: u([[e.wrapperClass, { "maz-p-4": !e.noPadding && !t.value }], "m-card__content__wrapper maz-h-full"])
},
[
i(e.$slots, "default", {}, () => [
e.$slots.title ? (a(), n("div", L, [
i(e.$slots, "title", {}, void 0, !0)
])) : s("v-if", !0),
e.$slots.subtitle ? (a(), n("div", q, [
i(e.$slots, "subtitle", {}, void 0, !0)
])) : s("v-if", !0),
e.$slots.content ? (a(), n("div", F, [
i(e.$slots, "content", {}, void 0, !0)
])) : s("v-if", !0)
], !0)
],
2
/* CLASS */
), [
[I, l.value]
])
]),
_: 3
/* FORWARDED */
}))
])
]),
_: 3
/* FORWARDED */
}, 16, ["class"])),
e.$slots.footer ? (a(), n(
"div",
{
key: 1,
class: u(["m-card__footer maz-overflow-x-auto maz-p-3", [
{
"maz-border-t maz-border-color-light": y.value && b.value
},
D.value
]])
},
[
i(e.$slots, "footer", {}, void 0, !0)
],
2
/* CLASS */
)) : s("v-if", !0),
e.$slots.actions ? (a(), n("div", J, [
i(e.$slots, "actions", {}, void 0, !0)
])) : s("v-if", !0)
],
2
/* CLASS */
));
}
}), Q = (m, o) => {
const v = m.__vccOpts || m;
for (const [g, z] of o)
v[g] = z;
return v;
}, X = /* @__PURE__ */ Q(K, [["__scopeId", "data-v-493e914f"]]);
export {
X as M,
Q as _
};