stype: update steps ts type

components/steps/index.tsx

@@ -1,43 +1,47 @@
-import type { App, ExtractPropTypes } from 'vue';
+import type { App, ExtractPropTypes, PropType } from 'vue';
 import { computed, defineComponent } from 'vue';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import CheckOutlined from '@ant-design/icons-vue/CheckOutlined';
-import PropTypes, { withUndefined } from '../_util/vue-types';
+import PropTypes from '../_util/vue-types';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
 import VcSteps, { Step as VcStep } from '../vc-steps';
-import { tuple } from '../_util/type';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import useBreakpoint from '../_util/hooks/useBreakpoint';
 import classNames from '../_util/classNames';
 import Progress from '../progress';
 import omit from '../_util/omit';
 import { VcStepProps } from '../vc-steps/Step';
+import type { ProgressDotRender } from '../vc-steps/Steps';
+import type { MouseEventHandler } from '../_util/EventInterface';
 
 export const stepsProps = () => ({
-  prefixCls: PropTypes.string,
+  prefixCls: String,
-  iconPrefix: PropTypes.string,
+  iconPrefix: String,
-  current: PropTypes.number,
+  current: Number,
-  initial: PropTypes.number,
+  initial: Number,
-  percent: PropTypes.number,
+  percent: Number,
-  responsive: PropTypes.looseBool,
+  responsive: { type: Boolean, default: undefined },
-  labelPlacement: PropTypes.oneOf(tuple('horizontal', 'vertical')).def('horizontal'),
+  labelPlacement: String as PropType<'horizontal' | 'vertical'>,
-  status: PropTypes.oneOf(tuple('wait', 'process', 'finish', 'error')),
+  status: String as PropType<'wait' | 'process' | 'finish' | 'error'>,
-  size: PropTypes.oneOf(tuple('default', 'small')),
+  size: String as PropType<'default' | 'small'>,
-  direction: PropTypes.oneOf(tuple('horizontal', 'vertical')),
+  direction: String as PropType<'horizontal' | 'vertical'>,
-  progressDot: withUndefined(PropTypes.oneOfType([PropTypes.looseBool, PropTypes.func])),
+  progressDot: {
-  type: PropTypes.oneOf(tuple('default', 'navigation')),
+    type: [Boolean, Function] as PropType<boolean | ProgressDotRender>,
-  onChange: PropTypes.func,
+    default: undefined as boolean | ProgressDotRender,
-  'onUpdate:current': PropTypes.func,
+  },
+  type: String as PropType<'default' | 'navigation'>,
+  onChange: Function as PropType<(current: number) => void>,
+  'onUpdate:current': Function as PropType<(current: number) => void>,
 });
 
 export const stepProps = () => ({
   description: PropTypes.any,
   icon: PropTypes.any,
-  status: PropTypes.oneOf(tuple('wait', 'process', 'finish', 'error')),
+  status: String as PropType<'wait' | 'process' | 'finish' | 'error'>,
-  disabled: PropTypes.looseBool,
+  disabled: { type: Boolean, default: undefined },
   title: PropTypes.any,
   subTitle: PropTypes.any,
-  onClick: PropTypes.func,
+  onClick: Function as PropType<MouseEventHandler>,
 });
 
 export type StepsProps = Partial<ExtractPropTypes<ReturnType<typeof stepsProps>>>;
@@ -50,6 +54,7 @@ const Steps = defineComponent({
   props: initDefaultProps(stepsProps(), {
     current: 0,
     responsive: true,
+    labelPlacement: 'horizontal',
   }),
   slots: ['progressDot'],
   emits: ['update:current', 'change'],

components/steps/style/index.less

@@ -74,6 +74,7 @@
       line-height: 1;
     }
   }
+
   &-tail {
     position: absolute;
     top: 12px;
@@ -91,6 +92,7 @@
       content: '';
     }
   }
+
   &-title {
     position: relative;
     display: inline-block;
@@ -110,6 +112,7 @@
       content: '';
     }
   }
+
   &-subtitle {
     display: inline;
     margin-left: 8px;
@@ -117,18 +120,21 @@
     font-weight: normal;
     font-size: @font-size-base;
   }
+
   &-description {
     color: @text-color-secondary;
     font-size: @font-size-base;
   }
   .step-item-status(wait);
   .step-item-status(process);
+
   &-process > &-container > &-icon {
     background: @process-icon-color;
     .@{steps-prefix-cls}-icon {
       color: @process-icon-text-color;
     }
   }
+
   &-process > &-container > &-title {
     font-weight: 500;
   }
@@ -197,9 +203,11 @@
     &:last-child .@{steps-prefix-cls}-item-title {
       padding-right: 0;
     }
+
     &-tail {
       display: none;
     }
+
     &-description {
       max-width: @steps-description-max-width;
       white-space: normal;
@@ -224,6 +232,7 @@
   }
   &-@{status} > &-container > &-content > &-title {
     color: @@title-color;
+
     &::after {
       background-color: @@tail-color;
     }

components/steps/style/label-placement.less

@@ -1,27 +1,33 @@
 .@{steps-prefix-cls}-label-vertical {
   .@{steps-prefix-cls}-item {
     overflow: visible;
+
     &-tail {
       margin-left: 58px;
       padding: 3.5px 24px;
     }
+
     &-content {
       display: block;
       width: ((@steps-icon-size / 2) + 42px) * 2;
       margin-top: 8px;
       text-align: center;
     }
+
     &-icon {
       display: inline-block;
       margin-left: 42px;
     }
+
     &-title {
       padding-right: 0;
       padding-left: 0;
+
       &::after {
         display: none;
       }
     }
+
     &-subtitle {
       display: block;
       margin-bottom: 4px;

components/steps/style/nav.less

@@ -41,6 +41,7 @@
     &:not(.@{steps-prefix-cls}-item-active) {
       .@{steps-prefix-cls}-item-container[role='button'] {
         cursor: pointer;
+
         &:hover {
           opacity: 0.85;
         }
@@ -49,6 +50,7 @@
 
     &:last-child {
       flex: 1;
+
       &::after {
         display: none;
       }
@@ -93,6 +95,7 @@
 .@{steps-prefix-cls}-navigation.@{steps-prefix-cls}-vertical {
   > .@{steps-prefix-cls}-item {
     margin-right: 0 !important;
+
     &::before {
       display: none;
     }
@@ -104,6 +107,7 @@
       width: 3px;
       height: calc(100% - 24px);
     }
+
     &::after {
       position: relative;
       top: -2px;

components/steps/style/progress-dot.less

@@ -4,6 +4,7 @@
     &-title {
       line-height: @line-height-base;
     }
+
     &-tail {
       top: @steps-dot-top;
       width: 100%;
@@ -19,6 +20,7 @@
     &:first-child .@{steps-prefix-cls}-icon-dot {
       left: 2px;
     }
+
     &-icon {
       width: @steps-dot-size;
       height: @steps-dot-size;
@@ -35,6 +37,7 @@
         height: 100%;
         border-radius: 100px;
         transition: all 0.3s;
+
         /* expand hover area */
         &::after {
           position: absolute;
@@ -47,6 +50,7 @@
         }
       }
     }
+
     &-content {
       width: @steps-description-max-width;
     }
@@ -68,13 +72,13 @@
 
 .@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot {
   .@{steps-prefix-cls}-item-icon {
-    margin-top: 8px;
+    margin-top: 13px;
     margin-left: 0;
     background: none;
   }
   // https://github.com/ant-design/ant-design/issues/18354
   .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
-    top: 2px;
+    top: 6.5px;
     left: -9px;
     margin: 0;
     padding: 22px 0 4px;
@@ -89,6 +93,7 @@
     .@{steps-prefix-cls}-item-container
     .@{steps-prefix-cls}-item-icon
     .@{steps-prefix-cls}-icon-dot {
-    left: -2px;
+    top: -1px;
+    left: -1px;
   }
 }

components/steps/style/rtl.less

@@ -193,6 +193,7 @@
         left: auto;
       }
     }
+
     &-icon {
       .@{steps-prefix-cls}-rtl& {
         margin-right: 67px;
@@ -203,6 +204,7 @@
         .@{steps-prefix-cls}-rtl& {
           float: right;
         }
+
         /* expand hover area */
         &::after {
           .@{steps-prefix-cls}-rtl& {

components/steps/style/small.less

@@ -20,6 +20,7 @@
     padding-right: 12px;
     font-size: @font-size-base;
     line-height: @steps-small-icon-size;
+
     &::after {
       top: (@steps-small-icon-size / 2);
     }