import { defineComponent, ref, inject, computed, Text } from 'vue';
import { useCssVar } from '@vueuse/core';
import { ElIcon } from '../../icon/index.mjs';
import '../../../hooks/index.mjs';
import '../../../tokens/index.mjs';
import { Loading } from '@element-plus/icons';
import { darken, lighten } from '../../../utils/color.mjs';
import { buttonProps, buttonEmits } from './button.mjs';
import { buttonGroupContextKey } from '../../../tokens/button.mjs';
import { useGlobalConfig } from '../../../hooks/use-global-config/index.mjs';
import { useFormItem } from '../../../hooks/use-form-item/index.mjs';

var script = defineComponent({
  name: "ElButton",
  components: {
    ElIcon,
    Loading
  },
  props: buttonProps,
  emits: buttonEmits,
  setup(props, { emit, slots }) {
    const buttonRef = ref();
    const buttonGroupContext = inject(buttonGroupContextKey, void 0);
    const globalConfig = useGlobalConfig();
    const autoInsertSpace = computed(() => {
      var _a;
      return (_a = props.autoInsertSpace) != null ? _a : globalConfig == null ? void 0 : globalConfig.button.autoInsertSpace;
    });
    const shouldAddSpace = computed(() => {
      var _a;
      const defaultSlot = (_a = slots.default) == null ? void 0 : _a.call(slots);
      if (autoInsertSpace.value && (defaultSlot == null ? void 0 : defaultSlot.length) === 1) {
        const slot = defaultSlot[0];
        if ((slot == null ? void 0 : slot.type) === Text) {
          const text = slot.children;
          return /^\p{Unified_Ideograph}{2}$/u.test(text);
        }
      }
      return false;
    });
    const {
      form,
      size: buttonSize,
      disabled: buttonDisabled
    } = useFormItem({
      size: computed(() => buttonGroupContext == null ? void 0 : buttonGroupContext.size)
    });
    const buttonType = computed(() => props.type || (buttonGroupContext == null ? void 0 : buttonGroupContext.type) || "default");
    const typeColor = useCssVar(`--el-color-${props.type}`);
    const buttonStyle = computed(() => {
      let styles = {};
      const buttonColor = props.color || typeColor.value;
      if (buttonColor) {
        const darkenBgColor = darken(buttonColor, 0.2);
        if (props.plain) {
          styles = {
            "--el-button-bg-color": lighten(buttonColor, 0.9),
            "--el-button-text-color": buttonColor,
            "--el-button-border-color": buttonColor,
            "--el-button-hover-text-color": "var(--el-color-white)",
            "--el-button-hover-bg-color": buttonColor,
            "--el-button-hover-border-color": buttonColor,
            "--el-button-active-bg-color": darkenBgColor,
            "--el-button-active-text-color": "var(--el-color-white)",
            "--el-button-active-border-color": darkenBgColor,
            "--el-button-disabled-bg-color": lighten(buttonColor, 0.9),
            "--el-button-disabled-border-color": lighten(buttonColor, 0.5),
            "--el-button-disabled-text-color": lighten(buttonColor, 0.5)
          };
        } else if (props.border) {
          styles = {
            "--el-button-bg-color": "var(--el-color-white)",
            "--el-button-text-color": buttonColor,
            "--el-button-border-color": buttonColor,
            "--el-button-hover-text-color": buttonColor,
            "--el-button-hover-bg-color": lighten(buttonColor, 0.9),
            "--el-button-hover-border-color": buttonColor,
            "--el-button-active-text-color": "var(--el-color-white)",
            "--el-button-active-bg-color": buttonColor,
            "--el-button-active-border-color": buttonColor,
            "--el-button-disabled-bg-color": "var(--el-color-white)",
            "--el-button-disabled-border-color": lighten(buttonColor, 0.5),
            "--el-button-disabled-text-color": lighten(buttonColor, 0.5)
          };
        } else {
          const lightenBgColor = lighten(buttonColor, 0.2);
          styles = {
            "--el-button-bg-color": buttonColor,
            "--el-button-text-color": "var(--el-color-white)",
            "--el-button-border-color": buttonColor,
            "--el-button-hover-text-color": "var(--el-color-white)",
            "--el-button-hover-bg-color": lightenBgColor,
            "--el-button-hover-border-color": lightenBgColor,
            "--el-button-active-text-color": "var(--el-color-white)",
            "--el-button-active-bg-color": darkenBgColor,
            "--el-button-active-border-color": darkenBgColor,
            "--el-button-disabled-bg-color": lighten(buttonColor, 0.5),
            "--el-button-disabled-border-color": lighten(buttonColor, 0.5),
            "--el-button-disabled-text-color": "var(--el-color-white)"
          };
        }
      }
      return styles;
    });
    const handleClick = (evt) => {
      if (props.nativeType === "reset") {
        form == null ? void 0 : form.resetFields();
      }
      emit("click", evt);
    };
    return {
      buttonRef,
      buttonStyle,
      buttonSize,
      buttonType,
      buttonDisabled,
      shouldAddSpace,
      handleClick
    };
  }
});

export { script as default };
//# sourceMappingURL=button.vue_vue_type_script_lang.mjs.map
