test/ant-design-vue
1
0
Fork 0
mirror of https://gitee.com/ant-design-vue/ant-design-vue.git synced 2024-12-02 03:58:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat(Progress): enhance size prop and add variants (#6409)

Browse Source 
* refactor(progress): Progress size and add variants

* feat(progress): add `getsize`

* refactor(progress): Progress size and add variants

* chore(progress): update props type

* chore(progress): update props type

* feat(progress): update demo

* feat(progress): update docs

* test(progress): update test snap

* fix(Circle): Merging classes

* test(progress): update test snap

* feat(progress): add size demo

* test(progress): add size snapshot

* chore(Progress): reback Circle svg class change
This commit is contained in:
Cherry7 2023-04-06 15:11:58 +08:00 committed by GitHub
parent 8a3ed32254
commit 7db4265616
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 588 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/progress/Circle.tsx
View File

@ -1,13 +1,21 @@
import type { CSSProperties } from 'vue'; import type { CSSProperties } from 'vue';
import { computed, defineComponent } from 'vue'; import { computed, defineComponent } from 'vue';
import { Circle as VCCircle } from '../vc-progress'; import { Circle as VCCircle } from '../vc-progress';
import { getPercentage, getStrokeColor } from './utils'; import { getPercentage, getSize, getStrokeColor } from './utils';
import type { ProgressProps } from './props'; import type { ProgressProps, ProgressGradient } from './props';
import { progressProps } from './props'; import { progressProps } from './props';
import { initDefaultProps } from '../_util/props-util'; import { initDefaultProps } from '../_util/props-util';
import Tooltip from '../tooltip'; 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<string | ProgressGradient>(),
});
const CIRCLE_MIN_STROKE_WIDTH = 3; const CIRCLE_MIN_STROKE_WIDTH = 3;
@ -17,11 +25,14 @@ export default defineComponent({
compatConfig: { MODE: 3 }, compatConfig: { MODE: 3 },
name: 'Circle', name: 'Circle',
inheritAttrs: false, inheritAttrs: false,
props: initDefaultProps(progressProps(), { props: initDefaultProps(circleProps(), {
width: 120,
trailColor: null as unknown as string, trailColor: null as unknown as string,
}), }),
setup(props, { slots }) { 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(() => { const gapDeg = computed(() => {
// Support gapDeg = 0 when type = 'dashboard' // Support gapDeg = 0 when type = 'dashboard'
if (props.gapDegree || props.gapDegree === 0) { if (props.gapDegree || props.gapDegree === 0) {
@ -34,16 +45,15 @@ export default defineComponent({
}); });
const circleStyle = computed<CSSProperties>(() => { const circleStyle = computed<CSSProperties>(() => {
const circleSize = props.width;
return { return {
width: typeof circleSize === 'number' ? `${circleSize}px` : circleSize, width: `${sizeRef.value.width}px`,
height: typeof circleSize === 'number' ? `${circleSize}px` : circleSize, height: `${sizeRef.value.height}px`,
fontSize: `${circleSize * 0.15 + 6}px`, fontSize: `${sizeRef.value.width * 0.15 + 6}px`,
}; };
}); });
const circleWidth = computed( const circleWidth = computed(
() => props.strokeWidth ?? Math.max(getMinPercent(props.width), 6), () => props.strokeWidth ?? Math.max(getMinPercent(sizeRef.value.width), 6),
); );
const gapPos = computed( const gapPos = computed(
() => props.gapPosition || (props.type === 'dashboard' && 'bottom') || undefined, () => props.gapPosition || (props.type === 'dashboard' && 'bottom') || undefined,
@ -78,8 +88,10 @@ export default defineComponent({
); );
return ( return (
<div class={wrapperClassName.value} style={circleStyle.value}> <div class={wrapperClassName.value} style={circleStyle.value}>
{props.width <= 20 ? ( {sizeRef.value.width <= 20 ? (
<Tooltip v-slots={{ title: slots.default }}>{circleContent}</Tooltip> <Tooltip v-slots={{ title: slots.default }}>
<span>{circleContent}</span>
</Tooltip>
) : ( ) : (
<> <>
{circleContent} {circleContent}

47
components/progress/Line.tsx
View File

@ -2,13 +2,15 @@ import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
import { presetPrimaryColors } from '@ant-design/colors'; import { presetPrimaryColors } from '@ant-design/colors';
import { computed, defineComponent } from 'vue'; import { computed, defineComponent } from 'vue';
import type { Direction } from '../config-provider'; import type { Direction } from '../config-provider';
import type { StringGradients, ProgressGradient } from './props'; import type { StringGradients, ProgressGradient, ProgressSize } from './props';
import { progressProps } 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 = () => ({ export const lineProps = () => ({
...progressProps(), ...progressProps(),
prefixCls: String, strokeColor: anyType<string | ProgressGradient>(),
direction: { direction: {
type: String as PropType<Direction>, type: String as PropType<Direction>,
}, },
@ -84,6 +86,8 @@ export default defineComponent({
backgroundColor: strokeColor as string, backgroundColor: strokeColor as string,
}; };
}); });
const borderRadius =
props.strokeLinecap === 'square' || props.strokeLinecap === 'butt' ? 0 : undefined;
const trailStyle = computed<CSSProperties>(() => const trailStyle = computed<CSSProperties>(() =>
props.trailColor props.trailColor
@ -93,13 +97,29 @@ export default defineComponent({
: undefined, : 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<CSSProperties>(() => { const percentStyle = computed<CSSProperties>(() => {
const { percent, strokeWidth, strokeLinecap, size } = props; const { percent } = props;
return { return {
width: `${validProgress(percent)}%`, width: `${validProgress(percent)}%`,
height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`, height: `${sizeRef.value.height}px`,
borderRadius: strokeLinecap === 'square' ? 0 : undefined, borderRadius,
...(backgroundProps.value as any), ...backgroundProps.value,
}; };
}); });
@ -107,18 +127,23 @@ export default defineComponent({
return getSuccessPercent(props); return getSuccessPercent(props);
}); });
const successPercentStyle = computed<CSSProperties>(() => { const successPercentStyle = computed<CSSProperties>(() => {
const { strokeWidth, size, strokeLinecap, success } = props; const { success } = props;
return { return {
width: `${validProgress(successPercent.value)}%`, width: `${validProgress(successPercent.value)}%`,
height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`, height: `${sizeRef.value.height}px`,
borderRadius: strokeLinecap === 'square' ? 0 : undefined, borderRadius,
backgroundColor: success?.strokeColor, backgroundColor: success?.strokeColor,
}; };
}); });
const outerStyle: CSSProperties = {
width: sizeRef.value.width < 0 ? '100%' : sizeRef.value.width,
height: `${sizeRef.value.height}px`,
};
return () => ( return () => (
<> <>
<div {...attrs} class={[`${props.prefixCls}-outer`, attrs.class]}> <div {...attrs} class={[`${props.prefixCls}-outer`, attrs.class]} style={outerStyle}>
<div class={`${props.prefixCls}-inner`} style={trailStyle.value}> <div class={`${props.prefixCls}-inner`} style={trailStyle.value}>
<div class={`${props.prefixCls}-bg`} style={percentStyle.value} /> <div class={`${props.prefixCls}-bg`} style={percentStyle.value} />
{successPercent.value !== undefined ? ( {successPercent.value !== undefined ? (

25
components/progress/Steps.tsx
View File

@ -1,8 +1,10 @@
import type { ExtractPropTypes, PropType } from 'vue'; import type { ExtractPropTypes, PropType } from 'vue';
import { computed, defineComponent } from 'vue'; import { computed, defineComponent } from 'vue';
import type { VueNode } from '../_util/type'; import type { VueNode } from '../_util/type';
import PropTypes from '../_util/vue-types';
import type { ProgressSize } from './props'; import type { ProgressSize } from './props';
import { progressProps } from './props'; import { progressProps } from './props';
import { getSize } from './utils';
export const stepsProps = () => ({ export const stepsProps = () => ({
...progressProps(), ...progressProps(),
@ -10,11 +12,11 @@ export const stepsProps = () => ({
size: { size: {
type: String as PropType<ProgressSize>, type: String as PropType<ProgressSize>,
}, },
strokeColor: String, strokeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
trailColor: String, trailColor: String,
}); });
export type StepsProps = Partial<ExtractPropTypes<typeof stepsProps>>; export type StepsProps = Partial<ExtractPropTypes<ReturnType<typeof stepsProps>>>;
export default defineComponent({ export default defineComponent({
compatConfig: { MODE: 3 }, compatConfig: { MODE: 3 },
@ -22,13 +24,22 @@ export default defineComponent({
props: stepsProps(), props: stepsProps(),
setup(props, { slots }) { setup(props, { slots }) {
const current = computed(() => Math.round(props.steps * ((props.percent || 0) / 100))); 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 styledSteps = computed(() => {
const { steps, strokeWidth = 8, strokeColor, trailColor, prefixCls } = props; const { steps, strokeColor, trailColor, prefixCls } = props;
const temp: VueNode[] = []; const temp: VueNode[] = [];
for (let i = 0; i < steps; i += 1) { for (let i = 0; i < steps; i += 1) {
const color = Array.isArray(strokeColor) ? strokeColor[i] : strokeColor;
const cls = { const cls = {
[`${prefixCls}-steps-item`]: true, [`${prefixCls}-steps-item`]: true,
[`${prefixCls}-steps-item-active`]: i <= current.value - 1, [`${prefixCls}-steps-item-active`]: i <= current.value - 1,
@ -38,9 +49,9 @@ export default defineComponent({
key={i} key={i}
class={cls} class={cls}
style={{ style={{
backgroundColor: i <= current.value - 1 ? strokeColor : trailColor, backgroundColor: i <= current.value - 1 ? color : trailColor,
width: `${stepWidth.value}px`, width: `${sizeRef.value.width / steps}px`,
height: `${strokeWidth}px`, height: `${sizeRef.value.height}px`,
}} }}
/>, />,
); );

346
components/progress/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/progress/demo/circle.vue correctly 1`] = ` exports[`renders ./components/progress/demo/circle.vue correctly 1`] = `
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<!----> <!---->
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
@ -15,7 +15,7 @@ exports[`renders ./components/progress/demo/circle.vue correctly 1`] = `
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 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;"></path> a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 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;"></path>
</svg><span class="ant-progress-text" title="75%">75%</span></div> </svg><span class="ant-progress-text" title="75%">75%</span></div>
</div> </div>
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-exception"> <div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<!----> <!---->
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
@ -29,7 +29,7 @@ exports[`renders ./components/progress/demo/circle.vue correctly 1`] = `
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 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;"></path> a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 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;"></path>
</svg><span class="ant-progress-text"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></div> </svg><span class="ant-progress-text"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></div>
</div> </div>
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-success"> <div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<!----> <!---->
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
@ -47,7 +47,7 @@ exports[`renders ./components/progress/demo/circle.vue correctly 1`] = `
exports[`renders ./components/progress/demo/circle-dynamic.vue correctly 1`] = ` exports[`renders ./components/progress/demo/circle-dynamic.vue correctly 1`] = `
<div> <div>
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<!----> <!---->
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
@ -61,12 +61,28 @@ exports[`renders ./components/progress/demo/circle-dynamic.vue correctly 1`] = `
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 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;"></path> a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 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;"></path>
</svg><span class="ant-progress-text" title="0%">0%</span></div> </svg><span class="ant-progress-text" title="0%">0%</span></div>
</div> </div>
<div class="ant-btn-group"><button class="ant-btn ant-btn-icon-only" type="button"><span role="img" aria-label="minus" class="anticon anticon-minus"><svg focusable="false" class="" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg></span></button><button class="ant-btn ant-btn-icon-only" type="button"><span role="img" aria-label="plus" class="anticon anticon-plus"><svg focusable="false" class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span></button></div> <div class="ant-btn-group css-dev-only-do-not-override-1etm4mv"><button class="css-dev-only-do-not-override-1etm4mv ant-btn ant-btn-default ant-btn-icon-only" type="button"><span role="img" aria-label="minus" class="anticon anticon-minus"><svg focusable="false" class="" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg></span></button><button class="css-dev-only-do-not-override-1etm4mv ant-btn ant-btn-default ant-btn-icon-only" type="button"><span role="img" aria-label="plus" class="anticon anticon-plus"><svg focusable="false" class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span></button></div>
</div>
`;
exports[`renders ./components/progress/demo/circle-micro.vue correctly 1`] = `
<div>
<div role="progressbar" class="ant-progress ant-progress-inline-circle ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-12 css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 12px; height: 12px; font-size: 7.8px;">
<!----><span><svg class="ant-progress-circle" viewBox="0 0 100 100"><!----><path d="M 50,50 m 0,-40
a 40,40 0 1 1 0,80
a 40,40 0 1 1 0,-80" stroke="#e6f4ff" stroke-linecap="round" stroke-width="20" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #e6f4ff; stroke-dasharray: 251.32741228718345px 251.32741228718345px; 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;"></path><path d="M 50,50 m 0,-40
a 40,40 0 1 1 0,80
a 40,40 0 1 1 0,-80" stroke="" stroke-linecap="round" stroke-width="20" opacity="1" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 150.79644737231007px 251.32741228718345px; 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;"></path><path d="M 50,50 m 0,-40
a 40,40 0 1 1 0,80
a 40,40 0 1 1 0,-80" stroke="" stroke-linecap="round" stroke-width="20" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 251.32741228718345px; 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;"></path></svg></span>
</div>
</div><span>代码发布</span>
</div> </div>
`; `;
exports[`renders ./components/progress/demo/circle-mini.vue correctly 1`] = ` exports[`renders ./components/progress/demo/circle-mini.vue correctly 1`] = `
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-80 css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 80px; height: 80px; font-size: 18px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner" style="width: 80px; height: 80px; font-size: 18px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<!----> <!---->
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
@ -80,7 +96,7 @@ exports[`renders ./components/progress/demo/circle-mini.vue correctly 1`] = `
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 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;"></path> a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 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;"></path>
</svg><span class="ant-progress-text" title="30%">30%</span></div> </svg><span class="ant-progress-text" title="30%">30%</span></div>
</div> </div>
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-exception"> <div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-80 css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 80px; height: 80px; font-size: 18px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner" style="width: 80px; height: 80px; font-size: 18px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<!----> <!---->
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
@ -94,7 +110,7 @@ exports[`renders ./components/progress/demo/circle-mini.vue correctly 1`] = `
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 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;"></path> a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 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;"></path>
</svg><span class="ant-progress-text"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></div> </svg><span class="ant-progress-text"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></div>
</div> </div>
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-success"> <div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-80 css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 80px; height: 80px; font-size: 18px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner" style="width: 80px; height: 80px; font-size: 18px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<!----> <!---->
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
@ -112,7 +128,7 @@ exports[`renders ./components/progress/demo/circle-mini.vue correctly 1`] = `
exports[`renders ./components/progress/demo/dashboard.vue correctly 1`] = ` exports[`renders ./components/progress/demo/dashboard.vue correctly 1`] = `
<div> <div>
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<!----> <!---->
<path d="M 50,50 m 0,47 <path d="M 50,50 m 0,47
@ -131,21 +147,21 @@ exports[`renders ./components/progress/demo/dashboard.vue correctly 1`] = `
exports[`renders ./components/progress/demo/dynamic.vue correctly 1`] = ` exports[`renders ./components/progress/demo/dynamic.vue correctly 1`] = `
<div> <div>
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer"> <div class="ant-progress-outer" style="width: 100%; height: 8px;">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 0%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 0%; height: 8px;"></div>
<!----> <!---->
</div> </div>
</div><span class="ant-progress-text" title="0%">0%</span> </div><span class="ant-progress-text" title="0%">0%</span>
</div> </div>
<div class="ant-btn-group"><button class="ant-btn ant-btn-icon-only" type="button"><span role="img" aria-label="minus" class="anticon anticon-minus"><svg focusable="false" class="" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg></span></button><button class="ant-btn ant-btn-icon-only" type="button"><span role="img" aria-label="plus" class="anticon anticon-plus"><svg focusable="false" class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span></button></div> <div class="ant-btn-group css-dev-only-do-not-override-1etm4mv"><button class="css-dev-only-do-not-override-1etm4mv ant-btn ant-btn-default ant-btn-icon-only" type="button"><span role="img" aria-label="minus" class="anticon anticon-minus"><svg focusable="false" class="" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg></span></button><button class="css-dev-only-do-not-override-1etm4mv ant-btn ant-btn-default ant-btn-icon-only" type="button"><span role="img" aria-label="plus" class="anticon anticon-plus"><svg focusable="false" class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span></button></div>
</div> </div>
`; `;
exports[`renders ./components/progress/demo/format.vue correctly 1`] = ` exports[`renders ./components/progress/demo/format.vue correctly 1`] = `
<div> <div>
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<!----> <!---->
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
@ -159,7 +175,7 @@ exports[`renders ./components/progress/demo/format.vue correctly 1`] = `
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 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;"></path> a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 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;"></path>
</svg><span class="ant-progress-text" title="75 Days">75 Days</span></div> </svg><span class="ant-progress-text" title="75 Days">75 Days</span></div>
</div> </div>
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-success"> <div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<!----> <!---->
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
@ -173,7 +189,7 @@ exports[`renders ./components/progress/demo/format.vue correctly 1`] = `
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 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;"></path> a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 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;"></path>
</svg><span class="ant-progress-text" title="Done">Done</span></div> </svg><span class="ant-progress-text" title="Done">Done</span></div>
</div> </div>
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<!----> <!---->
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
@ -192,42 +208,23 @@ exports[`renders ./components/progress/demo/format.vue correctly 1`] = `
exports[`renders ./components/progress/demo/gradient-line.vue correctly 1`] = ` exports[`renders ./components/progress/demo/gradient-line.vue correctly 1`] = `
<div> <div>
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer"> <div class="ant-progress-outer" style="width: 100%; height: 8px;">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 99.9%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 99.9%; height: 8px;"></div>
<!----> <!---->
</div> </div>
</div><span class="ant-progress-text" title="99.9%">99.9%</span> </div><span class="ant-progress-text" title="99.9%">99.9%</span>
</div> </div>
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-active"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer"> <div class="ant-progress-outer" style="width: 100%; height: 8px;">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 99.9%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 99.9%; height: 8px;"></div>
<!----> <!---->
</div> </div>
</div><span class="ant-progress-text" title="99.9%">99.9%</span> </div><span class="ant-progress-text" title="99.9%">99.9%</span>
</div> </div>
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner ant-progress-circle-gradient" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<defs>
<linearGradient id="ant-progress-gradient-12" x1="100%" y1="0%" x2="0%" y2="0%">
<stop offset="0%" stop-color="#108ee9"></stop>
<stop offset="100%" stop-color="#87d068"></stop>
</linearGradient>
</defs>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
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;"></path>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="url(#ant-progress-gradient-12)" 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;"></path>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 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;"></path>
</svg><span class="ant-progress-text" title="90%">90%</span></div>
</div>
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-success">
<div class="ant-progress-inner ant-progress-circle-gradient" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner ant-progress-circle-gradient" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<defs> <defs>
<linearGradient id="ant-progress-gradient-13" x1="100%" y1="0%" x2="0%" y2="0%"> <linearGradient id="ant-progress-gradient-13" x1="100%" y1="0%" x2="0%" y2="0%">
@ -240,7 +237,26 @@ 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;"></path> 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;"></path>
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
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: 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;"></path> 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;"></path>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 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;"></path>
</svg><span class="ant-progress-text" title="90%">90%</span></div>
</div>
<div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner ant-progress-circle-gradient" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<defs>
<linearGradient id="ant-progress-gradient-14" x1="100%" y1="0%" x2="0%" y2="0%">
<stop offset="0%" stop-color="#108ee9"></stop>
<stop offset="100%" stop-color="#87d068"></stop>
</linearGradient>
</defs>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
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;"></path>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
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;"></path>
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 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;"></path> a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 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;"></path>
@ -250,40 +266,40 @@ exports[`renders ./components/progress/demo/gradient-line.vue correctly 1`] = `
`; `;
exports[`renders ./components/progress/demo/line.vue correctly 1`] = ` exports[`renders ./components/progress/demo/line.vue correctly 1`] = `
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer"> <div class="ant-progress-outer" style="width: 100%; height: 8px;">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 30%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 30%; height: 8px;"></div>
<!----> <!---->
</div> </div>
</div><span class="ant-progress-text" title="30%">30%</span> </div><span class="ant-progress-text" title="30%">30%</span>
</div> </div>
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-active"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer"> <div class="ant-progress-outer" style="width: 100%; height: 8px;">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 50%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 50%; height: 8px;"></div>
<!----> <!---->
</div> </div>
</div><span class="ant-progress-text" title="50%">50%</span> </div><span class="ant-progress-text" title="50%">50%</span>
</div> </div>
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-exception"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer"> <div class="ant-progress-outer" style="width: 100%; height: 8px;">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 70%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 70%; height: 8px;"></div>
<!----> <!---->
</div> </div>
</div><span class="ant-progress-text"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span> </div><span class="ant-progress-text"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span>
</div> </div>
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-success"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer"> <div class="ant-progress-outer" style="width: 100%; height: 8px;">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 100%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 100%; height: 8px;"></div>
<!----> <!---->
</div> </div>
</div><span class="ant-progress-text"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg focusable="false" class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span> </div><span class="ant-progress-text"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg focusable="false" class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span>
</div> </div>
<div class="ant-progress ant-progress-line ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer"> <div class="ant-progress-outer" style="width: 100%; height: 8px;">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 50%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 50%; height: 8px;"></div>
<!----> <!---->
@ -295,32 +311,32 @@ exports[`renders ./components/progress/demo/line.vue correctly 1`] = `
exports[`renders ./components/progress/demo/line-mini.vue correctly 1`] = ` exports[`renders ./components/progress/demo/line-mini.vue correctly 1`] = `
<div style="width: 170px;"> <div style="width: 170px;">
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-small ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-small css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer"> <div class="ant-progress-outer" style="width: 100%; height: 6px;">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 30%; height: 6px;"></div> <div class="ant-progress-bg" style="width: 30%; height: 6px;"></div>
<!----> <!---->
</div> </div>
</div><span class="ant-progress-text" title="30%">30%</span> </div><span class="ant-progress-text" title="30%">30%</span>
</div> </div>
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-small ant-progress-status-active"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-small css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer"> <div class="ant-progress-outer" style="width: 100%; height: 6px;">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 50%; height: 6px;"></div> <div class="ant-progress-bg" style="width: 50%; height: 6px;"></div>
<!----> <!---->
</div> </div>
</div><span class="ant-progress-text" title="50%">50%</span> </div><span class="ant-progress-text" title="50%">50%</span>
</div> </div>
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-small ant-progress-status-exception"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-exception ant-progress-show-info ant-progress-small css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer"> <div class="ant-progress-outer" style="width: 100%; height: 6px;">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 70%; height: 6px;"></div> <div class="ant-progress-bg" style="width: 70%; height: 6px;"></div>
<!----> <!---->
</div> </div>
</div><span class="ant-progress-text"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span> </div><span class="ant-progress-text"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span>
</div> </div>
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-small ant-progress-status-success"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-small css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer"> <div class="ant-progress-outer" style="width: 100%; height: 6px;">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 100%; height: 6px;"></div> <div class="ant-progress-bg" style="width: 100%; height: 6px;"></div>
<!----> <!---->
@ -332,15 +348,15 @@ exports[`renders ./components/progress/demo/line-mini.vue correctly 1`] = `
exports[`renders ./components/progress/demo/linecap.vue correctly 1`] = ` exports[`renders ./components/progress/demo/linecap.vue correctly 1`] = `
<div> <div>
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer"> <div class="ant-progress-outer" style="width: 100%; height: 8px;">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 75%; height: 8px; border-radius: 0;"></div> <div class="ant-progress-bg" style="width: 75%; height: 8px; border-radius: 0;"></div>
<!----> <!---->
</div> </div>
</div><span class="ant-progress-text" title="75%">75%</span> </div><span class="ant-progress-text" title="75%">75%</span>
</div> </div>
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<!----> <!---->
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
@ -354,7 +370,7 @@ exports[`renders ./components/progress/demo/linecap.vue correctly 1`] = `
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="square" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 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;"></path> a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="square" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 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;"></path>
</svg><span class="ant-progress-text" title="75%">75%</span></div> </svg><span class="ant-progress-text" title="75%">75%</span></div>
</div> </div>
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<!----> <!---->
<path d="M 50,50 m 0,47 <path d="M 50,50 m 0,47
@ -374,8 +390,8 @@ exports[`renders ./components/progress/demo/linecap.vue correctly 1`] = `
exports[`renders ./components/progress/demo/segment.vue correctly 1`] = ` exports[`renders ./components/progress/demo/segment.vue correctly 1`] = `
<div> <div>
<!----> <!---->
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer"> <div class="ant-progress-outer" style="width: 100%; height: 8px;">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 60%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 60%; height: 8px;"></div>
<div class="ant-progress-success-bg" style="width: 30%; height: 8px;"></div> <div class="ant-progress-success-bg" style="width: 30%; height: 8px;"></div>
@ -383,7 +399,7 @@ exports[`renders ./components/progress/demo/segment.vue correctly 1`] = `
</div><span class="ant-progress-text" title="60%">60%</span> </div><span class="ant-progress-text" title="60%">60%</span>
</div> </div>
<!----> <!---->
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<!----> <!---->
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
@ -398,7 +414,7 @@ exports[`renders ./components/progress/demo/segment.vue correctly 1`] = `
</svg><span class="ant-progress-text" title="60%">60%</span></div> </svg><span class="ant-progress-text" title="60%">60%</span></div>
</div> </div>
<!----> <!---->
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<!----> <!---->
<path d="M 50,50 m 0,47 <path d="M 50,50 m 0,47
@ -415,8 +431,190 @@ exports[`renders ./components/progress/demo/segment.vue correctly 1`] = `
</div> </div>
`; `;
exports[`renders ./components/progress/demo/size.vue correctly 1`] = `
<div>
<div style="width: 50%;" class="ant-space css-dev-only-do-not-override-1etm4mv ant-space-vertical">
<div class="ant-space-item" style="margin-bottom: 8px;">
<div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer" style="width: 100%; height: 8px;">
<div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 50%; height: 8px;"></div>
<!---->
</div>
</div><span class="ant-progress-text" title="50%">50%</span>
</div>
</div>
<!---->
<div class="ant-space-item" style="margin-bottom: 8px;">
<div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-small css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer" style="width: 100%; height: 6px;">
<div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 50%; height: 6px;"></div>
<!---->
</div>
</div><span class="ant-progress-text" title="50%">50%</span>
</div>
</div>
<!---->
<div class="ant-space-item">
<div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-300,20 css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer" style="height: 20px;">
<div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 50%; height: 20px;"></div>
<!---->
</div>
</div><span class="ant-progress-text" title="50%">50%</span>
</div>
</div>
<!---->
</div><br><br>
<div class="ant-space css-dev-only-do-not-override-1etm4mv ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 30px;">
<div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<!---->
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
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;"></path>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="1" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 147.6548547187203px 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;"></path>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 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;"></path>
</svg><span class="ant-progress-text" title="50%">50%</span></div>
</div>
</div>
<!---->
<div class="ant-space-item" style="margin-right: 30px;">
<div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-small css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 60px; height: 60px; font-size: 15px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<!---->
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
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;"></path>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="1" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 147.6548547187203px 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;"></path>
<path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 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;"></path>
</svg><span class="ant-progress-text" title="50%">50%</span></div>
</div>
</div>
<!---->
<div class="ant-space-item">
<div role="progressbar" class="ant-progress ant-progress-inline-circle ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-20 css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 20px; height: 20px; font-size: 9px;">
<!----><span><svg class="ant-progress-circle" viewBox="0 0 100 100"><!----><path d="M 50,50 m 0,-42.5
a 42.5,42.5 0 1 1 0,85
a 42.5,42.5 0 1 1 0,-85" stroke-linecap="round" stroke-width="15" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 267.0353755551324px 267.0353755551324px; 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;"></path><path d="M 50,50 m 0,-42.5
a 42.5,42.5 0 1 1 0,85
a 42.5,42.5 0 1 1 0,-85" stroke="" stroke-linecap="round" stroke-width="15" opacity="1" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 133.5176877775662px 267.0353755551324px; 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;"></path><path d="M 50,50 m 0,-42.5
a 42.5,42.5 0 1 1 0,85
a 42.5,42.5 0 1 1 0,-85" stroke="" stroke-linecap="round" stroke-width="15" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 267.0353755551324px; 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;"></path></svg></span>
</div>
</div>
</div>
<!---->
</div><br><br>
<div class="ant-space css-dev-only-do-not-override-1etm4mv ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 30px;">
<div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<!---->
<path d="M 50,50 m 0,47
a 47,47 0 1 1 0,-94
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: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
<path d="M 50,50 m 0,47
a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" opacity="1" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 110.15485471872029px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
<path d="M 50,50 m 0,47
a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
</svg><span class="ant-progress-text" title="50%">50%</span></div>
</div>
</div>
<!---->
<div class="ant-space-item" style="margin-right: 30px;">
<div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-small css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 60px; height: 60px; font-size: 15px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<!---->
<path d="M 50,50 m 0,47
a 47,47 0 1 1 0,-94
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: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
<path d="M 50,50 m 0,47
a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" opacity="1" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 110.15485471872029px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
<path d="M 50,50 m 0,47
a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
</svg><span class="ant-progress-text" title="50%">50%</span></div>
</div>
</div>
<!---->
<div class="ant-space-item">
<div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-20 css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 20px; height: 20px; font-size: 9px;">
<!----><span><svg class="ant-progress-circle" viewBox="0 0 100 100"><!----><path d="M 50,50 m 0,42.5
a 42.5,42.5 0 1 1 0,-85
a 42.5,42.5 0 1 1 0,85" stroke-linecap="round" stroke-width="15" fill-opacity="0" class="ant-progress-circle-trail" style="stroke-dasharray: 192.03537555513242px 267.0353755551324px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path><path d="M 50,50 m 0,42.5
a 42.5,42.5 0 1 1 0,-85
a 42.5,42.5 0 1 1 0,85" stroke="" stroke-linecap="round" stroke-width="15" opacity="1" fill-opacity="0" class="ant-progress-circle-path" style="stroke-dasharray: 96.01768777756621px 267.0353755551324px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path><path d="M 50,50 m 0,42.5
a 42.5,42.5 0 1 1 0,-85
a 42.5,42.5 0 1 1 0,85" stroke="" stroke-linecap="round" stroke-width="15" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 267.0353755551324px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path></svg></span>
</div>
</div>
</div>
<!---->
</div><br><br>
<div class="ant-space css-dev-only-do-not-override-1etm4mv ant-space-horizontal ant-space-align-center">
<div class="ant-space-item" style="margin-right: 30px;">
<div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-steps-outer">
<div class="ant-progress-steps-item ant-progress-steps-item-active" style="width: 14px; height: 8px;"></div>
<div class="ant-progress-steps-item ant-progress-steps-item-active" style="width: 14px; height: 8px;"></div>
<div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div><span class="ant-progress-text" title="50%">50%</span>
</div>
</div>
</div>
<!---->
<div class="ant-space-item" style="margin-right: 30px;">
<div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-small css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-steps-outer">
<div class="ant-progress-steps-item ant-progress-steps-item-active" style="width: 2px; height: 8px;"></div>
<div class="ant-progress-steps-item ant-progress-steps-item-active" style="width: 2px; height: 8px;"></div>
<div class="ant-progress-steps-item" style="width: 2px; height: 8px;"></div><span class="ant-progress-text" title="50%">50%</span>
</div>
</div>
</div>
<!---->
<div class="ant-space-item" style="margin-right: 30px;">
<div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-20 css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-steps-outer">
<div class="ant-progress-steps-item ant-progress-steps-item-active" style="width: 20px; height: 20px;"></div>
<div class="ant-progress-steps-item ant-progress-steps-item-active" style="width: 20px; height: 20px;"></div>
<div class="ant-progress-steps-item" style="width: 20px; height: 20px;"></div><span class="ant-progress-text" title="50%">50%</span>
</div>
</div>
</div>
<!---->
<div class="ant-space-item">
<div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-20,30 css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-steps-outer">
<div class="ant-progress-steps-item ant-progress-steps-item-active" style="width: 20px; height: 30px;"></div>
<div class="ant-progress-steps-item ant-progress-steps-item-active" style="width: 20px; height: 30px;"></div>
<div class="ant-progress-steps-item" style="width: 20px; height: 30px;"></div><span class="ant-progress-text" title="50%">50%</span>
</div>
</div>
</div>
<!---->
</div>
</div>
`;
exports[`renders ./components/progress/demo/steps.vue correctly 1`] = ` exports[`renders ./components/progress/demo/steps.vue correctly 1`] = `
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-steps-outer"> <div class="ant-progress-steps-outer">
<div class="ant-progress-steps-item ant-progress-steps-item-active" style="width: 14px; height: 8px;"></div> <div class="ant-progress-steps-item ant-progress-steps-item-active" style="width: 14px; height: 8px;"></div>
<div class="ant-progress-steps-item ant-progress-steps-item-active" style="width: 14px; height: 8px;"></div> <div class="ant-progress-steps-item ant-progress-steps-item-active" style="width: 14px; height: 8px;"></div>
@ -424,7 +622,7 @@ exports[`renders ./components/progress/demo/steps.vue correctly 1`] = `
</div> </div>
</div> </div>
<br> <br>
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-steps-outer"> <div class="ant-progress-steps-outer">
<div class="ant-progress-steps-item ant-progress-steps-item-active" style="width: 14px; height: 8px;"></div> <div class="ant-progress-steps-item ant-progress-steps-item-active" style="width: 14px; height: 8px;"></div>
<div class="ant-progress-steps-item ant-progress-steps-item-active" style="width: 14px; height: 8px;"></div> <div class="ant-progress-steps-item ant-progress-steps-item-active" style="width: 14px; height: 8px;"></div>
@ -434,7 +632,7 @@ exports[`renders ./components/progress/demo/steps.vue correctly 1`] = `
</div> </div>
</div> </div>
<br> <br>
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-small ant-progress-status-success"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-small css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-steps-outer"> <div class="ant-progress-steps-outer">
<div class="ant-progress-steps-item ant-progress-steps-item-active" style="background-color: rgb(82, 196, 26); width: 2px; height: 8px;"></div> <div class="ant-progress-steps-item ant-progress-steps-item-active" style="background-color: rgb(82, 196, 26); width: 2px; height: 8px;"></div>
<div class="ant-progress-steps-item ant-progress-steps-item-active" style="background-color: rgb(82, 196, 26); width: 2px; height: 8px;"></div> <div class="ant-progress-steps-item ant-progress-steps-item-active" style="background-color: rgb(82, 196, 26); width: 2px; height: 8px;"></div>
@ -443,4 +641,14 @@ exports[`renders ./components/progress/demo/steps.vue correctly 1`] = `
<div class="ant-progress-steps-item ant-progress-steps-item-active" style="background-color: rgb(82, 196, 26); width: 2px; height: 8px;"></div><span class="ant-progress-text"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg focusable="false" class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span> <div class="ant-progress-steps-item ant-progress-steps-item-active" style="background-color: rgb(82, 196, 26); width: 2px; height: 8px;"></div><span class="ant-progress-text"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg focusable="false" class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span>
</div> </div>
</div> </div>
<br>
<div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-steps-outer">
<div class="ant-progress-steps-item ant-progress-steps-item-active" style="background-color: rgb(82, 196, 26); width: 14px; height: 8px;"></div>
<div class="ant-progress-steps-item ant-progress-steps-item-active" style="background-color: rgb(82, 196, 26); width: 14px; height: 8px;"></div>
<div class="ant-progress-steps-item ant-progress-steps-item-active" style="background-color: rgb(245, 34, 45); width: 14px; height: 8px;"></div>
<div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div>
<div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div><span class="ant-progress-text" title="60%">60%</span>
</div>
</div>
`; `;

50
components/progress/__tests__/__snapshots__/index.test.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Progress render dashboard 295 gapDegree 1`] = ` exports[`Progress render dashboard 295 gapDegree 1`] = `
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<!----> <!---->
<path d="M 50,50 m 0,47 <path d="M 50,50 m 0,47
@ -18,7 +18,7 @@ exports[`Progress render dashboard 295 gapDegree 1`] = `
`; `;
exports[`Progress render dashboard 296 gapDegree 1`] = ` exports[`Progress render dashboard 296 gapDegree 1`] = `
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<!----> <!---->
<path d="M 50,50 m 0,47 <path d="M 50,50 m 0,47
@ -35,7 +35,7 @@ exports[`Progress render dashboard 296 gapDegree 1`] = `
`; `;
exports[`Progress render dashboard zero gapDegree 1`] = ` exports[`Progress render dashboard zero gapDegree 1`] = `
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<!----> <!---->
<path d="M 50,50 m 0,47 <path d="M 50,50 m 0,47
@ -52,8 +52,8 @@ exports[`Progress render dashboard zero gapDegree 1`] = `
`; `;
exports[`Progress render format 1`] = ` exports[`Progress render format 1`] = `
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer"> <div class="ant-progress-outer" style="width: 100%; height: 8px;">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 50%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 50%; height: 8px;"></div>
<div class="ant-progress-success-bg" style="width: 10%; height: 8px;"></div> <div class="ant-progress-success-bg" style="width: 10%; height: 8px;"></div>
@ -63,8 +63,8 @@ exports[`Progress render format 1`] = `
`; `;
exports[`Progress render negative progress 1`] = ` exports[`Progress render negative progress 1`] = `
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer"> <div class="ant-progress-outer" style="width: 100%; height: 8px;">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 0%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 0%; height: 8px;"></div>
<!----> <!---->
@ -74,8 +74,8 @@ exports[`Progress render negative progress 1`] = `
`; `;
exports[`Progress render negative successPercent 1`] = ` exports[`Progress render negative successPercent 1`] = `
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer"> <div class="ant-progress-outer" style="width: 100%; height: 8px;">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 50%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 50%; height: 8px;"></div>
<div class="ant-progress-success-bg" style="width: 0%; height: 8px;"></div> <div class="ant-progress-success-bg" style="width: 0%; height: 8px;"></div>
@ -85,8 +85,8 @@ exports[`Progress render negative successPercent 1`] = `
`; `;
exports[`Progress render normal progress 1`] = ` exports[`Progress render normal progress 1`] = `
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer"> <div class="ant-progress-outer" style="width: 100%; height: 8px;">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 0%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 0%; height: 8px;"></div>
<!----> <!---->
@ -96,8 +96,8 @@ exports[`Progress render normal progress 1`] = `
`; `;
exports[`Progress render out-of-range progress 1`] = ` exports[`Progress render out-of-range progress 1`] = `
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-success"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer"> <div class="ant-progress-outer" style="width: 100%; height: 8px;">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 100%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 100%; height: 8px;"></div>
<!----> <!---->
@ -107,8 +107,8 @@ exports[`Progress render out-of-range progress 1`] = `
`; `;
exports[`Progress render out-of-range progress with info 1`] = ` exports[`Progress render out-of-range progress with info 1`] = `
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-success"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-success ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer"> <div class="ant-progress-outer" style="width: 100%; height: 8px;">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 100%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 100%; height: 8px;"></div>
<!----> <!---->
@ -118,7 +118,7 @@ exports[`Progress render out-of-range progress with info 1`] = `
`; `;
exports[`Progress render strokeColor 1`] = ` exports[`Progress render strokeColor 1`] = `
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
<!----> <!---->
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
@ -135,8 +135,8 @@ exports[`Progress render strokeColor 1`] = `
`; `;
exports[`Progress render strokeColor 2`] = ` exports[`Progress render strokeColor 2`] = `
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer"> <div class="ant-progress-outer" style="width: 100%; height: 8px;">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 50%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 50%; height: 8px;"></div>
<!----> <!---->
@ -146,8 +146,8 @@ exports[`Progress render strokeColor 2`] = `
`; `;
exports[`Progress render strokeColor 3`] = ` exports[`Progress render strokeColor 3`] = `
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer"> <div class="ant-progress-outer" style="width: 100%; height: 8px;">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 50%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 50%; height: 8px;"></div>
<!----> <!---->
@ -157,8 +157,8 @@ exports[`Progress render strokeColor 3`] = `
`; `;
exports[`Progress render successColor progress 1`] = ` exports[`Progress render successColor progress 1`] = `
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer"> <div class="ant-progress-outer" style="width: 100%; height: 8px;">
<div class="ant-progress-inner"> <div class="ant-progress-inner">
<div class="ant-progress-bg" style="width: 60%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 60%; height: 8px;"></div>
<div class="ant-progress-success-bg" style="width: 30%; height: 8px; background-color: rgb(255, 255, 255);"></div> <div class="ant-progress-success-bg" style="width: 30%; height: 8px; background-color: rgb(255, 255, 255);"></div>
@ -168,8 +168,8 @@ exports[`Progress render successColor progress 1`] = `
`; `;
exports[`Progress render trailColor progress 1`] = ` exports[`Progress render trailColor progress 1`] = `
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-outer"> <div class="ant-progress-outer" style="width: 100%; height: 8px;">
<div class="ant-progress-inner" style="background-color: rgb(255, 255, 255);"> <div class="ant-progress-inner" style="background-color: rgb(255, 255, 255);">
<div class="ant-progress-bg" style="width: 0%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 0%; height: 8px;"></div>
<!----> <!---->
@ -179,7 +179,7 @@ exports[`Progress render trailColor progress 1`] = `
`; `;
exports[`Progress should support steps 1`] = ` exports[`Progress should support steps 1`] = `
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div role="progressbar" class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default css-dev-only-do-not-override-1etm4mv">
<div class="ant-progress-steps-outer"> <div class="ant-progress-steps-outer">
<div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div> <div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div>
<div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div> <div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div>

32
components/progress/demo/circle-micro.vue Normal file
View File

@ -0,0 +1,32 @@
<docs>
---
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.
</docs>
<template>
<div>
<a-progress
type="circle"
trail-color="#e6f4ff"
:percent="60"
:stroke-width="20"
:size="12"
:format="number => `进行中，已完成${number}%`"
/>
<span :style="{ marginLeft: 8 }">代码发布</span>
</div>
</template>

6
components/progress/demo/circle-mini.vue
View File

@ -17,7 +17,7 @@ A smaller circular progress bar.
</docs> </docs>
<template> <template>
<a-progress type="circle" :percent="30" :width="80" /> <a-progress type="circle" :percent="30" :size="80" />
<a-progress type="circle" :percent="70" :width="80" status="exception" /> <a-progress type="circle" :percent="70" :size="80" status="exception" />
<a-progress type="circle" :percent="100" :width="80" /> <a-progress type="circle" :percent="100" :size="80" />
</template> </template>

6
components/progress/demo/index.vue
View File

@ -4,6 +4,7 @@
<circle-demo /> <circle-demo />
<line-mini /> <line-mini />
<circle-mini /> <circle-mini />
<circle-micro />
<dynamic /> <dynamic />
<circle-dynamic /> <circle-dynamic />
<format /> <format />
@ -12,6 +13,7 @@
<line-cap /> <line-cap />
<gradient-line /> <gradient-line />
<steps /> <steps />
<Size />
</demo-sort> </demo-sort>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -27,9 +29,11 @@ import Segment from './segment.vue';
import LineCap from './linecap.vue'; import LineCap from './linecap.vue';
import GradientLine from './gradient-line.vue'; import GradientLine from './gradient-line.vue';
import Steps from './steps.vue'; import Steps from './steps.vue';
import CircleMicro from './circle-micro.vue';
import CN from '../index.zh-CN.md'; import CN from '../index.zh-CN.md';
import US from '../index.en-US.md'; import US from '../index.en-US.md';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import Size from './size.vue';
export default defineComponent({ export default defineComponent({
CN, CN,
@ -47,6 +51,8 @@ export default defineComponent({
LineCap, LineCap,
GradientLine, GradientLine,
Steps, Steps,
CircleMicro,
Size,
}, },
setup() { setup() {
return {}; return {};

49
components/progress/demo/size.vue Normal file
View File

@ -0,0 +1,49 @@
<docs>
---
order: 11
title:
zh-CN: 进度条尺寸
en-US: Progress bar size
---
## zh-CN
进度条尺寸。
## en-US
The size of progress.
</docs>
<template>
<div>
<a-space direction="vertical" style="width: 50%">
<a-progress :percent="50" />
<a-progress :percent="50" size="small" />
<a-progress :percent="50" :size="[300, 20]" />
</a-space>
<br />
<br />
<a-space :size="30">
<a-progress type="circle" :percent="50" />
<a-progress type="circle" :percent="50" size="small" />
<a-progress type="circle" :percent="50" :size="20" />
</a-space>
<br />
<br />
<a-space :size="30">
<a-progress type="dashboard" :percent="50" />
<a-progress type="dashboard" :percent="50" size="small" />
<a-progress type="dashboard" :percent="50" :size="20" />
</a-space>
<br />
<br />
<a-space :size="30">
<a-progress :steps="3" :percent="50" />
<a-progress :steps="3" :percent="50" size="small" />
<a-progress :steps="3" :percent="50" :size="20" />
<a-progress :steps="3" :percent="50" :size="[20, 30]" />
</a-space>
</div>
</template>

2
components/progress/demo/steps.vue
View File

@ -22,4 +22,6 @@ A progress bar with steps.
<a-progress :percent="30" :steps="5" /> <a-progress :percent="30" :steps="5" />
<br /> <br />
<a-progress :percent="100" :steps="5" size="small" stroke-color="#52c41a" /> <a-progress :percent="100" :steps="5" size="small" stroke-color="#52c41a" />
<br />
<a-progress :percent="60" :steps="5" :stroke-color="['#52c41a', '#52c41a', '#f5222d']" />
</template> </template>

23
components/progress/index.en-US.md
View File

@ -24,30 +24,28 @@ Properties that shared by all types.
| format | The template function of the content | function(percent, successPercent) | (percent) => percent + `%` | | | format | The template function of the content | function(percent, successPercent) | (percent) => percent + `%` | |
| percent | To set the completion percentage | number | 0 | | | percent | To set the completion percentage | number | 0 | |
| showInfo | Whether to display the progress value and the status icon | boolean | true | | | 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 | - | | | status | To set the status of the Progress, options: `success` `exception` `normal` `active`(line only) | string | - | |
| strokeColor | The color of progress bar | 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 } | - | | | success | Configs of successfully progress bar | { percent: number, strokeColor: string } | - | |
| title | html dom title | string | - | 3.0 | | title | html dom title | string | - | 3.0 |
| trailColor | The color of unfilled part | string | - | | | trailColor | The color of unfilled part | string | - | |
| type | To set the type, options: `line` `circle` `dashboard` | string | `line` | | | type | To set the type, options: `line` `circle` `dashboard` | string | `line` | |
| size | Progress size | number \| \[number, number] \| "small" \| "default" | "default" | |
### `type="line"` ### `type="line"`
| Property | Description | Type | Default | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| steps | The total step count | number | - | | 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 } | - | | 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 } | - | - |
| strokeWidth | To set the width of the progress bar, unit: `px` | number | 10 |
### `type="circle"` ### `type="circle"`
| Property | Description | Type | Default | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| strokeColor | The color of circular progress, render `linear-gradient` when passing an object | string \| object | - | | 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 | | 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 |
### `type="dashboard"` ### `type="dashboard"`
@ -56,4 +54,3 @@ Properties that shared by all types.
| gapDegree | The gap degree of half circle, 0 ~ 295 | number | 75 | | gapDegree | The gap degree of half circle, 0 ~ 295 | number | 75 |
| gapPosition | The gap position, options: `top` `bottom` `left` `right` | string | `bottom` | | 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 | | 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 |

33
components/progress/index.zh-CN.md
View File

@ -25,36 +25,33 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJH8Tb1lcYAAAA
| format | 内容的模板函数 | function(percent, successPercent) | (percent) => percent + `%` | | | format | 内容的模板函数 | function(percent, successPercent) | (percent) => percent + `%` | |
| percent | 百分比 | number | 0 | | | percent | 百分比 | number | 0 | |
| showInfo | 是否显示进度数值或状态图标 | boolean | true | | | showInfo | 是否显示进度数值或状态图标 | boolean | true | |
| size | 进度条大小 | `default` \| `small` | `default` |
| status | 状态，可选：`success` `exception` `normal` `active`(仅限 line) | string | - | | | status | 状态，可选：`success` `exception` `normal` `active`(仅限 line) | string | - | |
| strokeColor | 进度条的色彩 | 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 } | - | | | success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - | |
| title | html 标签 title | string | - | 3.0 | | title | html 标签 title | string | - | 3.0 |
| trailColor | 未完成的分段的颜色 | string | - | | | trailColor | 未完成的分段的颜色 | string | - | |
| type | 类型，可选 `line` `circle` `dashboard` | string | `line` | | | type | 类型，可选 `line` `circle` `dashboard` | string | `line` | |
| size | 进度条的尺寸 | number \| \[number, number] \| "small" \| "default" | "default" | |
### `type="line"` ### `type="line"`
| 属性 | 说明 | 类型 | 默认值 | | 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| steps | 进度条总共步数 | number | - | | steps | 进度条总共步数 | number | - | - |
| strokeColor | 进度条的色彩，传入 object 时为渐变 | string \| { from: string; to: string; direction: string } | - | | strokeColor | 进度条的色彩，传入 object 时为渐变。当有 `steps` 时支持传入一个数组。 | string \| string[] \| { from: string; to: string; direction: string } | - | - |
| strokeWidth | 进度条线的宽度，单位 px | number | 10 |
### `type="circle"` ### `type="circle"`
| 属性 | 说明 | 类型 | 默认值 | | 属性 | 说明 | 类型 | 默认值 | 版本 |
| ----------- | ------------------------------------------------ | ---------------- | ------ | | --- | --- | --- | --- | --- |
| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| object | - | | strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| object | - | - |
| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | | strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - |
| width | 圆形进度条画布宽度，单位 px | number | 132 |
### `type="dashboard"` ### `type="dashboard"`
| 属性 | 说明 | 类型 | 默认值 | | 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 295 | number | 75 | | gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 295 | number | 75 | - |
| gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `bottom` | | gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `bottom` | - |
| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | | strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - |
| width | 仪表盘进度条画布宽度，单位 px | number | 132 |

46
components/progress/progress.tsx
View File

@ -7,7 +7,7 @@ import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
import Line from './Line'; import Line from './Line';
import Circle from './Circle'; import Circle from './Circle';
import Steps from './Steps'; import Steps from './Steps';
import { getSuccessPercent, validProgress } from './utils'; import { getSize, getSuccessPercent, validProgress } from './utils';
import useConfigInject from '../config-provider/hooks/useConfigInject'; import useConfigInject from '../config-provider/hooks/useConfigInject';
import devWarning from '../vc-util/devWarning'; import devWarning from '../vc-util/devWarning';
import { progressProps, progressStatuses } from './props'; import { progressProps, progressStatuses } from './props';
@ -31,12 +31,18 @@ export default defineComponent({
setup(props, { slots, attrs }) { setup(props, { slots, attrs }) {
const { prefixCls, direction } = useConfigInject('progress', props); const { prefixCls, direction } = useConfigInject('progress', props);
const [wrapSSR, hashId] = useStyle(prefixCls); const [wrapSSR, hashId] = useStyle(prefixCls);
devWarning( if (process.env.NODE_ENV !== 'production') {
props.successPercent == undefined, devWarning(
'Progress', 'successPercent' in props,
'`successPercent` is deprecated. Please use `success.percent` instead.', '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 percentNumber = computed(() => {
const { percent = 0 } = props; const { percent = 0 } = props;
const successPercent = getSuccessPercent(props); const successPercent = getSuccessPercent(props);
@ -59,7 +65,7 @@ export default defineComponent({
const pre = prefixCls.value; const pre = prefixCls.value;
return { return {
[pre]: true, [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}-${(type === 'dashboard' && 'circle') || type}`]: true,
[`${pre}-status-${progressStatus.value}`]: true, [`${pre}-status-${progressStatus.value}`]: true,
[`${pre}-show-info`]: showInfo, [`${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 renderProcessInfo = () => {
const { showInfo, format, type, percent, title } = props; const { showInfo, format, type, percent, title } = props;
const successPercent = getSuccessPercent(props); const successPercent = getSuccessPercent(props);
@ -99,35 +111,43 @@ export default defineComponent({
}; };
return () => { return () => {
const { type, steps, strokeColor, title } = props; const { type, steps, title } = props;
const { class: cls, ...restAttrs } = attrs; const { class: cls, ...restAttrs } = attrs;
const progressInfo = renderProcessInfo(); const progressInfo = renderProcessInfo();
let progress: VueNode; let progress: VueNode;
// Render progress shape // Render progress shape
if (type === 'line') { if (type === 'line') {
progress = steps ? ( progress = steps ? (
<Steps <Steps
{...props} {...props}
strokeColor={typeof strokeColor === 'string' ? strokeColor : undefined} strokeColor={strokeColorNotGradient.value}
prefixCls={prefixCls.value} prefixCls={prefixCls.value}
steps={steps} steps={steps}
> >
{progressInfo} {progressInfo}
</Steps> </Steps>
) : ( ) : (
<Line {...props} prefixCls={prefixCls.value}> <Line
{...props}
strokeColor={strokeColorNotArray.value}
prefixCls={prefixCls.value}
direction={direction.value}
>
{progressInfo} {progressInfo}
</Line> </Line>
); );
} else if (type === 'circle' || type === 'dashboard') { } else if (type === 'circle' || type === 'dashboard') {
progress = ( progress = (
<Circle {...props} prefixCls={prefixCls.value}> <Circle
{...props}
prefixCls={prefixCls.value}
strokeColor={strokeColorNotArray.value}
progressStatus={progressStatus.value}
>
{progressInfo} {progressInfo}
</Circle> </Circle>
); );
} }
return wrapSSR( return wrapSSR(
<div role="progressbar" {...restAttrs} class={[classString.value, cls]} title={title}> <div role="progressbar" {...restAttrs} class={[classString.value, cls]} title={title}>
{progress} {progress}

10
components/progress/props.ts
View File

@ -1,5 +1,5 @@
import type { VueNode } from '../_util/type'; 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'; import type { ExtractPropTypes } from 'vue';
export const progressStatuses = ['normal', 'exception', 'active', 'success'] as const; 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; const ProgressType = ['line', 'circle', 'dashboard'] as const;
export type ProgressType = (typeof ProgressType)[number]; export type ProgressType = (typeof ProgressType)[number];
const ProgressSize = ['default', 'small'] as const; 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 }; export type StringGradients = { [percentage: string]: string };
type FromToGradients = { from: string; to: string }; type FromToGradients = { from: string; to: string };
export type ProgressGradient = { direction?: string } & (StringGradients | FromToGradients); export type ProgressGradient = { direction?: string } & (StringGradients | FromToGradients);
@ -28,17 +28,19 @@ export const progressProps = () => ({
showInfo: { type: Boolean, default: undefined }, showInfo: { type: Boolean, default: undefined },
strokeWidth: Number, strokeWidth: Number,
strokeLinecap: stringType<'butt' | 'square' | 'round'>(), strokeLinecap: stringType<'butt' | 'square' | 'round'>(),
strokeColor: anyType<string | ProgressGradient>(), strokeColor: anyType<string | string[] | ProgressGradient>(),
trailColor: String, trailColor: String,
/** @deprecated Use `size` instead */
width: Number, width: Number,
success: objectType<SuccessProps>(), success: objectType<SuccessProps>(),
gapDegree: Number, gapDegree: Number,
gapPosition: stringType<'top' | 'bottom' | 'left' | 'right'>(), gapPosition: stringType<'top' | 'bottom' | 'left' | 'right'>(),
size: stringType<ProgressSize>(), size: someType<ProgressSize>([String, Number, Array]),
steps: Number, steps: Number,
/** @deprecated Use `success` instead */ /** @deprecated Use `success` instead */
successPercent: Number, successPercent: Number,
title: String, title: String,
progressStatus: stringType<ProgressStatusesType>(),
}); });
export type ProgressProps = Partial<ExtractPropTypes<ReturnType<typeof progressProps>>>; export type ProgressProps = Partial<ExtractPropTypes<ReturnType<typeof progressProps>>>;

52
components/progress/utils.ts
View File

@ -42,3 +42,55 @@ export function getStrokeColor({
const { strokeColor: successColor } = success; const { strokeColor: successColor } = success;
return [successColor || presetPrimaryColors.green, strokeColor || null!]; 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 };
};

1
components/vc-progress/src/Circle.tsx
View File

@ -149,7 +149,6 @@ export default defineComponent({
class: `${prefixCls}-circle-trail`, class: `${prefixCls}-circle-trail`,
style: pathStyle, style: pathStyle,
}; };
return ( return (
<svg class={`${prefixCls}-circle`} viewBox="0 0 100 100" {...restProps}> <svg class={`${prefixCls}-circle`} viewBox="0 0 100 100" {...restProps}>
{gradient && ( {gradient && (