bkui-vue 1.0.3-beta.41 → 1.0.3-beta.43

package/lib/modal/index.d.ts

@@ -62,6 +62,8 @@ declare const BkModal: {
         };
         direction: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
+        } & {
+            default: string;
         };
         title: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
@@ -95,33 +97,31 @@ declare const BkModal: {
         top: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         };
+        hiddenDelay: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
     }>> & {
         onClose?: (...args: any[]) => any;
         onHidden?: (...args: any[]) => any;
         onShown?: (...args: any[]) => any;
-        "onQuick-close"?: (...args: any[]) => any;
         onQuickClose?: (...args: any[]) => any;
+        "onQuick-close"?: (...args: any[]) => any;
     }, {
+        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" | "hidden" | "shown" | "quick-close" | "quickClose")[], import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
+        resolveClassName: (cls: string) => string;
+        close: () => void;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "hidden" | "shown" | "quickClose" | "quick-close")[], import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
         isShow: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
         } & {
@@ -183,6 +183,8 @@ declare const BkModal: {
         };
         direction: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
+        } & {
+            default: string;
         };
         title: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
@@ -216,12 +218,17 @@ declare const BkModal: {
         top: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         };
+        hiddenDelay: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
     }>> & {
         onClose?: (...args: any[]) => any;
         onHidden?: (...args: any[]) => any;
         onShown?: (...args: any[]) => any;
-        "onQuick-close"?: (...args: any[]) => any;
         onQuickClose?: (...args: any[]) => any;
+        "onQuick-close"?: (...args: any[]) => any;
     }, {
         title: string;
         width: string | number;
@@ -235,15 +242,16 @@ declare const BkModal: {
         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;
     }, true, {}, {}, {
         P: {};
         B: {};
@@ -313,6 +321,8 @@ declare const BkModal: {
         };
         direction: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
+        } & {
+            default: string;
         };
         title: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
@@ -346,32 +356,30 @@ declare const BkModal: {
         top: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         };
+        hiddenDelay: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
     }>> & {
         onClose?: (...args: any[]) => any;
         onHidden?: (...args: any[]) => any;
         onShown?: (...args: any[]) => any;
-        "onQuick-close"?: (...args: any[]) => any;
         onQuickClose?: (...args: any[]) => any;
+        "onQuick-close"?: (...args: any[]) => any;
     }, {
+        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;
+        resolveClassName: (cls: string) => string;
+        close: () => void;
     }, {}, {}, {}, {
         title: string;
         width: string | number;
@@ -385,15 +393,16 @@ declare const BkModal: {
         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;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -460,6 +469,8 @@ declare const BkModal: {
     };
     direction: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
+    } & {
+        default: string;
     };
     title: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -493,33 +504,31 @@ declare const BkModal: {
     top: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
+    hiddenDelay: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
 }>> & {
     onClose?: (...args: any[]) => any;
     onHidden?: (...args: any[]) => any;
     onShown?: (...args: any[]) => any;
-    "onQuick-close"?: (...args: any[]) => any;
     onQuickClose?: (...args: any[]) => any;
+    "onQuick-close"?: (...args: any[]) => any;
 }, {
+    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" | "hidden" | "shown" | "quick-close" | "quickClose")[], "close" | "hidden" | "shown" | "quick-close" | "quickClose", {
+    resolveClassName: (cls: string) => string;
+    close: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "hidden" | "shown" | "quickClose" | "quick-close")[], "close" | "hidden" | "shown" | "quickClose" | "quick-close", {
     title: string;
     width: string | number;
     height: string | number;
@@ -532,15 +541,16 @@ declare const BkModal: {
     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;
 }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("vue").Plugin<any[]> & Readonly<{
     propsMixin: {
         isShow: import("vue-types").VueTypeValidableDef<boolean> & {
@@ -604,6 +614,8 @@ declare const BkModal: {
         };
         direction: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
+        } & {
+            default: string;
         };
         title: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
@@ -637,6 +649,11 @@ declare const BkModal: {
         top: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         };
+        hiddenDelay: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
     };
 }>;
 export default BkModal;

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__ = ({
 
@@ -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,97 @@ 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, 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 handleResize = (0,throttle_namespaceObject["default"])(function () {
+    var calcContentScroll = function calcContentScroll() {
+      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'))).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;
+      if (isContentScroll.value || props.fullscreen) {
+        contentStyles.value = {
+          height: "".concat(windowInnerHeight - headerHeight - footerHeight, "px"),
+          overflow: 'scroll'
+        };
+      } else {
+        contentStyles.value = {};
+      }
+    };
+    observer = new MutationObserver(function () {
+      calcContentScroll();
+    });
+    observer.observe(root.value.querySelector(".".concat(resolveClassName('modal-content'), " div")), {
+      subtree: true,
+      attributes: true,
+      childList: true,
+      characterData: true
+    });
+    calcContentScroll();
+  }, 30);
+  (0,external_vue_namespaceObject.watch)(function () {
+    return props.isShow;
+  }, function () {
+    if (props.isShow) {
+      setTimeout(function () {
+        handleResize();
+      }, 100);
+    } else {
+      if (observer) {
+        observer.takeRecords();
+        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 +647,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,
   // 弹框出现时，是否允许页面滚动
@@ -582,7 +674,7 @@ var propsMixin = {
   // 内容区最大高度
   maxHeight: shared_namespaceObject.PropTypes.string,
   // 弹出方向
-  direction: shared_namespaceObject.PropTypes.string,
+  direction: shared_namespaceObject.PropTypes.string.def(''),
   // title
   title: shared_namespaceObject.PropTypes.string.def(''),
   // 动画类型
@@ -601,7 +693,8 @@ var propsMixin = {
   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
 
@@ -639,36 +732,36 @@ 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 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, 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') {
@@ -703,12 +796,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,
@@ -720,10 +823,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;
@@ -753,7 +856,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) {
@@ -791,7 +894,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) {
@@ -806,67 +909,61 @@ 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
     };
   },
   render: function render() {
-    var _this$extCls,
-      _this$bodyClass,
-      _this$$slots$header,
-      _this$$slots$header2,
+    var _this$$slots$header,
       _this$$slots,
-      _this$$slots$footer,
-      _this$$slots$footer2,
+      _this$$slots$default,
       _this$$slots2,
-      _this$$slots$close,
-      _this$$slots$close2,
+      _this$$slots$footer,
       _this$$slots3,
+      _this$$slots$close,
+      _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": _defineProperty(_defineProperty(_defineProperty({}, this.resolveClassName('modal-ctx'), true), '--show', this.visible), '--hide', !this.visible),
       "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$bodyClass = this.bodyClass) !== null && _this$bodyClass !== void 0 ? _this$bodyClass : '', 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": 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 : '']), _this.$slots["default"] && (0,external_vue_namespaceObject.createVNode)("div", {
-          "class": resolveClassName('modal-content'),
-          "style": [_this.dialogType === 'show' ? 'padding-bottom: 20px' : '', _objectSpread({}, maxHeight)]
-        }, [_this.$slots["default"]()]), _this.dialogType === 'show' ? '' : (0,external_vue_namespaceObject.createVNode)("div", {
-          "class": resolveClassName('modal-footer')
-        }, [(_this$$slots$footer = (_this$$slots$footer2 = (_this$$slots2 = _this.$slots).footer) === null || _this$$slots$footer2 === void 0 ? void 0 : _this$$slots$footer2.call(_this$$slots2)) !== 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$$slots3 = _this.$slots).close) === null || _this$$slots$close2 === void 0 ? void 0 : _this$$slots$close2.call(_this$$slots3)) !== null && _this$$slots$close !== void 0 ? _this$$slots$close : ''])]) : ''];
+          "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", null, [(_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", {
+          "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)])])];
       }
     })])]);
   }