bkui-vue 0.0.1-beta.3 → 0.0.1-beta.32

package/lib/loading/index.d.ts

@@ -0,0 +1,164 @@
+import { BkLoadingMode, BkLoadingSize, setDefaultIndicator } from './loading';
+declare const BkLoading: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            title: string;
+            inline: boolean;
+            size: string;
+            loading: boolean;
+            mode: string;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            indicator: {
+                type: FunctionConstructor;
+            };
+            loading: import("vue-types").VueTypeValidableDef<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;
+            };
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "inline" | "size" | "loading" | "mode">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            indicator: {
+                type: FunctionConstructor;
+            };
+            loading: import("vue-types").VueTypeValidableDef<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;
+            };
+        }>>, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
+            title: string;
+            inline: boolean;
+            size: string;
+            loading: boolean;
+            mode: string;
+        }> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        indicator: {
+            type: FunctionConstructor;
+        };
+        loading: import("vue-types").VueTypeValidableDef<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;
+        };
+    }>> & import("vue").ShallowUnwrapRef<() => JSX.Element> & {} & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    indicator: {
+        type: FunctionConstructor;
+    };
+    loading: import("vue-types").VueTypeValidableDef<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;
+    };
+}>>, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
+    title: string;
+    inline: boolean;
+    size: string;
+    loading: boolean;
+    mode: string;
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin & Readonly<{
+    setDefaultIndicator: typeof setDefaultIndicator;
+    BkLoadingMode: typeof BkLoadingMode;
+    BkLoadingSize: typeof BkLoadingSize;
+}>;
+export default BkLoading;
+export { BkLoading, setDefaultIndicator, BkLoadingMode, BkLoadingSize, };

package/lib/loading/index.js

@@ -1 +1 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("vue"),require("../shared")):"function"==typeof define&&define.amd?define(["exports","vue","../shared"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Vue,e.Shared)}(this,(function(e,n,t){"use strict";function o(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var a={exports:{}};!function(e){e.exports=function(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e},e.exports.default=e.exports,e.exports.__esModule=!0}(a);var i,d,r,l=o(a.exports);e.BkLoadingMode=void 0,(i=e.BkLoadingMode||(e.BkLoadingMode={})).Spin="spin",i.Default="default",e.BkLoadingSize=void 0,(d=e.BkLoadingSize||(e.BkLoadingSize={})).Small="small",d.Large="large";var u={indicator:{type:Function},theme:t.PropTypes.theme(["white","primary","warning","success","danger"]),title:t.PropTypes.string.def(""),size:t.PropTypes.size(),mode:t.PropTypes.oneOf(Object.values(e.BkLoadingMode))},s=n.defineComponent({name:"BkLoading",props:u,setup:function(e,o){var a=[1,2,3,4].map((function(e){return n.createVNode("span",{class:"dot dot-".concat(e)},null)})),i=n.createVNode("div",{class:"bk-spin-indicator"},[[1,2,3,4,5,6,7,8].map((function(e){return n.createVNode("span",{class:"oval oval-".concat(e)},null)}))]),d=n.computed((function(){return t.classes({"bk-nested-loading":!!o.slots.default},"bk-loading-wrapper")})),u=n.computed((function(){var n;return t.classes((l(n={},"bk-loading-size-".concat(e.size),!e.size),l(n,"bk-loading-".concat(e.theme),!e.theme),n),"bk-loading-indicator")})),s=n.computed((function(){return!!e.title})),c=n.computed((function(){var t="spin"===e.mode;return"function"==typeof e.indicator?n.createVNode(e.indicator,null,null):"function"==typeof r?n.createVNode(r,null,null):t?i:a}));return function(){return n.createVNode("div",{class:d.value},[n.createVNode("div",{class:u.value},[c.value,s.value&&n.createVNode("div",{class:"bk-loading-title"},[e.title])]),o.slots.default&&n.createVNode("div",{class:"bk-loading-mask"},[o.slots.default()])])}}});s.install=function(e){e.component(s.name,s)},s.setDefaultIndicator=function(e){r="function"==typeof e?e:function(){return n.createVNode(e,null,null)}},s.BkLoadingMode=e.BkLoadingMode,s.BkLoadingSize=e.BkLoadingSize,e.default=s,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("../shared"),require("vue")):"function"==typeof define&&define.amd?define(["exports","../shared","vue"],o):o((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Shared,e.Vue)}(this,(function(e,o,n){"use strict";function t(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var a={exports:{}};!function(e){e.exports=function(e,o,n){return o in e?Object.defineProperty(e,o,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[o]=n,e},e.exports.__esModule=!0,e.exports.default=e.exports}(a);var i,d,l,r=t(a.exports);function u(e){l="function"==typeof e?e:function(){return n.createVNode(e,null,null)}}e.BkLoadingMode=void 0,(i=e.BkLoadingMode||(e.BkLoadingMode={})).Default="default",i.Spin="spin",e.BkLoadingSize=void 0,(d=e.BkLoadingSize||(e.BkLoadingSize={})).Normal="",d.Mini="mini",d.Small="small",d.Large="large";var s={indicator:{type:Function},loading:o.PropTypes.bool,inline:o.PropTypes.bool.def(!0),theme:o.PropTypes.theme(["white","primary","warning","success","danger"]),title:o.PropTypes.string.def(""),size:o.PropTypes.commonType(Object.values(e.BkLoadingSize)).def(e.BkLoadingSize.Normal),mode:o.PropTypes.commonType(Object.values(e.BkLoadingMode)).def("default")},c=n.defineComponent({name:"Loading",props:s,setup:function(t,a){var i=[1,2,3,4].map((function(e){return n.createVNode("span",{class:"dot dot-".concat(e)},null)})),d=n.createVNode("div",{class:"bk-spin-indicator"},[[1,2,3,4,5,6,7,8].map((function(e){return n.createVNode("span",{class:"oval oval-".concat(e)},null)}))]),u=n.computed((function(){return o.classes({"bk-loading-wrapper":t.loading,"bk-nested-loading":!!a.slots.default})})),s=n.computed((function(){var e;return o.classes((r(e={},"bk-loading-size-".concat(t.size),!!t.size),r(e,"bk-loading-".concat(t.theme),!!t.theme),e),"bk-loading-indicator")})),c=n.computed((function(){return!!t.title})),p=n.computed((function(){var o=t.mode===e.BkLoadingMode.Spin;return"function"==typeof t.indicator?n.createVNode(t.indicator,null,null):"function"==typeof l?n.createVNode(l,null,null):o?d:i}));return function(){var e,o;return n.createVNode("div",{class:u.value},[t.loading&&n.createVNode(n.Fragment,null,[n.createVNode("div",{class:s.value},[p.value,c.value&&n.createVNode("div",{class:"bk-loading-title"},[t.title])]),a.slots.default&&n.createVNode("div",{class:"bk-loading-mask"},null)]),null===(o=(e=a.slots).default)||void 0===o?void 0:o.call(e)])}}}),p=o.withInstallProps(c,{setDefaultIndicator:u,BkLoadingMode:e.BkLoadingMode,BkLoadingSize:e.BkLoadingSize},!0);e.BkLoading=p,e.default=p,e.setDefaultIndicator=u,Object.defineProperty(e,"__esModule",{value:!0})}));

package/lib/loading/loading.css

@@ -21,20 +21,54 @@
 }
 .bk-loading-wrapper {
   position: static;
-  display: inline-block;
   font-size: 0;
+  vertical-align: middle;
+}
+.bk-loading-wrapper:not(.bk-nested-loading) {
+  display: inline-block;
 }
 .bk-loading-wrapper.bk-nested-loading {
   position: relative;
 }
+.bk-loading-wrapper.bk-nested-loading.is-block {
+  display: block;
+}
 .bk-loading-wrapper.bk-nested-loading .bk-loading-indicator {
   position: absolute;
   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 {
+  position: absolute;
+  width: 100%;
+  height: 100%;
   opacity: 0.5;
 }
 .bk-loading-wrapper .bk-loading-mask::after {
@@ -46,11 +80,59 @@
   z-index: 10;
   width: 100%;
   height: 100%;
-  background-color: rgba(255, 255, 255, 0.9);
+  background-color: rgba(255, 255, 255, 0.8);
   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 +149,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 +183,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-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-spin-indicator {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
 }
-.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 .bk-spin-indicator {
+  height: 16px;
+  width: 16px;
 }
-.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-size-mini .dot {
+  width: 3px;
+  height: 3px;
+  margin-right: 3px;
 }
-.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 +232,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 +258,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,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,81 @@ export declare const loadingTypes: {
     indicator: {
         type: FunctionConstructor;
     };
+    loading: import("vue-types").VueTypeValidableDef<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;
+    };
 };
 export declare type LoadingTypes = ExtractPropTypes<typeof loadingTypes>;
 declare const _default: import("vue").DefineComponent<{
     indicator: {
         type: FunctionConstructor;
     };
+    loading: import("vue-types").VueTypeValidableDef<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;
+    };
+}, () => 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;
+    };
+    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;
+    };
+}>>, {
     title: string;
+    inline: boolean;
+    size: string;
+    loading: boolean;
+    mode: string;
 }>;
 export default _default;