'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../utils/index.js');
var antDesignVue = require('ant-design-vue');
var lodashEs = require('lodash-es');
var input = require('./input.js');
var createNamespace = require('../../../utils/create-namespace.js');

"use strict";
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...{ name: "LlInputSearch", inheritAttrs: false },
  __name: "input-search",
  props: input.inputSearchProps,
  emits: ["update:value", "change", "clear", "blur"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const attrs = vue.useAttrs();
    const containerAttrs = vue.computed(() => ({
      class: attrs.class,
      style: attrs.style
    }));
    const componentAttrs = vue.computed(() => lodashEs.omit(attrs, ["class", "style"]));
    const bem = createNamespace.createNamespace("input-search");
    const inputSearchRef = vue.ref();
    const innerValue = vue.ref("");
    const isMouseOver = vue.ref(false);
    const formItemContext = antDesignVue.Form.useInjectFormItemContext();
    const hasValue = vue.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();
    };
    vue.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 vue.openBlock(), vue.createElementBlock(
        "div",
        vue.mergeProps({
          class: vue.unref(bem).b()
        }, containerAttrs.value, {
          onMouseover: handleMouseOver,
          onMouseout: handleMouseOut
        }),
        [
          vue.createVNode(vue.unref(antDesignVue.InputSearch), vue.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
          }), vue.createSlots({
            _: 2
            /* DYNAMIC */
          }, [
            vue.renderList(Object.keys(_ctx.$slots), (item) => {
              return {
                name: item,
                fn: vue.withCtx((data) => [
                  vue.renderSlot(_ctx.$slots, item, vue.normalizeProps(vue.guardReactiveProps(data || {})))
                ])
              };
            })
          ]), 1040, ["class", "value", "allow-clear", "disabled"])
        ],
        16
        /* FULL_PROPS */
      );
    };
  }
});

exports.default = _sfc_main;
//# sourceMappingURL=input-search.vue2.js.map
