bkui-vue 0.0.1-beta.7 → 0.0.1-beta.70

package/lib/process/index.d.ts

@@ -0,0 +1,205 @@
+declare const BkSteps: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            list: unknown[];
+            extCls: string;
+            controllable: boolean;
+            showSteps: boolean;
+            curProcess: number;
+            displayKey: string;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+                default: () => unknown[];
+            } & {
+                default: () => unknown[];
+            };
+            controllable: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            showSteps: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            curProcess: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            displayKey: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            } & {
+                default: string;
+            };
+            extCls: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            };
+        }>> & {
+            onClick?: (...args: any[]) => any;
+            "onUpdate:curProcess"?: (...args: any[]) => any;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "list" | "extCls" | "controllable" | "showSteps" | "curProcess" | "displayKey">;
+        $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: "click" | "update:curProcess", ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+                default: () => unknown[];
+            } & {
+                default: () => unknown[];
+            };
+            controllable: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            showSteps: import("vue-types").VueTypeValidableDef<boolean> & {
+                default: boolean;
+            } & {
+                default: boolean;
+            };
+            curProcess: import("vue-types").VueTypeValidableDef<number> & {
+                default: number;
+            } & {
+                default: number;
+            };
+            displayKey: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            } & {
+                default: string;
+            };
+            extCls: import("vue-types").VueTypeValidableDef<string> & {
+                default: string;
+            };
+        }>> & {
+            onClick?: (...args: any[]) => any;
+            "onUpdate:curProcess"?: (...args: any[]) => any;
+        }, {
+            defaultProcessList: import("vue").Ref<any[]>;
+            paddingBottom: import("vue").Ref<number>;
+            jumpTo: (index: any) => Promise<void>;
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "update:curProcess")[], string, {
+            list: unknown[];
+            extCls: string;
+            controllable: boolean;
+            showSteps: boolean;
+            curProcess: number;
+            displayKey: 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<{
+        list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+            default: () => unknown[];
+        } & {
+            default: () => unknown[];
+        };
+        controllable: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        showSteps: import("vue-types").VueTypeValidableDef<boolean> & {
+            default: boolean;
+        } & {
+            default: boolean;
+        };
+        curProcess: import("vue-types").VueTypeValidableDef<number> & {
+            default: number;
+        } & {
+            default: number;
+        };
+        displayKey: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        } & {
+            default: string;
+        };
+        extCls: import("vue-types").VueTypeValidableDef<string> & {
+            default: string;
+        };
+    }>> & {
+        onClick?: (...args: any[]) => any;
+        "onUpdate:curProcess"?: (...args: any[]) => any;
+    } & import("vue").ShallowUnwrapRef<{
+        defaultProcessList: import("vue").Ref<any[]>;
+        paddingBottom: import("vue").Ref<number>;
+        jumpTo: (index: any) => Promise<void>;
+    }> & {} & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    controllable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showSteps: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    curProcess: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    displayKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    extCls: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+}>> & {
+    onClick?: (...args: any[]) => any;
+    "onUpdate:curProcess"?: (...args: any[]) => any;
+}, {
+    defaultProcessList: import("vue").Ref<any[]>;
+    paddingBottom: import("vue").Ref<number>;
+    jumpTo: (index: any) => Promise<void>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "update:curProcess")[], "click" | "update:curProcess", {
+    list: unknown[];
+    extCls: string;
+    controllable: boolean;
+    showSteps: boolean;
+    curProcess: number;
+    displayKey: string;
+}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin;
+export default BkSteps;

package/lib/process/index.js

@@ -0,0 +1 @@
+!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("../shared"),require("vue"),require("../icon"));else if("function"==typeof define&&define.amd)define(["../shared","vue","../icon"],e);else{var r="object"==typeof exports?e(require("../shared"),require("vue"),require("../icon")):e(t["../shared"],t.vue,t["../icon"]);for(var n in r)("object"==typeof exports?exports:t)[n]=r[n]}}(self,((t,e,r)=>(()=>{var n={7162:(t,e,r)=>{t.exports=r(5047)},5047:t=>{var e=function(t){"use strict";var e,r=Object.prototype,n=r.hasOwnProperty,o="function"==typeof Symbol?Symbol:{},i=o.iterator||"@@iterator",a=o.asyncIterator||"@@asyncIterator",c=o.toStringTag||"@@toStringTag";function u(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{u({},"")}catch(t){u=function(t,e,r){return t[e]=r}}function s(t,e,r,n){var o=e&&e.prototype instanceof v?e:v,i=Object.create(o.prototype),a=new T(n||[]);return i._invoke=function(t,e,r){var n=f;return function(o,i){if(n===h)throw new Error("Generator is already running");if(n===d){if("throw"===o)throw i;return S()}for(r.method=o,r.arg=i;;){var a=r.delegate;if(a){var c=E(a,r);if(c){if(c===y)continue;return c}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if(n===f)throw n=d,r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);n=h;var u=l(t,e,r);if("normal"===u.type){if(n=r.done?d:p,u.arg===y)continue;return{value:u.arg,done:r.done}}"throw"===u.type&&(n=d,r.method="throw",r.arg=u.arg)}}}(t,r,a),i}function l(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}t.wrap=s;var f="suspendedStart",p="suspendedYield",h="executing",d="completed",y={};function v(){}function g(){}function m(){}var b={};u(b,i,(function(){return this}));var w=Object.getPrototypeOf,x=w&&w(w(k([])));x&&x!==r&&n.call(x,i)&&(b=x);var P=m.prototype=v.prototype=Object.create(b);function L(t){["next","throw","return"].forEach((function(e){u(t,e,(function(t){return this._invoke(e,t)}))}))}function j(t,e){function r(o,i,a,c){var u=l(t[o],t,i);if("throw"!==u.type){var s=u.arg,f=s.value;return f&&"object"==typeof f&&n.call(f,"__await")?e.resolve(f.__await).then((function(t){r("next",t,a,c)}),(function(t){r("throw",t,a,c)})):e.resolve(f).then((function(t){s.value=t,a(s)}),(function(t){return r("throw",t,a,c)}))}c(u.arg)}var o;this._invoke=function(t,n){function i(){return new e((function(e,o){r(t,n,e,o)}))}return o=o?o.then(i,i):i()}}function E(t,r){var n=t.iterator[r.method];if(n===e){if(r.delegate=null,"throw"===r.method){if(t.iterator.return&&(r.method="return",r.arg=e,E(t,r),"throw"===r.method))return y;r.method="throw",r.arg=new TypeError("The iterator does not provide a 'throw' method")}return y}var o=l(n,t.iterator,r.arg);if("throw"===o.type)return r.method="throw",r.arg=o.arg,r.delegate=null,y;var i=o.arg;return i?i.done?(r[t.resultName]=i.value,r.next=t.nextLoc,"return"!==r.method&&(r.method="next",r.arg=e),r.delegate=null,y):i:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,y)}function O(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function _(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function T(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(O,this),this.reset(!0)}function k(t){if(t){var r=t[i];if(r)return r.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var o=-1,a=function r(){for(;++o<t.length;)if(n.call(t,o))return r.value=t[o],r.done=!1,r;return r.value=e,r.done=!0,r};return a.next=a}}return{next:S}}function S(){return{value:e,done:!0}}return g.prototype=m,u(P,"constructor",m),u(m,"constructor",g),g.displayName=u(m,c,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===g||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,m):(t.__proto__=m,u(t,c,"GeneratorFunction")),t.prototype=Object.create(P),t},t.awrap=function(t){return{__await:t}},L(j.prototype),u(j.prototype,a,(function(){return this})),t.AsyncIterator=j,t.async=function(e,r,n,o,i){void 0===i&&(i=Promise);var a=new j(s(e,r,n,o),i);return t.isGeneratorFunction(r)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},L(P),u(P,c,"Generator"),u(P,i,(function(){return this})),u(P,"toString",(function(){return"[object Generator]"})),t.keys=function(t){var e=[];for(var r in t)e.push(r);return e.reverse(),function r(){for(;e.length;){var n=e.pop();if(n in t)return r.value=n,r.done=!1,r}return r.done=!0,r}},t.values=k,T.prototype={constructor:T,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=e,this.done=!1,this.delegate=null,this.method="next",this.arg=e,this.tryEntries.forEach(_),!t)for(var r in this)"t"===r.charAt(0)&&n.call(this,r)&&!isNaN(+r.slice(1))&&(this[r]=e)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var r=this;function o(n,o){return c.type="throw",c.arg=t,r.next=n,o&&(r.method="next",r.arg=e),!!o}for(var i=this.tryEntries.length-1;i>=0;--i){var a=this.tryEntries[i],c=a.completion;if("root"===a.tryLoc)return o("end");if(a.tryLoc<=this.prev){var u=n.call(a,"catchLoc"),s=n.call(a,"finallyLoc");if(u&&s){if(this.prev<a.catchLoc)return o(a.catchLoc,!0);if(this.prev<a.finallyLoc)return o(a.finallyLoc)}else if(u){if(this.prev<a.catchLoc)return o(a.catchLoc,!0)}else{if(!s)throw new Error("try statement without catch or finally");if(this.prev<a.finallyLoc)return o(a.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,y):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),y},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),_(r),y}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;_(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,r,n){return this.delegate={iterator:k(t),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=e),y}},t}(t.exports);try{regeneratorRuntime=e}catch(t){"object"==typeof globalThis?globalThis.regeneratorRuntime=e:Function("r","regeneratorRuntime = r")(e)}},6870:t=>{"use strict";t.exports=r},4212:e=>{"use strict";e.exports=t},748:t=>{"use strict";t.exports=e}},o={};function i(t){var e=o[t];if(void 0!==e)return e.exports;var r=o[t]={exports:{}};return n[t](r,r.exports,i),r.exports}i.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return i.d(e,{a:e}),e},i.d=(t,e)=>{for(var r in e)i.o(e,r)&&!i.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),i.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var a={};return(()=>{"use strict";i.r(a),i.d(a,{default:()=>l});var t=i(4212);function e(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}var r=i(748),n=i(7162),o=i.n(n);Object.create,Object.create;var c=i(6870),u={list:t.PropTypes.array.def([]),controllable:t.PropTypes.bool.def(!1),showSteps:t.PropTypes.bool.def(!1),curProcess:t.PropTypes.number.def(0),displayKey:t.PropTypes.string.def("content"),extCls:t.PropTypes.string};const s=(0,r.defineComponent)({name:"BKProcess",props:u,emits:["update:curProcess","click"],setup:function(t,n){var i=this,a=n.emit,c=(0,r.ref)([]),u=(0,r.ref)(0);return(0,r.onMounted)((function(){var r,n,o,i;(r=c.value).splice.apply(r,[0,c.value.length].concat([{content:"步骤1"},{content:"步骤2"},{content:"步骤3"},{content:"步骤4"},{content:"步骤5"}])),console.log("props.list",t.list),(null===(n=t.list)||void 0===n?void 0:n.length)&&(o=c.value).splice.apply(o,[0,c.value.length].concat(function(t){if(Array.isArray(t))return e(t)}(i=t.list)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(i)||function(t,r){if(t){if("string"==typeof t)return e(t,r);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?e(t,r):void 0}}(i)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()))})),{defaultProcessList:c,paddingBottom:u,jumpTo:function(e){return r=i,n=void 0,c=void 0,u=o().mark((function r(){return o().wrap((function(r){for(;;)switch(r.prev=r.next){case 0:console.log(e);try{t.controllable&&e!==t.curProcess&&(console.log(t.curProcess),a("update:curProcess",e),console.log(t.curProcess),a("click",e))}catch(t){console.warn(t)}case 2:case"end":return r.stop()}}),r)})),new(c||(c=Promise))((function(t,e){function o(t){try{a(u.next(t))}catch(t){e(t)}}function i(t){try{a(u.throw(t))}catch(t){e(t)}}function a(e){var r;e.done?t(e.value):(r=e.value,r instanceof c?r:new c((function(t){t(r)}))).then(o,i)}a((u=u.apply(r,n||[])).next())}));var r,n,c,u}}},render:function(){var e,n,o,i=this,a=(0,t.classes)((e={},n="".concat(this.extCls),o=!!this.extCls,n in e?Object.defineProperty(e,n,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[n]=o,e),"".concat("bk-process")),u=function(t){return"loading"===t.status},s=function(t){return t.icon?t.icon:""},l=function(t,e){return t===i.curProcess-1&&u(e)?(0,r.createVNode)(c.Circle,{class:"bk-icon bk-process-icon icon-loading"},null):function(t){return"error"===t.status}(e)?(0,r.createVNode)(c.Error,{class:"bk-process-icon"},null):function(t){return i.curProcess>=t+1||"done"===i.defaultProcessList[t].status}(t)?(0,r.createVNode)(c.Done,{class:"bk-process-icon-done"},null):(0,r.createVNode)("span",{class:"number"},[s(e)])};return(0,r.createVNode)("div",{class:a},[(0,r.createVNode)("ul",{style:{paddingBottom:"".concat(this.paddingBottom,"px")}},[this.defaultProcessList.map((function(t,e){return(0,r.createVNode)("li",{onClick:function(){i.jumpTo(e+1)},style:{cursor:i.controllable?"pointer":""},class:{success:i.curProcess>=e+1,current:u(t)&&e===i.curProcess-1}},[t[i.displayKey],l(e,t)])}))])])}}),l=(0,t.withInstall)(s)})(),a})()));

package/lib/process/process.css

@@ -0,0 +1,138 @@
+* {
+  box-sizing: border-box;
+}
+.bk-process {
+  position: relative;
+  display: flex;
+}
+@keyframes loadingCircle {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.bk-process .bk-process-toggle {
+  position: relative;
+  left: 15px;
+  width: 24px;
+  height: 24px;
+  font-size: 12px;
+  line-height: 24px;
+  color: #63656e;
+  text-align: center;
+  text-decoration: none;
+  border: 1px solid #c4c6cc;
+  border-radius: 50%;
+}
+.bk-process .bk-process-toggle.active,
+.bk-process .bk-process-toggle:hover {
+  color: #fff;
+  background: #3a84ff;
+  border-color: #3a84ff;
+}
+.bk-process .bk-process-icon-done {
+  display: inline-block;
+  font-size: 22px;
+  line-height: 18px;
+}
+.bk-process .bk-icon.icon-loading {
+  display: inline-block;
+  font-size: 14px;
+  animation: loadingCircle 1s infinite linear;
+}
+.bk-process > ul {
+  -ms-display: flex;
+  -moz-display: flex;
+  -webkit-display: flex;
+  display: table;
+  display: flex;
+  width: 100%;
+  padding: 0;
+  margin: auto;
+}
+.bk-process li {
+  position: relative;
+  display: table-cell;
+  height: 24px;
+  font-family: PingFang SC,Microsoft Yahei,Helvetica,Aria;
+  font-size: 12px;
+  line-height: 24px;
+  color: #63656e;
+  text-align: center;
+  background-color: #f0f1f5;
+  flex: 1;
+}
+.bk-process li i {
+  display: none;
+}
+.bk-process li:first-of-type {
+  border-radius: 13px 0 0 13px;
+}
+.bk-process li:last-of-type {
+  border-radius: 0 13px 13px 0;
+}
+.bk-process li:last-of-type::before {
+  display: none;
+}
+.bk-process li:last-of-type::after {
+  display: none;
+}
+.bk-process li::before {
+  position: absolute;
+  top: 0;
+  right: -25px;
+  z-index: 1;
+  width: 0;
+  height: 0;
+  border: 12px solid;
+  border-color: transparent transparent transparent #fff;
+  content: '';
+}
+.bk-process li::after {
+  position: absolute;
+  top: 0;
+  right: -23px;
+  z-index: 1;
+  width: 0;
+  height: 0;
+  border: 12px solid;
+  border-color: transparent transparent transparent #f0f1f5;
+  content: '';
+}
+.bk-process li .bk-process-step {
+  font-size: 12px;
+}
+.bk-process li .bk-process-step dd {
+  margin: 0;
+  line-height: 32px;
+}
+.bk-process li .bk-process-step i {
+  display: none;
+}
+.bk-process li .bk-process-step .success i {
+  display: inline-block;
+  color: #2dcb56;
+}
+.bk-process li .bk-process-step .steps-loading {
+  top: -2px;
+}
+.bk-process li.success {
+  color: #fff;
+  background: #2dcb56;
+}
+.bk-process li.success::after {
+  border-color: transparent transparent transparent #2dcb56;
+}
+.bk-process li.success .icon-done {
+  font-size: 22px;
+  line-height: 18px;
+}
+.bk-process li.current {
+  color: #fff;
+  background: #3a84ff;
+}
+.bk-process li.current::after {
+  border-color: transparent transparent transparent #3a84ff;
+}
+.bk-process li.current > .bk-spin-loading {
+  vertical-align: -3px;
+}

package/lib/process/process.d.ts

@@ -0,0 +1,131 @@
+/**
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+import { ExtractPropTypes } from 'vue';
+declare const processProps: {
+    list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    controllable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showSteps: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    curProcess: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    displayKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    extCls: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+};
+export declare type ProcessPropType = ExtractPropTypes<typeof processProps>;
+declare const _default: import("vue").DefineComponent<{
+    list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    controllable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showSteps: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    curProcess: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    displayKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    extCls: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+}, {
+    defaultProcessList: import("vue").Ref<any[]>;
+    paddingBottom: import("vue").Ref<number>;
+    jumpTo: (index: any) => Promise<void>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "update:curProcess")[], "click" | "update:curProcess", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    controllable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    showSteps: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    curProcess: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    displayKey: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    extCls: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    };
+}>> & {
+    onClick?: (...args: any[]) => any;
+    "onUpdate:curProcess"?: (...args: any[]) => any;
+}, {
+    list: unknown[];
+    extCls: string;
+    controllable: boolean;
+    showSteps: boolean;
+    curProcess: number;
+    displayKey: string;
+}>;
+export default _default;

package/lib/process/process.less

@@ -0,0 +1,178 @@
+@import '../styles/themes/themes.less';
+
+@themeSelectors: primary, warning, success, danger;
+
+* {
+  box-sizing: border-box;
+}
+
+.bk-process {
+  position: relative;
+  display: flex;
+
+  @keyframes loadingCircle {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  .bk-process-toggle {
+    position: relative;
+    left: 15px;
+    width: 24px;
+    height: 24px;
+    font-size: 12px;
+    line-height: 24px;
+    color: @default-color;
+    text-align: center;
+    text-decoration: none;
+    border: 1px solid @light-gray;
+    border-radius: 50%;
+
+    &.active,
+    &:hover {
+      color: #fff;
+      background: @primary-color;
+      border-color: @primary-color;
+    }
+  }
+
+  .bk-process-icon {
+    &-done {
+      display: inline-block;
+      font-size: 22px;
+      line-height: 18px;
+    }
+    
+  }
+
+  .bk-icon {
+    &.icon-loading {
+      display: inline-block;
+      font-size: @font-size-medium;
+      animation: loadingCircle 1s infinite linear;
+    }
+  }
+
+
+
+  > ul {
+    -ms-display: flex;
+    -moz-display: flex;
+    -webkit-display: flex;
+    display: table;
+    display: flex;
+    width: 100%;
+    padding: 0;
+    margin: auto;
+  }
+
+  li {
+    position: relative;
+    display: table-cell;
+    height: 24px;
+    font-family: PingFang SC,Microsoft Yahei,Helvetica,Aria;
+    font-size: 12px;
+    line-height: 24px;
+    color: @default-color;
+    text-align: center;
+    background-color: #f0f1f5;
+    flex: 1;
+
+    i {
+      display: none;
+    }
+
+    &:first-of-type {
+      border-radius: 13px 0 0 13px;
+    }
+
+    &:last-of-type {
+      border-radius: 0 13px 13px 0;
+
+      &::before {
+        display: none;
+      }
+
+      &::after {
+        display: none;
+      }
+    }
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: -25px;
+      z-index: 1;
+      width: 0;
+      height: 0;
+      border: 12px solid;
+      border-color: transparent transparent transparent #fff;
+      content: '';
+    }
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: -23px;
+      z-index: 1;
+      width: 0;
+      height: 0;
+      border: 12px solid;
+      border-color: transparent transparent transparent #f0f1f5;
+      content: '';
+    }
+
+    .bk-process-step {
+      font-size: 12px;
+      // color: $fnMainColor;
+
+      dd {
+        margin: 0;
+        line-height: 32px;
+      }
+
+      i {
+        display: none;
+      }
+
+      .success {
+        i {
+          display: inline-block;
+          color: @success-color;
+        }
+      }
+
+      .steps-loading {
+        top: -2px;
+      }
+    }
+
+    &.success {
+      color: #fff;
+      background: @success-color;
+
+      &::after {
+        border-color: transparent transparent transparent @success-color;
+      }
+
+      .icon-done {
+        font-size: 22px;
+        line-height: 18px;
+      }
+    }
+
+    &.current {
+      color: #fff;
+      background: @primary-color;
+
+      &::after {
+        border-color: transparent transparent transparent @primary-color;
+      }
+
+      >.bk-spin-loading {
+        vertical-align: -3px;
+      }
+    }
+  }
+}