From 470954849602f6378da863b40c99e74cc0151eaf Mon Sep 17 00:00:00 2001 From: CCherry07 <2405693142@qq.com> Date: Thu, 30 Mar 2023 19:15:43 +0800 Subject: [PATCH 01/13] refactor(progress): Progress size and add variants --- components/progress/Circle.tsx | 36 +++++++++++++++-------- components/progress/Line.tsx | 47 +++++++++++++++++++++++------- components/progress/Steps.tsx | 25 +++++++++++----- components/progress/index.zh-CN.md | 33 ++++++++++----------- components/progress/progress.tsx | 46 ++++++++++++++++++++--------- 5 files changed, 126 insertions(+), 61 deletions(-) diff --git a/components/progress/Circle.tsx b/components/progress/Circle.tsx index 0bbaa5db36..a7a6d81a32 100644 --- a/components/progress/Circle.tsx +++ b/components/progress/Circle.tsx @@ -1,13 +1,21 @@ import type { CSSProperties } from 'vue'; import { computed, defineComponent } from 'vue'; import { Circle as VCCircle } from '../vc-progress'; -import { getPercentage, getStrokeColor } from './utils'; -import type { ProgressProps } from './props'; +import { getPercentage, getSize, getStrokeColor } from './utils'; +import type { ProgressProps, ProgressGradient } from './props'; import { progressProps } from './props'; import { initDefaultProps } from '../_util/props-util'; import Tooltip from '../tooltip'; +import { anyType } from '../_util/type'; -export type CircleProps = ProgressProps; +export interface CircleProps extends ProgressProps { + strokeColor?: string | ProgressGradient; +} + +export const circleProps = () => ({ + ...progressProps(), + strokeColor: anyType(), +}); const CIRCLE_MIN_STROKE_WIDTH = 3; @@ -17,11 +25,14 @@ export default defineComponent({ compatConfig: { MODE: 3 }, name: 'Circle', inheritAttrs: false, - props: initDefaultProps(progressProps(), { - width: 120, + props: initDefaultProps(circleProps(), { trailColor: null as unknown as string, }), setup(props, { slots }) { + const originWidth = computed(() => props.width || 120); + const mergedSize = computed(() => props.size ?? [originWidth.value, originWidth.value]); + + const sizeRef = computed(() => getSize(mergedSize.value as ProgressProps['size'], 'circle')); const gapDeg = computed(() => { // Support gapDeg = 0 when type = 'dashboard' if (props.gapDegree || props.gapDegree === 0) { @@ -34,16 +45,15 @@ export default defineComponent({ }); const circleStyle = computed(() => { - const circleSize = props.width; return { - width: typeof circleSize === 'number' ? `${circleSize}px` : circleSize, - height: typeof circleSize === 'number' ? `${circleSize}px` : circleSize, - fontSize: `${circleSize * 0.15 + 6}px`, + width: `${sizeRef.value.width}px`, + height: `${sizeRef.value.height}px`, + fontSize: `${sizeRef.value.width * 0.15 + 6}px`, }; }); const circleWidth = computed( - () => props.strokeWidth ?? Math.max(getMinPercent(props.width), 6), + () => props.strokeWidth ?? Math.max(getMinPercent(sizeRef.value.width), 6), ); const gapPos = computed( () => props.gapPosition || (props.type === 'dashboard' && 'bottom') || undefined, @@ -78,8 +88,10 @@ export default defineComponent({ ); return (
- {props.width <= 20 ? ( - {circleContent} + {sizeRef.value.width <= 20 ? ( + + {circleContent} + ) : ( <> {circleContent} diff --git a/components/progress/Line.tsx b/components/progress/Line.tsx index f46a7d20d5..0b02642e40 100644 --- a/components/progress/Line.tsx +++ b/components/progress/Line.tsx @@ -2,13 +2,15 @@ import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'; import { presetPrimaryColors } from '@ant-design/colors'; import { computed, defineComponent } from 'vue'; import type { Direction } from '../config-provider'; -import type { StringGradients, ProgressGradient } from './props'; +import type { StringGradients, ProgressGradient, ProgressSize } from './props'; import { progressProps } from './props'; -import { getSuccessPercent, validProgress } from './utils'; +import { getSize, getSuccessPercent, validProgress } from './utils'; +import devWarning from '../vc-util/devWarning'; +import { anyType } from '../_util/type'; export const lineProps = () => ({ ...progressProps(), - prefixCls: String, + strokeColor: anyType(), direction: { type: String as PropType, }, @@ -84,6 +86,8 @@ export default defineComponent({ backgroundColor: strokeColor as string, }; }); + const borderRadius = + props.strokeLinecap === 'square' || props.strokeLinecap === 'butt' ? 0 : undefined; const trailStyle = computed(() => props.trailColor @@ -93,13 +97,29 @@ export default defineComponent({ : undefined, ); + const mergedSize = computed( + () => props.size ?? [-1, props.strokeWidth || (props.size === 'small' ? 6 : 8)], + ); + + const sizeRef = computed(() => + getSize(mergedSize.value as ProgressSize, 'line', { strokeWidth: props.strokeWidth }), + ); + + if (process.env.NODE_ENV !== 'production') { + devWarning( + 'strokeWidth' in props, + 'Progress', + '`strokeWidth` is deprecated. Please use `size` instead.', + ); + } + const percentStyle = computed(() => { - const { percent, strokeWidth, strokeLinecap, size } = props; + const { percent } = props; return { width: `${validProgress(percent)}%`, - height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`, - borderRadius: strokeLinecap === 'square' ? 0 : undefined, - ...(backgroundProps.value as any), + height: `${sizeRef.value.height}px`, + borderRadius, + ...backgroundProps.value, }; }); @@ -107,18 +127,23 @@ export default defineComponent({ return getSuccessPercent(props); }); const successPercentStyle = computed(() => { - const { strokeWidth, size, strokeLinecap, success } = props; + const { success } = props; return { width: `${validProgress(successPercent.value)}%`, - height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`, - borderRadius: strokeLinecap === 'square' ? 0 : undefined, + height: `${sizeRef.value.height}px`, + borderRadius, backgroundColor: success?.strokeColor, }; }); + const outerStyle: CSSProperties = { + width: sizeRef.value.width < 0 ? '100%' : sizeRef.value.width, + height: `${sizeRef.value.height}px`, + }; + return () => ( <> -
+
{successPercent.value !== undefined ? ( diff --git a/components/progress/Steps.tsx b/components/progress/Steps.tsx index 322673fa47..c67c9d155d 100644 --- a/components/progress/Steps.tsx +++ b/components/progress/Steps.tsx @@ -1,8 +1,10 @@ import type { ExtractPropTypes, PropType } from 'vue'; import { computed, defineComponent } from 'vue'; import type { VueNode } from '../_util/type'; +import PropTypes from '../_util/vue-types'; import type { ProgressSize } from './props'; import { progressProps } from './props'; +import { getSize } from './utils'; export const stepsProps = () => ({ ...progressProps(), @@ -10,11 +12,11 @@ export const stepsProps = () => ({ size: { type: String as PropType, }, - strokeColor: String, + strokeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]), trailColor: String, }); -export type StepsProps = Partial>; +export type StepsProps = Partial>>; export default defineComponent({ compatConfig: { MODE: 3 }, @@ -22,13 +24,22 @@ export default defineComponent({ props: stepsProps(), setup(props, { slots }) { const current = computed(() => Math.round(props.steps * ((props.percent || 0) / 100))); - const stepWidth = computed(() => (props.size === 'small' ? 2 : 14)); + const mergedSize = computed( + () => props.size ?? [props.size === 'small' ? 2 : 14, props.strokeWidth || 8], + ); + const sizeRef = computed(() => + getSize(mergedSize.value as ProgressSize, 'step', { + steps: props.steps, + strokeWidth: props.strokeWidth || 8, + }), + ); const styledSteps = computed(() => { - const { steps, strokeWidth = 8, strokeColor, trailColor, prefixCls } = props; + const { steps, strokeColor, trailColor, prefixCls } = props; const temp: VueNode[] = []; for (let i = 0; i < steps; i += 1) { + const color = Array.isArray(strokeColor) ? strokeColor[i] : strokeColor; const cls = { [`${prefixCls}-steps-item`]: true, [`${prefixCls}-steps-item-active`]: i <= current.value - 1, @@ -38,9 +49,9 @@ export default defineComponent({ key={i} class={cls} style={{ - backgroundColor: i <= current.value - 1 ? strokeColor : trailColor, - width: `${stepWidth.value}px`, - height: `${strokeWidth}px`, + backgroundColor: i <= current.value - 1 ? color : trailColor, + width: `${sizeRef.value.width / steps}px`, + height: `${sizeRef.value.height}px`, }} />, ); diff --git a/components/progress/index.zh-CN.md b/components/progress/index.zh-CN.md index e805fca590..794b4beffb 100644 --- a/components/progress/index.zh-CN.md +++ b/components/progress/index.zh-CN.md @@ -25,36 +25,33 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJH8Tb1lcYAAAA | format | 内容的模板函数 | function(percent, successPercent) | (percent) => percent + `%` | | | percent | 百分比 | number | 0 | | | showInfo | 是否显示进度数值或状态图标 | boolean | true | | -| size | 进度条大小 | `default` \| `small` | `default` | | status | 状态，可选：`success` `exception` `normal` `active`(仅限 line) | string | - | | | strokeColor | 进度条的色彩 | string | - | | -| strokeLinecap | 进度条的样式 | `round` \| `square` | `round` | | +| strokeLinecap | 进度条的样式 | `round` \| `butt` \| `square`，区别详见 [stroke-linecap](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linecap) | `round` | - | | success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - | | | title | html 标签 title | string | - | 3.0 | | trailColor | 未完成的分段的颜色 | string | - | | | type | 类型，可选 `line` `circle` `dashboard` | string | `line` | | +| size | 进度条的尺寸 | number \| \[number, number] \| "small" \| "default" | "default" | | ### `type="line"` -| 属性 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| steps | 进度条总共步数 | number | - | -| strokeColor | 进度条的色彩，传入 object 时为渐变 | string \| { from: string; to: string; direction: string } | - | -| strokeWidth | 进度条线的宽度，单位 px | number | 10 | +| 属性 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| steps | 进度条总共步数 | number | - | - | +| strokeColor | 进度条的色彩，传入 object 时为渐变。当有 `steps` 时支持传入一个数组。 | string \| string[] \| { from: string; to: string; direction: string } | - | - | ### `type="circle"` -| 属性 | 说明 | 类型 | 默认值 | -| ----------- | ------------------------------------------------ | ---------------- | ------ | -| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| object | - | -| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | -| width | 圆形进度条画布宽度，单位 px | number | 132 | +| 属性 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| object | - | - | +| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - | ### `type="dashboard"` -| 属性 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 295 | number | 75 | -| gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `bottom` | -| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | -| width | 仪表盘进度条画布宽度，单位 px | number | 132 | +| 属性 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 295 | number | 75 | - | +| gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `bottom` | - | +| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - | diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx index 8b85cea09f..d43ccff1f2 100644 --- a/components/progress/progress.tsx +++ b/components/progress/progress.tsx @@ -7,7 +7,7 @@ import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled'; import Line from './Line'; import Circle from './Circle'; import Steps from './Steps'; -import { getSuccessPercent, validProgress } from './utils'; +import { getSize, getSuccessPercent, validProgress } from './utils'; import useConfigInject from '../config-provider/hooks/useConfigInject'; import devWarning from '../vc-util/devWarning'; import { progressProps, progressStatuses } from './props'; @@ -31,12 +31,18 @@ export default defineComponent({ setup(props, { slots, attrs }) { const { prefixCls, direction } = useConfigInject('progress', props); const [wrapSSR, hashId] = useStyle(prefixCls); - devWarning( - props.successPercent == undefined, - 'Progress', - '`successPercent` is deprecated. Please use `success.percent` instead.', - ); + if (process.env.NODE_ENV !== 'production') { + devWarning( + 'successPercent' in props, + 'Progress', + '`successPercent` is deprecated. Please use `success.percent` instead.', + ); + devWarning('width' in props, 'Progress', '`width` is deprecated. Please use `size` instead.'); + } + const strokeColorNotArray = computed(() => + Array.isArray(props.strokeColor) ? props.strokeColor[0] : props.strokeColor, + ); const percentNumber = computed(() => { const { percent = 0 } = props; const successPercent = getSuccessPercent(props); @@ -59,7 +65,7 @@ export default defineComponent({ const pre = prefixCls.value; return { [pre]: true, - [`${pre}-inline-circle`]: type === 'circle' && props.width! <= 20, + [`${pre}-inline-circle`]: type === 'circle' && getSize(size, 'circle').width <= 20, [`${pre}-${(type === 'dashboard' && 'circle') || type}`]: true, [`${pre}-status-${progressStatus.value}`]: true, [`${pre}-show-info`]: showInfo, @@ -69,6 +75,12 @@ export default defineComponent({ }; }); + const strokeColorNotGradient = computed(() => + typeof props.strokeColor === 'string' || Array.isArray(props.strokeColor) + ? props.strokeColor + : undefined, + ); + const renderProcessInfo = () => { const { showInfo, format, type, percent, title } = props; const successPercent = getSuccessPercent(props); @@ -99,35 +111,43 @@ export default defineComponent({ }; return () => { - const { type, steps, strokeColor, title } = props; + const { type, steps, title } = props; const { class: cls, ...restAttrs } = attrs; const progressInfo = renderProcessInfo(); - let progress: VueNode; // Render progress shape if (type === 'line') { progress = steps ? ( {progressInfo} ) : ( - + {progressInfo} ); } else if (type === 'circle' || type === 'dashboard') { progress = ( - + {progressInfo} ); } - return wrapSSR(
{progress} From 8ae647526c59be53cbcc1bda21744b6122502edc Mon Sep 17 00:00:00 2001 From: CCherry07 <2405693142@qq.com> Date: Thu, 30 Mar 2023 19:16:28 +0800 Subject: [PATCH 02/13] feat(progress): add `getsize` --- components/progress/utils.ts | 52 ++++++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/components/progress/utils.ts b/components/progress/utils.ts index c8352a0fe5..cf87be35aa 100644 --- a/components/progress/utils.ts +++ b/components/progress/utils.ts @@ -42,3 +42,55 @@ export function getStrokeColor({ const { strokeColor: successColor } = success; return [successColor || presetPrimaryColors.green, strokeColor || null!]; } + +export const getSize = ( + size: ProgressProps['size'], + type: ProgressProps['type'] | 'step', + extra?: { + steps?: number; + strokeWidth?: number; + }, +): { width: number; height: number } => { + let width = -1; + let height = -1; + if (type === 'step') { + const steps = extra!.steps!; + const strokeWidth = extra!.strokeWidth!; + if (typeof size === 'string' || typeof size === 'undefined') { + width = size === 'small' ? 2 : 14; + height = strokeWidth ?? 8; + } else if (typeof size === 'number') { + [width, height] = [size, size]; + } else { + [width = 14, height = 8] = size; + } + width *= steps; + } else if (type === 'line') { + const strokeWidth = extra?.strokeWidth; + if (typeof size === 'string' || typeof size === 'undefined') { + height = strokeWidth || (size === 'small' ? 6 : 8); + } else if (typeof size === 'number') { + [width, height] = [size, size]; + } else { + [width = -1, height = 8] = size; + } + } else if (type === 'circle' || type === 'dashboard') { + if (typeof size === 'string' || typeof size === 'undefined') { + [width, height] = size === 'small' ? [60, 60] : [120, 120]; + } else if (typeof size === 'number') { + [width, height] = [size, size]; + } else { + if (process.env.NODE_ENV !== 'production') { + devWarning( + false, + 'Progress', + 'Type "circle" and "dashboard" do not accept array as `size`, please use number or preset size instead.', + ); + } + + width = size[0] ?? size[1] ?? 120; + height = size[0] ?? size[1] ?? 120; + } + } + return { width, height }; +}; From b262b8ed38ee2c640563744bace3c054217db2bc Mon Sep 17 00:00:00 2001 From: CCherry07 <2405693142@qq.com> Date: Thu, 30 Mar 2023 19:16:41 +0800 Subject: [PATCH 03/13] refactor(progress): Progress size and add variants --- components/vc-progress/src/Circle.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/components/vc-progress/src/Circle.tsx b/components/vc-progress/src/Circle.tsx index f865a8244a..84509aba97 100644 --- a/components/vc-progress/src/Circle.tsx +++ b/components/vc-progress/src/Circle.tsx @@ -4,6 +4,7 @@ import { propTypes } from './types'; import { computed, defineComponent, ref } from 'vue'; import initDefaultProps from '../../_util/props-util/initDefaultProps'; import useRefs from '../../_util/hooks/useRefs'; +import classNames from '../../_util/classNames'; let gradientSeed = 0; @@ -151,7 +152,11 @@ export default defineComponent({ }; return ( - + {gradient && ( Date: Thu, 30 Mar 2023 19:17:10 +0800 Subject: [PATCH 04/13] chore(progress): update props type --- components/progress/props.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/components/progress/props.ts b/components/progress/props.ts index 5eb907196b..e65a483bc8 100644 --- a/components/progress/props.ts +++ b/components/progress/props.ts @@ -1,5 +1,5 @@ import type { VueNode } from '../_util/type'; -import { functionType, stringType, anyType, objectType } from '../_util/type'; +import { someType, functionType, stringType, anyType, objectType } from '../_util/type'; import type { ExtractPropTypes } from 'vue'; export const progressStatuses = ['normal', 'exception', 'active', 'success'] as const; @@ -7,7 +7,7 @@ export type ProgressStatusesType = (typeof progressStatuses)[number]; const ProgressType = ['line', 'circle', 'dashboard'] as const; export type ProgressType = (typeof ProgressType)[number]; const ProgressSize = ['default', 'small'] as const; -export type ProgressSize = (typeof ProgressSize)[number]; +export type ProgressSize = (typeof ProgressSize)[number] | number | [number, number]; export type StringGradients = { [percentage: string]: string }; type FromToGradients = { from: string; to: string }; export type ProgressGradient = { direction?: string } & (StringGradients | FromToGradients); @@ -28,17 +28,19 @@ export const progressProps = () => ({ showInfo: { type: Boolean, default: undefined }, strokeWidth: Number, strokeLinecap: stringType<'butt' | 'square' | 'round'>(), - strokeColor: anyType(), + strokeColor: anyType(), trailColor: String, + /** @deprecated Use `size` instead */ width: Number, success: objectType(), gapDegree: Number, gapPosition: stringType<'top' | 'bottom' | 'left' | 'right'>(), - size: stringType(), + size: someType([String, Number, Array]), steps: Number, /** @deprecated Use `success` instead */ successPercent: Number, title: String, + progressStatus: stringType(), }); export type ProgressProps = Partial>>; From 162c5d58496777520ac56b468c8b26ccb6e9a5fc Mon Sep 17 00:00:00 2001 From: CCherry07 <2405693142@qq.com> Date: Thu, 30 Mar 2023 19:17:25 +0800 Subject: [PATCH 05/13] chore(progress): update props type --- components/vc-progress/src/types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/components/vc-progress/src/types.ts b/components/vc-progress/src/types.ts index 082f3d9b4d..52445e30c6 100644 --- a/components/vc-progress/src/types.ts +++ b/components/vc-progress/src/types.ts @@ -25,6 +25,7 @@ export const propTypes = { trailColor: String, trailWidth: Number, transition: String, + class: String, }; export type ProgressProps = Partial>; From 66409237922711ab16c39e2c4606114bee5a16c4 Mon Sep 17 00:00:00 2001 From: CCherry07 <2405693142@qq.com> Date: Thu, 30 Mar 2023 19:18:13 +0800 Subject: [PATCH 06/13] feat(progress): update demo --- components/progress/demo/circle-micro.vue | 32 +++++++++++++++++++++++ components/progress/demo/circle-mini.vue | 6 ++--- components/progress/demo/index.vue | 3 +++ 3 files changed, 38 insertions(+), 3 deletions(-) create mode 100644 components/progress/demo/circle-micro.vue diff --git a/components/progress/demo/circle-micro.vue b/components/progress/demo/circle-micro.vue new file mode 100644 index 0000000000..ab848b6fea --- /dev/null +++ b/components/progress/demo/circle-micro.vue @@ -0,0 +1,32 @@ + +--- +order: 13 +title: + zh-CN: 响应式进度圈 + en-US: Responsive circular progress bar +--- + +## zh-CN + +响应式的圈形进度，当 `width` 小于等于 20 的时候，进度信息将不会显示在进度圈里面，而是以 Tooltip 的形式显示。 + +## en-US + +Responsive circular progress bar. When `width` is smaller than 20, progress information will be displayed in Tooltip. + + + + +
+ + 代码发布 +
+ diff --git a/components/progress/demo/circle-mini.vue b/components/progress/demo/circle-mini.vue index dfedca8b29..43e42c67a4 100644 --- a/components/progress/demo/circle-mini.vue +++ b/components/progress/demo/circle-mini.vue @@ -17,7 +17,7 @@ A smaller circular progress bar. diff --git a/components/progress/demo/index.vue b/components/progress/demo/index.vue index 03f53f0464..4ce8d50f56 100644 --- a/components/progress/demo/index.vue +++ b/components/progress/demo/index.vue @@ -4,6 +4,7 @@ + @@ -27,6 +28,7 @@ import Segment from './segment.vue'; import LineCap from './linecap.vue'; import GradientLine from './gradient-line.vue'; import Steps from './steps.vue'; +import CircleMicro from './circle-micro.vue'; import CN from '../index.zh-CN.md'; import US from '../index.en-US.md'; import { defineComponent } from 'vue'; @@ -47,6 +49,7 @@ export default defineComponent({ LineCap, GradientLine, Steps, + CircleMicro, }, setup() { return {}; From fc3216266629cd4409de9e2053b31ba12e11836e Mon Sep 17 00:00:00 2001 From: CCherry07 <2405693142@qq.com> Date: Thu, 30 Mar 2023 19:18:34 +0800 Subject: [PATCH 07/13] feat(progress): update docs --- components/progress/index.en-US.md | 23 ++++++++++------------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/components/progress/index.en-US.md b/components/progress/index.en-US.md index 9f8cfac9e7..86c4434227 100644 --- a/components/progress/index.en-US.md +++ b/components/progress/index.en-US.md @@ -24,30 +24,28 @@ Properties that shared by all types. | format | The template function of the content | function(percent, successPercent) | (percent) => percent + `%` | | | percent | To set the completion percentage | number | 0 | | | showInfo | Whether to display the progress value and the status icon | boolean | true | | -| size | To set the size of the progress | `default` \| `small` | `default` | | status | To set the status of the Progress, options: `success` `exception` `normal` `active`(line only) | string | - | | | strokeColor | The color of progress bar | string | - | | -| strokeLinecap | To set the style of the progress linecap | `round` \| `square` | `round` | | +| strokeLinecap | To set the style of the progress linecap | `round` \| `butt` \| `square`, see [stroke-linecap](https://developer.mozilla.org/docs/Web/SVG/Attribute/stroke-linecap) | `round` | - | | success | Configs of successfully progress bar | { percent: number, strokeColor: string } | - | | | title | html dom title | string | - | 3.0 | | trailColor | The color of unfilled part | string | - | | | type | To set the type, options: `line` `circle` `dashboard` | string | `line` | | +| size | Progress size | number \| \[number, number] \| "small" \| "default" | "default" | | ### `type="line"` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| steps | The total step count | number | - | -| strokeColor | The color of progress bar, render `linear-gradient` when passing an object | string \| { from: string; to: string; direction: string } | - | -| strokeWidth | To set the width of the progress bar, unit: `px` | number | 10 | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| steps | The total step count | number | - | - | +| strokeColor | The color of progress bar, render `linear-gradient` when passing an object, could accept `string[]` when has `steps`. | string \| string[] \| { from: string; to: string; direction: string } | - | - | ### `type="circle"` -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| strokeColor | The color of circular progress, render `linear-gradient` when passing an object | string \| object | - | -| strokeWidth | To set the width of the circular progress, unit: percentage of the canvas width | number | 6 | -| width | To set the canvas width of the circular progress, unit: `px` | number | 132 | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| strokeColor | The color of circular progress, render `linear-gradient` when passing an object | string \| object | - | - | +| strokeWidth | To set the width of the circular progress, unit: percentage of the canvas width | number | 6 | - | ### `type="dashboard"` @@ -56,4 +54,3 @@ Properties that shared by all types. | gapDegree | The gap degree of half circle, 0 ~ 295 | number | 75 | | gapPosition | The gap position, options: `top` `bottom` `left` `right` | string | `bottom` | | strokeWidth | To set the width of the dashboard progress, unit: percentage of the canvas width | number | 6 | -| width | To set the canvas width of the dashboard progress, unit: `px` | number | 132 | From cbbf4b2a9960d4ed4014f29256e5bfcf911da420 Mon Sep 17 00:00:00 2001 From: CCherry07 <2405693142@qq.com> Date: Thu, 30 Mar 2023 19:19:03 +0800 Subject: [PATCH 08/13] test(progress): update test snap --- .../__tests__/__snapshots__/demo.test.js.snap | 158 ++++++++++-------- .../__snapshots__/index.test.js.snap | 58 +++---- 2 files changed, 116 insertions(+), 100 deletions(-) diff --git a/components/progress/__tests__/__snapshots__/demo.test.js.snap b/components/progress/__tests__/__snapshots__/demo.test.js.snap index de03a8714a..f9e34297e4 100644 --- a/components/progress/__tests__/__snapshots__/demo.test.js.snap +++ b/components/progress/__tests__/__snapshots__/demo.test.js.snap @@ -1,8 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders ./components/progress/demo/circle.vue correctly 1`] = ` -
-
+
+
75%
-
-
+
+
-
-
+
+
-
+
+
0%
-
+
+
+`; + +exports[`renders ./components/progress/demo/circle-micro.vue correctly 1`] = ` +
+
+
+ +
+
代码发布
`; exports[`renders ./components/progress/demo/circle-mini.vue correctly 1`] = ` -
-
+
+
30%
-
-
+
+
-
-
+
+
-
+
+
-
+
+
0%
-
+
`; exports[`renders ./components/progress/demo/format.vue correctly 1`] = `
-
-
+
+
75 Days
-
-
+
+
Done
-
-
+
+
-
+
+
99.9%
-
-
+
+
99.9%
-
-
+
+
- + @@ -221,16 +237,16 @@ exports[`renders ./components/progress/demo/gradient-line.vue correctly 1`] = ` a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"> + a 47,47 0 1 1 0,-94" stroke="url(#ant-progress-gradient-13)" stroke-linecap="round" stroke-width="6" opacity="1" fill-opacity="0" class="ant-progress-circle-path" style="stroke: [object Object]; stroke-dasharray: 265.77873849369655px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"> 90%
-
-
+
+
- + @@ -240,7 +256,7 @@ exports[`renders ./components/progress/demo/gradient-line.vue correctly 1`] = ` a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"> + a 47,47 0 1 1 0,-94" stroke="url(#ant-progress-gradient-14)" stroke-linecap="round" stroke-width="6" opacity="1" fill-opacity="0" class="ant-progress-circle-path" style="stroke: [object Object]; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"> @@ -250,40 +266,40 @@ exports[`renders ./components/progress/demo/gradient-line.vue correctly 1`] = ` `; exports[`renders ./components/progress/demo/line.vue correctly 1`] = ` -
-
+
+
30%
-
-
+
+
50%
-
-
+
+
-
-
+
+
-
-
+
+
@@ -295,32 +311,32 @@ exports[`renders ./components/progress/demo/line.vue correctly 1`] = ` exports[`renders ./components/progress/demo/line-mini.vue correctly 1`] = `
-
-
+
+
30%
-
-
+
+
50%
-
-
+
+
-
-
+
+
@@ -332,16 +348,16 @@ exports[`renders ./components/progress/demo/line-mini.vue correctly 1`] = ` exports[`renders ./components/progress/demo/linecap.vue correctly 1`] = `
-
-
+
+
75%
-
-
+
+
75%
-
-
+
+
-
+
+
@@ -383,8 +399,8 @@ exports[`renders ./components/progress/demo/segment.vue correctly 1`] = `
60%
-
-
+
+
60%
-
-
+
+
+
@@ -424,7 +440,7 @@ exports[`renders ./components/progress/demo/steps.vue correctly 1`] = `

-
+
@@ -434,7 +450,7 @@ exports[`renders ./components/progress/demo/steps.vue correctly 1`] = `

-
+
diff --git a/components/progress/__tests__/__snapshots__/index.test.js.snap b/components/progress/__tests__/__snapshots__/index.test.js.snap index 0f52246db2..251d0e7317 100644 --- a/components/progress/__tests__/__snapshots__/index.test.js.snap +++ b/components/progress/__tests__/__snapshots__/index.test.js.snap @@ -1,8 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Progress render dashboard 295 gapDegree 1`] = ` -
-
+
+
-
+
+
-
+
+
-
+
+
@@ -63,8 +63,8 @@ exports[`Progress render format 1`] = ` `; exports[`Progress render negative progress 1`] = ` -
-
+
+
@@ -74,8 +74,8 @@ exports[`Progress render negative progress 1`] = ` `; exports[`Progress render negative successPercent 1`] = ` -
-
+
+
@@ -85,8 +85,8 @@ exports[`Progress render negative successPercent 1`] = ` `; exports[`Progress render normal progress 1`] = ` -
-
+
+
@@ -96,8 +96,8 @@ exports[`Progress render normal progress 1`] = ` `; exports[`Progress render out-of-range progress 1`] = ` -
-
+
+
@@ -107,8 +107,8 @@ exports[`Progress render out-of-range progress 1`] = ` `; exports[`Progress render out-of-range progress with info 1`] = ` -
-
+
+
@@ -118,8 +118,8 @@ exports[`Progress render out-of-range progress with info 1`] = ` `; exports[`Progress render strokeColor 1`] = ` -
-
+
+
-
+
+
@@ -146,8 +146,8 @@ exports[`Progress render strokeColor 2`] = ` `; exports[`Progress render strokeColor 3`] = ` -
-
+
+
@@ -157,8 +157,8 @@ exports[`Progress render strokeColor 3`] = ` `; exports[`Progress render successColor progress 1`] = ` -
-
+
+
@@ -168,8 +168,8 @@ exports[`Progress render successColor progress 1`] = ` `; exports[`Progress render trailColor progress 1`] = ` -
-
+
+
@@ -179,7 +179,7 @@ exports[`Progress render trailColor progress 1`] = ` `; exports[`Progress should support steps 1`] = ` -
+
From 3c954cd1e26e8a897ea58d62d3747a2baf43aacf Mon Sep 17 00:00:00 2001 From: CCherry07 <2405693142@qq.com> Date: Fri, 31 Mar 2023 00:40:11 +0800 Subject: [PATCH 09/13] fix(Circle): Merging classes --- components/vc-progress/src/Circle.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/vc-progress/src/Circle.tsx b/components/vc-progress/src/Circle.tsx index 84509aba97..4e7c6be0da 100644 --- a/components/vc-progress/src/Circle.tsx +++ b/components/vc-progress/src/Circle.tsx @@ -127,6 +127,7 @@ export default defineComponent({ trailColor, strokeLinecap, strokeColor, + class: className, ...restProps } = props; const { pathString, pathStyle } = getPathStyles( @@ -150,10 +151,9 @@ export default defineComponent({ class: `${prefixCls}-circle-trail`, style: pathStyle, }; - return ( From 07f0c983043d2f7f9756c650c1741dd695b9c032 Mon Sep 17 00:00:00 2001 From: CCherry07 <2405693142@qq.com> Date: Fri, 31 Mar 2023 00:40:43 +0800 Subject: [PATCH 10/13] test(progress): update test snap --- .../__tests__/__snapshots__/demo.test.js.snap | 36 +++++++++---------- .../__snapshots__/index.test.js.snap | 8 ++--- 2 files changed, 22 insertions(+), 22 deletions(-) diff --git a/components/progress/__tests__/__snapshots__/demo.test.js.snap b/components/progress/__tests__/__snapshots__/demo.test.js.snap index f9e34297e4..85aee8fea4 100644 --- a/components/progress/__tests__/__snapshots__/demo.test.js.snap +++ b/components/progress/__tests__/__snapshots__/demo.test.js.snap @@ -2,7 +2,7 @@ exports[`renders ./components/progress/demo/circle.vue correctly 1`] = `
-
+
75%
-
+
-
+
-
+
- -
+
30%
-
+
-
+
-
+
-
+
75 Days
-
+
Done
-
+
99.9%
-
+
@@ -244,7 +244,7 @@ exports[`renders ./components/progress/demo/gradient-line.vue correctly 1`] = ` 90%
-
+
@@ -357,7 +357,7 @@ exports[`renders ./components/progress/demo/linecap.vue correctly 1`] = `
75%
-
+
75%
-
+
-
+
-
+
-
+
-
+
-
+
-
+
@@ -32,6 +33,7 @@ import CircleMicro from './circle-micro.vue'; import CN from '../index.zh-CN.md'; import US from '../index.en-US.md'; import { defineComponent } from 'vue'; +import Size from './size.vue'; export default defineComponent({ CN, @@ -50,6 +52,7 @@ export default defineComponent({ GradientLine, Steps, CircleMicro, + Size, }, setup() { return {}; diff --git a/components/progress/demo/size.vue b/components/progress/demo/size.vue new file mode 100644 index 0000000000..130954872f --- /dev/null +++ b/components/progress/demo/size.vue @@ -0,0 +1,49 @@ + +--- +order: 11 +title: + zh-CN: 进度条尺寸 + en-US: Progress bar size +--- + +## zh-CN + +进度条尺寸。 + +## en-US + +The size of progress. + + + +
+ + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + + +
+ diff --git a/components/progress/demo/steps.vue b/components/progress/demo/steps.vue index 865efed154..fe3ce602e9 100644 --- a/components/progress/demo/steps.vue +++ b/components/progress/demo/steps.vue @@ -22,4 +22,6 @@ A progress bar with steps.
+
+ From 18147d6431c798c14e31481fe640ff4071c50d9a Mon Sep 17 00:00:00 2001 From: CCherry07 <2405693142@qq.com> Date: Sat, 1 Apr 2023 00:11:25 +0800 Subject: [PATCH 12/13] test(progress): add size snapshot --- .../__tests__/__snapshots__/demo.test.js.snap | 192 ++++++++++++++++++ 1 file changed, 192 insertions(+) diff --git a/components/progress/__tests__/__snapshots__/demo.test.js.snap b/components/progress/__tests__/__snapshots__/demo.test.js.snap index 85aee8fea4..7f8cbea494 100644 --- a/components/progress/__tests__/__snapshots__/demo.test.js.snap +++ b/components/progress/__tests__/__snapshots__/demo.test.js.snap @@ -431,6 +431,188 @@ exports[`renders ./components/progress/demo/segment.vue correctly 1`] = `
`; +exports[`renders ./components/progress/demo/size.vue correctly 1`] = ` +
+
+
+
+
+
+
+ +
+
50% +
+
+ +
+
+
+
+
+ +
+
50% +
+
+ +
+
+
+
+
+ +
+
50% +
+
+ +


+
+
+
+
+ + + + + 50%
+
+
+ +
+
+
+ + + + + 50%
+
+
+ +
+
+
+ +
+
+
+ +


+
+
+
+
+ + + + + 50%
+
+
+ +
+
+
+ + + + + 50%
+
+
+ +
+
+
+ +
+
+
+ +


+
+
+
+
+
+
+
50% +
+
+
+ +
+
+
+
+
+
50% +
+
+
+ +
+
+
+
+
+
50% +
+
+
+ +
+
+
+
+
+
50% +
+
+
+ +
+
+`; + exports[`renders ./components/progress/demo/steps.vue correctly 1`] = `
@@ -459,4 +641,14 @@ exports[`renders ./components/progress/demo/steps.vue correctly 1`] = `
+
+
+
+
+
+
+
+
60% +
+
`; From 4bcad194926b6ed6f2a186e3cb9e67c6dbaf8e9d Mon Sep 17 00:00:00 2001 From: CCherry07 <2405693142@qq.com> Date: Thu, 6 Apr 2023 15:06:05 +0800 Subject: [PATCH 13/13] chore(Progress): reback Circle svg class change --- components/vc-progress/src/Circle.tsx | 8 +------- components/vc-progress/src/types.ts | 1 - 2 files changed, 1 insertion(+), 8 deletions(-) diff --git a/components/vc-progress/src/Circle.tsx b/components/vc-progress/src/Circle.tsx index 4e7c6be0da..e1707155b8 100644 --- a/components/vc-progress/src/Circle.tsx +++ b/components/vc-progress/src/Circle.tsx @@ -4,7 +4,6 @@ import { propTypes } from './types'; import { computed, defineComponent, ref } from 'vue'; import initDefaultProps from '../../_util/props-util/initDefaultProps'; import useRefs from '../../_util/hooks/useRefs'; -import classNames from '../../_util/classNames'; let gradientSeed = 0; @@ -127,7 +126,6 @@ export default defineComponent({ trailColor, strokeLinecap, strokeColor, - class: className, ...restProps } = props; const { pathString, pathStyle } = getPathStyles( @@ -152,11 +150,7 @@ export default defineComponent({ style: pathStyle, }; return ( - + {gradient && ( >;