bkui-vue 1.0.3-beta.62.dialog.1 → 1.0.3-beta.63

package/lib/info-box/index.js

@@ -2,13 +2,9 @@ import "../styles/reset.css";
 import "./info-box.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_lodash_isFunction_f90b20d6__ from "lodash/isFunction";
-import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_button_a2ea7c9a__ from "../button";
-import "../button/button.less";
 import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__ from "../config-provider";
-import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__ from "../icon";
-import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_modal_d1344388__ from "../modal";
-import "../modal/modal.less";
+import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_dialog_497cb4c3__ from "../dialog";
+import "../dialog/dialog.less";
 /******/ var __webpack_modules__ = ({
 
 /***/ 7609:
@@ -429,10 +425,6 @@ __webpack_require__.d(__webpack_exports__, {
 var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var y = x => () => x
 const shared_namespaceObject = x({ ["withInstall"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.withInstall });
-;// 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({ ["createApp"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createApp, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["reactive"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.reactive, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref });
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(o) {
   "@babel/helpers - typeof";
@@ -512,38 +504,28 @@ function _asyncToGenerator(fn) {
 // EXTERNAL MODULE: ../../node_modules/@babel/runtime/regenerator/index.js
 var regenerator = __webpack_require__(2841);
 var regenerator_default = /*#__PURE__*/__webpack_require__.n(regenerator);
-;// CONCATENATED MODULE: external "lodash/isFunction"
-var isFunction_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var isFunction_y = x => () => x
-const isFunction_namespaceObject = isFunction_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_lodash_isFunction_f90b20d6__["default"] });
-;// CONCATENATED MODULE: external "../button"
-var button_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var button_y = x => () => x
-const button_namespaceObject = button_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_button_a2ea7c9a__["default"] });
-;// CONCATENATED MODULE: external "../button/button.less"
-var button_less_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var button_less_y = x => () => x
-const button_less_namespaceObject = button_less_x({  });
+;// 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({ ["createApp"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createApp, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["h"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.h, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["shallowRef"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.shallowRef });
 ;// CONCATENATED MODULE: external "../config-provider"
 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 "../icon"
-var icon_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var icon_y = x => () => x
-const icon_namespaceObject = icon_x({ ["Close"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Close, ["Error"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Error, ["Spinner"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Spinner, ["Success"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Success, ["Warn"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Warn });
-;// CONCATENATED MODULE: external "../modal"
-var modal_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var modal_y = x => () => x
-const modal_namespaceObject = modal_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_modal_d1344388__["default"] });
-;// CONCATENATED MODULE: external "../modal/modal.less"
-var modal_less_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var modal_less_y = x => () => x
-const modal_less_namespaceObject = modal_less_x({  });
-;// CONCATENATED MODULE: ../../packages/info-box/src/render-component.tsx
+;// CONCATENATED MODULE: external "../dialog"
+var dialog_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var dialog_y = x => () => x
+const dialog_namespaceObject = dialog_x({ ["default"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_dialog_497cb4c3__["default"] });
+;// CONCATENATED MODULE: external "../dialog/dialog.less"
+var dialog_less_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var dialog_less_y = x => () => x
+const dialog_less_namespaceObject = dialog_less_x({  });
+;// CONCATENATED MODULE: ../../packages/info-box/src/info-box.tsx
 
 
 
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 
 /*
  * Tencent is pleased to support the open source community by making
@@ -574,299 +556,178 @@ const modal_less_namespaceObject = modal_less_x({  });
 
 
 
-
-
-
-
-var genDefaultState = function genDefaultState() {
-  return {
-    isShow: false,
-    width: 400,
-    extCls: undefined,
-    "class": undefined,
-    infoType: undefined,
-    type: undefined,
-    title: undefined,
-    subTitle: undefined,
-    content: undefined,
-    headerAlign: 'center',
-    contentAlign: 'center',
-    footerAlign: 'center',
-    showMask: true,
-    quickClose: false,
-    escClose: false,
-    closeIcon: true,
-    confirmText: '确定',
-    theme: 'primary',
-    confirmButtonTheme: 'primary',
-    cancelText: '',
-    beforeClose: function beforeClose() {
-      return true;
-    },
-    onConfirm: function onConfirm() {},
-    onCancel: function onCancel() {},
-    onClose: function onClose() {}
-  };
-};
-/* harmony default export */ const render_component = ((0,external_vue_namespaceObject.defineComponent)({
-  name: 'InfoBox',
-  setup: function setup(_props, _ref) {
-    var expose = _ref.expose;
-    var state = (0,external_vue_namespaceObject.reactive)(genDefaultState());
-    var isShow = (0,external_vue_namespaceObject.ref)(false);
-    var isLoading = (0,external_vue_namespaceObject.ref)(false);
-    var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
-      resolveClassName = _usePrefix.resolveClassName;
-    var handleConfirm = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee() {
-        var willClose;
-        return regenerator_default().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              isLoading.value = true;
-              _context.prev = 1;
-              _context.next = 4;
-              return state.beforeClose('confirm');
-            case 4:
-              willClose = _context.sent;
-              if (willClose) {
+var InfoBox = function InfoBox(config) {
+  var container = document.createElement('div');
+  var modalFuncProps = (0,external_vue_namespaceObject.shallowRef)(config);
+  var isShow = (0,external_vue_namespaceObject.ref)(modalFuncProps.value.isShow !== false);
+  var app;
+  var dialogConfirm;
+  var dialog = (0,external_vue_namespaceObject.defineComponent)({
+    name: 'DialogConfirm',
+    setup: function setup(_props, _ref) {
+      var expose = _ref.expose;
+      var isLoading = false;
+      var beforeHiddenFn = [];
+      var resolveUserCallbackFnBeforeClose = /*#__PURE__*/function () {
+        var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee(userCallbackFn) {
+          return regenerator_default().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                if (!(typeof userCallbackFn === 'function')) {
+                  _context.next = 7;
+                  break;
+                }
+                if (!(userCallbackFn instanceof Promise)) {
+                  _context.next = 6;
+                  break;
+                }
+                _context.next = 4;
+                return userCallbackFn();
+              case 4:
                 _context.next = 7;
                 break;
-              }
-              return _context.abrupt("return");
-            case 7:
-              _context.next = 9;
-              return state.onConfirm();
-            case 9:
-              isShow.value = false;
-            case 10:
-              _context.prev = 10;
-              isLoading.value = false;
-              return _context.finish(10);
-            case 13:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, null, [[1,, 10, 13]]);
-      }));
-      return function handleConfirm() {
-        return _ref2.apply(this, arguments);
-      };
-    }();
-    var handleCancel = /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee2() {
-        var willClose;
-        return regenerator_default().wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              _context2.next = 2;
-              return state.beforeClose('confirm');
-            case 2:
-              willClose = _context2.sent;
-              if (willClose) {
-                _context2.next = 5;
-                break;
-              }
-              return _context2.abrupt("return");
-            case 5:
-              _context2.next = 7;
-              return state.onCancel();
-            case 7:
-              isShow.value = false;
-            case 8:
-            case "end":
-              return _context2.stop();
+              case 6:
+                beforeHiddenFn.push(userCallbackFn);
+              case 7:
+                isShow.value = false;
+              case 8:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        return function resolveUserCallbackFnBeforeClose(_x) {
+          return _ref2.apply(this, arguments);
+        };
+      }();
+      var onClosed = /*#__PURE__*/function () {
+        var _ref3 = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee2() {
+          var _modalFuncProps$value;
+          return regenerator_default().wrap(function _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
+              case 0:
+                resolveUserCallbackFnBeforeClose((_modalFuncProps$value = modalFuncProps.value) === null || _modalFuncProps$value === void 0 ? void 0 : _modalFuncProps$value.onClosed);
+              case 1:
+              case "end":
+                return _context2.stop();
+            }
+          }, _callee2);
+        }));
+        return function onClosed() {
+          return _ref3.apply(this, arguments);
+        };
+      }();
+      var onConfirm = /*#__PURE__*/function () {
+        var _ref4 = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee3() {
+          var _modalFuncProps$value2;
+          return regenerator_default().wrap(function _callee3$(_context3) {
+            while (1) switch (_context3.prev = _context3.next) {
+              case 0:
+                isLoading = true;
+                _context3.next = 3;
+                return resolveUserCallbackFnBeforeClose((_modalFuncProps$value2 = modalFuncProps.value) === null || _modalFuncProps$value2 === void 0 ? void 0 : _modalFuncProps$value2.onConfirm);
+              case 3:
+                isLoading = false;
+              case 4:
+              case "end":
+                return _context3.stop();
+            }
+          }, _callee3);
+        }));
+        return function onConfirm() {
+          return _ref4.apply(this, arguments);
+        };
+      }();
+      function update(newValue) {
+        modalFuncProps.value = _objectSpread(_objectSpread({}, modalFuncProps.value), newValue);
+      }
+      expose({
+        update: update
+      });
+      var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
+        resolveClassName = _usePrefix.resolveClassName;
+      var getContent = function getContent() {
+        var children = [];
+        var subTitleBox = [];
+        if (modalFuncProps.value.subTitle) {
+          switch (_typeof(modalFuncProps.value.subTitle)) {
+            case 'string':
+              children.push(modalFuncProps.value.subTitle);
+              break;
+            case 'function':
+              children.push(modalFuncProps.value.subTitle());
+              break;
+            default:
+              children.push(modalFuncProps.value.subTitle);
+              break;
           }
-        }, _callee2);
-      }));
-      return function handleCancel() {
-        return _ref3.apply(this, arguments);
-      };
-    }();
-    expose({
-      show: function show() {
-        isShow.value = true;
-      },
-      hide: function hide() {
-        isShow.value = false;
-      },
-      update: function update(payload) {
-        Object.assign(state, payload);
-        // 配置项变更 infoType 变更为 type
-        if (payload.infoType) {
-          state.type = payload.infoType;
-        }
-        // 配置项变更 onClose 变更为 onCancel
-        if (payload.onClose) {
-          state.onCancel = payload.onClose;
-        }
-        // 配置项变更 subTitle 变更为 content
-        if (payload.subTitle) {
-          state.content = payload.subTitle;
-        }
-        // 配置项变更 theme 变更为 confirmButtonTheme
-        if (payload.theme) {
-          state.confirmButtonTheme = payload.theme;
         }
-        // 配置项变更 extCls 变更为 class
-        if (payload.extCls) {
-          state["class"] = payload.extCls;
+        if (children.length) {
+          subTitleBox.push((0,external_vue_namespaceObject.h)('div', {
+            "class": resolveClassName('info-sub-title'),
+            style: "text-Align:".concat(modalFuncProps.value.contentAlign || 'center')
+          }, children));
         }
-      }
-    });
-    return function () {
-      var renderIcon = function renderIcon() {
-        if (!state.type) {
-          return null;
-        }
-        var iconMap = {
-          loading: (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Spinner, {
-            "class": [resolveClassName('infobox-icon'), 'loading']
-          }, null),
-          warning: (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Warn, {
-            "class": [resolveClassName('infobox-icon'), 'warning']
-          }, null),
-          success: (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Success, {
-            "class": [resolveClassName('infobox-icon'), 'success']
-          }, null),
-          danger: (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Close, {
-            "class": [resolveClassName('infobox-icon'), 'danger']
-          }, null)
-        };
-        return (0,external_vue_namespaceObject.createVNode)("div", {
-          "class": resolveClassName('infobox-type')
-        }, [iconMap[state.type]]);
+        return subTitleBox;
       };
-      var renderTitle = function renderTitle() {
-        if ((0,isFunction_namespaceObject["default"])(state.title)) {
-          return state.title();
-        }
-        return state.title;
+      var onHidden = function onHidden() {
+        beforeHiddenFn.forEach(function (fn) {
+          return fn();
+        });
+        beforeHiddenFn.length = 0;
+        unmountApp();
+        container.remove();
       };
-      var renderContent = function renderContent() {
-        if ((0,isFunction_namespaceObject["default"])(state.content)) {
-          return state.content();
-        }
-        return state.content;
+      return function () {
+        return (0,external_vue_namespaceObject.createVNode)(dialog_namespaceObject["default"], _objectSpread(_objectSpread({
+          "class": resolveClassName('info-wrapper'),
+          headerAlign: 'center',
+          footerAlign: 'center',
+          fullscreen: false,
+          isLoading: isLoading
+        }, modalFuncProps.value), {}, {
+          isShow: isShow.value,
+          transfer: false,
+          quickClose: false,
+          onClosed: onClosed,
+          onConfirm: onConfirm,
+          onHidden: onHidden
+        }), getContent);
       };
-      return (0,external_vue_namespaceObject.createVNode)(modal_namespaceObject["default"], {
-        "class": [resolveClassName('infobox'), state["class"]],
-        "isShow": isShow.value,
-        "animateType": "fadein",
-        "transfer": true,
-        "quickClose": false,
-        "width": state.width,
-        "closeIcon": state.closeIcon
-      }, {
-        header: function header() {
-          return (0,external_vue_namespaceObject.createVNode)("div", {
-            "class": resolveClassName('infobox-header')
-          }, [renderIcon(), (0,external_vue_namespaceObject.createVNode)("div", {
-            "class": resolveClassName('infobox-title'),
-            "style": {
-              textAlign: state.headerAlign
-            }
-          }, [renderTitle()])]);
-        },
-        "default": function _default() {
-          return state.content && (0,external_vue_namespaceObject.createVNode)("div", {
-            "class": resolveClassName('infobox-content'),
-            "style": {
-              textAlign: state.contentAlign
-            }
-          }, [renderContent()]);
-        },
-        footer: function footer() {
-          return (0,external_vue_namespaceObject.createVNode)("div", {
-            "class": _defineProperty(_defineProperty({}, resolveClassName('infobox-footer'), true), "is-position-".concat(state.footerAlign), state.footerAlign)
-          }, [state.confirmText && (0,external_vue_namespaceObject.createVNode)(button_namespaceObject["default"], {
-            "loading": isLoading.value,
-            "theme": state.confirmButtonTheme,
-            "onClick": handleConfirm
-          }, {
-            "default": function _default() {
-              return [state.confirmText];
-            }
-          }), state.cancelText && (0,external_vue_namespaceObject.createVNode)(button_namespaceObject["default"], {
-            "onClick": handleCancel
-          }, {
-            "default": function _default() {
-              return [state.cancelText];
-            }
-          })]);
-        },
-        close: function close() {
-          return (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Error, {
-            "onClick": handleCancel
-          }, null);
-        }
-      });
-    };
-  }
-}));
-;// CONCATENATED MODULE: ../../packages/info-box/src/info-box.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 infoboxInstance;
-var getInstance = function getInstance() {
-  if (!infoboxInstance) {
-    var container = document.createElement('div');
-    infoboxInstance = (0,external_vue_namespaceObject.createApp)(render_component);
-    document.body.appendChild(container);
-    infoboxInstance.mount(container);
-  }
-  return infoboxInstance._instance.exposed;
-};
-var InfoBox = function InfoBox(config) {
-  var instance = getInstance();
-  var configCache = Object.assign(genDefaultState(), config);
-  var show = function show() {
-    var _instance, _instance2;
-    (_instance = instance) === null || _instance === void 0 || _instance.update(configCache);
-    (_instance2 = instance) === null || _instance2 === void 0 || _instance2.show();
+    }
+  });
+  var beforeShow = function beforeShow() {
+    if (!app) {
+      document.body.append(container);
+      app = (0,external_vue_namespaceObject.createApp)(dialog);
+      dialogConfirm = app.mount(container);
+    }
   };
-  // 被调用时默认会弹出，当不需要默认弹出时需要明确传入 isShow: false 作为参数
-  if (config.isShow !== false) {
-    show();
+  var unmountApp = function unmountApp() {
+    var _app;
+    (_app = app) === null || _app === void 0 || _app.unmount();
+    app = null;
+  };
+  if (isShow.value) {
+    beforeShow();
   }
   return {
-    show: show,
+    show: function show() {
+      beforeShow();
+      isShow.value = true;
+    },
     hide: function hide() {
-      var _instance3;
-      (_instance3 = instance) === null || _instance3 === void 0 || _instance3.hide();
+      isShow.value = false;
+      unmountApp();
     },
     update: function update(config) {
-      var _instance4;
-      Object.assign(configCache, config);
-      (_instance4 = instance) === null || _instance4 === void 0 || _instance4.update(configCache);
+      var _dialogConfirm;
+      beforeShow();
+      (_dialogConfirm = dialogConfirm) === null || _dialogConfirm === void 0 || _dialogConfirm.update(config);
     },
     destroy: function destroy() {
-      instance = null;
+      container.remove();
+      unmountApp();
     }
   };
 };

package/lib/info-box/info-box.css

@@ -1,69 +1,13 @@
-.bk-infobox {
-  font-size: 12px;
+.bk-info-wrapper .bk-modal-wrapper {
+  width: 440px;
 }
-.bk-infobox .bk-modal-wrapper {
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.bk-infobox-header {
-  padding-top: 24px;
-}
-.bk-infobox-type {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.bk-infobox-icon {
-  width: 42px;
-  height: 42px;
-  font-size: 42px;
-}
-.bk-infobox-icon.success {
-  color: #2dcb56;
-}
-.bk-infobox-icon.warning {
-  color: #ff9c01;
-}
-.bk-infobox-icon.danger {
-  color: #ea3636;
-}
-.bk-infobox-icon.loading {
-  color: #3a84ff;
-}
-.bk-infobox-title {
-  padding-right: 24px;
-  padding-left: 24px;
-  margin-top: 24px;
-  font-size: 20px;
-  line-height: 32px;
-  color: #313238;
-}
-.bk-infobox-content {
-  padding-right: 24px;
-  padding-left: 24px;
+.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
   margin-top: 16px;
 }
-.bk-infobox-footer {
-  display: flex;
-  padding-right: 24px;
-  padding-bottom: 24px;
-  padding-left: 24px;
-  margin-top: 24px;
-  align-content: center;
-}
-.bk-infobox-footer.is-position-right {
-  justify-content: right;
-}
-.bk-infobox-footer.is-position-center {
-  justify-content: center;
-}
-.bk-infobox-footer.is-position-left {
-  justify-content: left;
-}
-.bk-infobox-footer .bk-button {
+.bk-info-wrapper .bk-dialog-footer button {
   min-width: 88px;
 }
-.bk-infobox-footer .bk-button ~ .bk-button {
-  margin-left: 8px;
+.bk-info-sub-title {
+  text-align: center;
+  word-break: break-all;
 }

package/lib/info-box/info-box.d.ts

@@ -1,34 +1,33 @@
 import { VNode } from 'vue';
-export interface Props {
+export interface ModalFuncProps {
     isShow?: boolean;
     width?: string | number;
-    extCls?: string | string[];
-    class?: string | string[];
+    height?: string | number;
+    'ext-cls': string | string[];
+    theme?: 'primary' | 'warning' | 'success' | 'danger';
     infoType?: 'success' | 'danger' | 'warning' | 'loading';
-    type?: 'success' | 'danger' | 'warning' | 'loading';
     title?: string | (() => VNode | string) | VNode;
     subTitle?: string | (() => VNode) | VNode;
-    content?: string | (() => VNode) | VNode;
+    confirmText?: string | (() => VNode) | VNode;
+    cancelText?: string | (() => VNode) | VNode;
+    onConfirm?: (...args: any[]) => any;
+    onClosed?: (...args: any[]) => any;
+    boundary?: HTMLElement;
+    draggable?: boolean;
+    maskClose?: boolean;
+    escClose?: boolean;
+    closeIcon?: boolean;
     headerAlign?: 'left' | 'center' | 'right';
     footerAlign?: 'left' | 'center' | 'right';
     contentAlign?: 'left' | 'center' | 'right';
+    dialogType?: 'show' | 'operation' | 'confirm';
     showMask?: boolean;
     quickClose?: boolean;
-    escClose?: boolean;
-    closeIcon?: boolean;
-    confirmText?: string | (() => VNode) | VNode;
-    theme?: 'primary' | 'warning' | 'success' | 'danger';
-    confirmButtonTheme?: 'primary' | 'warning' | 'success' | 'danger';
-    cancelText?: string | (() => VNode) | VNode;
-    beforeClose?: (action: string) => boolean | Promise<boolean>;
-    onConfirm?: () => void;
-    onCancel?: () => void;
-    onClose?: () => void;
 }
-declare const InfoBox: (config: Partial<Props>) => {
+declare const InfoBox: (config: Partial<ModalFuncProps>) => {
     show: () => void;
     hide: () => void;
-    update: (config: Partial<Props>) => void;
+    update: (config: Partial<ModalFuncProps>) => void;
     destroy: () => void;
 };
 export default InfoBox;