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

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;
+}

package/lib/modal/modal.d.ts

@@ -1,3 +1,6 @@
+import { type ExtractPropTypes } from 'vue';
+import { propsMixin } from './props.mixin';
+export type ModalProps = Readonly<ExtractPropTypes<typeof propsMixin>>;
 declare const _default: import("vue").DefineComponent<{
     isShow: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
@@ -60,6 +63,8 @@ declare const _default: import("vue").DefineComponent<{
     };
     direction: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
+    } & {
+        default: string;
     };
     title: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -93,27 +98,25 @@ declare const _default: import("vue").DefineComponent<{
     top: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
+    hiddenDelay: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
 }, {
+    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", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    resolveClassName: (cls: string) => string;
+    close: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "hidden" | "shown" | "quickClose" | "quick-close")[], "close" | "hidden" | "shown" | "quickClose" | "quick-close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     isShow: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -175,6 +178,8 @@ declare const _default: import("vue").DefineComponent<{
     };
     direction: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
+    } & {
+        default: string;
     };
     title: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -208,12 +213,17 @@ declare const _default: import("vue").DefineComponent<{
     top: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
+    hiddenDelay: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
 }>> & {
     onClose?: (...args: any[]) => any;
     onHidden?: (...args: any[]) => any;
     onShown?: (...args: any[]) => any;
-    "onQuick-close"?: (...args: any[]) => any;
     onQuickClose?: (...args: any[]) => any;
+    "onQuick-close"?: (...args: any[]) => any;
 }, {
     title: string;
     width: string | number;
@@ -227,14 +237,15 @@ declare const _default: import("vue").DefineComponent<{
     transfer: string | boolean | HTMLElement;
     direction: string;
     renderDirective: "show" | "if";
-    quickClose: boolean;
     scrollable: boolean;
     showMask: boolean;
     closeIcon: boolean;
     escClose: boolean;
     fullscreen: boolean;
+    quickClose: boolean;
     animateType: string;
     multiInstance: boolean;
     bodyClass: string | unknown[];
+    hiddenDelay: number;
 }, {}>;
 export default _default;

package/lib/modal/modal.less

@@ -4,78 +4,78 @@
 .@{bk-prefix}-modal-ctx {
   top: 0px;
   left: 0px;
-
   width: 100%;
   height: 100%;
   pointer-events: auto;
 
   &.--show {
     position: fixed;
+    .@{bk-prefix}-modal-ctx-mask {
+      display: block;
+    }
   }
 
   &.--hide {
     display: none;
   }
-
-  .@{bk-prefix}-modal-ctx-mask {
-    top: 0;
-    left: 0;
-    display: none;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0,0,0,.6);
-
-    &.--show {
-      position: fixed;
-      display: inherit;
-    }
-  }
 }
 
-
+.@{bk-prefix}-modal-ctx-mask {
+  top: 0;
+  left: 0;
+  display: none;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0,0,0,.6);
+}
 
 .@{bk-prefix}-modal-wrapper {
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 480px;
   border-radius: 2px;
-  // background: #fff;
   transform: translate(-50%, -50%);
 
-  .@{bk-prefix}-modal-outside {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-  }
 
-  &.normal {
-    width: 480px;
-    height: 240px;
-  }
+}
 
-  &.small {
-    width: 400px;
-    height: 200px;
-  }
+.@{bk-prefix}-modal-outside {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
 
-  &.medium {
-    width: 640px;
-    height: 400px;
-  }
+.@{bk-prefix}-modal-body {
+  height: 100%;
+  overflow: hidden;
+  background: #fff;
+  border-radius: 2px;
+  box-shadow: 0 4px 12px rgba(0,0,0,.15);
+}
 
-  &.large {
-    width: 960px;
-    height: 720px;
-  }
+.@{bk-prefix}-modal-body {
+  overflow: auto;
+}
 
-  .@{bk-prefix}-modal-body {
-    height: 100%;
-    overflow: hidden;
-    background: #fff;
-    box-shadow: 0 4px 12px rgba(0,0,0,.15);
+.@{bk-prefix}-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: .15s;
+
+  &:hover {
+    background: #f0f1f5;
   }
 }
 

package/lib/modal/modal.variable.css

@@ -127,40 +127,19 @@
   --select-active-color: #e1ecff;
   --select-hover-color: #f5f7fa;
 }
-.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;
@@ -171,10 +150,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;
@@ -182,44 +164,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;
+}

package/lib/modal/props.mixin.d.ts

@@ -60,6 +60,8 @@ export declare const propsMixin: {
     };
     direction: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
+    } & {
+        default: string;
     };
     title: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -93,4 +95,9 @@ export declare const propsMixin: {
     top: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
+    hiddenDelay: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
 };

package/lib/shared/index.js

@@ -1336,6 +1336,9 @@ var isFullScreenContainsElement = function isFullScreenContainsElement(target) {
  * @returns
  */
 var getFullscreenRoot = function getFullscreenRoot(selector) {
+  if (!selector) {
+    return 'body';
+  }
   if (helper_isElement(selector)) {
     if (isFullScreenContainsElement(selector)) {
       return selector;
@@ -1353,7 +1356,7 @@ var getFullscreenRoot = function getFullscreenRoot(selector) {
     }
     return document.fullscreenElement;
   }
-  return document.body;
+  return helper_isElement(document.body) ? document.body : 'body';
 };
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js
 function _assertThisInitialized(self) {

package/lib/sideslider/index.d.ts

@@ -96,6 +96,11 @@ declare const BkSideslider: {
         top: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         };
+        hiddenDelay: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
     }>> & {
         onHidden?: (...args: any[]) => any;
         onShown?: (...args: any[]) => any;
@@ -199,6 +204,11 @@ declare const BkSideslider: {
         top: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         };
+        hiddenDelay: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
     }>> & {
         onHidden?: (...args: any[]) => any;
         onShown?: (...args: any[]) => any;
@@ -218,15 +228,16 @@ declare const BkSideslider: {
         transfer: string | boolean | HTMLElement;
         direction: string;
         renderDirective: "show" | "if";
-        quickClose: boolean;
         scrollable: boolean;
         showMask: boolean;
         closeIcon: boolean;
         escClose: boolean;
         fullscreen: boolean;
+        quickClose: boolean;
         animateType: string;
         multiInstance: boolean;
         bodyClass: string | unknown[];
+        hiddenDelay: number;
     }, true, {}, {}, {
         P: {};
         B: {};
@@ -331,6 +342,11 @@ declare const BkSideslider: {
         top: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         };
+        hiddenDelay: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
     }>> & {
         onHidden?: (...args: any[]) => any;
         onShown?: (...args: any[]) => any;
@@ -350,15 +366,16 @@ declare const BkSideslider: {
         transfer: string | boolean | HTMLElement;
         direction: string;
         renderDirective: "show" | "if";
-        quickClose: boolean;
         scrollable: boolean;
         showMask: boolean;
         closeIcon: boolean;
         escClose: boolean;
         fullscreen: boolean;
+        quickClose: boolean;
         animateType: string;
         multiInstance: boolean;
         bodyClass: string | unknown[];
+        hiddenDelay: number;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -460,6 +477,11 @@ declare const BkSideslider: {
     top: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
+    hiddenDelay: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
 }>> & {
     onHidden?: (...args: any[]) => any;
     onShown?: (...args: any[]) => any;
@@ -479,14 +501,15 @@ declare const BkSideslider: {
     transfer: string | boolean | HTMLElement;
     direction: string;
     renderDirective: "show" | "if";
-    quickClose: boolean;
     scrollable: boolean;
     showMask: boolean;
     closeIcon: boolean;
     escClose: boolean;
     fullscreen: boolean;
+    quickClose: boolean;
     animateType: string;
     multiInstance: boolean;
     bodyClass: string | unknown[];
+    hiddenDelay: number;
 }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("vue").Plugin<any[]>;
 export default BkSideslider;