@opensig/opendesign/es/button/OButton.vue.mjs

import { defineComponent, computed, useSlots, createBlock, openBlock, unref, normalizeStyle, normalizeClass, withCtx, createElementBlock, createCommentVNode, renderSlot, resolveDynamicComponent } from "vue";
import { defaultSize } from "../_utils/global.mjs";
import { IconLoading } from "../_utils/icons.mjs";
import { getRoundClass } from "../_utils/style-class.mjs";
import { buttonProps } from "./types.mjs";
import HtmlTag from "../_components/html-tag.mjs";
import { isEmptySlot } from "../_utils/vue-utils.mjs";
import { isUndefined } from "../_utils/is.mjs";
const _hoisted_1 = {
  key: 1,
  class: "o-btn-suffix"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "OButton",
  props: buttonProps,
  emits: ["click"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const tag = computed(() => props.href ? "a" : props.tag);
    const round = getRoundClass(props, "btn");
    const slots = useSlots();
    const isOnlyIcon = computed(() => isEmptySlot(slots.default) && (props.icon || slots.icon));
    const variant = computed(() => {
      if (isUndefined(props.variant) && isOnlyIcon.value) {
        return "text";
      }
      return props.variant || "outline";
    });
    const onClick = (e) => {
      if (props.disabled || props.loading) {
        e.preventDefault();
        return;
      }
      emit("click", e);
    };
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(HtmlTag), {
        tag: tag.value,
        href: props.href,
        type: tag.value === "button" ? "button" : "",
        class: normalizeClass(["o-btn", [
          `o-btn-${props.color}`,
          `o-btn-${props.size || unref(defaultSize)}`,
          `o-btn-${variant.value}`,
          unref(round).class.value,
          {
            "o-btn-icon-only": isOnlyIcon.value,
            "o-btn-disabled": props.disabled
          }
        ]]),
        style: normalizeStyle(unref(round).style.value),
        onClick
      }, {
        default: withCtx(() => [
          props.icon || slots.icon || props.loading ? (openBlock(), createElementBlock(
            "span",
            {
              key: 0,
              class: normalizeClass(["o-btn-prefix", { loading: props.loading }])
            },
            [
              props.loading ? (openBlock(), createBlock(unref(IconLoading), {
                key: 0,
                class: "o-rotating"
              })) : renderSlot(_ctx.$slots, "icon", { key: 1 }, () => [
                (openBlock(), createBlock(resolveDynamicComponent(props.icon)))
              ])
            ],
            2
            /* CLASS */
          )) : createCommentVNode("v-if", true),
          renderSlot(_ctx.$slots, "default"),
          slots.suffix ? (openBlock(), createElementBlock("span", _hoisted_1, [
            renderSlot(_ctx.$slots, "suffix")
          ])) : createCommentVNode("v-if", true)
        ]),
        _: 3
        /* FORWARDED */
      }, 8, ["tag", "href", "type", "class", "style"]);
    };
  }
});
export {
  _sfc_main as default
};