bkui-vue 1.0.3-beta.7 → 1.0.3-beta.70

package/lib/select/option.d.ts

@@ -1,3 +1,4 @@
+import { VNode } from 'vue';
 import { SelectedTypeEnum } from '../shared';
 declare const _default: import("vue").DefineComponent<{
     id: {
@@ -23,10 +24,11 @@ declare const _default: import("vue").DefineComponent<{
     selectedStyle: import("vue").ComputedRef<SelectedTypeEnum>;
     optionName: import("vue").ComputedRef<string | number>;
     optionID: import("vue").ComputedRef<unknown>;
-    isDisabled: import("vue").ComputedRef<boolean>;
+    highlightKeyword: import("vue").ComputedRef<boolean>;
     handleOptionClick: () => void;
     handleMouseEnter: () => void;
     resolveClassName: (cls: string) => string;
+    transformNode: (str: string) => string | (string | VNode)[];
     visible: import("vue").Ref<boolean>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     id: {

package/lib/select/pinyin/core.d.ts

@@ -0,0 +1,14 @@
+declare namespace _default {
+    export { isSupported };
+    export { parse };
+    export { patchDict };
+    export { genToken };
+    export function convertToPinyin(str: any, lowerCase: any, separator: any): any;
+}
+export default _default;
+declare function isSupported(force: any): any;
+declare function parse(str: any): any;
+declare function patchDict(patchers: any): void;
+declare function genToken(ch: any): {
+    source: any;
+};

package/lib/select/pinyin/dict.d.ts

@@ -0,0 +1,34 @@
+declare namespace _default {
+    export { PINYINS };
+    export { UNIHANS };
+    export { EXCEPTIONS };
+}
+export default _default;
+declare const PINYINS: string[];
+declare const UNIHANS: string[];
+declare namespace EXCEPTIONS {
+    const 曾: string;
+    const 沈: string;
+    const 嗲: string;
+    const 碡: string;
+    const 聒: string;
+    const 炔: string;
+    const 蚵: string;
+    const 砉: string;
+    const 嬤: string;
+    const 嬷: string;
+    const 蹒: string;
+    const 蹊: string;
+    const 丬: string;
+    const 霰: string;
+    const 莘: string;
+    const 豉: string;
+    const 饧: string;
+    const 筠: string;
+    const 长: string;
+    const 帧: string;
+    const 峙: string;
+    const 郍: string;
+    const 芎: string;
+    const 谁: string;
+}

package/lib/select/pinyin/index.d.ts

@@ -0,0 +1,2 @@
+export default pinyin;
+import pinyin from "./core";

package/lib/select/select.css

@@ -34,21 +34,24 @@
 .bk-select.large .bk-select-content-wrapper {
   font-size: 14px;
 }
-.bk-select.is-focus.normal .bk-select-trigger .bk-select-tag.bk-select-tag--default {
+.bk-select.is-focus:not(.is-disabled).normal .bk-select-trigger .bk-select-tag {
   border-color: #3a84ff;
   box-shadow: 0px 0px 3px 0px #a3c5fd;
 }
-.bk-select.is-focus .bk-input--default {
+.bk-select.is-focus:not(.is-disabled).simplicity .bk-select-trigger .bk-select-tag {
+  border-bottom-color: #3a84ff;
+}
+.bk-select.is-focus .bk-input {
   border-color: #3a84ff;
   outline: 0;
   box-shadow: 0px 0px 3px 0px #a3c5fd;
 }
-.bk-select.is-focus .bk-input--default.is-simplicity {
+.bk-select.is-focus .bk-input.is-simplicity {
   border-color: transparent;
   border-bottom-color: #3a84ff;
   box-shadow: none;
 }
-.bk-select.is-focus .bk-input--default.is-simplicity .bk-input--text {
+.bk-select.is-focus .bk-input.is-simplicity .bk-input--text {
   background-color: #f5f7fa;
 }
 .bk-select.popover-show .bk-select-trigger .angle-up {
@@ -108,9 +111,28 @@
 .bk-select .bk-select-trigger .bk-select-tag::placeholder {
   color: #c4c6cc;
 }
+.bk-select .bk-select-trigger .bk-select-tag.is-simplicity {
+  background-color: transparent;
+  border-color: transparent;
+  border-bottom-color: #c4c6cc;
+}
+.bk-select .bk-select-trigger .bk-select-tag.is-simplicity:hover {
+  background-color: #f5f7fa;
+  border-color: transparent;
+  border-bottom-color: #c4c6cc;
+  box-shadow: none;
+}
 .bk-select .bk-select-trigger .bk-select-tag.has-prefix {
   padding-left: 0;
 }
+.bk-select .bk-select-trigger .bk-select-tag-wrapper {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  overflow: hidden;
+  gap: 4px;
+  padding: 4px 0;
+}
 .bk-select .bk-select-trigger .bk-select-tag.collapse-tag .bk-select-tag-wrapper {
   height: 30px;
 }
@@ -121,13 +143,7 @@
   min-height: 32px;
   flex-wrap: wrap;
 }
-.bk-select .bk-select-trigger .bk-select-tag-wrapper {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  overflow: hidden;
-}
-.bk-select .bk-select-trigger .bk-select-tag:not(.is-disabled):hover {
+.bk-select .bk-select-trigger .bk-select-tag:not(.is-disabled,.is-simplicity):hover {
   border-color: #979ba5;
 }
 .bk-select .bk-select-trigger .bk-select-tag.is-disabled {
@@ -172,7 +188,7 @@
   width: 1%;
   height: 22px;
   padding: 0;
-  margin: 2px 5px 4px 0;
+  margin: 0px 5px 0px 0;
   background-color: transparent;
   border: none;
   flex-grow: 1;
@@ -288,6 +304,29 @@
 .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-options {
   padding: 4px 0;
 }
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all {
+  padding: 4px 0;
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all .wrapper {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 12px;
+  cursor: pointer;
+  color: #63656e;
+}
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all .wrapper:hover {
+  background-color: #f5f7fa;
+}
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all .wrapper.active {
+  background-color: #e1ecff;
+  color: #3a84ff;
+}
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all .wrapper .select-all-icon {
+  margin-right: 4px;
+  font-size: 16px;
+}
 .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option {
   position: relative;
   display: flex;
@@ -320,6 +359,10 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option-item .is-keyword {
+  display: inline-flex;
+  color: #3a84ff;
+}
 .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-hover {
   background-color: #f5f7fa;
 }

package/lib/select/select.d.ts

@@ -282,6 +282,11 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    disableFocusBehavior: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     keepSearchValue: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -296,6 +301,20 @@ declare const _default: import("vue").DefineComponent<{
     filterOption: {
         type: FunctionConstructor;
     };
+    searchWithPinyin: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    highlightKeyword: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    trigger: {
+        type: PropType<"default" | "manual">;
+        default: string;
+    };
 }, {
     t: import("vue").ComputedRef<{
         noData: string;
@@ -355,6 +374,9 @@ declare const _default: import("vue").DefineComponent<{
         } & {
             default: boolean;
         };
+        behavior: import("vue-types").VueTypeDef<"normal" | "simplicity"> & {
+            default: "normal" | "simplicity";
+        };
     }>> & {
         onKeydown?: (...args: any[]) => any;
         "onUpdate:modelValue"?: (...args: any[]) => any;
@@ -409,6 +431,9 @@ declare const _default: import("vue").DefineComponent<{
         } & {
             default: boolean;
         };
+        behavior: import("vue-types").VueTypeDef<"normal" | "simplicity"> & {
+            default: "normal" | "simplicity";
+        };
     }>> & {
         onKeydown?: (...args: any[]) => any;
         "onUpdate:modelValue"?: (...args: any[]) => any;
@@ -418,6 +443,7 @@ declare const _default: import("vue").DefineComponent<{
         disabled: boolean;
         placeholder: string;
         tagTheme: "" | "info" | "success" | "warning" | "danger";
+        behavior: "normal" | "simplicity";
         selected: ISelected[];
         filterable: boolean;
         allowCreate: boolean;
@@ -463,6 +489,9 @@ declare const _default: import("vue").DefineComponent<{
         } & {
             default: boolean;
         };
+        behavior: import("vue-types").VueTypeDef<"normal" | "simplicity"> & {
+            default: "normal" | "simplicity";
+        };
     }>> & {
         onKeydown?: (...args: any[]) => any;
         "onUpdate:modelValue"?: (...args: any[]) => any;
@@ -487,6 +516,7 @@ declare const _default: import("vue").DefineComponent<{
         disabled: boolean;
         placeholder: string;
         tagTheme: "" | "info" | "success" | "warning" | "danger";
+        behavior: "normal" | "simplicity";
         selected: ISelected[];
         filterable: boolean;
         allowCreate: boolean;
@@ -502,6 +532,7 @@ declare const _default: import("vue").DefineComponent<{
     curContentText: import("vue").ComputedRef<string>;
     isGroup: import("vue").ComputedRef<boolean>;
     searchValue: import("vue").Ref<string>;
+    curSearchValue: import("vue").ComputedRef<string>;
     customOptionName: import("vue").Ref<string>;
     isShowAll: import("vue").ComputedRef<boolean>;
     isShowSelectAll: import("vue").ComputedRef<boolean>;
@@ -637,6 +668,7 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>>>>;
     isAllSelected: import("vue").ComputedRef<boolean>;
+    isAll: import("vue").ComputedRef<boolean>;
     focusInput: () => void;
     setHover: () => void;
     cancelHover: () => void;
@@ -646,7 +678,8 @@ declare const _default: import("vue").DefineComponent<{
     handleClear: (e: Event) => void;
     hidePopover: () => void;
     showPopover: () => void;
-    handleToggleSelectAll: () => void;
+    toggleSelectAll: () => void;
+    toggleAll: () => void;
     handleOptionSelected: (option: OptionInstanceType) => void;
     handleClickOutside: ({ event }: {
         event: any;
@@ -662,7 +695,7 @@ declare const _default: import("vue").DefineComponent<{
     localSelectAllText: import("vue").ComputedRef<string>;
     resolveClassName: (cls: string) => string;
     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<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "select" | "toggle" | "clear" | "update:modelValue" | "scroll-end" | "tag-remove" | "deselect" | "search-change")[], "blur" | "change" | "focus" | "select" | "toggle" | "clear" | "update:modelValue" | "scroll-end" | "tag-remove" | "deselect" | "search-change", 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> & {
         default: boolean;
@@ -944,6 +977,11 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    disableFocusBehavior: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     keepSearchValue: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -958,6 +996,20 @@ declare const _default: import("vue").DefineComponent<{
     filterOption: {
         type: FunctionConstructor;
     };
+    searchWithPinyin: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    highlightKeyword: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    trigger: {
+        type: PropType<"default" | "manual">;
+        default: string;
+    };
 }>> & {
     onFocus?: (...args: any[]) => any;
     onBlur?: (...args: any[]) => any;
@@ -969,10 +1021,12 @@ declare const _default: import("vue").DefineComponent<{
     "onScroll-end"?: (...args: any[]) => any;
     "onTag-remove"?: (...args: any[]) => any;
     onDeselect?: (...args: any[]) => any;
+    "onSearch-change"?: (...args: any[]) => any;
 }, {
     prefix: string;
     size: "default" | "small" | "large" | "huge";
     disabled: boolean;
+    trigger: "default" | "manual";
     multiple: boolean;
     showOnInit: boolean;
     placeholder: string;
@@ -986,6 +1040,7 @@ declare const _default: import("vue").DefineComponent<{
     withValidate: boolean;
     noDataText: string;
     showSelectedIcon: boolean;
+    highlightKeyword: boolean;
     filterable: boolean;
     allowCreate: boolean;
     collapseTags: boolean;
@@ -1007,6 +1062,8 @@ declare const _default: import("vue").DefineComponent<{
     enableVirtualRender: boolean;
     allowEmptyValues: unknown[];
     autoFocus: boolean;
+    disableFocusBehavior: boolean;
     keepSearchValue: boolean;
+    searchWithPinyin: boolean;
 }, {}>;
 export default _default;

package/lib/select/select.less

@@ -96,14 +96,21 @@
     }
   }
 
-  &.is-focus.normal {
-    .@{bk-prefix}-select-trigger .@{bk-prefix}-select-tag.@{bk-prefix}-select-tag--default {
-      border-color: @primary-color;
-      box-shadow: 0px 0px 3px 0px #a3c5fd;
+  &.is-focus:not(.is-disabled) {
+    &.normal {
+      .@{bk-prefix}-select-trigger .@{bk-prefix}-select-tag {
+        border-color: @primary-color;
+        box-shadow: 0px 0px 3px 0px #a3c5fd;
+      }
+    }
+    &.simplicity {
+      .@{bk-prefix}-select-trigger .@{bk-prefix}-select-tag {
+        border-bottom-color: @primary-color;
+      }
     }
   }
 
-  &.is-focus .@{bk-prefix}-input--default {
+  &.is-focus .@{bk-prefix}-input {
     border-color: @primary-color;
     outline: 0;
     box-shadow: 0px 0px 3px 0px @input-shadow-color;
@@ -164,10 +171,32 @@
       width: auto;
       align-items: center;
 
+      &.is-simplicity {
+        background-color: transparent;
+        border-color: transparent;
+        border-bottom-color: @input-border-color;
+    
+        &:hover {
+          background-color: @input-block-color;
+          border-color: transparent;
+          border-bottom-color: @light-gray;
+          box-shadow: none;
+        }
+      }
+      
       &.has-prefix {
         padding-left: 0;
       }
 
+      &-wrapper {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        overflow: hidden;
+        gap: 4px;
+        padding: 4px 0;
+      }
+
       &.collapse-tag .@{bk-prefix}-select-tag-wrapper {
         height: 30px;
       }
@@ -180,14 +209,7 @@
         flex-wrap: wrap;
       }
 
-      &-wrapper {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        overflow: hidden;
-      }
-
-      &:not(.is-disabled):hover {
+      &:not(.is-disabled,.is-simplicity):hover {
         border-color: #979ba5;
       }
 
@@ -223,7 +245,7 @@
         width: 1%;
         height: 22px;
         padding: 0;
-        margin: 2px 5px 4px 0;
+        margin: 0px 5px 0px 0;
         background-color: transparent;
         border: none;
         flex-grow: 1;
@@ -267,7 +289,7 @@
     padding: 0 10px;
     margin-right: 10px;
     color: #63656e;
-    background-color: #f5f7fa;
+    background-color: @select-hover-color;
     border-right: 1px solid #c4c6cc;
     align-items: center;
   }
@@ -331,6 +353,30 @@
           padding: 4px 0;
         }
 
+        .@{bk-prefix}-select-all {
+          padding: 4px 0;
+          border-bottom: 1px solid @border-color;
+          .wrapper {
+            display: flex;
+            align-items: center;
+            height: 32px;
+            padding: 0 12px;
+            cursor: pointer;
+            color: @default-color;
+            &:hover {
+              background-color: @select-hover-color;
+            }
+            &.active {
+              background-color: @select-active-color;
+              color: @primary-color;
+            }
+            .select-all-icon {
+              margin-right: 4px;
+              font-size: 16px;
+            }
+          }  
+        }
+
         .@{bk-prefix}-select-option {
           position: relative;
           display: flex;
@@ -360,15 +406,19 @@
 
           &-item {
             .ellipsis();
+            .is-keyword {
+              display: inline-flex;
+              color: @primary-color;
+            }
           }
 
           &.is-hover {
-            background-color: #f5f7fa;
+            background-color: @select-hover-color;
           }
 
           &:hover {
             color: #63656e;
-            background-color: #f5f7fa;
+            background-color: @select-hover-color;
           }
 
           &.is-selected:not(.is-checkbox) {
@@ -390,11 +440,11 @@
             }
 
             &.is-hover {
-              background-color: #f5f7fa;
+              background-color: @select-hover-color;
             }
 
             &:hover {
-              background-color: #f5f7fa;
+              background-color: @select-hover-color;
             }
           }
         }

package/lib/select/select.variable.css

@@ -12,6 +12,7 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -123,6 +124,8 @@
   --search-select-placeholder-color: var(--light-gray);
   --search-select-message-color: var(--danger-color);
   --search-select-menu-border-color: var(--disable-color);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
 }
 @keyframes loading-scale-animate {
   0% {
@@ -160,21 +163,24 @@
 .bk-select.large .bk-select-content-wrapper {
   font-size: 14px;
 }
-.bk-select.is-focus.normal .bk-select-trigger .bk-select-tag.bk-select-tag--default {
+.bk-select.is-focus:not(.is-disabled).normal .bk-select-trigger .bk-select-tag {
   border-color: #3a84ff;
   box-shadow: 0px 0px 3px 0px #a3c5fd;
 }
-.bk-select.is-focus .bk-input--default {
+.bk-select.is-focus:not(.is-disabled).simplicity .bk-select-trigger .bk-select-tag {
+  border-bottom-color: #3a84ff;
+}
+.bk-select.is-focus .bk-input {
   border-color: #3a84ff;
   outline: 0;
   box-shadow: 0px 0px 3px 0px #a3c5fd;
 }
-.bk-select.is-focus .bk-input--default.is-simplicity {
+.bk-select.is-focus .bk-input.is-simplicity {
   border-color: transparent;
   border-bottom-color: #3a84ff;
   box-shadow: none;
 }
-.bk-select.is-focus .bk-input--default.is-simplicity .bk-input--text {
+.bk-select.is-focus .bk-input.is-simplicity .bk-input--text {
   background-color: #f5f7fa;
 }
 .bk-select.popover-show .bk-select-trigger .angle-up {
@@ -234,9 +240,28 @@
 .bk-select .bk-select-trigger .bk-select-tag::placeholder {
   color: #c4c6cc;
 }
+.bk-select .bk-select-trigger .bk-select-tag.is-simplicity {
+  background-color: transparent;
+  border-color: transparent;
+  border-bottom-color: #c4c6cc;
+}
+.bk-select .bk-select-trigger .bk-select-tag.is-simplicity:hover {
+  background-color: #f5f7fa;
+  border-color: transparent;
+  border-bottom-color: #c4c6cc;
+  box-shadow: none;
+}
 .bk-select .bk-select-trigger .bk-select-tag.has-prefix {
   padding-left: 0;
 }
+.bk-select .bk-select-trigger .bk-select-tag-wrapper {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  overflow: hidden;
+  gap: 4px;
+  padding: 4px 0;
+}
 .bk-select .bk-select-trigger .bk-select-tag.collapse-tag .bk-select-tag-wrapper {
   height: 30px;
 }
@@ -247,13 +272,7 @@
   min-height: 32px;
   flex-wrap: wrap;
 }
-.bk-select .bk-select-trigger .bk-select-tag-wrapper {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  overflow: hidden;
-}
-.bk-select .bk-select-trigger .bk-select-tag:not(.is-disabled):hover {
+.bk-select .bk-select-trigger .bk-select-tag:not(.is-disabled,.is-simplicity):hover {
   border-color: #979ba5;
 }
 .bk-select .bk-select-trigger .bk-select-tag.is-disabled {
@@ -298,7 +317,7 @@
   width: 1%;
   height: 22px;
   padding: 0;
-  margin: 2px 5px 4px 0;
+  margin: 0px 5px 0px 0;
   background-color: transparent;
   border: none;
   flex-grow: 1;
@@ -414,6 +433,29 @@
 .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-options {
   padding: 4px 0;
 }
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all {
+  padding: 4px 0;
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all .wrapper {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 12px;
+  cursor: pointer;
+  color: #63656e;
+}
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all .wrapper:hover {
+  background-color: #f5f7fa;
+}
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all .wrapper.active {
+  background-color: #e1ecff;
+  color: #3a84ff;
+}
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-all .wrapper .select-all-icon {
+  margin-right: 4px;
+  font-size: 16px;
+}
 .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option {
   position: relative;
   display: flex;
@@ -446,6 +488,10 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option-item .is-keyword {
+  display: inline-flex;
+  color: #3a84ff;
+}
 .bk-popover.bk-pop2-content.bk-select-popover .bk-select-content-wrapper .bk-select-option.is-hover {
   background-color: #f5f7fa;
 }

package/lib/select/selectTagInput.d.ts

@@ -34,6 +34,9 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    behavior: import("vue-types/dist/types").VueTypeDef<"normal" | "simplicity"> & {
+        default: "normal" | "simplicity";
+    };
 }, {
     collapseTagRef: import("vue").Ref<any>;
     tagWrapperRef: import("vue").Ref<any>;
@@ -83,6 +86,9 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    behavior: import("vue-types/dist/types").VueTypeDef<"normal" | "simplicity"> & {
+        default: "normal" | "simplicity";
+    };
 }>> & {
     onKeydown?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
@@ -92,6 +98,7 @@ declare const _default: import("vue").DefineComponent<{
     disabled: boolean;
     placeholder: string;
     tagTheme: "" | "info" | "success" | "warning" | "danger";
+    behavior: "normal" | "simplicity";
     selected: ISelected[];
     filterable: boolean;
     allowCreate: boolean;