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

package/lib/dialog/dialog.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,47 +164,65 @@
   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;
+}
+.bk-dialog {
+  font-size: 14px;
+}
+.bk-dialog.is-fullscreen {
+  top: 0;
+  right: 0 ;
+  bottom: 0;
+  left: 0;
+  transform: translate(0, 0);
+}
+.bk-dialog.is-fullscreen .bk-modal-wrapper {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transform: translate(0, 0);
+}
 .bk-dialog-wrapper .bk-modal-wrapper {
   position: relative;
 }
@@ -236,41 +236,37 @@
 .bk-dialog-wrapper .bk-modal-wrapper.multi-instance {
   position: absolute;
 }
-.bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-tool {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  height: 18px;
+.bk-dialog-wrapper .bk-modal-wrapper.fullscreen .bk-modal-content {
+  max-height: calc(100vh - 137px);
 }
-.bk-dialog-wrapper .bk-modal-wrapper .move {
-  cursor: move;
+.bk-dialog-wrapper .bk-modal-wrapper.fullscreen.no-footer {
+  max-height: calc(100vh - 79px);
 }
-.bk-dialog-wrapper .bk-modal-wrapper .content-dragging {
-  user-select: none;
+.bk-dialog-wrapper .bk-modal-wrapper.no-footer .bk-modal-body {
+  padding-bottom: 0;
 }
-.bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header {
+.bk-dialog-header {
   padding: 16px 24px 0;
   font-size: 20px;
   line-height: 1;
 }
-.bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header .bk-header-icon {
+.bk-dialog-header-icon {
   display: flex;
   justify-content: center;
 }
-.bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon {
+.bk-dialog-header-icon .bk-info-icon {
   font-size: 48px;
 }
-.bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon.success {
+.bk-dialog-header-icon .bk-info-icon.success {
   color: #2dcb56;
 }
-.bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon.warning {
+.bk-dialog-header-icon .bk-info-icon.warning {
   color: #ff9c01;
 }
-.bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header .bk-header-icon .bk-info-icon.danger {
+.bk-dialog-header-icon .bk-info-icon.danger {
   color: #ea3636;
 }
-.bk-dialog-wrapper .bk-modal-wrapper .bk-dialog-header .bk-dialog-title {
+.bk-dialog-title {
   display: inline-block;
   width: 100%;
   overflow: hidden;
@@ -278,58 +274,38 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.bk-dialog-wrapper .bk-modal-wrapper .bk-modal-content {
-  height: calc(100% - 79px);
+.bk-dialog-tool {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 18px;
+}
+.bk-dialog-tool.move {
+  cursor: move;
+}
+.bk-dialog-tool.content-dragging {
+  user-select: none;
+}
+.bk-dialog-content {
   max-height: calc(100vh - 300px);
-  min-height: 141px;
   padding: 0 24px;
   margin-top: 16px;
   margin-bottom: 24px;
-  font-size: 14px;
-  line-height: 1.5;
   color: #63656e;
 }
-.bk-dialog-wrapper .bk-modal-wrapper.fullscreen .bk-modal-content {
-  max-height: calc(100vh - 137px);
-}
-.bk-dialog-wrapper .bk-modal-wrapper.fullscreen.no-footer {
-  max-height: calc(100vh - 79px);
-}
-.bk-dialog-wrapper .bk-modal-wrapper.no-footer .bk-modal-body {
-  padding-bottom: 0;
-}
-.bk-dialog-wrapper .bk-modal-wrapper .bk-modal-footer {
-  padding: 0 24px;
-  margin: 24px 0 ;
+.bk-dialog-footer {
+  padding: 8px 24px;
   background-color: #fafbfd;
   border-top: 1px solid #dcdee5;
-  border-radius: 2px;
 }
-.bk-dialog-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-perv {
+.bk-dialog-footer .bk-dialog-perv {
   float: left;
   margin-right: 8px;
 }
-.bk-dialog-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-next {
+.bk-dialog-footer .bk-dialog-next {
   float: left;
 }
-.bk-dialog-wrapper .bk-modal-wrapper .bk-modal-footer .bk-dialog-cancel {
+.bk-dialog-footer .bk-dialog-cancel {
   margin-left: 8px;
 }
-.bk-dialog-wrapper .bk-modal-wrapper .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-dialog-wrapper .bk-modal-wrapper .bk-modal-close:hover {
-  background: #f0f1f5;
-}

package/lib/dialog/index.d.ts

@@ -1,11 +1,5 @@
 declare const BkDialog: {
     new (...args: any[]): import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
-        width: import("vue-types").VueTypeDef<string | number> & {
-            default: string | number;
-        };
-        height: import("vue-types").VueTypeDef<string | number> & {
-            default: string | number;
-        };
         confirmText: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         };
@@ -51,6 +45,12 @@ declare const BkDialog: {
         } & {
             default: boolean;
         };
+        width: import("vue-types").VueTypeDef<string | number> & {
+            default: string | number;
+        };
+        height: import("vue-types").VueTypeDef<string | number> & {
+            default: string | number;
+        };
         extCls: (import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         }) | (import("vue-types").VueTypeValidableDef<unknown[]> & {
@@ -101,6 +101,8 @@ declare const BkDialog: {
         };
         direction: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
+        } & {
+            default: string;
         };
         animateType: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
@@ -150,7 +152,6 @@ declare const BkDialog: {
         moveHandler: (e: any) => boolean;
         handlePrevStep: () => void;
         handleNextStep: () => void;
-        hasFooter: import("vue").ComputedRef<boolean>;
         isModalShow: import("vue").Ref<boolean>;
         localConfirmText: import("vue").ComputedRef<string>;
         localCancelText: import("vue").ComputedRef<string>;
@@ -158,12 +159,6 @@ declare const BkDialog: {
         localNextText: import("vue").ComputedRef<string>;
         resolveClassName: (cls: string) => string;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("prev" | "next" | "confirm" | "closed" | "update:isShow" | "value-change")[], import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
-        width: import("vue-types").VueTypeDef<string | number> & {
-            default: string | number;
-        };
-        height: import("vue-types").VueTypeDef<string | number> & {
-            default: string | number;
-        };
         confirmText: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         };
@@ -209,6 +204,12 @@ declare const BkDialog: {
         } & {
             default: boolean;
         };
+        width: import("vue-types").VueTypeDef<string | number> & {
+            default: string | number;
+        };
+        height: import("vue-types").VueTypeDef<string | number> & {
+            default: string | number;
+        };
         extCls: (import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         }) | (import("vue-types").VueTypeValidableDef<unknown[]> & {
@@ -259,6 +260,8 @@ declare const BkDialog: {
         };
         direction: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
+        } & {
+            default: string;
         };
         animateType: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
@@ -307,12 +310,12 @@ declare const BkDialog: {
         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[];
@@ -333,12 +336,6 @@ declare const BkDialog: {
         M: {};
         Defaults: {};
     }, Readonly<import("vue").ExtractPropTypes<{
-        width: import("vue-types").VueTypeDef<string | number> & {
-            default: string | number;
-        };
-        height: import("vue-types").VueTypeDef<string | number> & {
-            default: string | number;
-        };
         confirmText: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         };
@@ -384,6 +381,12 @@ declare const BkDialog: {
         } & {
             default: boolean;
         };
+        width: import("vue-types").VueTypeDef<string | number> & {
+            default: string | number;
+        };
+        height: import("vue-types").VueTypeDef<string | number> & {
+            default: string | number;
+        };
         extCls: (import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         }) | (import("vue-types").VueTypeValidableDef<unknown[]> & {
@@ -434,6 +437,8 @@ declare const BkDialog: {
         };
         direction: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
+        } & {
+            default: string;
         };
         animateType: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
@@ -483,7 +488,6 @@ declare const BkDialog: {
         moveHandler: (e: any) => boolean;
         handlePrevStep: () => void;
         handleNextStep: () => void;
-        hasFooter: import("vue").ComputedRef<boolean>;
         isModalShow: import("vue").Ref<boolean>;
         localConfirmText: import("vue").ComputedRef<string>;
         localCancelText: import("vue").ComputedRef<string>;
@@ -504,12 +508,12 @@ declare const BkDialog: {
         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[];
@@ -527,12 +531,6 @@ declare const BkDialog: {
     __isTeleport?: never;
     __isSuspense?: never;
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-    width: import("vue-types").VueTypeDef<string | number> & {
-        default: string | number;
-    };
-    height: import("vue-types").VueTypeDef<string | number> & {
-        default: string | number;
-    };
     confirmText: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
@@ -578,6 +576,12 @@ declare const BkDialog: {
     } & {
         default: boolean;
     };
+    width: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
     extCls: (import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     }) | (import("vue-types").VueTypeValidableDef<unknown[]> & {
@@ -628,6 +632,8 @@ declare const BkDialog: {
     };
     direction: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
+    } & {
+        default: string;
     };
     animateType: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -677,7 +683,6 @@ declare const BkDialog: {
     moveHandler: (e: any) => boolean;
     handlePrevStep: () => void;
     handleNextStep: () => void;
-    hasFooter: import("vue").ComputedRef<boolean>;
     isModalShow: import("vue").Ref<boolean>;
     localConfirmText: import("vue").ComputedRef<string>;
     localCancelText: import("vue").ComputedRef<string>;
@@ -698,12 +703,12 @@ declare const BkDialog: {
     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[];