/**
 * ldesign v0.2.22
 * (c) 2022/12/7 16:21 built by swimly
 * @license MIT
 */

'use strict';

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

var helper = require('../../chunks/helper.js');
var VueCompositionAPI = require('@vue/composition-api');
var iconsVue = require('@ldesign/icons-vue');
var components_input_index = require('../input/index.js');
var utils_renderNode = require('../../utils/render-node.js');
var hooks_useDefaultValue = require('../../hooks/useDefaultValue.js');
var hooks_useGlobalIcon = require('../../hooks/useGlobalIcon.js');
var components_configProvider_useConfig = require('../config-provider/useConfig.js');
var components_tagInput_props = require('./props.js');
var components_tagInput_hooks_useTagScroll = require('./hooks/use-tag-scroll.js');
var components_tagInput_hooks_useTagList = require('./hooks/use-tag-list.js');
var components_tagInput_hooks_useHover = require('./hooks/use-hover.js');
var components_tagInput_hooks_useDragSorter = require('./hooks/use-drag-sorter.js');
require('../../utils/map-props.js');
require('vue');
require('../../utils/withInstall.js');
require('lodash/capitalize');
require('../../config.js');
require('../input/input.js');
require('lodash/camelCase');
require('lodash/kebabCase');
require('../../chunks/helper2.js');
require('../../chunks/log.js');
require('../../chunks/_commonjsHelpers-fe796db6.js');
require('../../utils/helper.js');
require('../config-provider/config-receiver.js');
require('lodash/mergeWith');
require('../config-provider/context.js');
require('lodash/merge');
require('../../chunks/zh_CN.js');
require('../../utils/mixins.js');
require('../../utils/event.js');
require('../input/props.js');
require('lodash');
require('../input/group.js');
require('../tag/index.js');
require('../tag/tag.js');
require('../tag/props.js');
require('../tag/check-tag.js');
require('../../hooks/useVModel.js');
require('../../hooks/lnode.js');
require('lodash/isEmpty');
require('lodash/isFunction');
require('../../hooks/render-lnode.js');

var _TagInput = VueCompositionAPI.defineComponent({
  name: "LTagInput",
  props: {
    ...components_tagInput_props["default"]
  },
  setup(props2, context) {
    const {
      inputValue,
      inputProps
    } = VueCompositionAPI.toRefs(props2);
    const isComposition = VueCompositionAPI.ref(false);
    const COMPONENT_NAME = components_configProvider_useConfig.usePrefixClass("tag-input");
    const classPrefix = components_configProvider_useConfig.usePrefixClass();
    const [tInputValue, setTInputValue] = hooks_useDefaultValue["default"](inputValue, props2.defaultInputValue, props2.onInputChange, "inputValue", "input-change");
    const {
      excessTagsDisplayType,
      readonly,
      disabled,
      clearable,
      placeholder
    } = VueCompositionAPI.toRefs(props2);
    const {
      isHover,
      addHover,
      cancelHover
    } = components_tagInput_hooks_useHover["default"]({
      readonly: props2.readonly,
      disabled: props2.disabled,
      onMouseenter: props2.onMouseenter,
      onMouseleave: props2.onMouseleave
    });
    const {
      getDragProps
    } = components_tagInput_hooks_useDragSorter["default"]({
      ...props2,
      sortOnDraggable: props2.dragSort,
      onDragOverCheck: {
        x: true,
        targetClassNameRegExp: new RegExp(`^${classPrefix.value}-tag`)
      }
    }, context);
    const {
      scrollToRight,
      onWheel,
      scrollToRightOnEnter,
      scrollToLeftOnLeave,
      tagInputRef
    } = components_tagInput_hooks_useTagScroll["default"](props2);
    const {
      tagValue,
      onInnerEnter,
      onInputBackspaceKeyUp,
      clearAll,
      renderLabel,
      onClose
    } = components_tagInput_hooks_useTagList["default"](props2, getDragProps);
    const {
      CloseCircleFilledIcon
    } = hooks_useGlobalIcon.useGlobalIcon({
      CloseCircleFilledIcon: iconsVue.CloseCircleFilledIcon
    });
    const classes = VueCompositionAPI.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 = VueCompositionAPI.computed(() => !tagValue.value?.length ? placeholder.value : "");
    const showClearIcon = VueCompositionAPI.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);
      VueCompositionAPI.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
    };
  },
  render(h) {
    const {
      CloseCircleFilledIcon
    } = this;
    const suffixIconNode = this.showClearIcon ? h(CloseCircleFilledIcon, {
      "class": `${this.componentName}__suffix-clear`,
      "on": {
        "click": this.onClearClick
      }
    }) : utils_renderNode.renderLNodeJSX(this, "suffixIcon");
    const suffixClass = `${this.classPrefix}-tag-input__with-suffix-icon`;
    if (suffixIconNode && !this.classes.includes(suffixClass)) {
      this.classes.push(suffixClass);
    }
    const displayNode = utils_renderNode.renderLNodeJSX(this, "valueDisplay", {
      params: {
        value: this.tagValue,
        onClose: (index, item) => this.onClose({
          index,
          item
        })
      }
    });
    const label = utils_renderNode.renderLNodeJSX(this, "label", {
      silent: true
    });
    return h(components_input_index.Input, helper.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
    }]));
  }
});

exports["default"] = _TagInput;
//# sourceMappingURL=tag-input.js.map
