bkui-vue 1.0.3-beta.40 → 1.0.3-beta.42

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;
@@ -99,29 +101,21 @@ declare const BkModal: {
         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;
+    }, 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 +177,8 @@ declare const BkModal: {
         };
         direction: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
+        } & {
+            default: string;
         };
         title: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
@@ -220,8 +216,8 @@ declare const BkModal: {
         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,12 +231,12 @@ 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[];
@@ -313,6 +309,8 @@ declare const BkModal: {
         };
         direction: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
+        } & {
+            default: string;
         };
         title: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
@@ -350,28 +348,20 @@ declare const BkModal: {
         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;
     }, {}, {}, {}, {
         title: string;
         width: string | number;
@@ -385,12 +375,12 @@ 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[];
@@ -460,6 +450,8 @@ declare const BkModal: {
     };
     direction: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
+    } & {
+        default: string;
     };
     title: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -497,29 +489,21 @@ declare const BkModal: {
     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;
+}, 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,12 +516,12 @@ 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[];
@@ -604,6 +588,8 @@ declare const BkModal: {
         };
         direction: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
+        } & {
+            default: string;
         };
         title: import("vue-types").VueTypeValidableDef<string> & {
             default: string;

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__ = ({
 
@@ -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(''),
   // 动画类型
@@ -639,36 +731,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 +795,6 @@ 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 closeModal = function closeModal() {
       shared_namespaceObject.mask.hideMask({
         el: refRoot.value,
@@ -753,7 +839,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 +877,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) {
@@ -807,67 +893,56 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
       }
     };
     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
     };
   },
   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;
-    console.log('this.$sltos = ', this.$slots);
-    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)])])];
       }
     })])]);
   }

package/lib/modal/modal.css

@@ -1,37 +1,16 @@
-.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 .bk-dialog-title {
+.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-modal-content {
-  height: initial;
-  max-height: initial;
-  min-height: initial;
-  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 {
+.bk-info-sub-title {
   text-align: center;
   word-break: break-all;
 }
-.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer {
-  height: initial;
-  margin-top: 24px;
-  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 {
   top: 0px;
   left: 0px;
@@ -42,10 +21,13 @@
 .bk-modal-ctx.--show {
   position: fixed;
 }
+.bk-modal-ctx.--show .bk-modal-ctx-mask {
+  display: block;
+}
 .bk-modal-ctx.--hide {
   display: none;
 }
-.bk-modal-ctx .bk-modal-ctx-mask {
+.bk-modal-ctx-mask {
   top: 0;
   left: 0;
   display: none;
@@ -53,44 +35,45 @@
   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%;
   overflow: hidden;
   background: #fff;
+  border-radius: 2px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
+.bk-modal-body {
+  overflow: auto;
+}
+.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;
+}