maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
182 lines (181 loc) • 9.08 kB
JavaScript
import { defineComponent, mergeModels, defineAsyncComponent, useSlots, useModel, computed, createElementBlock, openBlock, normalizeClass, createBlock, createCommentVNode, resolveDynamicComponent, withModifiers, withCtx, renderSlot, createTextVNode, toDisplayString, unref, createVNode, mergeProps, createElementVNode } from "vue";
import { MazChevronDown } from "@maz-ui/icons";
import { RouterLink } from "vue-router";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazCard.Dv02b2P6.css';const _hoisted_1 = {
key: 0,
class: "m-card__gallery__wrapper"
}, _hoisted_2 = { class: "maz-min-w-0 maz-flex-1" }, _hoisted_3 = {
key: 0,
class: "m-card__title"
}, _hoisted_4 = {
key: 1,
class: "m-card__subtitle"
}, _hoisted_5 = {
key: 2,
class: "m-card__content"
}, _hoisted_6 = {
key: 2,
class: "m-card__actions maz-flex maz-p-2"
}, _sfc_main = /* @__PURE__ */ defineComponent({
__name: "MazCard",
props: /* @__PURE__ */ mergeModels({
orientation: { default: "column" },
href: { default: () => {
} },
to: { default: () => {
} },
hrefTarget: { default: "_self" },
footerAlign: { default: "right" },
gallery: { default: () => {
} },
scale: { type: Boolean, default: !0 },
elevation: { type: Boolean, default: !1 },
radius: { type: Boolean, default: !0 },
bordered: { type: Boolean, default: !0 },
wrapperClass: { default: () => {
} },
padding: { type: Boolean, default: !0 },
overflowHidden: { type: Boolean },
collapsible: { type: Boolean, default: !1 },
collapseOpen: { type: Boolean, default: !1 },
title: { default: () => {
} },
block: { type: Boolean }
}, {
collapseOpen: { type: Boolean, default: !1 },
collapseOpenModifiers: {}
}),
emits: /* @__PURE__ */ mergeModels(["update:collapseOpen"], ["update:collapseOpen"]),
setup(__props) {
const DEFAULT_GALLERY_OPTIONS = {
displayedCount: 3,
remaining: !1,
zoom: !__props.href && !__props.to,
width: 200,
height: 150
}, MazBtn = defineAsyncComponent(() => import("./MazBtn.js")), MazGallery = defineAsyncComponent(() => import("./MazGallery.js")), MazExpandAnimation = defineAsyncComponent(() => import("./MazExpandAnimation.js")), slots = useSlots(), collapseOpenModel = useModel(__props, "collapseOpen");
collapseOpenModel.value = __props.collapsible ? __props.collapseOpen : !0;
const isColumnVariant = computed(() => ["column", "column-reverse"].includes(__props.orientation)), haveSomeContent = computed(() => {
const supportedSlots = /* @__PURE__ */ new Set(["default", "content-title", "content-subtitle", "content-body"]);
return Object.keys(slots).some((val) => supportedSlots.has(val));
}), galleryHeightComputed = computed(() => haveSomeContent.value ? __props.gallery?.height ?? DEFAULT_GALLERY_OPTIONS.height : "100%"), galleryWidthComputed = computed(() => haveSomeContent.value ? __props.gallery?.width ?? DEFAULT_GALLERY_OPTIONS.width : "100%"), galleryOptions = computed(() => ({
...DEFAULT_GALLERY_OPTIONS,
radius: __props.radius,
width: isColumnVariant.value ? !1 : galleryWidthComputed.value,
height: !isColumnVariant.value && haveSomeContent.value ? !1 : galleryHeightComputed.value,
...__props.gallery
})), wrapperData = computed(() => {
let componentType = "div";
return __props.href ? componentType = "a" : __props.to && (componentType = RouterLink), {
is: componentType,
...__props.href && { href: __props.href },
...__props.to && { to: __props.to },
target: __props.hrefTarget
};
}), footerAlignClass = computed(
() => __props.footerAlign === "right" ? "maz-text-end" : "maz-text-start"
), isLinked = computed(() => __props.href || __props.to);
function toggleCollapse() {
__props.collapsible && (collapseOpenModel.value = !collapseOpenModel.value);
}
return (_ctx, _cache) => (openBlock(), createElementBlock("div", {
class: normalizeClass(["m-card m-reset-css", [
{
"m-card--linked": isLinked.value,
"m-card--no-scale": !_ctx.scale,
"maz-shadow-elevation maz-drop-shadow-md": _ctx.elevation,
"--block": _ctx.block,
"maz-overflow-hidden": _ctx.overflowHidden || !collapseOpenModel.value,
"maz-rounded": _ctx.radius,
"maz-border maz-border-solid maz-border-divider": _ctx.bordered
}
]])
}, [
_ctx.$slots.title || _ctx.title || _ctx.collapsible ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.collapsible ? "button" : "div"), {
key: 0,
class: normalizeClass(["m-card__header maz-border-b maz-border-solid", [
collapseOpenModel.value ? "maz-rounded-t maz-border-divider" : "maz-border-transparent",
{ "--is-collapsible": _ctx.collapsible },
{ "maz-justify-end": (!_ctx.$slots.title || !_ctx.title) && _ctx.collapsible },
{ "maz-justify-between": _ctx.$slots.title || _ctx.title }
]]),
tabindex: "-1",
onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.collapsible ? toggleCollapse() : void 0, ["stop"]))
}, {
default: withCtx(() => [
_ctx.$slots.title || _ctx.title ? renderSlot(_ctx.$slots, "title", { key: 0 }, () => [
createTextVNode(toDisplayString(_ctx.title), 1)
], !0) : createCommentVNode("", !0),
_ctx.collapsible ? (openBlock(), createBlock(unref(MazBtn), {
key: 1,
color: "transparent",
class: "maz-ml-2 maz-text-sm",
size: "xs",
onClick: withModifiers(toggleCollapse, ["stop"])
}, {
default: withCtx(() => [
createVNode(unref(MazChevronDown), {
class: normalizeClass([{ "--is-open": collapseOpenModel.value }, "m-card__collapse-icon maz-text-xl"])
}, null, 8, ["class"])
]),
_: 1
})) : createCommentVNode("", !0)
]),
_: 3
}, 8, ["class"])) : createCommentVNode("", !0),
(openBlock(), createBlock(resolveDynamicComponent(wrapperData.value.is), mergeProps(wrapperData.value, {
class: ["m-card__wrapper", [`m-card__wrapper--${_ctx.orientation}`, { "m-card__link": isLinked.value }]]
}), {
default: withCtx(() => [
galleryOptions.value.images ? (openBlock(), createElementBlock("div", _hoisted_1, [
createVNode(unref(MazGallery), mergeProps(galleryOptions.value, { class: "m-card__gallery" }), null, 16)
])) : createCommentVNode("", !0),
createElementVNode("div", _hoisted_2, [
(openBlock(), createBlock(resolveDynamicComponent(_ctx.collapsible ? unref(MazExpandAnimation) : "div"), {
modelValue: collapseOpenModel.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => collapseOpenModel.value = $event),
class: "maz-h-full"
}, {
default: withCtx(() => [
createElementVNode("div", {
class: normalizeClass([[_ctx.wrapperClass, { "maz-p-4": _ctx.padding }], "m-card__content__wrapper"])
}, [
_ctx.$slots["content-title"] ? (openBlock(), createElementBlock("div", _hoisted_3, [
renderSlot(_ctx.$slots, "content-title", { collapseOpen: collapseOpenModel.value }, void 0, !0)
])) : createCommentVNode("", !0),
_ctx.$slots["content-subtitle"] ? (openBlock(), createElementBlock("div", _hoisted_4, [
renderSlot(_ctx.$slots, "content-subtitle", {}, void 0, !0)
])) : createCommentVNode("", !0),
_ctx.$slots["content-body"] ? (openBlock(), createElementBlock("div", _hoisted_5, [
renderSlot(_ctx.$slots, "content-body", {}, void 0, !0)
])) : createCommentVNode("", !0),
renderSlot(_ctx.$slots, "default", { collapseOpen: collapseOpenModel.value }, void 0, !0)
], 2)
]),
_: 3
}, 8, ["modelValue"]))
])
]),
_: 3
}, 16, ["class"])),
_ctx.$slots.footer ? (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass(["m-card__footer maz-overflow-x-auto maz-p-3", [
{
"maz-border-t maz-border-divider": isColumnVariant.value && haveSomeContent.value
},
footerAlignClass.value
]])
}, [
renderSlot(_ctx.$slots, "footer", {}, void 0, !0)
], 2)) : createCommentVNode("", !0),
_ctx.$slots.actions && galleryOptions.value.images ? (openBlock(), createElementBlock("div", _hoisted_6, [
renderSlot(_ctx.$slots, "actions", {}, void 0, !0)
])) : createCommentVNode("", !0)
], 2));
}
}), MazCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3f7d04f5"]]);
export {
MazCard as default
};