/**
 * ldesign v0.2.22
 * (c) 2022/12/7 16:21 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 { renderLNodeJSX } from '../../utils/render-node.js';
import useDefaultValue from '../../hooks/useDefaultValue.js';
import { useGlobalIcon } from '../../hooks/useGlobalIcon.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/withInstall.js';
import 'lodash/capitalize';
import '../../config.js';
import '../input/input.js';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../../chunks/helper2.js';
import '../../chunks/defineProperty-19da3d4c.js';
import '../../chunks/index.js';
import '../../chunks/log.js';
import '../../chunks/_commonjsHelpers-fe796db6.js';
import '../../utils/helper.js';
import '../config-provider/config-receiver.js';
import 'lodash/mergeWith';
import '../config-provider/context.js';
import 'lodash/merge';
import '../../chunks/zh_CN.js';
import '../config-provider/type.js';
import '../../utils/mixins.js';
import '../../utils/event.js';
import '../input/props.js';
import 'lodash';
import '../input/group.js';
import '../input/style/css.js';
import '../input/type.js';
import '../../hooks/useConfig.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/useVModel.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,
      inputProps
    } = toRefs(props2);
    const isComposition = ref(false);
    const COMPONENT_NAME = usePrefixClass("tag-input");
    const classPrefix = usePrefixClass();
    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(`^${classPrefix.value}-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(() => {
      const isEmpty = !(Array.isArray(tagValue.value) && tagValue.value.length);
      return [COMPONENT_NAME.value, {
        [`${COMPONENT_NAME.value}--break-line`]: excessTagsDisplayType.value === "break-line",
        [`${classPrefix.value}-is-empty`]: isEmpty,
        [`${classPrefix.value}-tag-input--with-tag`]: !isEmpty
      }];
    });
    const tagInputPlaceholder = computed(() => !tagValue.value?.length ? placeholder.value : "");
    const showClearIcon = computed(() => Boolean(!readonly.value && !disabled.value && clearable.value && isHover.value && (tagValue.value?.length || tInputValue.value)));
    const onInputCompositionstart = (value, context2) => {
      isComposition.value = true;
      inputProps.value?.onCompositionstart?.(value, context2);
    };
    const onInputCompositionend = (value, context2) => {
      isComposition.value = false;
      inputProps.value?.onCompositionend?.(value, context2);
    };
    const onInputEnter = (value, context2) => {
      context2.e?.preventDefault();
      setTInputValue("", {
        e: context2.e,
        trigger: "enter"
      });
      !isComposition.value && onInnerEnter(value, context2);
      nextTick(() => {
        scrollToRight();
        isComposition.value = false;
      });
    };
    const onClick = () => {
      tagInputRef.value.focus();
    };
    const onClearClick = ctx => {
      clearAll(ctx);
      setTInputValue("", {
        e: ctx.e,
        trigger: "clear"
      });
      props2.onClear?.(ctx);
      context.emit("clear", ctx);
    };
    return {
      tagValue,
      tInputValue,
      isHover,
      tagInputPlaceholder,
      showClearIcon,
      tagInputRef,
      classPrefix,
      setTInputValue,
      addHover,
      cancelHover,
      onInputEnter,
      onInnerEnter,
      onInputBackspaceKeyUp,
      renderLabel,
      onWheel,
      scrollToRightOnEnter,
      scrollToLeftOnLeave,
      onClick,
      onClearClick,
      onClose,
      classes,
      onInputCompositionstart,
      onInputCompositionend,
      componentName: COMPONENT_NAME,
      CloseCircleFilledIcon: CloseCircleFilledIcon$1
    };
  },
  render(h) {
    const {
      CloseCircleFilledIcon
    } = this;
    const suffixIconNode = this.showClearIcon ? h(CloseCircleFilledIcon, {
      "class": `${this.componentName}__suffix-clear`,
      "on": {
        "click": this.onClearClick
      }
    }) : renderLNodeJSX(this, "suffixIcon");
    const suffixClass = `${this.classPrefix}-tag-input__with-suffix-icon`;
    if (suffixIconNode && !this.classes.includes(suffixClass)) {
      this.classes.push(suffixClass);
    }
    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",
      "attrs": {
        "readonly": this.inputProps?.readonly,
        "inputClass": this.inputProps?.inputClass,
        "value": this.tInputValue,
        "showInput": !this.inputProps?.readonly || !this.tagValue || !this.tagValue?.length,
        "keepWrapperWidth": !this.autoWidth,
        "autoWidth": true,
        "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) => {
            this.onFocus?.(this.tagValue, {
              e: context.e,
              inputValue
            });
            this.$emit("focus", this.tagValue, {
              e: context.e,
              inputValue
            });
          },
          onBlur: (inputValue, context) => {
            this.onBlur?.(this.tagValue, {
              e: context.e,
              inputValue
            });
            this.$emit("blur", this.tagValue, {
              e: context.e,
              inputValue
            });
          },
          onPaste: context => {
            this.onPaste?.(context);
            this.$emit("paste", context);
          }
        }
      }
    }, {
      "props": this.inputProps
    }]));
  }
});

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