bkui-vue 1.0.3-beta.60.scrollbar.5 → 1.0.3-beta.61.dialog.1

package/lib/search-select/index.js

@@ -480,7 +480,7 @@ function _defineProperty(obj, key, value) {
 ;// CONCATENATED MODULE: external "vue"
 var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_vue_y = x => () => x
-const external_vue_namespaceObject = external_vue_x({ ["Fragment"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Fragment, ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createTextVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createTextVNode, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["inject"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.inject, ["onBeforeUnmount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["provide"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.provide, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["resolveDirective"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.resolveDirective, ["shallowRef"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.shallowRef, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch, ["watchEffect"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watchEffect, ["withDirectives"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.withDirectives });
+const external_vue_namespaceObject = external_vue_x({ ["Fragment"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Fragment, ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createTextVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createTextVNode, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["inject"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.inject, ["nextTick"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.nextTick, ["onBeforeUnmount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["provide"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.provide, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["resolveDirective"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.resolveDirective, ["shallowRef"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.shallowRef, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch, ["withDirectives"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.withDirectives });
 ;// CONCATENATED MODULE: ../../node_modules/resize-detector/esm/index.js
 var raf = null;
 function requestAnimationFrame (callback) {
@@ -809,6 +809,66 @@ const directives_namespaceObject = directives_x({ ["clickoutside"]: () => __WEBP
 var icon_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var icon_y = x => () => x
 const icon_namespaceObject = icon_x({ ["Close"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Close, ["Error"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Error, ["ExclamationCircleShape"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.ExclamationCircleShape, ["Search"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Search });
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/iterableToArrayLimit.js
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.js
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/nonIterableRest.js
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/slicedToArray.js
+
+
+
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -867,6 +927,27 @@ const radio_namespaceObject = radio_x({ ["default"]: () => __WEBPACK_EXTERNAL_MO
 var radio_less_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var radio_less_y = x => () => x
 const radio_less_namespaceObject = radio_less_x({  });
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/arrayWithoutHoles.js
+
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/iterableToArray.js
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/nonIterableSpread.js
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/toConsumableArray.js
+
+
+
+
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/classCallCheck.js
 function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
@@ -896,6 +977,7 @@ function _createClass(Constructor, protoProps, staticProps) {
 
 
 
+
 /*
  * Tencent is pleased to support the open source community by making
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
@@ -922,6 +1004,7 @@ function _createClass(Constructor, protoProps, staticProps) {
  * IN THE SOFTWARE.
  */
 
+
 /**
  * @description: 获取menu list方法
  * @param {ISearchItem} item 已选择的key字段 为空则代表当前并未选择key字段
@@ -933,6 +1016,11 @@ var ValueBehavior;
   ValueBehavior["ALL"] = "all";
   ValueBehavior["NEEDKEY"] = "need-key";
 })(ValueBehavior || (ValueBehavior = {}));
+var DeleteBehavior;
+(function (DeleteBehavior) {
+  DeleteBehavior["CHAR"] = "delete-char";
+  DeleteBehavior["VALUE"] = "delete-value";
+})(DeleteBehavior || (DeleteBehavior = {}));
 var SEARCH_SLECT_PROVIDER_KEY = Symbol('SEARCH_SLECT_PROVIDER_KEY');
 var useSearchSelectProvider = function useSearchSelectProvider(data) {
   (0,external_vue_namespaceObject.provide)(SEARCH_SLECT_PROVIDER_KEY, data);
@@ -945,6 +1033,8 @@ var SearchInputMode;
   SearchInputMode["DEFAULT"] = "default";
   SearchInputMode["EDIT"] = "edit";
 })(SearchInputMode || (SearchInputMode = {}));
+var ValueSplitRegex = /(\||,|、|\/|\r\n|\n)/gm;
+var ValueSplitTestRegex = /^(\||,|、|\/|\r\n|\n)$/;
 var SearchLogical;
 (function (SearchLogical) {
   SearchLogical["AND"] = "&";
@@ -955,11 +1045,13 @@ var SelectedItem = /*#__PURE__*/function () {
     var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'default';
     _classCallCheck(this, SelectedItem);
     _defineProperty(this, "values", []);
+    _defineProperty(this, "nameRenderkey", (0,shared_namespaceObject.random)(4));
     this.searchItem = searchItem;
     this.type = type;
     this.id = searchItem.id;
     this.name = searchItem.name;
     this.logical = searchItem.logical || SearchLogical.OR;
+    this.type = type;
   }
   return _createClass(SelectedItem, [{
     key: "multiple",
@@ -1024,6 +1116,7 @@ var SelectedItem = /*#__PURE__*/function () {
   }, {
     key: "addValue",
     value: function addValue(item) {
+      this.nameRenderkey = (0,shared_namespaceObject.random)(4);
       if (this.multiple) {
         var index = this.values.findIndex(function (val) {
           return val.id === item.id;
@@ -1037,6 +1130,69 @@ var SelectedItem = /*#__PURE__*/function () {
       }
       this.values = [item];
     }
+  }, {
+    key: "str2Values",
+    value: function str2Values(str) {
+      var _this = this;
+      var list = str === null || str === void 0 ? void 0 : str.split(this.logical).map(function (v) {
+        return v.trim();
+      }).filter(function (v) {
+        return v;
+      });
+      if (!(list !== null && list !== void 0 && list.length)) return [];
+      var findChildByName = function findChildByName(name) {
+        return _this.children.find(function (item) {
+          return item.name === name;
+        });
+      };
+      if (!this.multiple) {
+        var val = list.join(" ".concat(this.logical, " ")).trim();
+        var item = findChildByName(val);
+        return [{
+          id: item ? item.id : val,
+          name: item ? item.name : val,
+          disabled: !!(item !== null && item !== void 0 && item.disabled)
+        }];
+      }
+      // 对于多选情况，处理整个列表
+      return list.map(function (val) {
+        var existing = _this.values.find(function (item) {
+          return item.name === val;
+        });
+        if (existing) return existing;
+        var item = findChildByName(val);
+        return {
+          id: item ? item.id : val,
+          name: item ? item.name : val,
+          disabled: !!(item !== null && item !== void 0 && item.disabled)
+        };
+      });
+    }
+  }, {
+    key: "addValues",
+    value: function addValues(str) {
+      var mergeValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      var valuesFromStr = str.split(ValueSplitRegex).filter(function (v) {
+        return v.trim() && !ValueSplitTestRegex.test(v);
+      });
+      var currentValues = mergeValues ? this.values.map(function (item) {
+        return item.name;
+      }) : [];
+      var combinedValues = [].concat(_toConsumableArray(valuesFromStr), _toConsumableArray(currentValues));
+      var logicalString = combinedValues.filter(function (v) {
+        return v.trim();
+      }).join(this.logical);
+      this.values = this.str2Values(logicalString);
+    }
+  }, {
+    key: "getValue",
+    value: function getValue(str) {
+      return this.values.find(function (item) {
+        return item.id === str;
+      }) || this.values.find(function (item) {
+        return item.name === str;
+      });
+    }
   }, {
     key: "toValue",
     value: function toValue() {
@@ -1313,9 +1469,10 @@ var SelectedItem = /*#__PURE__*/function () {
 
 
 
+
+
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-
 /*
  * Tencent is pleased to support the open source community by making
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
@@ -1401,7 +1558,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
     var menuList = (0,external_vue_namespaceObject.ref)([]);
     var _useSearchSelectInjec = useSearchSelectInject(),
       editKey = _useSearchSelectInjec.editKey,
-      onValidate = _useSearchSelectInjec.onValidate;
+      onValidate = _useSearchSelectInjec.onValidate,
+      searchData = _useSearchSelectInjec.searchData;
     var valueLoagic = (0,external_vue_namespaceObject.computed)(function () {
       var _usingItem$value;
       return ((_usingItem$value = usingItem.value) === null || _usingItem$value === void 0 ? void 0 : _usingItem$value.logical) || SearchLogical.OR;
@@ -1412,26 +1570,25 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
       }
     });
     // effects
-    (0,external_vue_namespaceObject.watchEffect)(function () {
-      if (!keyword.value) {
-        setInputText();
-      }
-    }, {
-      flush: 'pre'
-    });
+    // watchEffect(
+    //   () => {
+    //     if (!keyword.value) {
+    //       setInputText();
+    //     }
+    //   },
+    //   { flush: 'pre' },
+    // );
     (0,external_vue_namespaceObject.watch)([menuList, showPopover], function () {
       var _menuList$value;
-      if ((_menuList$value = menuList.value) !== null && _menuList$value !== void 0 && _menuList$value.some(function (item) {
+      var shouldBindEvent = showPopover.value && ((_menuList$value = menuList.value) === null || _menuList$value === void 0 ? void 0 : _menuList$value.some(function (item) {
         return !item.disabled;
-      }) && showPopover.value) {
+      }));
+      if (shouldBindEvent) {
         if (!isBindEvent) {
-          if (props.valueBehavior === ValueBehavior.NEEDKEY) {
-            menuHoverId.value = menuList.value.find(function (item) {
-              return !item.disabled;
-            }).id;
-          } else {
-            menuHoverId.value = '';
-          }
+          var _menuList$value$find;
+          menuHoverId.value = props.valueBehavior === ValueBehavior.NEEDKEY ? ((_menuList$value$find = menuList.value.find(function (item) {
+            return !item.disabled;
+          })) === null || _menuList$value$find === void 0 ? void 0 : _menuList$value$find.id) || '' : '';
           isBindEvent = true;
           document.addEventListener('keydown', handleDocumentKeydown);
         }
@@ -1461,84 +1618,91 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
       e.preventDefault();
       (_inputRef$value = inputRef.value) === null || _inputRef$value === void 0 || _inputRef$value.blur();
       var len = menuList.value.length;
-      var i = len;
       var index = menuList.value.findIndex(function (set) {
         return set.id === menuHoverId.value;
       });
-      while (i >= 0) {
-        index = e.code === 'ArrowDown' ? index + 1 : index - 1;
-        // eslint-disable-next-line no-nested-ternary
-        index = index > len - 1 ? 0 : index < 0 ? len - 1 : index;
+      for (var tries = 0; tries < len; tries++) {
+        index = (index + (e.code === 'ArrowDown' ? 1 : -1) + len) % len;
         var item = menuList.value[index];
         if (item && !item.disabled) {
-          i = -1;
           var dom = document.getElementById(item.id);
           dom === null || dom === void 0 || dom.focus();
           menuHoverId.value = item.id;
-          return;
+          break;
         }
-        i -= 1;
       }
     }
     function documentEnterEvent(e) {
-      if (isBindEvent) {
-        e.preventDefault();
-        var item = menuList.value.find(function (item) {
-          return item.id === menuHoverId.value;
-        });
-        item && handleSelectItem(item);
-      }
+      if (!isBindEvent) return;
+      e.preventDefault();
+      var item = menuList.value.find(function (item) {
+        return item.id === menuHoverId.value;
+      });
+      item && handleSelectItem(item);
     }
     function handleClickOutside(e) {
       var _popoverRef$value, _props$clickOutside;
       if (!((_popoverRef$value = popoverRef.value) !== null && _popoverRef$value !== void 0 && _popoverRef$value.contains(e.target)) && (_props$clickOutside = props.clickOutside) !== null && _props$clickOutside !== void 0 && _props$clickOutside.call(props, e.target, popoverRef.value)) {
-        var _usingItem$value2, _usingItem$value3;
-        if ((_usingItem$value2 = usingItem.value) !== null && _usingItem$value2 !== void 0 && (_usingItem$value2 = _usingItem$value2.values) !== null && _usingItem$value2 !== void 0 && _usingItem$value2.length && (_usingItem$value3 = usingItem.value) !== null && _usingItem$value3 !== void 0 && _usingItem$value3.multiple) {
-          keyword.value = '';
-          handleKeyEnter();
+        if (props.mode === SearchInputMode.EDIT || usingItem.value) {
+          usingItem.value && handleKeyEnter().then(function (v) {
+            return v && clearInput();
+          });
+          if (!usingItem.value) {
+            emit('focus', false);
+          }
           return;
         }
-        showPopover.value = false;
         isFocus.value = false;
+        showPopover.value = false;
         emit('focus', isFocus.value);
       }
     }
-    function handleInputFocus(e) {
-      setInputFocus();
-      e && setMenuList();
-    }
-    function handleInputChange(event) {
-      var _usingItem$value5, _usingItem$value8;
-      clearInput();
-      var text = event.target.innerText;
-      if (/(\r|\n)/gm.test(text) || /\s{2}/gm.test(text)) {
-        var _usingItem$value4;
-        event.preventDefault();
-        text = text.replace(/(\r|\n)/gm, " ".concat(valueLoagic.value, " ")).replace(/\s{2}/gm, '');
-        inputRef.value.innerText = text;
-        setInputFocus();
-        keyword.value = text.replace(((_usingItem$value4 = usingItem.value) === null || _usingItem$value4 === void 0 ? void 0 : _usingItem$value4.keyInnerText) || '', '').trim();
-        debounceSetMenuList();
-      } else if (!keyword.value && text.length < (((_usingItem$value5 = usingItem.value) === null || _usingItem$value5 === void 0 || (_usingItem$value5 = _usingItem$value5.inputInnerText) === null || _usingItem$value5 === void 0 ? void 0 : _usingItem$value5.length) || 1)) {
-        var _usingItem$value6, _usingItem$value7, _usingItem$value$valu, _text;
-        var outerText = text.replace("\xA0", " ").replace(((_usingItem$value6 = usingItem.value) === null || _usingItem$value6 === void 0 ? void 0 : _usingItem$value6.keyInnerText.replace("\xA0", " ").trim()) || '', '').trim();
-        var hasKeyword = text && ((_usingItem$value7 = usingItem.value) === null || _usingItem$value7 === void 0 ? void 0 : _usingItem$value7.keyInnerText) && text.replace("\xA0", " ").includes(usingItem.value.keyInnerText.replace("\xA0", " ").trim());
-        if (hasKeyword && outerText && (_usingItem$value$valu = usingItem.value.values) !== null && _usingItem$value$valu !== void 0 && _usingItem$value$valu.length) {
-          keyword.value = outerText;
-          debounceSetMenuList();
+    function handleInputFocus() {
+      showNoSelectValueError.value = false;
+      if (props.mode === SearchInputMode.EDIT && usingItem.value && !isFocus.value) {
+        var nodeList = Array.from(inputRef.value.querySelectorAll("[data-type=\"".concat(usingItem.value.values.length ? 'value' : usingItem.value.type, "\"]")));
+        if (!nodeList.length) return;
+        var range = document.createRange();
+        var selection = window.getSelection();
+        range.selectNodeContents(nodeList.at(-1));
+        selection === null || selection === void 0 || selection.removeAllRanges();
+        selection.addRange(range); // 注意这里会触发focu事件
+        setInputFocus(true, false);
+        return;
+      }
+      setMenuList();
+      setInputFocus(false, !isFocus.value);
+    }
+    function handleInputPaste(event) {
+      event.preventDefault();
+      var formattedText = event.clipboardData.getData('text').trim();
+      if (!usingItem.value) {
+        var formateItem = str2SeletedItem(formattedText);
+        if (formateItem) {
+          usingItem.value = formateItem;
+          setInputFocus(true, true);
           return;
         }
-        if (outerText || !((_text = text) !== null && _text !== void 0 && _text.length)) {
-          usingItem.value = null;
-        }
-        keyword.value = outerText ? text : '';
-        debounceSetMenuList();
-      } else if (!((_usingItem$value8 = usingItem.value) !== null && _usingItem$value8 !== void 0 && (_usingItem$value8 = _usingItem$value8.values) !== null && _usingItem$value8 !== void 0 && _usingItem$value8.length)) {
-        var _usingItem$value9;
-        keyword.value = text.replace("\xA0", " ").replace(((_usingItem$value9 = usingItem.value) === null || _usingItem$value9 === void 0 ? void 0 : _usingItem$value9.keyInnerText.replace("\xA0", " ")) || '', '').trim();
+        keyword.value = formattedText.split(ValueSplitRegex).filter(function (v) {
+          return v.trim() && !ValueSplitTestRegex.test(v);
+        }).join(" ".concat(valueLoagic.value, " "));
+        inputRef.value.innerText = keyword.value;
         setInputFocus();
         debounceSetMenuList();
+        return;
+      }
+      usingItem.value.addValues(formattedText);
+      debounceSetMenuList();
+    }
+    function handleInputChange(event) {
+      var text = event.target.innerText.trim();
+      if (!usingItem.value) {
+        keyword.value = text;
+        debounceSetMenuList();
+        return;
       }
+      keyword.value = usingItem.value.isSpecialType() ? text : text.replace(usingItem.value.name, '').replace(':', '').trim();
+      debounceSetMenuList();
     }
     function handleInputKeyup(event) {
       switch (event.code) {
@@ -1547,10 +1711,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
           if (props.valueBehavior === ValueBehavior.NEEDKEY && menuList.value.some(function (item) {
             return item.id === menuHoverId.value;
           })) return;
-          handleKeyEnter(event);
+          handleKeyEnter(event).then(function (v) {
+            return v && clearInput();
+          });
           break;
         case 'Backspace':
-          handleKeyBackspace();
+          handleKeyBackspace(event);
         default:
           showNoSelectValueError.value = false;
           break;
@@ -1561,19 +1727,20 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
     }
     function _handleKeyEnter() {
       _handleKeyEnter = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee(event) {
-        var value, _res, values, _keyword$value, valueList, _res2, _value, _res3, _value2, _res4, res;
+        var _usingItem$value4, _usingItem$value5;
+        var isValid;
         return regenerator_default().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               event === null || event === void 0 || event.preventDefault();
-              // resolve 中文输入时直接按下enter的错误表现
+              // 异步延迟解决确保响应时机问题
               _context.next = 3;
-              return new Promise(function (r) {
-                return setTimeout(r, 0);
+              return new Promise(function (resolve) {
+                return setTimeout(resolve, 0);
               });
             case 3:
               if (usingItem.value) {
-                _context.next = 16;
+                _context.next = 9;
                 break;
               }
               if (!(!keyword.value || props.valueBehavior === ValueBehavior.NEEDKEY)) {
@@ -1582,123 +1749,40 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
               }
               return _context.abrupt("return");
             case 6:
-              value = {
-                id: keyword.value,
-                name: keyword.value
-              };
-              _context.next = 9;
-              return validateUsingItemValues(value);
+              _context.next = 8;
+              return enterNewItemSelected();
+            case 8:
+              return _context.abrupt("return", _context.sent);
             case 9:
-              _res = _context.sent;
-              if (_res) {
-                _context.next = 12;
-                break;
-              }
-              return _context.abrupt("return");
-            case 12:
-              emit('add', new SelectedItem(value, 'text'));
-              keyword.value = '';
-              setMenuList();
-              return _context.abrupt("return");
-            case 16:
-              values = usingItem.value.values;
-              if (values !== null && values !== void 0 && values.length) {
-                _context.next = 43;
-                break;
-              }
-              if (!((_keyword$value = keyword.value) !== null && _keyword$value !== void 0 && _keyword$value.length)) {
-                _context.next = 41;
-                break;
-              }
-              if (!keyword.value.includes(valueLoagic.value)) {
-                _context.next = 29;
-                break;
-              }
-              valueList = keyword.value.split(valueLoagic.value);
-              _context.next = 23;
-              return validateUsingItemValues({
-                id: keyword.value,
-                name: keyword.value
-              });
-            case 23:
-              _res2 = _context.sent;
-              if (_res2) {
-                _context.next = 26;
-                break;
-              }
-              return _context.abrupt("return");
-            case 26:
-              valueList.forEach(function (v) {
-                return usingItem.value.addValue({
-                  id: v,
-                  name: v
-                });
-              });
-              _context.next = 36;
-              break;
-            case 29:
-              _value = {
-                id: keyword.value,
-                name: keyword.value
-              };
-              _context.next = 32;
-              return validateUsingItemValues(_value);
-            case 32:
-              _res3 = _context.sent;
-              if (_res3) {
-                _context.next = 35;
-                break;
-              }
-              return _context.abrupt("return");
-            case 35:
-              usingItem.value.addValue(_value);
-            case 36:
-              emit('add', usingItem.value);
-              keyword.value = '';
-              usingItem.value = null;
-              setInputFocus(true);
-              return _context.abrupt("return");
-            case 41:
-              showNoSelectValueError.value = true;
-              return _context.abrupt("return");
-            case 43:
               if (!keyword.value) {
-                _context.next = 56;
+                _context.next = 13;
                 break;
               }
-              _value2 = {
-                id: keyword.value,
-                name: keyword.value
-              };
-              _context.next = 47;
-              return validateUsingItemValues(_value2);
-            case 47:
-              _res4 = _context.sent;
-              if (_res4) {
-                _context.next = 50;
+              _context.next = 12;
+              return enterExistingItemSelected();
+            case 12:
+              return _context.abrupt("return", _context.sent);
+            case 13:
+              if (!(!((_usingItem$value4 = usingItem.value) !== null && _usingItem$value4 !== void 0 && _usingItem$value4.isSpecialType()) && ((_usingItem$value5 = usingItem.value) === null || _usingItem$value5 === void 0 ? void 0 : _usingItem$value5.values.length) < 1)) {
+                _context.next = 16;
                 break;
               }
-              return _context.abrupt("return");
-            case 50:
-              usingItem.value.addValue(_value2);
-              emit('add', usingItem.value);
-              keyword.value = '';
-              usingItem.value = null;
-              setInputFocus(true);
-              return _context.abrupt("return");
-            case 56:
-              _context.next = 58;
+              showNoSelectValueError.value = !showNoSelectValueError.value;
+              return _context.abrupt("return", false);
+            case 16:
+              _context.next = 18;
               return validateUsingItemValues();
-            case 58:
-              res = _context.sent;
-              if (res) {
-                _context.next = 61;
+            case 18:
+              isValid = _context.sent;
+              if (isValid) {
+                _context.next = 21;
                 break;
               }
-              return _context.abrupt("return");
-            case 61:
+              return _context.abrupt("return", false);
+            case 21:
               setSelectedItem();
-            case 62:
+              return _context.abrupt("return", false);
+            case 23:
             case "end":
               return _context.stop();
           }
@@ -1706,22 +1790,31 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
       }));
       return _handleKeyEnter.apply(this, arguments);
     }
-    function handleKeyBackspace() {
-      var _usingItem$value10;
+    function handleKeyBackspace(event) {
+      var _usingItem$value2;
       // 删除已选择项
       if (!usingItem.value && !keyword.value) {
         emit('delete');
-        // eslint-disable-next-line @typescript-eslint/no-misused-promises
         setTimeout(setMenuList, 16);
         return;
       }
-      if ((_usingItem$value10 = usingItem.value) !== null && _usingItem$value10 !== void 0 && _usingItem$value10.values.length) {
-        var _usingItem$value11;
-        // 删除选项
-        if ((_usingItem$value11 = usingItem.value) !== null && _usingItem$value11 !== void 0 && _usingItem$value11.multiple || usingItem.value.isInValueList(usingItem.value.values[0]) || props.mode === SearchInputMode.EDIT && !keyword.value) {
-          usingItem.value.values.splice(-1, 1);
+      if ((_usingItem$value2 = usingItem.value) !== null && _usingItem$value2 !== void 0 && _usingItem$value2.values.length) {
+        var _usingItem$value$chil;
+        if (usingItem.value.type === 'text' || !((_usingItem$value$chil = usingItem.value.children) !== null && _usingItem$value$chil !== void 0 && _usingItem$value$chil.length)) return;
+        event.preventDefault();
+        var selection = window.getSelection();
+        if ((selection === null || selection === void 0 ? void 0 : selection.rangeCount) > 0) {
+          var _node;
+          var range = selection.getRangeAt(0);
+          var startPos = range.startContainer;
+          var node = startPos;
+          while (node && node.parentNode !== inputRef.value) {
+            node = node.parentNode;
+          }
+          var editIndex = ((_node = node) === null || _node === void 0 || (_node = _node.dataset) === null || _node === void 0 ? void 0 : _node.index) || -1;
+          usingItem.value.values.splice(+editIndex, 1);
           keyword.value = '';
-          setInputFocus();
+          setInputFocus(false, false);
           return;
         }
       } else if (!keyword.value) {
@@ -1736,86 +1829,78 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
     }
     function _handleSelectItem() {
       _handleSelectItem = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee2(item, type) {
-        var _item$value, _inputRef$value2, _usingItem$value14, _usingItem$value15;
-        var _item$realId2, _item$realId, seleted, _res5, isCondition, res;
+        var _item$value, _usingItem$value6, _usingItem$value9;
+        var _item$realId, selectedItem, _usingItem$value7, _usingItem$value8, isCondition;
         return regenerator_default().wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
               if (!((_item$value = item.value) !== null && _item$value !== void 0 && _item$value.id)) {
-                _context2.next = 20;
+                _context2.next = 18;
                 break;
               }
-              if (!(props.valueBehavior === ValueBehavior.NEEDKEY && item.value || !props.validateValues)) {
-                _context2.next = 8;
-                break;
-              }
-              seleted = new SelectedItem(_objectSpread(_objectSpread({}, item), {}, {
+              selectedItem = new SelectedItem(_objectSpread(_objectSpread({}, item), {}, {
                 id: (_item$realId = item.realId) !== null && _item$realId !== void 0 ? _item$realId : item.id
               }), type);
-              seleted.addValue(item.value);
-              setSelectedItem(seleted);
-              if (props.valueBehavior === ValueBehavior.NEEDKEY && menuHoverId.value) {
-                setInputFocus(true);
+              selectedItem.addValues(item.value.name, false);
+              if (!(props.valueBehavior === ValueBehavior.NEEDKEY && menuHoverId.value)) {
+                _context2.next = 8;
+                break;
               }
+              setSelectedItem(selectedItem);
+              setInputFocus(true);
               menuHoverId.value = '';
               return _context2.abrupt("return");
             case 8:
-              usingItem.value = new SelectedItem(_objectSpread(_objectSpread({}, item), {}, {
-                id: (_item$realId2 = item.realId) !== null && _item$realId2 !== void 0 ? _item$realId2 : item.id
-              }), type);
-              usingItem.value.addValue(item.value);
-              _context2.next = 12;
-              return validateUsingItemValues(item.value);
-            case 12:
-              _res5 = _context2.sent;
-              if (_res5) {
-                _context2.next = 16;
+              usingItem.value = selectedItem;
+              _context2.next = 11;
+              return validateUsingItemValues(usingItem.value.values);
+            case 11:
+              if (_context2.sent) {
+                _context2.next = 14;
                 break;
               }
               usingItem.value = null;
               return _context2.abrupt("return");
-            case 16:
+            case 14:
               setSelectedItem(usingItem.value);
-              menuHoverId.value = '';
               setInputFocus(true);
+              menuHoverId.value = '';
               return _context2.abrupt("return");
-            case 20:
-              if (!(!usingItem.value || !(inputRef !== null && inputRef !== void 0 && (_inputRef$value2 = inputRef.value) !== null && _inputRef$value2 !== void 0 && _inputRef$value2.innerText))) {
-                _context2.next = 28;
+            case 18:
+              if (!(!usingItem.value || ((_usingItem$value6 = usingItem.value) === null || _usingItem$value6 === void 0 ? void 0 : _usingItem$value6.type) === 'condition')) {
+                _context2.next = 26;
                 break;
               }
-              usingItem.value = new SelectedItem(item, type);
+              usingItem.value = new SelectedItem(item, type !== null && type !== void 0 ? type : (_usingItem$value7 = usingItem.value) === null || _usingItem$value7 === void 0 ? void 0 : _usingItem$value7.type);
               keyword.value = '';
-              isCondition = type === 'condition';
-              isCondition && setSelectedItem();
+              isCondition = ((_usingItem$value8 = usingItem.value) === null || _usingItem$value8 === void 0 ? void 0 : _usingItem$value8.type) === 'condition';
+              if (isCondition) {
+                setSelectedItem();
+              }
               showPopover.value = isCondition || !!usingItem.value.children.length;
               setInputFocus(props.valueBehavior === ValueBehavior.NEEDKEY && !!menuHoverId.value);
               return _context2.abrupt("return");
-            case 28:
-              if (!(((_usingItem$value14 = usingItem.value) === null || _usingItem$value14 === void 0 ? void 0 : _usingItem$value14.type) === 'condition')) {
-                _context2.next = 32;
-                break;
+            case 26:
+              if (usingItem.value) {
+                usingItem.value.addValue(item);
+                (0,external_vue_namespaceObject.nextTick)(deleteInputTextNode);
               }
-              usingItem.value = new SelectedItem(item, type);
-              setSelectedItem();
-              return _context2.abrupt("return");
-            case 32:
-              usingItem.value.addValue(item);
-              _context2.next = 35;
-              return validateUsingItemValues(item);
-            case 35:
-              res = _context2.sent;
-              if (res) {
-                _context2.next = 38;
+              _context2.next = 29;
+              return validateUsingItemValues(usingItem.value.values);
+            case 29:
+              if (_context2.sent) {
+                _context2.next = 31;
                 break;
               }
               return _context2.abrupt("return");
-            case 38:
-              if (!usingItem.value.multiple) setSelectedItem();
-              if (props.valueBehavior === ValueBehavior.NEEDKEY && (_usingItem$value15 = usingItem.value) !== null && _usingItem$value15 !== void 0 && _usingItem$value15.multiple) {
+            case 31:
+              if (!usingItem.value.multiple) {
+                setSelectedItem();
+              }
+              if (props.valueBehavior === ValueBehavior.NEEDKEY && (_usingItem$value9 = usingItem.value) !== null && _usingItem$value9 !== void 0 && _usingItem$value9.multiple) {
                 setInputFocus();
               }
-            case 40:
+            case 33:
             case "end":
               return _context2.stop();
           }
@@ -1827,10 +1912,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
       handleSelectItem(item, 'condition');
     }
     function handleMenuFooterClick(item) {
-      var _usingItem$value12;
+      var _usingItem$value3;
       switch (item.id) {
         case 'confirm':
-          if (!((_usingItem$value12 = usingItem.value) !== null && _usingItem$value12 !== void 0 && _usingItem$value12.values.length)) return;
+          if (!((_usingItem$value3 = usingItem.value) !== null && _usingItem$value3 !== void 0 && _usingItem$value3.values.length)) return;
           keyword.value = '';
           handleKeyEnter();
           break;
@@ -1840,119 +1925,110 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
           break;
       }
     }
+    function handleLogicalChange(logical) {
+      if (!usingItem.value) return;
+      usingItem.value.logical = logical;
+    }
     // functions
-    function validateUsingItemValues(_x4) {
-      return _validateUsingItemValues.apply(this, arguments);
+    function validateValues(_x4, _x5) {
+      return _validateValues.apply(this, arguments);
     }
-    function _validateUsingItemValues() {
-      _validateUsingItemValues = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee3(value) {
-        var _usingItem$value16, searchItem, validate, values;
+    function _validateValues() {
+      _validateValues = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee3(searchItem, value) {
+        var validateStr;
         return regenerator_default().wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
-              if (usingItem.value) {
-                _context3.next = 4;
+              if (!(typeof props.validateValues === 'function')) {
+                _context3.next = 14;
                 break;
               }
-              _context3.next = 3;
-              return validateValues(null, [value]);
-            case 3:
-              return _context3.abrupt("return", _context3.sent);
-            case 4:
-              _usingItem$value16 = usingItem.value, searchItem = _usingItem$value16.searchItem, validate = _usingItem$value16.validate, values = _usingItem$value16.values;
-              if (!(validate && typeof props.validateValues === 'function')) {
-                _context3.next = 9;
+              validateStr = '';
+              _context3.prev = 2;
+              _context3.next = 5;
+              return props.validateValues(searchItem !== null && searchItem !== void 0 ? searchItem : null, value);
+            case 5:
+              validateStr = _context3.sent;
+              _context3.next = 11;
+              break;
+            case 8:
+              _context3.prev = 8;
+              _context3.t0 = _context3["catch"](2);
+              validateStr = false;
+            case 11:
+              if (!(typeof validateStr === 'string' || validateStr === false)) {
+                _context3.next = 14;
                 break;
               }
-              _context3.next = 8;
-              return validateValues(searchItem, value ? [value] : values);
-            case 8:
-              return _context3.abrupt("return", _context3.sent);
-            case 9:
+              onValidate(validateStr || '校验错误');
+              return _context3.abrupt("return", false);
+            case 14:
               onValidate('');
               return _context3.abrupt("return", true);
-            case 11:
+            case 16:
             case "end":
               return _context3.stop();
           }
-        }, _callee3);
+        }, _callee3, null, [[2, 8]]);
       }));
-      return _validateUsingItemValues.apply(this, arguments);
-    }
-    function validateValues(_x5, _x6) {
       return _validateValues.apply(this, arguments);
     }
-    function _validateValues() {
-      _validateValues = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee4(searchItem, value) {
-        var _props$validateValues;
-        var validateStr;
+    function validateUsingItemValues(_x6) {
+      return _validateUsingItemValues.apply(this, arguments);
+    }
+    function _validateUsingItemValues() {
+      _validateUsingItemValues = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee4(preValues) {
+        var _usingItem$value10, searchItem, validate, values;
         return regenerator_default().wrap(function _callee4$(_context4) {
           while (1) switch (_context4.prev = _context4.next) {
             case 0:
-              _context4.next = 2;
-              return (_props$validateValues = props.validateValues) === null || _props$validateValues === void 0 ? void 0 : _props$validateValues.call(props, searchItem !== null && searchItem !== void 0 ? searchItem : null, value)["catch"](function () {
-                return false;
-              });
-            case 2:
-              validateStr = _context4.sent;
-              if (!(typeof validateStr === 'string' || validateStr === false)) {
-                _context4.next = 6;
+              if (usingItem.value) {
+                _context4.next = 4;
                 break;
               }
-              onValidate(validateStr || '校验错误');
-              return _context4.abrupt("return", false);
-            case 6:
+              _context4.next = 3;
+              return validateValues(null, preValues);
+            case 3:
+              return _context4.abrupt("return", _context4.sent);
+            case 4:
+              _usingItem$value10 = usingItem.value, searchItem = _usingItem$value10.searchItem, validate = _usingItem$value10.validate, values = _usingItem$value10.values;
+              if (!(validate && typeof props.validateValues === 'function')) {
+                _context4.next = 9;
+                break;
+              }
+              _context4.next = 8;
+              return validateValues(searchItem, preValues !== null && preValues !== void 0 ? preValues : values);
+            case 8:
+              return _context4.abrupt("return", _context4.sent);
+            case 9:
               onValidate('');
               return _context4.abrupt("return", true);
-            case 8:
+            case 11:
             case "end":
               return _context4.stop();
           }
         }, _callee4);
       }));
-      return _validateValues.apply(this, arguments);
-    }
-    function setInputFocus() {
-      var refleshMenuList = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      if (refleshMenuList) {
-        setTimeout(function () {
-          setMenuList();
-        }, 16);
-      }
-      isFocus.value = true;
-      showPopover.value = true;
-      showNoSelectValueError.value = false;
-      var timer = setTimeout(function () {
-        if (inputRef.value) {
-          inputRef.value.focus(); // 光标移至最后
-          var selection = window.getSelection();
-          if (selection.focusOffset === 0) {
-            selection.selectAllChildren(inputRef.value);
-            selection.collapseToEnd();
-          }
-        }
-        window.clearTimeout(timer);
-      }, 0);
-      emit('focus', isFocus.value);
+      return _validateUsingItemValues.apply(this, arguments);
     }
     function setMenuList() {
       return _setMenuList.apply(this, arguments);
     }
     function _setMenuList() {
       _setMenuList = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee5() {
-        var _usingItem$value17, _usingItem$value$valu2;
-        var list, _usingItem$value18, _keyword$value2, hoverItem;
+        var _props$data, _usingItem$value$sear, _usingItem$value$valu;
+        var list, _usingItem$value11, _keyword$value2, hoverItem;
         return regenerator_default().wrap(function _callee5$(_context5) {
           while (1) switch (_context5.prev = _context5.next) {
             case 0:
               list = [];
-              if (!(typeof props.getMenuList === 'function' && (typeof ((_usingItem$value17 = usingItem.value) === null || _usingItem$value17 === void 0 || (_usingItem$value17 = _usingItem$value17.searchItem) === null || _usingItem$value17 === void 0 ? void 0 : _usingItem$value17.async) === 'undefined' || usingItem.value.searchItem.async === true))) {
+              if (!(typeof props.getMenuList === 'function' && (!((_props$data = props.data) !== null && _props$data !== void 0 && _props$data.length) && !usingItem.value || usingItem.value && usingItem.value.type !== 'condition' && (((_usingItem$value$sear = usingItem.value.searchItem) === null || _usingItem$value$sear === void 0 ? void 0 : _usingItem$value$sear.async) === undefined || usingItem.value.searchItem.async === true)))) {
                 _context5.next = 9;
                 break;
               }
               loading.value = true;
               _context5.next = 5;
-              return props.getMenuList((_usingItem$value18 = usingItem.value) === null || _usingItem$value18 === void 0 ? void 0 : _usingItem$value18.searchItem, keyword.value)["catch"](function () {
+              return props.getMenuList((_usingItem$value11 = usingItem.value) === null || _usingItem$value11 === void 0 ? void 0 : _usingItem$value11.searchItem, keyword.value)["catch"](function () {
                 return [];
               });
             case 5:
@@ -2013,7 +2089,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
                 });
               } else if (usingItem.value.type === 'condition') {
                 list = props.conditions;
-              } else if (!((_usingItem$value$valu2 = usingItem.value.values) !== null && _usingItem$value$valu2 !== void 0 && _usingItem$value$valu2.length) || usingItem.value.multiple || props.mode === SearchInputMode.EDIT) {
+              } else if (!((_usingItem$value$valu = usingItem.value.values) !== null && _usingItem$value$valu !== void 0 && _usingItem$value$valu.length) || usingItem.value.multiple || props.mode === SearchInputMode.EDIT) {
                 list = usingItem.value.children.filter(function (item) {
                   return item.name.toLocaleLowerCase().includes(keyword.value.toLocaleLowerCase());
                 });
@@ -2038,35 +2114,193 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
       }));
       return _setMenuList.apply(this, arguments);
     }
+    function enterNewItemSelected() {
+      return _enterNewItemSelected.apply(this, arguments);
+    }
+    function _enterNewItemSelected() {
+      _enterNewItemSelected = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee6() {
+        var formatItem, valueList, res;
+        return regenerator_default().wrap(function _callee6$(_context6) {
+          while (1) switch (_context6.prev = _context6.next) {
+            case 0:
+              formatItem = str2SeletedItem(keyword.value);
+              valueList = (formatItem === null || formatItem === void 0 ? void 0 : formatItem.values) || [{
+                id: keyword.value,
+                name: keyword.value
+              }];
+              _context6.next = 4;
+              return validateUsingItemValues(valueList);
+            case 4:
+              res = _context6.sent;
+              if (res) {
+                _context6.next = 7;
+                break;
+              }
+              return _context6.abrupt("return");
+            case 7:
+              emit('add', formatItem || new SelectedItem(_objectSpread({}, valueList[0]), 'text'));
+              keyword.value = '';
+              setMenuList();
+              return _context6.abrupt("return", true);
+            case 11:
+            case "end":
+              return _context6.stop();
+          }
+        }, _callee6);
+      }));
+      return _enterNewItemSelected.apply(this, arguments);
+    }
+    function enterExistingItemSelected() {
+      return _enterExistingItemSelected.apply(this, arguments);
+    }
+    function _enterExistingItemSelected() {
+      _enterExistingItemSelected = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee7() {
+        var valueList, formatItem, isValid;
+        return regenerator_default().wrap(function _callee7$(_context7) {
+          while (1) switch (_context7.prev = _context7.next) {
+            case 0:
+              valueList = [];
+              if (usingItem.value.isSpecialType()) {
+                formatItem = str2SeletedItem(keyword.value);
+                if (formatItem) {
+                  usingItem.value = formatItem;
+                  valueList = formatItem.values;
+                }
+              }
+              valueList = valueList.length ? valueList : usingItem.value.str2Values(keyword.value);
+              _context7.next = 5;
+              return validateUsingItemValues(valueList);
+            case 5:
+              isValid = _context7.sent;
+              if (isValid) {
+                _context7.next = 8;
+                break;
+              }
+              return _context7.abrupt("return");
+            case 8:
+              if (usingItem.value.type === 'text') {
+                usingItem.value.name = keyword.value;
+                usingItem.value.id = keyword.value;
+              } else {
+                usingItem.value.values = valueList;
+              }
+              emit('add', usingItem.value);
+              keyword.value = '';
+              usingItem.value = null;
+              setInputFocus(true);
+              return _context7.abrupt("return", true);
+            case 14:
+            case "end":
+              return _context7.stop();
+          }
+        }, _callee7);
+      }));
+      return _enterExistingItemSelected.apply(this, arguments);
+    }
+    function setCursorToEnd() {
+      if (!inputRef.value) return;
+      var range = document.createRange();
+      var selection = window.getSelection();
+      range.selectNodeContents(inputRef.value);
+      range.collapse(false);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+    function setInputFocus() {
+      var refleshMenuList = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      var needCursorToEnd = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      if (refleshMenuList) {
+        setTimeout(setMenuList, 16);
+      }
+      isFocus.value = true;
+      showPopover.value = true;
+      showNoSelectValueError.value = false;
+      needCursorToEnd && (0,external_vue_namespaceObject.nextTick)(setCursorToEnd);
+      emit('focus', isFocus.value);
+    }
     function setSelectedItem(item) {
       emit('add', item !== null && item !== void 0 ? item : usingItem.value);
       usingItem.value = null;
       keyword.value = '';
-      setInputFocus(props.valueBehavior === ValueBehavior.NEEDKEY);
+      setInputFocus(true, true);
+      (0,external_vue_namespaceObject.nextTick)(clearInput);
     }
     function clearInput() {
-      var text = inputRef.value.innerText;
-      if (text[text.length - 1] === '\n' || text[0] === '\r') {
-        setInputText(text.slice(0, -1));
-        clearInput();
-      } else if (text[0] === '\n' || text[0] === '\r') {
-        setInputText(text.slice(1));
-        clearInput();
+      if (!inputRef.value) return;
+      keyword.value = '';
+      (0,external_vue_namespaceObject.nextTick)(function () {
+        return inputRef.value.innerText = '';
+      });
+    }
+    function str2SeletedItem(str) {
+      var _str$split = str.split(':'),
+        _str$split2 = _slicedToArray(_str$split, 2),
+        key = _str$split2[0],
+        value = _str$split2[1];
+      if (key !== null && key !== void 0 && key.trim()) {
+        var selectedItem = searchData.value.find(function (item) {
+          return item.name === key.trim();
+        });
+        if (selectedItem) {
+          var item = new SelectedItem(_objectSpread({}, selectedItem), 'default');
+          item.addValues(value);
+          return item;
+        }
       }
+      return undefined;
     }
-    function setInputText() {
-      var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-      if (inputRef.value) {
-        var _usingItem$value13;
-        inputRef.value.innerHTML = text || ((_usingItem$value13 = usingItem.value) === null || _usingItem$value13 === void 0 ? void 0 : _usingItem$value13.inputInnerHtml) || '';
+    function deleteInputTextNode() {
+      var _keyword$value;
+      if ((_keyword$value = keyword.value) !== null && _keyword$value !== void 0 && _keyword$value.length) {
+        keyword.value = '';
+        var nodes = Array.from(inputRef.value.childNodes);
+        nodes.forEach(function (node) {
+          var _node$textContent;
+          if (node.nodeType === Node.TEXT_NODE && (_node$textContent = node.textContent) !== null && _node$textContent !== void 0 && _node$textContent.trim()) {
+            inputRef.value.removeChild(node);
+          }
+        });
       }
     }
-    function handleLogicalChange(logical) {
-      if (!usingItem.value) return;
-      usingItem.value.logical = logical;
+    function inputFocusForWrapper() {
+      var _inputRef$value2;
+      (_inputRef$value2 = inputRef.value) === null || _inputRef$value2 === void 0 || _inputRef$value2.focus();
+    }
+    function inputEnterForWrapper() {
+      return _inputEnterForWrapper.apply(this, arguments);
+    }
+    function _inputEnterForWrapper() {
+      _inputEnterForWrapper = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee8() {
+        return regenerator_default().wrap(function _callee8$(_context8) {
+          while (1) switch (_context8.prev = _context8.next) {
+            case 0:
+              _context8.next = 2;
+              return handleKeyEnter().then(function (v) {
+                return v && clearInput();
+              });
+            case 2:
+              showPopover.value = false;
+              inputRef.value.blur();
+            case 4:
+            case "end":
+              return _context8.stop();
+          }
+        }, _callee8);
+      }));
+      return _inputEnterForWrapper.apply(this, arguments);
+    }
+    function inputClearForWrapper() {
+      keyword.value = '';
+      showNoSelectValueError.value = false;
+      showPopover.value = false;
+      usingItem.value = null;
+      (0,external_vue_namespaceObject.nextTick)(clearInput);
     }
     // expose
     expose({
+      inputFocusForWrapper: inputFocusForWrapper,
+      inputEnterForWrapper: inputEnterForWrapper,
+      inputClearForWrapper: inputClearForWrapper,
       handleInputFocus: handleInputFocus,
       isFocus: isFocus
     });
@@ -2087,12 +2321,17 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
       handleClickOutside: handleClickOutside,
       handleInputFocus: handleInputFocus,
       handleInputChange: handleInputChange,
+      handleInputPaste: handleInputPaste,
       handleLogicalChange: handleLogicalChange,
       handleInputKeyup: handleInputKeyup,
       handleSelectItem: handleSelectItem,
       handleSelectCondtionItem: handleSelectCondtionItem,
       handleMenuFooterClick: handleMenuFooterClick,
       resolveClassName: resolveClassName,
+      inputFocusForWrapper: inputFocusForWrapper,
+      inputEnterForWrapper: inputEnterForWrapper,
+      inputClearForWrapper: inputClearForWrapper,
+      deleteInputTextNode: deleteInputTextNode,
       t: t
     };
   },
@@ -2115,7 +2354,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
       }
     } : {});
     var inputContent = function inputContent() {
-      var _this$keyword2;
+      var _this$keyword2, _this$usingItem, _this$usingItem2;
       return (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("div", {
         "ref": "inputRef",
         "class": {
@@ -2127,13 +2366,37 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
         "data-placeholder": !inputInnerHtml && !_this.keyword ? _this.placeholder : '',
         "data-tips": placeholder || '',
         "spellcheck": "false",
+        "onPaste": _this.handleInputPaste,
         "onFocus": _this.handleInputFocus,
         "onInput": _this.handleInputChange,
         "onKeydown": _this.handleInputKeyup
-      }, null), [[(0,external_vue_namespaceObject.resolveDirective)("clickoutside"), _this.handleClickOutside]]);
+      }, [((_this$usingItem = _this.usingItem) === null || _this$usingItem === void 0 ? void 0 : _this$usingItem.name) && (!_this.usingItem.isSpecialType() ? (0,external_vue_namespaceObject.createVNode)("span", {
+        "data-key": _this.usingItem.name,
+        "data-type": _this.usingItem.type,
+        "key": _this.usingItem.nameRenderkey,
+        "onMousedown": function onMousedown(e) {
+          return e.preventDefault();
+        },
+        "contenteditable": false,
+        "style": {
+          color: '#979BA5'
+        }
+      }, [_this.usingItem.name, (0,external_vue_namespaceObject.createTextVNode)(":\xA0")]) : (0,external_vue_namespaceObject.createVNode)("span", {
+        "data-key": _this.usingItem.name,
+        "data-type": _this.usingItem.type,
+        "key": _this.usingItem.nameRenderkey
+      }, [_this.usingItem.name])), (_this$usingItem2 = _this.usingItem) === null || _this$usingItem2 === void 0 || (_this$usingItem2 = _this$usingItem2.values) === null || _this$usingItem2 === void 0 ? void 0 : _this$usingItem2.map(function (item, index) {
+        return (0,external_vue_namespaceObject.createVNode)("span", {
+          "key": index,
+          "data-key": item.name,
+          "data-type": "value",
+          "data-id": item.id,
+          "data-index": index
+        }, [index > 0 ? " ".concat(_this.usingItem.logical, " ") : '', item.name]);
+      })]), [[(0,external_vue_namespaceObject.resolveDirective)("clickoutside"), _this.handleClickOutside]]);
     };
     var popoverContent = function popoverContent() {
-      var _this$menuList2, _this$usingItem, _this$usingItem2;
+      var _this$menuList2, _this$usingItem3, _this$usingItem4;
       if (_this.loading) {
         return (0,external_vue_namespaceObject.createVNode)("div", null, [_this.t.loading]);
       }
@@ -2152,8 +2415,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
           return item.id;
         })) || [],
         "conditions": showCondition ? _this.conditions : [],
-        "logical": (_this$usingItem = _this.usingItem) === null || _this$usingItem === void 0 ? void 0 : _this$usingItem.logical,
-        "showLogical": (_this$usingItem2 = _this.usingItem) === null || _this$usingItem2 === void 0 ? void 0 : _this$usingItem2.showLogical,
+        "logical": (_this$usingItem3 = _this.usingItem) === null || _this$usingItem3 === void 0 ? void 0 : _this$usingItem3.logical,
+        "showLogical": (_this$usingItem4 = _this.usingItem) === null || _this$usingItem4 === void 0 ? void 0 : _this$usingItem4.showLogical,
         "onUpdate:logical": _this.handleLogicalChange,
         "onSelectItem": _this.handleSelectItem,
         "onSelectCondition": _this.handleSelectCondtionItem,
@@ -2232,6 +2495,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
   setup: function setup(_props, _ref) {
     var emit = _ref.emit;
     var inputRef = ref(null);
+    var selectedInputRef = ref(null);
     var _useSearchSelectInjec = useSearchSelectInject(),
       onEditClick = _useSearchSelectInjec.onEditClick,
       onEditEnter = _useSearchSelectInjec.onEditEnter,
@@ -2256,8 +2520,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
       if (isFocus) return;
       onEditBlur();
     }
-    function handleInputOutside() {
-      return true;
+    function handleInputOutside(target) {
+      var _selectedInputRef$val;
+      return !((_selectedInputRef$val = selectedInputRef.value) !== null && _selectedInputRef$val !== void 0 && _selectedInputRef$val.contains(target));
     }
     function copySeletedItem(item) {
       var newItem = new SelectedItem(item.searchItem, item.type);
@@ -2267,6 +2532,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
     }
     return {
       inputRef: inputRef,
+      selectedInputRef: selectedInputRef,
       editKey: editKey,
       copySeletedItem: copySeletedItem,
       handleDeleteSelected: handleDeleteSelected,
@@ -2281,7 +2547,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
     var contentComponent = function contentComponent(item, index) {
       return _this.editKey === "".concat(item.id, "_").concat(index) ? (0,external_vue_namespaceObject.createVNode)("div", {
         "class": "selected-input",
-        "key": _this.editKey.toString()
+        "key": _this.editKey.toString(),
+        "ref": "selectedInputRef"
       }, [(0,external_vue_namespaceObject.createVNode)(input, {
         "ref": "inputRef",
         "key": _this.editKey.toString(),
@@ -2410,6 +2677,13 @@ var SearchSelectProps = {
       return [ValueBehavior.ALL, ValueBehavior.NEEDKEY].includes(v);
     }
   }
+  // deleteBehavior: {
+  //   type: String as PropType<`${DeleteBehavior}`>,
+  //   default: DeleteBehavior.CHAR,
+  //   validator(v: DeleteBehavior) {
+  //     return [DeleteBehavior.CHAR, DeleteBehavior.VALUE].includes(v);
+  //   },
+  // },
 };
 /* harmony default export */ const search_select = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'SearchSelect',
@@ -2525,7 +2799,11 @@ var SearchSelectProps = {
       onEditEnter: onEditEnter,
       onEditBlur: onEditBlur,
       onValidate: onValidate,
-      editKey: editKey
+      editKey: editKey,
+      searchData: (0,external_vue_namespaceObject.computed)(function () {
+        return props.data;
+      }),
+      isClickOutside: handleInputOutside
     });
     function onEditClick(item, index) {
       editKey.value = "".concat(item.id, "_").concat(index);
@@ -2577,12 +2855,13 @@ var SearchSelectProps = {
     }
     function handleWrapClick() {
       if (!editKey.value) {
-        inputRef.value.handleInputFocus();
+        inputRef.value.inputFocusForWrapper();
       }
     }
     function handleClearAll() {
       selectedList.value = [];
       overflowIndex.value = -1;
+      inputRef.value.inputClearForWrapper();
       emit('update:modelValue', []);
     }
     function handleInputOutside(target) {
@@ -2614,6 +2893,7 @@ var SearchSelectProps = {
       isFocus.value = v;
     }
     function handleClickSearch(e) {
+      inputRef.value.inputEnterForWrapper();
       emit('search', e);
     }
     return {