'use strict';

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

var vue = require('vue');
require('../../../../utils/index.cjs');
var LegacyContext = require('../../../vc-tree-select/src/LegacyContext.cjs');
require('../../../vc-overflow/index.cjs');
var TransBtn = require('../TransBtn.cjs');
var Input = require('./Input.cjs');
var vueTypes = require('../../../../utils/vue/vueTypes.cjs');
var _class = require('../../../../utils/dom/class.cjs');
var pickAttrs = require('../../../../utils/lang/pickAttrs.cjs');
var Overflow = require('../../../vc-overflow/src/Overflow.cjs');

const props = {
  id: String,
  prefixCls: String,
  values: vueTypes.default.array,
  open: {
    type: Boolean,
    default: void 0
  },
  searchValue: String,
  inputRef: vueTypes.default.any,
  placeholder: vueTypes.default.any,
  disabled: {
    type: Boolean,
    default: void 0
  },
  mode: String,
  showSearch: {
    type: Boolean,
    default: void 0
  },
  autofocus: {
    type: Boolean,
    default: void 0
  },
  autocomplete: String,
  activeDescendantId: String,
  tabindex: vueTypes.default.oneOfType([vueTypes.default.number, vueTypes.default.string]),
  removeIcon: vueTypes.default.any,
  choiceTransitionName: String,
  maxTagCount: vueTypes.default.oneOfType([vueTypes.default.number, vueTypes.default.string]),
  maxTagTextLength: Number,
  maxTagPlaceholder: vueTypes.default.any.def(() => (omittedValues) => `+ ${omittedValues.length} ...`),
  tagRender: Function,
  onToggleOpen: {
    type: Function
  },
  onRemove: Function,
  onInputChange: Function,
  onInputPaste: Function,
  onInputKeyDown: Function,
  onInputMouseDown: Function,
  onInputCompositionStart: Function,
  onInputCompositionEnd: Function
};
function onPreventMouseDown(event) {
  event.preventDefault();
  event.stopPropagation();
}
const SelectSelector = /* @__PURE__ */ vue.defineComponent({
  name: "MultipleSelectSelector",
  inheritAttrs: false,
  props,
  setup(props2) {
    const measureRef = vue.shallowRef();
    const inputWidth = vue.shallowRef(0);
    const focused = vue.shallowRef(false);
    const legacyTreeSelectContext = LegacyContext.default();
    const selectionPrefixCls = vue.computed(() => `${props2.prefixCls}-selection`);
    const inputValue = vue.computed(() => props2.open || props2.mode === "tags" ? props2.searchValue : "");
    const inputEditable = vue.computed(() => props2.mode === "tags" || props2.showSearch && (props2.open || focused.value));
    vue.onMounted(() => {
      vue.watch(inputValue, () => {
        inputWidth.value = measureRef.value.scrollWidth;
      }, {
        flush: "post",
        immediate: true
      });
    });
    function defaultRenderSelector(title, content, itemDisabled, closable, onClose) {
      return vue.createVNode("span", {
        "class": _class.classNames(`${selectionPrefixCls.value}-item`, {
          [`${selectionPrefixCls.value}-item-disabled`]: itemDisabled
        }),
        "title": typeof title === "string" || typeof title === "number" ? title.toString() : void 0
      }, [vue.createVNode("span", {
        "class": `${selectionPrefixCls.value}-item-content`
      }, [content]), closable && vue.createVNode(TransBtn.default, {
        "class": `${selectionPrefixCls.value}-item-remove`,
        "onMousedown": onPreventMouseDown,
        "onClick": onClose,
        "customizeIcon": props2.removeIcon
      }, {
        default: () => [vue.createTextVNode("\xD7")]
      })]);
    }
    function customizeRenderSelector(value, content, itemDisabled, closable, onClose, option) {
      var _a;
      const onMouseDown = (e) => {
        onPreventMouseDown(e);
        props2.onToggleOpen(!open);
      };
      let originData = option;
      if (legacyTreeSelectContext.keyEntities)
        originData = ((_a = legacyTreeSelectContext.keyEntities[value]) == null ? void 0 : _a.node) || {};
      return vue.createVNode("span", {
        "key": value,
        "onMousedown": onMouseDown
      }, [props2.tagRender({
        label: content,
        value,
        disabled: itemDisabled,
        closable,
        onClose,
        option: originData
      })]);
    }
    function renderItem(valueItem) {
      const {
        disabled: itemDisabled,
        label,
        value,
        option
      } = valueItem;
      const closable = !props2.disabled && !itemDisabled;
      let displayLabel = label;
      if (typeof props2.maxTagTextLength === "number") {
        if (typeof label === "string" || typeof label === "number") {
          const strLabel = String(displayLabel);
          if (strLabel.length > props2.maxTagTextLength)
            displayLabel = `${strLabel.slice(0, props2.maxTagTextLength)}...`;
        }
      }
      const onClose = (event) => {
        var _a;
        if (event)
          event.stopPropagation();
        (_a = props2.onRemove) == null ? void 0 : _a.call(props2, valueItem);
      };
      return typeof props2.tagRender === "function" ? customizeRenderSelector(value, displayLabel, itemDisabled, closable, onClose, option) : defaultRenderSelector(label, displayLabel, itemDisabled, closable, onClose);
    }
    function renderRest(omittedValues) {
      const {
        maxTagPlaceholder = (omittedValues2) => `+ ${omittedValues2.length} ...`
      } = props2;
      const content = typeof maxTagPlaceholder === "function" ? maxTagPlaceholder(omittedValues) : maxTagPlaceholder;
      return defaultRenderSelector(content, content, false);
    }
    return () => {
      const {
        id,
        prefixCls,
        values,
        open: open2,
        inputRef,
        placeholder,
        disabled,
        autofocus,
        autocomplete,
        activeDescendantId,
        tabindex,
        onInputChange,
        onInputPaste,
        onInputKeyDown,
        onInputMouseDown,
        onInputCompositionStart,
        onInputCompositionEnd
      } = props2;
      const inputNode = vue.createVNode("div", {
        "class": `${selectionPrefixCls.value}-search`,
        "style": {
          width: `${inputWidth.value}px`
        },
        "key": "input"
      }, [vue.createVNode(Input.default, {
        "inputRef": inputRef,
        "open": open2,
        "prefixCls": prefixCls,
        "id": id,
        "inputElement": null,
        "disabled": disabled,
        "autofocus": autofocus,
        "autocomplete": autocomplete,
        "editable": inputEditable.value,
        "activeDescendantId": activeDescendantId,
        "value": inputValue.value,
        "onKeydown": onInputKeyDown,
        "onMousedown": onInputMouseDown,
        "onChange": onInputChange,
        "onPaste": onInputPaste,
        "onCompositionstart": onInputCompositionStart,
        "onCompositionend": onInputCompositionEnd,
        "tabindex": tabindex,
        "attrs": pickAttrs.pickAttrs(props2, true),
        "onFocus": () => focused.value = true,
        "onBlur": () => focused.value = false
      }, null), vue.createVNode("span", {
        "ref": measureRef,
        "class": `${selectionPrefixCls.value}-search-mirror`,
        "aria-hidden": true
      }, [inputValue.value, vue.createTextVNode("\xA0")])]);
      const selectionNode = vue.createVNode(Overflow.default, {
        "prefixCls": `${selectionPrefixCls.value}-overflow`,
        "data": values,
        "renderItem": renderItem,
        "renderRest": renderRest,
        "suffix": inputNode,
        "itemKey": "key",
        "maxCount": props2.maxTagCount,
        "key": "overflow"
      }, null);
      return vue.createVNode(vue.Fragment, null, [selectionNode, !values.length && !inputValue.value && vue.createVNode("span", {
        "class": `${selectionPrefixCls.value}-placeholder`
      }, [placeholder])]);
    };
  }
});

exports.default = SelectSelector;
//# sourceMappingURL=MultipleSelector.cjs.map
