bkui-vue 1.0.3-beta.68 → 1.0.3-beta.68.dialog.1

package/lib/info-box/index.js

@@ -2,9 +2,13 @@ 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_dialog_497cb4c3__ from "../dialog";
-import "../dialog/dialog.less";
+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";
 /******/ var __webpack_modules__ = ({
 
 /***/ 7609:
@@ -425,6 +429,10 @@ __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({ ["Fragment"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.Fragment, ["createApp"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createApp, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["h"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.h, ["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";
@@ -504,28 +512,38 @@ 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 "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 "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 "../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 "../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
+;// 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
 
 
 
-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
@@ -556,178 +574,315 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 
 
-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:
+
+
+
+
+var genDefaultState = function genDefaultState() {
+  return {
+    isShow: false,
+    width: 400,
+    extCls: undefined,
+    "class": undefined,
+    infoType: undefined,
+    type: undefined,
+    title: undefined,
+    subTitle: undefined,
+    content: undefined,
+    footer: undefined,
+    headerAlign: 'center',
+    contentAlign: 'center',
+    footerAlign: 'center',
+    showMask: true,
+    quickClose: false,
+    escClose: false,
+    closeIcon: true,
+    confirmText: '确定',
+    theme: undefined,
+    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) {
                 _context.next = 7;
                 break;
-              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;
+              }
+              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();
           }
+        }, _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;
         }
-        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));
+        // 配置项变更 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;
+        }
+      }
+    });
+    return function () {
+      var renderIcon = function renderIcon() {
+        if (!state.type) {
+          return null;
         }
-        return subTitleBox;
+        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]]);
       };
-      var onHidden = function onHidden() {
-        beforeHiddenFn.forEach(function (fn) {
-          return fn();
-        });
-        beforeHiddenFn.length = 0;
-        unmountApp();
-        container.remove();
+      var renderTitle = function renderTitle() {
+        if ((0,isFunction_namespaceObject["default"])(state.title)) {
+          return state.title();
+        }
+        return state.title;
       };
-      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);
+      var renderContent = function renderContent() {
+        if ((0,isFunction_namespaceObject["default"])(state.content)) {
+          return state.content();
+        }
+        return state.content;
       };
-    }
-  });
-  var beforeShow = function beforeShow() {
-    if (!app) {
-      document.body.append(container);
-      app = (0,external_vue_namespaceObject.createApp)(dialog);
-      dialogConfirm = app.mount(container);
-    }
-  };
-  var unmountApp = function unmountApp() {
-    var _app;
-    (_app = app) === null || _app === void 0 || _app.unmount();
-    app = null;
+      var renderFooter = function renderFooter() {
+        if ((0,isFunction_namespaceObject["default"])(state.footer)) {
+          return state.footer();
+        }
+        if (state.footer) {
+          return state.footer;
+        }
+        return (0,external_vue_namespaceObject.createVNode)(external_vue_namespaceObject.Fragment, null, [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];
+          }
+        })]);
+      };
+      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)
+          }, [renderFooter()]);
+        },
+        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 appRef = (0,external_vue_namespaceObject.ref)();
+var getInstance = function getInstance() {
+  if (!appRef.value) {
+    var container = document.createElement('div');
+    var infoboxInstance = (0,external_vue_namespaceObject.createApp)({
+      render: function render() {
+        return (0,external_vue_namespaceObject.h)(render_component, {
+          ref: appRef
+        });
+      }
+    });
+    document.body.appendChild(container);
+    infoboxInstance.mount(container);
+  }
+  return appRef.value;
+};
+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();
   };
-  if (isShow.value) {
-    beforeShow();
+  // 被调用时默认会弹出，当不需要默认弹出时需要明确传入 isShow: false 作为参数
+  if (config.isShow !== false) {
+    show();
   }
   return {
-    show: function show() {
-      beforeShow();
-      isShow.value = true;
-    },
+    show: show,
     hide: function hide() {
-      isShow.value = false;
-      unmountApp();
+      var _instance3;
+      (_instance3 = instance) === null || _instance3 === void 0 || _instance3.hide();
     },
     update: function update(config) {
-      var _dialogConfirm;
-      beforeShow();
-      (_dialogConfirm = dialogConfirm) === null || _dialogConfirm === void 0 || _dialogConfirm.update(config);
+      var _instance4;
+      Object.assign(configCache, config);
+      (_instance4 = instance) === null || _instance4 === void 0 || _instance4.update(configCache);
     },
     destroy: function destroy() {
-      container.remove();
-      unmountApp();
+      instance = null;
     }
   };
 };

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

@@ -1,13 +1,69 @@
-.bk-info-wrapper .bk-modal-wrapper {
-  width: 440px;
+.bk-infobox {
+  font-size: 12px;
 }
-.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
+.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;
   margin-top: 16px;
 }
-.bk-info-wrapper .bk-dialog-footer button {
+.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 {
   min-width: 88px;
 }
-.bk-info-sub-title {
-  text-align: center;
-  word-break: break-all;
+.bk-infobox-footer .bk-button ~ .bk-button {
+  margin-left: 8px;
 }