Skip to content

Commit b0125de

Browse files
CCherry07CCherry07
authored
feat(Steps): add items prop and variants (#6406)
* refactor(steps): add items prop and variants * feat(steps): add Label Placement and Inline Steps demo * feat(steps): Label Placement and Inline Steps snap * test(steps): Steps demo snap * feat(Steps): update docs * fix(Step): progressDot * chore(useLegacyItems): change from warning to devWarning * refactor(Steps): Remove useLegacyItems * refactor(Steps): renderStep * test(Steps): update test snapshot * chore(Steps): filterEmpty * feat(Steps): update docs
1 parent bf1e6fe commit b0125de

File tree

9 files changed

+795
-117
lines changed

9 files changed

+795
-117
lines changed

‎components/steps/__tests__/__snapshots__/demo.test.js.snap

Lines changed: 494 additions & 32 deletions
Large diffs are not rendered by default.

‎components/steps/demo/index.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
<Clickable />
1313
<Nav />
1414
<Progress />
15+
<LabelPlacement />
16+
<Inline />
1517
</demo-sort>
1618
</template>
1719
<script lang="ts">
@@ -26,6 +28,8 @@ import VerticalSmall from './vertical-small.vue';
2628
import Vertical from './vertical.vue';
2729
import Clickable from './clickable.vue';
2830
import Progress from './progress.vue';
31+
import LabelPlacement from './label-placement.vue';
32+
import Inline from './inline.vue';
2933
import Nav from './nav.vue';
3034
import CN from '../index.zh-CN.md';
3135
import US from '../index.en-US.md';
@@ -47,6 +51,8 @@ export default defineComponent({
4751
Clickable,
4852
Nav,
4953
Progress,
54+
LabelPlacement,
55+
Inline,
5056
},
5157
setup() {
5258
return {};

‎components/steps/demo/inline.vue

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<docs>
2+
---
3+
order: 3
4+
title:
5+
zh-CN: 内联步骤条
6+
en-US: Inline Steps
7+
---
8+
9+
## zh-CN
10+
11+
内联类型的步骤条，适用于列表内容场景中展示对象所在流程、当前状态的情况。
12+
13+
## en-US
14+
15+
Inline type steps, suitable for displaying the process and current state of the object in the list content scene.
16+
17+
</docs>
18+
19+
<template>
20+
<a-list :data-source="data">
21+
<template #renderItem="{ item }">
22+
<a-list-item>
23+
<a-list-item-meta
24+
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
25+
>
26+
<template #title>
27+
<a href="https://www.antdv.com/">{{ item.title }}</a>
28+
</template>
29+
<template #avatar>
30+
<a-avatar src="https://joeschmoe.io/api/v1/random" />
31+
</template>
32+
</a-list-item-meta>
33+
<a-steps
34+
style="margin-top: 8px"
35+
type="inline"
36+
:current="item.current"
37+
:status="item.status"
38+
:items="items"
39+
/>
40+
</a-list-item>
41+
</template>
42+
</a-list>
43+
</template>
44+
<script lang="ts">
45+
import { defineComponent } from 'vue';
46+
import { List, Steps, Avatar } from 'ant-design-vue';
47+
48+
export default defineComponent({
49+
components: {
50+
[List.name]: List,
51+
[Steps.name]: Steps,
52+
[Avatar.name]: Avatar,
53+
},
54+
55+
setup() {
56+
const data = [
57+
{
58+
title: 'Ant Design Title 1',
59+
current: 0,
60+
},
61+
{
62+
title: 'Ant Design Title 2',
63+
current: 1,
64+
status: 'error',
65+
},
66+
{
67+
title: 'Ant Design Title 3',
68+
current: 2,
69+
},
70+
{
71+
title: 'Ant Design Title 4',
72+
current: 1,
73+
},
74+
];
75+
76+
const items = [
77+
{
78+
title: 'Step 1',
79+
description: 'This is a Step 1.',
80+
},
81+
{
82+
title: 'Step 2',
83+
description: 'This is a Step 2.',
84+
},
85+
{
86+
title: 'Step 3',
87+
description: 'This is a Step 3.',
88+
},
89+
];
90+
91+
return {
92+
data,
93+
items,
94+
};
95+
},
96+
});
97+
</script>

‎components/steps/demo/label-placement.vue

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<docs>
2+
---
3+
order: 5
4+
title:
5+
zh-CN: 标签放置位置
6+
en-US: Label Placement
7+
---
8+
9+
## zh-CN
10+
11+
修改标签放置位置为 `vertical`。
12+
13+
## en-US
14+
15+
Set labelPlacement to `vertical`.
16+
17+
</docs>
18+
<template>
19+
<div>
20+
<a-steps :current="1" label-placement="vertical" :items="items" />
21+
<br />
22+
<a-steps :current="1" :percent="60" label-placement="vertical" :items="items" />
23+
<br />
24+
<a-steps :current="1" size="small" label-placement="vertical" :items="items" />
25+
</div>
26+
</template>
27+
<script lang="ts">
28+
import { defineComponent, ref } from 'vue';
29+
30+
export default defineComponent({
31+
setup() {
32+
const items = ref([
33+
{
34+
title: 'Finished',
35+
description: 'This is a description.',
36+
},
37+
{
38+
title: 'In Progress',
39+
description: 'This is a description.',
40+
},
41+
{
42+
title: 'Waiting',
43+
description: 'This is a description.',
44+
},
45+
]);
46+
return {
47+
items,
48+
};
49+
},
50+
});
51+
</script>

‎components/steps/index.en-US.md

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAA
1111

1212
## API
1313

14-
```jsx
15-
<a-steps>
16-
<a-step title="first step" />
17-
<a-step title="second step" />
18-
<a-step title="third step" />
19-
</a-steps>
20-
```
21-
2214
### Steps
2315

2416
The whole of the step bar.
@@ -28,20 +20,32 @@ The whole of the step bar.
2820
| 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 | |
2921
| direction | to specify the direction of the step bar, `horizontal` and `vertical` are currently supported | string | `horizontal` | |
3022
| initial | set the initial step, counting from 0 | number | 0 | |
31-
| labelPlacement | support vertial title and description | string | `horizontal` | |
23+
| labelPlacement | support vertical title and description | string | `horizontal` | |
3224
| percent | Progress circle percentage of current step in `process` status (only works on basic Steps) | number | - | 3.0 |
3325
| 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 | |
3426
| responsive | change to vertical direction when screen width smaller than `532px` | boolean | true | 3.0 |
3527
| size | to specify the size of the step bar, `default` and `small` are currently supported | string | `default` | |
3628
| status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` | |
3729
| type | Type of steps, can be set to one of the following values: `default`, `navigation` | string | `default` | 1.5.0 |
30+
| items | StepItem content | [StepItem](#stepsstep) | [] | |
3831

3932
#### Steps Events
4033

4134
| Events Name | Description | Arguments | Version | |
4235
| ----------- | ---------------------------- | ----------------- | ------- | ----- |
4336
| change | Trigger when Step is changed | (current) => void | - | 1.5.0 |
4437

38+
### `type="inline"`
39+
40+
| Property | Description | Type | Default | Version |
41+
| --- | --- | --- | --- | --- |
42+
| className | Additional class to Steps | string | - | |
43+
| current | To set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0 | |
44+
| initial | Set the initial step, counting from 0 | number | 0 | |
45+
| status | To specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` | |
46+
| onChange | Trigger when Step is changed | (current) => void | - | |
47+
| items | StepItem content. not supported: `icon` `subtitle` | [StepItem](#stepsstep) | [] | 4.24.0 |
48+
4549
### Steps.Step
4650

4751
A single step in the step bar.

‎components/steps/index.tsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,19 @@ import { computed, defineComponent } from 'vue';
33
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
44
import CheckOutlined from '@ant-design/icons-vue/CheckOutlined';
55
import PropTypes from '../_util/vue-types';
6+
import type { VueNode } from '../_util/type';
67
import initDefaultProps from '../_util/props-util/initDefaultProps';
78
import VcSteps, { Step as VcStep } from '../vc-steps';
89
import useConfigInject from '../config-provider/hooks/useConfigInject';
910
import useBreakpoint from '../_util/hooks/useBreakpoint';
1011
import classNames from '../_util/classNames';
1112
import Progress from '../progress';
1213
import omit from '../_util/omit';
14+
import Tooltip from '../tooltip';
1315
import { VcStepProps } from '../vc-steps/Step';
1416
import type { ProgressDotRender } from '../vc-steps/Steps';
1517
import type { MouseEventHandler } from '../_util/EventInterface';
16-
import { booleanType, stringType, functionType, someType } from '../_util/type';
18+
import { booleanType, stringType, functionType, someType, arrayType } from '../_util/type';
1719

1820
// CSSINJS
1921
import useStyle from './style';
@@ -25,6 +27,7 @@ export const stepsProps = () => ({
2527
initial: Number,
2628
percent: Number,
2729
responsive: booleanType(),
30+
items: arrayType<StepProps[]>(),
2831
labelPlacement: stringType<'horizontal' | 'vertical'>(),
2932
status: stringType<'wait' | 'process' | 'finish' | 'error'>(),
3033
size: stringType<'default' | 'small'>(),
@@ -62,7 +65,7 @@ const Steps = defineComponent({
6265
// emits: ['update:current', 'change'],
6366
setup(props, { attrs, slots, emit }) {
6467
const { prefixCls, direction: rtlDirection, configProvider } = useConfigInject('steps', props);
65-
68+
const mergedItems = computed(() => props.items);
6669
// style
6770
const [wrapSSR, hashId] = useStyle(prefixCls);
6871

@@ -119,18 +122,23 @@ const Steps = defineComponent({
119122
attrs.class,
120123
hashId.value,
121124
);
125+
const itemRender = (item: StepProps, stepItem: VueNode) =>
126+
item.description ? <Tooltip title={item.description}>{stepItem}</Tooltip> : stepItem;
122127

123128
return wrapSSR(
124129
<VcSteps
125130
icons={icons.value}
126131
{...attrs}
127132
{...omit(props, ['percent', 'responsive'])}
133+
items={mergedItems.value}
128134
direction={direction.value}
129135
prefixCls={prefixCls.value}
130136
iconPrefix={iconPrefix.value}
131137
class={stepsClassName}
132138
onChange={handleChange}
133-
v-slots={{ ...slots, stepIcon: stepIconRender }}
139+
isInline={isInline.value}
140+
itemRender={isInline.value ? itemRender : undefined}
141+
v-slots={{ stepIcon: stepIconRender, ...slots }}
134142
/>,
135143
);
136144
};

‎components/steps/index.zh-CN.md

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAA
1616

1717
## API
1818

19-
```jsx
20-
<a-steps>
21-
<a-step title="第一步" />
22-
<a-step title="第二步" />
23-
<a-step title="第三步" />
24-
</a-steps>
25-
```
26-
2719
### Steps
2820

2921
整体步骤条。
@@ -40,13 +32,25 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAA
4032
| size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | default | |
4133
| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | process | |
4234
| type | 步骤条类型，有 `default` 和 `navigation` 两种 | string | `default` | 1.5.0 |
35+
| items | 配置选项卡内容 | [StepItem](#stepsstep)[] | [] | |
4336

4437
#### Steps 事件
4538

4639
| 事件名称 | 说明 | 回调参数 | 版本 | |
4740
| -------- | ------------------ | ----------------- | ---- | ----- |
4841
| change | 点击切换步骤时触发 | (current) => void | - | 1.5.0 |
4942

43+
### `type="inline"`
44+
45+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
46+
| --- | --- | --- | --- | --- |
47+
| className | 步骤条类名 | string | - | |
48+
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0 | |
49+
| initial | 起始序号，从 0 开始记数 | number | 0 | |
50+
| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | `process` | |
51+
| onChange | 点击切换步骤时触发 | (current) => void | - | |
52+
| items | 配置选项卡内容，不支持 `icon` `subtitle` | [StepItem](#stepsstep) | [] | 4.24.0 |
53+
5054
### Steps.Step
5155

5256
步骤条内的每一个步骤。
@@ -56,6 +60,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAA
5660
| description | 步骤的详情描述，可选 | string \| slot | - | |
5761
| disabled | 禁用点击 | boolean | false | 1.5.0 |
5862
| icon | 步骤图标的类型，可选 | string \| slot | - | |
59-
| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | wait | |
63+
| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | `wait` | |
6064
| subTitle | 子标题 | string \| slot | - | 1.5.0 |
6165
| title | 标题 | string \| slot | - | |

0 commit comments

Comments
 (0)