"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const icon = require("../../../utils/vue/icon.js");
const shared_esmBundler = require("../../../../../@vue/shared/dist/shared.esm-bundler.js");
const index = require("../../../hooks/use-attrs/index.js");
const index$1 = require("../../../hooks/use-calc-input-width/index.js");
const index$4 = require("../../icon/index.js");
const useFormItem = require("../../form/src/hooks/use-form-item.js");
const index$3 = require("../../tooltip/index.js");
const index$2 = require("../../tag/index.js");
const inputTag = require("./input-tag.js");
const useDragTag = require("./composables/use-drag-tag.js");
const useHovering = require("./composables/use-hovering.js");
const useInputTag = require("./composables/use-input-tag.js");
const useInputTagDom = require("./composables/use-input-tag-dom.js");
const Vue = require("vue");
const _hoisted_1 = [
  "id",
  "minlength",
  "maxlength",
  "disabled",
  "readonly",
  "autocomplete",
  "tabindex",
  "placeholder",
  "autofocus",
  "ariaLabel"
];
const _hoisted_2 = ["textContent"];
var input_tag_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ Vue.defineComponent({
  name: "ElInputTag",
  inheritAttrs: false,
  __name: "input-tag",
  props: inputTag.inputTagProps,
  emits: inputTag.inputTagEmits,
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const attrs = index.useAttrs();
    const slots = Vue.useSlots();
    const { form, formItem } = useFormItem.useFormItem();
    const { inputId } = useFormItem.useFormItemInputId(props, { formItemContext: formItem });
    const needStatusIcon = Vue.computed(() => (form == null ? void 0 : form.statusIcon) ?? false);
    const validateState = Vue.computed(() => (formItem == null ? void 0 : formItem.validateState) || "");
    const validateIcon = Vue.computed(() => {
      return validateState.value && icon.ValidateComponentsMap[validateState.value];
    });
    const { inputRef, wrapperRef, tagTooltipRef, isFocused, inputValue, size, tagSize, placeholder, closable, disabled, showTagList, collapseTagList, handleDragged, handlePaste, handleInput, handleKeydown, handleKeyup, handleRemoveTag, handleClear, handleCompositionStart, handleCompositionUpdate, handleCompositionEnd, focus, blur } = useInputTag.useInputTag({
      props,
      emit,
      formItem
    });
    const { hovering, handleMouseEnter, handleMouseLeave } = useHovering.useHovering();
    const { calculatorRef, inputStyle } = index$1.useCalcInputWidth();
    const { dropIndicatorRef, showDropIndicator, handleDragStart, handleDragOver, handleDragEnd } = useDragTag.useDragTag({
      wrapperRef,
      handleDragged,
      afterDragged: focus
    });
    const { ns, nsInput, containerKls, containerStyle, innerKls, showClear, showSuffix, tagStyle, collapseItemRef, innerRef } = useInputTagDom.useInputTagDom({
      props,
      hovering,
      isFocused,
      inputValue,
      disabled,
      size,
      validateState,
      validateIcon,
      needStatusIcon
    });
    __expose({
      focus,
      blur
    });
    return (_ctx, _cache) => {
      return Vue.openBlock(), Vue.createElementBlock("div", {
        ref_key: "wrapperRef",
        ref: wrapperRef,
        class: Vue.normalizeClass(Vue.unref(containerKls)),
        style: Vue.normalizeStyle(Vue.unref(containerStyle)),
        onMouseenter: _cache[9] || (_cache[9] = (...args) => Vue.unref(handleMouseEnter) && Vue.unref(handleMouseEnter)(...args)),
        onMouseleave: _cache[10] || (_cache[10] = (...args) => Vue.unref(handleMouseLeave) && Vue.unref(handleMouseLeave)(...args))
      }, [
        Vue.unref(slots).prefix ? (Vue.openBlock(), Vue.createElementBlock("div", {
          key: 0,
          class: Vue.normalizeClass(Vue.unref(ns).e("prefix"))
        }, [Vue.renderSlot(_ctx.$slots, "prefix")], 2)) : Vue.createCommentVNode("v-if", true),
        Vue.createElementVNode("div", {
          ref_key: "innerRef",
          ref: innerRef,
          class: Vue.normalizeClass(Vue.unref(innerKls))
        }, [
          (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(Vue.unref(showTagList), (item, index2) => {
            return Vue.openBlock(), Vue.createBlock(Vue.unref(index$2.ElTag), {
              key: index2,
              size: Vue.unref(tagSize),
              closable: Vue.unref(closable),
              type: __props.tagType,
              effect: __props.tagEffect,
              draggable: Vue.unref(closable) && __props.draggable,
              style: Vue.normalizeStyle(Vue.unref(tagStyle)),
              "disable-transitions": "",
              onClose: ($event) => Vue.unref(handleRemoveTag)(index2),
              onDragstart: (event) => Vue.unref(handleDragStart)(event, index2),
              onDragover: (event) => Vue.unref(handleDragOver)(event, index2),
              onDragend: Vue.unref(handleDragEnd),
              onDrop: _cache[0] || (_cache[0] = Vue.withModifiers(() => {
              }, ["stop"]))
            }, {
              default: Vue.withCtx(() => [Vue.renderSlot(_ctx.$slots, "tag", {
                value: item,
                index: index2
              }, () => [Vue.createTextVNode(Vue.toDisplayString(item), 1)])]),
              _: 2
            }, 1032, [
              "size",
              "closable",
              "type",
              "effect",
              "draggable",
              "style",
              "onClose",
              "onDragstart",
              "onDragover",
              "onDragend"
            ]);
          }), 128)),
          __props.collapseTags && __props.modelValue && __props.modelValue.length > __props.maxCollapseTags ? (Vue.openBlock(), Vue.createBlock(Vue.unref(index$3.ElTooltip), {
            key: 0,
            ref_key: "tagTooltipRef",
            ref: tagTooltipRef,
            disabled: !__props.collapseTagsTooltip,
            "fallback-placements": [
              "bottom",
              "top",
              "right",
              "left"
            ],
            effect: __props.effect,
            placement: "bottom"
          }, {
            default: Vue.withCtx(() => [Vue.createElementVNode("div", {
              ref_key: "collapseItemRef",
              ref: collapseItemRef,
              class: Vue.normalizeClass(Vue.unref(ns).e("collapse-tag"))
            }, [Vue.createVNode(Vue.unref(index$2.ElTag), {
              closable: false,
              size: Vue.unref(tagSize),
              type: __props.tagType,
              effect: __props.tagEffect,
              "disable-transitions": ""
            }, {
              default: Vue.withCtx(() => [Vue.createTextVNode(" + " + Vue.toDisplayString(__props.modelValue.length - __props.maxCollapseTags), 1)]),
              _: 1
            }, 8, [
              "size",
              "type",
              "effect"
            ])], 2)]),
            content: Vue.withCtx(() => [Vue.createElementVNode("div", { class: Vue.normalizeClass(Vue.unref(ns).e("input-tag-list")) }, [(Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(Vue.unref(collapseTagList), (item, index2) => {
              return Vue.openBlock(), Vue.createBlock(Vue.unref(index$2.ElTag), {
                key: index2,
                size: Vue.unref(tagSize),
                closable: Vue.unref(closable),
                type: __props.tagType,
                effect: __props.tagEffect,
                "disable-transitions": "",
                onClose: ($event) => Vue.unref(handleRemoveTag)(index2 + __props.maxCollapseTags)
              }, {
                default: Vue.withCtx(() => [Vue.renderSlot(_ctx.$slots, "tag", {
                  value: item,
                  index: index2 + __props.maxCollapseTags
                }, () => [Vue.createTextVNode(Vue.toDisplayString(item), 1)])]),
                _: 2
              }, 1032, [
                "size",
                "closable",
                "type",
                "effect",
                "onClose"
              ]);
            }), 128))], 2)]),
            _: 3
          }, 8, ["disabled", "effect"])) : Vue.createCommentVNode("v-if", true),
          Vue.createElementVNode("div", { class: Vue.normalizeClass(Vue.unref(ns).e("input-wrapper")) }, [Vue.withDirectives(Vue.createElementVNode("input", Vue.mergeProps({
            id: Vue.unref(inputId),
            ref_key: "inputRef",
            ref: inputRef,
            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => Vue.isRef(inputValue) ? inputValue.value = $event : null)
          }, Vue.unref(attrs), {
            type: "text",
            minlength: __props.minlength,
            maxlength: __props.maxlength,
            disabled: Vue.unref(disabled),
            readonly: __props.readonly,
            autocomplete: __props.autocomplete,
            tabindex: __props.tabindex,
            placeholder: Vue.unref(placeholder),
            autofocus: __props.autofocus,
            ariaLabel: __props.ariaLabel,
            class: Vue.unref(ns).e("input"),
            style: Vue.unref(inputStyle),
            onCompositionstart: _cache[2] || (_cache[2] = (...args) => Vue.unref(handleCompositionStart) && Vue.unref(handleCompositionStart)(...args)),
            onCompositionupdate: _cache[3] || (_cache[3] = (...args) => Vue.unref(handleCompositionUpdate) && Vue.unref(handleCompositionUpdate)(...args)),
            onCompositionend: _cache[4] || (_cache[4] = (...args) => Vue.unref(handleCompositionEnd) && Vue.unref(handleCompositionEnd)(...args)),
            onPaste: _cache[5] || (_cache[5] = (...args) => Vue.unref(handlePaste) && Vue.unref(handlePaste)(...args)),
            onInput: _cache[6] || (_cache[6] = (...args) => Vue.unref(handleInput) && Vue.unref(handleInput)(...args)),
            onKeydown: _cache[7] || (_cache[7] = (...args) => Vue.unref(handleKeydown) && Vue.unref(handleKeydown)(...args)),
            onKeyup: _cache[8] || (_cache[8] = (...args) => Vue.unref(handleKeyup) && Vue.unref(handleKeyup)(...args))
          }), null, 16, _hoisted_1), [[Vue.vModelText, Vue.unref(inputValue)]]), Vue.createElementVNode("span", {
            ref_key: "calculatorRef",
            ref: calculatorRef,
            "aria-hidden": "true",
            class: Vue.normalizeClass(Vue.unref(ns).e("input-calculator")),
            textContent: Vue.toDisplayString(Vue.unref(inputValue))
          }, null, 10, _hoisted_2)], 2),
          Vue.withDirectives(Vue.createElementVNode("div", {
            ref_key: "dropIndicatorRef",
            ref: dropIndicatorRef,
            class: Vue.normalizeClass(Vue.unref(ns).e("drop-indicator"))
          }, null, 2), [[Vue.vShow, Vue.unref(showDropIndicator)]])
        ], 2),
        Vue.unref(showSuffix) ? (Vue.openBlock(), Vue.createElementBlock("div", {
          key: 1,
          class: Vue.normalizeClass(Vue.unref(ns).e("suffix"))
        }, [
          Vue.renderSlot(_ctx.$slots, "suffix"),
          Vue.unref(showClear) ? (Vue.openBlock(), Vue.createBlock(Vue.unref(index$4.ElIcon), {
            key: 0,
            class: Vue.normalizeClass([Vue.unref(ns).e("icon"), Vue.unref(ns).e("clear")]),
            onMousedown: Vue.withModifiers(Vue.unref(shared_esmBundler.NOOP), ["prevent"]),
            onClick: Vue.unref(handleClear)
          }, {
            default: Vue.withCtx(() => [(Vue.openBlock(), Vue.createBlock(Vue.resolveDynamicComponent(__props.clearIcon)))]),
            _: 1
          }, 8, [
            "class",
            "onMousedown",
            "onClick"
          ])) : Vue.createCommentVNode("v-if", true),
          validateState.value && validateIcon.value && needStatusIcon.value ? (Vue.openBlock(), Vue.createBlock(Vue.unref(index$4.ElIcon), {
            key: 1,
            class: Vue.normalizeClass([
              Vue.unref(nsInput).e("icon"),
              Vue.unref(nsInput).e("validateIcon"),
              Vue.unref(nsInput).is("loading", validateState.value === "validating")
            ])
          }, {
            default: Vue.withCtx(() => [(Vue.openBlock(), Vue.createBlock(Vue.resolveDynamicComponent(validateIcon.value)))]),
            _: 1
          }, 8, ["class"])) : Vue.createCommentVNode("v-if", true)
        ], 2)) : Vue.createCommentVNode("v-if", true)
      ], 38);
    };
  }
});
exports.default = input_tag_vue_vue_type_script_setup_true_lang_default;
