bkui-vue 2.0.1-beta.10 → 2.0.1-beta.100

package/lib/tag-input/index.d.ts

@@ -61,6 +61,11 @@ declare const TagInput: {
         } & {
             default: boolean;
         };
+        clearTextSpace: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
         maxData: import("vue-types").VueTypeValidableDef<number> & {
             default: number;
         } & {
@@ -155,6 +160,11 @@ declare const TagInput: {
                 } & {
                     default: boolean;
                 };
+                clickContentAutoHide: import("vue-types").VueTypeValidableDef<boolean> & {
+                    default: boolean;
+                } & {
+                    default: boolean;
+                };
                 width: import("vue-types").VueTypeDef<string | number> & {
                     default: string | number;
                 };
@@ -170,6 +180,9 @@ declare const TagInput: {
                 content: import("vue-types").VueTypeDef<string | number | HTMLElement | JSX.Element> & {
                     default: string | number | (() => HTMLElement) | (() => JSX.Element);
                 };
+                renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show"> & {
+                    default: "if" | "show";
+                };
                 target: import("vue-types").VueTypeDef<string | HTMLElement | PointerEvent>;
                 allowHtml: import("vue-types").VueTypeValidableDef<boolean> & {
                     default: boolean;
@@ -297,6 +310,7 @@ declare const TagInput: {
         bkTagSelectorRef: import("vue").Ref<any>;
         tagListRef: import("vue").Ref<any>;
         tagInputItemRef: import("vue").Ref<any>;
+        inputValueRef: import("vue").Ref<HTMLElement>;
         selectorListRef: import("vue").Ref<any>;
         triggerClass: import("vue").ComputedRef<{
             [x: string]: boolean;
@@ -318,7 +332,7 @@ declare const TagInput: {
         handleClear: (e: MouseEvent) => void;
         tagFocus: (e: MouseEvent) => void;
         handleKeydown: (e: KeyboardEvent) => void;
-        handlePaste: (e: ClipboardEvent) => boolean;
+        handlePaste: (e: ClipboardEvent) => void;
         resolveClassName: (cls: string) => string;
         curPage: import("vue").Ref<number>;
         totalSize: import("vue").Ref<number>;
@@ -404,6 +418,11 @@ declare const TagInput: {
         } & {
             default: boolean;
         };
+        clearTextSpace: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
         maxData: import("vue-types").VueTypeValidableDef<number> & {
             default: number;
         } & {
@@ -498,6 +517,11 @@ declare const TagInput: {
                 } & {
                     default: boolean;
                 };
+                clickContentAutoHide: import("vue-types").VueTypeValidableDef<boolean> & {
+                    default: boolean;
+                } & {
+                    default: boolean;
+                };
                 width: import("vue-types").VueTypeDef<string | number> & {
                     default: string | number;
                 };
@@ -513,6 +537,9 @@ declare const TagInput: {
                 content: import("vue-types").VueTypeDef<string | number | HTMLElement | JSX.Element> & {
                     default: string | number | (() => HTMLElement) | (() => JSX.Element);
                 };
+                renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show"> & {
+                    default: "if" | "show";
+                };
                 target: import("vue-types").VueTypeDef<string | HTMLElement | PointerEvent>;
                 allowHtml: import("vue-types").VueTypeValidableDef<boolean> & {
                     default: boolean;
@@ -649,6 +676,7 @@ declare const TagInput: {
         displayKey: string;
         hasDeleteIcon: boolean;
         useGroup: boolean;
+        clearTextSpace: boolean;
         maxData: number;
         maxResult: number;
         contentMaxHeight: number;
@@ -728,6 +756,11 @@ declare const TagInput: {
         } & {
             default: boolean;
         };
+        clearTextSpace: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
         maxData: import("vue-types").VueTypeValidableDef<number> & {
             default: number;
         } & {
@@ -822,6 +855,11 @@ declare const TagInput: {
                 } & {
                     default: boolean;
                 };
+                clickContentAutoHide: import("vue-types").VueTypeValidableDef<boolean> & {
+                    default: boolean;
+                } & {
+                    default: boolean;
+                };
                 width: import("vue-types").VueTypeDef<string | number> & {
                     default: string | number;
                 };
@@ -837,6 +875,9 @@ declare const TagInput: {
                 content: import("vue-types").VueTypeDef<string | number | HTMLElement | JSX.Element> & {
                     default: string | number | (() => HTMLElement) | (() => JSX.Element);
                 };
+                renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show"> & {
+                    default: "if" | "show";
+                };
                 target: import("vue-types").VueTypeDef<string | HTMLElement | PointerEvent>;
                 allowHtml: import("vue-types").VueTypeValidableDef<boolean> & {
                     default: boolean;
@@ -964,6 +1005,7 @@ declare const TagInput: {
         bkTagSelectorRef: import("vue").Ref<any>;
         tagListRef: import("vue").Ref<any>;
         tagInputItemRef: import("vue").Ref<any>;
+        inputValueRef: import("vue").Ref<HTMLElement>;
         selectorListRef: import("vue").Ref<any>;
         triggerClass: import("vue").ComputedRef<{
             [x: string]: boolean;
@@ -985,7 +1027,7 @@ declare const TagInput: {
         handleClear: (e: MouseEvent) => void;
         tagFocus: (e: MouseEvent) => void;
         handleKeydown: (e: KeyboardEvent) => void;
-        handlePaste: (e: ClipboardEvent) => boolean;
+        handlePaste: (e: ClipboardEvent) => void;
         resolveClassName: (cls: string) => string;
         curPage: import("vue").Ref<number>;
         totalSize: import("vue").Ref<number>;
@@ -1029,6 +1071,7 @@ declare const TagInput: {
         displayKey: string;
         hasDeleteIcon: boolean;
         useGroup: boolean;
+        clearTextSpace: boolean;
         maxData: number;
         maxResult: number;
         contentMaxHeight: number;
@@ -1105,6 +1148,11 @@ declare const TagInput: {
     } & {
         default: boolean;
     };
+    clearTextSpace: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     maxData: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
     } & {
@@ -1199,6 +1247,11 @@ declare const TagInput: {
             } & {
                 default: boolean;
             };
+            clickContentAutoHide: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
             width: import("vue-types").VueTypeDef<string | number> & {
                 default: string | number;
             };
@@ -1214,6 +1267,9 @@ declare const TagInput: {
             content: import("vue-types").VueTypeDef<string | number | HTMLElement | JSX.Element> & {
                 default: string | number | (() => HTMLElement) | (() => JSX.Element);
             };
+            renderDirective: import("vue-types").VueTypeValidableDef<"if" | "show"> & {
+                default: "if" | "show";
+            };
             target: import("vue-types").VueTypeDef<string | HTMLElement | PointerEvent>;
             allowHtml: import("vue-types").VueTypeValidableDef<boolean> & {
                 default: boolean;
@@ -1341,6 +1397,7 @@ declare const TagInput: {
     bkTagSelectorRef: import("vue").Ref<any>;
     tagListRef: import("vue").Ref<any>;
     tagInputItemRef: import("vue").Ref<any>;
+    inputValueRef: import("vue").Ref<HTMLElement>;
     selectorListRef: import("vue").Ref<any>;
     triggerClass: import("vue").ComputedRef<{
         [x: string]: boolean;
@@ -1362,7 +1419,7 @@ declare const TagInput: {
     handleClear: (e: MouseEvent) => void;
     tagFocus: (e: MouseEvent) => void;
     handleKeydown: (e: KeyboardEvent) => void;
-    handlePaste: (e: ClipboardEvent) => boolean;
+    handlePaste: (e: ClipboardEvent) => void;
     resolveClassName: (cls: string) => string;
     curPage: import("vue").Ref<number>;
     totalSize: import("vue").Ref<number>;
@@ -1406,6 +1463,7 @@ declare const TagInput: {
     displayKey: string;
     hasDeleteIcon: boolean;
     useGroup: boolean;
+    clearTextSpace: boolean;
     maxData: number;
     maxResult: number;
     contentMaxHeight: number;

package/lib/tag-input/index.js

@@ -10,6 +10,7 @@ import "../loading/loading.less";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_popover_9b03f19d__ from "../popover";
 import "../popover/popover.less";
 import * as __WEBPACK_EXTERNAL_MODULE_lodash_debounce_3540babe__ from "lodash/debounce";
+import * as __WEBPACK_EXTERNAL_MODULE_lodash_trim_5cdad98c__ from "lodash/trim";
 import * as __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__ from "vue-types";
 /******/ var __webpack_modules__ = ({
 
@@ -17478,6 +17479,10 @@ const popover_less_namespaceObject = popover_less_x({  });
 var debounce_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var debounce_y = x => () => x
 const debounce_namespaceObject = debounce_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_lodash_debounce_3540babe__["default"] });
+;// CONCATENATED MODULE: external "lodash/trim"
+var trim_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var trim_y = x => () => x
+const trim_namespaceObject = trim_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_lodash_trim_5cdad98c__["default"] });
 ;// CONCATENATED MODULE: ../../packages/tag-input/src/common.ts
 
 
@@ -17509,7 +17514,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * IN THE SOFTWARE.
  */
 
-var INPUT_MIN_WIDTH = 12;
+var INPUT_MIN_WIDTH = 10;
 function useDebouncedRef(value) {
   var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 200;
   var timeout;
@@ -17776,6 +17781,7 @@ var tagProps = function tagProps() {
     searchKey: shared_namespaceObject.PropTypes.oneOfType([shared_namespaceObject.PropTypes.string, shared_namespaceObject.PropTypes.arrayOf(shared_namespaceObject.PropTypes.string)]).def('name'),
     useGroup: shared_namespaceObject.PropTypes.bool.def(false),
     allowCreate: shared_namespaceObject.PropTypes.bool.def(false),
+    clearTextSpace: shared_namespaceObject.PropTypes.bool.def(true),
     maxData: shared_namespaceObject.PropTypes.number.def(-1),
     maxResult: shared_namespaceObject.PropTypes.number.def(10),
     contentMaxHeight: shared_namespaceObject.PropTypes.number.def(300),
@@ -17964,6 +17970,7 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
 
 
 
+
 /* harmony default export */ const tag_input = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'TagInput',
   directives: {
@@ -18004,6 +18011,7 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     var tagListRef = (0,external_vue_namespaceObject.ref)(null);
     var tagInputItemRef = (0,external_vue_namespaceObject.ref)(null);
     var selectorListRef = (0,external_vue_namespaceObject.ref)(null);
+    var inputValueRef = (0,external_vue_namespaceObject.ref)();
     var timer = (0,external_vue_namespaceObject.ref)(null);
     // 是否展示tag close
     var showTagClose = (0,external_vue_namespaceObject.computed)(function () {
@@ -18055,15 +18063,18 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
       if (props.useGroup) {
         var groupMap = {};
         pageState.curPageList.forEach(function (item, index) {
+          var _item$group, _item$group2, _groupMap$curGroupId;
+          var curGroupId = (_item$group = item.group) === null || _item$group === void 0 ? void 0 : _item$group.groupId;
+          var curGroupName = (_item$group2 = item.group) === null || _item$group2 === void 0 ? void 0 : _item$group2.groupName;
           item.__index__ = index;
-          if (!groupMap[item.group.groupId]) {
-            groupMap[item.group.groupId] = {
-              id: item.group.groupId,
-              name: item.group.groupName,
+          if (curGroupId && !groupMap[curGroupId]) {
+            groupMap[curGroupId] = {
+              id: curGroupId,
+              name: curGroupName,
               children: []
             };
           }
-          groupMap[item.group.groupId].children.push(item);
+          groupMap === null || groupMap === void 0 || (_groupMap$curGroupId = groupMap[curGroupId]) === null || _groupMap$curGroupId === void 0 || _groupMap$curGroupId.children.push(item);
         });
         return Object.keys(groupMap).map(function (key) {
           return groupMap[key];
@@ -18285,6 +18296,7 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     };
     var clearInput = function clearInput() {
       curInputValue.value = '';
+      tagInputRef.value.style.width = "".concat(INPUT_MIN_WIDTH, "px");
     };
     /**
      * 获取输入框元素位置
@@ -18295,7 +18307,10 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
         return 0;
       }
       var childNodes = getSelectedTagNodes();
-      var index = childNodes.findIndex(function (_ref4) {
+      // 聚焦的时候会存在空节点，导致backspace需要点击多次才能删除tag
+      var index = childNodes.filter(function (item) {
+        return item.className !== '';
+      }).findIndex(function (_ref4) {
         var id = _ref4.id;
         return id === 'tagInputItem';
       });
@@ -18323,7 +18338,11 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
         var charLen = getCharLength(value);
         if (charLen) {
           filterData(value);
-          tagInputRef.value.style.width = "".concat(charLen * INPUT_MIN_WIDTH, "px");
+          (0,external_vue_namespaceObject.nextTick)(function () {
+            // getBoundingClientRect获取宽度在中文输入法输入的时候会存在为0的情况，导致不显示输入的内容，按回车以后光标在最前面，所以需要提供默认值
+            var tagInputWidth = inputValueRef.value.getBoundingClientRect().width || charLen * INPUT_MIN_WIDTH;
+            tagInputRef.value.style.width = "".concat(tagInputWidth, "px");
+          });
         } else {
           if (trigger === 'focus') {
             filterData();
@@ -18361,8 +18380,6 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
             // 如果是单选，且input不为空，即保留了上次的结果则恢复
             if (inputValue === oldValue && listState.selectedTagListCache.length) {
               addTag(listState.selectedTagListCache[0], 'select');
-            } else {
-              handleChange('remove');
             }
           }
           // 如果匹配，则自动选则
@@ -18480,18 +18497,22 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
       swapElementPositions(tagInputItemRef.value, nodes[index - 1]);
       listState.selectedTagList.splice(index - 1, 1);
       focusInputTrigger();
-      var isExistInit = saveKeyMap.value[target[props.saveKey]];
+      var isExistInit = target && saveKeyMap.value[target[props.saveKey]];
       // 将删除的项加入加列表
       if ((props.allowCreate && isExistInit || !props.allowCreate) && !isSingleSelect.value) {
         listState.localList.push(target);
       }
-      tagInputRef.value = "".concat(INPUT_MIN_WIDTH, "px");
+      tagInputRef.value.style.width = "".concat(INPUT_MIN_WIDTH, "px");
       handleChange('remove');
     };
     var handleKeydown = function handleKeydown(e) {
       if (pageState.isPageLoading) {
         return;
       }
+      // 中文拼音输入事件
+      if (e.isComposing) {
+        return;
+      }
       var target;
       var val = e.target.value;
       var valLen = getCharLength(val);
@@ -18567,22 +18588,15 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     var defaultPasteFn = function defaultPasteFn(value) {
       var target = [];
       var textArr = value.split(';');
-      var regx = /^[a-zA-Z][a-zA-Z_]*/g;
       textArr.forEach(function (item) {
-        var matchValue = item.match(regx);
-        if (matchValue) {
-          var finalItem = matchValue.join('');
-          target.push(_defineProperty(_defineProperty({}, props.saveKey, finalItem), props.displayKey, finalItem));
+        if ((0,trim_namespaceObject["default"])(item)) {
+          target.push(_defineProperty(_defineProperty({}, props.saveKey, item), props.displayKey, item));
         }
       });
       return target;
     };
     var handlePaste = function handlePaste(e) {
       e.preventDefault();
-      // 单选禁止复制粘贴，防止粘贴多个tag
-      if (isSingleSelect.value) {
-        return false;
-      }
       var maxData = props.maxData,
         saveKey = props.saveKey,
         displayKey = props.displayKey,
@@ -18635,6 +18649,7 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
           focusInputTrigger();
         }
       }
+      clearInput();
     };
     /**
      * 已选中标签点击
@@ -18659,7 +18674,8 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
       var separator = props.separator,
         saveKey = props.saveKey,
         displayKey = props.displayKey,
-        createTagValidator = props.createTagValidator;
+        createTagValidator = props.createTagValidator,
+        clearTextSpace = props.clearTextSpace;
       var targetIndex = getTagInputItemSite();
       var moveCount = 1;
       var isSelected = false;
@@ -18690,7 +18706,9 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
         } else {
           var isObject = _typeof(item) === 'object';
           newValue = isObject ? item[saveKey] : item.trim();
-          newValue = newValue.replace(/\s+/g, '');
+          if (clearTextSpace) {
+            newValue = newValue.replace(/\s+/g, '');
+          }
           if (newValue !== undefined && !tagList.value.includes(newValue) && validateTag(newValue)) {
             var localItem = saveKeyMap.value[newValue] || (isObject ? item : _defineProperty(_defineProperty({}, saveKey, newValue), displayKey, newValue));
             listState.selectedTagList.splice(targetIndex, 0, localItem);
@@ -18769,6 +18787,7 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
       bkTagSelectorRef: bkTagSelectorRef,
       tagListRef: tagListRef,
       tagInputItemRef: tagInputItemRef,
+      inputValueRef: inputValueRef,
       selectorListRef: selectorListRef,
       triggerClass: triggerClass,
       overflowTagIndex: overflowTagIndex,
@@ -18845,6 +18864,7 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
           "onUpdate:modelValue": function onUpdateModelValue($event) {
             return _this.curInputValue = $event;
           },
+          "spellcheck": "false",
           "type": "text",
           "onBlur": _this.handleBlur,
           "onFocus": _this.handleFocus,
@@ -18857,7 +18877,11 @@ function tag_input_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
           "class": "tag"
         }, [(0,external_vue_namespaceObject.createVNode)("span", {
           "class": "text"
-        }, [(0,external_vue_namespaceObject.createTextVNode)("+"), _this.selectedTagList.length - _this.overflowTagIndex])])]), [[(0,external_vue_namespaceObject.resolveDirective)("bk-tooltips"), _this.collapseTooltip.join(', ')]])]), (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("p", {
+        }, [(0,external_vue_namespaceObject.createTextVNode)("+"), _this.selectedTagList.length - _this.overflowTagIndex])])]), [[(0,external_vue_namespaceObject.resolveDirective)("bk-tooltips"), _this.collapseTooltip.join(', ')]]), (0,external_vue_namespaceObject.createVNode)("div", {
+          "key": "inputValuePlaceholder",
+          "ref": "inputValueRef",
+          "style": "position: absolute; white-space: nowrap; border-box; visibility: hidden; z-index: 1"
+        }, [_this.curInputValue])]), (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("p", {
           "class": "placeholder"
         }, [_this.placeholderText]), [[external_vue_namespaceObject.vShow, _this.isShowPlaceholder]]), (_this$$slots$suffix = (_this$$slots = _this.$slots) === null || _this$$slots === void 0 || (_this$$slots$suffix2 = _this$$slots.suffix) === null || _this$$slots$suffix2 === void 0 ? void 0 : _this$$slots$suffix2.call(_this$$slots)) !== null && _this$$slots$suffix !== void 0 ? _this$$slots$suffix : _this.isShowClear && (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Close, {
           "class": "clear-icon",