bkui-vue 1.0.3-beta.7 → 1.0.3-beta.70

package/lib/modal/index.js

@@ -3,6 +3,7 @@ import "./modal.less";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__ from "../shared";
 import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "vue";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__ from "../config-provider";
+import * as __WEBPACK_EXTERNAL_MODULE_lodash_throttle_a7b7506a__ from "lodash/throttle";
 import * as __WEBPACK_EXTERNAL_MODULE_vue_types_22de060a__ from "vue-types";
 /******/ var __webpack_modules__ = ({
 
@@ -425,7 +426,7 @@ __webpack_require__.d(__webpack_exports__, {
 ;// CONCATENATED MODULE: external "../shared"
 var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var y = x => () => x
-const shared_namespaceObject = x({ ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.PropTypes, ["bkZIndexManager"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.bkZIndexManager, ["dialogTypeUnion"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.dialogTypeUnion, ["isElement"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.isElement, ["isPromise"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.isPromise, ["mask"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.mask, ["renderDirectiveType"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.renderDirectiveType, ["withInstallProps"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.withInstallProps });
+const shared_namespaceObject = x({ ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.PropTypes, ["bkZIndexManager"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.bkZIndexManager, ["dialogTypeUnion"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.dialogTypeUnion, ["getFullscreenRoot"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.getFullscreenRoot, ["isElement"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.isElement, ["isPromise"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.isPromise, ["mask"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.mask, ["renderDirectiveType"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.renderDirectiveType, ["withInstallProps"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.withInstallProps });
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -505,7 +506,7 @@ function _defineProperty(obj, key, value) {
 ;// 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({ ["Transition"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Transition, ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["nextTick"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.nextTick, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch });
+const external_vue_namespaceObject = external_vue_x({ ["Transition"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Transition, ["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, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch });
 // EXTERNAL MODULE: ../../node_modules/@babel/runtime/regenerator/index.js
 var regenerator = __webpack_require__(2841);
 var regenerator_default = /*#__PURE__*/__webpack_require__.n(regenerator);
@@ -513,6 +514,92 @@ var regenerator_default = /*#__PURE__*/__webpack_require__.n(regenerator);
 var config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var config_provider_y = x => () => x
 const config_provider_namespaceObject = config_provider_x({ ["usePrefix"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__.usePrefix });
+;// CONCATENATED MODULE: external "lodash/throttle"
+var throttle_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var throttle_y = x => () => x
+const throttle_namespaceObject = throttle_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_lodash_throttle_a7b7506a__["default"] });
+;// CONCATENATED MODULE: ../../packages/modal/src/hooks.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 useContentResize = function useContentResize(root, resizeTarget, props) {
+  var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
+    resolveClassName = _usePrefix.resolveClassName;
+  var isContentScroll = (0,external_vue_namespaceObject.ref)(false);
+  var contentStyles = (0,external_vue_namespaceObject.ref)({});
+  var observer;
+  var handleContentBoxChange = function handleContentBoxChange() {
+    var calcContentScroll = (0,throttle_namespaceObject["default"])(function () {
+      var _root$value$querySele = root.value.querySelector(".".concat(resolveClassName('modal-header'))).getBoundingClientRect(),
+        headerHeight = _root$value$querySele.height;
+      var _root$value$querySele2 = root.value.querySelector(".".concat(resolveClassName('modal-content'), " div")).getBoundingClientRect(),
+        contentHeight = _root$value$querySele2.height;
+      var _root$value$querySele3 = root.value.querySelector(".".concat(resolveClassName('modal-footer'))).getBoundingClientRect(),
+        footerHeight = _root$value$querySele3.height;
+      var windowInnerHeight = window.innerHeight;
+      isContentScroll.value = windowInnerHeight < headerHeight + contentHeight + footerHeight + 20;
+      if (isContentScroll.value || props.fullscreen) {
+        contentStyles.value = {
+          height: "".concat(windowInnerHeight - headerHeight - footerHeight, "px")
+        };
+        // fullscreen 时默认为 true
+        isContentScroll.value = true;
+      } else {
+        contentStyles.value = {};
+      }
+    }, 30);
+    observer = new ResizeObserver(function () {
+      calcContentScroll();
+    });
+    observer.observe(resizeTarget.value);
+    calcContentScroll();
+  };
+  (0,external_vue_namespaceObject.watch)(function () {
+    return props.isShow;
+  }, function () {
+    if (props.isShow) {
+      setTimeout(function () {
+        handleContentBoxChange();
+      }, 100);
+    } else {
+      if (observer) {
+        observer.disconnect();
+        observer = null;
+      }
+    }
+  }, {
+    immediate: true
+  });
+  return {
+    contentStyles: contentStyles,
+    isContentScroll: isContentScroll
+  };
+};
 ;// CONCATENATED MODULE: external "vue-types"
 var external_vue_types_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_vue_types_y = x => () => x
@@ -555,8 +642,8 @@ var ModalSizeEnum;
 var propsMixin = {
   // 是否显示弹框
   isShow: shared_namespaceObject.PropTypes.bool.def(false),
-  width: shared_namespaceObject.PropTypes.oneOfType([String, Number]).def('50%'),
-  height: shared_namespaceObject.PropTypes.oneOfType([String, Number]).def('50%'),
+  width: shared_namespaceObject.PropTypes.oneOfType([String, Number]).def('480px'),
+  height: shared_namespaceObject.PropTypes.oneOfType([String, Number]).def('1000'),
   // 配置自定义样式类名
   extCls: shared_namespaceObject.PropTypes.string || shared_namespaceObject.PropTypes.array,
   // 弹框出现时，是否允许页面滚动
@@ -576,13 +663,13 @@ var propsMixin = {
   // 是否允许点击遮罩关闭弹窗
   quickClose: shared_namespaceObject.PropTypes.bool.def(true),
   // 是否显示在body内（即与id#app同级
-  transfer: shared_namespaceObject.PropTypes.oneOfType([Boolean, String, HTMLElement]).def(false),
+  transfer: shared_namespaceObject.PropTypes.oneOfType([Boolean, String, HTMLElement]).def(true),
   // 弹出层z-index，实际显示的值会自动+1。为了抱证在遮罩上正常显示
   zIndex: shared_namespaceObject.PropTypes.oneOfType([String, Number]),
   // 内容区最大高度
   maxHeight: shared_namespaceObject.PropTypes.string,
   // 弹出方向
-  direction: shared_namespaceObject.PropTypes.string,
+  direction: shared_namespaceObject.PropTypes.string.def(''),
   // title
   title: shared_namespaceObject.PropTypes.string.def(''),
   // 动画类型
@@ -599,8 +686,10 @@ var propsMixin = {
   multiInstance: shared_namespaceObject.PropTypes.bool.def(true),
   // info-box
   infoType: shared_namespaceObject.PropTypes.theme(),
+  bodyClass: shared_namespaceObject.PropTypes.string || shared_namespaceObject.PropTypes.array,
   left: shared_namespaceObject.PropTypes.string,
-  top: shared_namespaceObject.PropTypes.string
+  top: shared_namespaceObject.PropTypes.string,
+  hiddenDelay: shared_namespaceObject.PropTypes.number.def(200)
 };
 ;// CONCATENATED MODULE: ../../packages/modal/src/modal.tsx
 
@@ -638,50 +727,51 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 
 
+
 /* harmony default export */ const modal = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'Modal',
   props: _objectSpread({}, propsMixin),
   emits: ['quick-close', 'quickClose', 'hidden', 'shown', 'close'],
   setup: function setup(props, ctx) {
-    var visible = (0,external_vue_namespaceObject.ref)(false);
-    var zIndex = (0,external_vue_namespaceObject.ref)(props.zIndex);
     var refRoot = (0,external_vue_namespaceObject.ref)();
     var refMask = (0,external_vue_namespaceObject.ref)();
+    var resizeTargetRef = (0,external_vue_namespaceObject.ref)();
+    var teleportTo = (0,external_vue_namespaceObject.ref)('body');
+    var visible = (0,external_vue_namespaceObject.ref)(false);
+    var zIndex = (0,external_vue_namespaceObject.ref)(props.zIndex);
+    var enableTeleport = (0,external_vue_namespaceObject.ref)(!!props.transfer);
     var backgroundColor = (0,external_vue_namespaceObject.ref)('rgba(0,0,0,0.6)');
     var closeTimer;
-    var dialogWidth = (0,external_vue_namespaceObject.computed)(function () {
-      return /^\d+\.?\d*$/.test("".concat(props.width)) ? "".concat(props.width, "px") : props.width;
-    });
-    var dialogHeight = (0,external_vue_namespaceObject.computed)(function () {
-      return /^\d+\.?\d*$/.test("".concat(props.height)) ? "".concat(props.height, "px") : props.height;
-    });
-    var compStyle = (0,external_vue_namespaceObject.computed)(function () {
-      return _defineProperty({
-        width: dialogWidth.value,
-        height: dialogHeight.value,
-        minHeigth: "".concat(200, "px"),
-        display: visible.value ? 'inherit' : 'none',
-        zIndex: zIndex.value || 'inherit',
+    var _useContentResize = useContentResize(refRoot, resizeTargetRef, props),
+      contentStyles = _useContentResize.contentStyles,
+      isContentScroll = _useContentResize.isContentScroll;
+    var modalWrapperStyles = (0,external_vue_namespaceObject.computed)(function () {
+      var baseStyles = {
+        display: visible.value ? 'inherit' : 'none'
+      };
+      if (props.fullscreen) {
+        return baseStyles;
+      }
+      return Object.assign(baseStyles, _defineProperty({
+        width: /^\d+\.?\d*$/.test("".concat(props.width)) ? "".concat(props.width, "px") : props.width,
         left: props.left,
         top: props.top
-      }, props.direction, 0);
+      }, props.direction, 0));
     });
-    var enableTeleport = (0,external_vue_namespaceObject.ref)(!!props.transfer);
-    var teleportTo = (0,external_vue_namespaceObject.ref)('body');
     var resolveTransfer = function resolveTransfer() {
       if (props.transfer) {
         if (typeof props.transfer === 'boolean') {
-          teleportTo.value = 'body';
+          teleportTo.value = (0,shared_namespaceObject.getFullscreenRoot)();
           return;
         }
-        teleportTo.value = props.transfer;
+        teleportTo.value = (0,shared_namespaceObject.getFullscreenRoot)(props.transfer);
       }
     };
-    resolveTransfer();
     var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
       resolveClassName = _usePrefix.resolveClassName;
     var resolveClosetModal = function resolveClosetModal() {
       var _refRoot$value;
+      resolveTransfer();
       if (enableTeleport.value) {
         if (typeof teleportTo.value === 'string') {
           var target = document.querySelector(teleportTo.value);
@@ -702,12 +792,22 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
         _target === null || _target === void 0 || _target.appendChild(refRoot.value);
       }
     };
-    var fullscreenStyle = (0,external_vue_namespaceObject.computed)(function () {
-      return {
-        width: "".concat(100, "%"),
-        height: "".concat(100, "%")
-      };
-    });
+    var close = function close() {
+      if (visible.value) {
+        visible.value = false;
+        shared_namespaceObject.mask.hideMask({
+          el: refRoot.value,
+          mask: refMask.value,
+          showMask: props.showMask,
+          backgroundColor: backgroundColor.value
+        });
+        ctx.emit('hidden');
+        if (enableTeleport.value) {
+          var _refRoot$value2;
+          (_refRoot$value2 = refRoot.value) === null || _refRoot$value2 === void 0 || _refRoot$value2.remove();
+        }
+      }
+    };
     var closeModal = function closeModal() {
       shared_namespaceObject.mask.hideMask({
         el: refRoot.value,
@@ -719,10 +819,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
         // 直接设为false会失去离开的动画效果，这里延迟设置
         ctx.emit('hidden'); // 为false直接触发hidden事件，在上层有200ms的延时
         if (enableTeleport.value) {
-          var _refRoot$value2;
-          (_refRoot$value2 = refRoot.value) === null || _refRoot$value2 === void 0 || _refRoot$value2.remove();
+          var _refRoot$value3;
+          (_refRoot$value3 = refRoot.value) === null || _refRoot$value3 === void 0 || _refRoot$value3.remove();
         }
-      }, 250);
+      }, props.hiddenDelay);
     };
     (0,external_vue_namespaceObject.watch)(function () {
       return props.isShow;
@@ -752,7 +852,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
       immediate: true
     });
     var handleBeforeClose = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee(callbackFn) {
+      var _ref = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee(callbackFn) {
         var shouldClose, execRet;
         return regenerator_default().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -790,7 +890,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
         }, _callee);
       }));
       return function handleBeforeClose(_x) {
-        return _ref2.apply(this, arguments);
+        return _ref.apply(this, arguments);
       };
     }();
     var handleClickOutSide = function handleClickOutSide(e) {
@@ -805,69 +905,68 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
         });
       }
     };
+    (0,external_vue_namespaceObject.onBeforeUnmount)(function () {
+      close();
+    });
     return {
+      zIndex: zIndex,
       visible: visible,
-      compStyle: compStyle,
-      fullscreenStyle: fullscreenStyle,
+      contentStyles: contentStyles,
+      isContentScroll: isContentScroll,
+      modalWrapperStyles: modalWrapperStyles,
       handleClickOutSide: handleClickOutSide,
       refRoot: refRoot,
       refMask: refMask,
-      showMask: props.showMask
+      resolveClassName: resolveClassName,
+      close: close,
+      resizeTargetRef: resizeTargetRef
     };
   },
   render: function render() {
     var _this$extCls,
       _this$$slots$header,
-      _this$$slots$header2,
       _this$$slots,
       _this$$slots$default,
-      _this$$slots$default2,
       _this$$slots2,
       _this$$slots$footer,
-      _this$$slots$footer2,
       _this$$slots3,
       _this$$slots$close,
-      _this$$slots$close2,
       _this$$slots4,
       _this = this;
-    var _usePrefix2 = (0,config_provider_namespaceObject.usePrefix)(),
-      resolveClassName = _usePrefix2.resolveClassName;
-    var maxHeight = this.maxHeight ? {
-      maxHeight: this.maxHeight
-    } : {};
-    var bodyClass = "".concat(resolveClassName('modal-body'), " ").concat(this.animateType === 'slide' ? this.direction : '');
     return (0,external_vue_namespaceObject.createVNode)("div", {
       "ref": "refRoot",
-      "class": [resolveClassName('modal-ctx'), this.visible ? '--show' : '--hide'],
+      "class": [this.resolveClassName('modal-ctx'), this.visible ? 'is-show' : '', (_this$extCls = this.extCls) !== null && _this$extCls !== void 0 ? _this$extCls : ''],
       "style": {
-        zIndex: this.compStyle.zIndex
+        zIndex: this.zIndex
       }
-    }, [this.showMask ? (0,external_vue_namespaceObject.createVNode)("div", {
+    }, [this.showMask && (0,external_vue_namespaceObject.createVNode)("div", {
       "ref": "refMask",
-      "class": [resolveClassName('modal-ctx-mask'), this.visible ? '--show' : '--hide'],
-      "onClick": this.handleClickOutSide,
-      "style": {
-        zIndex: this.compStyle.zIndex
-      }
-    }, null) : '', (0,external_vue_namespaceObject.createVNode)("div", {
-      "class": [resolveClassName('modal-wrapper'), (_this$extCls = this.extCls) !== null && _this$extCls !== void 0 ? _this$extCls : '', this.size, this.fullscreen ? 'fullscreen' : ''],
-      "style": [this.compStyle, this.fullscreen ? this.fullscreenStyle : '']
+      "class": _defineProperty({}, this.resolveClassName('modal-ctx-mask'), true),
+      "onClick": this.handleClickOutSide
+    }, null), (0,external_vue_namespaceObject.createVNode)("div", {
+      "class": _defineProperty(_defineProperty(_defineProperty({}, this.resolveClassName('modal-wrapper'), true), 'scroll-able', this.scrollable), 'multi-instance', this.multiInstance),
+      "style": this.modalWrapperStyles
     }, [(0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Transition, {
       "name": this.animateType
     }, {
       "default": function _default() {
-        return [_this.visible ? (0,external_vue_namespaceObject.createVNode)("div", {
-          "class": bodyClass
+        return [_this.visible && (0,external_vue_namespaceObject.createVNode)("div", {
+          "class": _defineProperty(_defineProperty({}, _this.resolveClassName('modal-body'), true), _this.direction, _this.animateType === 'slide')
+        }, [(0,external_vue_namespaceObject.createVNode)("div", {
+          "class": _this.resolveClassName('modal-header')
+        }, [(_this$$slots$header = (_this$$slots = _this.$slots).header) === null || _this$$slots$header === void 0 ? void 0 : _this$$slots$header.call(_this$$slots)]), (0,external_vue_namespaceObject.createVNode)("div", {
+          "class": _this.resolveClassName('modal-content'),
+          "style": _this.contentStyles
         }, [(0,external_vue_namespaceObject.createVNode)("div", {
-          "class": resolveClassName('modal-header')
-        }, [(_this$$slots$header = (_this$$slots$header2 = (_this$$slots = _this.$slots).header) === null || _this$$slots$header2 === void 0 ? void 0 : _this$$slots$header2.call(_this$$slots)) !== null && _this$$slots$header !== void 0 ? _this$$slots$header : '']), (0,external_vue_namespaceObject.createVNode)("div", {
-          "class": resolveClassName('modal-content'),
-          "style": [_this.dialogType === 'show' ? 'padding-bottom: 20px' : '', _objectSpread({}, maxHeight)]
-        }, [(_this$$slots$default = (_this$$slots$default2 = (_this$$slots2 = _this.$slots)["default"]) === null || _this$$slots$default2 === void 0 ? void 0 : _this$$slots$default2.call(_this$$slots2)) !== null && _this$$slots$default !== void 0 ? _this$$slots$default : '']), _this.dialogType === 'show' ? '' : (0,external_vue_namespaceObject.createVNode)("div", {
-          "class": resolveClassName('modal-footer')
-        }, [(_this$$slots$footer = (_this$$slots$footer2 = (_this$$slots3 = _this.$slots).footer) === null || _this$$slots$footer2 === void 0 ? void 0 : _this$$slots$footer2.call(_this$$slots3)) !== null && _this$$slots$footer !== void 0 ? _this$$slots$footer : '']), _this.closeIcon && (0,external_vue_namespaceObject.createVNode)("div", {
-          "class": resolveClassName('modal-close')
-        }, [(_this$$slots$close = (_this$$slots$close2 = (_this$$slots4 = _this.$slots).close) === null || _this$$slots$close2 === void 0 ? void 0 : _this$$slots$close2.call(_this$$slots4)) !== null && _this$$slots$close !== void 0 ? _this$$slots$close : ''])]) : ''];
+          "style": "position: relative; display: inline-block; width: 100%;"
+        }, [(_this$$slots$default = (_this$$slots2 = _this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots2), (0,external_vue_namespaceObject.createVNode)("div", {
+          "ref": "resizeTargetRef",
+          "style": "position: absolute; top: 0; bottom: 0;"
+        }, null)])]), (0,external_vue_namespaceObject.createVNode)("div", {
+          "class": _defineProperty(_defineProperty({}, _this.resolveClassName('modal-footer'), true), 'is-fixed', _this.isContentScroll)
+        }, [(_this$$slots$footer = (_this$$slots3 = _this.$slots).footer) === null || _this$$slots$footer === void 0 ? void 0 : _this$$slots$footer.call(_this$$slots3)]), _this.closeIcon && (0,external_vue_namespaceObject.createVNode)("div", {
+          "class": _this.resolveClassName('modal-close')
+        }, [(_this$$slots$close = (_this$$slots4 = _this.$slots).close) === null || _this$$slots$close === void 0 ? void 0 : _this$$slots$close.call(_this$$slots4)])])];
       }
     })])]);
   }

package/lib/modal/modal.css

@@ -1,101 +1,77 @@
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper {
+.bk-info-wrapper .bk-modal-wrapper {
   width: 440px;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.normal {
-  width: 440px;
-}
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.small {
-  width: 400px;
-}
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-body {
-  border-radius: 2px;
-}
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header {
-  padding: 24px 24px 0;
+.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
+  margin-top: 16px;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
-  height: 27px;
-  margin: 15px 0 10px;
-}
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content {
-  height: 100%;
-  max-height: 100%;
-  min-height: 100%;
-  padding: 0 50px 10px;
-  word-break: break-all;
+.bk-info-wrapper .bk-dialog-footer button {
+  min-width: 88px;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content .bk-info-sub-title {
-  margin-bottom: 10px;
+.bk-info-sub-title {
   text-align: center;
   word-break: break-all;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer {
-  padding: 0 65px 33px;
-  background-color: #fff;
-  border-top: none;
-}
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-footer button {
-  min-width: 88px;
-}
 .bk-modal-ctx {
-  pointer-events: auto;
+  position: fixed;
   top: 0px;
   left: 0px;
+  display: none;
   width: 100%;
   height: 100%;
+  pointer-events: auto;
 }
-.bk-modal-ctx.--show {
-  position: fixed;
-}
-.bk-modal-ctx.--hide {
-  display: none;
+.bk-modal-ctx.is-show {
+  display: block;
 }
-.bk-modal-ctx .bk-modal-ctx-mask {
-  display: none;
-  left: 0;
+.bk-modal-ctx-mask {
+  position: fixed;
   top: 0;
+  left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.6);
 }
-.bk-modal-ctx .bk-modal-ctx-mask.--show {
-  position: fixed;
-  display: inherit;
-}
 .bk-modal-wrapper {
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 480px;
   border-radius: 2px;
   transform: translate(-50%, -50%);
 }
-.bk-modal-wrapper .bk-modal-outside {
+.bk-modal-outside {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
 }
-.bk-modal-wrapper.normal {
-  width: 480px;
-  height: 240px;
-}
-.bk-modal-wrapper.small {
-  width: 400px;
-  height: 200px;
-}
-.bk-modal-wrapper.medium {
-  width: 640px;
-  height: 400px;
-}
-.bk-modal-wrapper.large {
-  width: 960px;
-  height: 720px;
-}
-.bk-modal-wrapper .bk-modal-body {
+.bk-modal-body {
   height: 100%;
-  width: 100%;
+  overflow: hidden;
   background: #fff;
+  border-radius: 2px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
+.bk-modal-content {
+  max-height: 100vh;
+  overflow: auto;
+  scrollbar-gutter: stable;
+}
+.bk-modal-close {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  display: flex;
+  width: 32px;
+  height: 32px;
+  font-size: 18px;
+  color: #979ba5;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: 0.15s;
+}
+.bk-modal-close:hover {
+  background: #f0f1f5;
+}

package/lib/modal/modal.d.ts

@@ -1,3 +1,6 @@
+import { type ExtractPropTypes } from 'vue';
+import { propsMixin } from './props.mixin';
+export type ModalProps = Readonly<ExtractPropTypes<typeof propsMixin>>;
 declare const _default: import("vue").DefineComponent<{
     isShow: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
@@ -60,6 +63,8 @@ declare const _default: import("vue").DefineComponent<{
     };
     direction: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
+    } & {
+        default: string;
     };
     title: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -82,33 +87,37 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     infoType: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary">;
+    bodyClass: (import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    }) | (import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    });
     left: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
     top: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
+    hiddenDelay: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
 }, {
+    zIndex: import("vue").Ref<string | number>;
     visible: import("vue").Ref<boolean>;
-    compStyle: import("vue").ComputedRef<{
-        [x: string]: string | number;
-        width: string | number;
-        height: string | number;
-        minHeigth: string;
+    contentStyles: import("vue").Ref<{}>;
+    isContentScroll: import("vue").Ref<boolean>;
+    modalWrapperStyles: import("vue").ComputedRef<{
         display: string;
-        zIndex: string | number;
-        left: string;
-        top: string;
-    }>;
-    fullscreenStyle: import("vue").ComputedRef<{
-        width: string;
-        height: string;
     }>;
     handleClickOutSide: (e: MouseEvent) => void;
     refRoot: import("vue").Ref<HTMLElement>;
     refMask: import("vue").Ref<HTMLElement>;
-    showMask: boolean;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "shown" | "hidden" | "quick-close" | "quickClose")[], "close" | "shown" | "hidden" | "quick-close" | "quickClose", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    resolveClassName: (cls: string) => string;
+    close: () => void;
+    resizeTargetRef: import("vue").Ref<HTMLElement>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "hidden" | "shown" | "quickClose" | "quick-close")[], "close" | "hidden" | "shown" | "quickClose" | "quick-close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     isShow: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -170,6 +179,8 @@ declare const _default: import("vue").DefineComponent<{
     };
     direction: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
+    } & {
+        default: string;
     };
     title: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -192,18 +203,28 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     infoType: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary">;
+    bodyClass: (import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    }) | (import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    });
     left: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
     top: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
+    hiddenDelay: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
 }>> & {
     onClose?: (...args: any[]) => any;
-    onShown?: (...args: any[]) => any;
     onHidden?: (...args: any[]) => any;
-    "onQuick-close"?: (...args: any[]) => any;
+    onShown?: (...args: any[]) => any;
     onQuickClose?: (...args: any[]) => any;
+    "onQuick-close"?: (...args: any[]) => any;
 }, {
     title: string;
     width: string | number;
@@ -217,13 +238,15 @@ declare const _default: import("vue").DefineComponent<{
     transfer: string | boolean | HTMLElement;
     direction: string;
     renderDirective: "show" | "if";
-    quickClose: boolean;
     scrollable: boolean;
     showMask: boolean;
     closeIcon: boolean;
     escClose: boolean;
     fullscreen: boolean;
+    quickClose: boolean;
     animateType: string;
     multiInstance: boolean;
+    bodyClass: string | unknown[];
+    hiddenDelay: number;
 }, {}>;
 export default _default;