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

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;
+    border: boolean;
+    disabled: boolean;
+    max: number;
+    min: number;
+    collapsible: boolean;
+    triggerWidth: number;
+    triggerOffset: number;
+    initialDivide: string | number;
+    immediate: boolean;
+    autoMinimize: number | boolean;
+}>;
+export default _default;

package/lib/resize-layout/resize-layout.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"),require("../icon"));else if("function"==typeof define&&define.amd)define(["../shared","@babel/runtime/helpers/defineProperty","vue","../icon"],t);else{var a="object"==typeof exports?t(require("../shared"),require("@babel/runtime/helpers/defineProperty"),require("vue"),require("../icon")):t(e["../shared"],e["@babel/runtime/helpers/defineProperty"],e.vue,e["../icon"]);for(var i in a)("object"==typeof exports?exports:e)[i]=a[i]}}(self,((e,t,a,i)=>(()=>{"use strict";var l={6870:e=>{e.exports=i},4212:t=>{t.exports=e},311:e=>{e.exports=t},748:e=>{e.exports=a}},o={};function r(e){var t=o[e];if(void 0!==t)return t.exports;var a=o[e]={exports:{}};return l[e](a,a.exports,r),a.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var a in t)r.o(t,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{r.r(n),r.d(n,{default:()=>u});var e=r(4212),t=r(311),a=r.n(t),i=r(748),l=r(6870);const o=(0,i.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,t){var l=t.emit,o=(0,i.toRefs)(e),r=o.placement,n=o.initialDivide,u=o.triggerOffset,s=o.triggerWidth,c=o.max,v=o.min,d=o.immediate,f=o.autoMinimize,p=(0,i.ref)(!1),m=(0,i.ref)(!0),b=(0,i.ref)(!1),y=(0,i.ref)(null),h=(0,i.ref)({}),g=(0,i.ref)(null),z=(0,i.ref)(null),x=(0,i.ref)(null),k=(0,i.ref)(null),w=(0,i.computed)((function(){return["left","right"].includes(r.value)})),P=(0,i.computed)((function(){return w.value?"width":"height"})),M=(0,i.computed)((function(){var e=n.value;return"number"==typeof e&&(e="".concat(e,"px")),a()({},P.value,e)})),R=(0,i.computed)((function(){var e;return e={},a()(e,"margin-".concat(r.value),"".concat(u.value-s.value,"px")),a()(e,P.value,"".concat(s.value,"px")),e})),T=(0,i.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();C(!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)))},C=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,i.onMounted)((function(){S.observe(g.value)})),(0,i.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:R,asideStyle:M,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",r.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 a=function(e){var t;switch(r.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[r.value]=o,l("resizing",i)};document.addEventListener("mousemove",a),document.addEventListener("mouseup",(function e(){if(z.value.style.visibility="hidden",x.value.style.display="none",document.removeEventListener("mousemove",a),document.removeEventListener("mouseup",e),document.onselectstart=null,document.ondragstart=null,(0,i.nextTick)((function(){(function(){if(!f.value)return!1;var e=k.value.getBoundingClientRect();if(b.value=p.value=e[P.value]<=T.value,!b.value)return m.value=!0,!1;O(),(0,i.nextTick)((function(){k.value.setAttribute("data-".concat(P.value),M.value[P.value])}))})(),l("after-resize",parseFloat(z.value.style[r.value]))})),d.value)return!1;k.value.style[P.value]=z.value.style[r.value]}))},setCollapse:function(e){p.value="boolean"==typeof e?e:!p.value,O(),l("collapse-change",p.value)}}},render:function(){var e,t,a,o,r,n,u=["bk-resize-layout","bk-resize-layout-".concat(this.placement),{"bk-resize-layout-collapsed":this.collapsed,"bk-resize-layout-border":this.border}];return(0,i.createVNode)("div",{ref:"bkResizeLayoutRef",class:u},[(0,i.createVNode)("aside",{class:"bk-resize-layout-aside",ref:"asideRef",style:this.asideStyle},[(0,i.withDirectives)((0,i.createVNode)("div",{class:"bk-resize-layout-aside-content"},[null===(t=(e=this.$slots).aside)||void 0===t?void 0:t.call(e)]),[[i.vShow,this.asideContentVisible]]),(0,i.withDirectives)((0,i.createVNode)("i",{class:"bk-resize-trigger",style:this.triggerStyle,onMousedown:(0,i.withModifiers)(this.handleMousedown,["left"])},null),[[i.vShow,!this.disabled&&(!this.collapsed||this.autoMinimize)]]),(0,i.withDirectives)((0,i.createVNode)("i",{class:["bk-resize-proxy",this.placement],ref:"resizeProxyRef"},null),[[i.vShow,!this.collapsed||this.autoMinimize]]),this.collapsible&&((null===(o=(a=this.$slots)["collapse-trigger"])||void 0===o?void 0:o.call(a))||(0,i.createVNode)(l.AngleLeft,{class:"bk-resize-collapse",onClick:this.setCollapse},null))]),(0,i.createVNode)("main",{class:"bk-resize-layout-main"},[null===(n=(r=this.$slots).main)||void 0===n?void 0:n.call(r)]),(0,i.createVNode)("div",{class:"bk-resize-mask",ref:"resizeMaskRef"},null)])}}),u=(0,e.withInstall)(o)})(),n})()));

package/lib/resize-layout/resize-layout.less

@@ -0,0 +1,233 @@
+@import '../styles/themes/themes.less';
+
+.@{bk-prefix}-resize-layout {
+  display: flex;
+
+  &-border {
+    border: 1px solid #dcdee5;
+  }
+
+  &-collapsed {
+    & > .bk-resize-layout-aside {
+      .bk-resize-layout-aside-content {
+        overflow: hidden;
+      }
+
+      .bk-resize-collapse:before {
+        display: inline-block;
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  &-left {
+    flex-direction: row;
+
+    & > .bk-resize-layout-aside {
+      border-right: 1px solid #dcdee5;
+
+      &:after {
+        top: 50%;
+        right: 1px;
+        transform: translate3d(0, -50%, 0);
+      }
+
+      .bk-resize-trigger {
+        top: 0;
+        left: 100%;
+        width: 5px;
+        height: 100%;
+        cursor: col-resize;
+
+        &:hover {
+          @mixin linear-gradient left;
+        }
+      }
+
+      .bk-resize-collapse {
+        top: 50%;
+        left: 100%;
+        transform: translateY(-50%);
+      }
+    }
+  }
+
+  &-right {
+    flex-direction: row-reverse;
+
+    & > .bk-resize-layout-aside {
+      border-left: 1px solid #dcdee5;
+
+      &:after {
+        top: 50%;
+        left: 1px;
+        transform: translate3d(0, -50%, 0);
+      }
+
+      .bk-resize-trigger {
+        top: 0;
+        right: 100%;
+        width: 5px;
+        height: 100%;
+        cursor: col-resize;
+
+        &:hover {
+          @mixin linear-gradient right;
+        }
+      }
+
+      .bk-resize-collapse {
+        top: 50%;
+        right: 100%;
+        transform: translateY(-50%) rotate(180deg);
+      }
+    }
+  }
+
+  &-top {
+    flex-direction: column;
+
+    & > .bk-resize-layout-aside {
+      border-bottom: 1px solid #dcdee5;
+
+      &:after {
+        bottom: 1px;
+        left: 50%;
+        transform: translate3d(-50%, 0, 0) rotate(90deg);
+      }
+
+      .bk-resize-trigger {
+        top: 100%;
+        left: 0;
+        width: 100%;
+        height: 5px;
+        cursor: row-resize;
+
+        &:hover {
+          @mixin linear-gradient top;
+        }
+      }
+
+      .bk-resize-collapse {
+        top: 100%;
+        left: 50%;
+        margin-top: 8px;
+        transform: translate3d(-50%, -50%, 0) rotate(90deg);
+      }
+    }
+  }
+
+  &-bottom {
+    flex-direction: column-reverse;
+
+    & > .bk-resize-layout-aside {
+      border-top: 1px solid #dcdee5;
+
+      &:after {
+        top: 1px;
+        left: 50%;
+        transform: translate3d(-50%, 0, 0) rotate(90deg);
+      }
+
+      .bk-resize-trigger {
+        bottom: 100%;
+        left: 0;
+        width: 100%;
+        height: 5px;
+        cursor: row-resize;
+
+        &:hover {
+          @mixin linear-gradient bottom;
+        }
+      }
+
+      .bk-resize-collapse {
+        bottom: 100%;
+        left: 50%;
+        margin-bottom: 8px;
+        transform: translate3d(50%, 50%, 0) rotate(-90deg);
+      }
+    }
+  }
+
+  & > .bk-resize-layout-aside {
+    position: relative;
+
+    &: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-aside-content {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .bk-resize-trigger {
+      position: absolute;
+      z-index: 3;
+      background-color: transparent;
+    }
+
+    .bk-resize-proxy {
+      position: absolute;
+      z-index: 9999;
+      pointer-events: none;
+      visibility: hidden;
+
+      &.left,
+      &.right {
+        top: 0;
+        height: 100%;
+        border-left: 1px dashed #3a84ff;
+      }
+
+      &.top,
+      &.bottom {
+        left: 0;
+        width: 100%;
+        border-top: 1px dashed #3a84ff;
+      }
+    }
+
+    .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;
+
+      &:hover {
+        background: #3a84ff;
+      }
+    }
+  }
+
+  & > .bk-resize-layout-main {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .bk-resize-mask {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 9999;
+    display: none;
+  }
+}

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

@@ -0,0 +1,282 @@
+: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;
+  --disable-color: #dcdee5;
+  --font-size-base: 12px;
+  --font-size-medium: 14px;
+  --font-size-large: 16px;
+  --line-height-base: 16px;
+  --line-height-medium: 16px;
+  --line-height-large: 18px;
+  --component-size-small: 26px;
+  --component-size-base: 32px;
+  --component-size-large: 38px;
+  --border-width-base: 1px;
+  --border-style-base: solid;
+  --border-radius-base: 2px;
+  --input-disabled-bg: #fafbfd;
+  --input-disabled-border: var(--disable-color);
+  --input-height-base: var(--component-size-base);
+  --input-color: var(--default-color);
+  --input-bg: white;
+  --input-border-color: var(--light-gray);
+  --input-broder-radius: 3px;
+  --input-shadow-color: #a3c5fd;
+  --input-horizontal-padding: 10px;
+  --input-block-color: #f4f6fa;
+  --input-icon-size: var(--font-size-large);
+  --input-maxlength-color: #979ba5;
+  --button-primary-hover-color: #5594fa;
+  --button-danger-hover-color: #ff5656;
+  --button-success-hover-color: #45e35f;
+  --button-warning-hover-color: #ffb848;
+  --button-default-hover-border-color: #979ba5;
+  --button-primary-active-color: #2c77f4;
+  --button-danger-active-color: #db2626;
+  --button-success-active-color: #1ab943;
+  --button-warning-active-color: #eb9000;
+  --fixed-navbar-background: #fff;
+  --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
+  --switch-default-color: #fff;
+  --switch-grey-color: #c4c6cc;
+  --breadcrumb-black-color: #979ba5;
+  --breadcrumb-primary-hover-color: #0082ff;
+  --breadcrumb-fn-main-color: #63656e;
+  --link-default-hover-color: #979ba5;
+  --link-primary-hover-color: #699df4;
+  --link-success-hover-color: #45e35f;
+  --link-warning-hover-color: #ffb848;
+  --link-danger-hover-color: #ff5656;
+  --link-default-disabled-color: #dcdee5;
+  --link-primary-disabled-color: #a3c5fd;
+  --link-success-disabled-color: #94f5a4;
+  --link-warning-disabled-color: #ffd695;
+  --link-danger-disabled-color: #fd9c9c;
+  --message-color: var(--default-color);
+  --message-primary-bg-color: #f0f8ff;
+  --message-primary-border-color: #e1ecff;
+  --message-warning-bg-color: #fff4e2;
+  --message-warning-border-color: #ffe8c3;
+  --message-success-bg-color: #f2fff4;
+  --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;
+}
+.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/select/common.d.ts

@@ -1,27 +1,33 @@
-import { InjectionKey } from 'vue';
-import Option from './option';
-export declare type OptionInstanceType = InstanceType<typeof Option>;
-export interface ISelectContext {
-    props: {
-        modelValue: any;
-        multiple?: boolean;
-    };
-    register(option: OptionInstanceType): any;
-    unregister(option: OptionInstanceType): boolean;
-    handleOptionSelected(option: OptionInstanceType): void;
-}
+import { InjectionKey, Ref } from 'vue';
+import { OnFirstUpdateFnType } from '@bkui-vue/shared';
+import { IOptionGroupContext, IPopoverConfig, ISelectContext } from './type';
 export declare const selectKey: InjectionKey<ISelectContext>;
-export interface IOptionGroupContext {
-    xxx: string;
-}
 export declare const optionGroupKey: InjectionKey<IOptionGroupContext>;
 export declare function useFocus(): {
-    isFocus: import("vue").Ref<boolean>;
+    isFocus: Ref<boolean>;
     handleFocus: () => void;
     handleBlur: () => void;
 };
 export declare function useHover(): {
-    isHover: import("vue").Ref<boolean>;
+    isHover: Ref<boolean>;
     setHover: () => void;
     cancelHover: () => void;
 };
+export declare function useRegistry<T>(data: Ref<Set<T>>): {
+    register: (item: T) => Set<T>;
+    unregister: (item: T) => boolean;
+};
+export declare function useDebouncedRef<T>(value: any, delay?: number): Ref<T>;
+export declare function usePopover(config: IPopoverConfig): {
+    isPopoverShow: Ref<boolean>;
+    popperWidth: Ref<string | number>;
+    togglePopover: () => void;
+    onPopoverFirstUpdate: OnFirstUpdateFnType;
+    hidePopover: () => void;
+    showPopover: () => void;
+};
+export declare function useRemoteSearch(method: Function): {
+    searchKey: Ref<string>;
+    searchLoading: Ref<boolean>;
+};
+export declare function toLowerCase(value?: string): string;