bkui-vue 0.0.1-beta.4 → 0.0.1-beta.40

package/lib/rate/rate.d.ts

@@ -10,16 +10,19 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    modelValue?: unknown;
-    size?: unknown;
-    editable?: unknown;
-} & {
-    modelValue: number;
-    editable: boolean;
-} & {
-    size?: string;
-}> & {
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    size: import("vue-types").VueTypeDef<string>;
+    editable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}>> & {
     onChange?: (...args: any[]) => any;
     "onUpdate:modelValue"?: (...args: any[]) => any;
 }, {

package/lib/rate/rate.js

@@ -0,0 +1 @@
+!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 r="object"==typeof exports?t(require("../shared"),require("vue")):t(e["../shared"],e.vue);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(self,((e,t)=>(()=>{"use strict";var r={4212:t=>{t.exports=e},748:e=>{e.exports=t}},o={};function a(e){var t=o[e];if(void 0!==t)return t.exports;var n=o[e]={exports:{}};return r[e](n,n.exports,a),n.exports}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 n={};return(()=>{a.r(n),a.d(n,{default:()=>s});var e=a(4212),t=a(748);const r=(0,t.defineComponent)({name:"Star",props:{rate:e.PropTypes.number.def(0),width:e.PropTypes.number.def(15),height:e.PropTypes.number.def(16),editable:e.PropTypes.bool.def(!0),hoverRate:e.PropTypes.number.def(0),max:e.PropTypes.number.def(5)},emits:["chooseRate","changeHover"],setup:function(r,o){var a=o.emit,n=(this.$createElement,function(t){return(0,e.classes)({"bk-is-select":t<Math.floor(s.value),"bk-is-edit":r.editable,"bk-rate-star":!0})}),s=(0,t.computed)((function(){return r.hoverRate||r.rate})),i={width:"".concat(r.width,"px"),height:"".concat(r.height,"px"),minWidth:"".concat(r.width,"px")};return function(){return(0,t.createVNode)("p",{class:"bk-rate-stars"},[Array(r.max).fill(1).map((function(e,o){return(0,t.createVNode)("svg",{class:n(o),style:i,x:"0px",y:"0px",viewBox:"0 0 64 64",onClick:function(){return function(e){r.editable&&a("chooseRate",e+1)}(o)},onMouseenter:function(){return function(e){r.editable&&a("changeHover",e+1)}(o)}},[(0,t.createVNode)("g",{transform:"translate(-143.000000, -635.000000)"},[(0,t.createVNode)("g",{transform:"translate(83.000000, 114.000000)"},[(0,t.createVNode)("g",{transform:"translate(15.000000, 384.000000)"},[(0,t.createVNode)("g",{transform:"translate(29.000000, 137.000000)"},[(0,t.createVNode)("polygon",{class:"st1",points:"48,53 28.2,63.9 32,40.8 16,24.4 38.1,21 48,-0.1 57.8,21 79.9,24.4 63.9,40.8 67.7,63.9"},null)])])])])])}))])}}}),o=(0,t.defineComponent)({name:"Rate",components:{star:r},props:{modelValue:e.PropTypes.number.def(0),size:e.PropTypes.size(),editable:e.PropTypes.bool.def(!0)},emits:["change","update:modelValue"],setup:function(o,a){var n=a.emit,s=(this.$createElement,(0,t.ref)(0)),i=function(e){o.editable&&(n("update:modelValue",e),n("change",e))},l=function(e){s.value=e},u=(0,e.classes)({"bk-rate":!0}),d={small:{width:12,height:12},large:{width:18,height:18}}[o.size]||{width:15,height:16},c=(0,t.computed)((function(){var e=Math.floor(o.modelValue),t=(d.width+3)*e,r=d.width*(o.modelValue-e);return{width:"".concat(t+r,"px")}})),p={width:d.width,height:d.height};return function(){return(0,t.createVNode)("p",{class:u},[o.editable?(0,t.createVNode)(r,(0,t.mergeProps)({rate:o.modelValue,"hover-rate":s.value,onChooseRate:i,onChangeHover:l,onMouseleave:function(){return l(0)}},p),null):(0,t.createVNode)(t.Fragment,null,[(0,t.createVNode)(r,(0,t.mergeProps)({rate:5,style:c.value,class:"bk-score-real",editable:!1},p),null),(0,t.createVNode)(r,(0,t.mergeProps)({rate:0,editable:!1},p),null)])])}}}),s=(0,e.withInstall)(o)})(),n})()));

package/lib/rate/star.d.ts

@@ -29,29 +29,46 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: number;
     };
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("chooseRate" | "changeHover")[], "chooseRate" | "changeHover", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    rate?: unknown;
-    width?: unknown;
-    height?: unknown;
-    editable?: unknown;
-    hoverRate?: unknown;
-    max?: unknown;
-} & {
-    width: number;
-    height: number;
-    max: number;
-    rate: number;
-    editable: boolean;
-    hoverRate: number;
-} & {}> & {
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("chooseRate" | "changeHover")[], "chooseRate" | "changeHover", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    rate: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    width: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    height: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    editable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    hoverRate: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    max: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+}>> & {
     onChooseRate?: (...args: any[]) => any;
     onChangeHover?: (...args: any[]) => any;
 }, {
     width: number;
     height: number;
+    editable: boolean;
     max: number;
     rate: number;
-    editable: boolean;
     hoverRate: number;
 }>;
 export default _default;

package/lib/resize-layout/index.d.ts

@@ -0,0 +1,336 @@
+declare const BkResizeLayout: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            placement: string;
+            border: boolean;
+            disabled: boolean;
+            max: number;
+            min: number;
+            collapsible: boolean;
+            triggerWidth: number;
+            triggerOffset: number;
+            initialDivide: string | number;
+            immediate: boolean;
+            autoMinimize: number | boolean;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            placement: import("vue-types").VueTypeDef<string> & {
+                default: string;
+            };
+            min: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            max: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            triggerWidth: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            triggerOffset: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            initialDivide: import("vue-types").VueTypeDef<string | number> & {
+                default: string | number;
+            };
+            immediate: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            };
+            disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            };
+            collapsible: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            };
+            autoMinimize: import("vue-types").VueTypeDef<number | boolean> & {
+                default: number | boolean;
+            };
+            border: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+        }>> & {
+            "onBefore-resize"?: (...args: any[]) => any;
+            onResizing?: (...args: any[]) => any;
+            "onAfter-resize"?: (...args: any[]) => any;
+            "onCollapse-change"?: (...args: any[]) => any;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "placement" | "border" | "disabled" | "max" | "min" | "collapsible" | "triggerWidth" | "triggerOffset" | "initialDivide" | "immediate" | "autoMinimize">;
+        $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: "before-resize" | "resizing" | "after-resize" | "collapse-change", ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            placement: import("vue-types").VueTypeDef<string> & {
+                default: string;
+            };
+            min: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            max: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            triggerWidth: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            triggerOffset: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            initialDivide: import("vue-types").VueTypeDef<string | number> & {
+                default: string | number;
+            };
+            immediate: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            };
+            disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            };
+            collapsible: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            };
+            autoMinimize: import("vue-types").VueTypeDef<number | boolean> & {
+                default: number | boolean;
+            };
+            border: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+        }>> & {
+            "onBefore-resize"?: (...args: any[]) => any;
+            onResizing?: (...args: any[]) => any;
+            "onAfter-resize"?: (...args: any[]) => any;
+            "onCollapse-change"?: (...args: any[]) => any;
+        }, {
+            collapsed: import("vue").Ref<boolean>;
+            asideContentVisible: import("vue").Ref<boolean>;
+            minimized: import("vue").Ref<boolean>;
+            limitMax: any;
+            state: any;
+            vertical: import("vue").ComputedRef<boolean>;
+            cssPropKey: import("vue").ComputedRef<"height" | "width">;
+            bkResizeLayoutRef: import("vue").Ref<HTMLElement>;
+            resizeProxyRef: import("vue").Ref<HTMLElement>;
+            resizeMaskRef: import("vue").Ref<HTMLElement>;
+            asideRef: import("vue").Ref<HTMLElement>;
+            triggerStyle: import("vue").ComputedRef<{
+                [x: string]: string;
+            }>;
+            asideStyle: import("vue").ComputedRef<{
+                [x: string]: string;
+            }>;
+            handleMousedown: (event: any) => void;
+            setCollapse: (collapse: any) => void;
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("before-resize" | "resizing" | "after-resize" | "collapse-change")[], string, {
+            placement: string;
+            border: boolean;
+            disabled: boolean;
+            max: number;
+            min: number;
+            collapsible: boolean;
+            triggerWidth: number;
+            triggerOffset: number;
+            initialDivide: string | number;
+            immediate: boolean;
+            autoMinimize: number | 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<{
+        placement: import("vue-types").VueTypeDef<string> & {
+            default: string;
+        };
+        min: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        max: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        triggerWidth: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        triggerOffset: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        initialDivide: import("vue-types").VueTypeDef<string | number> & {
+            default: string | number;
+        };
+        immediate: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        };
+        disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        };
+        collapsible: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        };
+        autoMinimize: import("vue-types").VueTypeDef<number | boolean> & {
+            default: number | boolean;
+        };
+        border: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+    }>> & {
+        "onBefore-resize"?: (...args: any[]) => any;
+        onResizing?: (...args: any[]) => any;
+        "onAfter-resize"?: (...args: any[]) => any;
+        "onCollapse-change"?: (...args: any[]) => any;
+    } & import("vue").ShallowUnwrapRef<{
+        collapsed: import("vue").Ref<boolean>;
+        asideContentVisible: import("vue").Ref<boolean>;
+        minimized: import("vue").Ref<boolean>;
+        limitMax: any;
+        state: any;
+        vertical: import("vue").ComputedRef<boolean>;
+        cssPropKey: import("vue").ComputedRef<"height" | "width">;
+        bkResizeLayoutRef: import("vue").Ref<HTMLElement>;
+        resizeProxyRef: import("vue").Ref<HTMLElement>;
+        resizeMaskRef: import("vue").Ref<HTMLElement>;
+        asideRef: import("vue").Ref<HTMLElement>;
+        triggerStyle: import("vue").ComputedRef<{
+            [x: string]: string;
+        }>;
+        asideStyle: import("vue").ComputedRef<{
+            [x: string]: string;
+        }>;
+        handleMousedown: (event: any) => void;
+        setCollapse: (collapse: any) => void;
+    }> & {} & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    placement: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    min: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    max: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    triggerWidth: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    triggerOffset: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    initialDivide: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    immediate: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    disabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    collapsible: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    };
+    autoMinimize: import("vue-types").VueTypeDef<number | boolean> & {
+        default: number | boolean;
+    };
+    border: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+}>> & {
+    "onBefore-resize"?: (...args: any[]) => any;
+    onResizing?: (...args: any[]) => any;
+    "onAfter-resize"?: (...args: any[]) => any;
+    "onCollapse-change"?: (...args: any[]) => any;
+}, {
+    collapsed: import("vue").Ref<boolean>;
+    asideContentVisible: import("vue").Ref<boolean>;
+    minimized: import("vue").Ref<boolean>;
+    limitMax: any;
+    state: any;
+    vertical: import("vue").ComputedRef<boolean>;
+    cssPropKey: import("vue").ComputedRef<"height" | "width">;
+    bkResizeLayoutRef: import("vue").Ref<HTMLElement>;
+    resizeProxyRef: import("vue").Ref<HTMLElement>;
+    resizeMaskRef: import("vue").Ref<HTMLElement>;
+    asideRef: import("vue").Ref<HTMLElement>;
+    triggerStyle: import("vue").ComputedRef<{
+        [x: string]: string;
+    }>;
+    asideStyle: import("vue").ComputedRef<{
+        [x: string]: string;
+    }>;
+    handleMousedown: (event: any) => void;
+    setCollapse: (collapse: any) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("before-resize" | "resizing" | "after-resize" | "collapse-change")[], "before-resize" | "resizing" | "after-resize" | "collapse-change", {
+    placement: string;
+    border: boolean;
+    disabled: boolean;
+    max: number;
+    min: number;
+    collapsible: boolean;
+    triggerWidth: number;
+    triggerOffset: number;
+    initialDivide: string | number;
+    immediate: boolean;
+    autoMinimize: number | boolean;
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin;
+export default BkResizeLayout;

package/lib/resize-layout/resize-layout.css

@@ -0,0 +1,189 @@
+.bk-resize-layout {
+  display: flex;
+}
+.bk-resize-layout-border {
+  border: 1px solid #dcdee5;
+}
+.bk-resize-layout-collapsed > .bk-resize-layout-aside .bk-resize-layout-aside-content {
+  overflow: hidden;
+}
+.bk-resize-layout-collapsed > .bk-resize-layout-aside .bk-resize-collapse:before {
+  display: inline-block;
+  transform: rotate(180deg);
+}
+.bk-resize-layout-left {
+  flex-direction: row;
+}
+.bk-resize-layout-left > .bk-resize-layout-aside {
+  border-right: 1px solid #dcdee5;
+}
+.bk-resize-layout-left > .bk-resize-layout-aside:after {
+  top: 50%;
+  right: 1px;
+  transform: translate3d(0, -50%, 0);
+}
+.bk-resize-layout-left > .bk-resize-layout-aside .bk-resize-trigger {
+  top: 0;
+  left: 100%;
+  width: 5px;
+  height: 100%;
+  cursor: col-resize;
+}
+.bk-resize-layout-left > .bk-resize-layout-aside .bk-resize-trigger:hover {
+  @mixin linear-gradient left;
+}
+.bk-resize-layout-left > .bk-resize-layout-aside .bk-resize-collapse {
+  top: 50%;
+  left: 100%;
+  transform: translateY(-50%);
+}
+.bk-resize-layout-right {
+  flex-direction: row-reverse;
+}
+.bk-resize-layout-right > .bk-resize-layout-aside {
+  border-left: 1px solid #dcdee5;
+}
+.bk-resize-layout-right > .bk-resize-layout-aside:after {
+  top: 50%;
+  left: 1px;
+  transform: translate3d(0, -50%, 0);
+}
+.bk-resize-layout-right > .bk-resize-layout-aside .bk-resize-trigger {
+  top: 0;
+  right: 100%;
+  width: 5px;
+  height: 100%;
+  cursor: col-resize;
+}
+.bk-resize-layout-right > .bk-resize-layout-aside .bk-resize-trigger:hover {
+  @mixin linear-gradient right;
+}
+.bk-resize-layout-right > .bk-resize-layout-aside .bk-resize-collapse {
+  top: 50%;
+  right: 100%;
+  transform: translateY(-50%) rotate(180deg);
+}
+.bk-resize-layout-top {
+  flex-direction: column;
+}
+.bk-resize-layout-top > .bk-resize-layout-aside {
+  border-bottom: 1px solid #dcdee5;
+}
+.bk-resize-layout-top > .bk-resize-layout-aside:after {
+  bottom: 1px;
+  left: 50%;
+  transform: translate3d(-50%, 0, 0) rotate(90deg);
+}
+.bk-resize-layout-top > .bk-resize-layout-aside .bk-resize-trigger {
+  top: 100%;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  cursor: row-resize;
+}
+.bk-resize-layout-top > .bk-resize-layout-aside .bk-resize-trigger:hover {
+  @mixin linear-gradient top;
+}
+.bk-resize-layout-top > .bk-resize-layout-aside .bk-resize-collapse {
+  top: 100%;
+  left: 50%;
+  margin-top: 8px;
+  transform: translate3d(-50%, -50%, 0) rotate(90deg);
+}
+.bk-resize-layout-bottom {
+  flex-direction: column-reverse;
+}
+.bk-resize-layout-bottom > .bk-resize-layout-aside {
+  border-top: 1px solid #dcdee5;
+}
+.bk-resize-layout-bottom > .bk-resize-layout-aside:after {
+  top: 1px;
+  left: 50%;
+  transform: translate3d(-50%, 0, 0) rotate(90deg);
+}
+.bk-resize-layout-bottom > .bk-resize-layout-aside .bk-resize-trigger {
+  bottom: 100%;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  cursor: row-resize;
+}
+.bk-resize-layout-bottom > .bk-resize-layout-aside .bk-resize-trigger:hover {
+  @mixin linear-gradient bottom;
+}
+.bk-resize-layout-bottom > .bk-resize-layout-aside .bk-resize-collapse {
+  bottom: 100%;
+  left: 50%;
+  margin-bottom: 8px;
+  transform: translate3d(50%, 50%, 0) rotate(-90deg);
+}
+.bk-resize-layout > .bk-resize-layout-aside {
+  position: relative;
+}
+.bk-resize-layout > .bk-resize-layout-aside:after {
+  position: absolute;
+  width: 2px;
+  height: 2px;
+  color: #c4c6cc;
+  background: currentColor;
+  content: '';
+  box-shadow: 0 4px 0 0 currentColor, 0 8px 0 0 currentColor, 0 -4px 0 0 currentColor, 0 -8px 0 0 currentColor;
+}
+.bk-resize-layout > .bk-resize-layout-aside .bk-resize-layout-aside-content {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.bk-resize-layout > .bk-resize-layout-aside .bk-resize-trigger {
+  position: absolute;
+  z-index: 3;
+  background-color: transparent;
+}
+.bk-resize-layout > .bk-resize-layout-aside .bk-resize-proxy {
+  position: absolute;
+  z-index: 9999;
+  pointer-events: none;
+  visibility: hidden;
+}
+.bk-resize-layout > .bk-resize-layout-aside .bk-resize-proxy.left,
+.bk-resize-layout > .bk-resize-layout-aside .bk-resize-proxy.right {
+  top: 0;
+  height: 100%;
+  border-left: 1px dashed #3a84ff;
+}
+.bk-resize-layout > .bk-resize-layout-aside .bk-resize-proxy.top,
+.bk-resize-layout > .bk-resize-layout-aside .bk-resize-proxy.bottom {
+  left: 0;
+  width: 100%;
+  border-top: 1px dashed #3a84ff;
+}
+.bk-resize-layout > .bk-resize-layout-aside .bk-resize-collapse {
+  position: absolute;
+  z-index: 2;
+  width: 16px;
+  height: 50px;
+  font-size: 20px;
+  line-height: 50px;
+  color: #fff;
+  text-align: center;
+  text-indent: -2px;
+  cursor: pointer;
+  background: #dcdee5;
+  border-radius: 0px 12px 12px 0px;
+}
+.bk-resize-layout > .bk-resize-layout-aside .bk-resize-collapse:hover {
+  background: #3a84ff;
+}
+.bk-resize-layout > .bk-resize-layout-main {
+  flex: 1;
+  overflow: hidden;
+}
+.bk-resize-layout .bk-resize-mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9999;
+  display: none;
+}