Skip to content

Commit f88ce93

Browse files
tangjinzhoutangjinzhou
committed
feat: steps add type、 v-model、subTitle
1 parent 7c7b416 commit f88ce93

File tree

16 files changed

+713
-199
lines changed

16 files changed

+713
-199
lines changed

‎build/config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module.exports = {
22
dev: {
3-
componentName: 'input', // dev components
3+
componentName: 'steps', // dev components
44
},
55
};

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

Lines changed: 449 additions & 149 deletions
Large diffs are not rendered by default.

‎components/steps/__tests__/index.test.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import Steps from '..';
2+
import mountTest from '../../../tests/shared/mountTest';
3+
4+
describe('Steps', () => {
5+
mountTest(Steps);
6+
});

‎components/steps/demo/clickable.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<cn>
2+
#### 可点击
3+
设置 `@change` 后，Steps 变为可点击状态。
4+
</cn>
5+
6+
<us>
7+
#### Clickable
8+
Setting `@change` makes Steps clickable.
9+
</us>
10+
11+
```tpl
12+
<template>
13+
<div>
14+
<a-steps :current="current" @change="onChange">
15+
<a-step title="Step 1" description="This is a description." />
16+
<a-step title="Step 2" description="This is a description." />
17+
<a-step title="Step 3" description="This is a description." />
18+
</a-steps>
19+
<a-divider />
20+
<a-steps v-model="current" direction="vertical">
21+
<a-step title="Step 1" description="This is a description." />
22+
<a-step title="Step 2" description="This is a description." />
23+
<a-step title="Step 3" description="This is a description." />
24+
</a-steps>
25+
</div>
26+
</template>
27+
<script>
28+
export default {
29+
data() {
30+
return {
31+
current: 0
32+
}
33+
},
34+
methods: {
35+
onChange(current) {
36+
console.log('onChange:', current);
37+
this.current = current;
38+
}
39+
},
40+
}
41+
</script>
42+
```

‎components/steps/demo/index.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import SmallSize from './small-size';
88
import StepNext from './step-next';
99
import VerticalSmall from './vertical-small';
1010
import Vertical from './vertical';
11+
import Clickable from './clickable';
12+
import Nav from './nav';
1113
import CN from '../index.zh-CN.md';
1214
import US from '../index.en-US.md';
1315
@@ -58,6 +60,8 @@ export default {
5860
<br />
5961
<CustomizedProgressDot />
6062
<br />
63+
<Clickable />
64+
<Nav />
6165
<api>
6266
<template slot="cn">
6367
<CN />

‎components/steps/demo/nav.md

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<cn>
2+
#### 导航步骤
3+
导航类型的步骤条。
4+
</cn>
5+
6+
<us>
7+
#### Navigation Steps
8+
Navigation steps.
9+
</us>
10+
11+
```tpl
12+
<template>
13+
<div>
14+
<a-steps
15+
type="navigation"
16+
size="small"
17+
v-model="current"
18+
:style="stepStyle"
19+
>
20+
<a-step
21+
title="Step 1"
22+
subTitle="00:00:05"
23+
status="finish"
24+
description="This is a description."
25+
/>
26+
<a-step
27+
title="Step 2"
28+
subTitle="00:01:02"
29+
status="process"
30+
description="This is a description."
31+
/>
32+
<a-step
33+
title="Step 3"
34+
subTitle="waiting for longlong time"
35+
status="wait"
36+
description="This is a description."
37+
/>
38+
</a-steps>
39+
<a-steps type="navigation" v-model="current" :style="stepStyle">
40+
<a-step status="finish" title="Step 1" />
41+
<a-step status="process" title="Step 2" />
42+
<a-step status="wait" title="Step 3" />
43+
<a-step status="wait" title="Step 4" />
44+
</a-steps>
45+
<a-steps
46+
type="navigation"
47+
size="small"
48+
v-model="current"
49+
:style="stepStyle"
50+
>
51+
<a-step status="finish" title="finish 1" />
52+
<a-step status="finish" title="finish 2" />
53+
<a-step status="process" title="current process" />
54+
<a-step status="wait" title="wait" disabled />
55+
</a-steps>
56+
</div>
57+
</template>
58+
<script>
59+
export default {
60+
data() {
61+
return {
62+
current: 0,
63+
stepStyle: {
64+
marginBottom: '60px',
65+
boxShadow: '0px -1px 0 0 #e8e8e8 inset',
66+
}
67+
}
68+
}
69+
}
70+
</script>
71+
```

‎components/steps/demo/progress-dot.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,20 @@ Steps with progress dot style.
1010

1111
```tpl
1212
<template>
13+
<div>
1314
<a-steps progressDot :current="1">
1415
<a-step title="Finished" description="This is a description." />
1516
<a-step title="In Progress" description="This is a description." />
1617
<a-step title="Waiting" description="This is a description." />
1718
</a-steps>
19+
<a-divider />
20+
<a-steps progressDot :current="1" direction="vertical">
21+
<a-step title="Finished" description="This is a description. This is a description." />
22+
<a-step title="Finished" description="This is a description. This is a description." />
23+
<a-step title="In Progress" description="This is a description. This is a description." />
24+
<a-step title="Waiting" description="This is a description." />
25+
<a-step title="Waiting" description="This is a description." />
26+
</a-steps>
27+
</div>
1828
</template>
1929
```

‎components/steps/demo/simple.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ The most basic step bar.
1818
</template>
1919
<span slot="description">This is a description.</span>
2020
</a-step>
21-
<a-step title="In Progress" description="This is a description." />
21+
<a-step title="In Progress" subTitle="Left 00:00:08" description="This is a description." />
2222
<a-step title="Waiting" description="This is a description." />
2323
</a-steps>
2424
</template>

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

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,32 @@
22

33
The whole of the step bar.
44

5-
| Property | Description | Type | Default |
6-
| --- | --- | --- | --- |
7-
| current | to set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0 |
8-
| direction | to specify the direction of the step bar, `horizontal` and `vertical` are currently supported | string | `horizontal` |
9-
| labelPlacement | support vertial title and description | string | `horizontal` |
10-
| progressDot | Steps with progress dot style, customize the progress dot by setting a scoped slot. labelPlacement will be `vertical` | Boolean or slot="progressDot" slot-scope="{index, status, title, description, prefixCls})" | false |
11-
| size | to specify the size of the step bar, `default` and `small` are currently supported | string | `default` |
12-
| status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` |
13-
| initial | set the initial step, counting from 0 | number | 0 |
5+
| Property | Description | Type | Default | Version |
6+
| --- | --- | --- | --- | --- |
7+
| 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 | |
8+
| type | Type of steps, can be set to one of the following values: `default`, `navigation` | string | `default` | 1.5.0 |
9+
| direction | to specify the direction of the step bar, `horizontal` and `vertical` are currently supported | string | `horizontal` | |
10+
| labelPlacement | support vertial title and description | string | `horizontal` | |
11+
| progressDot | Steps with progress dot style, customize the progress dot by setting a scoped slot. labelPlacement will be `vertical` | Boolean or slot="progressDot" slot-scope="{index, status, title, description, prefixCls})" | false | |
12+
| size | to specify the size of the step bar, `default` and `small` are currently supported | string | `default` | |
13+
| status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` | |
14+
| initial | set the initial step, counting from 0 | number | 0 | |
15+
16+
#### Steps Events
17+
18+
| Events Name | Description | Arguments | Version |
19+
| ----------- | ---------------------------- | ----------------- | ------- |
20+
| change | Trigger when Step is changed | (current) => void | - | 1.5.0 |
1421

1522
### Steps.Step
1623

1724
A single step in the step bar.
1825

19-
| Property | Description | Type | Default |
20-
| --- | --- | --- | --- |
21-
| description | description of the step, optional property | string\|slot | - |
22-
| icon | icon of the step, optional property | string\|slot | - |
23-
| status | to specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | string | `wait` |
24-
| title | title of the step | string\|slot | - |
26+
| Property | Description | Type | Default | Version |
27+
| --- | --- | --- | --- | --- |
28+
| description | description of the step, optional property | string\|slot | - | |
29+
| icon | icon of the step, optional property | string\|slot | - | |
30+
| status | to specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | string | `wait` | |
31+
| title | title of the step | string\|slot | - | |
32+
| subTitle | Subtitle of the step | string\|slot | - | 1.5.0 |
33+
| disabled | Disable click | boolean | false | 1.5.0 |

‎components/steps/index.jsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const getStepsProps = (defaultProps = {}) => {
1616
size: PropTypes.oneOf(['default', 'small']),
1717
direction: PropTypes.oneOf(['horizontal', 'vertical']),
1818
progressDot: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
19+
type: PropTypes.oneOf(['default', 'navigation']),
1920
};
2021
return initDefaultProps(props, defaultProps);
2122
};
@@ -28,6 +29,10 @@ const Steps = {
2829
inject: {
2930
configProvider: { default: () => ConfigConsumerProps },
3031
},
32+
model: {
33+
prop: 'current',
34+
event: 'change',
35+
},
3136
Step: { ...VcSteps.Step, name: 'AStep' },
3237
render() {
3338
const props = getOptionProps(this);

0 commit comments

Comments
 (0)