bkui-vue 0.0.1-beta.40 → 0.0.1-beta.401

package/lib/loading/loading.css

@@ -19,13 +19,63 @@
 .bk-fade-transtion .bk-fade-leave-to {
   opacity: 0;
 }
+.clearfix-style::after {
+  display: block;
+  height: 0;
+  clear: both;
+  font-size: 0;
+  content: '';
+  visibility: hidden;
+}
+.bk-popper {
+  display: none;
+  padding: 7px 14px;
+  font-size: 12px;
+  color: #fff;
+  background: #333;
+  border-radius: 4px;
+}
+.bk-popper.light {
+  color: #63656e;
+  background: #fff;
+  box-shadow: #dcdee5 0 0 6px 0;
+}
+.bk-popper .bk-popper-arrow,
+.bk-popper .bk-popper-arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+.bk-popper .bk-popper-arrow {
+  visibility: hidden;
+}
+.bk-popper .bk-popper-arrow::before {
+  content: '';
+  visibility: visible;
+  transform: rotate(45deg);
+}
+.bk-popper[data-show] {
+  display: block;
+}
+.bk-popper[data-popper-placement^='top'] > .bk-popper-arrow {
+  bottom: -4px;
+}
+.bk-popper[data-popper-placement^='bottom'] > .bk-popper-arrow {
+  top: -4px;
+}
+.bk-popper[data-popper-placement^='left'] > .bk-popper-arrow {
+  right: -4px;
+}
+.bk-popper[data-popper-placement^='right'] > .bk-popper-arrow {
+  left: -4px;
+}
 .bk-loading-wrapper {
   position: static;
-  font-size: 0;
   vertical-align: middle;
 }
 .bk-loading-wrapper:not(.bk-nested-loading) {
-  display: inline-block;
+  display: inline-flex;
 }
 .bk-loading-wrapper.bk-nested-loading {
   position: relative;
@@ -37,12 +87,12 @@
   position: absolute;
   top: 50%;
   left: 50%;
-  z-index: 4;
+  z-index: 11;
   text-align: center;
   transform: translate(-50%, -50%);
 }
 .bk-loading-wrapper .dot {
-  display: inline-block;
+  display: inline-flex;
   width: 14px;
   height: 14px;
   margin-right: 10px;
@@ -63,29 +113,17 @@
   animation-iteration-count: infinite;
   animation-name: fade;
   transform-origin: center 20px;
-  animation-direction: normal;
 }
 .bk-loading-wrapper .bk-loading-mask {
   position: absolute;
   width: 100%;
   height: 100%;
-  opacity: 0.5;
-}
-.bk-loading-wrapper .bk-loading-mask::after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 10;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0.8);
-  content: '';
 }
 .bk-loading-wrapper .bk-loading-indicator {
+  display: flex;
   line-height: 1;
   text-align: center;
+  flex-direction: column;
 }
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .oval,
 .bk-loading-wrapper .bk-loading-indicator.bk-loading-success .dot,
@@ -153,39 +191,45 @@
   margin-right: 0px;
 }
 .bk-loading-wrapper .bk-loading-indicator .oval-1 {
-  transform: rotate(-135deg);
-  animation-delay: 0.6s;
+  transform: rotate(135deg);
+  animation-delay: -0.45s;
 }
 .bk-loading-wrapper .bk-loading-indicator .oval-2 {
-  transform: rotate(-90deg);
-  animation-delay: 0.75s;
+  transform: rotate(90deg);
+  animation-delay: -0.6s;
 }
 .bk-loading-wrapper .bk-loading-indicator .oval-3 {
-  transform: rotate(-45deg);
-  animation-delay: 0.9s;
+  transform: rotate(45deg);
+  animation-delay: -0.75s;
 }
 .bk-loading-wrapper .bk-loading-indicator .oval-4 {
   transform: rotate(0deg);
-  animation-delay: 1.05s;
+  animation-delay: -0.9s;
 }
 .bk-loading-wrapper .bk-loading-indicator .oval-5 {
-  transform: rotate(45deg);
-  animation-delay: 1.2s;
+  transform: rotate(-45deg);
+  animation-delay: -1.05s;
 }
 .bk-loading-wrapper .bk-loading-indicator .oval-6 {
-  transform: rotate(90deg);
-  animation-delay: 1.35s;
+  transform: rotate(-90deg);
+  animation-delay: -1.2s;
 }
 .bk-loading-wrapper .bk-loading-indicator .oval-7 {
-  transform: rotate(135deg);
-  animation-delay: 1.5s;
+  transform: rotate(-135deg);
+  animation-delay: -1.35s;
 }
 .bk-loading-wrapper .bk-loading-indicator .oval-8 {
-  transform: rotate(180deg);
-  animation-delay: 1.65s;
+  transform: rotate(-180deg);
+  animation-delay: -1.5s;
+}
+.bk-loading-wrapper .bk-loading-indicator .bk-normal-indicator {
+  display: inline-flex;
+  justify-content: center;
 }
 .bk-loading-wrapper .bk-loading-indicator .bk-spin-indicator {
-  display: inline-block;
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
   width: 40px;
   height: 40px;
 }

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;
+    size: "" | "small" | "large" | "mini";
     inline: boolean;
-    size: string;
+    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,19 @@
 
     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;
+      justify-content: center;
+    }
+
     .@{bk-prefix}-spin-indicator {
-      display: inline-block;
+      position: relative;
+      display: inline-flex;
+      justify-content: center;
       width: 2 * @ovalGap;
       height: 2 * @ovalGap;
     }