bkui-vue 0.0.1-beta.9 → 0.0.1-beta.92

package/lib/popover/index.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("../shared")):"function"==typeof define&&define.amd?define(["exports","vue","../shared"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Vue,e.Shared)}(this,(function(e,t,o){"use strict";var n=t.defineComponent({name:"BkPopover",props:{isShow:o.PropTypes.bool,width:o.PropTypes.oneOfType([o.PropTypes.string,o.PropTypes.number]).def("auto"),height:o.PropTypes.oneOfType([o.PropTypes.string,o.PropTypes.number]).def("auto"),content:o.PropTypes.oneOfType([o.PropTypes.string,o.PropTypes.number]).def(""),placement:o.PropTypes.placement().def("top"),theme:o.PropTypes.theme(["dark","light"]).def("light"),trigger:o.PropTypes.string.def("hover"),arrow:o.PropTypes.bool.def(!0),modifiers:o.PropTypes.array.def([]),onFirstUpdate:o.PropTypes.func},data:function(){return{popoverInstance:Object.create(null),isPopInstance:!1}},watch:{isShow:{immediate:!0,handler:function(e){var t=this;this.$nextTick((function(){"manual"===t.trigger&&t.isPopInstance&&(e?t.popoverInstance.show():t.popoverInstance.hide())}))}}},mounted:function(){var e=this;this.$nextTick((function(){e.popoverInstance=new o.BKPopover(e.$refs.reference,e.$refs.refContent,{theme:e.theme,placement:e.placement,trigger:e.trigger,modifiers:e.modifiers,onFirstUpdate:e.onFirstUpdate}),e.isPopInstance=!0}))},beforeUnmount:function(){var e=this.popoverInstance;e.isShow&&e.hide(),e.destroy(),this.popoverInstance=Object.create(null)},methods:{handleClose:function(){this.$emit("update:isShow",!1)}},setup:function(e){var o=t.toRefs(e),n=o.width,r=o.height;return{compStyle:t.computed((function(){return{width:/^\d+$/.test(n.value)?"".concat(n.value,"px"):n.value,height:/^\d+$/.test(r.value)?"".concat(r.value,"px"):r.value}}))}},render:function(){var e,o,n,r,s;return t.createVNode("div",{class:"bk-popover"},[t.createVNode("div",{ref:"reference",class:"bk-popover-reference"},[null===(o=(e=this.$slots).default)||void 0===o?void 0:o.call(e)]),t.createVNode("div",{ref:"refContent",class:"bk-popover-content",style:this.compStyle},[null!==(s=null===(r=(n=this.$slots).content)||void 0===r?void 0:r.call(n))&&void 0!==s?s:this.content,this.arrow&&t.createVNode("div",{class:"arrow","data-popper-arrow":!0},null)])])}}),r=o.withInstall(n);e.default=r,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../shared"),require("vue"));else if("function"==typeof define&&define.amd)define(["../shared","vue"],t);else{var o="object"==typeof exports?t(require("../shared"),require("vue")):t(e["../shared"],e.vue);for(var r in o)("object"==typeof exports?exports:e)[r]=o[r]}}(self,((e,t)=>(()=>{"use strict";var o={4212:t=>{t.exports=e},748:e=>{e.exports=t}},r={};function n(e){var t=r[e];if(void 0!==t)return t.exports;var a=r[e]={exports:{}};return o[e](a,a.exports,n),a.exports}n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{n.r(a),n.d(a,{default:()=>s});var e=n(4212),t=n(748),o={onAfterHidden:Function,onAfterShow:Function},r=Object.assign({isShow:e.PropTypes.bool.def(!1),always:e.PropTypes.bool.def(!1),disabled:e.PropTypes.bool.def(!1),width:e.PropTypes.oneOfType([e.PropTypes.string,e.PropTypes.number]).def("auto"),height:e.PropTypes.oneOfType([e.PropTypes.string,e.PropTypes.number]).def("auto"),content:e.PropTypes.oneOfType([e.PropTypes.string,e.PropTypes.number]).def(""),transition:e.PropTypes.string.def("fade-in"),placement:e.PropTypes.placement(["auto","auto-start","auto-end","top","top-start","top-end","bottom","bottom-start","bottom-end","right","right-start","right-end","left","left-start","left-end"]).def("top"),theme:e.PropTypes.string.def("dark"),handleFirstUpdate:{type:Function,default:function(){}},trigger:e.PropTypes.string.def("hover"),arrow:e.PropTypes.bool.def(!0),modifiers:e.PropTypes.array.def([{name:"offset",options:{offset:[0,8]}}]),boundary:e.PropTypes.oneOfType([e.PropTypes.string.def("parent"),e.PropTypes.instanceOf(HTMLElement)]),fixOnBoundary:e.PropTypes.bool.def(!1),zIndex:e.PropTypes.number.def(void 0),stopBehaviors:e.PropTypes.oneOfType([e.PropTypes.arrayOf(e.PropTypes.commonType(["stopPropagation","stopImmediatePropagation","preventDefault"],"stopBehaviors")),e.PropTypes.string]).def([])},o);const i=(0,t.defineComponent)({name:"Popover",props:r,emits:["afterHidden","afterShow","update:isShow"],setup:function(o,r){var n=!1,a=Object.create(null),i=(0,t.ref)(0),s=(0,t.toRefs)(o),p=s.width,u=s.height,d=s.theme,f=s.trigger,l=s.isShow,c=s.placement,v=s.modifiers,y=s.arrow,m=s.content,h=(0,t.ref)(),b=(0,t.ref)(),T=(0,t.computed)((function(){return{width:/^\d+$/.test(String(p.value))?"".concat(p.value,"px"):p.value,height:/^\d+$/.test(String(u.value))?"".concat(u.value,"px"):u.value,zIndex:i.value}})),g=["dark","light"],P=(0,t.computed)((function(){var e=d.value.split(/\s+/);return e.sort((function(e,t){return Number(g.includes(t))-Number(g.includes(e))})),{systemThemes:e,customThemes:e.filter((function(e){return!g.includes(e)}))}})),w=function(t){var r,s;if(n){if(t)return i.value="number"==typeof o.zIndex?o.zIndex:e.bkZIndexManager.getModalNextIndex(),void(null===(r=a.show)||void 0===r||r.call(a));null===(s=a.hide)||void 0===s||s.call(a)}};(0,t.watch)((function(){return o.isShow}),(function(e){w(e)}),{immediate:!0});var x=function(){r.emit("update:isShow",!1),r.emit("afterHidden",!1)},O=function(){r.emit("update:isShow",!0),r.emit("afterShow",!1)},S=function(){var e=a;e.constructor&&(e.isShow&&e.hide(),e.destroy(),a=Object.create(null))},j=function(){a=new e.BKPopover(h.value,b.value,{theme:P.value.systemThemes.join(" "),placement:c.value,trigger:f.value,modifiers:v.value,onFirstUpdate:o.handleFirstUpdate,afterShow:O,afterHidden:x,appendTo:o.boundary,always:o.always,disabled:o.disabled,fixOnBoundary:o.fixOnBoundary}),n=!0,l.value&&w(l.value)},B=function(){S(),(0,t.nextTick)(j)};r.expose({update:B}),(0,t.onMounted)(B),(0,t.onBeforeUnmount)(S);var k=function(){r.emit("after-enter")},I=function(){r.emit("after-leave")},N=P.value.customThemes.join(" "),A=P.value.customThemes.reduce((function(e,t){return Object.assign((o={},!0,(r="data-".concat(t,"-theme"))in o?Object.defineProperty(o,r,{value:true,enumerable:!0,configurable:!0,writable:!0}):o[r]=true,o),e);var o,r}),{}),F="bk-popover-content ".concat(N),M=function(e){var t=function(t){"function"==typeof e[t]&&e[t]()};Array.isArray(o.stopBehaviors)&&o.stopBehaviors.forEach(t),"string"==typeof o.stopBehaviors&&t(o.stopBehaviors)};return function(){var e,n,a,i,s;return(0,t.createVNode)("div",{class:"bk-popover","data-bk-pop-container":!0},[(0,t.createVNode)("div",{ref:h,class:"bk-popover-reference"},[null===(n=(e=r.slots).default)||void 0===n?void 0:n.call(e)]),(0,t.createVNode)(t.Transition,{name:o.transition,onAfterEnter:k,onAfterLeave:I},{default:function(){return[(0,t.createVNode)("div",(0,t.mergeProps)({ref:b,class:F,style:T.value},A,{onClick:M}),[null!==(s=null===(i=(a=r.slots).content)||void 0===i?void 0:i.call(a))&&void 0!==s?s:m.value,y.value&&(0,t.createVNode)("div",{class:"arrow","data-popper-arrow":!0},null)])]}})])}}}),s=(0,e.withInstall)(i)})(),a})()));

package/lib/popover/popover.css

@@ -1,39 +1,51 @@
+.bk-popover {
+  display: inline-block;
+}
 .bk-popover .bk-popover-reference {
   display: inline-block;
 }
-.bk-popover .bk-popover-content {
+.bk-popover .fade-in-enter-active,
+.bk-popover .fade-in-linear-leave-active {
+  transition: opacity 200ms linear;
+}
+.bk-popover .fade-in-enter,
+.bk-popover .fade-in-leave,
+.bk-popover .fade-in-leave-active {
+  opacity: 0;
+}
+.bk-popover-content {
   display: none;
-  padding: 4px 8px;
-  font-size: 13px;
-  font-weight: bold;
+  padding: 7px 14px;
+  font-size: 12px;
   color: #fff;
   background: #26323d;
   border-radius: 4px;
   box-sizing: border-box;
 }
-.bk-popover .bk-popover-content[data-theme='dark'] {
+.bk-popover-content[data-theme^='dark'] {
   color: #fff;
   background: #26323d;
 }
-.bk-popover .bk-popover-content[data-theme='light'] {
+.bk-popover-content[data-theme^='light'] {
   color: #26323d;
   background-color: #fff;
   box-shadow: 0 0 6px 0 #dcdee5;
 }
-.bk-popover .bk-popover-content[data-theme='light'][data-show] {
+.bk-popover-content[data-theme^='light'][data-show] {
   box-shadow: 0 0 6px 0 #dcdee5;
 }
-.bk-popover .bk-popover-content[data-show] {
+.bk-popover-content[data-show] {
   display: block;
 }
-.bk-popover .bk-popover-content .arrow {
+.bk-popover-content .arrow {
   position: absolute;
+  z-index: -1;
   width: 8px;
   height: 8px;
   background: inherit;
   visibility: hidden;
 }
-.bk-popover .bk-popover-content .arrow::before {
+.bk-popover-content .arrow::before {
   position: absolute;
   width: 8px;
   height: 8px;
@@ -42,15 +54,15 @@
   visibility: visible;
   transform: rotate(45deg);
 }
-.bk-popover .bk-popover-content[data-popper-placement^='top'] > .arrow {
+.bk-popover-content[data-popper-placement^='top'] > .arrow {
   bottom: -4px;
 }
-.bk-popover .bk-popover-content[data-popper-placement^='bottom'] > .arrow {
+.bk-popover-content[data-popper-placement^='bottom'] > .arrow {
   top: -4px;
 }
-.bk-popover .bk-popover-content[data-popper-placement^='left'] > .arrow {
-  right: 0;
+.bk-popover-content[data-popper-placement^='left'] > .arrow {
+  right: -4px;
 }
-.bk-popover .bk-popover-content[data-popper-placement^='right'] > .arrow {
-  left: -8px;
+.bk-popover-content[data-popper-placement^='right'] > .arrow {
+  left: -4px;
 }

package/lib/popover/popover.d.ts

@@ -1,6 +1,20 @@
 declare const _default: import("vue").DefineComponent<{
+    onAfterHidden: FunctionConstructor;
+    onAfterShow: FunctionConstructor;
     isShow: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
+    } & {
+        default: boolean;
+    };
+    always: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
     };
     width: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
@@ -11,17 +25,23 @@ declare const _default: import("vue").DefineComponent<{
     content: import("vue-types").VueTypeDef<string | number> & {
         default: string | number;
     };
+    transition: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
     placement: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
-    theme: import("vue-types").VueTypeDef<string> & {
+    theme: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
         default: string;
     };
-    /**
-     * 触发方式
-     * 支持 click hover manual
-     * manual： 通过isShow控制显示、隐藏
-     */
+    handleFirstUpdate: {
+        type: import("vue").PropType<import("@bkui-vue/shared").OnFirstUpdateFnType>;
+        default: () => void;
+    };
     trigger: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     } & {
@@ -37,52 +57,109 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: () => unknown[];
     };
-    onFirstUpdate: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
-        default: (...args: any[]) => any;
-    };
-}, {
-    compStyle: import("vue").ComputedRef<{
-        width: any;
-        height: any;
-    }>;
-}, {
-    popoverInstance: any;
-    isPopInstance: boolean;
-}, {}, {
-    handleClose(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    isShow?: unknown;
-    width?: unknown;
-    height?: unknown;
-    content?: unknown;
-    placement?: unknown;
-    theme?: unknown;
-    trigger?: unknown;
-    arrow?: unknown;
-    modifiers?: unknown;
-    onFirstUpdate?: unknown;
-} & {
+    boundary: import("vue-types").VueTypeDef<string | HTMLElement>;
+    fixOnBoundary: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    zIndex: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    stopBehaviors: import("vue-types").VueTypeDef<string | string[]> & {
+        default: string | (() => string[]);
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, "afterHidden" | "afterShow" | "update:isShow", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    onAfterHidden: FunctionConstructor;
+    onAfterShow: FunctionConstructor;
+    isShow: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    always: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    width: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    content: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    transition: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    placement: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    theme: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    handleFirstUpdate: {
+        type: import("vue").PropType<import("@bkui-vue/shared").OnFirstUpdateFnType>;
+        default: () => void;
+    };
+    trigger: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    arrow: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    modifiers: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    boundary: import("vue-types").VueTypeDef<string | HTMLElement>;
+    fixOnBoundary: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    zIndex: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    stopBehaviors: import("vue-types").VueTypeDef<string | string[]> & {
+        default: string | (() => string[]);
+    };
+}>>, {
     placement: string;
     modifiers: unknown[];
-    width: string | number;
-    height: string | number;
-    theme: string;
+    zIndex: number;
     content: string | number;
-    isShow: boolean;
     trigger: string;
+    disabled: boolean;
     arrow: boolean;
-} & {
-    onFirstUpdate?: (...args: any[]) => any;
-}> & {}, {
-    placement: string;
-    modifiers: unknown[];
-    onFirstUpdate: (...args: any[]) => any;
+    theme: string;
     width: string | number;
     height: string | number;
-    theme: string;
-    content: string | number;
+    always: boolean;
+    transition: string;
+    stopBehaviors: string | string[];
     isShow: boolean;
-    trigger: string;
-    arrow: boolean;
+    handleFirstUpdate: import("@bkui-vue/shared").OnFirstUpdateFnType;
+    fixOnBoundary: boolean;
 }>;
 export default _default;

package/lib/popover/popover.less

@@ -1,71 +1,84 @@
 @import '../styles/themes/themes.less';
 
 .@{bk-prefix}-popover {
+  display: inline-block;
+
   .bk-popover-reference {
     display: inline-block;
   }
 
-  .bk-popover-content {
-    display: none;
-    padding: 4px 8px;
-    font-size: 13px;
-    font-weight: bold;
+  .fade-in-enter-active,
+  .fade-in-linear-leave-active {
+    transition: opacity 200ms linear;
+  }
+
+  .fade-in-enter,
+  .fade-in-leave,
+  .fade-in-leave-active {
+    opacity: 0;
+  }
+}
+
+.bk-popover-content {
+  display: none;
+  padding: 7px 14px;
+  font-size: 12px;
+  color: #fff;
+  background: #26323d;
+  border-radius: 4px;
+  box-sizing: border-box;
+
+  &[data-theme^='dark'] {
     color: #fff;
     background: #26323d;
-    border-radius: 4px;
-    box-sizing: border-box;
+  }
 
-    &[data-theme='dark'] {
-      color: #fff;
-      background: #26323d;
-    }
+  &[data-theme^='light'] {
+    color: #26323d;
+    background-color: #fff;
+    box-shadow: 0 0 6px 0 #dcdee5;
 
-    &[data-theme='light'] {
-      color: #26323d;
-      background-color: #fff;
+    &[data-show] {
       box-shadow: 0 0 6px 0 #dcdee5;
-
-      &[data-show] {
-        box-shadow: 0 0 6px 0 #dcdee5;
-      }
     }
+  }
 
-    &[data-show] {
-      display: block;
-    }
+  &[data-show] {
+    display: block;
+  }
 
-    .arrow {
+  .arrow {
+    position: absolute;
+    z-index: -1;
+    width: 8px;
+    height: 8px;
+    background: inherit;
+    visibility: hidden;
+
+    &::before {
       position: absolute;
       width: 8px;
       height: 8px;
       background: inherit;
-      visibility: hidden;
-
-      &::before {
-        position: absolute;
-        width: 8px;
-        height: 8px;
-        background: inherit;
-        content: '';
-        visibility: visible;
-        transform: rotate(45deg);
-      }
+      content: '';
+      visibility: visible;
+      transform: rotate(45deg);
     }
+  }
 
-    &[data-popper-placement^='top'] > .arrow {
-      bottom: -4px;
-    }
+  &[data-popper-placement^='top'] > .arrow {
+    bottom: -4px;
+  }
 
-    &[data-popper-placement^='bottom'] > .arrow {
-      top: -4px;
-    }
+  &[data-popper-placement^='bottom'] > .arrow {
+    top: -4px;
+  }
 
-    &[data-popper-placement^='left'] > .arrow {
-      right: 0;
-    }
+  &[data-popper-placement^='left'] > .arrow {
+    right: -4px;
+  }
 
-    &[data-popper-placement^='right'] > .arrow {
-      left: -8px;
-    }
+  &[data-popper-placement^='right'] > .arrow {
+    left: -4px;
   }
-}
+}

package/lib/popover/popover.variable.css

@@ -1,12 +1,15 @@
 :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;
   --font-size-base: 12px;
   --font-size-medium: 14px;
@@ -67,43 +70,81 @@
   --message-success-border-color: #dcffe2;
   --message-danger-bg-color: #ffeded;
   --message-danger-border-color: #ffdddd;
+  --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: #575961;
+  --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
+  --cascader-panel-border-color: #dcdee5;
+  --cascader-panel-hover: #eaf3ff;
+  --cascader-panel-active: #f4f6fa;
+  --cascader-panel-disabled-bg: #fff;
+}
+.bk-popover {
+  display: inline-block;
 }
 .bk-popover .bk-popover-reference {
   display: inline-block;
 }
-.bk-popover .bk-popover-content {
+.bk-popover .fade-in-enter-active,
+.bk-popover .fade-in-linear-leave-active {
+  transition: opacity 200ms linear;
+}
+.bk-popover .fade-in-enter,
+.bk-popover .fade-in-leave,
+.bk-popover .fade-in-leave-active {
+  opacity: 0;
+}
+.bk-popover-content {
   display: none;
-  padding: 4px 8px;
-  font-size: 13px;
-  font-weight: bold;
+  padding: 7px 14px;
+  font-size: 12px;
   color: #fff;
   background: #26323d;
   border-radius: 4px;
   box-sizing: border-box;
 }
-.bk-popover .bk-popover-content[data-theme='dark'] {
+.bk-popover-content[data-theme^='dark'] {
   color: #fff;
   background: #26323d;
 }
-.bk-popover .bk-popover-content[data-theme='light'] {
+.bk-popover-content[data-theme^='light'] {
   color: #26323d;
   background-color: #fff;
   box-shadow: 0 0 6px 0 #dcdee5;
 }
-.bk-popover .bk-popover-content[data-theme='light'][data-show] {
+.bk-popover-content[data-theme^='light'][data-show] {
   box-shadow: 0 0 6px 0 #dcdee5;
 }
-.bk-popover .bk-popover-content[data-show] {
+.bk-popover-content[data-show] {
   display: block;
 }
-.bk-popover .bk-popover-content .arrow {
+.bk-popover-content .arrow {
   position: absolute;
+  z-index: -1;
   width: 8px;
   height: 8px;
   background: inherit;
   visibility: hidden;
 }
-.bk-popover .bk-popover-content .arrow::before {
+.bk-popover-content .arrow::before {
   position: absolute;
   width: 8px;
   height: 8px;
@@ -112,15 +153,15 @@
   visibility: visible;
   transform: rotate(45deg);
 }
-.bk-popover .bk-popover-content[data-popper-placement^='top'] > .arrow {
+.bk-popover-content[data-popper-placement^='top'] > .arrow {
   bottom: -4px;
 }
-.bk-popover .bk-popover-content[data-popper-placement^='bottom'] > .arrow {
+.bk-popover-content[data-popper-placement^='bottom'] > .arrow {
   top: -4px;
 }
-.bk-popover .bk-popover-content[data-popper-placement^='left'] > .arrow {
-  right: 0;
+.bk-popover-content[data-popper-placement^='left'] > .arrow {
+  right: -4px;
 }
-.bk-popover .bk-popover-content[data-popper-placement^='right'] > .arrow {
-  left: -8px;
+.bk-popover-content[data-popper-placement^='right'] > .arrow {
+  left: -4px;
 }

package/lib/popover/props.d.ts

@@ -0,0 +1,104 @@
+import { ExtractPropTypes, PropType } from 'vue';
+import { OnFirstUpdateFnType } from '@bkui-vue/shared';
+export declare const PopoverProps: {
+    onAfterHidden: FunctionConstructor;
+    onAfterShow: FunctionConstructor;
+    isShow: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    always: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    width: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    content: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    /**
+     * 动画展示方式
+     */
+    transition: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    /**
+     * 组件显示位置
+     */
+    placement: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    theme: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    /**
+     * handleFirstUpdate
+     */
+    handleFirstUpdate: {
+        type: PropType<OnFirstUpdateFnType>;
+        default: () => void;
+    };
+    /**
+     * 触发方式
+     * 支持 click hover manual
+     * manual： 通过isShow控制显示、隐藏
+     */
+    trigger: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    arrow: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    modifiers: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    /**
+     * 弹出内容绑定元素
+     */
+    boundary: import("vue-types").VueTypeDef<string | HTMLElement>;
+    /**
+     * 如果设置了boundary为指定DOM，此配置项生效
+     * 是否将弹出内容固定到目标元素位置
+     * 例如：boundary = document.body, fixOnBoundary = true，则弹出内容会一直固定到body
+     */
+    fixOnBoundary: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    zIndex: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    /**
+     * 弹出框鼠标点击事件是否阻止的点击事件行为
+     * 支持 stopPropagation stopImmediatePropagation preventDefault
+     * 用于在嵌套弹出或者元素定位导致的点击触发关闭问题
+     */
+    stopBehaviors: import("vue-types").VueTypeDef<string | string[]> & {
+        default: string | (() => string[]);
+    };
+};
+export declare type PopoverPropTypes = Readonly<ExtractPropTypes<typeof PopoverProps>>;