bkui-vue 0.0.2-modal-refactor.1 → 0.0.2-modal-refactor.3

package/lib/date-picker/use-calendar.d.ts

@@ -0,0 +1,35 @@
+import { type ComponentPublicInstance } from 'vue';
+import type { DatePickerPanelType, SelectionModeType } from './interface';
+export declare function useCalendar(props: any, slots: any, emit: any): {
+    resolveClassName: (cls: string) => string;
+    longWidthCls: import("vue").ComputedRef<string>;
+    fontSizeCls: import("vue").ComputedRef<string>;
+    hasHeader: import("vue").ComputedRef<boolean>;
+    hasFooter: import("vue").ComputedRef<boolean>;
+    hasShortcuts: import("vue").ComputedRef<boolean>;
+    hasConfirm: import("vue").ComputedRef<boolean>;
+    forceInputRerender: import("vue").Ref<number>;
+    internalValue: any;
+    localReadonly: import("vue").ComputedRef<any>;
+    ownPickerProps: import("vue").ComputedRef<any>;
+    allowCrossDayProp: import("vue").ComputedRef<any>;
+    displayValue: import("vue").ComputedRef<any>;
+    selectionMode: import("vue").Ref<SelectionModeType>;
+    inputRef: any;
+    setInputRef: (el: Element | ComponentPublicInstance | null) => void;
+    pickerDropdownRef: any;
+    reset: () => void;
+    handleClose: (e?: Event) => boolean;
+    handleFocus: (e: any) => void;
+    handleBlur: (e: any) => void;
+    showClose: import("vue").Ref<boolean>;
+    handleIconClick: () => void;
+    handleKeydown: (e: KeyboardEvent) => void;
+    handleInputChange: (e: any) => void;
+    handleInputInput: (e: any) => void;
+    handleClear: () => void;
+    panel: import("vue").ComputedRef<DatePickerPanelType>;
+    opened: import("vue").ComputedRef<any>;
+    handleInputMouseenter: () => void;
+    handleInputMouseleave: (_e: any) => void;
+};

package/lib/dialog/dialog.css

@@ -1,40 +1,40 @@
-.bk-modal-wrapper.bk-info-wrapper {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper {
   width: 440px;
 }
-.bk-modal-wrapper.bk-info-wrapper.normal {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.normal {
   width: 440px;
 }
-.bk-modal-wrapper.bk-info-wrapper.small {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.small {
   width: 400px;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-body {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-body {
   border-radius: 2px;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-dialog-header {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header {
   padding: 24px 24px 0;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-dialog-header .bk-dialog-title {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
   height: 27px;
   margin: 15px 0 10px;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-content {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content {
   height: 100%;
   max-height: 100%;
   min-height: 100%;
   padding: 0 50px 10px;
   word-break: break-all;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-content .bk-info-sub-title {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content .bk-info-sub-title {
   margin-bottom: 10px;
   text-align: center;
   word-break: break-all;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-footer {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer {
   padding: 0 65px 33px;
   background-color: #fff;
   border-top: none;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-footer .bk-dialog-footer button {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-footer button {
   min-width: 88px;
 }
 .bk-modal-ctx {

package/lib/dialog/dialog.d.ts

@@ -287,16 +287,16 @@ declare const _default: import("vue").DefineComponent<{
     theme: "success" | "warning" | "danger" | "primary";
     draggable: boolean;
     transfer: string | boolean | HTMLElement;
-    showMask: boolean;
-    multiInstance: boolean;
     direction: string;
     renderDirective: "show" | "if";
     quickClose: boolean;
     scrollable: boolean;
+    showMask: boolean;
     closeIcon: boolean;
     escClose: boolean;
     fullscreen: boolean;
     animateType: string;
+    multiInstance: boolean;
     confirmText: string;
     cancelText: string;
     prevText: string;

package/lib/dialog/dialog.variable.css

@@ -124,43 +124,43 @@
   --search-select-message-color: var(--danger-color);
   --search-select-menu-border-color: var(--disable-color);
 }
-.bk-modal-wrapper.bk-info-wrapper {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper {
   width: 440px;
 }
-.bk-modal-wrapper.bk-info-wrapper.normal {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.normal {
   width: 440px;
 }
-.bk-modal-wrapper.bk-info-wrapper.small {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.small {
   width: 400px;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-body {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-body {
   border-radius: 2px;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-dialog-header {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header {
   padding: 24px 24px 0;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-dialog-header .bk-dialog-title {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
   height: 27px;
   margin: 15px 0 10px;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-content {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content {
   height: 100%;
   max-height: 100%;
   min-height: 100%;
   padding: 0 50px 10px;
   word-break: break-all;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-content .bk-info-sub-title {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content .bk-info-sub-title {
   margin-bottom: 10px;
   text-align: center;
   word-break: break-all;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-footer {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer {
   padding: 0 65px 33px;
   background-color: #fff;
   border-top: none;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-footer .bk-dialog-footer button {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-footer button {
   min-width: 88px;
 }
 .bk-modal-ctx {

package/lib/dialog/index.d.ts

@@ -14,16 +14,16 @@ declare const BkDialog: {
             theme?: "success" | "warning" | "danger" | "primary";
             draggable?: boolean;
             transfer?: string | boolean | HTMLElement;
-            showMask?: boolean;
-            multiInstance?: boolean;
             direction?: string;
             renderDirective?: "show" | "if";
             quickClose?: boolean;
             scrollable?: boolean;
+            showMask?: boolean;
             closeIcon?: boolean;
             escClose?: boolean;
             fullscreen?: boolean;
             animateType?: string;
+            multiInstance?: boolean;
             confirmText?: string;
             cancelText?: string;
             prevText?: string;
@@ -267,16 +267,16 @@ declare const BkDialog: {
             theme: "success" | "warning" | "danger" | "primary";
             draggable: boolean;
             transfer: string | boolean | HTMLElement;
-            showMask: boolean;
-            multiInstance: boolean;
             direction: string;
             renderDirective: "show" | "if";
             quickClose: boolean;
             scrollable: boolean;
+            showMask: boolean;
             closeIcon: boolean;
             escClose: boolean;
             fullscreen: boolean;
             animateType: string;
+            multiInstance: boolean;
             confirmText: string;
             cancelText: string;
             prevText: string;
@@ -628,16 +628,16 @@ declare const BkDialog: {
     theme: "success" | "warning" | "danger" | "primary";
     draggable: boolean;
     transfer: string | boolean | HTMLElement;
-    showMask: boolean;
-    multiInstance: boolean;
     direction: string;
     renderDirective: "show" | "if";
     quickClose: boolean;
     scrollable: boolean;
+    showMask: boolean;
     closeIcon: boolean;
     escClose: boolean;
     fullscreen: boolean;
     animateType: string;
+    multiInstance: boolean;
     confirmText: string;
     cancelText: string;
     prevText: string;

package/lib/info-box/index.js

@@ -998,19 +998,13 @@ function info_box_objectSpread(target) { for (var i = 1; i < arguments.length; i
 
 var InfoBox = function InfoBox(config) {
   var container = document.createElement('div');
-  var isShow = (0,external_vue_namespaceObject.ref)(false);
   var modalFuncProps = (0,external_vue_namespaceObject.shallowRef)(config);
+  var isShow = (0,external_vue_namespaceObject.ref)(modalFuncProps.value.isShow !== false);
+  var app;
   var dialog = (0,external_vue_namespaceObject.defineComponent)({
     name: 'DialogConfirm',
     setup: function setup(_props, _ref) {
       var expose = _ref.expose;
-      (0,external_vue_namespaceObject.onMounted)(function () {
-        var dom = document.activeElement || document.body;
-        dom.blur();
-        if (modalFuncProps.value.isShow !== false) {
-          isShow.value = true;
-        }
-      });
       var onClosed = /*#__PURE__*/function () {
         var _ref2 = _asyncToGenerator( /*#__PURE__*/regenerator_default().mark(function _callee() {
           var _modalFuncProps$value;
@@ -1093,34 +1087,51 @@ var InfoBox = function InfoBox(config) {
         }
         return subTitleBox;
       };
+      var onHidden = function onHidden() {
+        container.remove();
+      };
       return function () {
         return (0,external_vue_namespaceObject.createVNode)(src_dialog, info_box_objectSpread(info_box_objectSpread({
           "class": resolveClassName('info-wrapper'),
           headerAlign: 'center',
           footerAlign: 'center',
-          transfer: true,
           fullscreen: false
         }, modalFuncProps.value), {}, {
           isShow: isShow.value,
+          transfer: false,
           onClosed: onClosed,
-          onConfirm: onConfirm
-        }), getContent());
+          onConfirm: onConfirm,
+          onHidden: onHidden
+        }), getContent);
       };
     }
   });
-  var app = (0,external_vue_namespaceObject.createApp)(dialog).mount(container);
+  var beforeShow = function beforeShow() {
+    if (!app) {
+      document.body.append(container);
+      app = (0,external_vue_namespaceObject.createApp)(dialog).mount(container);
+    }
+  };
+  if (isShow.value) {
+    beforeShow();
+  }
   return {
     show: function show() {
+      beforeShow();
       isShow.value = true;
     },
     hide: function hide() {
       isShow.value = false;
     },
     update: function update(config) {
-      app.update(config);
+      var _app;
+      beforeShow();
+      (_app = app) === null || _app === void 0 ? void 0 : _app.update(config);
     },
     destroy: function destroy() {
-      app.unmount();
+      var _app2;
+      container.remove();
+      (_app2 = app) === null || _app2 === void 0 ? void 0 : _app2.unmount();
       app = null;
     }
   };

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

@@ -1,39 +1,39 @@
-.bk-modal-wrapper.bk-info-wrapper {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper {
   width: 440px;
 }
-.bk-modal-wrapper.bk-info-wrapper.normal {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.normal {
   width: 440px;
 }
-.bk-modal-wrapper.bk-info-wrapper.small {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.small {
   width: 400px;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-body {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-body {
   border-radius: 2px;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-dialog-header {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header {
   padding: 24px 24px 0;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-dialog-header .bk-dialog-title {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
   height: 27px;
   margin: 15px 0 10px;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-content {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content {
   height: 100%;
   max-height: 100%;
   min-height: 100%;
   padding: 0 50px 10px;
   word-break: break-all;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-content .bk-info-sub-title {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content .bk-info-sub-title {
   margin-bottom: 10px;
   text-align: center;
   word-break: break-all;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-footer {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer {
   padding: 0 65px 33px;
   background-color: #fff;
   border-top: none;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-footer .bk-dialog-footer button {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-footer button {
   min-width: 88px;
 }

package/lib/info-box/info-box.less

@@ -1,52 +1,55 @@
 @import '../styles/themes/themes.less';
-.@{bk-prefix}-modal-wrapper {
+.@{bk-prefix}-modal-ctx {
   &.@{bk-prefix}-info-wrapper {
-    width: 440px;
-
-    &.normal {
+    .@{bk-prefix}-modal-wrapper {
       width: 440px;
-    }
 
-    &.small {
-      width: 400px;
-    }
+      &.normal {
+        width: 440px;
+      }
 
-    .@{bk-prefix}-modal-body {
-      border-radius: 2px;
-    }
+      &.small {
+        width: 400px;
+      }
 
-    .@{bk-prefix}-dialog-header {
-      padding: 24px 24px 0;
+      .@{bk-prefix}-modal-body {
+        border-radius: 2px;
+      }
 
-      .@{bk-prefix}-dialog-title {
-        height: 27px;
-        margin: 15px 0 10px;
+      .@{bk-prefix}-dialog-header {
+        padding: 24px 24px 0;
+
+        .@{bk-prefix}-dialog-title {
+          height: 27px;
+          margin: 15px 0 10px;
+        }
       }
-    }
 
-    .@{bk-prefix}-modal-content {
-      height: 100%;
-      max-height: 100%;
-      min-height: 100%;
-      padding: 0 50px 10px;
-      word-break: break-all;
-      .@{bk-prefix}-info-sub-title {
-        margin-bottom: 10px;
-        text-align: center;
+      .@{bk-prefix}-modal-content {
+        height: 100%;
+        max-height: 100%;
+        min-height: 100%;
+        padding: 0 50px 10px;
         word-break: break-all;
+        .@{bk-prefix}-info-sub-title {
+          margin-bottom: 10px;
+          text-align: center;
+          word-break: break-all;
+        }
       }
-    }
 
-    .@{bk-prefix}-modal-footer {
-      padding: 0 65px 33px;
-      background-color: #fff;
-      border-top: none;
+      .@{bk-prefix}-modal-footer {
+        padding: 0 65px 33px;
+        background-color: #fff;
+        border-top: none;
 
-      .@{bk-prefix}-dialog-footer {
-        button {
-          min-width: 88px;
+        .@{bk-prefix}-dialog-footer {
+          button {
+            min-width: 88px;
+          }
         }
       }
     }
+
   }
 }

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

@@ -124,42 +124,42 @@
   --search-select-message-color: var(--danger-color);
   --search-select-menu-border-color: var(--disable-color);
 }
-.bk-modal-wrapper.bk-info-wrapper {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper {
   width: 440px;
 }
-.bk-modal-wrapper.bk-info-wrapper.normal {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.normal {
   width: 440px;
 }
-.bk-modal-wrapper.bk-info-wrapper.small {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.small {
   width: 400px;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-body {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-body {
   border-radius: 2px;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-dialog-header {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header {
   padding: 24px 24px 0;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-dialog-header .bk-dialog-title {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
   height: 27px;
   margin: 15px 0 10px;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-content {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content {
   height: 100%;
   max-height: 100%;
   min-height: 100%;
   padding: 0 50px 10px;
   word-break: break-all;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-content .bk-info-sub-title {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content .bk-info-sub-title {
   margin-bottom: 10px;
   text-align: center;
   word-break: break-all;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-footer {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer {
   padding: 0 65px 33px;
   background-color: #fff;
   border-top: none;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-footer .bk-dialog-footer button {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-footer button {
   min-width: 88px;
 }

package/lib/modal/index.d.ts

@@ -14,16 +14,16 @@ declare const BkModal: {
             isShow?: boolean;
             draggable?: boolean;
             transfer?: string | boolean | HTMLElement;
-            showMask?: boolean;
-            multiInstance?: boolean;
             direction?: string;
             renderDirective?: "show" | "if";
             quickClose?: boolean;
             scrollable?: boolean;
+            showMask?: boolean;
             closeIcon?: boolean;
             escClose?: boolean;
             fullscreen?: boolean;
             animateType?: string;
+            multiInstance?: boolean;
             class?: unknown;
             style?: unknown;
             ref?: import("vue").VNodeRef;
@@ -219,16 +219,16 @@ declare const BkModal: {
             isShow: boolean;
             draggable: boolean;
             transfer: string | boolean | HTMLElement;
-            showMask: boolean;
-            multiInstance: boolean;
             direction: string;
             renderDirective: "show" | "if";
             quickClose: boolean;
             scrollable: boolean;
+            showMask: boolean;
             closeIcon: boolean;
             escClose: boolean;
             fullscreen: boolean;
             animateType: string;
+            multiInstance: boolean;
         }, {}, string, {}> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -496,16 +496,16 @@ declare const BkModal: {
     isShow: boolean;
     draggable: boolean;
     transfer: string | boolean | HTMLElement;
-    showMask: boolean;
-    multiInstance: boolean;
     direction: string;
     renderDirective: "show" | "if";
     quickClose: boolean;
     scrollable: boolean;
+    showMask: boolean;
     closeIcon: boolean;
     escClose: boolean;
     fullscreen: boolean;
     animateType: string;
+    multiInstance: boolean;
 }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("vue").Plugin<any[]> & Readonly<{
     propsMixin: {
         isShow: import("vue-types").VueTypeValidableDef<boolean> & {

package/lib/modal/index.js

@@ -36,7 +36,7 @@ __webpack_require__.d(__webpack_exports__, {
 ;// CONCATENATED MODULE: external "../shared"
 var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var y = x => () => x
-const external_shared_namespaceObject = x({ ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.PropTypes, ["bkZIndexManager"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.bkZIndexManager, ["dialogTypeUnion"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.dialogTypeUnion, ["mask"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.mask, ["renderDirectiveType"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.renderDirectiveType, ["withInstallProps"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.withInstallProps });
+const external_shared_namespaceObject = x({ ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.PropTypes, ["bkZIndexManager"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.bkZIndexManager, ["dialogTypeUnion"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.dialogTypeUnion, ["isElement"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.isElement, ["mask"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.mask, ["renderDirectiveType"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.renderDirectiveType, ["withInstallProps"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.withInstallProps });
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -257,13 +257,24 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
       resolveClassName = _usePrefix.resolveClassName;
     var resolveClosetModal = function resolveClosetModal() {
       var _refRoot$value;
+      if (enableTeleport.value) {
+        if (typeof teleportTo.value === 'string') {
+          var target = document.querySelector(teleportTo.value);
+          target === null || target === void 0 ? void 0 : target.appendChild(refRoot.value);
+          return;
+        }
+        if ((0,external_shared_namespaceObject.isElement)(teleportTo.value)) {
+          teleportTo.value.appendChild(refRoot.value);
+          return;
+        }
+      }
       var className = ".".concat(resolveClassName('modal-ctx'));
       var parentNode = (_refRoot$value = refRoot.value) === null || _refRoot$value === void 0 || (_refRoot$value = _refRoot$value.parentElement) === null || _refRoot$value === void 0 ? void 0 : _refRoot$value.closest(className);
       if (parentNode) {
         enableTeleport.value = true;
         teleportTo.value = 'body';
-        var target = document.querySelector(teleportTo.value);
-        target === null || target === void 0 ? void 0 : target.appendChild(refRoot.value);
+        var _target = document.querySelector(teleportTo.value);
+        _target === null || _target === void 0 ? void 0 : _target.appendChild(refRoot.value);
       }
     };
     var fullscreenStyle = (0,external_vue_namespaceObject.computed)(function () {
@@ -303,6 +314,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
       closeTimer = setTimeout(function () {
         // 直接设为false会失去离开的动画效果，这里延迟设置
         ctx.emit('hidden'); // 为false直接触发hidden事件，在上层有200ms的延时
+        if (enableTeleport.value) {
+          var _refRoot$value2;
+          (_refRoot$value2 = refRoot.value) === null || _refRoot$value2 === void 0 ? void 0 : _refRoot$value2.remove();
+        }
       }, 250);
     }, {
       immediate: true

package/lib/modal/modal.css

@@ -1,40 +1,40 @@
-.bk-modal-wrapper.bk-info-wrapper {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper {
   width: 440px;
 }
-.bk-modal-wrapper.bk-info-wrapper.normal {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.normal {
   width: 440px;
 }
-.bk-modal-wrapper.bk-info-wrapper.small {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper.small {
   width: 400px;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-body {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-body {
   border-radius: 2px;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-dialog-header {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header {
   padding: 24px 24px 0;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-dialog-header .bk-dialog-title {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
   height: 27px;
   margin: 15px 0 10px;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-content {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content {
   height: 100%;
   max-height: 100%;
   min-height: 100%;
   padding: 0 50px 10px;
   word-break: break-all;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-content .bk-info-sub-title {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-content .bk-info-sub-title {
   margin-bottom: 10px;
   text-align: center;
   word-break: break-all;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-footer {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer {
   padding: 0 65px 33px;
   background-color: #fff;
   border-top: none;
 }
-.bk-modal-wrapper.bk-info-wrapper .bk-modal-footer .bk-dialog-footer button {
+.bk-modal-ctx.bk-info-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-footer button {
   min-width: 88px;
 }
 .bk-modal-ctx {

package/lib/modal/modal.d.ts

@@ -215,15 +215,15 @@ declare const _default: import("vue").DefineComponent<{
     isShow: boolean;
     draggable: boolean;
     transfer: string | boolean | HTMLElement;
-    showMask: boolean;
-    multiInstance: boolean;
     direction: string;
     renderDirective: "show" | "if";
     quickClose: boolean;
     scrollable: boolean;
+    showMask: boolean;
     closeIcon: boolean;
     escClose: boolean;
     fullscreen: boolean;
     animateType: string;
+    multiInstance: boolean;
 }, {}>;
 export default _default;