@shopware-ag/meteor-component-library/dist/common/MtEmptyState.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-empty-state.css';
"use strict";
const vue = require("vue");
const MtButton = require("./MtButton.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 MtLink = require("./MtLink.js");
const _pluginVue_exportHelper = require("../_plugin-vue_export-helper-9c783a34.js");
require("../useIsInsideTooltip-f4674e27.js");
require("./MtLoader.js");
const _hoisted_1 = { class: "mt-empty-state__icon" };
const _hoisted_2 = {
  key: 1,
  class: "mt-empty-state__button"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "mt-empty-state",
  props: {
    headline: {},
    description: {},
    icon: {},
    linkHref: {},
    linkText: {},
    linkType: { default: "internal" },
    buttonText: {},
    centered: { type: Boolean, default: false }
  },
  emits: ["button-click"],
  setup(__props) {
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", {
        class: vue.normalizeClass(["mt-empty-state", { "mt-empty-state--left-aligned": !_ctx.centered }])
      }, [
        vue.createElementVNode("div", _hoisted_1, [
          vue.createVNode(mtIcon_vue_vue_type_style_index_0_lang._sfc_main, {
            name: _ctx.icon,
            color: "var(--color-icon-primary-default)",
            "aria-hidden": "true"
          }, null, 8, ["name"])
        ]),
        vue.createVNode(MtText, {
          as: "h2",
          size: "l",
          weight: "bold",
          class: "mt-empty-state__headline"
        }, {
          default: vue.withCtx(() => [
            vue.createTextVNode(vue.toDisplayString(_ctx.headline), 1)
          ]),
          _: 1
        }),
        vue.createVNode(MtText, {
          size: "xs",
          color: "color-text-secondary-default",
          class: "mt-empty-state__description"
        }, {
          default: vue.withCtx(() => [
            vue.createTextVNode(vue.toDisplayString(_ctx.description), 1)
          ]),
          _: 1
        }),
        _ctx.linkHref && _ctx.linkText ? (vue.openBlock(), vue.createBlock(MtLink, {
          key: 0,
          href: _ctx.linkHref,
          class: "mt-empty-state__link",
          type: _ctx.linkType,
          target: _ctx.linkType === "external" ? "_blank" : "_self",
          as: "a"
        }, {
          default: vue.withCtx(() => [
            vue.createTextVNode(vue.toDisplayString(_ctx.linkText), 1)
          ]),
          _: 1
        }, 8, ["href", "type", "target"])) : vue.createCommentVNode("", true),
        _ctx.buttonText || _ctx.$slots.button ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
          vue.renderSlot(_ctx.$slots, "button", {}, () => [
            vue.createVNode(MtButton, {
              variant: "primary",
              onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("button-click"))
            }, {
              default: vue.withCtx(() => [
                vue.createVNode(mtIcon_vue_vue_type_style_index_0_lang._sfc_main, { name: "solid-plus-circle-s" }),
                vue.createTextVNode(" " + vue.toDisplayString(_ctx.buttonText) + " ", 1),
                vue.createVNode(mtIcon_vue_vue_type_style_index_0_lang._sfc_main, {
                  name: "solid-long-arrow-right",
                  size: "16px"
                })
              ]),
              _: 1
            })
          ], true)
        ])) : vue.createCommentVNode("", true)
      ], 2);
    };
  }
});
const mtEmptyState_vue_vue_type_style_index_0_scoped_cb543aff_lang = "";
const MtEmptyState = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-cb543aff"]]);
module.exports = MtEmptyState;
//# sourceMappingURL=MtEmptyState.js.map