bkui-vue 0.0.1-beta.2 → 0.0.1-beta.200

package/lib/loading/loading.d.ts

@@ -1,9 +1,11 @@
 import { ExtractPropTypes } from 'vue';
 export declare enum BkLoadingMode {
-    Spin = "spin",
-    Default = "default"
+    Default = "default",
+    Spin = "spin"
 }
 export declare enum BkLoadingSize {
+    Normal = "",
+    Mini = "mini",
     Small = "small",
     Large = "large"
 }
@@ -12,42 +14,135 @@ export declare const loadingTypes: {
     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>;
     title: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     } & {
         default: string;
     };
-    size: import("vue-types").VueTypeDef<string>;
-    mode: import("vue-types").VueTypeDef<BkLoadingMode>;
+    size: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    mode: import("vue-types").VueTypeDef<string> & {
+        default: 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<{
     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>;
     title: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     } & {
         default: string;
     };
-    size: import("vue-types").VueTypeDef<string>;
-    mode: import("vue-types").VueTypeDef<BkLoadingMode>;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    indicator?: unknown;
-    theme?: unknown;
-    title?: unknown;
-    size?: unknown;
-    mode?: unknown;
-} & {
-    title: string;
-} & {
-    theme?: string;
-    size?: string;
-    indicator?: Function;
-    mode?: BkLoadingMode;
-}> & {}, {
+    size: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    mode: import("vue-types").VueTypeDef<string> & {
+        default: 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>;
+    title: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    size: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    mode: import("vue-types").VueTypeDef<string> & {
+        default: 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: string;
+    color: string;
+    inline: boolean;
+    size: string;
+    opacity: number;
+    loading: boolean;
 }>;
 export default _default;

package/lib/loading/loading.less

@@ -8,6 +8,12 @@
 @ovalGap: 20px;
 @titleMarginTop: 8px;
 
+@miniDotSize: 3px;
+@miniDotGap: 3px;
+@miniOvalWidth: 2px;
+@miniOvalHeight: 3px;
+@miniOvalGap: 8px;
+
 @smallDotSize: 6px;
 @smallDotGap: 6px;
 @smallOvalWidth: 4px;
@@ -20,24 +26,23 @@
 @largeOvalHeight: 12px;
 @largeOvalGap: 26px;
 
-
 .create-rotate(@time, @deg) {
   transform: rotate(@deg);
-  animation-delay: @time;
+  animation-delay: -@time;
 }
 
 .loading-theme(@theme) {
   .oval,
   .dot,
-  .dot1,
-  .dot2,
-  .dot3,
-  .dot4 {
+  .dot-1,
+  .dot-2,
+  .dot-3,
+  .dot-4 {
     background-color: @theme;
   }
 }
 
-@sizeSelectors: small, large;
+@sizeSelectors: mini, small, large;
 @selectors: @danger-color, @warning-color, @success-color, @primary-color;
 @themeSelectors: {
   success: @success-color;
@@ -48,69 +53,100 @@
   default: @light-gray;
 };
 
-.bk-loading-wrapper {
+.@{bk-prefix}-loading-wrapper {
   position: static;
-  display: inline-block;
-  font-size: 0;
-    
-  &.bk-nested-loading {
+  vertical-align: middle;
+  &:not(.@{bk-prefix}-nested-loading) {
+    display: inline-flex;
+  }
+
+  &.@{bk-prefix}-nested-loading {
     position: relative;
+    // width: 100%;
+    // height: 100%;
+
+    &.is-block {
+      display: block;
+    }
 
-    .bk-loading-indicator {
+    .@{bk-prefix}-loading-indicator {
       position: absolute;
       top: 50%;
       left: 50%;
-      z-index: 4;
+      z-index: 11;
+      text-align: center;
       transform: translate(-50%, -50%);
     }
   }
 
-  .bk-loading-mask {
-    opacity: .5;
+  .dot {
+    display: inline-flex;
+    width: @dotSize;
+    height: @dotSize;
+    margin-right: @dotGap;
+    border-radius: 50%;
+    transform: scale(.6);
+    animation-duration: .8s;
+    animation-iteration-count: infinite;
+    animation-name: loading-scale-animate;
+    animation-direction: normal;
+  }
 
-    &::after {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      z-index: 10;
-      width: 100%;
-      height: 100%;
-      background-color: rgba(255, 255, 255, .9);
-      content: '';
-    }
+  .oval {
+    position: absolute;
+
+    width: @ovalWidth;
+    height: @ovalHeight;
+    background-color: @default-color;
+    border-radius: @ovalHeight;
+    animation-duration: 1.2s;
+    animation-iteration-count: infinite;
+    animation-name: fade;
+    transform-origin: center @ovalGap;
   }
 
-  .bk-loading-indicator {
-    font-size: @font-size-medium;
+  .@{bk-prefix}-loading-mask {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
 
+  .@{bk-prefix}-loading-indicator {
+    display: flex;
+    line-height: 1;
+    text-align: center;
+    flex-direction: column;
+    each(@themeSelectors, {
+      &.@{bk-prefix}-loading-@{key} {
+        .loading-theme(@value);
+      }
+    })
     
-    each(@selectors, {
+      each(@selectors, {
       .dot-@{index} {
         background-color: @value;
         animation-delay: .1s + (@index - 1) * .15;
         & when (@index = 4) {
-          margin-right: 0;
+          margin-right: 0px;
         }
       }
     });
 
     each(range(8), {
       .oval-@{value} {
-        .create-rotate(.45s + (@value * .15), -135deg + (45 * (@value - 1)));
+        .create-rotate(.45s + ((@value - 1) * .15), 135deg - (45 * (@value - 1)));
       }
     });
-    
-    each(@themeSelectors, {
-      &.bk-loading-@{key} {
-        .loading-theme(@value);
-      }
-    })
-    
-  ;
 
-    .bk-spin-indicator {
+    .@{bk-prefix}-normal-indicator {
+      display: inline-flex;
+    }
+
+    .@{bk-prefix}-spin-indicator {
+      position: relative;
+      display: inline-flex;
+      justify-content: center;
+      width: 2 * @ovalGap;
       height: 2 * @ovalGap;
     }
 
@@ -121,9 +157,10 @@
     @sizedOvalHeight: '@{value}OvalHeight';
     @sizedOvalGap: '@{value}OvalGap';
   
-    &.bk-loading-size-@{value} {
-      .bk-spin-indicator  {
+    &.@{bk-prefix}-loading-size-@{value} {
+      .@{bk-prefix}-spin-indicator  {
         height: 2 * @@sizedOvalGap;
+        width: 2 * @@sizedOvalGap;
       }
       .dot {
         width: @@sizedDotSize;
@@ -139,43 +176,17 @@
         border-radius: @@sizedOvalHeight;
         transform-origin: center @@sizedOvalGap;
       }
-      .bk-loading-title {
+      .@{bk-prefix}-loading-title {
         font-size: if(@value = small, @font-size-base, @font-size-medium);
       }
     } 
   })
-
-    .bk-loading-title {
+    .@{bk-prefix}-loading-title {
       margin-top: @titleMarginTop;
       font-size: @font-size-medium;
       line-height: normal;
       color: @default-color;
       text-align: center;
     }
-    
-    .dot {
-      display: inline-block;
-      width: @dotSize;
-      height: @dotSize;
-      margin-right: @dotGap;
-      border-radius: 50%;
-      transform: scale(.6);
-      animation-duration: .8s;
-      animation-iteration-count: infinite;
-      animation-name: loading-scale-animate;
-      animation-direction: normal;
-    }
-
-    .oval {
-      position: absolute;
-      width: @ovalWidth;
-      height: @ovalHeight;
-      background-color: @default-color;
-      border-radius: @ovalHeight;
-      animation-duration: 1.2s;
-      animation-iteration-count: infinite;
-      animation-name: fade;
-      transform-origin: center @ovalGap;
-      animation-direction: normal;
-    }}
+  }
 }