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