import { createVNode, defineComponent, shallowRef, watchEffect, computed } from 'vue';
import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue';
import '../../../utils/index.mjs';
import useConfigInject from '../../config-provider/src/hooks/useConfigInject.mjs';
import { inputProps } from './props.mjs';
import AInput from './Input.mjs';
import { cloneElement } from '../../../utils/vue/vnode.mjs';
import { isValidElement } from '../../../utils/is.mjs';
import { classNames } from '../../../utils/dom/class.mjs';
import { omit } from '../../../utils/lang/omit.mjs';

const ActionMap = {
  click: "onClick",
  hover: "onMouseover"
};
const defaultIconRender = (visible) => visible ? createVNode(EyeOutlined, null, null) : createVNode(EyeInvisibleOutlined, null, null);
var AInputPassword = /* @__PURE__ */ defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "AInputPassword",
  inheritAttrs: false,
  props: {
    ...inputProps(),
    "prefixCls": String,
    "inputPrefixCls": String,
    "action": {
      type: String,
      default: "click"
    },
    "visibilityToggle": {
      type: Boolean,
      default: true
    },
    "visible": {
      type: Boolean,
      default: void 0
    },
    "onUpdate:visible": Function,
    "iconRender": Function
  },
  setup(props, {
    slots,
    attrs,
    expose,
    emit
  }) {
    const visible = shallowRef(false);
    const onVisibleChange = () => {
      const {
        disabled
      } = props;
      if (disabled)
        return;
      visible.value = !visible.value;
      emit("update:visible", visible.value);
    };
    watchEffect(() => {
      if (props.visible !== void 0)
        visible.value = !!props.visible;
    });
    const inputRef = shallowRef();
    const focus = () => {
      var _a;
      (_a = inputRef.value) == null ? void 0 : _a.focus();
    };
    const blur = () => {
      var _a;
      (_a = inputRef.value) == null ? void 0 : _a.blur();
    };
    expose({
      focus,
      blur
    });
    const getIcon = (prefixCls2) => {
      const {
        action,
        iconRender = slots.iconRender || defaultIconRender
      } = props;
      const iconTrigger = ActionMap[action] || "";
      const icon = iconRender(visible.value);
      const iconProps = {
        [iconTrigger]: onVisibleChange,
        class: `${prefixCls2}-icon`,
        key: "passwordIcon",
        onMousedown: (e) => {
          e.preventDefault();
        },
        onMouseup: (e) => {
          e.preventDefault();
        }
      };
      return cloneElement(isValidElement(icon) ? icon : createVNode("span", null, [icon]), iconProps);
    };
    const {
      prefixCls,
      getPrefixCls
    } = useConfigInject("input-password", props);
    const inputPrefixCls = computed(() => getPrefixCls("input", props.inputPrefixCls));
    const renderPassword = () => {
      const {
        size,
        visibilityToggle,
        ...restProps
      } = props;
      const suffixIcon = visibilityToggle && getIcon(prefixCls.value);
      const inputClassName = classNames(prefixCls.value, attrs.class, {
        [`${prefixCls.value}-${size}`]: !!size
      });
      const omittedProps = {
        ...omit(restProps, ["suffix", "iconRender", "action"]),
        ...attrs,
        type: visible.value ? "text" : "password",
        class: inputClassName,
        prefixCls: inputPrefixCls.value,
        suffix: suffixIcon
      };
      if (size)
        omittedProps.size = size;
      return createVNode(AInput, {
        "ref": inputRef,
        ...omittedProps
      }, slots);
    };
    return () => {
      return renderPassword();
    };
  }
});

export { AInputPassword as default };
//# sourceMappingURL=Password.mjs.map
