@shopware-ag/meteor-component-library/dist/esm/MtBanner.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-banner.css';
import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, renderSlot, createBlock, createCommentVNode, createElementVNode, withCtx, createTextVNode, toDisplayString, unref, withModifiers, createVNode } from "vue";
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";
const _hoisted_1 = { class: "mt-banner__message" };
const _hoisted_2 = ["aria-label"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "mt-banner",
  props: {
    variant: { default: "neutral" },
    title: {},
    hideIcon: { type: Boolean, default: false },
    closable: { type: Boolean, default: false },
    bannerIndex: {},
    icon: {}
  },
  emits: ["close"],
  setup(__props) {
    const { t } = useI18n({
      messages: {
        de: {
          close: "Schließen"
        },
        en: {
          close: "Close"
        }
      }
    });
    const props = __props;
    const bannerIcon = computed(() => {
      if (props.icon)
        return props.icon;
      const iconConfig = {
        neutral: "solid-info-circle",
        info: "solid-info-circle",
        attention: "solid-exclamation-triangle",
        critical: "solid-exclamation-circle",
        positive: "solid-check-circle",
        inherited: "solid-link"
      };
      return iconConfig[props.variant] || "solid-info-circle";
    });
    const future = useFutureFlags();
    const classes = computed(() => [
      "mt-banner",
      `mt-banner--${props.variant}`,
      {
        "mt-banner--future-remove-default-margin": future.removeDefaultMargin,
        "mt-banner--icon": !props.hideIcon,
        "mt-banner--closable": props.closable
      }
    ]);
    const bodyClasses = computed(() => ({
      "mt-banner__body--icon": !props.hideIcon,
      "mt-banner__body--closable": props.closable
    }));
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(classes.value),
        role: "banner"
      }, [
        renderSlot(_ctx.$slots, "customIcon", {}, () => [
          !_ctx.hideIcon ? (openBlock(), createBlock(_sfc_main$1, {
            key: 0,
            size: "var(--scale-size-20)",
            class: "mt-banner__icon",
            name: bannerIcon.value,
            decorative: ""
          }, null, 8, ["name"])) : createCommentVNode("", true)
        ], true),
        createElementVNode("div", {
          class: normalizeClass(["mt-banner__body", bodyClasses.value])
        }, [
          _ctx.title ? (openBlock(), createBlock(MtText, {
            key: 0,
            as: "h3",
            weight: "bold",
            size: "xs",
            class: "mt-banner__title"
          }, {
            default: withCtx(() => [
              createTextVNode(toDisplayString(_ctx.title), 1)
            ]),
            _: 1
          })) : createCommentVNode("", true),
          createElementVNode("div", _hoisted_1, [
            renderSlot(_ctx.$slots, "default", {}, void 0, true)
          ])
        ], 2),
        _ctx.closable ? (openBlock(), createElementBlock("button", {
          key: 0,
          class: "mt-banner__close",
          "aria-label": unref(t)("close"),
          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.$emit("close", _ctx.bannerIndex), ["prevent"]))
        }, [
          createVNode(_sfc_main$1, { name: "solid-times-s" })
        ], 8, _hoisted_2)) : createCommentVNode("", true)
      ], 2);
    };
  }
});
const mtBanner_vue_vue_type_style_index_0_scoped_3cdb0c0e_lang = "";
const mtBanner = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3cdb0c0e"]]);
export {
  mtBanner as default
};
//# sourceMappingURL=MtBanner.js.map