"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const comp = require("../../ui/src/comp.js");
const XEUtils = require("xe-utils");
require("../../ui/index.js");
const utils = require("../../ui/src/utils.js");
const vn = require("../../ui/src/vn.js");
const config = require("../../../../@vxe-ui/core/es/src/config.js");
const useFns = require("../../../../@vxe-ui/core/es/src/useFns.js");
const i18n = require("../../../../@vxe-ui/core/es/src/i18n.js");
const index_esm = require("../../../../@vxe-ui/core/es/index.esm.js");
const icon = require("../../../../@vxe-ui/core/es/src/icon.js");
const event = require("../../../../@vxe-ui/core/es/src/event.js");
const VxePasswordInputComponent = comp.defineVxeComponent({
  name: "VxePasswordInput",
  props: {
    modelValue: String,
    immediate: {
      type: Boolean,
      default: true
    },
    name: String,
    clearable: {
      type: Boolean,
      default: () => config.getConfig().passwordInput.clearable
    },
    readonly: Boolean,
    disabled: Boolean,
    maxLength: [String, Number],
    placeholder: String,
    autoComplete: {
      type: String,
      default: "off"
    },
    className: String,
    size: {
      type: String,
      default: () => config.getConfig().passwordInput.size || config.getConfig().size
    },
    prefixIcon: String,
    suffixIcon: String,
    controls: {
      type: Boolean,
      default: () => config.getConfig().passwordInput.controls
    },
    // 已废弃
    autocomplete: String
  },
  emits: [
    "update:modelValue",
    "input",
    "change",
    "click",
    "focus",
    "blur",
    "clear",
    "lazy-change",
    "toggle-visible",
    "prefix-click",
    "suffix-click"
  ],
  setup(props, context) {
    const { emit, slots } = context;
    const $xeForm = vue.inject("$xeForm", null);
    const formItemInfo = vue.inject("xeFormItemInfo", null);
    const xID = XEUtils.uniqueId();
    const { computeSize } = useFns.useSize(props);
    const reactData = vue.reactive({
      showPwd: false,
      isActivated: false,
      inputValue: props.modelValue
    });
    const refElem = vue.ref();
    const refInputTarget = vue.ref();
    const refMaps = {
      refElem,
      refInput: refInputTarget
    };
    const $xePasswordInput = {
      xID,
      props,
      context,
      reactData,
      getRefMaps: () => refMaps
    };
    let passwordInputMethods = {};
    const computeIsClearable = vue.computed(() => {
      return props.clearable;
    });
    const computeInpReadonly = vue.computed(() => {
      const { readonly } = props;
      return readonly;
    });
    const computeInpPlaceholder = vue.computed(() => {
      const { placeholder } = props;
      if (placeholder) {
        return utils.getFuncText(placeholder);
      }
      const globalPlaceholder = config.getConfig().passwordInput.placeholder;
      if (globalPlaceholder) {
        return utils.getFuncText(globalPlaceholder);
      }
      return i18n.getI18n("vxe.base.pleaseInput");
    });
    const computeInputType = vue.computed(() => {
      const { showPwd } = reactData;
      if (showPwd) {
        return "text";
      }
      return "password";
    });
    const computeInpImmediate = vue.computed(() => {
      const { immediate } = props;
      return immediate;
    });
    const triggerEvent = (evnt) => {
      const { inputValue } = reactData;
      passwordInputMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt);
    };
    const emitInputEvent = (value, evnt) => {
      const inpImmediate = computeInpImmediate.value;
      reactData.inputValue = value;
      if (inpImmediate) {
        handleChange(value, evnt);
      } else {
        passwordInputMethods.dispatchEvent("input", { value }, evnt);
      }
    };
    const inputEvent = (evnt) => {
      const inputElem = evnt.target;
      const value = inputElem.value;
      emitInputEvent(value, evnt);
    };
    const handleChange = (value, evnt) => {
      reactData.inputValue = value;
      emit("update:modelValue", value);
      passwordInputMethods.dispatchEvent("input", { value }, evnt);
      if (XEUtils.toValueString(props.modelValue) !== value) {
        passwordInputMethods.dispatchEvent("change", { value }, evnt);
        if ($xeForm && formItemInfo) {
          $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
        }
      }
    };
    const changeEvent = (evnt) => {
      triggerEvent(evnt);
      $xePasswordInput.dispatchEvent("lazy-change", { value: reactData.inputValue }, evnt);
      if ($xeForm && formItemInfo) {
        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, reactData.inputValue);
      }
    };
    const focusEvent = (evnt) => {
      reactData.isActivated = true;
      triggerEvent(evnt);
    };
    const blurEvent = (evnt) => {
      const { inputValue } = reactData;
      const value = inputValue;
      $xePasswordInput.dispatchEvent("blur", { value }, evnt);
      if ($xeForm && formItemInfo) {
        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
      }
    };
    const passwordToggleEvent = (evnt) => {
      const { readonly, disabled } = props;
      const { showPwd } = reactData;
      if (!disabled && !readonly) {
        reactData.showPwd = !showPwd;
      }
      $xePasswordInput.dispatchEvent("toggle-visible", { visible: reactData.showPwd }, evnt);
    };
    const clickEvent = (evnt) => {
      triggerEvent(evnt);
    };
    const clearValueEvent = (evnt, value) => {
      focus();
      handleChange("", evnt);
      $xePasswordInput.dispatchEvent("clear", { value }, evnt);
      $xePasswordInput.dispatchEvent("lazy-change", { value: reactData.inputValue }, evnt);
    };
    const clickSuffixEvent = (evnt) => {
      const { disabled } = props;
      if (!disabled) {
        const { inputValue } = reactData;
        $xePasswordInput.dispatchEvent("suffix-click", { value: inputValue }, evnt);
      }
    };
    const clickPrefixEvent = (evnt) => {
      const { disabled } = props;
      if (!disabled) {
        const { inputValue } = reactData;
        $xePasswordInput.dispatchEvent("prefix-click", { value: inputValue }, evnt);
      }
    };
    const renderPasswordIcon = () => {
      const { showPwd } = reactData;
      return vue.h("div", {
        class: "vxe-password-input--control-icon",
        onClick: passwordToggleEvent
      }, [
        vue.h("i", {
          class: ["vxe-password-input--password-icon", showPwd ? icon.getIcon().PASSWORD_INPUT_SHOW_PWD : icon.getIcon().PASSWORD_INPUT_HIDE_PWD]
        })
      ]);
    };
    const renderPrefixIcon = () => {
      const { prefixIcon } = props;
      const prefixSlot = slots.prefix;
      return prefixSlot || prefixIcon ? vue.h("div", {
        class: "vxe-password-input--prefix",
        onClick: clickPrefixEvent
      }, [
        vue.h("div", {
          class: "vxe-password-input--prefix-icon"
        }, prefixSlot ? vn.getSlotVNs(prefixSlot({})) : [
          vue.h("i", {
            class: prefixIcon
          })
        ])
      ]) : null;
    };
    const renderSuffixIcon = () => {
      const { disabled, suffixIcon, controls } = props;
      const { inputValue } = reactData;
      const suffixSlot = slots.suffix;
      const isClearable = computeIsClearable.value;
      return isClearable || controls || suffixSlot || suffixIcon ? vue.h("div", {
        class: ["vxe-password-input--suffix", {
          "is--clear": isClearable && !disabled && !(inputValue === "" || XEUtils.eqNull(inputValue))
        }]
      }, [
        isClearable ? vue.h("div", {
          class: "vxe-password-input--clear-icon",
          onClick: clearValueEvent
        }, [
          vue.h("i", {
            class: icon.getIcon().INPUT_CLEAR
          })
        ]) : index_esm.renderEmptyElement(),
        controls ? renderPasswordIcon() : index_esm.renderEmptyElement(),
        suffixSlot || suffixIcon ? vue.h("div", {
          class: "vxe-password-input--suffix-icon",
          onClick: clickSuffixEvent
        }, suffixSlot ? vn.getSlotVNs(suffixSlot({})) : [
          vue.h("i", {
            class: suffixIcon
          })
        ]) : index_esm.renderEmptyElement()
      ]) : null;
    };
    passwordInputMethods = {
      dispatchEvent(type, params, evnt) {
        emit(type, event.createEvent(evnt, { $passwordInput: $xePasswordInput }, params));
      },
      focus() {
        const inputElem = refInputTarget.value;
        reactData.isActivated = true;
        inputElem.focus();
        return vue.nextTick();
      },
      blur() {
        const inputElem = refInputTarget.value;
        inputElem.blur();
        reactData.isActivated = false;
        return vue.nextTick();
      },
      select() {
        const inputElem = refInputTarget.value;
        inputElem.select();
        reactData.isActivated = false;
        return vue.nextTick();
      }
    };
    Object.assign($xePasswordInput, passwordInputMethods);
    vue.watch(() => props.modelValue, (val) => {
      reactData.inputValue = val;
    });
    const renderVN = () => {
      const { className, name, disabled, readonly, autocomplete, autoComplete, maxLength } = props;
      const { inputValue, isActivated } = reactData;
      const vSize = computeSize.value;
      const inpReadonly = computeInpReadonly.value;
      const inputType = computeInputType.value;
      const inpPlaceholder = computeInpPlaceholder.value;
      const isClearable = computeIsClearable.value;
      const prefix = renderPrefixIcon();
      const suffix = renderSuffixIcon();
      return vue.h("div", {
        ref: refElem,
        class: ["vxe-password-input", className, {
          [`size--${vSize}`]: vSize,
          "is--prefix": !!prefix,
          "is--suffix": !!suffix,
          "is--readonly": readonly,
          "is--disabled": disabled,
          "is--active": isActivated,
          "show--clear": isClearable && !disabled && !(inputValue === "" || XEUtils.eqNull(inputValue))
        }],
        spellcheck: false
      }, [
        prefix || index_esm.renderEmptyElement(),
        vue.h("div", {
          class: "vxe-password-input--wrapper"
        }, [
          vue.h("input", {
            ref: refInputTarget,
            class: "vxe-password-input--inner",
            value: inputValue,
            name,
            type: inputType,
            placeholder: inpPlaceholder,
            readonly: inpReadonly,
            disabled,
            autocomplete: autocomplete || autoComplete,
            maxlength: maxLength,
            onClick: clickEvent,
            onInput: inputEvent,
            onChange: changeEvent,
            onFocus: focusEvent,
            onBlur: blurEvent
          })
        ]),
        suffix || index_esm.renderEmptyElement()
      ]);
    };
    $xePasswordInput.renderVN = renderVN;
    return $xePasswordInput;
  },
  render() {
    return this.renderVN();
  }
});
exports.default = VxePasswordInputComponent;
