/**
 * ldesign v0.2.14
 * (c) 2022/11/2 16:16 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 config = require('../../config.js');
var utils_renderNode = require('../../utils/render-node.js');
var hooks_useDefaultValue = require('../../hooks/use-default-value.js');
var hooks_useGlobalIcon = require('../../hooks/use-global-icon.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/with-install.js');
require('lodash');
require('../input/input.js');
require('lodash/camelCase');
require('lodash/kebabCase');
require('../../chunks/helper2.js');
require('../../chunks/log.js');
require('../../chunks/_commonjsHelpers-2e6815bd.js');
require('../../utils/helper.js');
require('../config-provider/config-receiver.js');
require('lodash/mergeWith');
require('../config-provider/context.js');
require('../../chunks/zh_CN.js');
require('../../utils/mixins.js');
require('../../utils/event.js');
require('../input/props.js');
require('../input/group.js');
require('../tag/index.js');
require('../tag/tag.js');
require('../tag/props.js');
require('../tag/check-tag.js');
require('../../hooks/use-vmodel.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
    } = VueCompositionAPI.toRefs(props2);
    const {
      inputProps
    } = props2;
    const isCompositionRef = VueCompositionAPI.ref(false);
    const COMPONENT_NAME = components_configProvider_useConfig.usePrefixClass("tag-input");
    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(`^${config.PREFIX}-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(() => [COMPONENT_NAME.value, {
      [`${COMPONENT_NAME.value}--break-line`]: excessTagsDisplayType.value === "break-line"
    }]);
    const tagInputPlaceholder = VueCompositionAPI.computed(() => {
      var _tagValue$value;
      return !((_tagValue$value = tagValue.value) !== null && _tagValue$value !== void 0 && _tagValue$value.length) ? placeholder.value : "";
    });
    const showClearIcon = VueCompositionAPI.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);
      VueCompositionAPI.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
    };
  },
  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
      }
    }) : utils_renderNode.renderLNodeJSX(this, "suffixIcon");
    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"
    }, 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);
          }
        }
      }
    }]));
  }
});

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