import { defineComponent, useAttrs, computed, ref, watch, createElementBlock, openBlock, mergeProps, unref, createVNode, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps } from 'vue';
import '../../../utils/index.mjs';
import { Form, InputSearch } from 'ant-design-vue';
import { omit } from 'lodash-es';
import { inputSearchProps } from './input.mjs';
import { createNamespace } from '../../../utils/create-namespace.mjs';

"use strict";
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{ name: "LlInputSearch", inheritAttrs: false },
  __name: "input-search",
  props: inputSearchProps,
  emits: ["update:value", "change", "clear", "blur"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const attrs = useAttrs();
    const containerAttrs = computed(() => ({
      class: attrs.class,
      style: attrs.style
    }));
    const componentAttrs = computed(() => omit(attrs, ["class", "style"]));
    const bem = createNamespace("input-search");
    const inputSearchRef = ref();
    const innerValue = ref("");
    const isMouseOver = ref(false);
    const formItemContext = Form.useInjectFormItemContext();
    const hasValue = computed(() => innerValue.value || props.defaultValue);
    const handleMouseOver = () => {
      isMouseOver.value = true;
    };
    const handleMouseOut = () => {
      isMouseOver.value = false;
    };
    const onChange = (e) => {
      const { value } = e.target;
      emits("update:value", value);
      emits("change", e);
      if (!value && e.type === "click") {
        emits("clear", value);
      }
      innerValue.value = value;
      formItemContext.onFieldChange();
    };
    const onBlur = (e) => {
      emits("blur", e);
      formItemContext.onFieldBlur();
    };
    watch(
      () => [props.value, props.defaultValue],
      ([newValue, newDefaultValue]) => {
        innerValue.value = newValue || newDefaultValue;
      },
      {
        immediate: true
      }
    );
    const focus = () => {
      inputSearchRef.value.focus();
    };
    const select = () => {
      inputSearchRef.value.select();
    };
    __expose({
      focus,
      select
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        mergeProps({
          class: unref(bem).b()
        }, containerAttrs.value, {
          onMouseover: handleMouseOver,
          onMouseout: handleMouseOut
        }),
        [
          createVNode(unref(InputSearch), mergeProps(componentAttrs.value, {
            ref_key: "inputSearchRef",
            ref: inputSearchRef,
            autocomplete: "off",
            class: {
              "show-clear-icon": props.allowClear && hasValue.value && isMouseOver.value && !props.disabled
            },
            value: innerValue.value,
            "allow-clear": props.allowClear,
            disabled: props.disabled,
            onChange,
            onBlur
          }), createSlots({
            _: 2
            /* DYNAMIC */
          }, [
            renderList(Object.keys(_ctx.$slots), (item) => {
              return {
                name: item,
                fn: withCtx((data) => [
                  renderSlot(_ctx.$slots, item, normalizeProps(guardReactiveProps(data || {})))
                ])
              };
            })
          ]), 1040, ["class", "value", "allow-clear", "disabled"])
        ],
        16
        /* FULL_PROPS */
      );
    };
  }
});

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