/**
 * ldesign v0.2.14
 * (c) 2022/11/2 16:16 built by swimly
 * @license MIT
 */

import { h as helper } from '../../chunks/helper.js';
import { defineComponent, toRefs, ref, computed, nextTick } from '@vue/composition-api';
import { CloseCircleFilledIcon } from '@ldesign/icons-vue';
import { Input } from '../input/index.js';
import { PREFIX } from '../../config.js';
import { renderLNodeJSX } from '../../utils/render-node.js';
import useDefaultValue from '../../hooks/use-default-value.js';
import { useGlobalIcon } from '../../hooks/use-global-icon.js';
import { usePrefixClass } from '../config-provider/useConfig.js';
import props from './props.js';
import useTagScroll from './hooks/use-tag-scroll.js';
import useTagList from './hooks/use-tag-list.js';
import useHover from './hooks/use-hover.js';
import useDragSorter from './hooks/use-drag-sorter.js';
import '../../chunks/_commonjsHelpers.js';
import '../../utils/map-props.js';
import 'vue';
import '../../utils/with-install.js';
import 'lodash';
import '../input/input.js';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../../chunks/helper2.js';
import '../../chunks/defineProperty-838e4192.js';
import '../../chunks/index.js';
import '../../chunks/log.js';
import '../../chunks/_commonjsHelpers-2e6815bd.js';
import '../../utils/helper.js';
import '../config-provider/config-receiver.js';
import 'lodash/mergeWith';
import '../config-provider/context.js';
import '../../chunks/zh_CN.js';
import '../config-provider/type.js';
import '../../utils/mixins.js';
import '../../utils/event.js';
import '../input/props.js';
import '../input/group.js';
import '../input/style/css.js';
import '../input/type.js';
import '../../hooks/use-config.js';
import '../tag/index.js';
import '../tag/tag.js';
import '../tag/props.js';
import '../tag/check-tag.js';
import '../tag/style/css.js';
import '../tag/type.js';
import '../../hooks/use-vmodel.js';
import '../../hooks/lnode.js';
import 'lodash/isEmpty';
import 'lodash/isFunction';
import '../../hooks/render-lnode.js';

var _TagInput = defineComponent({
  name: "LTagInput",
  props: {
    ...props
  },
  setup(props2, context) {
    const {
      inputValue
    } = toRefs(props2);
    const {
      inputProps
    } = props2;
    const isCompositionRef = ref(false);
    const COMPONENT_NAME = usePrefixClass("tag-input");
    const [tInputValue, setTInputValue] = useDefaultValue(inputValue, props2.defaultInputValue, props2.onInputChange, "inputValue", "input-change");
    const {
      excessTagsDisplayType,
      readonly,
      disabled,
      clearable,
      placeholder
    } = toRefs(props2);
    const {
      isHover,
      addHover,
      cancelHover
    } = useHover({
      readonly: props2.readonly,
      disabled: props2.disabled,
      onMouseenter: props2.onMouseenter,
      onMouseleave: props2.onMouseleave
    });
    const {
      getDragProps
    } = useDragSorter({
      ...props2,
      sortOnDraggable: props2.dragSort,
      onDragOverCheck: {
        x: true,
        targetClassNameRegExp: new RegExp(`^${PREFIX}-tag`)
      }
    }, context);
    const {
      scrollToRight,
      onWheel,
      scrollToRightOnEnter,
      scrollToLeftOnLeave,
      tagInputRef
    } = useTagScroll(props2);
    const {
      tagValue,
      onInnerEnter,
      onInputBackspaceKeyUp,
      clearAll,
      renderLabel,
      onClose
    } = useTagList(props2, getDragProps);
    const {
      CloseCircleFilledIcon: CloseCircleFilledIcon$1
    } = useGlobalIcon({
      CloseCircleFilledIcon: CloseCircleFilledIcon
    });
    const classes = computed(() => [COMPONENT_NAME.value, {
      [`${COMPONENT_NAME.value}--break-line`]: excessTagsDisplayType.value === "break-line"
    }]);
    const tagInputPlaceholder = computed(() => {
      var _tagValue$value;
      return !((_tagValue$value = tagValue.value) !== null && _tagValue$value !== void 0 && _tagValue$value.length) ? placeholder.value : "";
    });
    const showClearIcon = computed(() => {
      var _tagValue$value2;
      return Boolean(!readonly.value && !disabled.value && clearable.value && isHover.value && (((_tagValue$value2 = tagValue.value) === null || _tagValue$value2 === void 0 ? void 0 : _tagValue$value2.length) || tInputValue.value));
    });
    const onInputCompositionstart = (value, context2) => {
      var _inputProps$onComposi;
      isCompositionRef.value = true;
      inputProps === null || inputProps === void 0 ? void 0 : (_inputProps$onComposi = inputProps.onCompositionstart) === null || _inputProps$onComposi === void 0 ? void 0 : _inputProps$onComposi.call(inputProps, value, context2);
    };
    const onInputCompositionend = (value, context2) => {
      var _inputProps$onComposi2;
      isCompositionRef.value = false;
      inputProps === null || inputProps === void 0 ? void 0 : (_inputProps$onComposi2 = inputProps.onCompositionend) === null || _inputProps$onComposi2 === void 0 ? void 0 : _inputProps$onComposi2.call(inputProps, value, context2);
    };
    const onInputEnter = (value, context2) => {
      var _context2$e;
      (_context2$e = context2.e) === null || _context2$e === void 0 ? void 0 : _context2$e.preventDefault();
      setTInputValue("", {
        e: context2.e,
        trigger: "enter"
      });
      !isCompositionRef.value && onInnerEnter(value, context2);
      nextTick(() => {
        scrollToRight();
        isCompositionRef.value = false;
      });
    };
    const onClick = () => {
      tagInputRef.value.focus();
    };
    const onClearClick = ctx => {
      var _props2$onClear;
      clearAll(ctx);
      setTInputValue("", {
        e: ctx.e,
        trigger: "clear"
      });
      (_props2$onClear = props2.onClear) === null || _props2$onClear === void 0 ? void 0 : _props2$onClear.call(props2, ctx);
      context.emit("clear", ctx);
    };
    return {
      tagValue,
      tInputValue,
      isHover,
      tagInputPlaceholder,
      showClearIcon,
      tagInputRef,
      setTInputValue,
      addHover,
      cancelHover,
      onInputEnter,
      onInnerEnter,
      onInputBackspaceKeyUp,
      renderLabel,
      onWheel,
      scrollToRightOnEnter,
      scrollToLeftOnLeave,
      onClick,
      onClearClick,
      onClose,
      classes,
      onInputCompositionstart,
      onInputCompositionend,
      componentName: COMPONENT_NAME,
      CloseCircleFilledIcon: CloseCircleFilledIcon$1
    };
  },
  render(h) {
    var _this$inputProps, _this$inputProps2, _this$inputProps3, _this$tagValue;
    const {
      CloseCircleFilledIcon
    } = this;
    const suffixIconNode = this.showClearIcon ? h(CloseCircleFilledIcon, {
      "class": `${this.componentName}__suffix-clear`,
      "on": {
        "click": this.onClearClick
      }
    }) : renderLNodeJSX(this, "suffixIcon");
    const displayNode = renderLNodeJSX(this, "valueDisplay", {
      params: {
        value: this.tagValue,
        onClose: (index, item) => this.onClose({
          index,
          item
        })
      }
    });
    const label = renderLNodeJSX(this, "label", {
      silent: true
    });
    return h(Input, helper([{
      "ref": "tagInputRef"
    }, this.inputProps, {
      "attrs": {
        "readonly": (_this$inputProps = this.inputProps) === null || _this$inputProps === void 0 ? void 0 : _this$inputProps.readonly,
        "inputClass": (_this$inputProps2 = this.inputProps) === null || _this$inputProps2 === void 0 ? void 0 : _this$inputProps2.inputClass,
        "value": this.tInputValue,
        "showInput": !((_this$inputProps3 = this.inputProps) !== null && _this$inputProps3 !== void 0 && _this$inputProps3.readonly) || !this.tagValue || !((_this$tagValue = this.tagValue) !== null && _this$tagValue !== void 0 && _this$tagValue.length),
        "keepWrapperWidth": true,
        "autoWidth": this.autoWidth,
        "size": this.size,
        "disabled": this.disabled,
        "label": () => this.renderLabel({
          displayNode,
          label
        }, h),
        "tips": this.tips,
        "status": this.status,
        "placeholder": this.tagInputPlaceholder,
        "suffix": this.suffix,
        "suffixIcon": () => suffixIconNode
      },
      "on": {
        "change": (val, context) => {
          this.setTInputValue(val, {
            ...context,
            trigger: "input"
          });
        },
        "mousewheel": this.onWheel,
        "compositionstart": this.onInputCompositionstart,
        "compositionend": this.onInputCompositionend
      },
      "class": this.classes,
      "props": {
        ...{
          ...this.inputProps,
          onEnter: this.onInputEnter,
          onKeyup: this.onInputBackspaceKeyUp,
          onMouseenter: context => {
            this.addHover(context);
            this.scrollToRightOnEnter();
          },
          onMouseleave: context => {
            this.cancelHover(context);
            this.scrollToLeftOnLeave();
          },
          onFocus: (inputValue, context) => {
            var _this$onFocus;
            (_this$onFocus = this.onFocus) === null || _this$onFocus === void 0 ? void 0 : _this$onFocus.call(this, this.tagValue, {
              e: context.e,
              inputValue
            });
            this.$emit("focus", this.tagValue, {
              e: context.e,
              inputValue
            });
          },
          onBlur: (inputValue, context) => {
            var _this$onBlur;
            (_this$onBlur = this.onBlur) === null || _this$onBlur === void 0 ? void 0 : _this$onBlur.call(this, this.tagValue, {
              e: context.e,
              inputValue
            });
            this.$emit("blur", this.tagValue, {
              e: context.e,
              inputValue
            });
          },
          onPaste: context => {
            var _this$onPaste;
            (_this$onPaste = this.onPaste) === null || _this$onPaste === void 0 ? void 0 : _this$onPaste.call(this, context);
            this.$emit("paste", context);
          }
        }
      }
    }]));
  }
});

export { _TagInput as default };
//# sourceMappingURL=tag-input.js.map
