bkui-vue 0.0.2-beta.122 → 0.0.2-beta.123

package/lib/cascader/index.js

@@ -574,16 +574,20 @@ function usePopover(config, triggerRef) {
   };
 }
 function useRemoteSearch(method, callBack) {
-  var searchKey = useDebouncedRef('');
+  var customOptionName = useDebouncedRef(''); // 自定义创建选项（自定义创建也会触发搜索）
+  var searchValue = useDebouncedRef('');
+  var curSearchValue = computed(function () {
+    return searchValue.value || customOptionName.value;
+  });
   var searchLoading = ref(false);
-  watch(searchKey, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+  watch(curSearchValue, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           _context.prev = 0;
           searchLoading.value = true;
           _context.next = 4;
-          return method(searchKey.value);
+          return method(curSearchValue.value);
         case 4:
           searchLoading.value = false;
           _context.next = 10;
@@ -603,7 +607,9 @@ function useRemoteSearch(method, callBack) {
     }, _callee, null, [[0, 7, 10, 13]]);
   })));
   return {
-    searchKey: searchKey,
+    customOptionName: customOptionName,
+    searchValue: searchValue,
+    curSearchValue: curSearchValue,
     searchLoading: searchLoading
   };
 }

package/lib/select/common.d.ts

@@ -20,7 +20,9 @@ export declare function usePopover(config: IPopoverConfig, triggerRef: Ref<HTMLE
     showPopover: () => void;
 };
 export declare function useRemoteSearch(method: Function, callBack?: Function): {
-    searchKey: Ref<string>;
+    customOptionName: Ref<string>;
+    searchValue: Ref<string>;
+    curSearchValue: import("vue").ComputedRef<string>;
     searchLoading: Ref<boolean>;
 };
 export declare function toLowerCase(value?: string): string;

package/lib/select/index.d.ts

@@ -667,7 +667,8 @@ declare const BkSelect: {
             isShowSelectContent: import("vue").ComputedRef<boolean>;
             curContentText: import("vue").ComputedRef<string>;
             isGroup: import("vue").ComputedRef<boolean>;
-            searchKey: import("vue").Ref<string>;
+            searchValue: import("vue").Ref<string>;
+            customOptionName: import("vue").Ref<string>;
             isShowAll: import("vue").ComputedRef<boolean>;
             isShowSelectAll: import("vue").ComputedRef<boolean>;
             virtualHeight: import("vue").ComputedRef<number>;
@@ -826,7 +827,7 @@ declare const BkSelect: {
             localSearchPlaceholder: import("vue").ComputedRef<string>;
             localSelectAllText: import("vue").ComputedRef<string>;
             resolveClassName: (cls: string) => string;
-            handleCreateCustomOption: (val: string | number) => void;
+            handleCreateCustomOption: (val: string | number, e: KeyboardEvent) => void;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "select" | "toggle" | "clear" | "update:modelValue" | "scroll-end" | "tag-remove" | "deselect")[], string, {
             prefix: string;
             disabled: boolean;
@@ -1438,7 +1439,8 @@ declare const BkSelect: {
         isShowSelectContent: import("vue").ComputedRef<boolean>;
         curContentText: import("vue").ComputedRef<string>;
         isGroup: import("vue").ComputedRef<boolean>;
-        searchKey: import("vue").Ref<string>;
+        searchValue: import("vue").Ref<string>;
+        customOptionName: import("vue").Ref<string>;
         isShowAll: import("vue").ComputedRef<boolean>;
         isShowSelectAll: import("vue").ComputedRef<boolean>;
         virtualHeight: import("vue").ComputedRef<number>;
@@ -1597,7 +1599,7 @@ declare const BkSelect: {
         localSearchPlaceholder: import("vue").ComputedRef<string>;
         localSelectAllText: import("vue").ComputedRef<string>;
         resolveClassName: (cls: string) => string;
-        handleCreateCustomOption: (val: string | number) => void;
+        handleCreateCustomOption: (val: string | number, e: KeyboardEvent) => void;
     }> & {} & import("vue").ComponentCustomProperties & {};
     __isFragment?: never;
     __isTeleport?: never;
@@ -2154,7 +2156,8 @@ declare const BkSelect: {
     isShowSelectContent: import("vue").ComputedRef<boolean>;
     curContentText: import("vue").ComputedRef<string>;
     isGroup: import("vue").ComputedRef<boolean>;
-    searchKey: import("vue").Ref<string>;
+    searchValue: import("vue").Ref<string>;
+    customOptionName: import("vue").Ref<string>;
     isShowAll: import("vue").ComputedRef<boolean>;
     isShowSelectAll: import("vue").ComputedRef<boolean>;
     virtualHeight: import("vue").ComputedRef<number>;
@@ -2313,7 +2316,7 @@ declare const BkSelect: {
     localSearchPlaceholder: import("vue").ComputedRef<string>;
     localSelectAllText: import("vue").ComputedRef<string>;
     resolveClassName: (cls: string) => string;
-    handleCreateCustomOption: (val: string | number) => void;
+    handleCreateCustomOption: (val: string | number, e: KeyboardEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "select" | "toggle" | "clear" | "update:modelValue" | "scroll-end" | "tag-remove" | "deselect")[], "blur" | "change" | "focus" | "select" | "toggle" | "clear" | "update:modelValue" | "scroll-end" | "tag-remove" | "deselect", {
     prefix: string;
     disabled: boolean;

package/lib/select/index.js

@@ -661,16 +661,20 @@ function usePopover(config, triggerRef) {
   };
 }
 function useRemoteSearch(method, callBack) {
-  var searchKey = useDebouncedRef('');
+  var customOptionName = useDebouncedRef(''); // 自定义创建选项（自定义创建也会触发搜索）
+  var searchValue = useDebouncedRef('');
+  var curSearchValue = (0,external_vue_namespaceObject.computed)(function () {
+    return searchValue.value || customOptionName.value;
+  });
   var searchLoading = (0,external_vue_namespaceObject.ref)(false);
-  (0,external_vue_namespaceObject.watch)(searchKey, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee() {
+  (0,external_vue_namespaceObject.watch)(curSearchValue, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee() {
     return regenerator_default().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           _context.prev = 0;
           searchLoading.value = true;
           _context.next = 4;
-          return method(searchKey.value);
+          return method(curSearchValue.value);
         case 4:
           searchLoading.value = false;
           _context.next = 10;
@@ -690,7 +694,9 @@ function useRemoteSearch(method, callBack) {
     }, _callee, null, [[0, 7, 10, 13]]);
   })));
   return {
-    searchKey: searchKey,
+    customOptionName: customOptionName,
+    searchValue: searchValue,
+    curSearchValue: curSearchValue,
     searchLoading: searchLoading
   };
 }
@@ -1514,9 +1520,9 @@ function select_objectSpread(target) { for (var i = 1; i < arguments.length; i++
       return isRemoteSearch.value ? list.value : list.value.filter(function (item) {
         var _toLowerCase;
         if (hasFilterOptionFunc.value) {
-          return !!filterOption.value(searchKey.value, item);
+          return !!filterOption.value(curSearchValue.value, item);
         }
-        return (_toLowerCase = toLowerCase(String(item[displayKey.value]))) === null || _toLowerCase === void 0 ? void 0 : _toLowerCase.includes(toLowerCase(searchKey.value));
+        return (_toLowerCase = toLowerCase(String(item[displayKey.value]))) === null || _toLowerCase === void 0 ? void 0 : _toLowerCase.includes(toLowerCase(curSearchValue.value));
       });
     });
     // select组件是否禁用
@@ -1573,7 +1579,7 @@ function select_objectSpread(target) { for (var i = 1; i < arguments.length; i++
     });
     // 是否显示全选
     var isShowSelectAll = (0,external_vue_namespaceObject.computed)(function () {
-      return multiple.value && showSelectAll.value && (!searchKey.value || !filterable.value);
+      return multiple.value && showSelectAll.value && (!curSearchValue.value || !filterable.value);
     });
     var isShowAll = (0,external_vue_namespaceObject.computed)(function () {
       return multiple.value && showAll.value;
@@ -1651,7 +1657,7 @@ function select_objectSpread(target) { for (var i = 1; i < arguments.length; i++
       emit('toggle', isPopoverShow.value);
       if (!isShow) {
         if (!keepSearchValue.value) {
-          searchKey.value = '';
+          searchValue.value = '';
         }
         document.removeEventListener('keydown', handleDocumentKeydown);
       } else {
@@ -1704,7 +1710,9 @@ function select_objectSpread(target) { for (var i = 1; i < arguments.length; i++
       }
     };
     var _useRemoteSearch = useRemoteSearch(isRemoteSearch.value ? remoteMethod.value : defaultSearchMethod, initActiveOptionValue),
-      searchKey = _useRemoteSearch.searchKey,
+      searchValue = _useRemoteSearch.searchValue,
+      customOptionName = _useRemoteSearch.customOptionName,
+      curSearchValue = _useRemoteSearch.curSearchValue,
       searchLoading = _useRemoteSearch.searchLoading;
     // 派发change事件
     var emitChange = function emitChange(val) {
@@ -1718,22 +1726,25 @@ function select_objectSpread(target) { for (var i = 1; i < arguments.length; i++
       handleFocus();
       togglePopover();
     };
-    // 搜索
+    // 自定义创建
     var handleInputChange = function handleInputChange(value) {
       if (!filterable.value) return;
-      searchKey.value = value;
+      customOptionName.value = value;
     };
     // allow create(创建自定义选项)
-    var handleCreateCustomOption = function handleCreateCustomOption(val) {
+    var handleCreateCustomOption = function handleCreateCustomOption(val, e) {
       var value = String(val);
       if (!allowCreate.value || !value) return;
+      // 阻止触发鼠标事件
+      e.stopPropagation();
+      e.preventDefault();
       var matchedOption = options.value.find(function (data) {
         return toLowerCase(String(data.optionName)) === toLowerCase(value);
       });
       if (filterable.value && matchedOption) {
         // 开启搜索后，正好匹配到自定义选项，则不进行创建操作
         handleOptionSelected(matchedOption);
-        searchKey.value = '';
+        customOptionName.value = '';
         return;
       }
       var data = optionsMap.value.get(value);
@@ -1754,7 +1765,7 @@ function select_objectSpread(target) { for (var i = 1; i < arguments.length; i++
         emitChange(value);
         hidePopover();
       }
-      searchKey.value = '';
+      customOptionName.value = '';
     };
     // Option点击事件
     var handleOptionSelected = function handleOptionSelected(option) {
@@ -1980,7 +1991,7 @@ function select_objectSpread(target) { for (var i = 1; i < arguments.length; i++
         // 删除选项
         case 'Backspace':
           {
-            if (!multiple.value || !selected.value.length || searchKey.value.length || e.target === searchRef.value) return; // 单选和下拉搜索不支持回退键删除
+            if (!multiple.value || !selected.value.length || customOptionName.value.length || e.target === searchRef.value) return; // 单选和下拉搜索不支持回退键删除
             selected.value.pop();
             emitChange(selected.value.map(function (item) {
               return item.value;
@@ -2060,7 +2071,8 @@ function select_objectSpread(target) { for (var i = 1; i < arguments.length; i++
       isShowSelectContent: isShowSelectContent,
       curContentText: curContentText,
       isGroup: isGroup,
-      searchKey: searchKey,
+      searchValue: searchValue,
+      customOptionName: customOptionName,
       isShowAll: isShowAll,
       isShowSelectAll: isShowSelectAll,
       virtualHeight: virtualHeight,
@@ -2156,9 +2168,9 @@ function select_objectSpread(target) { for (var i = 1; i < arguments.length; i++
       if (_this.multipleMode === 'tag') {
         return (0,external_vue_namespaceObject.createVNode)(selectTagInput, {
           "ref": "selectTagInputRef",
-          "modelValue": _this.searchKey,
+          "modelValue": _this.customOptionName,
           "onUpdate:modelValue": function onUpdateModelValue($event) {
-            return _this.searchKey = $event;
+            return _this.customOptionName = $event;
           },
           "selected": _this.selected,
           "tagTheme": _this.tagTheme,
@@ -2183,7 +2195,7 @@ function select_objectSpread(target) { for (var i = 1; i < arguments.length; i++
       return (0,external_vue_namespaceObject.createVNode)(external_input_namespaceObject["default"], (0,external_vue_namespaceObject.mergeProps)({
         "ref": "inputRef",
         "type": "text",
-        "modelValue": _this.isInput ? _this.searchKey : _this.selectedLabel.join(','),
+        "modelValue": _this.isInput ? _this.customOptionName : _this.selectedLabel.join(','),
         "placeholder": _this.isInput ? _this.selectedLabel.join(',') || _this.localPlaceholder : _this.localPlaceholder,
         "readonly": !_this.isInput,
         "selectReadonly": true,
@@ -2238,9 +2250,9 @@ function select_objectSpread(target) { for (var i = 1; i < arguments.length; i++
         "class": _this.resolveClassName('select-search-input'),
         "placeholder": _this.localSearchPlaceholder,
         "onUpdate:modelValue": function onUpdateModelValue($event) {
-          return _this.searchKey = $event;
+          return _this.searchValue = $event;
         }
-      }, null), [[external_vue_namespaceObject.vModelText, _this.searchKey]])]), !_this.isShowSelectContent && (0,external_vue_namespaceObject.createVNode)("div", {
+      }, null), [[external_vue_namespaceObject.vModelText, _this.searchValue]])]), !_this.isShowSelectContent && (0,external_vue_namespaceObject.createVNode)("div", {
         "class": _this.resolveClassName('select-empty')
       }, [_this.searchLoading && (0,external_vue_namespaceObject.createVNode)(external_loading_namespaceObject["default"], {
         "class": "mr5",

package/lib/select/select.d.ts

@@ -541,7 +541,8 @@ declare const _default: import("vue").DefineComponent<{
     isShowSelectContent: import("vue").ComputedRef<boolean>;
     curContentText: import("vue").ComputedRef<string>;
     isGroup: import("vue").ComputedRef<boolean>;
-    searchKey: import("vue").Ref<string>;
+    searchValue: import("vue").Ref<string>;
+    customOptionName: import("vue").Ref<string>;
     isShowAll: import("vue").ComputedRef<boolean>;
     isShowSelectAll: import("vue").ComputedRef<boolean>;
     virtualHeight: import("vue").ComputedRef<number>;
@@ -700,7 +701,7 @@ declare const _default: import("vue").DefineComponent<{
     localSearchPlaceholder: import("vue").ComputedRef<string>;
     localSelectAllText: import("vue").ComputedRef<string>;
     resolveClassName: (cls: string) => string;
-    handleCreateCustomOption: (val: string | number) => void;
+    handleCreateCustomOption: (val: string | number, e: KeyboardEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "select" | "toggle" | "clear" | "update:modelValue" | "scroll-end" | "tag-remove" | "deselect")[], "blur" | "change" | "focus" | "select" | "toggle" | "clear" | "update:modelValue" | "scroll-end" | "tag-remove" | "deselect", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: import("vue-types").VueTypeValidableDef<any>;
     multiple: import("vue-types").VueTypeValidableDef<boolean> & {

package/lib/tag-input/index.js

@@ -1066,16 +1066,17 @@ function tag_input_objectSpread(target) { for (var i = 1; i < arguments.length;
         // 通知表单组件，可用于实时验证
         // this.dispatch('bk-form-item', 'form-blur')
         state.isEdit = false;
-        if (isSingleSelect.value) {
-          var _listState$tagListCac = _slicedToArray(listState.tagListCache, 1),
-            oldValue = _listState$tagListCac[0];
-          // 如果是单选，且input不为空，即保留了上次的结果则恢复
-          if (inputValue && inputValue === oldValue && listState.selectedTagListCache.length) {
-            addTag(listState.selectedTagListCache[0], 'select');
-          } else {
-            handleChange('remove');
+        if (props.allowAutoMatch && inputValue) {
+          if (isSingleSelect.value) {
+            var _listState$tagListCac = _slicedToArray(listState.tagListCache, 1),
+              oldValue = _listState$tagListCac[0];
+            // 如果是单选，且input不为空，即保留了上次的结果则恢复
+            if (inputValue === oldValue && listState.selectedTagListCache.length) {
+              addTag(listState.selectedTagListCache[0], 'select');
+            } else {
+              handleChange('remove');
+            }
           }
-        } else if (props.allowAutoMatch && inputValue) {
           // 如果匹配，则自动选则
           var matchItem = pageState.curPageList.find(function (item) {
             if (Array.isArray(props.searchKey)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bkui-vue",
-  "version": "0.0.2-beta.122",
+  "version": "0.0.2-beta.123",
   "workspaces": {
     "packages": [
       "packages/!(**.bak)*",