@shopware-ag/meteor-component-library
Version:
The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).
181 lines (180 loc) • 7.78 kB
JavaScript
import '../mt-card.css';
"use strict";
const vue = require("vue");
const mtContextButton_vue_vue_type_style_index_0_lang = require("../mt-context-button.vue_vue_type_style_index_0_lang-8afa3ed1.js");
const MtLoader = require("./MtLoader.js");
const mtIcon_vue_vue_type_style_index_0_lang = require("../mt-icon.vue_vue_type_style_index_0_lang-0a28c7b6.js");
const MtText = require("./MtText.js");
const useFutureFlags = require("../useFutureFlags-35232480.js");
const vueI18n = require("vue-i18n");
const _pluginVue_exportHelper = require("../_plugin-vue_export-helper-9c783a34.js");
require("./MtPopover.js");
require("./MtCheckbox.js");
require("../mt-base-field-6a3a56a0.js");
require("./MtInheritanceSwitch.js");
require("./MtTooltip.js");
require("../floating-ui.vue-48d5c774.js");
require("../floating-ui.dom-fe395b67.js");
require("../useIsInsideTooltip-f4674e27.js");
require("../index-ab705c2a.js");
require("./MtFieldCopyable.js");
require("../tooltip.directive-7b51326d.js");
require("../id-8e80f112.js");
require("./MtHelpText.js");
require("./MtFieldError.js");
require("../mt-switch.vue_vue_type_style_index_0_lang-fb6defc7.js");
require("./MtFieldLabel.js");
require("./MtPopoverItem.js");
require("./MtButton.js");
require("./MtSmoothReflow.js");
require("../_commonjsHelpers-2cbbddc8.js");
require("../mt-floating-ui.vue_vue_type_style_index_0_lang-1a484bca.js");
const _hoisted_1 = ["aria-label"];
const _hoisted_2 = {
key: 0,
class: "mt-card__header"
};
const _hoisted_3 = { class: "mt-card__avatar" };
const _hoisted_4 = ["aria-label"];
const _hoisted_5 = { class: "mt-card__titles-right-slot" };
const _hoisted_6 = {
key: 0,
class: "mt-card__context-menu"
};
const _hoisted_7 = { class: "mt-card__tabs" };
const _hoisted_8 = { class: "mt-card__toolbar" };
const _hoisted_9 = { class: "mt-card__content" };
const _hoisted_10 = { class: "mt-card__footer" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "mt-card",
props: {
title: {},
subtitle: {},
isLoading: { type: Boolean },
large: { type: Boolean },
inheritance: { type: Boolean, default: void 0 }
},
emits: ["update:inheritance"],
setup(__props) {
const props = __props;
const { t } = vueI18n.useI18n({
messages: {
en: {
disableInheritance: "Disable inheritance",
enableInheritance: "Enable inheritance"
},
de: {
disableInheritance: "Vererbung deaktivieren",
enableInheritance: "Vererbung aktivieren"
}
}
});
const slots = vue.useSlots();
const showHeader = vue.computed(
() => !!props.title || !!slots.title || !!props.subtitle || !!slots.subtitle || !!slots.avatar
);
const futureFlags = useFutureFlags.useFutureFlags();
const cardClasses = vue.computed(() => ({
"mt-card--grid": !!slots.grid,
"mt-card--large": props.large,
"mt-card--has-footer": !!slots.footer,
"mt-card--is-inherited": !!props.inheritance,
"mt-card--future-ignore-max-width": futureFlags.removeCardWidth,
"mt-card--future-remove-default-margin": futureFlags.removeDefaultMargin
}));
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
vue.renderSlot(_ctx.$slots, "before-card", {}, void 0, true),
vue.createElementVNode("article", vue.mergeProps({
class: ["mt-card", cardClasses.value],
"aria-label": _ctx.title
}, _ctx.$attrs), [
showHeader.value ? (vue.openBlock(), vue.createElementBlock("header", _hoisted_2, [
vue.createElementVNode("div", _hoisted_3, [
vue.renderSlot(_ctx.$slots, "avatar", {}, void 0, true)
]),
vue.createElementVNode("div", {
class: vue.normalizeClass([
"mt-card__titles",
{
"mt-card__titles--has-inheritance-toggle": props.inheritance !== void 0
}
])
}, [
vue.renderSlot(_ctx.$slots, "title", {}, () => [
_ctx.title ? (vue.openBlock(), vue.createBlock(MtText, {
key: 0,
as: "h3",
weight: "semibold",
size: "m",
class: "mt-card__title"
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
]),
_: 1
})) : vue.createCommentVNode("", true)
], true),
vue.renderSlot(_ctx.$slots, "subtitle", {}, () => [
_ctx.subtitle ? (vue.openBlock(), vue.createBlock(MtText, {
key: 0,
color: "color-text-secondary-default",
size: "xs",
class: "mt-card__subtitle"
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(_ctx.subtitle), 1)
]),
_: 1
})) : vue.createCommentVNode("", true)
], true),
_ctx.inheritance !== void 0 ? (vue.openBlock(), vue.createElementBlock("button", {
key: 0,
type: "button",
class: "mt-card__inheritance-toggle",
"aria-label": !!_ctx.inheritance ? vue.unref(t)("disableInheritance") : vue.unref(t)("enableInheritance"),
style: { "grid-area": "inheritance" },
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:inheritance", !_ctx.inheritance))
}, [
vue.createVNode(mtIcon_vue_vue_type_style_index_0_lang._sfc_main, {
name: _ctx.inheritance ? "regular-link-horizontal" : "regular-link-horizontal-slash",
size: "1.25rem"
}, null, 8, ["name"])
], 8, _hoisted_4)) : vue.createCommentVNode("", true)
], 2),
vue.createElementVNode("div", _hoisted_5, [
vue.renderSlot(_ctx.$slots, "headerRight", {}, void 0, true)
]),
!!_ctx.$slots["context-actions"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
vue.createVNode(mtContextButton_vue_vue_type_style_index_0_lang._sfc_main, null, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "context-actions", {}, void 0, true)
]),
_: 3
})
])) : vue.createCommentVNode("", true)
])) : vue.createCommentVNode("", true),
vue.createElementVNode("div", _hoisted_7, [
vue.renderSlot(_ctx.$slots, "tabs", {}, void 0, true)
]),
vue.createElementVNode("div", _hoisted_8, [
vue.renderSlot(_ctx.$slots, "toolbar", {}, void 0, true)
]),
vue.createElementVNode("div", _hoisted_9, [
vue.renderSlot(_ctx.$slots, "default", {}, void 0, true),
vue.renderSlot(_ctx.$slots, "grid", { title: _ctx.title }, void 0, true),
_ctx.isLoading ? (vue.openBlock(), vue.createBlock(MtLoader, { key: 0 })) : vue.createCommentVNode("", true)
]),
vue.createElementVNode("footer", _hoisted_10, [
vue.renderSlot(_ctx.$slots, "footer", {}, void 0, true)
])
], 16, _hoisted_1),
vue.renderSlot(_ctx.$slots, "after-card", {}, void 0, true)
], 64);
};
}
});
const mtCard_vue_vue_type_style_index_0_scoped_4055cf93_lang = "";
const MtCard = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-4055cf93"]]);
module.exports = MtCard;
//# sourceMappingURL=MtCard.js.map