bkui-vue 0.0.1-beta.19 → 0.0.1-beta.21

package/lib/loading/loading.css

@@ -23,6 +23,7 @@
   position: static;
   display: inline-block;
   font-size: 0;
+  vertical-align: middle;
 }
 .bk-loading-wrapper.bk-nested-loading {
   position: relative;
@@ -32,8 +33,33 @@
   top: 50%;
   left: 50%;
   z-index: 4;
+  text-align: center;
   transform: translate(-50%, -50%);
 }
+.bk-loading-wrapper .dot {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-right: 10px;
+  border-radius: 50%;
+  transform: scale(0.6);
+  animation-duration: 0.8s;
+  animation-iteration-count: infinite;
+  animation-name: loading-scale-animate;
+  animation-direction: normal;
+}
+.bk-loading-wrapper .oval {
+  position: absolute;
+  width: 6px;
+  height: 8px;
+  background-color: #63656e;
+  border-radius: 8px;
+  animation-duration: 1.2s;
+  animation-iteration-count: infinite;
+  animation-name: fade;
+  transform-origin: center 20px;
+  animation-direction: normal;
+}
 .bk-loading-wrapper .bk-loading-mask {
   opacity: 0.5;
 }
@@ -50,7 +76,55 @@
   content: '';
 }
 .bk-loading-wrapper .bk-loading-indicator {
-  font-size: 14px;
+  text-align: center;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot-1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot-2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot-3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot-4 {
+  background-color: #2dcb56;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot-1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot-2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot-3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot-4 {
+  background-color: #ea3636;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot-1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot-2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot-3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot-4 {
+  background-color: #ff9c01;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot-1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot-2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot-3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot-4 {
+  background-color: #3a84ff;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot-1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot-2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot-3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot-4 {
+  background-color: white;
+}
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .oval,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot-1,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot-2,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot-3,
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot-4 {
+  background-color: #c4c6cc;
 }
 .bk-loading-wrapper .bk-loading-indicator .dot-1 {
   background-color: #ea3636;
@@ -67,7 +141,7 @@
 .bk-loading-wrapper .bk-loading-indicator .dot-4 {
   background-color: #3a84ff;
   animation-delay: 0.55s;
-  margin-right: 0;
+  margin-right: 0px;
 }
 .bk-loading-wrapper .bk-loading-indicator .oval-1 {
   transform: rotate(-135deg);
@@ -101,59 +175,35 @@
   transform: rotate(180deg);
   animation-delay: 1.65s;
 }
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .oval,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot1,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot2,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot3,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot4 {
-  background-color: #2dcb56;
+.bk-loading-wrapper .bk-loading-indicator .bk-spin-indicator {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
 }
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .oval,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot1,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot2,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot3,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-danger .dot4 {
-  background-color: #ea3636;
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .bk-spin-indicator {
+  height: 16px;
+  width: 16px;
 }
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .oval,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot1,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot2,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot3,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-warning .dot4 {
-  background-color: #ff9c01;
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .dot {
+  width: 3px;
+  height: 3px;
+  margin-right: 3px;
 }
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .oval,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot1,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot2,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot3,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-primary .dot4 {
-  background-color: #3a84ff;
-}
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .oval,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot1,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot2,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot3,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-white .dot4 {
-  background-color: white;
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .dot.dot-4 {
+  margin-right: 0;
 }
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .oval,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot1,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot2,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot3,
-.bk-loading-wrapper .bk-loading-indicator.bk-loading-default .dot4 {
-  background-color: #c4c6cc;
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .oval {
+  width: 2px;
+  height: 3px;
+  border-radius: 3px;
+  transform-origin: center 8px;
 }
-.bk-loading-wrapper .bk-loading-indicator .bk-spin-indicator {
-  height: 40px;
+.bk-loading-wrapper .bk-loading-indicator.bk-loading-size-mini .bk-loading-title {
+  font-size: 14px;
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-small .bk-spin-indicator {
   height: 22px;
+  width: 22px;
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-small .dot {
   width: 6px;
@@ -174,6 +224,7 @@
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-large .bk-spin-indicator {
   height: 52px;
+  width: 52px;
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-size-large .dot {
   width: 20px;
@@ -199,27 +250,3 @@
   color: #63656e;
   text-align: center;
 }
-.bk-loading-wrapper .bk-loading-indicator .dot {
-  display: inline-block;
-  width: 14px;
-  height: 14px;
-  margin-right: 10px;
-  border-radius: 50%;
-  transform: scale(0.6);
-  animation-duration: 0.8s;
-  animation-iteration-count: infinite;
-  animation-name: loading-scale-animate;
-  animation-direction: normal;
-}
-.bk-loading-wrapper .bk-loading-indicator .oval {
-  position: absolute;
-  width: 6px;
-  height: 8px;
-  background-color: #63656e;
-  border-radius: 8px;
-  animation-duration: 1.2s;
-  animation-iteration-count: infinite;
-  animation-name: fade;
-  transform-origin: center 20px;
-  animation-direction: normal;
-}

package/lib/loading/loading.d.ts

@@ -1,9 +1,10 @@
 import { ExtractPropTypes, VNode } from 'vue';
 export declare enum BkLoadingMode {
-    Spin = "spin",
-    Default = "default"
+    Default = "default",
+    Spin = "spin"
 }
 export declare enum BkLoadingSize {
+    Mini = "mini",
     Small = "small",
     Large = "large"
 }
@@ -21,8 +22,12 @@ export declare const loadingTypes: {
     } & {
         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;
+    };
 };
 export declare type LoadingTypes = ExtractPropTypes<typeof loadingTypes>;
 declare const _default: import("vue").DefineComponent<{
@@ -38,8 +43,12 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         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;
+    };
 }, () => JSX.Element | VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>[], unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
@@ -55,10 +64,16 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         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;
+    };
 }>>, {
     title: string;
+    size: string;
     loading: boolean;
+    mode: string;
 }>;
 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;
@@ -29,15 +35,15 @@
 .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,24 +54,52 @@
   default: @light-gray;
 };
 
-.bk-loading-wrapper {
+.@{bk-prefix}-loading-wrapper {
   position: static;
   display: inline-block;
   font-size: 0;
+  vertical-align: middle;
     
-  &.bk-nested-loading {
+  &.@{bk-prefix}-nested-loading {
     position: relative;
 
-    .bk-loading-indicator {
+    .@{bk-prefix}-loading-indicator {
       position: absolute;
       top: 50%;
       left: 50%;
       z-index: 4;
+      text-align: center;
       transform: translate(-50%, -50%);
     }
   }
 
-  .bk-loading-mask {
+  .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;
+  }
+
+  .@{bk-prefix}-loading-mask {
     opacity: .5;
 
     &::after {
@@ -82,16 +116,20 @@
     }
   }
 
-  .bk-loading-indicator {
-    font-size: @font-size-medium;
-
+  .@{bk-prefix}-loading-indicator {
+    text-align: center;
+    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;
         }
       }
     });
@@ -102,15 +140,12 @@
       }
     });
     
-    each(@themeSelectors, {
-      &.bk-loading-@{key} {
-        .loading-theme(@value);
-      }
-    })
     
   ;
 
-    .bk-spin-indicator {
+    .@{bk-prefix}-spin-indicator {
+      display: inline-block;
+      width: 2 * @ovalGap;
       height: 2 * @ovalGap;
     }
 
@@ -121,9 +156,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,13 +175,13 @@
         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;
@@ -153,29 +189,6 @@
       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;
-    }}
+    
+  }
 }