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