@shopware-ag/meteor-component-library/dist/esm/MtCard.js

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

import '../mt-card.css';
import { defineComponent, useSlots, computed, openBlock, createElementBlock, Fragment, renderSlot, createElementVNode, mergeProps, normalizeClass, createBlock, withCtx, createTextVNode, toDisplayString, createCommentVNode, unref, createVNode } from "vue";
import { _ as _sfc_main$2 } from "../mt-context-button.vue_vue_type_style_index_0_lang-08ff766e.mjs";
import MtLoader from "./MtLoader.js";
import { _ as _sfc_main$1 } from "../mt-icon.vue_vue_type_style_index_0_lang-2cc5f73e.mjs";
import MtText from "./MtText.js";
import { u as useFutureFlags } from "../useFutureFlags-2be3e179.mjs";
import { useI18n } from "vue-i18n";
import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.mjs";
import "./MtPopover.js";
import "./MtCheckbox.js";
import "../mt-base-field-7a978dcf.mjs";
import "./MtInheritanceSwitch.js";
import "./MtTooltip.js";
import "../floating-ui.vue-fe27ebef.mjs";
import "../floating-ui.dom-f450fda4.mjs";
import "../useIsInsideTooltip-0c3bd290.mjs";
import "../index-221bad05.mjs";
import "./MtFieldCopyable.js";
import "../tooltip.directive-a5042569.mjs";
import "../id-1e5b8276.mjs";
import "./MtHelpText.js";
import "./MtFieldError.js";
import "../mt-switch.vue_vue_type_style_index_0_lang-e05ec27a.mjs";
import "./MtFieldLabel.js";
import "./MtPopoverItem.js";
import "./MtButton.js";
import "./MtSmoothReflow.js";
import "../_commonjsHelpers-7a77ea84.mjs";
import "../mt-floating-ui.vue_vue_type_style_index_0_lang-c9aba54c.mjs";
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__ */ 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 } = useI18n({
      messages: {
        en: {
          disableInheritance: "Disable inheritance",
          enableInheritance: "Enable inheritance"
        },
        de: {
          disableInheritance: "Vererbung deaktivieren",
          enableInheritance: "Vererbung aktivieren"
        }
      }
    });
    const slots = useSlots();
    const showHeader = computed(
      () => !!props.title || !!slots.title || !!props.subtitle || !!slots.subtitle || !!slots.avatar
    );
    const futureFlags = useFutureFlags();
    const cardClasses = 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 openBlock(), createElementBlock(Fragment, null, [
        renderSlot(_ctx.$slots, "before-card", {}, void 0, true),
        createElementVNode("article", mergeProps({
          class: ["mt-card", cardClasses.value],
          "aria-label": _ctx.title
        }, _ctx.$attrs), [
          showHeader.value ? (openBlock(), createElementBlock("header", _hoisted_2, [
            createElementVNode("div", _hoisted_3, [
              renderSlot(_ctx.$slots, "avatar", {}, void 0, true)
            ]),
            createElementVNode("div", {
              class: normalizeClass([
                "mt-card__titles",
                {
                  "mt-card__titles--has-inheritance-toggle": props.inheritance !== void 0
                }
              ])
            }, [
              renderSlot(_ctx.$slots, "title", {}, () => [
                _ctx.title ? (openBlock(), createBlock(MtText, {
                  key: 0,
                  as: "h3",
                  weight: "semibold",
                  size: "m",
                  class: "mt-card__title"
                }, {
                  default: withCtx(() => [
                    createTextVNode(toDisplayString(_ctx.title), 1)
                  ]),
                  _: 1
                })) : createCommentVNode("", true)
              ], true),
              renderSlot(_ctx.$slots, "subtitle", {}, () => [
                _ctx.subtitle ? (openBlock(), createBlock(MtText, {
                  key: 0,
                  color: "color-text-secondary-default",
                  size: "xs",
                  class: "mt-card__subtitle"
                }, {
                  default: withCtx(() => [
                    createTextVNode(toDisplayString(_ctx.subtitle), 1)
                  ]),
                  _: 1
                })) : createCommentVNode("", true)
              ], true),
              _ctx.inheritance !== void 0 ? (openBlock(), createElementBlock("button", {
                key: 0,
                type: "button",
                class: "mt-card__inheritance-toggle",
                "aria-label": !!_ctx.inheritance ? unref(t)("disableInheritance") : unref(t)("enableInheritance"),
                style: { "grid-area": "inheritance" },
                onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:inheritance", !_ctx.inheritance))
              }, [
                createVNode(_sfc_main$1, {
                  name: _ctx.inheritance ? "regular-link-horizontal" : "regular-link-horizontal-slash",
                  size: "1.25rem"
                }, null, 8, ["name"])
              ], 8, _hoisted_4)) : createCommentVNode("", true)
            ], 2),
            createElementVNode("div", _hoisted_5, [
              renderSlot(_ctx.$slots, "headerRight", {}, void 0, true)
            ]),
            !!_ctx.$slots["context-actions"] ? (openBlock(), createElementBlock("div", _hoisted_6, [
              createVNode(_sfc_main$2, null, {
                default: withCtx(() => [
                  renderSlot(_ctx.$slots, "context-actions", {}, void 0, true)
                ]),
                _: 3
              })
            ])) : createCommentVNode("", true)
          ])) : createCommentVNode("", true),
          createElementVNode("div", _hoisted_7, [
            renderSlot(_ctx.$slots, "tabs", {}, void 0, true)
          ]),
          createElementVNode("div", _hoisted_8, [
            renderSlot(_ctx.$slots, "toolbar", {}, void 0, true)
          ]),
          createElementVNode("div", _hoisted_9, [
            renderSlot(_ctx.$slots, "default", {}, void 0, true),
            renderSlot(_ctx.$slots, "grid", { title: _ctx.title }, void 0, true),
            _ctx.isLoading ? (openBlock(), createBlock(MtLoader, { key: 0 })) : createCommentVNode("", true)
          ]),
          createElementVNode("footer", _hoisted_10, [
            renderSlot(_ctx.$slots, "footer", {}, void 0, true)
          ])
        ], 16, _hoisted_1),
        renderSlot(_ctx.$slots, "after-card", {}, void 0, true)
      ], 64);
    };
  }
});
const mtCard_vue_vue_type_style_index_0_scoped_4055cf93_lang = "";
const MtCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4055cf93"]]);
export {
  MtCard as default
};
//# sourceMappingURL=MtCard.js.map