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

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;
+            disabled: boolean;
+            min: number;
+            max: number;
+            border: boolean;
+            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" | "disabled" | "min" | "max" | "border" | "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;
+            disabled: boolean;
+            min: number;
+            max: number;
+            border: boolean;
+            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;
+    disabled: boolean;
+    min: number;
+    max: number;
+    border: boolean;
+    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/index.js

@@ -0,0 +1 @@
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../shared"),require("vue"),require("../icon"));else if("function"==typeof define&&define.amd)define(["../shared","vue","../icon"],t);else{var a="object"==typeof exports?t(require("../shared"),require("vue"),require("../icon")):t(e["../shared"],e.vue,e["../icon"]);for(var i in a)("object"==typeof exports?exports:e)[i]=a[i]}}(self,((e,t,a)=>(()=>{"use strict";var i={6870:e=>{e.exports=a},4212:t=>{t.exports=e},748:e=>{e.exports=t}},l={};function o(e){var t=l[e];if(void 0!==t)return t.exports;var a=l[e]={exports:{}};return i[e](a,a.exports,o),a.exports}o.d=(e,t)=>{for(var a in t)o.o(t,a)&&!o.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{o.r(n),o.d(n,{default:()=>r});var e=o(4212);function t(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}var a=o(748),i=o(6870);const l=(0,a.defineComponent)({name:"ResizeLayout",props:{placement:e.PropTypes.placement().def("left"),min:e.PropTypes.number.def(3),max:e.PropTypes.number.def(1/0),triggerWidth:e.PropTypes.number.def(5),triggerOffset:e.PropTypes.number.def(3),initialDivide:e.PropTypes.oneOfType([String,Number]).def("20%"),immediate:e.PropTypes.bool,disabled:e.PropTypes.bool,collapsible:e.PropTypes.bool,autoMinimize:e.PropTypes.oneOfType([Boolean,Number]).def(!1),border:e.PropTypes.bool.def(!0)},emits:["before-resize","resizing","after-resize","collapse-change"],setup:function(e,i){var l=i.emit,o=(0,a.toRefs)(e),n=o.placement,r=o.initialDivide,u=o.triggerOffset,s=o.triggerWidth,c=o.max,v=o.min,d=o.immediate,f=o.autoMinimize,p=(0,a.ref)(!1),m=(0,a.ref)(!0),b=(0,a.ref)(!1),y=(0,a.ref)(null),h=(0,a.ref)({}),g=(0,a.ref)(null),z=(0,a.ref)(null),x=(0,a.ref)(null),k=(0,a.ref)(null),w=(0,a.computed)((function(){return["left","right"].includes(n.value)})),P=(0,a.computed)((function(){return w.value?"width":"height"})),R=(0,a.computed)((function(){var e=r.value;return"number"==typeof e&&(e="".concat(e,"px")),t({},P.value,e)})),T=(0,a.computed)((function(){var e;return t(e={},"margin-".concat(n.value),"".concat(u.value-s.value,"px")),t(e,P.value,"".concat(s.value,"px")),e})),M=(0,a.computed)((function(){return f.value?"boolean"==typeof f.value?50:f.value:0})),S=new ResizeObserver((function(){var e=g.value.getBoundingClientRect();y.value=w.value?e.width:e.height})),O=function(){var e=k.value.getBoundingClientRect();j(!p.value),p.value?(k.value.setAttribute("data-".concat(P.value),"".concat(e[P.value],"px")),k.value.style[P.value]="5px"):(m.value=!0,k.value.style[P.value]=k.value.getAttribute("data-".concat(P.value)))},j=function(e){k.value.addEventListener("transitionend",(function t(){m.value=e,k.value.style.transition="",k.value.removeEventListener("transitionend",t)})),k.value.style.transition="".concat(P.value," cubic-bezier(0.4, 0, 0.2, 1) .3s")};return(0,a.onMounted)((function(){S.observe(g.value)})),(0,a.onBeforeUnmount)((function(){S.unobserve(g.value)})),{collapsed:p,asideContentVisible:m,minimized:b,limitMax:y,state:h,vertical:w,cssPropKey:P,bkResizeLayoutRef:g,resizeProxyRef:z,resizeMaskRef:x,asideRef:k,triggerStyle:T,asideStyle:R,handleMousedown:function(e){l("before-resize",e);var t=k.value.getBoundingClientRect();h.value=Object.freeze({mouse:{clientX:e.clientX,clientY:e.clientY},aside:{width:t.width,height:t.height}}),x.value.style.display="block",x.value.style.cursor=w.value?"col-resize":"row-resize",d.value||function(){switch(z.value.style.visibility="visible",n.value){case"left":z.value.style.inset="0 auto auto ".concat(h.value.aside.width,"px");break;case"right":z.value.style.inset="0  ".concat(h.value.aside.width,"px auto auto");break;case"top":z.value.style.inset="".concat(h.value.aside.height,"px auto auto 0");break;case"bottom":z.value.style.inset="auto auto ".concat(h.value.aside.height,"px 0")}}(),document.onselectstart=function(){return!1},document.ondragstart=function(){return!1};var i=function(e){var t;switch(n.value){case"top":t=e.clientY-h.value.mouse.clientY;break;case"right":t=h.value.mouse.clientX-e.clientX;break;case"bottom":t=h.value.mouse.clientY-e.clientY;break;case"left":t=e.clientX-h.value.mouse.clientX}var a,i=(a=h.value.aside[P.value]+t,Math.min(c.value,Math.max(v.value,a),y.value-s.value)+u.value),o="".concat(i,"px");d.value?k.value.style[P.value]=o:z.value.style[n.value]=o,l("resizing",i)};document.addEventListener("mousemove",i),document.addEventListener("mouseup",(function e(){if(z.value.style.visibility="hidden",x.value.style.display="none",document.removeEventListener("mousemove",i),document.removeEventListener("mouseup",e),document.onselectstart=null,document.ondragstart=null,(0,a.nextTick)((function(){(function(){if(!f.value)return!1;var e=k.value.getBoundingClientRect();if(b.value=p.value=e[P.value]<=M.value,!b.value)return m.value=!0,!1;O(),(0,a.nextTick)((function(){k.value.setAttribute("data-".concat(P.value),R.value[P.value])}))})(),l("after-resize",parseFloat(z.value.style[n.value]))})),d.value)return!1;k.value.style[P.value]=z.value.style[n.value]}))},setCollapse:function(e){p.value="boolean"==typeof e?e:!p.value,O(),l("collapse-change",p.value)}}},render:function(){var e,t,l,o,n,r,u=["bk-resize-layout","bk-resize-layout-".concat(this.placement),{"bk-resize-layout-collapsed":this.collapsed,"bk-resize-layout-border":this.border}];return(0,a.createVNode)("div",{ref:"bkResizeLayoutRef",class:u},[(0,a.createVNode)("aside",{class:"bk-resize-layout-aside",ref:"asideRef",style:this.asideStyle},[(0,a.withDirectives)((0,a.createVNode)("div",{class:"bk-resize-layout-aside-content"},[null===(t=(e=this.$slots).aside)||void 0===t?void 0:t.call(e)]),[[a.vShow,this.asideContentVisible]]),(0,a.withDirectives)((0,a.createVNode)("i",{class:"bk-resize-trigger",style:this.triggerStyle,onMousedown:(0,a.withModifiers)(this.handleMousedown,["left"])},null),[[a.vShow,!this.disabled&&(!this.collapsed||this.autoMinimize)]]),(0,a.withDirectives)((0,a.createVNode)("i",{class:["bk-resize-proxy",this.placement],ref:"resizeProxyRef"},null),[[a.vShow,!this.collapsed||this.autoMinimize]]),this.collapsible&&((null===(o=(l=this.$slots)["collapse-trigger"])||void 0===o?void 0:o.call(l))||(0,a.createVNode)(i.AngleLeft,{class:"bk-resize-collapse",onClick:this.setCollapse},null))]),(0,a.createVNode)("main",{class:"bk-resize-layout-main"},[null===(r=(n=this.$slots).main)||void 0===r?void 0:r.call(n)]),(0,a.createVNode)("div",{class:"bk-resize-mask",ref:"resizeMaskRef"},null)])}}),r=(0,e.withInstall)(l)})(),n})()));

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;
+}

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

@@ -0,0 +1,127 @@
+declare const _default: import("vue").DefineComponent<{
+    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;
+    };
+}, {
+    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", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, 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;
+}, {
+    placement: string;
+    disabled: boolean;
+    min: number;
+    max: number;
+    border: boolean;
+    collapsible: boolean;
+    triggerWidth: number;
+    triggerOffset: number;
+    initialDivide: string | number;
+    immediate: boolean;
+    autoMinimize: number | boolean;
+}>;
+export default _default;