@shopware-ag/meteor-component-library/dist/common/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';
"use strict";
const vue = require("vue");
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");
const _hoisted_1 = { class: "mt-banner__message" };
const _hoisted_2 = ["aria-label"];
const _sfc_main = /* @__PURE__ */ vue.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 } = vueI18n.useI18n({
      messages: {
        de: {
          close: "Schließen"
        },
        en: {
          close: "Close"
        }
      }
    });
    const props = __props;
    const bannerIcon = vue.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.useFutureFlags();
    const classes = vue.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 = vue.computed(() => ({
      "mt-banner__body--icon": !props.hideIcon,
      "mt-banner__body--closable": props.closable
    }));
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", {
        class: vue.normalizeClass(classes.value),
        role: "banner"
      }, [
        vue.renderSlot(_ctx.$slots, "customIcon", {}, () => [
          !_ctx.hideIcon ? (vue.openBlock(), vue.createBlock(mtIcon_vue_vue_type_style_index_0_lang._sfc_main, {
            key: 0,
            size: "var(--scale-size-20)",
            class: "mt-banner__icon",
            name: bannerIcon.value,
            decorative: ""
          }, null, 8, ["name"])) : vue.createCommentVNode("", true)
        ], true),
        vue.createElementVNode("div", {
          class: vue.normalizeClass(["mt-banner__body", bodyClasses.value])
        }, [
          _ctx.title ? (vue.openBlock(), vue.createBlock(MtText, {
            key: 0,
            as: "h3",
            weight: "bold",
            size: "xs",
            class: "mt-banner__title"
          }, {
            default: vue.withCtx(() => [
              vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
            ]),
            _: 1
          })) : vue.createCommentVNode("", true),
          vue.createElementVNode("div", _hoisted_1, [
            vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
          ])
        ], 2),
        _ctx.closable ? (vue.openBlock(), vue.createElementBlock("button", {
          key: 0,
          class: "mt-banner__close",
          "aria-label": vue.unref(t)("close"),
          onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => _ctx.$emit("close", _ctx.bannerIndex), ["prevent"]))
        }, [
          vue.createVNode(mtIcon_vue_vue_type_style_index_0_lang._sfc_main, { name: "solid-times-s" })
        ], 8, _hoisted_2)) : vue.createCommentVNode("", true)
      ], 2);
    };
  }
});
const mtBanner_vue_vue_type_style_index_0_scoped_3cdb0c0e_lang = "";
const mtBanner = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-3cdb0c0e"]]);
module.exports = mtBanner;
//# sourceMappingURL=MtBanner.js.map