import { defineComponent, useAttrs, ref, computed, onMounted, nextTick, onUnmounted, resolveComponent, createBlock, openBlock, resolveDynamicComponent, unref, mergeProps, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps, createVNode } from 'vue';
import '../../../utils/index.mjs';
import { Input } from 'ant-design-vue';
import { inputProps } from './input.mjs';
import { createNamespace } from '../../../utils/create-namespace.mjs';

"use strict";
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{ name: "LlInput", inheritAttrs: false },
  __name: "input",
  props: inputProps,
  emits: ["update:value", "change", "clear"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const bem = createNamespace("input");
    const props = __props;
    const emit = __emit;
    const attrs = useAttrs();
    const inputRef = ref();
    const isMouseOver = ref(false);
    const affixWrapper = ref();
    const innerValue = computed({
      get() {
        return props.value || props.defaultValue;
      },
      set(val) {
        emit("update:value", val);
      }
    });
    const getMaxlength = computed(
      () => typeof props.maxlength === "number" ? props.maxlength > 0 ? props.maxlength : null : null
    );
    const handleMouseOver = () => {
      isMouseOver.value = true;
    };
    const handleMouseOut = () => {
      isMouseOver.value = false;
    };
    const onChange = (e) => {
      const { value } = e.target;
      emit("change", e);
      if (!value && e.type === "click") {
        emit("clear", value);
      }
    };
    const componentType = props.showPassword ? Input.Password : Input;
    const focus = () => {
      inputRef.value?.focus?.();
    };
    const select = () => {
      inputRef.value?.select?.();
    };
    const handleWrapperMouseOver = () => handleMouseOver();
    const handleWrapperMouseOut = () => handleMouseOut();
    onMounted(() => {
      nextTick(() => {
        if (!inputRef.value || !inputRef.value.$el || props.showPassword) return;
        const rootElement = inputRef.value.$el;
        const isRootAffixWrapper = rootElement.classList?.contains(
          "ant-input-affix-wrapper"
        );
        if (isRootAffixWrapper) {
          affixWrapper.value = rootElement;
        } else {
          affixWrapper.value = rootElement.querySelector?.(
            ".ant-input-affix-wrapper"
          );
        }
        if (affixWrapper.value) {
          affixWrapper.value.addEventListener("mouseenter", handleWrapperMouseOver);
          affixWrapper.value.addEventListener("mouseleave", handleWrapperMouseOut);
        }
      });
    });
    onUnmounted(() => {
      if (affixWrapper.value) {
        affixWrapper.value.removeEventListener("mouseenter", handleWrapperMouseOver);
        affixWrapper.value.removeEventListener("mouseleave", handleWrapperMouseOut);
      }
    });
    __expose({
      focus,
      select
    });
    return (_ctx, _cache) => {
      const _component_ll_icon = resolveComponent("ll-icon");
      return openBlock(), createBlock(resolveDynamicComponent(unref(componentType)), mergeProps({
        ref_key: "inputRef",
        ref: inputRef
      }, unref(attrs), {
        value: innerValue.value,
        "onUpdate:value": _cache[0] || (_cache[0] = ($event) => innerValue.value = $event),
        autocomplete: "off",
        "allow-clear": _ctx.allowClear,
        disabled: _ctx.disabled,
        readonly: _ctx.readonly,
        maxlength: getMaxlength.value,
        class: [
          unref(bem).b(),
          unref(bem).is(_ctx.isGray ? "gray-input" : ""),
          _ctx.allowClear && !!innerValue.value && isMouseOver.value && !_ctx.disabled ? "show-clear-icon" : ""
        ],
        onChange
      }), createSlots({
        _: 2
        /* DYNAMIC */
      }, [
        renderList(Object.keys(_ctx.$slots), (item) => {
          return {
            name: item,
            fn: withCtx((data) => [
              renderSlot(_ctx.$slots, item, normalizeProps(guardReactiveProps(data || {})))
            ])
          };
        }),
        _ctx.prefixIcon ? {
          name: "prefix",
          fn: withCtx(() => [
            createVNode(_component_ll_icon, {
              "icon-name": _ctx.prefixIcon,
              class: "prefix-icon"
            }, null, 8, ["icon-name"])
          ]),
          key: "0"
        } : void 0,
        _ctx.suffixIcon ? {
          name: "suffix",
          fn: withCtx(() => [
            createVNode(_component_ll_icon, {
              "icon-name": _ctx.suffixIcon,
              class: "suffix-icon"
            }, null, 8, ["icon-name"])
          ]),
          key: "1"
        } : void 0
      ]), 1040, ["value", "allow-clear", "disabled", "readonly", "maxlength", "class"]);
    };
  }
});

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