bkui-vue 1.0.3-beta.54 → 1.0.3-beta.55

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 {
@@ -922,6 +982,7 @@ function _createClass(Constructor, protoProps, staticProps) {
  * IN THE SOFTWARE.
  */
 
+
 /**
  * @description: 获取menu list方法
  * @param {ISearchItem} item 已选择的key字段 为空则代表当前并未选择key字段
@@ -955,11 +1016,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;
   }
   _createClass(SelectedItem, [{
     key: "multiple",
@@ -1024,6 +1087,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 +1101,66 @@ 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(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 list = this.str2Values(str.split(/(\s|\||,|、|\/|\n\r|\n)/gm).filter(function (v) {
+        return !!v.trim();
+      }).concat(this.values.map(function (item) {
+        return mergeValues ? item.name : '';
+      })).filter(function (v) {
+        return !!v.trim();
+      }).join(this.logical));
+      this.values = list;
+    }
+  }, {
+    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() {
@@ -1315,9 +1439,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.
@@ -1403,7 +1528,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;
@@ -1414,13 +1540,14 @@ 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) {
@@ -1494,53 +1621,72 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
     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();
+          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();
-          return;
+    function handleInputFocus() {
+      if (props.mode === SearchInputMode.EDIT && usingItem.value && !isFocus.value) {
+        var range = document.createRange();
+        var selection = window.getSelection();
+        var nodeList = [];
+        if (usingItem.value.values.length) {
+          nodeList = Array.from(inputRef.value.querySelectorAll('[data-type="value"]'));
+        } else {
+          nodeList = Array.from(inputRef.value.querySelectorAll("[data-type=\"".concat(usingItem.value.type, "\"]")));
         }
-        if (outerText || !((_text = text) !== null && _text !== void 0 && _text.length)) {
-          usingItem.value = null;
+        if (!nodeList.length) return;
+        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 clipboardData = event.clipboardData;
+      var pastedData = clipboardData.getData('text');
+      var tempDiv = document.createElement('div');
+      tempDiv.innerHTML = pastedData;
+      var formattedText = (tempDiv.textContent || tempDiv.innerText || '').trim();
+      if (!usingItem.value) {
+        var formateItem = str2SeletedItem(formattedText);
+        if (formateItem) {
+          usingItem.value = formateItem;
+          setInputFocus(true, true);
+          return;
         }
-        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(/(\s|\||,|、|\/|\n\r|\n)/gm).filter(function (v) {
+          return !!v.trim();
+        }).join(valueLoagic.value);
+        inputRef.value.innerText = keyword.value;
         setInputFocus();
         debounceSetMenuList();
+        return;
+      }
+      usingItem.value.addValues(formattedText);
+      debounceSetMenuList();
+    }
+    function handleInputChange(event) {
+      var text = event.target.innerText;
+      if (!usingItem.value) {
+        keyword.value = text;
+        debounceSetMenuList();
+        return;
       }
+      keyword.value = usingItem.value.isSpecialType() ? text.trim() : text.replace(usingItem.value.name, '').replace(':', '').trim();
+      debounceSetMenuList();
     }
     function handleInputKeyup(event) {
       switch (event.code) {
@@ -1549,10 +1695,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;
@@ -1563,7 +1711,8 @@ 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 _keyword$value, _usingItem$value4, _usingItem$value5;
+        var formatItem, valueList, _res, _valueList, _formatItem, _res2, res;
         return regenerator_default().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -1575,7 +1724,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
               });
             case 3:
               if (usingItem.value) {
-                _context.next = 16;
+                _context.next = 17;
                 break;
               }
               if (!(!keyword.value || props.valueBehavior === ValueBehavior.NEEDKEY)) {
@@ -1584,43 +1733,54 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
               }
               return _context.abrupt("return");
             case 6:
-              value = {
+              formatItem = str2SeletedItem(keyword.value);
+              valueList = (formatItem === null || formatItem === void 0 ? void 0 : formatItem.values) || [{
                 id: keyword.value,
                 name: keyword.value
-              };
-              _context.next = 9;
-              return validateUsingItemValues(value);
-            case 9:
+              }];
+              _context.next = 10;
+              return Promise.all(valueList.map(function (item) {
+                return validateUsingItemValues(item);
+              })).then(function () {
+                return true;
+              })["catch"](function () {
+                return false;
+              });
+            case 10:
               _res = _context.sent;
               if (_res) {
-                _context.next = 12;
+                _context.next = 13;
                 break;
               }
               return _context.abrupt("return");
-            case 12:
-              emit('add', new SelectedItem(value, 'text'));
+            case 13:
+              emit('add', formatItem || new SelectedItem(_objectSpread({}, valueList[0]), '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;
-              }
+              return _context.abrupt("return", true);
+            case 17:
               if (!((_keyword$value = keyword.value) !== null && _keyword$value !== void 0 && _keyword$value.length)) {
-                _context.next = 41;
+                _context.next = 32;
                 break;
               }
-              if (!keyword.value.includes(valueLoagic.value)) {
-                _context.next = 29;
-                break;
+              _valueList = [];
+              if (usingItem.value.isSpecialType()) {
+                _formatItem = str2SeletedItem(keyword.value);
+                if (_formatItem) {
+                  usingItem.value = _formatItem;
+                  _valueList = _formatItem.values;
+                }
+              }
+              if (!_valueList.length) {
+                _valueList = usingItem.value.str2Values(keyword.value);
               }
-              valueList = keyword.value.split(valueLoagic.value);
               _context.next = 23;
-              return validateUsingItemValues({
-                id: keyword.value,
-                name: keyword.value
+              return Promise.all(_valueList.map(function (item) {
+                return validateUsingItemValues(item);
+              })).then(function () {
+                return true;
+              })["catch"](function () {
+                return false;
               });
             case 23:
               _res2 = _context.sent;
@@ -1630,77 +1790,38 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
               }
               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;
+              if (usingItem.value.type === 'text') {
+                usingItem.value.name = keyword.value;
+                usingItem.value.id = keyword.value;
+              } else {
+                usingItem.value.values = _valueList;
               }
-              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;
-                break;
-              }
-              _value2 = {
-                id: keyword.value,
-                name: keyword.value
-              };
-              _context.next = 47;
-              return validateUsingItemValues(_value2);
-            case 47:
-              _res4 = _context.sent;
-              if (_res4) {
-                _context.next = 50;
+              return _context.abrupt("return", true);
+            case 32:
+              if (!(!((_usingItem$value4 = usingItem.value) !== null && _usingItem$value4 !== void 0 && _usingItem$value4.isSpecialType()) && ((_usingItem$value5 = usingItem.value) === null || _usingItem$value5 === void 0 || (_usingItem$value5 = _usingItem$value5.values) === null || _usingItem$value5 === void 0 ? void 0 : _usingItem$value5.length) < 1)) {
+                _context.next = 35;
                 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 = true;
+              return _context.abrupt("return", false);
+            case 35:
+              _context.next = 37;
               return validateUsingItemValues();
-            case 58:
+            case 37:
               res = _context.sent;
               if (res) {
-                _context.next = 61;
+                _context.next = 40;
                 break;
               }
-              return _context.abrupt("return");
-            case 61:
+              return _context.abrupt("return", false);
+            case 40:
               setSelectedItem();
-            case 62:
+              return _context.abrupt("return", false);
+            case 42:
             case "end":
               return _context.stop();
           }
@@ -1708,22 +1829,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) {
+        // if (hasSelectAllContent) {
+        // }
+        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) {
@@ -1738,8 +1868,8 @@ 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$value7, _usingItem$value8;
+        var _item$realId2, _item$realId, seleted, _res3, isCondition, res;
         return regenerator_default().wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
@@ -1754,7 +1884,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
               seleted = new SelectedItem(_objectSpread(_objectSpread({}, item), {}, {
                 id: (_item$realId = item.realId) !== null && _item$realId !== void 0 ? _item$realId : item.id
               }), type);
-              seleted.addValue(item.value);
+              seleted.addValues(item.value.name, false);
               setSelectedItem(seleted);
               if (props.valueBehavior === ValueBehavior.NEEDKEY && menuHoverId.value) {
                 setInputFocus(true);
@@ -1765,12 +1895,14 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
               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);
+              usingItem.value.addValues(item.value.name, false);
               _context2.next = 12;
-              return validateUsingItemValues(item.value);
+              return Promise.all(usingItem.value.values.map(function (v) {
+                return validateUsingItemValues(v);
+              }));
             case 12:
-              _res5 = _context2.sent;
-              if (_res5) {
+              _res3 = _context2.sent;
+              if (_res3) {
                 _context2.next = 16;
                 break;
               }
@@ -1782,7 +1914,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
               setInputFocus(true);
               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))) {
+              if (usingItem.value) {
                 _context2.next = 28;
                 break;
               }
@@ -1794,7 +1926,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
               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')) {
+              if (!(((_usingItem$value6 = usingItem.value) === null || _usingItem$value6 === void 0 ? void 0 : _usingItem$value6.type) === 'condition')) {
                 _context2.next = 32;
                 break;
               }
@@ -1802,22 +1934,23 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
               setSelectedItem();
               return _context2.abrupt("return");
             case 32:
-              usingItem.value.addValue(item);
-              _context2.next = 35;
+              (_usingItem$value7 = usingItem.value) === null || _usingItem$value7 === void 0 || _usingItem$value7.addValue(item);
+              keyword.value = '';
+              _context2.next = 36;
               return validateUsingItemValues(item);
-            case 35:
+            case 36:
               res = _context2.sent;
               if (res) {
-                _context2.next = 38;
+                _context2.next = 39;
                 break;
               }
               return _context2.abrupt("return");
-            case 38:
+            case 39:
               if (!usingItem.value.multiple) setSelectedItem();
-              if (props.valueBehavior === ValueBehavior.NEEDKEY && (_usingItem$value15 = usingItem.value) !== null && _usingItem$value15 !== void 0 && _usingItem$value15.multiple) {
+              if (props.valueBehavior === ValueBehavior.NEEDKEY && (_usingItem$value8 = usingItem.value) !== null && _usingItem$value8 !== void 0 && _usingItem$value8.multiple) {
                 setInputFocus();
               }
-            case 40:
+            case 41:
             case "end":
               return _context2.stop();
           }
@@ -1829,10 +1962,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;
@@ -1848,7 +1981,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
     }
     function _validateUsingItemValues() {
       _validateUsingItemValues = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee3(value) {
-        var _usingItem$value16, searchItem, validate, values;
+        var _usingItem$value9, searchItem, validate, values;
         return regenerator_default().wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
@@ -1861,7 +1994,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
             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;
+              _usingItem$value9 = usingItem.value, searchItem = _usingItem$value9.searchItem, validate = _usingItem$value9.validate, values = _usingItem$value9.values;
               if (!(validate && typeof props.validateValues === 'function')) {
                 _context3.next = 9;
                 break;
@@ -1914,47 +2047,24 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
       }));
       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);
-    }
     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 _usingItem$value10, _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' && (typeof ((_usingItem$value10 = usingItem.value) === null || _usingItem$value10 === void 0 || (_usingItem$value10 = _usingItem$value10.searchItem) === null || _usingItem$value10 === void 0 ? void 0 : _usingItem$value10.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:
@@ -2015,7 +2125,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());
                 });
@@ -2040,35 +2150,66 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
       }));
       return _setMenuList.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();
-      }
-    }
-    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) || '';
-      }
+      if (!inputRef.value) return;
+      inputRef.value.innerText = '';
     }
     function handleLogicalChange(logical) {
       if (!usingItem.value) return;
       usingItem.value.logical = logical;
     }
+    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 inputFocusForWrapper() {
+      var _inputRef$value2;
+      (_inputRef$value2 = inputRef.value) === null || _inputRef$value2 === void 0 || _inputRef$value2.focus();
+    }
     // expose
     expose({
+      inputFocusForWrapper: inputFocusForWrapper,
       handleInputFocus: handleInputFocus,
       isFocus: isFocus
     });
@@ -2089,6 +2230,7 @@ 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,
@@ -2117,7 +2259,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": {
@@ -2129,13 +2271,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]);
       }
@@ -2154,8 +2320,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,
@@ -2528,7 +2694,10 @@ var SearchSelectProps = {
       onEditEnter: onEditEnter,
       onEditBlur: onEditBlur,
       onValidate: onValidate,
-      editKey: editKey
+      editKey: editKey,
+      searchData: (0,external_vue_namespaceObject.computed)(function () {
+        return props.data;
+      })
     });
     function onEditClick(item, index) {
       editKey.value = "".concat(item.id, "_").concat(index);
@@ -2580,7 +2749,7 @@ var SearchSelectProps = {
     }
     function handleWrapClick() {
       if (!editKey.value) {
-        inputRef.value.handleInputFocus();
+        inputRef.value.inputFocusForWrapper();
       }
     }
     function handleClearAll() {