fix: progress borderRadius reactive #6409

Author: tangjinzhou

components/progress/Circle.tsx

@@ -28,8 +28,8 @@ export default defineComponent({
   props: initDefaultProps(circleProps(), {
     trailColor: null as unknown as string,
   }),
-  setup(props, { slots }) {
-    const originWidth = computed(() => props.width || 120);
+  setup(props, { slots, attrs }) {
+    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'));
@@ -87,7 +87,11 @@ export default defineComponent({
         />
       );
       return (
-        <div class={wrapperClassName.value} style={circleStyle.value}>
+        <div
+          {...attrs}
+          class={[wrapperClassName.value, attrs.class]}
+          style={[attrs.style as CSSProperties, circleStyle.value]}
+        >
           {sizeRef.value.width <= 20 ? (
             <Tooltip v-slots={{ title: slots.default }}>
               <span>{circleContent}</span>

components/progress/Line.tsx

@@ -1,19 +1,17 @@
-import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
+import type { CSSProperties, ExtractPropTypes } from 'vue';
 import { presetPrimaryColors } from '@ant-design/colors';
 import { computed, defineComponent } from 'vue';
 import type { Direction } from '../config-provider';
 import type { StringGradients, ProgressGradient, ProgressSize } from './props';
 import { progressProps } from './props';
 import { getSize, getSuccessPercent, validProgress } from './utils';
 import devWarning from '../vc-util/devWarning';
-import { anyType } from '../_util/type';
+import { anyType, stringType } from '../_util/type';
 
 export const lineProps = () => ({
   ...progressProps(),
   strokeColor: anyType<string | ProgressGradient>(),
-  direction: {
-    type: String as PropType<Direction>,
-  },
+  direction: stringType<Direction>(),
 });
 
 export type LineProps = Partial<ExtractPropTypes<ReturnType<typeof lineProps>>>;
@@ -86,8 +84,9 @@ export default defineComponent({
             backgroundColor: strokeColor as string,
           };
     });
-    const borderRadius =
-      props.strokeLinecap === 'square' || props.strokeLinecap === 'butt' ? 0 : undefined;
+    const borderRadius = computed(() =>
+      props.strokeLinecap === 'square' || props.strokeLinecap === 'butt' ? 0 : undefined,
+    );
 
     const trailStyle = computed<CSSProperties>(() =>
       props.trailColor
@@ -118,7 +117,7 @@ export default defineComponent({
       return {
         width: `${validProgress(percent)}%`,
         height: `${sizeRef.value.height}px`,
-        borderRadius,
+        borderRadius: borderRadius.value,
         ...backgroundProps.value,
       };
     });
@@ -131,7 +130,7 @@ export default defineComponent({
       return {
         width: `${validProgress(successPercent.value)}%`,
         height: `${sizeRef.value.height}px`,
-        borderRadius,
+        borderRadius: borderRadius.value,
         backgroundColor: success?.strokeColor,
       };
     });
@@ -143,7 +142,11 @@ export default defineComponent({
 
     return () => (
       <>
-        <div {...attrs} class={[`${props.prefixCls}-outer`, attrs.class]} style={outerStyle}>
+        <div
+          {...attrs}
+          class={[`${props.prefixCls}-outer`, attrs.class]}
+          style={[attrs.style as CSSProperties, outerStyle]}
+        >
           <div class={`${props.prefixCls}-inner`} style={trailStyle.value}>
             <div class={`${props.prefixCls}-bg`} style={percentStyle.value} />
             {successPercent.value !== undefined ? (

components/progress/Steps.tsx

@@ -1,18 +1,15 @@
-import type { ExtractPropTypes, PropType } from 'vue';
+import type { ExtractPropTypes } from 'vue';
 import { computed, defineComponent } from 'vue';
 import type { VueNode } from '../_util/type';
-import PropTypes from '../_util/vue-types';
+import { someType } from '../_util/type';
 import type { ProgressSize } from './props';
 import { progressProps } from './props';
 import { getSize } from './utils';
 
 export const stepsProps = () => ({
   ...progressProps(),
   steps: Number,
-  size: {
-    type: String as PropType<ProgressSize>,
-  },
-  strokeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  strokeColor: someType<string | string[]>(),
   trailColor: String,
 });
 

components/progress/props.ts

@@ -1,5 +1,12 @@
 import type { VueNode } from '../_util/type';
-import { someType, functionType, stringType, anyType, objectType } from '../_util/type';
+import {
+  booleanType,
+  someType,
+  functionType,
+  stringType,
+  anyType,
+  objectType,
+} from '../_util/type';
 import type { ExtractPropTypes } from 'vue';
 
 export const progressStatuses = ['normal', 'exception', 'active', 'success'] as const;
@@ -25,7 +32,7 @@ export const progressProps = () => ({
   percent: Number,
   format: functionType<(percent?: number, successPercent?: number) => VueNode>(),
   status: stringType<ProgressStatusesType>(),
-  showInfo: { type: Boolean, default: undefined },
+  showInfo: booleanType(),
   strokeWidth: Number,
   strokeLinecap: stringType<'butt' | 'square' | 'round'>(),
   strokeColor: anyType<string | string[] | ProgressGradient>(),
@@ -35,7 +42,7 @@ export const progressProps = () => ({
   success: objectType<SuccessProps>(),
   gapDegree: Number,
   gapPosition: stringType<'top' | 'bottom' | 'left' | 'right'>(),
-  size: someType<ProgressSize>([String, Number, Array]),
+  size: someType<ProgressSize | number | [number, number]>([String, Number, Array]),
   steps: Number,
   /** @deprecated Use `success` instead */
   successPercent: Number,