import {
  defineComponent,
  useAttrs,
  useSlots,
  computed,
  shallowRef,
  ref,
  nextTick,
  watch,
  onMounted,
  toRef,
  withDirectives,
  openBlock,
  createElementBlock,
  mergeProps,
  unref,
  createCommentVNode,
  Fragment,
  normalizeClass,
  renderSlot,
  createElementVNode,
  createBlock,
  withCtx,
  resolveDynamicComponent,
  withModifiers,
  createVNode,
  toDisplayString,
  normalizeStyle,
  vShow,
} from 'vue';
import { useResizeObserver, isClient } from '@vueuse/core';
import { isNil } from 'lodash-unified';
import { ElIcon } from '../../icon/index.mjs';
import { View, Hide, CircleClose } from '@element-plus/icons-vue';
import '../../../utils/index.mjs';
import '../../../hooks/index.mjs';
import '../../../constants/index.mjs';
import { calcTextareaHeight } from './utils.mjs';
import { inputProps, inputEmits } from './input.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { useAttrs as useAttrs$1 } from '../../../hooks/use-attrs/index.mjs';
import { useFormItem, useFormItemInputId } from '../../../hooks/use-form-item/index.mjs';
import { useSize, useDisabled } from '../../../hooks/use-common-props/index.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { ValidateComponentsMap } from '../../../utils/vue/icon.mjs';
import { useCursor } from '../../../hooks/use-cursor/index.mjs';
import { isObject, NOOP } from '@vue/shared';
import { UPDATE_MODEL_EVENT } from '../../../constants/event.mjs';
import { isKorean } from '../../../utils/i18n.mjs';
import { debugWarn } from '../../../utils/error.mjs';

const _hoisted_1 = ['role'];
const _hoisted_2 = [
  'id',
  'type',
  'disabled',
  'formatter',
  'parser',
  'readonly',
  'autocomplete',
  'tabindex',
  'aria-label',
  'placeholder',
  'form',
];
const _hoisted_3 = ['id', 'tabindex', 'disabled', 'readonly', 'autocomplete', 'aria-label', 'placeholder', 'form'];
const __default__ = defineComponent({
  name: 'ElInput',
  inheritAttrs: false,
});
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: inputProps,
  emits: inputEmits,
  setup(__props, { expose, emit }) {
    const props = __props;
    const rawAttrs = useAttrs();
    const slots = useSlots();
    const containerAttrs = computed(() => {
      const comboBoxAttrs = {};
      if (props.containerRole === 'combobox') {
        comboBoxAttrs['aria-haspopup'] = rawAttrs['aria-haspopup'];
        comboBoxAttrs['aria-owns'] = rawAttrs['aria-owns'];
        comboBoxAttrs['aria-expanded'] = rawAttrs['aria-expanded'];
      }
      return comboBoxAttrs;
    });
    const containerKls = computed(() => [
      props.type === 'textarea' ? nsTextarea.b() : nsInput.b(),
      nsInput.m(inputSize.value),
      nsInput.is('disabled', inputDisabled.value),
      nsInput.is('exceed', inputExceed.value),
      {
        [nsInput.b('group')]: slots.prepend || slots.append,
        [nsInput.bm('group', 'append')]: slots.append,
        [nsInput.bm('group', 'prepend')]: slots.prepend,
        [nsInput.m('prefix')]: slots.prefix || props.prefixIcon,
        [nsInput.m('suffix')]: slots.suffix || props.suffixIcon || props.clearable || props.showPassword,
        [nsInput.bm('suffix', 'password-clear')]: showClear.value && showPwdVisible.value,
      },
      rawAttrs.class,
    ]);
    const wrapperKls = computed(() => [nsInput.e('wrapper'), nsInput.is('focus', focused.value)]);
    const attrs = useAttrs$1({
      excludeKeys: computed(() => {
        return Object.keys(containerAttrs.value);
      }),
    });
    const { form, formItem } = useFormItem();
    const { inputId } = useFormItemInputId(props, {
      formItemContext: formItem,
    });
    const inputSize = useSize();
    const inputDisabled = useDisabled();
    const nsInput = useNamespace('input');
    const nsTextarea = useNamespace('textarea');
    const input = shallowRef();
    const textarea = shallowRef();
    const focused = ref(false);
    const hovering = ref(false);
    const isComposing = ref(false);
    const passwordVisible = ref(false);
    const countStyle = ref();
    const textareaCalcStyle = shallowRef(props.inputStyle);
    const _ref = computed(() => input.value || textarea.value);
    const needStatusIcon = computed(() => {
      var _a;
      return (_a = form == null ? void 0 : form.statusIcon) != null ? _a : false;
    });
    const validateState = computed(() => (formItem == null ? void 0 : formItem.validateState) || '');
    const validateIcon = computed(() => validateState.value && ValidateComponentsMap[validateState.value]);
    const passwordIcon = computed(() => (passwordVisible.value ? View : Hide));
    const containerStyle = computed(() => [rawAttrs.style, props.inputStyle]);
    const textareaStyle = computed(() => [props.inputStyle, textareaCalcStyle.value, { resize: props.resize }]);
    const nativeInputValue = computed(() => (isNil(props.modelValue) ? '' : String(props.modelValue)));
    const showClear = computed(
      () =>
        props.clearable &&
        !inputDisabled.value &&
        !props.readonly &&
        !!nativeInputValue.value &&
        (focused.value || hovering.value)
    );
    const showPwdVisible = computed(
      () =>
        props.showPassword &&
        !inputDisabled.value &&
        !props.readonly &&
        !!nativeInputValue.value &&
        (!!nativeInputValue.value || focused.value)
    );
    const isWordLimitVisible = computed(
      () =>
        props.showWordLimit &&
        !!attrs.value.maxlength &&
        (props.type === 'text' || props.type === 'textarea') &&
        !inputDisabled.value &&
        !props.readonly &&
        !props.showPassword
    );
    const textLength = computed(() => Array.from(nativeInputValue.value).length);
    const inputExceed = computed(() => !!isWordLimitVisible.value && textLength.value > Number(attrs.value.maxlength));
    const suffixVisible = computed(
      () =>
        !!slots.suffix ||
        !!props.suffixIcon ||
        showClear.value ||
        props.showPassword ||
        isWordLimitVisible.value ||
        (!!validateState.value && needStatusIcon.value)
    );
    const [recordCursor, setCursor] = useCursor(input);
    useResizeObserver(textarea, entries => {
      if (!isWordLimitVisible.value || props.resize !== 'both') return;
      const entry = entries[0];
      const { width } = entry.contentRect;
      countStyle.value = {
        right: `calc(100% - ${width + 15 + 6}px)`,
      };
    });
    const resizeTextarea = () => {
      const { type, autosize } = props;
      if (!isClient || type !== 'textarea') return;
      if (autosize) {
        const minRows = isObject(autosize) ? autosize.minRows : void 0;
        const maxRows = isObject(autosize) ? autosize.maxRows : void 0;
        textareaCalcStyle.value = {
          ...calcTextareaHeight(textarea.value, minRows, maxRows),
        };
      } else {
        textareaCalcStyle.value = {
          minHeight: calcTextareaHeight(textarea.value).minHeight,
        };
      }
    };
    const setNativeInputValue = () => {
      const input2 = _ref.value;
      if (!input2 || input2.value === nativeInputValue.value) return;
      input2.value = nativeInputValue.value;
    };
    const handleInput = async event => {
      recordCursor();
      let { value } = event.target;
      if (props.formatter) {
        value = props.parser ? props.parser(value) : value;
        value = props.formatter(value);
      }
      if (isComposing.value) return;
      if (value === nativeInputValue.value) {
        setNativeInputValue();
        return;
      }
      emit(UPDATE_MODEL_EVENT, value);
      emit('input', value);
      await nextTick();
      setNativeInputValue();
      setCursor();
    };
    const handleChange = event => {
      emit('change', event.target.value);
    };
    const handleCompositionStart = event => {
      emit('compositionstart', event);
      isComposing.value = true;
    };
    const handleCompositionUpdate = event => {
      var _a;
      emit('compositionupdate', event);
      const text = (_a = event.target) == null ? void 0 : _a.value;
      const lastCharacter = text[text.length - 1] || '';
      isComposing.value = !isKorean(lastCharacter);
    };
    const handleCompositionEnd = event => {
      emit('compositionend', event);
      if (isComposing.value) {
        isComposing.value = false;
        handleInput(event);
      }
    };
    const handlePasswordVisible = () => {
      passwordVisible.value = !passwordVisible.value;
      focus();
    };
    const focus = async () => {
      var _a;
      await nextTick();
      (_a = _ref.value) == null ? void 0 : _a.focus();
    };
    const blur = () => {
      var _a;
      return (_a = _ref.value) == null ? void 0 : _a.blur();
    };
    const handleFocus = event => {
      focused.value = true;
      emit('focus', event);
    };
    const handleBlur = event => {
      var _a;
      focused.value = false;
      emit('blur', event);
      if (props.validateEvent) {
        (_a = formItem == null ? void 0 : formItem.validate) == null
          ? void 0
          : _a.call(formItem, 'blur').catch(err => debugWarn(err));
      }
    };
    const handleMouseLeave = evt => {
      hovering.value = false;
      emit('mouseleave', evt);
    };
    const handleMouseEnter = evt => {
      hovering.value = true;
      emit('mouseenter', evt);
    };
    const handleKeydown = evt => {
      if (evt instanceof Event) {
        emit('keydown', evt);
      }
    };
    const select = () => {
      var _a;
      (_a = _ref.value) == null ? void 0 : _a.select();
    };
    const clear = () => {
      emit(UPDATE_MODEL_EVENT, '');
      emit('change', '');
      emit('clear');
      emit('input', '');
    };
    watch(
      () => props.modelValue,
      () => {
        var _a;
        nextTick(() => resizeTextarea());
        if (props.validateEvent) {
          (_a = formItem == null ? void 0 : formItem.validate) == null
            ? void 0
            : _a.call(formItem, 'change').catch(err => debugWarn(err));
        }
      }
    );
    watch(nativeInputValue, () => setNativeInputValue());
    watch(
      () => props.type,
      async () => {
        await nextTick();
        setNativeInputValue();
        resizeTextarea();
      }
    );
    onMounted(() => {
      if (!props.formatter && props.parser) {
        debugWarn('ElInput', 'If you set the parser, you also need to set the formatter.');
      }
      setNativeInputValue();
      nextTick(resizeTextarea);
    });
    expose({
      input,
      textarea,
      ref: _ref,
      textareaStyle,
      autosize: toRef(props, 'autosize'),
      focus,
      blur,
      select,
      clear,
      resizeTextarea,
    });
    return (_ctx, _cache) => {
      return withDirectives(
        (openBlock(),
        createElementBlock(
          'div',
          mergeProps(unref(containerAttrs), {
            class: unref(containerKls),
            style: unref(containerStyle),
            role: _ctx.containerRole,
            onMouseenter: handleMouseEnter,
            onMouseleave: handleMouseLeave,
          }),
          [
            createCommentVNode(' input '),
            _ctx.type !== 'textarea'
              ? (openBlock(),
                createElementBlock(
                  Fragment,
                  { key: 0 },
                  [
                    createCommentVNode(' prepend slot '),
                    _ctx.$slots.prepend
                      ? (openBlock(),
                        createElementBlock(
                          'div',
                          {
                            key: 0,
                            class: normalizeClass(unref(nsInput).be('group', 'prepend')),
                          },
                          [renderSlot(_ctx.$slots, 'prepend')],
                          2
                        ))
                      : createCommentVNode('v-if', true),
                    createElementVNode(
                      'div',
                      {
                        class: normalizeClass(unref(wrapperKls)),
                      },
                      [
                        createCommentVNode(' prefix slot '),
                        _ctx.$slots.prefix || _ctx.prefixIcon
                          ? (openBlock(),
                            createElementBlock(
                              'span',
                              {
                                key: 0,
                                class: normalizeClass(unref(nsInput).e('prefix')),
                              },
                              [
                                createElementVNode(
                                  'span',
                                  {
                                    class: normalizeClass(unref(nsInput).e('prefix-inner')),
                                    onClick: focus,
                                  },
                                  [
                                    renderSlot(_ctx.$slots, 'prefix'),
                                    _ctx.prefixIcon
                                      ? (openBlock(),
                                        createBlock(
                                          unref(ElIcon),
                                          {
                                            key: 0,
                                            class: normalizeClass(unref(nsInput).e('icon')),
                                          },
                                          {
                                            default: withCtx(() => [
                                              (openBlock(), createBlock(resolveDynamicComponent(_ctx.prefixIcon))),
                                            ]),
                                            _: 1,
                                          },
                                          8,
                                          ['class']
                                        ))
                                      : createCommentVNode('v-if', true),
                                  ],
                                  2
                                ),
                              ],
                              2
                            ))
                          : createCommentVNode('v-if', true),
                        createElementVNode(
                          'input',
                          mergeProps(
                            {
                              id: unref(inputId),
                              ref_key: 'input',
                              ref: input,
                              class: unref(nsInput).e('inner'),
                            },
                            unref(attrs),
                            {
                              type: _ctx.showPassword ? (passwordVisible.value ? 'text' : 'password') : _ctx.type,
                              disabled: unref(inputDisabled),
                              formatter: _ctx.formatter,
                              parser: _ctx.parser,
                              readonly: _ctx.readonly,
                              autocomplete: _ctx.autocomplete,
                              tabindex: _ctx.tabindex,
                              'aria-label': _ctx.label,
                              placeholder: _ctx.placeholder,
                              style: _ctx.inputStyle,
                              form: props.form,
                              onCompositionstart: handleCompositionStart,
                              onCompositionupdate: handleCompositionUpdate,
                              onCompositionend: handleCompositionEnd,
                              onInput: handleInput,
                              onFocus: handleFocus,
                              onBlur: handleBlur,
                              onChange: handleChange,
                              onKeydown: handleKeydown,
                            }
                          ),
                          null,
                          16,
                          _hoisted_2
                        ),
                        createCommentVNode(' suffix slot '),
                        unref(suffixVisible)
                          ? (openBlock(),
                            createElementBlock(
                              'span',
                              {
                                key: 1,
                                class: normalizeClass(unref(nsInput).e('suffix')),
                              },
                              [
                                createElementVNode(
                                  'span',
                                  {
                                    class: normalizeClass(unref(nsInput).e('suffix-inner')),
                                    onClick: focus,
                                  },
                                  [
                                    !unref(showClear) || !unref(showPwdVisible) || !unref(isWordLimitVisible)
                                      ? (openBlock(),
                                        createElementBlock(
                                          Fragment,
                                          { key: 0 },
                                          [
                                            renderSlot(_ctx.$slots, 'suffix'),
                                            _ctx.suffixIcon
                                              ? (openBlock(),
                                                createBlock(
                                                  unref(ElIcon),
                                                  {
                                                    key: 0,
                                                    class: normalizeClass(unref(nsInput).e('icon')),
                                                  },
                                                  {
                                                    default: withCtx(() => [
                                                      (openBlock(), createBlock(resolveDynamicComponent(_ctx.suffixIcon))),
                                                    ]),
                                                    _: 1,
                                                  },
                                                  8,
                                                  ['class']
                                                ))
                                              : createCommentVNode('v-if', true),
                                          ],
                                          64
                                        ))
                                      : createCommentVNode('v-if', true),
                                    unref(showClear)
                                      ? (openBlock(),
                                        createBlock(
                                          unref(ElIcon),
                                          {
                                            key: 1,
                                            class: normalizeClass([unref(nsInput).e('icon'), unref(nsInput).e('clear')]),
                                            onMousedown: withModifiers(unref(NOOP), ['prevent']),
                                            onClick: clear,
                                          },
                                          {
                                            default: withCtx(() => [createVNode(unref(CircleClose))]),
                                            _: 1,
                                          },
                                          8,
                                          ['class', 'onMousedown']
                                        ))
                                      : createCommentVNode('v-if', true),
                                    unref(showPwdVisible)
                                      ? (openBlock(),
                                        createBlock(
                                          unref(ElIcon),
                                          {
                                            key: 2,
                                            class: normalizeClass([unref(nsInput).e('icon'), unref(nsInput).e('password')]),
                                            onClick: handlePasswordVisible,
                                          },
                                          {
                                            default: withCtx(() => [
                                              (openBlock(), createBlock(resolveDynamicComponent(unref(passwordIcon)))),
                                            ]),
                                            _: 1,
                                          },
                                          8,
                                          ['class']
                                        ))
                                      : createCommentVNode('v-if', true),
                                    unref(isWordLimitVisible)
                                      ? (openBlock(),
                                        createElementBlock(
                                          'span',
                                          {
                                            key: 3,
                                            class: normalizeClass(unref(nsInput).e('count')),
                                          },
                                          [
                                            createElementVNode(
                                              'span',
                                              {
                                                class: normalizeClass(unref(nsInput).e('count-inner')),
                                              },
                                              toDisplayString(unref(textLength)) +
                                                ' / ' +
                                                toDisplayString(unref(attrs).maxlength),
                                              3
                                            ),
                                          ],
                                          2
                                        ))
                                      : createCommentVNode('v-if', true),
                                    unref(validateState) && unref(validateIcon) && unref(needStatusIcon)
                                      ? (openBlock(),
                                        createBlock(
                                          unref(ElIcon),
                                          {
                                            key: 4,
                                            class: normalizeClass([
                                              unref(nsInput).e('icon'),
                                              unref(nsInput).e('validateIcon'),
                                              unref(nsInput).is('loading', unref(validateState) === 'validating'),
                                            ]),
                                          },
                                          {
                                            default: withCtx(() => [
                                              (openBlock(), createBlock(resolveDynamicComponent(unref(validateIcon)))),
                                            ]),
                                            _: 1,
                                          },
                                          8,
                                          ['class']
                                        ))
                                      : createCommentVNode('v-if', true),
                                  ],
                                  2
                                ),
                              ],
                              2
                            ))
                          : createCommentVNode('v-if', true),
                      ],
                      2
                    ),
                    createCommentVNode(' append slot '),
                    _ctx.$slots.append
                      ? (openBlock(),
                        createElementBlock(
                          'div',
                          {
                            key: 1,
                            class: normalizeClass(unref(nsInput).be('group', 'append')),
                          },
                          [renderSlot(_ctx.$slots, 'append')],
                          2
                        ))
                      : createCommentVNode('v-if', true),
                  ],
                  64
                ))
              : (openBlock(),
                createElementBlock(
                  Fragment,
                  { key: 1 },
                  [
                    createCommentVNode(' textarea '),
                    createElementVNode(
                      'textarea',
                      mergeProps(
                        {
                          id: unref(inputId),
                          ref_key: 'textarea',
                          ref: textarea,
                          class: unref(nsTextarea).e('inner'),
                        },
                        unref(attrs),
                        {
                          tabindex: _ctx.tabindex,
                          disabled: unref(inputDisabled),
                          readonly: _ctx.readonly,
                          autocomplete: _ctx.autocomplete,
                          style: unref(textareaStyle),
                          'aria-label': _ctx.label,
                          placeholder: _ctx.placeholder,
                          form: props.form,
                          onCompositionstart: handleCompositionStart,
                          onCompositionupdate: handleCompositionUpdate,
                          onCompositionend: handleCompositionEnd,
                          onInput: handleInput,
                          onFocus: handleFocus,
                          onBlur: handleBlur,
                          onChange: handleChange,
                          onKeydown: handleKeydown,
                        }
                      ),
                      null,
                      16,
                      _hoisted_3
                    ),
                    unref(isWordLimitVisible)
                      ? (openBlock(),
                        createElementBlock(
                          'span',
                          {
                            key: 0,
                            style: normalizeStyle(countStyle.value),
                            class: normalizeClass(unref(nsInput).e('count')),
                          },
                          toDisplayString(unref(textLength)) + ' / ' + toDisplayString(unref(attrs).maxlength),
                          7
                        ))
                      : createCommentVNode('v-if', true),
                  ],
                  64
                )),
          ],
          16,
          _hoisted_1
        )),
        [[vShow, _ctx.type !== 'hidden']]
      );
    };
  },
});
var Input = /* @__PURE__ */ _export_sfc(_sfc_main, [
  ['__file', '/home/runner/work/element-plus/element-plus/packages/components/input/src/input.vue'],
]);

export { Input as default };
//# sourceMappingURL=input2.mjs.map