refactor(Steps): add items prop and variants

components/steps/demo/index.vue

@@ -12,6 +12,8 @@
     <Clickable />
     <Nav />
     <Progress />
+    <LabelPlacement />
+    <Inline />
   </demo-sort>
 </template>
 <script lang="ts">
@@ -26,6 +28,8 @@ import VerticalSmall from './vertical-small.vue';
 import Vertical from './vertical.vue';
 import Clickable from './clickable.vue';
 import Progress from './progress.vue';
+import LabelPlacement from './label-placement.vue';
+import Inline from './inline.vue';
 import Nav from './nav.vue';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
@@ -47,6 +51,8 @@ export default defineComponent({
     Clickable,
     Nav,
     Progress,
+    LabelPlacement,
+    Inline,
   },
   setup() {
     return {};

components/steps/demo/inline.vue

@@ -0,0 +1,97 @@
+<docs>
+---
+order: 3
+title:
+  zh-CN: 内联步骤条
+  en-US: Inline Steps
+---
+
+## zh-CN
+
+内联类型的步骤条，适用于列表内容场景中展示对象所在流程、当前状态的情况。
+
+## en-US
+
+Inline type steps, suitable for displaying the process and current state of the object in the list content scene.
+
+</docs>
+
+<template>
+  <a-list :data-source="data">
+    <template #renderItem="{ item }">
+      <a-list-item>
+        <a-list-item-meta
+          description="Ant Design, a design language for background applications, is refined by Ant UED Team"
+        >
+          <template #title>
+            <a href="https://www.antdv.com/">{{ item.title }}</a>
+          </template>
+          <template #avatar>
+            <a-avatar src="https://joeschmoe.io/api/v1/random" />
+          </template>
+        </a-list-item-meta>
+        <a-steps
+          style="margin-top: 8px"
+          type="inline"
+          :current="item.current"
+          :status="item.status"
+          :items="items"
+        />
+      </a-list-item>
+    </template>
+  </a-list>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { List, Steps, Avatar } from 'ant-design-vue';
+
+export default defineComponent({
+  components: {
+    [List.name]: List,
+    [Steps.name]: Steps,
+    [Avatar.name]: Avatar,
+  },
+
+  setup() {
+    const data = [
+      {
+        title: 'Ant Design Title 1',
+        current: 0,
+      },
+      {
+        title: 'Ant Design Title 2',
+        current: 1,
+        status: 'error',
+      },
+      {
+        title: 'Ant Design Title 3',
+        current: 2,
+      },
+      {
+        title: 'Ant Design Title 4',
+        current: 1,
+      },
+    ];
+
+    const items = [
+      {
+        title: 'Step 1',
+        description: 'This is a Step 1.',
+      },
+      {
+        title: 'Step 2',
+        description: 'This is a Step 2.',
+      },
+      {
+        title: 'Step 3',
+        description: 'This is a Step 3.',
+      },
+    ];
+
+    return {
+      data,
+      items,
+    };
+  },
+});
+</script>

components/steps/demo/label-placement.vue

@@ -0,0 +1,51 @@
+<docs>
+---
+order: 5
+title:
+  zh-CN: 标签放置位置
+  en-US: Label Placement
+---
+
+## zh-CN
+
+修改标签放置位置为 `vertical`。
+
+## en-US
+
+Set labelPlacement to `vertical`.
+
+</docs>
+<template>
+  <div>
+    <a-steps :current="1" label-placement="vertical" :items="items" />
+    <br />
+    <a-steps :current="1" :percent="60" label-placement="vertical" :items="items" />
+    <br />
+    <a-steps :current="1" size="small" label-placement="vertical" :items="items" />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  setup() {
+    const items = ref([
+      {
+        title: 'Finished',
+        description: 'This is a description.',
+      },
+      {
+        title: 'In Progress',
+        description: 'This is a description.',
+      },
+      {
+        title: 'Waiting',
+        description: 'This is a description.',
+      },
+    ]);
+    return {
+      items,
+    };
+  },
+});
+</script>

components/steps/index.en-US.md

@@ -11,14 +11,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAA
 
 ## API
 
-```jsx
-<a-steps>
-  <a-step title="first step" />
-  <a-step title="second step" />
-  <a-step title="third step" />
-</a-steps>
-```
-
 ### Steps
 
 The whole of the step bar.
@@ -28,20 +20,32 @@ The whole of the step bar.
 | current(v-model) | to set the current step, counting from 0. You can overwrite this state by using `status` of `Step`, support v-model after 1.5.0 | number | 0 |  |
 | direction | to specify the direction of the step bar, `horizontal` and `vertical` are currently supported | string | `horizontal` |  |
 | initial | set the initial step, counting from 0 | number | 0 |  |
-| labelPlacement | support vertial title and description | string | `horizontal` |  |
+| labelPlacement | support vertical title and description | string | `horizontal` |  |
 | percent | Progress circle percentage of current step in `process` status (only works on basic Steps) | number | - | 3.0 |
 | progressDot | Steps with progress dot style, customize the progress dot by setting a scoped slot. labelPlacement will be `vertical` | Boolean or v-slot:progressDot="{index, status, title, description, prefixCls, iconDot}" | false |  |
 | responsive | change to vertical direction when screen width smaller than `532px` | boolean | true | 3.0 |
 | size | to specify the size of the step bar, `default` and `small` are currently supported | string | `default` |  |
 | status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` |  |
 | type | Type of steps, can be set to one of the following values: `default`, `navigation` | string | `default` | 1.5.0 |
+| items | StepItem content | [StepItem](#stepsstep) | [] |  |
 
 #### Steps Events
 
 | Events Name | Description                  | Arguments         | Version |       |
 | ----------- | ---------------------------- | ----------------- | ------- | ----- |
 | change      | Trigger when Step is changed | (current) => void | -       | 1.5.0 |
 
+### `type="inline"`
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| className | Additional class to Steps | string | - |  |
+| current | To set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0 |  |
+| initial | Set the initial step, counting from 0 | number | 0 |  |
+| status | To specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` |  |
+| onChange | Trigger when Step is changed | (current) => void | - |  |
+| items | StepItem content. not supported: `icon` `subtitle` | [StepItem](#stepsstep) | [] | 4.24.0 |
+
 ### Steps.Step
 
 A single step in the step bar.

components/steps/index.tsx

@@ -3,17 +3,19 @@ import { computed, defineComponent } from 'vue';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import CheckOutlined from '@ant-design/icons-vue/CheckOutlined';
 import PropTypes from '../_util/vue-types';
+import type { VueNode } from '../_util/type';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
 import VcSteps, { Step as VcStep } from '../vc-steps';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 import useBreakpoint from '../_util/hooks/useBreakpoint';
 import classNames from '../_util/classNames';
 import Progress from '../progress';
 import omit from '../_util/omit';
+import Tooltip from '../tooltip';
 import { VcStepProps } from '../vc-steps/Step';
 import type { ProgressDotRender } from '../vc-steps/Steps';
 import type { MouseEventHandler } from '../_util/EventInterface';
-import { booleanType, stringType, functionType, someType } from '../_util/type';
+import { booleanType, stringType, functionType, someType, arrayType } from '../_util/type';
 
 // CSSINJS
 import useStyle from './style';
@@ -25,6 +27,7 @@ export const stepsProps = () => ({
   initial: Number,
   percent: Number,
   responsive: booleanType(),
+  items: arrayType<StepProps[]>(),
   labelPlacement: stringType<'horizontal' | 'vertical'>(),
   status: stringType<'wait' | 'process' | 'finish' | 'error'>(),
   size: stringType<'default' | 'small'>(),
@@ -62,7 +65,7 @@ const Steps = defineComponent({
   // emits: ['update:current', 'change'],
   setup(props, { attrs, slots, emit }) {
     const { prefixCls, direction: rtlDirection, configProvider } = useConfigInject('steps', props);
-
+    const mergedItems = computed(() => props.items);
     // style
     const [wrapSSR, hashId] = useStyle(prefixCls);
 
@@ -119,18 +122,23 @@ const Steps = defineComponent({
         attrs.class,
         hashId.value,
       );
+      const itemRender = (item: StepProps, stepItem: VueNode) =>
+        item.description ? <Tooltip title={item.description}>{stepItem}</Tooltip> : stepItem;
 
       return wrapSSR(
         <VcSteps
           icons={icons.value}
           {...attrs}
           {...omit(props, ['percent', 'responsive'])}
+          items={mergedItems.value}
           direction={direction.value}
           prefixCls={prefixCls.value}
           iconPrefix={iconPrefix.value}
           class={stepsClassName}
           onChange={handleChange}
-          v-slots={{ ...slots, stepIcon: stepIconRender }}
+          isInline={isInline.value}
+          itemRender={isInline.value ? itemRender : undefined}
+          v-slots={{ stepIcon: stepIconRender, ...slots }}
         />,
       );
     };

components/steps/index.zh-CN.md

@@ -16,14 +16,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAA
 
 ## API
 
-```jsx
-<a-steps>
-  <a-step title="第一步" />
-  <a-step title="第二步" />
-  <a-step title="第三步" />
-</a-steps>
-```
-
 ### Steps
 
 整体步骤条。
@@ -40,13 +32,25 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAA
 | size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | default |  |
 | status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | process |  |
 | type | 步骤条类型，有 `default` 和 `navigation` 两种 | string | `default` | 1.5.0 |
+| items | 配置选项卡内容 | [StepItem](#stepsstep)[] | [] |  |
 
 #### Steps 事件
 
 | 事件名称 | 说明               | 回调参数          | 版本 |       |
 | -------- | ------------------ | ----------------- | ---- | ----- |
 | change   | 点击切换步骤时触发 | (current) => void | -    | 1.5.0 |
 
+### `type="inline"`
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| className | 步骤条类名 | string | - |  |
+| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0 |  |
+| initial | 起始序号，从 0 开始记数 | number | 0 |  |
+| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | `process` |  |
+| onChange | 点击切换步骤时触发 | (current) => void | - |  |
+| items | 配置选项卡内容，不支持 `icon` `subtitle` | [StepItem](#stepsstep) | [] | 4.24.0 |
+
 ### Steps.Step
 
 步骤条内的每一个步骤。
@@ -56,6 +60,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAA
 | description | 步骤的详情描述，可选 | string \| slot | - |  |
 | disabled | 禁用点击 | boolean | false | 1.5.0 |
 | icon | 步骤图标的类型，可选 | string \| slot | - |  |
-| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | wait |  |
+| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | `wait` |  |
 | subTitle | 子标题 | string \| slot | - | 1.5.0 |
 | title | 标题 | string \| slot | - |  |