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

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.css

@@ -1,126 +1,3 @@
-:root {
-  --bk-prefix: bk;
-  --popover-max-height: 216px;
-  --primary-color: #3a84ff;
-  --success-color: #2dcb56;
-  --warning-color: #ff9c01;
-  --danger-color: #ea3636;
-  --default-color: #63656e;
-  --gray-color: #979ba5;
-  --light-gray: #c4c6cc;
-  --white-color: white;
-  --whitesmoke-color: #fafbfd;
-  --disable-color: #dcdee5;
-  --disable-bg-color: #f9fafd;
-  --font-size-base: 12px;
-  --font-size-medium: 14px;
-  --font-size-large: 16px;
-  --line-height-base: 16px;
-  --line-height-medium: 16px;
-  --line-height-large: 18px;
-  --component-size-small: 26px;
-  --component-size-base: 32px;
-  --component-size-large: 40px;
-  --border-width-base: 1px;
-  --border-style-base: solid;
-  --border-radius-base: 2px;
-  --border-style-color: var(--light-gray);
-  --input-disabled-bg: #fafbfd;
-  --input-disabled-border: var(--disable-color);
-  --input-height-base: var(--component-size-base);
-  --input-color: var(--default-color);
-  --input-bg: white;
-  --input-border-color: var(--light-gray);
-  --input-broder-radius: 3px;
-  --input-shadow-color: #a3c5fd;
-  --input-horizontal-padding: 8px;
-  --input-block-color: #f5f7fa;
-  --input-block-hover-color: #eaebf0;
-  --input-icon-size: var(--font-size-medium);
-  --input-maxlength-color: #979ba5;
-  --button-primary-hover-color: #5594fa;
-  --button-danger-hover-color: #ff5656;
-  --button-success-hover-color: #45e35f;
-  --button-warning-hover-color: #ffb848;
-  --button-default-hover-border-color: #979ba5;
-  --button-primary-active-color: #2c77f4;
-  --button-danger-active-color: #db2626;
-  --button-success-active-color: #1ab943;
-  --button-warning-active-color: #eb9000;
-  --button-selected-bg-color: #e1ecff;
-  --button-disabled-selected-bg-color: #f0f1f5;
-  --radio-font-color: #63656e;
-  --radio-active-color: #3a84ff;
-  --radio-hover-border-color: #979ba5;
-  --radio-disabled-border: #dcdee5;
-  --radio-disabled-font-color: #c4c6cc;
-  --radio-disabled-checked-bg: #a3c5fd;
-  --radio-button-checked-bg: #e1ecff;
-  --radio-button-disabled-checked-bg: #fafbfd;
-  --checkbox-disabled-checked-bg: #a3c5fd;
-  --fixed-navbar-background: #fff;
-  --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
-  --switch-default-color: #fff;
-  --switch-grey-color: #c4c6cc;
-  --breadcrumb-black-color: #979ba5;
-  --breadcrumb-primary-hover-color: #0082ff;
-  --breadcrumb-fn-main-color: #63656e;
-  --link-default-hover-color: #979ba5;
-  --link-primary-hover-color: #699df4;
-  --link-success-hover-color: #45e35f;
-  --link-warning-hover-color: #ffb848;
-  --link-danger-hover-color: #ff5656;
-  --link-default-disabled-color: #dcdee5;
-  --link-primary-disabled-color: #a3c5fd;
-  --link-success-disabled-color: #94f5a4;
-  --link-warning-disabled-color: #ffd695;
-  --link-danger-disabled-color: #fd9c9c;
-  --message-color: var(--default-color);
-  --message-primary-bg-color: #f0f8ff;
-  --message-primary-border-color: #e1ecff;
-  --message-primary-shadow-color: #e1e8f4;
-  --message-warning-bg-color: #fff4e2;
-  --message-warning-border-color: #ffe8c3;
-  --message-warning-shadow-color: #ede6db;
-  --message-success-bg-color: #f2fff4;
-  --message-success-border-color: #dcffe2;
-  --message-success-shadow-color: #cef0d7;
-  --message-danger-bg-color: #ffeded;
-  --message-danger-border-color: #ffdddd;
-  --message-danger-shadow-color: #f6dada;
-  --slider-default-bg: #dcdee5;
-  --slider-disable-bar-bg: #979ba5;
-  --menu-bg-color: #182132;
-  --submenu-bg-color: #151d2c;
-  --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
-  --menu-color: #96a2b9;
-  --menu-group-color: var(--default-color);
-  --menu-width: 260px;
-  --menu-collapse-width: 60px;
-  --menu-active-color: white;
-  --nav-header-bg-color: #182132;
-  --nav-bg-color: #182132;
-  --date-picker-disabled-bg: #fafbfd;
-  --date-picker-dropdown-mb: 4px;
-  --date-picker-dropdown-bg: #fff;
-  --table-bg-color: var(--white-color);
-  --table-border-color: #dcdee5;
-  --table-head-bg-color: #fafbfd;
-  --table-head-font-color: #313238;
-  --table-body-font-color: #63656E;
-  --table-row-hover-bg-color: #f5f7fa;
-  --table-row-active-bg-color: #f0f1f5;
-  --cascader-panel-border-color: #dcdee5;
-  --cascader-panel-hover: #f5f7fa;
-  --cascader-panel-active: #e1ecff;
-  --cascader-panel-disabled-bg: #fff;
-  --search-select-focus-border-color: var(--primary-color);
-  --search-select-focus-color: #3c96ff;
-  --search-select-font-color: var(--default-color);
-  --search-select-placeholder-color: var(--light-gray);
-  --search-select-message-color: var(--danger-color);
-  --search-select-menu-border-color: var(--disable-color);
-}
 @keyframes loading-scale-animate {
   0% {
     transform: scale(1);
@@ -158,21 +35,21 @@
   font-size: 14px;
 }
 .bk-select.is-focus.normal .bk-select-trigger .bk-select-tag.bk-select-tag--default {
-  border-color: var(--primary-color);
+  border-color: #3a84ff;
   box-shadow: 0px 0px 3px 0px #a3c5fd;
 }
 .bk-select.is-focus .bk-input--default {
-  border-color: var(--primary-color);
+  border-color: #3a84ff;
   outline: 0;
-  box-shadow: 0px 0px 3px 0px var(--input-shadow-color);
+  box-shadow: 0px 0px 3px 0px #a3c5fd;
 }
 .bk-select.is-focus .bk-input--default.is-simplicity {
   border-color: transparent;
-  border-bottom-color: var(--primary-color);
+  border-bottom-color: #3a84ff;
   box-shadow: none;
 }
 .bk-select.is-focus .bk-input--default.is-simplicity .bk-input--text {
-  background-color: var(--input-block-color);
+  background-color: #f5f7fa;
 }
 .bk-select.popover-show .bk-select-trigger .angle-up {
   transform: rotate(0);
@@ -182,13 +59,13 @@
   background-color: #fafbfd;
 }
 .bk-select .bk-input.is-focused {
-  border-color: var(--primary-color);
+  border-color: #3a84ff;
   outline: 0;
-  box-shadow: 0 0 3px 0 var(--input-shadow-color);
+  box-shadow: 0 0 3px 0 #a3c5fd;
 }
 .bk-select .bk-input.is-focused.is-simplicity {
   border-color: transparent;
-  border-bottom-color: var(--primary-color);
+  border-bottom-color: #3a84ff;
   box-shadow: none;
 }
 .bk-select .bk-input--text {
@@ -197,7 +74,7 @@
   white-space: nowrap;
   padding-right: 24px;
   cursor: pointer;
-  background-color: var(--white-color);
+  background-color: white;
 }
 .bk-select .bk-select-trigger {
   position: relative;
@@ -210,12 +87,12 @@
   height: 32px;
   padding: 0 28px 0 10px;
   line-height: normal;
-  color: var(--default-color);
+  color: #63656e;
   text-align: left;
   vertical-align: middle;
   cursor: pointer;
-  background-color: var(--white-color);
-  border: 1px solid var(--light-gray);
+  background-color: white;
+  border: 1px solid #c4c6cc;
   border-radius: 2px;
   outline: none;
   box-sizing: border-box;
@@ -229,7 +106,7 @@
   align-items: center;
 }
 .bk-select .bk-select-trigger .bk-select-tag::placeholder {
-  color: var(--light-gray);
+  color: #c4c6cc;
 }
 .bk-select .bk-select-trigger .bk-select-tag.has-prefix {
   padding-left: 0;
@@ -278,12 +155,12 @@
   height: 32px;
   padding: 0 28px 0 10px;
   line-height: normal;
-  color: var(--default-color);
+  color: #63656e;
   text-align: left;
   vertical-align: middle;
   cursor: pointer;
-  background-color: var(--white-color);
-  border: 1px solid var(--light-gray);
+  background-color: white;
+  border: 1px solid #c4c6cc;
   border-radius: 2px;
   outline: none;
   box-sizing: border-box;
@@ -301,7 +178,7 @@
   flex-grow: 1;
 }
 .bk-select .bk-select-trigger .bk-select-tag-input::placeholder {
-  color: var(--light-gray);
+  color: #c4c6cc;
 }
 .bk-select .bk-select-trigger .bk-select-tag .bk-tag {
   max-width: 190px;
@@ -363,7 +240,7 @@
 }
 .bk-popover.bk-pop2-content.bk-select-popover {
   padding: 0;
-  border: 1px solid var(--disable-color);
+  border: 1px solid #dcdee5;
   border-radius: 2px;
   box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
 }
@@ -520,24 +397,24 @@
 .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-search-wrapper {
   display: flex;
   margin: 4px 8px 0 8px;
-  border-bottom: 1px solid var(--input-block-hover-color);
+  border-bottom: 1px solid #eaebf0;
   align-items: center;
 }
 .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-search-wrapper .icon-search {
   margin-left: 2px;
-  color: var(--gray-color);
+  color: #979ba5;
 }
 .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-search-wrapper .bk-select-search-input {
   width: 100%;
   height: 32px;
   padding: 0 28px 0 10px;
   line-height: normal;
-  color: var(--default-color);
+  color: #63656e;
   text-align: left;
   vertical-align: middle;
   cursor: pointer;
-  background-color: var(--white-color);
-  border: 1px solid var(--light-gray);
+  background-color: white;
+  border: 1px solid #c4c6cc;
   border-radius: 2px;
   outline: none;
   box-sizing: border-box;
@@ -551,5 +428,5 @@
   border: none;
 }
 .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-search-wrapper .bk-select-search-input::placeholder {
-  color: var(--light-gray);
+  color: #c4c6cc;
 }

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> & {