bkui-vue 0.0.1-beta.39 → 0.0.1-beta.41

package/lib/pagination/type.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { PaginationProps } from './pagination';
+export declare type IPaginationInstance = ComponentPublicInstance<PaginationProps, {
+    limit: PaginationProps['limit'];
+    totalPageNum: number;
+}>;

package/lib/pagination/use-limit.d.ts

@@ -0,0 +1,8 @@
+declare const _default: () => {
+    limit: import("vue").Ref<number>;
+    render: ({ isFirst, isLast }: {
+        isFirst: any;
+        isLast: any;
+    }) => JSX.Element;
+};
+export default _default;

package/lib/pagination/use-list.d.ts

@@ -0,0 +1,8 @@
+declare const _default: () => {
+    current: import("vue").Ref<number>;
+    render: ({ isFirst, isLast }: {
+        isFirst: any;
+        isLast: any;
+    }) => JSX.Element;
+};
+export default _default;

package/lib/pagination/use-small-list.d.ts

@@ -0,0 +1,5 @@
+declare const _default: () => {
+    current: import("vue").Ref<number>;
+    render: () => JSX.Element;
+};
+export default _default;

package/lib/pagination/use-total.d.ts

@@ -0,0 +1,5 @@
+declare const _default: () => ({ isFirst, isLast }: {
+    isFirst: any;
+    isLast: any;
+}) => JSX.Element;
+export default _default;

package/lib/popover/index.d.ts

@@ -0,0 +1,287 @@
+declare const BkPopover: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            width: string | number;
+            height: string | number;
+            placement: string;
+            modifiers: unknown[];
+            content: string | number;
+            theme: string;
+            transition: string;
+            trigger: string;
+            arrow: boolean;
+            isShow: boolean;
+            handleFirstUpdate: import("@bkui-vue/shared").OnFirstUpdateFnType;
+            fixOnBoundary: boolean;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            isShow: import("vue-types").VueTypeValidableDef<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;
+            };
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "width" | "height" | "placement" | "modifiers" | "content" | "theme" | "transition" | "trigger" | "arrow" | "isShow" | "handleFirstUpdate" | "fixOnBoundary">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+        $emit: ((event: string, ...args: any[]) => void) | ((event: string, ...args: any[]) => void);
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            isShow: import("vue-types").VueTypeValidableDef<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;
+            };
+        }>>, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, {
+            width: string | number;
+            height: string | number;
+            placement: string;
+            modifiers: unknown[];
+            content: string | number;
+            theme: string;
+            transition: string;
+            trigger: string;
+            arrow: boolean;
+            isShow: boolean;
+            handleFirstUpdate: import("@bkui-vue/shared").OnFirstUpdateFnType;
+            fixOnBoundary: boolean;
+        }> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        isShow: import("vue-types").VueTypeValidableDef<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;
+        };
+    }>> & import("vue").ShallowUnwrapRef<() => JSX.Element> & {} & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    isShow: import("vue-types").VueTypeValidableDef<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;
+    };
+}>>, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, {
+    width: string | number;
+    height: string | number;
+    placement: string;
+    modifiers: unknown[];
+    content: string | number;
+    theme: string;
+    transition: string;
+    trigger: string;
+    arrow: boolean;
+    isShow: boolean;
+    handleFirstUpdate: import("@bkui-vue/shared").OnFirstUpdateFnType;
+    fixOnBoundary: boolean;
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin;
+export default BkPopover;

package/lib/popover/popover.css

@@ -0,0 +1,65 @@
+.bk-popover .bk-popover-reference {
+  display: inline-block;
+}
+.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: 7px 14px;
+  font-size: 12px;
+  color: #fff;
+  background: #26323d;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+.bk-popover-content[data-theme^='dark'] {
+  color: #fff;
+  background: #26323d;
+}
+.bk-popover-content[data-theme^='light'] {
+  color: #26323d;
+  background-color: #fff;
+  box-shadow: 0 0 6px 0 #dcdee5;
+}
+.bk-popover-content[data-theme^='light'][data-show] {
+  box-shadow: 0 0 6px 0 #dcdee5;
+}
+.bk-popover-content[data-show] {
+  display: block;
+}
+.bk-popover-content .arrow {
+  position: absolute;
+  z-index: -1;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+  visibility: hidden;
+}
+.bk-popover-content .arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+  content: '';
+  visibility: visible;
+  transform: rotate(45deg);
+}
+.bk-popover-content[data-popper-placement^='top'] > .arrow {
+  bottom: -4px;
+}
+.bk-popover-content[data-popper-placement^='bottom'] > .arrow {
+  top: -4px;
+}
+.bk-popover-content[data-popper-placement^='left'] > .arrow {
+  right: -4px;
+}
+.bk-popover-content[data-popper-placement^='right'] > .arrow {
+  left: -4px;
+}

package/lib/popover/popover.d.ts

@@ -0,0 +1,117 @@
+declare const _default: import("vue").DefineComponent<{
+    isShow: import("vue-types").VueTypeValidableDef<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;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    isShow: import("vue-types").VueTypeValidableDef<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;
+    };
+}>>, {
+    width: string | number;
+    height: string | number;
+    placement: string;
+    modifiers: unknown[];
+    content: string | number;
+    theme: string;
+    transition: string;
+    trigger: string;
+    arrow: boolean;
+    isShow: boolean;
+    handleFirstUpdate: import("@bkui-vue/shared").OnFirstUpdateFnType;
+    fixOnBoundary: boolean;
+}>;
+export default _default;

package/lib/popover/popover.js

@@ -0,0 +1 @@
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../shared"),require("@babel/runtime/helpers/defineProperty"),require("vue"));else if("function"==typeof define&&define.amd)define(["../shared","@babel/runtime/helpers/defineProperty","vue"],t);else{var r="object"==typeof exports?t(require("../shared"),require("@babel/runtime/helpers/defineProperty"),require("vue")):t(e["../shared"],e["@babel/runtime/helpers/defineProperty"],e.vue);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(self,((e,t,r)=>(()=>{"use strict";var o={4212:t=>{t.exports=e},311:e=>{e.exports=t},748:e=>{e.exports=r}},n={};function a(e){var t=n[e];if(void 0!==t)return t.exports;var r=n[e]={exports:{}};return o[e](r,r.exports,a),r.exports}a.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return a.d(t,{a:t}),t},a.d=(e,t)=>{for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{a.r(i),a.d(i,{default:()=>u});var e=a(4212),t=a(311),r=a.n(t),o=a(748),n={isShow:e.PropTypes.bool,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("light"),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)};const s=(0,o.defineComponent)({name:"Popover",props:n,setup:function(t,n){this.$createElement;var a=!1,i=Object.create(null),s=(0,o.toRefs)(t),u=s.width,p=s.height,d=s.theme,l=s.trigger,f=s.isShow,c=s.placement,v=s.modifiers,m=s.arrow,y=s.content,h=(0,o.ref)(),b=(0,o.ref)(),T=(0,o.computed)((function(){return{width:/^\d+$/.test(String(u.value))?"".concat(u.value,"px"):u.value,height:/^\d+$/.test(String(p.value))?"".concat(p.value,"px"):p.value,zIndex:e.bkZIndexManager.getModalNextIndex()}})),g=["dark","light"],P=(0,o.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)}))}})),x=function(e){var t,r;"manual"===l.value&&a&&(e?null===(t=i.show)||void 0===t||t.call(i):null===(r=i.hide)||void 0===r||r.call(i))};(0,o.watch)((function(){return t.isShow}),(function(e){x(e)}),{immediate:!0});var w=function(){n.emit("update:isShow",!1)},O=function(){n.emit("update:isShow",!0)},S=function(){var e=i;e.constructor&&(e.isShow&&e.hide(),e.destroy(),i=Object.create(null))},j=function(){i=new e.BKPopover(h.value,b.value,{theme:P.value.systemThemes.join(" "),placement:c.value,trigger:l.value,modifiers:v.value,onFirstUpdate:t.handleFirstUpdate,afterShow:O,afterHidden:w,appendTo:t.boundary,fixOnBoundary:t.fixOnBoundary}),a=!0,x(f.value)},N=function(){S(),(0,o.nextTick)(j)};n.expose({update:N}),(0,o.onMounted)(N),(0,o.onBeforeUnmount)(S);var k=function(){n.emit("after-enter")},M=function(){n.emit("after-leave")},q=P.value.customThemes.join(" "),B=P.value.customThemes.reduce((function(e,t){return Object.assign(r()({},"data-".concat(t,"-theme"),!0),e)}),{}),V="bk-popover-content ".concat(q);return function(){var e,r,a,i,s;return(0,o.createVNode)("div",{class:"bk-popover","data-bk-pop-container":!0},[(0,o.createVNode)("div",{ref:h,class:"bk-popover-reference"},[null===(r=(e=n.slots).default)||void 0===r?void 0:r.call(e)]),(0,o.createVNode)(o.Transition,{name:t.transition,onAfterEnter:k,onAfterLeave:M},{default:function(){return[(0,o.createVNode)("div",(0,o.mergeProps)({ref:b,class:V,style:T.value},B),[null!==(s=null===(i=(a=n.slots).content)||void 0===i?void 0:i.call(a))&&void 0!==s?s:y.value,m.value&&(0,o.createVNode)("div",{class:"arrow","data-popper-arrow":!0},null)])]}})])}}}),u=(0,e.withInstall)(s)})(),i})()));

package/lib/popover/popover.less

@@ -0,0 +1,82 @@
+@import '../styles/themes/themes.less';
+
+.@{bk-prefix}-popover {
+  .bk-popover-reference {
+    display: inline-block;
+  }
+
+  .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;
+  }
+
+  &[data-theme^='light'] {
+    color: #26323d;
+    background-color: #fff;
+    box-shadow: 0 0 6px 0 #dcdee5;
+
+    &[data-show] {
+      box-shadow: 0 0 6px 0 #dcdee5;
+    }
+  }
+
+  &[data-show] {
+    display: block;
+  }
+
+  .arrow {
+    position: absolute;
+    z-index: -1;
+    width: 8px;
+    height: 8px;
+    background: inherit;
+    visibility: hidden;
+
+    &::before {
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      background: inherit;
+      content: '';
+      visibility: visible;
+      transform: rotate(45deg);
+    }
+  }
+
+  &[data-popper-placement^='top'] > .arrow {
+    bottom: -4px;
+  }
+
+  &[data-popper-placement^='bottom'] > .arrow {
+    top: -4px;
+  }
+
+  &[data-popper-placement^='left'] > .arrow {
+    right: -4px;
+  }
+
+  &[data-popper-placement^='right'] > .arrow {
+    left: -4px;
+  }
+}