import { defineComponent, useAttrs, ref, computed, createBlock, openBlock, unref, mergeProps, createSlots, withCtx, renderSlot, createElementBlock, createCommentVNode, toDisplayString, normalizeStyle } from 'vue';
import { Button } from 'ant-design-vue';
import '../../index.mjs';
import '../../../utils/index.mjs';
import { omit } from 'lodash-es';
import { buttonProps } from './button.mjs';
import { createNamespace } from '../../../utils/create-namespace.mjs';
import { LlIcon } from '../../icon/index.mjs';

"use strict";
const _hoisted_1 = { key: 0 };
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{ name: "LlButton" },
  __name: "button",
  props: buttonProps,
  emits: ["mouseenter", "mouseleave"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const bem = createNamespace("button");
    const attrs = useAttrs();
    const btnRef = ref();
    const isHovered = ref(false);
    const getBindValue = computed(() => {
      return omit({ ...attrs }, ["class"]);
    });
    const handleHover = (v) => {
      emits(v ? "mouseenter" : "mouseleave");
      if (props.useCustomStyle) {
        isHovered.value = v;
      }
    };
    const customStyle = computed(() => {
      if (!props.useCustomStyle) return {};
      const baseStyle = {
        border: `1px solid var(--btn-gray-bg)`,
        "box-shadow": `0 2px 0 rgba(0, 0, 0, 0.02)`
      };
      if (props.disabled) {
        return {
          color: "#c9cdd4",
          "border-color": "var(--color-border)",
          "background-color": "rgba(0, 0, 0, 0.04)",
          "box-shadow": "none"
        };
      } else if (isHovered.value) {
        return {
          ...baseStyle,
          "background-color": props.hoverBgColor || `var(--btn-gray-bg-hover)`,
          color: props.hoverColor || `var(--color-text)`
        };
      } else {
        return {
          ...baseStyle,
          "background-color": props.bgColor || `var(--btn-gray-bg)`,
          color: props.color || `var(--color-text)`
        };
      }
    });
    const blur = () => {
      btnRef.value.blur();
    };
    __expose({ blur });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(Button), mergeProps({
        ref_key: "btnRef",
        ref: btnRef,
        class: [
          unref(bem).b(),
          _ctx.useCustomStyle ? unref(bem).is("btn-custom") : "",
          _ctx.isBlock ? unref(bem).is("block") : ""
        ]
      }, getBindValue.value, {
        type: _ctx.useCustomStyle ? "primary" : _ctx.type,
        disabled: _ctx.disabled,
        style: { gap: `${props.iconSpace}px`, ...customStyle.value },
        onMouseenter: _cache[0] || (_cache[0] = ($event) => handleHover(true)),
        onMouseleave: _cache[1] || (_cache[1] = ($event) => handleHover(false))
      }), createSlots({
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default", {}, () => [
            _ctx.label ? (openBlock(), createElementBlock(
              "span",
              _hoisted_1,
              toDisplayString(_ctx.label),
              1
              /* TEXT */
            )) : createCommentVNode("v-if", true)
          ])
        ]),
        _: 2
        /* DYNAMIC */
      }, [
        props.icon.iconName || _ctx.$slots.icon ? {
          name: "icon",
          fn: withCtx(() => [
            _ctx.$slots.icon ? renderSlot(_ctx.$slots, "icon", { key: 0 }) : (openBlock(), createBlock(unref(LlIcon), {
              key: 1,
              style: normalizeStyle({ order: _ctx.iconDirection === "left" ? 0 : 1 }),
              "icon-name": _ctx.icon.iconName,
              color: _ctx.icon.color,
              size: _ctx.icon.size
            }, null, 8, ["style", "icon-name", "color", "size"]))
          ]),
          key: "0"
        } : void 0
      ]), 1040, ["class", "type", "disabled", "style"]);
    };
  }
});

export { _sfc_main as default };
//# sourceMappingURL=button.vue2.mjs.map
