bkui-vue 0.0.1-beta.35 → 0.0.1-beta.351

package/lib/loading/loading.d.ts

@@ -1,4 +1,4 @@
-import { ExtractPropTypes } from 'vue';
+import { ExtractPropTypes, PropType } from 'vue';
 export declare enum BkLoadingMode {
     Default = "default",
     Spin = "spin"
@@ -16,24 +16,45 @@ export declare const loadingTypes: {
     };
     loading: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
+    } & {
+        default: boolean;
     };
     inline: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
         default: boolean;
     };
-    theme: import("vue-types").VueTypeDef<string>;
+    theme: {
+        type: PropType<"success" | "warning" | "danger" | "primary" | "white">;
+    };
     title: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     } & {
         default: string;
     };
-    size: import("vue-types").VueTypeDef<string> & {
+    size: {
+        type: PropType<"" | "small" | "large" | "mini">;
+        default: BkLoadingSize;
+    };
+    mode: {
+        type: PropType<"default" | "spin">;
         default: string;
     };
-    mode: import("vue-types").VueTypeDef<string> & {
+    opacity: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    color: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
         default: string;
     };
+    zIndex: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
 };
 export declare type LoadingTypes = ExtractPropTypes<typeof loadingTypes>;
 declare const _default: import("vue").DefineComponent<{
@@ -42,53 +63,98 @@ declare const _default: import("vue").DefineComponent<{
     };
     loading: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
+    } & {
+        default: boolean;
     };
     inline: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
         default: boolean;
     };
-    theme: import("vue-types").VueTypeDef<string>;
+    theme: {
+        type: PropType<"success" | "warning" | "danger" | "primary" | "white">;
+    };
     title: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     } & {
         default: string;
     };
-    size: import("vue-types").VueTypeDef<string> & {
+    size: {
+        type: PropType<"" | "small" | "large" | "mini">;
+        default: BkLoadingSize;
+    };
+    mode: {
+        type: PropType<"default" | "spin">;
         default: string;
     };
-    mode: import("vue-types").VueTypeDef<string> & {
+    opacity: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    color: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
         default: string;
     };
+    zIndex: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     indicator: {
         type: FunctionConstructor;
     };
     loading: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
+    } & {
+        default: boolean;
     };
     inline: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
         default: boolean;
     };
-    theme: import("vue-types").VueTypeDef<string>;
+    theme: {
+        type: PropType<"success" | "warning" | "danger" | "primary" | "white">;
+    };
     title: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     } & {
         default: string;
     };
-    size: import("vue-types").VueTypeDef<string> & {
+    size: {
+        type: PropType<"" | "small" | "large" | "mini">;
+        default: BkLoadingSize;
+    };
+    mode: {
+        type: PropType<"default" | "spin">;
         default: string;
     };
-    mode: import("vue-types").VueTypeDef<string> & {
+    opacity: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    color: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
+    } & {
+        default: string;
+    };
+    zIndex: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
     };
 }>>, {
     title: string;
+    zIndex: number;
+    mode: "default" | "spin";
+    color: string;
     inline: boolean;
-    size: string;
+    size: "" | "small" | "large" | "mini";
+    opacity: number;
     loading: boolean;
-    mode: string;
 }>;
 export default _default;

package/lib/loading/loading.less

@@ -28,7 +28,7 @@
 
 .create-rotate(@time, @deg) {
   transform: rotate(@deg);
-  animation-delay: @time;
+  animation-delay: -@time;
 }
 
 .loading-theme(@theme) {
@@ -55,14 +55,15 @@
 
 .@{bk-prefix}-loading-wrapper {
   position: static;
-  font-size: 0;
   vertical-align: middle;
   &:not(.@{bk-prefix}-nested-loading) {
-    display: inline-block;
+    display: inline-flex;
   }
 
   &.@{bk-prefix}-nested-loading {
     position: relative;
+    // width: 100%;
+    // height: 100%;
 
     &.is-block {
       display: block;
@@ -72,14 +73,14 @@
       position: absolute;
       top: 50%;
       left: 50%;
-      z-index: 4;
+      z-index: 11;
       text-align: center;
       transform: translate(-50%, -50%);
     }
   }
 
   .dot {
-    display: inline-block;
+    display: inline-flex;
     width: @dotSize;
     height: @dotSize;
     margin-right: @dotGap;
@@ -93,6 +94,7 @@
 
   .oval {
     position: absolute;
+
     width: @ovalWidth;
     height: @ovalHeight;
     background-color: @default-color;
@@ -101,32 +103,19 @@
     animation-iteration-count: infinite;
     animation-name: fade;
     transform-origin: center @ovalGap;
-    animation-direction: normal;
   }
 
   .@{bk-prefix}-loading-mask {
     position: absolute;
     width: 100%;
     height: 100%;
-    opacity: .5;
-
-    &::after {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      z-index: 10;
-      width: 100%;
-      height: 100%;
-      background-color: rgba(255, 255, 255, .8);
-      content: '';
-    }
   }
 
   .@{bk-prefix}-loading-indicator {
+    display: flex;
     line-height: 1;
     text-align: center;
+    flex-direction: column;
     each(@themeSelectors, {
       &.@{bk-prefix}-loading-@{key} {
         .loading-theme(@value);
@@ -145,12 +134,18 @@
 
     each(range(8), {
       .oval-@{value} {
-        .create-rotate(.45s + (@value * .15), -135deg + (45 * (@value - 1)));
+        .create-rotate(.45s + ((@value - 1) * .15), 135deg - (45 * (@value - 1)));
       }
     });
 
+    .@{bk-prefix}-normal-indicator {
+      display: inline-flex;
+    }
+
     .@{bk-prefix}-spin-indicator {
-      display: inline-block;
+      position: relative;
+      display: inline-flex;
+      justify-content: center;
       width: 2 * @ovalGap;
       height: 2 * @ovalGap;
     }