bkui-vue 0.0.2-beta.13 → 0.0.2-beta.131

package/lib/resize-layout/index.js

@@ -1 +1,429 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../shared"),require("vue"),require("../config-provider"),require("../icon"));else if("function"==typeof define&&define.amd)define(["../shared","vue","../config-provider","../icon"],t);else{var a="object"==typeof exports?t(require("../shared"),require("vue"),require("../config-provider"),require("../icon")):t(e["../shared"],e.vue,e["../config-provider"],e["../icon"]);for(var i in a)("object"==typeof exports?exports:e)[i]=a[i]}}(self,((e,t,a,i)=>(()=>{"use strict";var l={2717:e=>{e.exports=a},6870:e=>{e.exports=i},4212:t=>{t.exports=e},748:e=>{e.exports=t}},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.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 s={};return(()=>{r.r(s),r.d(s,{default:()=>u});var e=r(4212);function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},t(e)}function a(e,a,i){return(a=function(e){var a=function(e,a){if("object"!==t(e)||null===e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var l=i.call(e,"string");if("object"!==t(l))return l;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===t(a)?a:String(a)}(a))in e?Object.defineProperty(e,a,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[a]=i,e}var i=r(748),l=r(2717),o=r(6870);const n=(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 o=t.emit,r=(0,i.toRefs)(e),s=r.placement,n=r.initialDivide,u=r.triggerOffset,c=r.triggerWidth,v=r.max,d=r.min,f=r.immediate,p=r.autoMinimize,m=(0,i.ref)(!1),y=(0,i.ref)(!0),h=(0,i.ref)(!1),b=(0,i.ref)(null),g=(0,i.ref)({}),z=(0,i.ref)(null),x=(0,i.ref)(null),C=(0,i.ref)(null),N=(0,i.ref)(null),w=(0,i.computed)((function(){return["left","right"].includes(s.value)})),P=(0,i.computed)((function(){return w.value?"width":"height"})),S=(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 a(e={},"margin-".concat(s.value),"".concat(u.value-c.value,"px")),a(e,P.value,"".concat(c.value,"px")),e})),T=(0,i.computed)((function(){return p.value?"boolean"==typeof p.value?50:p.value:0})),k=new ResizeObserver((function(){var e=z.value.getBoundingClientRect();b.value=w.value?e.width:e.height})),M=function(){var t=N.value.getBoundingClientRect();j(!m.value),m.value?(N.value.setAttribute("data-".concat(P.value),"".concat(t[P.value],"px")),N.value.style[P.value]=e.collapsible?"0px":"5px"):(y.value=!0,N.value.style[P.value]=N.value.getAttribute("data-".concat(P.value)))},j=function(e){N.value.addEventListener("transitionend",(function t(){y.value=e,N.value.style.transition="",N.value.removeEventListener("transitionend",t)})),N.value.style.transition="".concat(P.value," cubic-bezier(0.4, 0, 0.2, 1) .3s")};(0,i.onMounted)((function(){k.observe(z.value)})),(0,i.onBeforeUnmount)((function(){z.value&&(k.unobserve(z.value),k=null)}));var O=(0,l.usePrefix)().resolveClassName;return{collapsed:m,asideContentVisible:y,minimized:h,limitMax:b,state:g,vertical:w,cssPropKey:P,bkResizeLayoutRef:z,resizeProxyRef:x,resizeMaskRef:C,asideRef:N,triggerStyle:R,asideStyle:S,handleMousedown:function(e){o("before-resize",e);var t=N.value.getBoundingClientRect();g.value=Object.freeze({mouse:{clientX:e.clientX,clientY:e.clientY},aside:{width:t.width,height:t.height}}),C.value.style.display="block",C.value.style.cursor=w.value?"col-resize":"row-resize",f.value||function(){switch(x.value.style.visibility="visible",s.value){case"left":x.value.style.inset="0 auto auto ".concat(g.value.aside.width,"px");break;case"right":x.value.style.inset="0  ".concat(g.value.aside.width,"px auto auto");break;case"top":x.value.style.inset="".concat(g.value.aside.height,"px auto auto 0");break;case"bottom":x.value.style.inset="auto auto ".concat(g.value.aside.height,"px 0")}}(),document.onselectstart=function(){return!1},document.ondragstart=function(){return!1};var a=function(e){var t;switch(s.value){case"top":t=e.clientY-g.value.mouse.clientY;break;case"right":t=g.value.mouse.clientX-e.clientX;break;case"bottom":t=g.value.mouse.clientY-e.clientY;break;case"left":t=e.clientX-g.value.mouse.clientX}var a,i=(a=g.value.aside[P.value]+t,Math.min(v.value,Math.max(d.value,a),b.value-c.value)+u.value),l="".concat(i,"px");f.value?N.value.style[P.value]=l:x.value.style[s.value]=l,o("resizing",i)};document.addEventListener("mousemove",a),document.addEventListener("mouseup",(function e(){if(x.value.style.visibility="hidden",C.value.style.display="none",document.removeEventListener("mousemove",a),document.removeEventListener("mouseup",e),document.onselectstart=null,document.ondragstart=null,(0,i.nextTick)((function(){(function(){if(!p.value)return!1;var e=N.value.getBoundingClientRect();if(h.value=m.value=e[P.value]<=T.value,!h.value)return y.value=!0,!1;M(),(0,i.nextTick)((function(){N.value.setAttribute("data-".concat(P.value),S.value[P.value])}))})(),o("after-resize",parseFloat(x.value.style[s.value]))})),f.value)return!1;N.value.style[P.value]=x.value.style[s.value]}))},setCollapse:function(e){m.value="boolean"==typeof e?e:!m.value,M(),o("collapse-change",m.value)},resolveClassName:O}},render:function(){var e,t,l,r,s,n,u,c=["".concat(this.resolveClassName("resize-layout")),"".concat(this.resolveClassName("resize-layout-".concat(this.placement))),(e={},a(e,"".concat(this.resolveClassName("resize-layout-collapsed")),this.collapsed),a(e,"".concat(this.resolveClassName("resize-layout-border")),this.border),a(e,"".concat(this.resolveClassName("resize-layout-collapsible")),this.collapsible),e)];return(0,i.createVNode)("div",{ref:"bkResizeLayoutRef",class:c},[(0,i.createVNode)("aside",{class:"".concat(this.resolveClassName("resize-layout-aside")),ref:"asideRef",style:this.asideStyle},[(0,i.withDirectives)((0,i.createVNode)("div",{class:"".concat(this.resolveClassName("resize-layout-aside-content"))},[null===(l=(t=this.$slots).aside)||void 0===l?void 0:l.call(t)]),[[i.vShow,this.asideContentVisible]]),(0,i.withDirectives)((0,i.createVNode)("i",{class:"".concat(this.resolveClassName("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:["".concat(this.resolveClassName("resize-proxy")),this.placement],ref:"resizeProxyRef"},null),[[i.vShow,!this.collapsed||this.autoMinimize]]),this.collapsible&&((null===(s=(r=this.$slots)["collapse-trigger"])||void 0===s?void 0:s.call(r))||(this.collapsed?(0,i.createVNode)(o.AngleRight,{class:"".concat(this.resolveClassName("resize-collapse")),onClick:this.setCollapse},null):(0,i.createVNode)(o.AngleLeft,{class:"".concat(this.resolveClassName("resize-collapse")),onClick:this.setCollapse},null)))]),(0,i.createVNode)("main",{class:"".concat(this.resolveClassName("resize-layout-main"))},[null===(u=(n=this.$slots).main)||void 0===u?void 0:u.call(n)]),(0,i.createVNode)("div",{class:"".concat(this.resolveClassName("resize-mask")),ref:"resizeMaskRef"},null)])}}),u=(0,e.withInstall)(n)})(),s})()));
+import * as __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__ from "../shared";
+import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "vue";
+import * as __WEBPACK_EXTERNAL_MODULE__config_provider_9d0186d9__ from "../config-provider";
+import * as __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__ from "../icon";
+/******/ // The require scope
+/******/ var __webpack_require__ = {};
+/******/ 
+/************************************************************************/
+/******/ /* webpack/runtime/define property getters */
+/******/ (() => {
+/******/ 	// define getter functions for harmony exports
+/******/ 	__webpack_require__.d = (exports, definition) => {
+/******/ 		for(var key in definition) {
+/******/ 			if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 				Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 			}
+/******/ 		}
+/******/ 	};
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ 	__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/ 
+/************************************************************************/
+var __webpack_exports__ = {};
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  Z: () => (/* binding */ src)
+});
+
+;// CONCATENATED MODULE: external "../shared"
+var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var y = x => () => x
+const external_shared_namespaceObject = x({ ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.PropTypes, ["withInstall"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.withInstall });
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/typeof.js
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/toPrimitive.js
+
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/toPropertyKey.js
+
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/defineProperty.js
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+;// CONCATENATED MODULE: external "vue"
+var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_vue_y = x => () => x
+const external_vue_namespaceObject = external_vue_x({ ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["nextTick"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.nextTick, ["onBeforeUnmount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["toRefs"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.toRefs, ["vShow"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.vShow, ["withDirectives"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.withDirectives, ["withModifiers"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.withModifiers });
+;// CONCATENATED MODULE: external "../config-provider"
+var external_config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_config_provider_y = x => () => x
+const external_config_provider_namespaceObject = external_config_provider_x({ ["usePrefix"]: () => __WEBPACK_EXTERNAL_MODULE__config_provider_9d0186d9__.usePrefix });
+;// CONCATENATED MODULE: external "../icon"
+var external_icon_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_icon_y = x => () => x
+const external_icon_namespaceObject = external_icon_x({ ["AngleLeft"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.AngleLeft, ["AngleRight"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.AngleRight });
+;// CONCATENATED MODULE: ../../packages/resize-layout/src/resize-layout.tsx
+
+
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+
+
+
+/* harmony default export */ const resize_layout = ((0,external_vue_namespaceObject.defineComponent)({
+  name: 'ResizeLayout',
+  props: {
+    placement: external_shared_namespaceObject.PropTypes.placement().def('left'),
+    min: external_shared_namespaceObject.PropTypes.number.def(3),
+    max: external_shared_namespaceObject.PropTypes.number.def(Infinity),
+    triggerWidth: external_shared_namespaceObject.PropTypes.number.def(5),
+    triggerOffset: external_shared_namespaceObject.PropTypes.number.def(3),
+    initialDivide: external_shared_namespaceObject.PropTypes.oneOfType([String, Number]).def('20%'),
+    immediate: external_shared_namespaceObject.PropTypes.bool,
+    disabled: external_shared_namespaceObject.PropTypes.bool,
+    collapsible: external_shared_namespaceObject.PropTypes.bool,
+    autoMinimize: external_shared_namespaceObject.PropTypes.oneOfType([Boolean, Number]).def(false),
+    border: external_shared_namespaceObject.PropTypes.bool.def(true)
+  },
+  emits: ['before-resize', 'resizing', 'after-resize', 'collapse-change'],
+  setup: function setup(props, _ref) {
+    var emit = _ref.emit;
+    var _toRefs = (0,external_vue_namespaceObject.toRefs)(props),
+      placement = _toRefs.placement,
+      initialDivide = _toRefs.initialDivide,
+      triggerOffset = _toRefs.triggerOffset,
+      triggerWidth = _toRefs.triggerWidth,
+      max = _toRefs.max,
+      min = _toRefs.min,
+      immediate = _toRefs.immediate,
+      autoMinimize = _toRefs.autoMinimize;
+    var collapsed = (0,external_vue_namespaceObject.ref)(false);
+    var asideContentVisible = (0,external_vue_namespaceObject.ref)(true);
+    var minimized = (0,external_vue_namespaceObject.ref)(false);
+    var limitMax = (0,external_vue_namespaceObject.ref)(null);
+    var state = (0,external_vue_namespaceObject.ref)({});
+    var bkResizeLayoutRef = (0,external_vue_namespaceObject.ref)(null);
+    var resizeProxyRef = (0,external_vue_namespaceObject.ref)(null);
+    var resizeMaskRef = (0,external_vue_namespaceObject.ref)(null);
+    var asideRef = (0,external_vue_namespaceObject.ref)(null);
+    var vertical = (0,external_vue_namespaceObject.computed)(function () {
+      return ['left', 'right'].includes(placement.value);
+    });
+    var cssPropKey = (0,external_vue_namespaceObject.computed)(function () {
+      return vertical.value ? 'width' : 'height';
+    });
+    var asideStyle = (0,external_vue_namespaceObject.computed)(function () {
+      var divide = initialDivide.value;
+      if (typeof divide === 'number') {
+        divide = "".concat(divide, "px");
+      }
+      return _defineProperty({}, cssPropKey.value, divide);
+    });
+    var triggerStyle = (0,external_vue_namespaceObject.computed)(function () {
+      var _style;
+      var style = (_style = {}, _defineProperty(_style, "margin-".concat(placement.value), "".concat(triggerOffset.value - triggerWidth.value, "px")), _defineProperty(_style, cssPropKey.value, "".concat(triggerWidth.value, "px")), _style);
+      return style;
+    });
+    var parseAutoMinimize = (0,external_vue_namespaceObject.computed)(function () {
+      if (autoMinimize.value) {
+        return typeof autoMinimize.value === 'boolean' ? 50 : autoMinimize.value;
+      }
+      return 0;
+    });
+    var setMaxLimit = function setMaxLimit() {
+      var rect = bkResizeLayoutRef.value.getBoundingClientRect();
+      limitMax.value = vertical.value ? rect.width : rect.height;
+    };
+    var observer = new ResizeObserver(setMaxLimit);
+    // 更新 resizeProxyRef 的样式
+    var updateResizeProxyStyle = function updateResizeProxyStyle() {
+      resizeProxyRef.value.style.visibility = 'visible';
+      switch (placement.value) {
+        case 'left':
+          resizeProxyRef.value.style.inset = "0 auto auto ".concat(state.value.aside.width, "px");
+          break;
+        case 'right':
+          resizeProxyRef.value.style.inset = "0  ".concat(state.value.aside.width, "px auto auto");
+          break;
+        case 'top':
+          resizeProxyRef.value.style.inset = "".concat(state.value.aside.height, "px auto auto 0");
+          break;
+        case 'bottom':
+          resizeProxyRef.value.style.inset = "auto auto ".concat(state.value.aside.height, "px 0");
+          break;
+      }
+    };
+    // 更新遮罩的样式
+    var updateResizeMaskStyle = function updateResizeMaskStyle() {
+      resizeMaskRef.value.style.display = 'block';
+      resizeMaskRef.value.style.cursor = vertical.value ? 'col-resize' : 'row-resize';
+    };
+    var getRealValue = function getRealValue(current) {
+      return Math.min(max.value, Math.max(min.value, current), limitMax.value - triggerWidth.value);
+    };
+    // mousedown 事件处理
+    var handleMousedown = function handleMousedown(event) {
+      emit('before-resize', event);
+      var asideRect = asideRef.value.getBoundingClientRect();
+      state.value = Object.freeze({
+        mouse: {
+          clientX: event.clientX,
+          clientY: event.clientY
+        },
+        aside: {
+          width: asideRect.width,
+          height: asideRect.height
+        }
+      });
+      updateResizeMaskStyle();
+      if (!immediate.value) {
+        updateResizeProxyStyle();
+      }
+      document.onselectstart = function () {
+        return false;
+      };
+      document.ondragstart = function () {
+        return false;
+      };
+      var resizingCallback = function resizingCallback(value) {
+        emit('resizing', value);
+      };
+      var handleMouseMove = function handleMouseMove(event) {
+        var delta;
+        switch (placement.value) {
+          case 'top':
+            delta = event.clientY - state.value.mouse.clientY;
+            break;
+          case 'right':
+            delta = state.value.mouse.clientX - event.clientX;
+            break;
+          case 'bottom':
+            delta = state.value.mouse.clientY - event.clientY;
+            break;
+          case 'left':
+            delta = event.clientX - state.value.mouse.clientX;
+        }
+        var current = state.value.aside[cssPropKey.value] + delta;
+        var realValue = getRealValue(current) + triggerOffset.value;
+        var pixel = "".concat(realValue, "px");
+        if (immediate.value) {
+          asideRef.value.style[cssPropKey.value] = pixel;
+        } else {
+          resizeProxyRef.value.style[placement.value] = pixel;
+        }
+        resizingCallback(realValue);
+      };
+      var handleMouseUp = function handleMouseUp() {
+        resizeProxyRef.value.style.visibility = 'hidden';
+        resizeMaskRef.value.style.display = 'none';
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+        document.onselectstart = null;
+        document.ondragstart = null;
+        (0,external_vue_namespaceObject.nextTick)(function () {
+          setupAutoMinimize();
+          emit('after-resize', parseFloat(resizeProxyRef.value.style[placement.value]));
+        });
+        if (immediate.value) {
+          return false;
+        }
+        asideRef.value.style[cssPropKey.value] = resizeProxyRef.value.style[placement.value];
+      };
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+    };
+    var setupAutoMinimize = function setupAutoMinimize() {
+      if (!autoMinimize.value) {
+        return false;
+      }
+      var asideRect = asideRef.value.getBoundingClientRect();
+      // 最小化同时设置为已折叠，此时展开以初始化initial-divide数据为参考
+      // eslint-disable-next-line no-multi-assign
+      minimized.value = collapsed.value = asideRect[cssPropKey.value] <= parseAutoMinimize.value;
+      if (!minimized.value) {
+        asideContentVisible.value = true;
+        return false;
+      }
+      setupAsideAnimation();
+      (0,external_vue_namespaceObject.nextTick)(function () {
+        asideRef.value.setAttribute("data-".concat(cssPropKey.value), asideStyle.value[cssPropKey.value]);
+      });
+    };
+    var setCollapse = function setCollapse(collapse) {
+      collapsed.value = typeof collapse === 'boolean' ? collapse : !collapsed.value;
+      setupAsideAnimation();
+      emit('collapse-change', collapsed.value);
+    };
+    var setupAsideAnimation = function setupAsideAnimation() {
+      var asideRect = asideRef.value.getBoundingClientRect();
+      setupAsideListener(!collapsed.value);
+      if (collapsed.value) {
+        asideRef.value.setAttribute("data-".concat(cssPropKey.value), "".concat(asideRect[cssPropKey.value], "px"));
+        asideRef.value.style[cssPropKey.value] = props.collapsible ? '0px' : '5px';
+      } else {
+        asideContentVisible.value = true;
+        asideRef.value.style[cssPropKey.value] = asideRef.value.getAttribute("data-".concat(cssPropKey.value));
+      }
+    };
+    var setupAsideListener = function setupAsideListener(visible) {
+      var removeClass = function removeClass() {
+        asideContentVisible.value = visible;
+        asideRef.value.style.transition = '';
+        asideRef.value.removeEventListener('transitionend', removeClass);
+      };
+      asideRef.value.addEventListener('transitionend', removeClass);
+      asideRef.value.style.transition = "".concat(cssPropKey.value, " cubic-bezier(0.4, 0, 0.2, 1) .3s");
+    };
+    (0,external_vue_namespaceObject.onMounted)(function () {
+      observer.observe(bkResizeLayoutRef.value);
+    });
+    (0,external_vue_namespaceObject.onBeforeUnmount)(function () {
+      if (bkResizeLayoutRef.value) {
+        observer.unobserve(bkResizeLayoutRef.value);
+        observer = null;
+      }
+    });
+    var _usePrefix = (0,external_config_provider_namespaceObject.usePrefix)(),
+      resolveClassName = _usePrefix.resolveClassName;
+    return {
+      collapsed: collapsed,
+      asideContentVisible: asideContentVisible,
+      minimized: minimized,
+      limitMax: limitMax,
+      state: state,
+      vertical: vertical,
+      cssPropKey: cssPropKey,
+      bkResizeLayoutRef: bkResizeLayoutRef,
+      resizeProxyRef: resizeProxyRef,
+      resizeMaskRef: resizeMaskRef,
+      asideRef: asideRef,
+      triggerStyle: triggerStyle,
+      asideStyle: asideStyle,
+      handleMousedown: handleMousedown,
+      setCollapse: setCollapse,
+      resolveClassName: resolveClassName
+    };
+  },
+  render: function render() {
+    var _ref3, _this$$slots$aside, _this$$slots, _this$$slots$collapse, _this$$slots2, _this$$slots$main, _this$$slots3;
+    var bkResizeLayoutClass = ["".concat(this.resolveClassName('resize-layout')), "".concat(this.resolveClassName("resize-layout-".concat(this.placement))), (_ref3 = {}, _defineProperty(_ref3, "".concat(this.resolveClassName('resize-layout-collapsed')), this.collapsed), _defineProperty(_ref3, "".concat(this.resolveClassName('resize-layout-border')), this.border), _defineProperty(_ref3, "".concat(this.resolveClassName('resize-layout-collapsible')), this.collapsible), _ref3)];
+    return (0,external_vue_namespaceObject.createVNode)("div", {
+      "ref": "bkResizeLayoutRef",
+      "class": bkResizeLayoutClass
+    }, [(0,external_vue_namespaceObject.createVNode)("aside", {
+      "class": "".concat(this.resolveClassName('resize-layout-aside')),
+      "ref": "asideRef",
+      "style": this.asideStyle
+    }, [(0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("div", {
+      "class": "".concat(this.resolveClassName('resize-layout-aside-content'))
+    }, [(_this$$slots$aside = (_this$$slots = this.$slots).aside) === null || _this$$slots$aside === void 0 ? void 0 : _this$$slots$aside.call(_this$$slots)]), [[external_vue_namespaceObject.vShow, this.asideContentVisible]]), (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("i", {
+      "class": "".concat(this.resolveClassName('resize-trigger')),
+      "style": this.triggerStyle,
+      "onMousedown": (0,external_vue_namespaceObject.withModifiers)(this.handleMousedown, ['left'])
+    }, null), [[external_vue_namespaceObject.vShow, !this.disabled && (!this.collapsed || this.autoMinimize)]]), (0,external_vue_namespaceObject.withDirectives)((0,external_vue_namespaceObject.createVNode)("i", {
+      "class": ["".concat(this.resolveClassName('resize-proxy')), this.placement],
+      "ref": "resizeProxyRef"
+    }, null), [[external_vue_namespaceObject.vShow, !this.collapsed || this.autoMinimize]]), this.collapsible && (((_this$$slots$collapse = (_this$$slots2 = this.$slots)['collapse-trigger']) === null || _this$$slots$collapse === void 0 ? void 0 : _this$$slots$collapse.call(_this$$slots2)) || (this.collapsed ? (0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.AngleRight, {
+      "width": 26,
+      "height": 26,
+      "class": "".concat(this.resolveClassName('resize-collapse')),
+      "onClick": this.setCollapse
+    }, null) : (0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.AngleLeft, {
+      "width": 26,
+      "height": 26,
+      "class": "".concat(this.resolveClassName('resize-collapse')),
+      "onClick": this.setCollapse
+    }, null)))]), (0,external_vue_namespaceObject.createVNode)("main", {
+      "class": "".concat(this.resolveClassName('resize-layout-main'))
+    }, [(_this$$slots$main = (_this$$slots3 = this.$slots).main) === null || _this$$slots$main === void 0 ? void 0 : _this$$slots$main.call(_this$$slots3)]), (0,external_vue_namespaceObject.createVNode)("div", {
+      "class": "".concat(this.resolveClassName('resize-mask')),
+      "ref": "resizeMaskRef"
+    }, null)]);
+  }
+}));
+;// CONCATENATED MODULE: ../../packages/resize-layout/src/index.ts
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+
+var BkResizeLayout = (0,external_shared_namespaceObject.withInstall)(resize_layout);
+/* harmony default export */ const src = (BkResizeLayout);
+var __webpack_exports__default = __webpack_exports__.Z;
+export { __webpack_exports__default as default };

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

@@ -37,6 +37,9 @@
   left: 100%;
   transform: translateY(-50%);
 }
+.bk-resize-layout-left > .bk-resize-layout-aside .bk-resize-collapse svg {
+  position: absolute;
+}
 .bk-resize-layout-right {
   flex-direction: row-reverse;
 }
@@ -60,6 +63,9 @@
   right: 100%;
   transform: translateY(-50%) rotate(180deg);
 }
+.bk-resize-layout-right > .bk-resize-layout-aside .bk-resize-collapse svg {
+  position: absolute;
+}
 .bk-resize-layout-top {
   flex-direction: column;
 }
@@ -84,6 +90,9 @@
   margin-top: 8px;
   transform: translate3d(-50%, -50%, 0) rotate(90deg);
 }
+.bk-resize-layout-top > .bk-resize-layout-aside .bk-resize-collapse svg {
+  position: absolute;
+}
 .bk-resize-layout-bottom {
   flex-direction: column-reverse;
 }
@@ -108,6 +117,9 @@
   margin-bottom: 8px;
   transform: translate3d(50%, 50%, 0) rotate(-90deg);
 }
+.bk-resize-layout-bottom > .bk-resize-layout-aside .bk-resize-collapse svg {
+  position: absolute;
+}
 .bk-resize-layout > .bk-resize-layout-aside {
   position: relative;
 }
@@ -140,13 +152,13 @@
 .bk-resize-layout > .bk-resize-layout-aside .bk-resize-proxy.right {
   top: 0;
   height: 100%;
-  border-left: 1px dashed #3a84ff;
+  border-left: 2px solid #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;
+  border-top: 2px solid #3a84ff;
 }
 .bk-resize-layout > .bk-resize-layout-aside .bk-resize-collapse {
   position: absolute;

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

@@ -49,7 +49,7 @@ declare const _default: import("vue").DefineComponent<{
     limitMax: any;
     state: any;
     vertical: import("vue").ComputedRef<boolean>;
-    cssPropKey: import("vue").ComputedRef<"height" | "width">;
+    cssPropKey: import("vue").ComputedRef<"width" | "height">;
     bkResizeLayoutRef: import("vue").Ref<HTMLElement>;
     resizeProxyRef: import("vue").Ref<HTMLElement>;
     resizeMaskRef: import("vue").Ref<HTMLElement>;

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

@@ -51,6 +51,9 @@
         top: 50%;
         left: 100%;
         transform: translateY(-50%);
+        svg {
+          position: absolute;
+        }
       }
     }
   }
@@ -79,6 +82,9 @@
         top: 50%;
         right: 100%;
         transform: translateY(-50%) rotate(180deg);
+        svg {
+          position: absolute;
+        }
       }
     }
   }
@@ -108,6 +114,9 @@
         left: 50%;
         margin-top: 8px;
         transform: translate3d(-50%, -50%, 0) rotate(90deg);
+        svg {
+          position: absolute;
+        }
       }
     }
   }
@@ -137,6 +146,9 @@
         left: 50%;
         margin-bottom: 8px;
         transform: translate3d(50%, 50%, 0) rotate(-90deg);
+        svg {
+          position: absolute;
+        }
       }
     }
   }
@@ -176,14 +188,14 @@
       &.right {
         top: 0;
         height: 100%;
-        border-left: 1px dashed #3a84ff;
+        border-left: 2px solid #3a84ff;
       }
 
       &.top,
       &.bottom {
         left: 0;
         width: 100%;
-        border-top: 1px dashed #3a84ff;
+        border-top: 2px solid #3a84ff;
       }
     }
 

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

@@ -11,6 +11,7 @@
   --white-color: white;
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
+  --disable-bg-color: #f9fafd;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -20,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;
@@ -32,7 +36,7 @@
   --input-border-color: var(--light-gray);
   --input-broder-radius: 3px;
   --input-shadow-color: #a3c5fd;
-  --input-horizontal-padding: 10px;
+  --input-horizontal-padding: 8px;
   --input-block-color: #f5f7fa;
   --input-block-hover-color: #eaebf0;
   --input-icon-size: var(--font-size-medium);
@@ -49,7 +53,7 @@
   --button-selected-bg-color: #e1ecff;
   --button-disabled-selected-bg-color: #f0f1f5;
   --radio-font-color: #63656e;
-  --radio-active-color: #5594fa;
+  --radio-active-color: #3a84ff;
   --radio-hover-border-color: #979ba5;
   --radio-disabled-border: #dcdee5;
   --radio-disabled-font-color: #c4c6cc;
@@ -159,6 +163,9 @@
   left: 100%;
   transform: translateY(-50%);
 }
+.bk-resize-layout-left > .bk-resize-layout-aside .bk-resize-collapse svg {
+  position: absolute;
+}
 .bk-resize-layout-right {
   flex-direction: row-reverse;
 }
@@ -182,6 +189,9 @@
   right: 100%;
   transform: translateY(-50%) rotate(180deg);
 }
+.bk-resize-layout-right > .bk-resize-layout-aside .bk-resize-collapse svg {
+  position: absolute;
+}
 .bk-resize-layout-top {
   flex-direction: column;
 }
@@ -206,6 +216,9 @@
   margin-top: 8px;
   transform: translate3d(-50%, -50%, 0) rotate(90deg);
 }
+.bk-resize-layout-top > .bk-resize-layout-aside .bk-resize-collapse svg {
+  position: absolute;
+}
 .bk-resize-layout-bottom {
   flex-direction: column-reverse;
 }
@@ -230,6 +243,9 @@
   margin-bottom: 8px;
   transform: translate3d(50%, 50%, 0) rotate(-90deg);
 }
+.bk-resize-layout-bottom > .bk-resize-layout-aside .bk-resize-collapse svg {
+  position: absolute;
+}
 .bk-resize-layout > .bk-resize-layout-aside {
   position: relative;
 }
@@ -262,13 +278,13 @@
 .bk-resize-layout > .bk-resize-layout-aside .bk-resize-proxy.right {
   top: 0;
   height: 100%;
-  border-left: 1px dashed #3a84ff;
+  border-left: 2px solid #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;
+  border-top: 2px solid #3a84ff;
 }
 .bk-resize-layout > .bk-resize-layout-aside .bk-resize-collapse {
   position: absolute;