bkui-vue 0.0.2-beta.14 → 0.0.2-beta.141

package/lib/process/process.variable.css

@@ -11,6 +11,7 @@
   --white-color: white;
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
+  --disable-bg-color: #f9fafd;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -20,6 +21,9 @@
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
   --border-width-base: 1px;
   --border-style-base: solid;
   --border-radius-base: 2px;
@@ -32,7 +36,7 @@
   --input-border-color: var(--light-gray);
   --input-broder-radius: 3px;
   --input-shadow-color: #a3c5fd;
-  --input-horizontal-padding: 10px;
+  --input-horizontal-padding: 8px;
   --input-block-color: #f5f7fa;
   --input-block-hover-color: #eaebf0;
   --input-icon-size: var(--font-size-medium);
@@ -49,7 +53,7 @@
   --button-selected-bg-color: #e1ecff;
   --button-disabled-selected-bg-color: #f0f1f5;
   --radio-font-color: #63656e;
-  --radio-active-color: #5594fa;
+  --radio-active-color: #3a84ff;
   --radio-hover-border-color: #979ba5;
   --radio-disabled-border: #dcdee5;
   --radio-disabled-font-color: #c4c6cc;

package/lib/progress/index.d.ts

@@ -21,8 +21,8 @@ declare const BkProgress: {
             textInside?: boolean;
             class?: unknown;
             style?: unknown;
-            key?: string | number | symbol;
             ref?: import("vue").VNodeRef;
+            key?: string | number | symbol;
             ref_for?: boolean;
             ref_key?: string;
             onVnodeBeforeMount?: ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
@@ -63,7 +63,7 @@ declare const BkProgress: {
             }>) => void) | ((vnode: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
                 [key: string]: any;
             }>) => void)[];
-            readonly size?: "default" | "small" | "large";
+            readonly size?: "default" | "small" | "large" | "huge";
         };
         $attrs: {
             [x: string]: unknown;
@@ -93,7 +93,7 @@ declare const BkProgress: {
             theme: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary"> & {
                 default: "success" | "warning" | "danger" | "primary";
             };
-            size: import("vue-types").VueTypeDef<"default" | "small" | "large">;
+            size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
             width: import("vue-types").VueTypeValidableDef<number> & {
                 default: number;
             } & {
@@ -203,7 +203,7 @@ declare const BkProgress: {
         theme: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary"> & {
             default: "success" | "warning" | "danger" | "primary";
         };
-        size: import("vue-types").VueTypeDef<"default" | "small" | "large">;
+        size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
         width: import("vue-types").VueTypeValidableDef<number> & {
             default: number;
         } & {
@@ -280,7 +280,7 @@ declare const BkProgress: {
     theme: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary"> & {
         default: "success" | "warning" | "danger" | "primary";
     };
-    size: import("vue-types").VueTypeDef<"default" | "small" | "large">;
+    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
     width: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
     } & {

package/lib/progress/index.js

@@ -1 +1,432 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../shared"),require("vue"),require("../config-provider"));else if("function"==typeof define&&define.amd)define(["../shared","vue","../config-provider"],t);else{var r="object"==typeof exports?t(require("../shared"),require("vue"),require("../config-provider")):t(e["../shared"],e.vue,e["../config-provider"]);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(self,((e,t,r)=>(()=>{"use strict";var o={2717:e=>{e.exports=r},4212:t=>{t.exports=e},748:e=>{e.exports=t}},s={};function n(e){var t=s[e];if(void 0!==t)return t.exports;var r=s[e]={exports:{}};return o[e](r,r.exports,n),r.exports}n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var c={};return(()=>{n.r(c),n.d(c,{default:()=>d});var e=n(4212),t=n(748),r=n(2717);const o=function(e,o){var s=o.attrs,n=o.slots,c=(0,r.usePrefix)().resolveClassName,i=s.width,a=s.percent,l=s.strokeWidth,p=s.color,u=s.strokeLinecap,d=s.theme,f=s.type,y=s.bgColor,v=s.titleStyle,h=l||6,m=i||126,b={width:"number"==typeof m?"".concat(m,"px"):m,height:"number"==typeof m?"".concat(m,"px"):m,fontSize:"".concat(.15*m+6,"px")},x=50-h/2,g="dashboard"===f,P=2*Math.PI*x,T=g?.75:1,N="".concat(-1*P*(1-T)/2,"px"),S={strokeDasharray:"".concat(P*T,"px, ").concat(P,"px"),strokeDashoffset:N},k={strokeDasharray:"".concat(P*T*(a/100),"px, ").concat(P,"px"),strokeDashoffset:N,transition:"stroke-dasharray 0.6s ease 0s, stroke 0.6s ease"},j="\n    M 50 50\n    m 0 ".concat(g?"":"-").concat(x,"\n    a ").concat(x," ").concat(x," 0 1 1 0 ").concat(g?"-":"").concat(2*x,"\n    a ").concat(x," ").concat(x," 0 1 1 0 ").concat(g?"":"-").concat(2*x,"\n  "),w={d:j,stroke:y||"#f5f5f5","stroke-linecap":u,"stroke-width":h,"fill-opacity":"0",class:"process-circle-trail",style:S},V={d:j,stroke:p||"#13ce66","stroke-linecap":u,"stroke-width":a>0&&h||0,"fill-opacity":"0",class:"process-circle-path ".concat(c("".concat(d,"-circle-trail"))),style:k};return(0,t.createVNode)("div",{class:"progress-outer-circle",style:b},[(0,t.createVNode)("svg",{viewBox:"0 0 100 100"},[(0,t.createVNode)("path",w,null),(0,t.createVNode)("path",V,null)]),(0,t.createVNode)("span",{class:"progress-circle-text",style:v},[null==n?void 0:n.default()])])};function s(e){return s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s(e)}function i(e){var t=function(e,t){if("object"!==s(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,"string");if("object"!==s(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"===s(t)?t:String(t)}const a=function(e,o){var s,n,c=o.attrs,a=o.slots,l=(0,r.usePrefix)().resolveClassName,p=c.percent,u=c.strokeWidth,d=c.size,f=c.color,y=c.titleStyle,v=c.showText,h=c.textInside,m=c.theme,b={height:"".concat(u,"px"),lineHeight:"".concat(u,"px")},x={width:"".concat(p,"%"),background:f,animationDuration:"3s"},g=function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0];return(v||a.default)&&(e&&h||!e&&!h)?null==a?void 0:a.default():null};return(0,t.createVNode)("div",{class:"progress-outer"},[(0,t.createVNode)("div",{class:"".concat(l("progress-".concat(d||"normal"))," progress-bar"),style:b},[(0,t.createVNode)("div",{style:x,class:(s={"progress-inner":!0},n="".concat(l("".concat(m))),!0,(n=i(n))in s?Object.defineProperty(s,n,{value:true,enumerable:!0,configurable:!0,writable:!0}):s[n]=true,s)},[(0,t.createVNode)("div",{class:"inner-text",style:y},[g()])])]),g(!1)])};function l(e){return"function"==typeof e||"[object Object]"===Object.prototype.toString.call(e)&&!(0,t.isVNode)(e)}var p={extCls:e.PropTypes.string,type:(0,e.ProgressType)(),percent:e.PropTypes.number.def(0),theme:e.PropTypes.theme().def(e.ThemeEnum.PRIMARY),size:e.PropTypes.size(),width:e.PropTypes.number.def(126),strokeWidth:e.PropTypes.number,strokeLinecap:(0,e.ProgressStrokeLineCapType)(),textInside:e.PropTypes.bool.def(!1),showText:e.PropTypes.bool.def(!0),color:e.PropTypes.string,bgColor:e.PropTypes.string,fixed:e.PropTypes.number.validate((function(e){return e>=0&&e<=20})).def(0),format:e.PropTypes.func.def((function(e){return"".concat(e,"%")})),titleStyle:e.PropTypes.object.def({fontSize:"16px",verticalAlign:"middle"})};const u=(0,t.defineComponent)({name:"Progress",props:p,setup:function(){return{resolveClassName:(0,r.usePrefix)().resolveClassName}},methods:{validPercent:function(e){return!e||e<0?0:e>100?100:e},renderProcessInfo:function(){var e,r=this.$props,o=r.showText,s=r.format,n=r.percent,c=r.textInside,i=r.titleStyle,a=r.fixed,l=s(null===(e=this.validPercent(n))||void 0===e?void 0:e.toFixed(a));return(o||this.$slots.default)&&c?this.$slots.default?this.$slots.default():(0,t.createVNode)("span",null,[l]):!o||c?null:(0,t.createVNode)("span",{class:"progress-text",style:"string"==typeof l?i:void 0},[this.$slots.default?this.$slots.default():l])}},render:function(){var r=this.renderProcessInfo(),s=Object.assign(Object.assign({},this.$props),{percent:this.validPercent(this.percent)}),n=(0,t.createVNode)(a,s,l(r)?r:{default:function(){return[r]}});"circle"!==this.type&&"dashboard"!==this.type||(n=(0,t.createVNode)(o,s,l(r)?r:{default:function(){return[r]}}));var c={class:(0,e.classes)({extCls:!!this.extCls},"".concat(this.resolveClassName("progress")," ").concat(this.resolveClassName("progress-".concat(this.type))))};return(0,t.createVNode)("div",c,[n])}}),d=(0,e.withInstall)(u)})(),c})()));
+import "./progress.less";
+import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__ from "../shared";
+import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "vue";
+import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__ from "../config-provider";
+/******/ // The require scope
+/******/ var __webpack_require__ = {};
+/******/ 
+/************************************************************************/
+/******/ /* webpack/runtime/define property getters */
+/******/ (() => {
+/******/ 	// define getter functions for harmony exports
+/******/ 	__webpack_require__.d = (exports, definition) => {
+/******/ 		for(var key in definition) {
+/******/ 			if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 				Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 			}
+/******/ 		}
+/******/ 	};
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ 	__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/ 
+/************************************************************************/
+var __webpack_exports__ = {};
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  Z: () => (/* binding */ src)
+});
+
+;// CONCATENATED MODULE: external "../shared"
+var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var y = x => () => x
+const shared_namespaceObject = x({ ["ProgressStrokeLineCapType"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.ProgressStrokeLineCapType, ["ProgressType"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.ProgressType, ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.PropTypes, ["ThemeEnum"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.ThemeEnum, ["classes"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.classes, ["withInstall"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.withInstall });
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/typeof.js
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/toPrimitive.js
+
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/toPropertyKey.js
+
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/defineProperty.js
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+;// CONCATENATED MODULE: external "vue"
+var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_vue_y = x => () => x
+const external_vue_namespaceObject = external_vue_x({ ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["isVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.isVNode });
+;// CONCATENATED MODULE: external "../config-provider"
+var config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var config_provider_y = x => () => x
+const config_provider_namespaceObject = config_provider_x({ ["usePrefix"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__.usePrefix });
+;// CONCATENATED MODULE: ../../packages/progress/src/circle.tsx
+
+/*
+ * 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.
+ */
+
+/** 环形进度和仪表盘 */
+var Circle = function Circle(_, _ref) {
+  var attrs = _ref.attrs,
+    slots = _ref.slots;
+  var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
+    resolveClassName = _usePrefix.resolveClassName;
+  var width = attrs.width,
+    percent = attrs.percent,
+    strokeWidth = attrs.strokeWidth,
+    color = attrs.color,
+    strokeLinecap = attrs.strokeLinecap,
+    theme = attrs.theme,
+    type = attrs.type,
+    bgColor = attrs.bgColor,
+    titleStyle = attrs.titleStyle;
+  var circleStrokeWidth = strokeWidth || 6;
+  var circleSize = width || 126;
+  var circleStyle = {
+    width: typeof circleSize === 'number' ? "".concat(circleSize, "px") : circleSize,
+    height: typeof circleSize === 'number' ? "".concat(circleSize, "px") : circleSize,
+    fontSize: "".concat(circleSize * 0.15 + 6, "px")
+  };
+  var radius = 50 - circleStrokeWidth / 2;
+  var isDashboard = type === 'dashboard';
+  /** 总度数 */
+  var len = Math.PI * 2 * radius;
+  /** 绘制长度 */
+  var rate = isDashboard && 0.75 || 1;
+  /** stroke偏移 */
+  var strokeDashoffset = "".concat(-1 * len * (1 - rate) / 2, "px");
+  var transition = 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease';
+  /** 底色样式 */
+  var trailStyle = {
+    strokeDasharray: "".concat(len * rate, "px, ").concat(len, "px"),
+    strokeDashoffset: strokeDashoffset
+  };
+  /** 路径样式 */
+  var pathStyle = {
+    strokeDasharray: "".concat(len * rate * (percent / 100), "px, ").concat(len, "px"),
+    strokeDashoffset: strokeDashoffset,
+    transition: transition
+  };
+  /** 绘制路径 */
+  var path = "\n    M 50 50\n    m 0 ".concat(isDashboard ? '' : '-').concat(radius, "\n    a ").concat(radius, " ").concat(radius, " 0 1 1 0 ").concat(isDashboard ? '-' : '').concat(radius * 2, "\n    a ").concat(radius, " ").concat(radius, " 0 1 1 0 ").concat(isDashboard ? '' : '-').concat(radius * 2, "\n  ");
+  /** 底色 */
+  var progressCircleTrail = {
+    d: path,
+    stroke: bgColor || '#f5f5f5',
+    'stroke-linecap': strokeLinecap,
+    'stroke-width': circleStrokeWidth,
+    'fill-opacity': '0',
+    "class": 'process-circle-trail',
+    style: trailStyle
+  };
+  /** 路径 */
+  var progressCirclePath = {
+    d: path,
+    stroke: color || '#13ce66',
+    'stroke-linecap': strokeLinecap,
+    'stroke-width': percent > 0 && circleStrokeWidth || 0,
+    'fill-opacity': '0',
+    "class": "process-circle-path ".concat(resolveClassName("".concat(theme, "-circle-trail"))),
+    style: pathStyle
+  };
+  return (0,external_vue_namespaceObject.createVNode)("div", {
+    "class": "progress-outer-circle",
+    "style": circleStyle
+  }, [(0,external_vue_namespaceObject.createVNode)("svg", {
+    "viewBox": "0 0 100 100"
+  }, [(0,external_vue_namespaceObject.createVNode)("path", progressCircleTrail, null), (0,external_vue_namespaceObject.createVNode)("path", progressCirclePath, null)]), (0,external_vue_namespaceObject.createVNode)("span", {
+    "class": "progress-circle-text",
+    "style": titleStyle
+  }, [slots === null || slots === void 0 ? void 0 : slots["default"]()])]);
+};
+/* harmony default export */ const circle = (Circle);
+;// CONCATENATED MODULE: ../../packages/progress/src/line.tsx
+
+
+/*
+ * 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.
+ */
+
+/** 进度条直线*/
+var Line = function Line(_, _ref) {
+  var attrs = _ref.attrs,
+    slots = _ref.slots;
+  var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
+    resolveClassName = _usePrefix.resolveClassName;
+  var percent = attrs.percent,
+    strokeWidth = attrs.strokeWidth,
+    size = attrs.size,
+    color = attrs.color,
+    titleStyle = attrs.titleStyle,
+    showText = attrs.showText,
+    textInside = attrs.textInside,
+    theme = attrs.theme;
+  var percentStyle = {
+    height: "".concat(strokeWidth, "px"),
+    lineHeight: "".concat(strokeWidth, "px")
+  };
+  var barStyle = {
+    width: "".concat(percent, "%"),
+    background: color,
+    animationDuration: '3s'
+  };
+  /** 根据 textInside 来区分何时展示 默认slot*/
+  var showDefault = function showDefault() {
+    var isTextInside = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    if (!(showText || slots["default"])) {
+      return null;
+    }
+    if (isTextInside && textInside || !isTextInside && !textInside) {
+      return slots === null || slots === void 0 ? void 0 : slots["default"]();
+    }
+    return null;
+  };
+  return (0,external_vue_namespaceObject.createVNode)("div", {
+    "class": "progress-outer"
+  }, [(0,external_vue_namespaceObject.createVNode)("div", {
+    "class": "".concat(resolveClassName("progress-".concat(size || 'normal')), " progress-bar"),
+    "style": percentStyle
+  }, [(0,external_vue_namespaceObject.createVNode)("div", {
+    "style": barStyle,
+    "class": _defineProperty({
+      'progress-inner': true
+    }, "".concat(resolveClassName("".concat(theme))), true)
+  }, [(0,external_vue_namespaceObject.createVNode)("div", {
+    "class": "inner-text",
+    "style": titleStyle
+  }, [showDefault()])])]), showDefault(false)]);
+};
+/* harmony default export */ const line = (Line);
+;// CONCATENATED MODULE: ../../packages/progress/src/progress.tsx
+
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+/*
+ * 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.
+ */
+
+
+
+
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0,external_vue_namespaceObject.isVNode)(s);
+}
+var progressType = {
+  extCls: shared_namespaceObject.PropTypes.string,
+  type: (0,shared_namespaceObject.ProgressType)(),
+  percent: shared_namespaceObject.PropTypes.number.def(0),
+  theme: shared_namespaceObject.PropTypes.theme().def(shared_namespaceObject.ThemeEnum.PRIMARY),
+  size: shared_namespaceObject.PropTypes.size(),
+  width: shared_namespaceObject.PropTypes.number.def(126),
+  strokeWidth: shared_namespaceObject.PropTypes.number,
+  strokeLinecap: (0,shared_namespaceObject.ProgressStrokeLineCapType)(),
+  textInside: shared_namespaceObject.PropTypes.bool.def(false),
+  showText: shared_namespaceObject.PropTypes.bool.def(true),
+  color: shared_namespaceObject.PropTypes.string,
+  bgColor: shared_namespaceObject.PropTypes.string,
+  fixed: shared_namespaceObject.PropTypes.number.validate(function (value) {
+    return value >= 0 && value <= 20;
+  }).def(0),
+  format: shared_namespaceObject.PropTypes.func.def(function (percent) {
+    return "".concat(percent, "%");
+  }),
+  titleStyle: shared_namespaceObject.PropTypes.object.def({
+    fontSize: '16px',
+    verticalAlign: 'middle'
+  })
+};
+/* harmony default export */ const progress = ((0,external_vue_namespaceObject.defineComponent)({
+  // eslint-disable-next-line vue/no-reserved-component-names
+  name: 'Progress',
+  props: progressType,
+  setup: function setup() {
+    var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
+      resolveClassName = _usePrefix.resolveClassName;
+    return {
+      resolveClassName: resolveClassName
+    };
+  },
+  methods: {
+    /** 验证进度值 */validPercent: function validPercent(percent) {
+      if (!percent || percent < 0) {
+        return 0;
+      }
+      if (percent > 100) {
+        return 100;
+      }
+      return percent;
+    },
+    /** text 区域展示内容*/renderProcessInfo: function renderProcessInfo() {
+      var _this$validPercent;
+      var _this$$props = this.$props,
+        showText = _this$$props.showText,
+        format = _this$$props.format,
+        percent = _this$$props.percent,
+        textInside = _this$$props.textInside,
+        titleStyle = _this$$props.titleStyle,
+        fixed = _this$$props.fixed;
+      var formatPercent = format((_this$validPercent = this.validPercent(percent)) === null || _this$validPercent === void 0 ? void 0 : _this$validPercent.toFixed(fixed));
+      if ((showText || this.$slots["default"]) && textInside) {
+        return this.$slots["default"] ? this.$slots["default"]() : (0,external_vue_namespaceObject.createVNode)("span", null, [formatPercent]);
+      }
+      if (!showText || textInside) return null;
+      return (0,external_vue_namespaceObject.createVNode)("span", {
+        "class": "progress-text",
+        "style": typeof formatPercent === 'string' ? titleStyle : undefined
+      }, [this.$slots["default"] ? this.$slots["default"]() : formatPercent]);
+    }
+  },
+  render: function render() {
+    var progressInfo = this.renderProcessInfo();
+    var $props = _objectSpread(_objectSpread({}, this.$props), {}, {
+      percent: this.validPercent(this.percent)
+    });
+    var progress = (0,external_vue_namespaceObject.createVNode)(line, $props, _isSlot(progressInfo) ? progressInfo : {
+      "default": function _default() {
+        return [progressInfo];
+      }
+    });
+    if (this.type === 'circle' || this.type === 'dashboard') {
+      progress = (0,external_vue_namespaceObject.createVNode)(circle, $props, _isSlot(progressInfo) ? progressInfo : {
+        "default": function _default() {
+          return [progressInfo];
+        }
+      });
+    }
+    var progressProps = {
+      "class": (0,shared_namespaceObject.classes)({
+        extCls: !!this.extCls
+      }, "".concat(this.resolveClassName('progress'), " ").concat(this.resolveClassName("progress-".concat(this.type))))
+    };
+    return (0,external_vue_namespaceObject.createVNode)("div", progressProps, [progress]);
+  }
+}));
+;// CONCATENATED MODULE: ../../packages/progress/src/index.ts
+/*
+ * 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.
+ */
+
+
+var BkProgress = (0,shared_namespaceObject.withInstall)(progress);
+/* harmony default export */ const src = (BkProgress);
+var __webpack_exports__default = __webpack_exports__.Z;
+export { __webpack_exports__default as default };

package/lib/progress/progress.css

@@ -11,12 +11,12 @@
     background-color: transparent;
   }
 }
-.bk-fade-transtion .bk-fade-enter-active,
-.bk-fade-transtion .bk-fade-leave-active {
+.bk-transition .bk-fade-enter-active,
+.bk-transition .bk-fade-leave-active {
   transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
 }
-.bk-fade-transtion .bk-fade-enter,
-.bk-fade-transtion .bk-fade-leave-to {
+.bk-transition .bk-fade-enter,
+.bk-transition .bk-fade-leave-to {
   opacity: 0;
 }
 .clearfix-style::after {
@@ -88,14 +88,18 @@
   border-radius: 50px;
 }
 .bk-progress .progress-bar.bk-progress-small {
-  height: 2px;
-}
-.bk-progress .progress-bar.bk-progress-normal {
   height: 4px;
 }
+.bk-progress .progress-bar.bk-progress-normal,
+.bk-progress .progress-bar.bk-progress-default {
+  height: 8px;
+}
 .bk-progress .progress-bar.bk-progress-large {
   height: 12px;
 }
+.bk-progress .progress-bar.bk-progress-huge {
+  height: 16px;
+}
 .bk-progress .progress-inner {
   position: absolute;
   top: 0;

package/lib/progress/progress.d.ts

@@ -14,7 +14,7 @@ export declare const progressType: {
     theme: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary"> & {
         default: "success" | "warning" | "danger" | "primary";
     };
-    size: import("vue-types").VueTypeDef<"default" | "small" | "large">;
+    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
     width: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
     } & {
@@ -82,7 +82,7 @@ declare const _default: import("vue").DefineComponent<{
     theme: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary"> & {
         default: "success" | "warning" | "danger" | "primary";
     };
-    size: import("vue-types").VueTypeDef<"default" | "small" | "large">;
+    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
     width: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
     } & {
@@ -157,7 +157,7 @@ declare const _default: import("vue").DefineComponent<{
     theme: import("vue-types").VueTypeDef<"success" | "warning" | "danger" | "primary"> & {
         default: "success" | "warning" | "danger" | "primary";
     };
-    size: import("vue-types").VueTypeDef<"default" | "small" | "large">;
+    size: import("vue-types").VueTypeDef<"default" | "small" | "large" | "huge">;
     width: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
     } & {

package/lib/progress/progress.less

@@ -20,16 +20,21 @@
     border-radius: 50px;
 
     &.@{bk-prefix}-progress-small {
-      height: 2px;
+      height: 4px;
     }
 
-    &.@{bk-prefix}-progress-normal {
-      height: 4px;
+    &.@{bk-prefix}-progress-normal,
+    &.@{bk-prefix}-progress-default {
+      height: 8px;
     }
 
     &.@{bk-prefix}-progress-large {
       height: 12px;
     }
+
+    &.@{bk-prefix}-progress-huge {
+      height: 16px;
+    }
   }
 
   .progress-inner {