@shopware-ag/meteor-component-library/dist/common/MtButton.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-button.css';
"use strict";
const vue = require("vue");
const useIsInsideTooltip = require("../useIsInsideTooltip-f4674e27.js");
const MtLoader = require("./MtLoader.js");
const _pluginVue_exportHelper = require("../_plugin-vue_export-helper-9c783a34.js");
const _hoisted_1 = ["href", "tabindex"];
const _hoisted_2 = { class: "mt-button__content" };
const _hoisted_3 = { key: 0 };
const _hoisted_4 = { key: 1 };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "mt-button",
  props: {
    is: { default: "button" },
    disabled: { type: Boolean },
    variant: { default: "secondary" },
    ghost: { type: Boolean },
    size: { default: "small" },
    square: { type: Boolean },
    block: { type: Boolean },
    link: { default: void 0 },
    isLoading: { type: Boolean }
  },
  setup(__props) {
    const props = __props;
    const allowGhostVariant = vue.computed(
      () => props.ghost && props.variant !== "secondary" && props.variant !== "tertiary"
    );
    const buttonClasses = vue.computed(() => {
      return {
        [`mt-button--${props.variant}${allowGhostVariant.value ? "-ghost" : ""}`]: !!props.variant,
        [`mt-button--${props.size}`]: !!props.size,
        "mt-button--block": props.block,
        "mt-button--disabled": props.disabled,
        "mt-button--square": props.square
      };
    });
    const iconSize = vue.computed(() => props.size === "x-small" ? 8 : props.size === "large" ? 12 : 10);
    const isInsideTooltip = useIsInsideTooltip.useIsInsideTooltip();
    return (_ctx, _cache) => {
      return _ctx.link ? (vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({
        key: 0,
        href: _ctx.disabled || _ctx.isLoading ? "" : _ctx.link,
        target: "_blank",
        rel: "noopener",
        class: ["mt-button", buttonClasses.value],
        tabindex: (_ctx.disabled || _ctx.isLoading) && !vue.unref(isInsideTooltip) ? -1 : 0
      }, _ctx.$attrs), [
        vue.createElementVNode("span", _hoisted_2, [
          _ctx.$slots.iconFront ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, [
            vue.renderSlot(_ctx.$slots, "iconFront", { size: iconSize.value }, void 0, true)
          ])) : vue.createCommentVNode("", true),
          vue.renderSlot(_ctx.$slots, "default", {}, void 0, true),
          _ctx.$slots.iconBack ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, [
            vue.renderSlot(_ctx.$slots, "iconBack", { size: iconSize.value }, void 0, true)
          ])) : vue.createCommentVNode("", true)
        ])
      ], 16, _hoisted_1)) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.is), vue.mergeProps({
        key: 1,
        type: "button",
        class: ["mt-button", buttonClasses.value],
        disabled: _ctx.disabled && !vue.unref(isInsideTooltip) || _ctx.isLoading,
        "aria-disabled": _ctx.disabled && vue.unref(isInsideTooltip),
        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.disabled && vue.unref(isInsideTooltip) ? $event.stopImmediatePropagation() : null)
      }, _ctx.$attrs), {
        default: vue.withCtx(() => [
          _ctx.isLoading ? (vue.openBlock(), vue.createBlock(MtLoader, {
            key: 0,
            size: "16px",
            class: "mt-button__loader"
          })) : vue.createCommentVNode("", true),
          vue.createElementVNode("span", {
            class: vue.normalizeClass(["mt-button__content", {
              "mt-button__content--hidden": _ctx.isLoading
            }])
          }, [
            _ctx.$slots.iconFront ? vue.renderSlot(_ctx.$slots, "iconFront", {
              key: 0,
              size: iconSize.value
            }, void 0, true) : vue.createCommentVNode("", true),
            vue.renderSlot(_ctx.$slots, "default", {}, void 0, true),
            _ctx.$slots.iconBack ? vue.renderSlot(_ctx.$slots, "iconBack", {
              key: 1,
              size: iconSize.value
            }, void 0, true) : vue.createCommentVNode("", true)
          ], 2)
        ]),
        _: 3
      }, 16, ["class", "disabled", "aria-disabled"]));
    };
  }
});
const mtButton_vue_vue_type_style_index_0_scoped_a32d308c_lang = "";
const MtButton = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-a32d308c"]]);
module.exports = MtButton;
//# sourceMappingURL=MtButton.js.map