bkui-vue 0.0.1-beta.16 → 0.0.1-beta.162

package/lib/divider/index.d.ts

@@ -3,24 +3,32 @@ declare const BkDivider: {
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: Partial<{
-            width: number;
-            color: string;
             type: string;
-            direction: string;
-            align: string;
-        }> & Omit<Readonly<{
-            direction?: unknown;
-            align?: unknown;
-            color?: unknown;
-            width?: unknown;
-            type?: unknown;
-        } & {
             width: number;
             color: string;
-            type: string;
             direction: string;
             align: string;
-        } & {}> & {} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "width" | "color" | "type" | "direction" | "align">;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            direction: import("vue-types").VueTypeDef<string> & {
+                default: string;
+            };
+            align: import("vue-types").VueTypeDef<string> & {
+                default: string;
+            };
+            color: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            } & {
+                default: string;
+            };
+            width: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            type: import("vue-types").VueTypeDef<string> & {
+                default: string;
+            };
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "width" | "color" | "direction" | "align">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -34,22 +42,30 @@ declare const BkDivider: {
         $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
-        $options: import("vue").ComponentOptionsBase<Readonly<{
-            direction?: unknown;
-            align?: unknown;
-            color?: unknown;
-            width?: unknown;
-            type?: unknown;
-        } & {
-            width: number;
-            color: string;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            direction: import("vue-types").VueTypeDef<string> & {
+                default: string;
+            };
+            align: import("vue-types").VueTypeDef<string> & {
+                default: string;
+            };
+            color: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            } & {
+                default: string;
+            };
+            width: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            type: import("vue-types").VueTypeDef<string> & {
+                default: string;
+            };
+        }>>, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
             type: string;
-            direction: string;
-            align: string;
-        } & {}> & {}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
             width: number;
             color: string;
-            type: string;
             direction: string;
             align: string;
         }> & {
@@ -72,38 +88,54 @@ declare const BkDivider: {
         $forceUpdate: () => void;
         $nextTick: typeof import("vue").nextTick;
         $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
-    } & Readonly<{
-        direction?: unknown;
-        align?: unknown;
-        color?: unknown;
-        width?: unknown;
-        type?: unknown;
-    } & {
-        width: number;
-        color: string;
-        type: string;
-        direction: string;
-        align: string;
-    } & {}> & {} & import("vue").ShallowUnwrapRef<{}> & {} & {} & import("vue").ComponentCustomProperties;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        direction: import("vue-types").VueTypeDef<string> & {
+            default: string;
+        };
+        align: import("vue-types").VueTypeDef<string> & {
+            default: string;
+        };
+        color: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        } & {
+            default: string;
+        };
+        width: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        type: import("vue-types").VueTypeDef<string> & {
+            default: string;
+        };
+    }>> & import("vue").ShallowUnwrapRef<{}> & {} & {} & import("vue").ComponentCustomProperties;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
-} & import("vue").ComponentOptionsBase<Readonly<{
-    direction?: unknown;
-    align?: unknown;
-    color?: unknown;
-    width?: unknown;
-    type?: unknown;
-} & {
-    width: number;
-    color: string;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    direction: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    align: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    color: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    width: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    type: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+}>>, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
     type: string;
-    direction: string;
-    align: string;
-} & {}> & {}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
     width: number;
     color: string;
-    type: string;
     direction: string;
     align: string;
 }> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin;

package/lib/divider/index.js

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("vue"),require("../shared")):"function"==typeof define&&define.amd?define(["exports","vue","../shared"],o):o((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Vue,e.Shared)}(this,(function(e,o,t){"use strict";var i=o.defineComponent({name:"Divider",props:{direction:t.PropTypes.commonType(["horizontal","vertical"],"direction").def("horizontal"),align:t.PropTypes.commonType(["left","center","right"],"align").def("center"),color:t.PropTypes.string.def("#dde4eb"),width:t.PropTypes.number.def(1),type:t.PropTypes.commonType(["dashed","solid"],"lineType").def("dashed")},render:function(){var e,t=this;return this.$slots.default&&(e=o.createVNode("div",{class:["bk-divider-info","bk-divider-info-".concat(this.align)]},[this.$slots.default()])),o.createVNode("div",{class:["bk-divider","bk-divider-".concat(this.direction)],style:"vertical"===t.direction?{borderRight:"".concat(t.width,"px ").concat(t.type," ").concat(t.color)}:{borderBottom:"".concat(t.width,"px ").concat(t.type," ").concat(t.color)}},[e])}}),d=t.withInstall(i);e.default=d,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,o){if("object"==typeof exports&&"object"==typeof module)module.exports=o(require("../shared"),require("vue"));else if("function"==typeof define&&define.amd)define(["../shared","vue"],o);else{var t="object"==typeof exports?o(require("../shared"),require("vue")):o(e["../shared"],e.vue);for(var r in t)("object"==typeof exports?exports:e)[r]=t[r]}}(self,((e,o)=>(()=>{"use strict";var t={4212:o=>{o.exports=e},748:e=>{e.exports=o}},r={};function i(e){var o=r[e];if(void 0!==o)return o.exports;var n=r[e]={exports:{}};return t[e](n,n.exports,i),n.exports}i.d=(e,o)=>{for(var t in o)i.o(o,t)&&!i.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:o[t]})},i.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{i.r(n),i.d(n,{default:()=>d});var e=i(4212),o=i(748),t={direction:e.PropTypes.commonType(["horizontal","vertical"],"direction").def("horizontal"),align:e.PropTypes.commonType(["left","center","right"],"align").def("center"),color:e.PropTypes.string.def("#dde4eb"),width:e.PropTypes.number.def(1),type:e.PropTypes.commonType(["dashed","solid"],"lineType").def("dashed")};const r=(0,o.defineComponent)({name:"Divider",props:t,render:function(){var e,t=this;return this.$slots.default&&(e=(0,o.createVNode)("div",{class:["bk-divider-info","bk-divider-info-".concat(this.align)]},[this.$slots.default()])),(0,o.createVNode)("div",{class:["bk-divider","bk-divider-".concat(this.direction)],style:"vertical"===t.direction?{borderRight:"".concat(t.width,"px ").concat(t.type," ").concat(t.color)}:{borderBottom:"".concat(t.width,"px ").concat(t.type," ").concat(t.color)}},[e])}}),d=(0,e.withInstall)(r)})(),n})()));

package/lib/divider/props.d.ts

@@ -0,0 +1,21 @@
+export declare const dividerProps: {
+    direction: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    align: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    color: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    width: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    type: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+};

package/lib/dropdown/const.d.ts

@@ -0,0 +1,4 @@
+/** 弹层出现位置选项 */
+export declare const PLACEMENT_OPTIONS: string[];
+/** 弹层触发选项  */
+export declare const TRIGGER_OPTIONS: string[];

package/lib/dropdown/dropdown-item.d.ts

@@ -6,11 +6,12 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     wrapperCLasses: import("vue").ComputedRef<any[]>;
     handleClick: (evt: MouseEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    extCls?: unknown;
-} & {
-    extCls: string;
-} & {}> & {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 外部设置的 class name */
+    extCls: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+}>> & {
     onClick?: (...args: any[]) => any;
 }, {
     extCls: string;

package/lib/dropdown/dropdown-menu.d.ts

@@ -5,11 +5,12 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     wrapperCLasses: import("vue").ComputedRef<any[]>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    extCls?: unknown;
-} & {
-    extCls: string;
-} & {}> & {}, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 外部设置的 class name */
+    extCls: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+}>>, {
     extCls: string;
 }>;
 export default _default;

package/lib/dropdown/dropdown.css

@@ -1,14 +1,21 @@
 .bk-dropdown {
   display: inline-block;
 }
+.bk-dropdown .bk-dropdown-reference {
+  z-index: 1;
+}
 .bk-dropdown .bk-dropdown-content {
+  z-index: 2;
   display: none;
   box-shadow: 0 2px 6px rgba(51, 60, 72, 0.1);
 }
 .bk-dropdown .bk-dropdown-content[data-show] {
   display: block;
 }
-.bk-dropdown-menu {
+.bk-popover2.bk-pop2-content.bk-dropdown-popover {
+  padding: 0;
+}
+.bk-dropdown-popover .bk-dropdown-menu {
   min-width: 100%;
   padding: 5px 0;
   margin: 0;
@@ -17,16 +24,16 @@
   border-radius: 2px;
   box-sizing: border-box;
 }
-.bk-dropdown-menu::-webkit-scrollbar {
+.bk-dropdown-popover .bk-dropdown-menu::-webkit-scrollbar {
   width: 4px;
   height: 4px;
 }
-.bk-dropdown-menu::-webkit-scrollbar-thumb {
+.bk-dropdown-popover .bk-dropdown-menu::-webkit-scrollbar-thumb {
   background: #dde4eb;
   border-radius: 20px;
   box-shadow: inset 0 0 6px hsla(0, 0%, 80%, 0.3);
 }
-.bk-dropdown-item {
+.bk-dropdown-popover .bk-dropdown-item {
   display: block;
   height: 32px;
   padding: 0 16px;
@@ -37,7 +44,7 @@
   list-style: none;
   cursor: pointer;
 }
-.bk-dropdown-item:hover {
+.bk-dropdown-popover .bk-dropdown-item:hover {
   color: #3a84ff;
   background-color: #eaf3ff;
 }

package/lib/dropdown/dropdown.d.ts

@@ -5,6 +5,7 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    /** 弹层出现位置 */
     placement: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
@@ -18,32 +19,74 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    /** popover属性 */
+    popoverOptions: import("vue-types").VueTypeValidableDef<{
+        [key: string]: any;
+    }> & {
+        default: () => {
+            [key: string]: any;
+        };
+    } & {
+        default: () => {
+            [key: string]: any;
+        };
+    };
     /** 外部设置的 class name */
     extCls: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
 }, {
-    reference: any;
-    refContent: any;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "showChange"[], "showChange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    isShow?: unknown;
-    placement?: unknown;
-    trigger?: unknown;
-    disabled?: unknown;
-    extCls?: unknown;
-} & {
-    placement: string;
-    extCls: string;
-    disabled: boolean;
-    trigger: string;
-    isShow: boolean;
-} & {}> & {
+    afterShow: () => void;
+    afterHidden: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hide" | "show" | "showChange")[], "hide" | "show" | "showChange", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /** trigger = manual时候控制显隐藏  */
+    isShow: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    /** 弹层出现位置 */
+    placement: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    /** 触发方式 */
+    trigger: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    /** 是否禁用 */
+    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    /** popover属性 */
+    popoverOptions: import("vue-types").VueTypeValidableDef<{
+        [key: string]: any;
+    }> & {
+        default: () => {
+            [key: string]: any;
+        };
+    } & {
+        default: () => {
+            [key: string]: any;
+        };
+    };
+    /** 外部设置的 class name */
+    extCls: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+}>> & {
+    onShow?: (...args: any[]) => any;
+    onHide?: (...args: any[]) => any;
     onShowChange?: (...args: any[]) => any;
 }, {
     placement: string;
-    extCls: string;
     disabled: boolean;
     trigger: string;
+    extCls: string;
     isShow: boolean;
+    popoverOptions: {
+        [key: string]: any;
+    };
 }>;
 export default _default;

package/lib/dropdown/dropdown.less

@@ -3,7 +3,12 @@
 .@{bk-prefix}-dropdown {
   display: inline-block;
 
+  .bk-dropdown-reference {
+    z-index: 1;
+  }
+
   .bk-dropdown-content {
+    z-index: 2;
     display: none;
     box-shadow: 0 2px 6px rgba(51,60,72,.1);
 
@@ -12,43 +17,52 @@
     }
   }
 }
-
-.@{bk-prefix}-dropdown-menu {
-  min-width: 100%;
-  padding: 5px 0;
-  margin: 0;
-  background: #fff;
-  border: 1px solid  #dcdee5;
-  border-radius: 2px;
-  box-sizing: border-box;
-
-  &::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: #dde4eb;
-    border-radius: 20px;
-    box-shadow: inset 0 0 6px hsla(0,0%,80%,.3);
+.@{bk-prefix}-popover2 {
+  &.@{bk-prefix}-pop2-content {
+    &.@{bk-prefix}-dropdown-popover {
+      padding: 0;
+    }
   }
 }
-
-.@{bk-prefix}-dropdown-item {
-  display: block;
-  height: 32px;
-  padding: 0 16px;
-  font-size: 12px;
-  line-height: 33px;
-  color: #63656e;
-  white-space: nowrap;
-  list-style: none;
-  cursor: pointer;
-
-  &:hover {
-    color: #3a84ff;
-    background-color: #eaf3ff;
+.@{bk-prefix}-dropdown-popover {
+  .@{bk-prefix}-dropdown-menu {
+    min-width: 100%;
+    padding: 5px 0;
+    margin: 0;
+    background: #fff;
+    border: 1px solid  #dcdee5;
+    border-radius: 2px;
+    box-sizing: border-box;
+  
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+  
+    &::-webkit-scrollbar-thumb {
+      background: #dde4eb;
+      border-radius: 20px;
+      box-shadow: inset 0 0 6px hsla(0,0%,80%,.3);
+    }
+  }
+  
+  .@{bk-prefix}-dropdown-item {
+    display: block;
+    height: 32px;
+    padding: 0 16px;
+    font-size: 12px;
+    line-height: 33px;
+    color: #63656e;
+    white-space: nowrap;
+    list-style: none;
+    cursor: pointer;
+  
+    &:hover {
+      color: #3a84ff;
+      background-color: #eaf3ff;
+    }
   }
 }
 
 
+

package/lib/dropdown/dropdown.variable.css

@@ -1,5 +1,6 @@
 :root {
   --bk-prefix: bk;
+  --popover-max-height: 216px;
   --primary-color: #3a84ff;
   --success-color: #2dcb56;
   --warning-color: #ff9c01;
@@ -8,6 +9,7 @@
   --gray-color: #979ba5;
   --light-gray: #c4c6cc;
   --white-color: white;
+  --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
@@ -17,7 +19,7 @@
   --line-height-large: 18px;
   --component-size-small: 26px;
   --component-size-base: 32px;
-  --component-size-large: 38px;
+  --component-size-large: 40px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;
@@ -30,8 +32,9 @@
   --input-broder-radius: 3px;
   --input-shadow-color: #a3c5fd;
   --input-horizontal-padding: 10px;
-  --input-block-color: #f4f6fa;
-  --input-icon-size: var(--font-size-large);
+  --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;
@@ -42,6 +45,15 @@
   --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: #5594fa;
+  --radio-hover-border-color: #979ba5;
+  --radio-disabled-border: #dcdee5;
+  --radio-disabled-font-color: #c4c6c;
+  --radio-distable-checked-bg: #fafbfd;
+  --radio-button-checked-bg: #e1ecff;
   --fixed-navbar-background: #fff;
   --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
   --switch-default-color: #fff;
@@ -62,12 +74,16 @@
   --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;
@@ -83,18 +99,36 @@
   --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: #575961;
+  --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;
 }
 .bk-dropdown {
   display: inline-block;
 }
+.bk-dropdown .bk-dropdown-reference {
+  z-index: 1;
+}
 .bk-dropdown .bk-dropdown-content {
+  z-index: 2;
   display: none;
   box-shadow: 0 2px 6px rgba(51, 60, 72, 0.1);
 }
 .bk-dropdown .bk-dropdown-content[data-show] {
   display: block;
 }
-.bk-dropdown-menu {
+.bk-popover2.bk-pop2-content.bk-dropdown-popover {
+  padding: 0;
+}
+.bk-dropdown-popover .bk-dropdown-menu {
   min-width: 100%;
   padding: 5px 0;
   margin: 0;
@@ -103,16 +137,16 @@
   border-radius: 2px;
   box-sizing: border-box;
 }
-.bk-dropdown-menu::-webkit-scrollbar {
+.bk-dropdown-popover .bk-dropdown-menu::-webkit-scrollbar {
   width: 4px;
   height: 4px;
 }
-.bk-dropdown-menu::-webkit-scrollbar-thumb {
+.bk-dropdown-popover .bk-dropdown-menu::-webkit-scrollbar-thumb {
   background: #dde4eb;
   border-radius: 20px;
   box-shadow: inset 0 0 6px hsla(0, 0%, 80%, 0.3);
 }
-.bk-dropdown-item {
+.bk-dropdown-popover .bk-dropdown-item {
   display: block;
   height: 32px;
   padding: 0 16px;
@@ -123,7 +157,7 @@
   list-style: none;
   cursor: pointer;
 }
-.bk-dropdown-item:hover {
+.bk-dropdown-popover .bk-dropdown-item:hover {
   color: #3a84ff;
   background-color: #eaf3ff;
 }