bkui-vue 2.0.1-beta.61 → 2.0.1-beta.63

package/lib/cascader/index.js

@@ -510,14 +510,16 @@ function useRegistry(data) {
   // 注册item
   var register = function register(key, item) {
     if (!item) return;
-    if (data.value.has(key)) {
-      return;
-    }
     return data.value.set(key, item);
   };
   // 删除item
-  var unregister = function unregister(key) {
-    data.value["delete"](key);
+  var unregister = function unregister(key, item) {
+    if (item) {
+      if (data.value.get(key) !== item) return;
+      data.value["delete"](key);
+    } else {
+      data.value["delete"](key);
+    }
   };
   return {
     register: register,

package/lib/index.js

@@ -4,5 +4,5 @@ export { default } from './preset';
 export * from './config-provider';
 export * from './directives';
 export * as plugins from './plugins';
-export const version = "2.0.1-beta.61";
+export const version = "2.0.1-beta.63";
 window.__bkui_vue_version__ = version;

package/lib/input/index.js

@@ -1208,7 +1208,7 @@ var inputEmitEventsType = (_inputEmitEventsType = {}, _defineProperty(_definePro
         "min": props.min,
         "step": props.step,
         "type": pwdVisible.value && props.type === 'password' ? 'text' : props.type
-      }, eventListener, bindProps.value, innerInputValue.value), null), !isTextArea.value && props.clearable && !!props.modelValue && (0,external_vue_namespaceObject.createVNode)("span", {
+      }, eventListener, bindProps.value, innerInputValue.value), null), props.clearable && !!props.modelValue && (0,external_vue_namespaceObject.createVNode)("span", {
         "class": clearCls.value,
         "onClick": clear
       }, [(0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Close, null, null)]), suffixIcon.value, showMaxLimit.value && (props.showWordLimit || isTextArea.value) && (0,external_vue_namespaceObject.createVNode)("p", {

package/lib/input/input.css

@@ -286,6 +286,25 @@
   outline: 0;
   box-shadow: 0px 0px 3px 0px var(--input-shadow-color);
 }
+.bk-textarea--suffix-icon {
+  color: var(--gray-color);
+  padding-right: var(--input-horizontal-padding);
+  font-size: var(--font-size-medium);
+  margin: 0;
+  margin-left: auto;
+  text-align: right;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+.bk-textarea--suffix-icon:hover {
+  color: #313238;
+}
+.bk-textarea--suffix-icon.show-clear-only-hover {
+  display: none;
+}
+.bk-textarea:hover:not(.is-disabled) .show-clear-only-hover {
+  display: flex;
+}
 .bk-input {
   display: inline-flex;
   align-items: stretch;

package/lib/input/input.less

@@ -109,6 +109,32 @@
   &.is-focused:not(.is-readonly) {
     .active();
   }
+  
+  &--suffix-icon {
+    color: @gray-color;
+    padding-right: @input-horizontal-padding;
+    font-size: @font-size-medium;
+    margin: 0;
+    margin-left: auto;
+    text-align: right;
+    flex-shrink: 0;
+    cursor: pointer;
+
+    &:hover {
+      color: #313238;
+    }
+    
+    &.show-clear-only-hover {
+      display: none;
+    }
+  }
+
+  &:hover:not(.is-disabled) {
+    
+    .show-clear-only-hover {
+      display: flex;
+    }
+  }
 }
 
 .@{bk-prefix}-input {

package/lib/input/input.variable.css

@@ -676,6 +676,25 @@
   outline: 0;
   box-shadow: 0px 0px 3px 0px var(--input-shadow-color);
 }
+.bk-textarea--suffix-icon {
+  color: var(--gray-color);
+  padding-right: var(--input-horizontal-padding);
+  font-size: var(--font-size-medium);
+  margin: 0;
+  margin-left: auto;
+  text-align: right;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+.bk-textarea--suffix-icon:hover {
+  color: #313238;
+}
+.bk-textarea--suffix-icon.show-clear-only-hover {
+  display: none;
+}
+.bk-textarea:hover:not(.is-disabled) .show-clear-only-hover {
+  display: flex;
+}
 .bk-input {
   display: inline-flex;
   align-items: stretch;

package/lib/select/common.d.ts

@@ -9,7 +9,7 @@ export declare function useHover(): {
 };
 export declare function useRegistry<T>(data: Ref<Map<PropertyKey, T>>): {
     register: (key: string, item: T) => Map<PropertyKey, T>;
-    unregister: (key: string) => void;
+    unregister: (key: string, item?: T) => void;
 };
 export declare function useDebouncedRef<T>(value: any, delay?: number): Ref<T>;
 export declare function usePopover(config: IPopoverConfig, triggerRef: Ref<HTMLElement>): {

package/lib/select/index.js

@@ -597,14 +597,16 @@ function useRegistry(data) {
   // 注册item
   var register = function register(key, item) {
     if (!item) return;
-    if (data.value.has(key)) {
-      return;
-    }
     return data.value.set(key, item);
   };
   // 删除item
-  var unregister = function unregister(key) {
-    data.value["delete"](key);
+  var unregister = function unregister(key, item) {
+    if (item) {
+      if (data.value.get(key) !== item) return;
+      data.value["delete"](key);
+    } else {
+      data.value["delete"](key);
+    }
   };
   return {
     register: register,
@@ -861,8 +863,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
       group === null || group === void 0 || group.register(optionID.value, proxy);
     });
     (0,external_vue_namespaceObject.onBeforeUnmount)(function () {
-      select === null || select === void 0 || select.unregister(optionID.value);
-      group === null || group === void 0 || group.unregister(optionID.value);
+      select === null || select === void 0 || select.unregister(optionID.value, proxy);
+      group === null || group === void 0 || group.unregister(optionID.value, proxy);
     });
     var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
       resolveClassName = _usePrefix.resolveClassName;

package/lib/select/type.d.ts

@@ -17,7 +17,7 @@ export interface ISelectContext {
     curSearchValue: string;
     highlightKeyword: boolean;
     register(key: PropertyKey, option: OptionInstanceType): void;
-    unregister(key: PropertyKey): void;
+    unregister(key: PropertyKey, option?: OptionInstanceType): void;
     registerGroup(key: PropertyKey, option: GroupInstanceType): void;
     unregisterGroup(key: PropertyKey): void;
     handleOptionSelected(option: OptionInstanceType): void;
@@ -27,7 +27,7 @@ export interface IOptionGroupContext {
     disabled: boolean;
     groupCollapse: boolean;
     register(key: PropertyKey, option: OptionInstanceType): void;
-    unregister(key: PropertyKey): void;
+    unregister(key: PropertyKey, option?: OptionInstanceType): void;
 }
 export interface ISelectState {
     currentPlaceholder: string;

package/lib/tab/index.d.ts

@@ -328,6 +328,16 @@ declare const BkTab: {
         }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
             default: (...args: any[]) => any;
         });
+        num: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        numDisplayType: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        } & {
+            default: string;
+        };
     }, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
         name: import("vue-types").VueTypeDef<string | number> & {
             default: string | number;
@@ -362,6 +372,16 @@ declare const BkTab: {
         }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
             default: (...args: any[]) => any;
         });
+        num: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        numDisplayType: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        } & {
+            default: string;
+        };
     }>>, {
         name: string | number;
         label: string | ((...args: any[]) => any);
@@ -372,6 +392,8 @@ declare const BkTab: {
         renderDirective: "show" | "if";
         panel: string | ((...args: any[]) => any);
         sortable: boolean;
+        num: number;
+        numDisplayType: string;
     }, {}>;
 }>;
 export { BkTab, TabPanel as BkTabPanel, SortTypeEnum, PositionEnum };

package/lib/tab/index.js

@@ -195,7 +195,9 @@ var tabPanelProps = {
   disabled: shared_namespaceObject.PropTypes.bool,
   sortable: shared_namespaceObject.PropTypes.bool,
   renderDirective: (0,shared_namespaceObject.renderDirectiveType)(),
-  panel: shared_namespaceObject.PropTypes.string || shared_namespaceObject.PropTypes.func
+  panel: shared_namespaceObject.PropTypes.string || shared_namespaceObject.PropTypes.func,
+  num: shared_namespaceObject.PropTypes.number.def(undefined),
+  numDisplayType: shared_namespaceObject.PropTypes.string.def('default')
 };
 var tabProps = {
   active: shared_namespaceObject.PropTypes.oneOfType([shared_namespaceObject.PropTypes.number, shared_namespaceObject.PropTypes.string]).def(''),
@@ -380,11 +382,13 @@ function tab_nav_objectSpread(e) { for (var r = 1; r < arguments.length; r++) {
         var _item$props = item.props,
           name = _item$props.name,
           label = _item$props.label,
+          num = _item$props.num,
           closable = _item$props.closable,
           visible = _item$props.visible,
           disabled = _item$props.disabled,
           sortable = _item$props.sortable,
-          tips = _item$props.tips;
+          tips = _item$props.tips,
+          numDisplayType = _item$props.numDisplayType;
         if (!visible) {
           return false;
         }
@@ -413,7 +417,9 @@ function tab_nav_objectSpread(e) { for (var r = 1; r < arguments.length; r++) {
           disabled: disabled,
           sortable: sortable,
           tips: tips,
-          tabLabel: renderLabel(label)
+          numDisplayType: numDisplayType,
+          tabLabel: renderLabel(label),
+          tabNum: num
         });
         return true;
       });
@@ -505,7 +511,9 @@ function tab_nav_objectSpread(e) { for (var r = 1; r < arguments.length; r++) {
         }
         var name = item.name,
           disabled = item.disabled,
-          tabLabel = item.tabLabel;
+          tabLabel = item.tabLabel,
+          tabNum = item.tabNum,
+          numDisplayType = item.numDisplayType;
         var getNavItemClass = function getNavItemClass() {
           var classNames = [_this.resolveClassName('tab-header-item')];
           if (disabled) {
@@ -519,6 +527,17 @@ function tab_nav_objectSpread(e) { for (var r = 1; r < arguments.length; r++) {
         var getValue = function getValue(curentValue, parentValue) {
           return !disabled && (curentValue || parentValue);
         };
+        var getCloseTag = function getCloseTag(item, index) {
+          return getValue(item.closable, closable) ? (0,external_vue_namespaceObject.createVNode)("span", {
+            "class": _this.resolveClassName('tab-header--close'),
+            "onClick": function onClick() {
+              return _this.handleTabRemove(index, item);
+            }
+          }, [(0,external_vue_namespaceObject.createVNode)(_namespaceObject.Close, null, null)]) : '';
+        };
+        var getNumType = function getNumType() {
+          return ['bracket'].includes(numDisplayType) ? "(".concat(tabNum, ")") : tabNum;
+        };
         return (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("div", {
           "key": name,
           "ref": active === name ? 'activeRef' : '',
@@ -548,12 +567,15 @@ function tab_nav_objectSpread(e) { for (var r = 1; r < arguments.length; r++) {
             e.preventDefault();
             drop(index, sortType);
           }
-        }, [(0,external_vue_namespaceObject.createVNode)("div", null, [tabLabel]), getValue(item.closable, closable) ? (0,external_vue_namespaceObject.createVNode)("span", {
-          "class": _this.resolveClassName('tab-header--close'),
-          "onClick": function onClick() {
-            return _this.handleTabRemove(index, item);
-          }
-        }, [(0,external_vue_namespaceObject.createVNode)(_namespaceObject.Close, null, null)]) : '']), [[(0,external_vue_namespaceObject.resolveDirective)("bk-tooltips"), {
+        }, [!isNaN(tabNum) ? (0,external_vue_namespaceObject.createVNode)("div", {
+          "class": _this.resolveClassName('tab-header--has-num')
+        }, [(0,external_vue_namespaceObject.createVNode)("div", {
+          "class": _this.resolveClassName('tab-header--has-num-left')
+        }, [tabLabel]), (0,external_vue_namespaceObject.createVNode)("div", {
+          "class": _this.resolveClassName('tab-header--has-num-right')
+        }, [(0,external_vue_namespaceObject.createVNode)("div", {
+          "class": _this.resolveClassName("tab-header--has-num-".concat(numDisplayType))
+        }, [getNumType()]), getCloseTag === null || getCloseTag === void 0 ? void 0 : getCloseTag(item, index)])]) : (0,external_vue_namespaceObject.createVNode)("div", null, [tabLabel]), isNaN(tabNum) ? getCloseTag === null || getCloseTag === void 0 ? void 0 : getCloseTag(item, index) : '']), [[(0,external_vue_namespaceObject.resolveDirective)("bk-tooltips"), {
           content: item.tips || '',
           disabled: !item.tips
         }]]);

package/lib/tab/props.d.ts

@@ -99,6 +99,16 @@ export declare const tabPanelProps: {
     }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
         default: (...args: any[]) => any;
     });
+    num: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    numDisplayType: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
 };
 export type TabPanelProps = ExtractPropTypes<typeof tabPanelProps>;
 export declare const tabProps: {

package/lib/tab/tab-nav.d.ts

@@ -55,7 +55,12 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     } & {
         default: number;
-    };
+    }; /**
+     * @description  判断拖动的元素是否是在同一个tab。
+     *               使用guid，相比 el1.parentNode === el2.parentNode 判断，性能要高
+     * @param e {event}  触发的元素
+     * @return {boolean}
+     */
     validateActive: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -139,7 +144,12 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     } & {
         default: number;
-    };
+    }; /**
+     * @description  判断拖动的元素是否是在同一个tab。
+     *               使用guid，相比 el1.parentNode === el2.parentNode 判断，性能要高
+     * @param e {event}  触发的元素
+     * @return {boolean}
+     */
     validateActive: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {

package/lib/tab/tab-panel.d.ts

@@ -32,6 +32,16 @@ declare const _default: import("vue").DefineComponent<{
     }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
         default: (...args: any[]) => any;
     });
+    num: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    numDisplayType: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
 }, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     name: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
@@ -66,6 +76,16 @@ declare const _default: import("vue").DefineComponent<{
     }) | (import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
         default: (...args: any[]) => any;
     });
+    num: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    numDisplayType: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
 }>>, {
     name: string | number;
     label: string | ((...args: any[]) => any);
@@ -76,5 +96,7 @@ declare const _default: import("vue").DefineComponent<{
     renderDirective: "show" | "if";
     panel: string | ((...args: any[]) => any);
     sortable: boolean;
+    num: number;
+    numDisplayType: string;
 }, {}>;
 export default _default;

package/lib/tab/tab.css

@@ -156,6 +156,21 @@
 .bk-tab--right .bk-tab-header {
   flex-direction: column;
 }
+.bk-tab--left .bk-tab-header .bk-tab-header-item .bk-tab-header--has-num,
+.bk-tab--right .bk-tab-header .bk-tab-header-item .bk-tab-header--has-num {
+  width: 100%;
+}
+.bk-tab--left .bk-tab-header .bk-tab-header-item .bk-tab-header--has-num-right .bk-tab-header--has-num-square,
+.bk-tab--right .bk-tab-header .bk-tab-header-item .bk-tab-header--has-num-right .bk-tab-header--has-num-square {
+  border-radius: 2px;
+}
+.bk-tab--left .bk-tab-header .bk-tab-header--active .bk-tab-header--has-num-right .bk-tab-header--has-num-square,
+.bk-tab--right .bk-tab-header .bk-tab-header--active .bk-tab-header--has-num-right .bk-tab-header--has-num-square,
+.bk-tab--left .bk-tab-header .bk-tab-header--active .bk-tab-header--has-num-right .bk-tab-header--has-num-elliptic,
+.bk-tab--right .bk-tab-header .bk-tab-header--active .bk-tab-header--has-num-right .bk-tab-header--has-num-elliptic {
+  background-color: #A3C5FD;
+  color: var(--white-color);
+}
 .bk-tab--left .bk-tab-header > div,
 .bk-tab--right .bk-tab-header > div {
   flex-direction: column;
@@ -167,6 +182,18 @@
 .bk-tab--card-tab .bk-tab-header {
   border-radius: 4px 4px 0;
 }
+.bk-tab--card-tab .bk-tab-header .bk-tab-header-item .bk-tab-header--has-num-right .bk-tab-header--has-num-square {
+  background-color: var(--white-color);
+}
+.bk-tab--card-tab .bk-tab-header .bk-tab-header-item .bk-tab-header--has-num-right .bk-tab-header--has-num-elliptic {
+  background-color: var(--white-color);
+  color: var(--default-color);
+}
+.bk-tab--card-tab .bk-tab-header .bk-tab-header--active .bk-tab-header--has-num-right .bk-tab-header--has-num-square,
+.bk-tab--card-tab .bk-tab-header .bk-tab-header--active .bk-tab-header--has-num-right .bk-tab-header--has-num-elliptic {
+  background-color: #A3C5FD;
+  color: var(--white-color);
+}
 .bk-tab--card .bk-tab-header,
 .bk-tab--vertical-card .bk-tab-header {
   border-bottom: 1px solid var(--disable-color);
@@ -291,6 +318,35 @@
   padding-right: 12px;
   padding-left: 12px;
 }
+.bk-tab-header-item .bk-tab-header--has-num {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.bk-tab-header-item .bk-tab-header--has-num-right {
+  margin-left: 4px;
+  display: flex;
+  align-items: center;
+  color: var(--default-color);
+}
+.bk-tab-header-item .bk-tab-header--has-num-right .bk-tab-header--has-num-default,
+.bk-tab-header-item .bk-tab-header--has-num-right .bk-tab-header--has-num-bracket {
+  color: var(--default-color);
+}
+.bk-tab-header-item .bk-tab-header--has-num-right .bk-tab-header--has-num-square,
+.bk-tab-header-item .bk-tab-header--has-num-right .bk-tab-header--has-num-elliptic {
+  background-color: #F0F1F5;
+  color: var(--gray-color);
+  padding: 0 8px;
+  line-height: 18px;
+  text-align: center;
+}
+.bk-tab-header-item .bk-tab-header--has-num-right .bk-tab-header--has-num-square {
+  border-radius: 2px;
+}
+.bk-tab-header-item .bk-tab-header--has-num-right .bk-tab-header--has-num-elliptic {
+  border-radius: 18px;
+}
 .bk-tab-header-item:hover {
   color: var(--primary-color);
 }
@@ -336,6 +392,14 @@
 .bk-tab--card-grid .bk-tab-header--active {
   background: #fff;
 }
+.bk-tab-header--active .bk-tab-header--has-num-right .bk-tab-header--has-num-bracket,
+.bk-tab-header--active .bk-tab-header--has-num-right .bk-tab-header--has-num-square,
+.bk-tab-header--active .bk-tab-header--has-num-right .bk-tab-header--has-num-elliptic {
+  color: var(--primary-color);
+}
+.bk-tab-header--active .bk-tab-header--has-num-right .bk-tab-header--has-num-square {
+  background-color: #E1ECFF;
+}
 .bk-tab-header--close {
   display: none;
   font-size: 16px;

package/lib/tab/tab.less

@@ -6,6 +6,9 @@
 @tab-header-bg: #FAFBFD;
 @tab-white: @white-color;
 @tab-gray: @light-gray;
+@tab-number-tag-gray: @gray-color;
+@tab-card-number-active: #E1ECFF;
+@tab-column-active: #A3C5FD;
 @tab-card-tab-bg: #F0F1F5;
 @tab-card-tab-divider: #c4c6cc;
 @tab-disable-color: #aaa;
@@ -42,7 +45,28 @@
 
     .@{bk-prefix}-tab--left &, .@{bk-prefix}-tab--right & {
       flex-direction: column;
-
+      .@{bk-prefix}-tab-header-item {
+        .@{bk-prefix}-tab-header--has-num {
+          width: 100%;
+          &-right {
+            .@{bk-prefix}-tab-header--has-num-square {
+              border-radius: 2px;
+            }
+          }
+        }
+      }
+      .@{bk-prefix}-tab-header--active {
+        .@{bk-prefix}-tab-header--has-num {
+          &-right {
+            .@{bk-prefix}-tab-header--has-num-square,
+            .@{bk-prefix}-tab-header--has-num-elliptic {
+              background-color: @tab-column-active;
+              color: @tab-white;
+            }
+          }
+        }
+      }
+      
       > div {
         flex-direction: column;
       }
@@ -54,6 +78,30 @@
 
     .@{bk-prefix}-tab--card-tab & {
       border-radius: 4px 4px 0;
+      .@{bk-prefix}-tab-header-item {
+        .@{bk-prefix}-tab-header--has-num {
+          &-right {
+            .@{bk-prefix}-tab-header--has-num-square {
+              background-color: @tab-white;
+            }
+            .@{bk-prefix}-tab-header--has-num-elliptic {
+              background-color: @tab-white;
+              color: @tab-color;
+            }
+          }
+        }
+      }
+      .@{bk-prefix}-tab-header--active {
+        .@{bk-prefix}-tab-header--has-num {
+          &-right {
+            .@{bk-prefix}-tab-header--has-num-square,
+            .@{bk-prefix}-tab-header--has-num-elliptic {
+              background-color: @tab-column-active;
+              color: @tab-white;
+            }
+          }
+        }
+      }
     }
 
     .@{bk-prefix}-tab--card &, .@{bk-prefix}-tab--vertical-card & {
@@ -208,7 +256,36 @@
         padding-left: 12px;
       }
 
-
+      .@{bk-prefix}-tab-header--has-num {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        &-right {
+          margin-left: 4px;
+          display: flex;
+          align-items: center;
+          color: @tab-color;
+          .@{bk-prefix}-tab-header--has-num-default,
+          .@{bk-prefix}-tab-header--has-num-bracket {
+            color: @tab-color;
+          }
+          .@{bk-prefix}-tab-header--has-num-square,
+          .@{bk-prefix}-tab-header--has-num-elliptic {
+            background-color: @tab-card-tab-bg;
+            color: @tab-number-tag-gray;
+            padding: 0 8px;
+            line-height: 18px;
+            text-align: center;
+          }
+          .@{bk-prefix}-tab-header--has-num-square {
+            border-radius: 2px;
+          }
+          .@{bk-prefix}-tab-header--has-num-elliptic {
+            border-radius: 18px;
+          }
+        }
+      }
+      
       &:hover {
         color: @tab-active;
 
@@ -218,7 +295,6 @@
           color: @danger-color;
         }
       }
-
     }
 
     &--active {
@@ -260,7 +336,18 @@
         border-left: 2px solid @tab-active;
       }
       */
-
+      .@{bk-prefix}-tab-header--has-num {
+        &-right {
+          .@{bk-prefix}-tab-header--has-num-bracket,
+          .@{bk-prefix}-tab-header--has-num-square,
+          .@{bk-prefix}-tab-header--has-num-elliptic {
+            color: @tab-active;
+          }
+          .@{bk-prefix}-tab-header--has-num-square {
+            background-color: @tab-card-number-active;
+          }
+        }
+      }
     }
 
     &--close {