bkui-vue 0.0.2-beta.13 → 0.0.2-beta.130

package/lib/message/message.css

@@ -138,10 +138,12 @@
 }
 .bk-message-content.multi .message-detail .message-tree {
   max-height: 480px;
-  padding: 14px 24px;
+  padding: 14px 32px;
   overflow: auto;
   background: #fff;
   border-radius: 2px;
+  display: flex;
+  flex-direction: column;
 }
 .bk-message-content.multi .message-detail .message-tree .message-row {
   display: inline-flex;
@@ -163,21 +165,43 @@
 .bk-message-content.multi .message-detail .message-tree .message-row label::after {
   content: ':';
 }
+.bk-message-content.multi .message-detail .message-tree .message-row .copy-value {
+  padding-left: 4px;
+}
+.bk-message-content.multi .message-detail .message-tree .message-row .copy-value:hover {
+  background: rgba(186, 188, 192, 0.2);
+  cursor: pointer;
+  border-radius: 2px;
+}
 .bk-message-content.multi .message-detail .message-copy {
   position: absolute;
   top: 20px;
   right: 40px;
   font-size: 16px;
+  top: 0px;
+  right: 0px;
+  font-size: 18px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  border-radius: 0 2px 0 6px;
   cursor: pointer;
+  justify-content: center;
+  background: #F5F7FA;
+  color: #9FA3AE;
+}
+.bk-message-content.multi .message-detail .message-copy:hover {
+  background: #F0F5FF;
 }
 .bk-message-content.multi .message-detail .message-copy:hover span {
   color: #3a84ff;
 }
-.bk-message-content.multi .message-detail .message-copy .copy-status {
+.bk-message-content.multi .message-detail .copy-status {
   display: none;
   padding-bottom: 4px;
 }
-.bk-message-content.multi .message-detail .message-copy .copy-status .inner {
+.bk-message-content.multi .message-detail .copy-status .inner {
   position: relative;
   display: flex;
   padding: 6px 8px;
@@ -189,10 +213,10 @@
   box-shadow: 0 2px 6px 0 #0000001a;
   align-items: center;
 }
-.bk-message-content.multi .message-detail .message-copy .copy-status .inner span {
+.bk-message-content.multi .message-detail .copy-status .inner span {
   margin-right: 4px;
 }
-.bk-message-content.multi .message-detail .message-copy .copy-status .inner::after {
+.bk-message-content.multi .message-detail .copy-status .inner::after {
   position: absolute;
   bottom: 0;
   left: 50%;
@@ -207,13 +231,13 @@
   box-shadow: 5px 3px 6px 0 #0000001a;
   box-sizing: border-box;
 }
-.bk-message-content.multi .message-detail .message-copy .copy-status.success .inner span {
+.bk-message-content.multi .message-detail .copy-status.success .inner span {
   color: #2dcb9d;
 }
-.bk-message-content.multi .message-detail .message-copy .copy-status.error .inner span {
+.bk-message-content.multi .message-detail .copy-status.error .inner span {
   color: #ea3636;
 }
-.bk-message-content.multi .message-detail .message-copy .copy-status.is-show {
+.bk-message-content.multi .message-detail .copy-status.is-show {
   position: absolute;
   top: 0;
   left: 0;
@@ -221,6 +245,6 @@
   white-space: nowrap;
   transform: translate(-50%, -100%);
 }
-.bk-message-content.multi .message-detail .message-copy .copy-status.is-hidden {
+.bk-message-content.multi .message-detail .copy-status.is-hidden {
   display: none;
 }

package/lib/message/message.less

@@ -173,10 +173,12 @@
 
       .message-tree {
         max-height: 480px;
-        padding: 14px 24px;
+        padding: 14px 32px;
         overflow: auto;
         background: #fff;
         border-radius: 2px;
+        display: flex;
+        flex-direction: column;
 
         .message-row {
           display: inline-flex;
@@ -199,6 +201,16 @@
               content: ':';
             }
           }
+
+          .copy-value {
+            padding-left: 4px;
+            
+            &:hover {
+              background: rgba(186, 188, 192, 0.2);
+              cursor: pointer;
+              border-radius: 2px;
+            }
+          }
         }
       }
 
@@ -207,79 +219,91 @@
         top: 20px;
         right: 40px;
         font-size: 16px;
+        top: 0px;
+        right: 0px;
+        font-size: 18px;
+        width: 24px;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        border-radius: 0 2px 0 6px;
         cursor: pointer;
+        justify-content: center;
+        background: #F5F7FA;
+        color: #9FA3AE;
 
         &:hover {
+          background: #F0F5FF;
           span {
             color: #3a84ff;
           }
         }
+      }
 
-        .copy-status {
-          display: none;
-          padding-bottom: 4px;
+      .copy-status {
+        display: none;
+        padding-bottom: 4px;
 
-          .inner {
-            position: relative;
-            display: flex;
-            padding: 6px 8px;
-            font-size: 12px;
-            line-height: 20px;
-            color: #63656e;
-            background: #fff;
-            border: 1px solid #dcdee5;
-            box-shadow: 0 2px 6px 0 #0000001a;
-            align-items: center;
+        .inner {
+          position: relative;
+          display: flex;
+          padding: 6px 8px;
+          font-size: 12px;
+          line-height: 20px;
+          color: #63656e;
+          background: #fff;
+          border: 1px solid #dcdee5;
+          box-shadow: 0 2px 6px 0 #0000001a;
+          align-items: center;
 
-            span {
-              margin-right: 4px;
-            }
+          span {
+            margin-right: 4px;
+          }
 
-            &::after {
-              position: absolute;
-              bottom: 0;
-              left: 50%;
-              width: 8px;
-              height: 8px;
-              background: #fff;
-              border-color: #dcdee5;
-              border-style: solid;
-              border-width: 0px 1px 1px 0px;
-              content: '';
-              transform: translate(0, 4px) rotate(45deg);
-              box-shadow: 5px 3px 6px 0 #0000001a;
-              box-sizing: border-box;
-            }
+          &::after {
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            width: 8px;
+            height: 8px;
+            background: #fff;
+            border-color: #dcdee5;
+            border-style: solid;
+            border-width: 0px 1px 1px 0px;
+            content: '';
+            transform: translate(0, 4px) rotate(45deg);
+            box-shadow: 5px 3px 6px 0 #0000001a;
+            box-sizing: border-box;
           }
+        }
 
-          &.success {
-            .inner {
-              span {
-                color: #2dcb9d;
-              }
+        &.success {
+          .inner {
+            span {
+              color: #2dcb9d;
             }
           }
+        }
 
-          &.error {
-            .inner {
-              span {
-                color: #ea3636;
-              }
+        &.error {
+          .inner {
+            span {
+              color: #ea3636;
             }
           }
+        }
 
-          &.is-show {
-            position: absolute;
-            top: 0;
-            left: 0;
-            display: inline-flex;
-            white-space: nowrap;
-            transform: translate(-50%, -100%);
-          }
+        &.is-show {
+          position: absolute;
+          top: 0;
+          left: 0;
+          display: inline-flex;
+          white-space: nowrap;
+          transform: translate(-50%, -100%);
+        }
 
-          &.is-hidden {
-            display: none;
-          }
+        &.is-hidden {
+          display: none;
         }
       }
     }

package/lib/message/message.variable.css

@@ -11,6 +11,7 @@
   --white-color: white;
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
+  --disable-bg-color: #f9fafd;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -20,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: var(--component-size-small-padding);
+  --component-size-base-padding: var(--component-size-base-padding);
+  --component-size-large-padding: var(--component-size-large-padding);
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;
@@ -32,7 +36,7 @@
   --input-border-color: var(--light-gray);
   --input-broder-radius: 3px;
   --input-shadow-color: #a3c5fd;
-  --input-horizontal-padding: 10px;
+  --input-horizontal-padding: 8px;
   --input-block-color: #f5f7fa;
   --input-block-hover-color: #eaebf0;
   --input-icon-size: var(--font-size-medium);
@@ -49,7 +53,7 @@
   --button-selected-bg-color: #e1ecff;
   --button-disabled-selected-bg-color: #f0f1f5;
   --radio-font-color: #63656e;
-  --radio-active-color: #5594fa;
+  --radio-active-color: #3a84ff;
   --radio-hover-border-color: #979ba5;
   --radio-disabled-border: #dcdee5;
   --radio-disabled-font-color: #c4c6cc;
@@ -260,10 +264,12 @@
 }
 .bk-message-content.multi .message-detail .message-tree {
   max-height: 480px;
-  padding: 14px 24px;
+  padding: 14px 32px;
   overflow: auto;
   background: #fff;
   border-radius: 2px;
+  display: flex;
+  flex-direction: column;
 }
 .bk-message-content.multi .message-detail .message-tree .message-row {
   display: inline-flex;
@@ -285,21 +291,43 @@
 .bk-message-content.multi .message-detail .message-tree .message-row label::after {
   content: ':';
 }
+.bk-message-content.multi .message-detail .message-tree .message-row .copy-value {
+  padding-left: 4px;
+}
+.bk-message-content.multi .message-detail .message-tree .message-row .copy-value:hover {
+  background: rgba(186, 188, 192, 0.2);
+  cursor: pointer;
+  border-radius: 2px;
+}
 .bk-message-content.multi .message-detail .message-copy {
   position: absolute;
   top: 20px;
   right: 40px;
   font-size: 16px;
+  top: 0px;
+  right: 0px;
+  font-size: 18px;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  border-radius: 0 2px 0 6px;
   cursor: pointer;
+  justify-content: center;
+  background: #F5F7FA;
+  color: #9FA3AE;
+}
+.bk-message-content.multi .message-detail .message-copy:hover {
+  background: #F0F5FF;
 }
 .bk-message-content.multi .message-detail .message-copy:hover span {
   color: #3a84ff;
 }
-.bk-message-content.multi .message-detail .message-copy .copy-status {
+.bk-message-content.multi .message-detail .copy-status {
   display: none;
   padding-bottom: 4px;
 }
-.bk-message-content.multi .message-detail .message-copy .copy-status .inner {
+.bk-message-content.multi .message-detail .copy-status .inner {
   position: relative;
   display: flex;
   padding: 6px 8px;
@@ -311,10 +339,10 @@
   box-shadow: 0 2px 6px 0 #0000001a;
   align-items: center;
 }
-.bk-message-content.multi .message-detail .message-copy .copy-status .inner span {
+.bk-message-content.multi .message-detail .copy-status .inner span {
   margin-right: 4px;
 }
-.bk-message-content.multi .message-detail .message-copy .copy-status .inner::after {
+.bk-message-content.multi .message-detail .copy-status .inner::after {
   position: absolute;
   bottom: 0;
   left: 50%;
@@ -329,13 +357,13 @@
   box-shadow: 5px 3px 6px 0 #0000001a;
   box-sizing: border-box;
 }
-.bk-message-content.multi .message-detail .message-copy .copy-status.success .inner span {
+.bk-message-content.multi .message-detail .copy-status.success .inner span {
   color: #2dcb9d;
 }
-.bk-message-content.multi .message-detail .message-copy .copy-status.error .inner span {
+.bk-message-content.multi .message-detail .copy-status.error .inner span {
   color: #ea3636;
 }
-.bk-message-content.multi .message-detail .message-copy .copy-status.is-show {
+.bk-message-content.multi .message-detail .copy-status.is-show {
   position: absolute;
   top: 0;
   left: 0;
@@ -343,6 +371,6 @@
   white-space: nowrap;
   transform: translate(-50%, -100%);
 }
-.bk-message-content.multi .message-detail .message-copy .copy-status.is-hidden {
+.bk-message-content.multi .message-detail .copy-status.is-hidden {
   display: none;
 }

package/lib/message/messageConstructor.d.ts

@@ -130,6 +130,12 @@ declare const _default: import("vue").DefineComponent<{
     };
     getContainer: import("vue-types").VueTypeDef<HTMLElement>;
     width: import("vue-types").VueTypeDef<string | number>;
+    minWidth: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    maxWidth: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
     actions: import("vue-types").VueTypeDef<IMessageActions>;
 }, {
     classNames: import("vue").ComputedRef<string[]>;
@@ -137,14 +143,19 @@ declare const _default: import("vue").DefineComponent<{
         top: string;
         zIndex: number;
         position: "absolute" | "fixed";
+    } & ({
+        maxWidth: any;
+        minWidth: any;
         width: string | number;
-    }>;
+    } | {
+        width: string;
+    })>;
     visible: import("vue").Ref<boolean>;
     close: (e: Event) => void;
     setDetailsShow: (e: MouseEvent, isShow?: boolean) => void;
     fixMesage: (_e: MouseEvent, isFix?: boolean) => void;
-    copyMessage: (_e: MouseEvent) => void;
-    parseJson: (value: any) => any;
+    copyMessage: () => void;
+    parseToJson: (value: any) => any;
     handleMouseenter: (_e: MouseEvent) => void;
     handleMouseleave: (_e: MouseEvent) => void;
     renderMessageActions: () => unknown[];
@@ -163,7 +174,8 @@ declare const _default: import("vue").DefineComponent<{
         copyFailed: string;
     }>;
     resolveClassName: (cls: string) => string;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "destroy"[], "destroy", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    copyValueItem: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("destroy" | "detail")[], "destroy" | "detail", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     id: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     } & {
@@ -201,14 +213,23 @@ declare const _default: import("vue").DefineComponent<{
     };
     getContainer: import("vue-types").VueTypeDef<HTMLElement>;
     width: import("vue-types").VueTypeDef<string | number>;
+    minWidth: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    maxWidth: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
     actions: import("vue-types").VueTypeDef<IMessageActions>;
 }>> & {
     onDestroy?: (...args: any[]) => any;
+    onDetail?: (...args: any[]) => any;
 }, {
+    maxWidth: string | number;
     extCls: string;
     theme: "error" | "success" | "warning" | "primary";
     id: string;
     onClose: (...args: any[]) => any;
+    minWidth: string | number;
     delay: number;
     offsetY: number;
     spacing: number;

package/lib/modal/index.d.ts

@@ -29,8 +29,8 @@ declare const BkModal: {
             animateType?: string;
             class?: unknown;
             style?: unknown;
-            key?: string | number | symbol;
             ref?: import("vue").VNodeRef;
+            key?: string | number | symbol;
             ref_for?: boolean;
             ref_key?: string;
             onVnodeBeforeMount?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -557,4 +557,4 @@ declare const BkModal: {
     };
 }>;
 export default BkModal;
-export { BkModal, propsMixin, };
+export { BkModal, propsMixin };