@akinon/ui-steps 0.5.0 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.d.ts +16 -0
- package/dist/cjs/index.d.ts.map +1 -1
- package/dist/cjs/index.js +287 -137
- package/dist/cjs/types.d.ts +44 -7
- package/dist/esm/index.d.ts +16 -0
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +287 -137
- package/dist/esm/types.d.ts +44 -7
- package/package.json +6 -6
package/dist/cjs/index.d.ts
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { IStepProps } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* Steps component for displaying the progress of a process with multiple stages.
|
|
5
|
+
*
|
|
6
|
+
* The Steps component is used to visually represent a sequence of steps, providing users with an understanding of their current position
|
|
7
|
+
* within a workflow or process. It supports both horizontal and vertical layouts, multiple statuses for individual steps, and customizable
|
|
8
|
+
* icons and titles for each step.
|
|
9
|
+
*
|
|
10
|
+
* Features:
|
|
11
|
+
* - Horizontal and vertical orientations.
|
|
12
|
+
* - Various step sizes (`default`, `small`) for adaptability to different layouts.
|
|
13
|
+
* - Step statuses (`wait`, `process`, `finish`, `error`) for visual feedback.
|
|
14
|
+
* - Progress dot style for streamlined visual designs.
|
|
15
|
+
* - Navigation-type steps for guiding users through processes.
|
|
16
|
+
*
|
|
17
|
+
* The Steps component ensures clear communication of multi-step processes, enhancing user engagement and understanding.
|
|
18
|
+
*/
|
|
3
19
|
export declare const Steps: ({ items, manyItems, ...restStepsProps }: IStepProps) => React.JSX.Element;
|
|
4
20
|
export type { IStepProps };
|
|
5
21
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/cjs/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,KAAK,4CAIf,UAAU,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC;;;;;;;;;;;;;;;GAeG;AAEH,eAAO,MAAM,KAAK,4CAIf,UAAU,sBAgVZ,CAAC;AAEF,YAAY,EAAE,UAAU,EAAE,CAAC"}
|
package/dist/cjs/index.js
CHANGED
|
@@ -17,6 +17,22 @@ const ui_theme_1 = require("@akinon/ui-theme");
|
|
|
17
17
|
const cssinjs_1 = require("@ant-design/cssinjs");
|
|
18
18
|
const antd_1 = require("antd");
|
|
19
19
|
const React = require("react");
|
|
20
|
+
/**
|
|
21
|
+
* Steps component for displaying the progress of a process with multiple stages.
|
|
22
|
+
*
|
|
23
|
+
* The Steps component is used to visually represent a sequence of steps, providing users with an understanding of their current position
|
|
24
|
+
* within a workflow or process. It supports both horizontal and vertical layouts, multiple statuses for individual steps, and customizable
|
|
25
|
+
* icons and titles for each step.
|
|
26
|
+
*
|
|
27
|
+
* Features:
|
|
28
|
+
* - Horizontal and vertical orientations.
|
|
29
|
+
* - Various step sizes (`default`, `small`) for adaptability to different layouts.
|
|
30
|
+
* - Step statuses (`wait`, `process`, `finish`, `error`) for visual feedback.
|
|
31
|
+
* - Progress dot style for streamlined visual designs.
|
|
32
|
+
* - Navigation-type steps for guiding users through processes.
|
|
33
|
+
*
|
|
34
|
+
* The Steps component ensures clear communication of multi-step processes, enhancing user engagement and understanding.
|
|
35
|
+
*/
|
|
20
36
|
const Steps = (_a) => {
|
|
21
37
|
var { items = [], manyItems = false } = _a, restStepsProps = __rest(_a, ["items", "manyItems"]);
|
|
22
38
|
const stepsWithIcons = items.map(item => (Object.assign(Object.assign({}, item), { icon: item.icon ? React.createElement(icons_1.Icon, { icon: item.icon }) : undefined })));
|
|
@@ -32,168 +48,302 @@ const Steps = (_a) => {
|
|
|
32
48
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
33
49
|
theme: theme
|
|
34
50
|
}, () => {
|
|
35
|
-
const prefixCls = `:where(.${hashId})
|
|
51
|
+
const prefixCls = `:where(.${hashId})${prefixClsWithoutHash}`;
|
|
36
52
|
return {
|
|
37
|
-
[prefixCls]: {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
display: stepToken.flex,
|
|
44
|
-
flexDirection: manyItems ? 'column-reverse' : 'column',
|
|
45
|
-
alignItems: manyItems ? 'center' : 'center',
|
|
46
|
-
justifyContent: manyItems ? 'center' : 'center',
|
|
47
|
-
rowGap: stepToken.rowGap
|
|
48
|
-
},
|
|
49
|
-
[`&-content`]: {
|
|
50
|
-
transform: manyItems
|
|
51
|
-
? stepToken.manyItemsTransform
|
|
52
|
-
: stepToken.none,
|
|
53
|
-
width: manyItems ? stepToken.manyItemsWidth : stepToken.auto,
|
|
54
|
-
paddingInlineEnd: manyItems
|
|
55
|
-
? stepToken.paddingInlineEnd
|
|
56
|
-
: stepToken.zero,
|
|
57
|
-
height: manyItems ? stepToken.manyItemsHeight : stepToken.auto,
|
|
58
|
-
whiteSpace: manyItems
|
|
59
|
-
? stepToken.manyItemsWhiteSpace
|
|
60
|
-
: stepToken.none,
|
|
61
|
-
display: stepToken.flex,
|
|
62
|
-
alignItems: 'center',
|
|
63
|
-
wordBreak: 'break-word',
|
|
64
|
-
marginInlineStart: manyItems
|
|
65
|
-
? stepToken.manyItemsMarginInlineStart
|
|
66
|
-
: stepToken.zero
|
|
67
|
-
},
|
|
68
|
-
[`&-title`]: {
|
|
69
|
-
lineHeight: 1,
|
|
70
|
-
fontSize: stepToken.titleFontSize,
|
|
71
|
-
fontWeight: '600 !important',
|
|
72
|
-
paddingInlineEnd: manyItems
|
|
73
|
-
? stepToken.zero
|
|
74
|
-
: stepToken.paddingInlineEnd,
|
|
75
|
-
['&::after']: {
|
|
76
|
-
display: stepToken.none
|
|
77
|
-
}
|
|
78
|
-
},
|
|
79
|
-
[`&-icon`]: {
|
|
80
|
-
lineHeight: 1,
|
|
81
|
-
width: manyItems
|
|
82
|
-
? stepToken.manyItemsIconWidthHeight
|
|
83
|
-
: stepToken.iconWidthHeight,
|
|
84
|
-
height: manyItems
|
|
85
|
-
? stepToken.manyItemsIconWidthHeight
|
|
86
|
-
: stepToken.iconWidthHeight,
|
|
87
|
-
marginInlineEnd: stepToken.zero,
|
|
88
|
-
['span']: {
|
|
89
|
-
borderRadius: '50%',
|
|
53
|
+
[prefixCls]: {
|
|
54
|
+
[`&${prefixClsWithoutHash}`]: {
|
|
55
|
+
[`${prefixClsWithoutHash}-item`]: {
|
|
56
|
+
paddingInlineStart: stepToken.zero,
|
|
57
|
+
flex: '1 !important',
|
|
58
|
+
[`&-container`]: {
|
|
90
59
|
display: stepToken.flex,
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
60
|
+
flexDirection: manyItems ? 'column-reverse' : 'column',
|
|
61
|
+
alignItems: manyItems ? 'center' : 'center',
|
|
62
|
+
justifyContent: manyItems ? 'center' : 'center',
|
|
63
|
+
rowGap: stepToken.rowGap
|
|
64
|
+
},
|
|
65
|
+
[`&-content`]: {
|
|
66
|
+
flexDirection: 'column',
|
|
67
|
+
transform: manyItems
|
|
68
|
+
? stepToken.manyItemsTransform
|
|
69
|
+
: stepToken.none,
|
|
70
|
+
width: manyItems ? stepToken.manyItemsWidth : stepToken.auto,
|
|
71
|
+
paddingInlineEnd: manyItems
|
|
72
|
+
? stepToken.paddingInlineEnd
|
|
73
|
+
: stepToken.zero,
|
|
74
|
+
height: manyItems ? stepToken.manyItemsHeight : stepToken.auto,
|
|
75
|
+
whiteSpace: manyItems
|
|
76
|
+
? stepToken.manyItemsWhiteSpace
|
|
77
|
+
: stepToken.none,
|
|
78
|
+
display: stepToken.flex,
|
|
79
|
+
alignItems: 'center',
|
|
80
|
+
wordBreak: 'break-word',
|
|
81
|
+
marginInlineStart: manyItems
|
|
82
|
+
? stepToken.manyItemsMarginInlineStart
|
|
83
|
+
: stepToken.zero
|
|
84
|
+
},
|
|
85
|
+
[`&-title`]: {
|
|
86
|
+
display: 'flex',
|
|
87
|
+
flexDirection: 'column',
|
|
88
|
+
textAlign: 'center',
|
|
89
|
+
lineHeight: 1,
|
|
90
|
+
fontSize: stepToken.titleFontSize,
|
|
91
|
+
fontWeight: '600 !important',
|
|
92
|
+
paddingInlineEnd: manyItems
|
|
93
|
+
? stepToken.zero
|
|
94
|
+
: stepToken.paddingInlineEnd,
|
|
118
95
|
['&::after']: {
|
|
119
|
-
|
|
96
|
+
display: stepToken.none
|
|
120
97
|
}
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
98
|
+
},
|
|
99
|
+
['&-subtitle']: {
|
|
100
|
+
margin: '10px 0',
|
|
101
|
+
fontSize: '12px'
|
|
102
|
+
},
|
|
103
|
+
['&-description']: {
|
|
104
|
+
marginTop: '10px',
|
|
105
|
+
maxWidth: stepToken.full
|
|
106
|
+
},
|
|
107
|
+
[`&-icon`]: {
|
|
108
|
+
lineHeight: 1,
|
|
109
|
+
width: manyItems
|
|
110
|
+
? stepToken.manyItemsIconWidthHeight
|
|
111
|
+
: stepToken.iconWidthHeight,
|
|
112
|
+
height: manyItems
|
|
113
|
+
? stepToken.manyItemsIconWidthHeight
|
|
114
|
+
: stepToken.iconWidthHeight,
|
|
115
|
+
marginInlineEnd: stepToken.zero,
|
|
116
|
+
['span']: {
|
|
117
|
+
borderRadius: '50%',
|
|
118
|
+
display: stepToken.flex,
|
|
119
|
+
width: stepToken.full,
|
|
120
|
+
height: stepToken.full
|
|
121
|
+
},
|
|
122
|
+
['svg']: {
|
|
123
|
+
width: stepToken.iconSize,
|
|
124
|
+
height: stepToken.iconSize,
|
|
125
|
+
margin: stepToken.auto,
|
|
126
|
+
color: stepToken.iconColor,
|
|
127
|
+
display: manyItems ? stepToken.none : 'inline-block'
|
|
128
|
+
}
|
|
129
|
+
},
|
|
130
|
+
[`&-tail`]: {
|
|
131
|
+
display: 'block !important',
|
|
132
|
+
zIndex: -1,
|
|
133
|
+
top: manyItems ? stepToken.auto : stepToken.tailTop,
|
|
134
|
+
bottom: manyItems
|
|
135
|
+
? stepToken.manyItemsTailBottom
|
|
136
|
+
: stepToken.auto,
|
|
137
|
+
['::after']: {
|
|
138
|
+
height: manyItems
|
|
139
|
+
? stepToken.manyItemsTailHeight
|
|
140
|
+
: stepToken.tailHeight,
|
|
141
|
+
borderRadius: stepToken.zero
|
|
142
|
+
}
|
|
143
|
+
},
|
|
144
|
+
[`&:first-child`]: {
|
|
145
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
146
|
+
['&::after']: {
|
|
147
|
+
background: stepToken.tailFirstChildColor
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
},
|
|
151
|
+
[`&:last-child`]: {
|
|
152
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
153
|
+
['&::after']: {
|
|
154
|
+
background: stepToken.tailLastChildColor
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
},
|
|
158
|
+
[`&:not(.${prefixClsWithoutHash}-item-finish, .${prefixClsWithoutHash}-item-process):last-child`]: {
|
|
159
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
160
|
+
['&::after']: {
|
|
161
|
+
background: stepToken.tailColor
|
|
162
|
+
}
|
|
127
163
|
}
|
|
128
164
|
}
|
|
129
165
|
},
|
|
130
|
-
[
|
|
131
|
-
[`${prefixClsWithoutHash}-item-
|
|
132
|
-
|
|
133
|
-
|
|
166
|
+
[`${prefixClsWithoutHash}-item-finish`]: {
|
|
167
|
+
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
168
|
+
backgroundColor: stepToken.finishIconBgColor
|
|
169
|
+
},
|
|
170
|
+
['&:not(:last-child, :first-child)']: {
|
|
171
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
172
|
+
['&::after']: {
|
|
173
|
+
background: stepToken.finishTailColor
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
},
|
|
177
|
+
[`&${prefixClsWithoutHash}-item-active`]: {
|
|
178
|
+
['&:not(:last-child, :first-child)']: {
|
|
179
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
180
|
+
['&::after']: {
|
|
181
|
+
background: stepToken.tailLastChildColor
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
},
|
|
185
|
+
[`&:first-child`]: {
|
|
186
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
187
|
+
['&::after']: {
|
|
188
|
+
background: 'none !important'
|
|
189
|
+
}
|
|
190
|
+
}
|
|
134
191
|
}
|
|
135
192
|
}
|
|
136
|
-
}
|
|
137
|
-
},
|
|
138
|
-
[`${prefixClsWithoutHash}-item-finish`]: {
|
|
139
|
-
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
140
|
-
backgroundColor: stepToken.finishIconBgColor
|
|
141
193
|
},
|
|
142
|
-
[
|
|
143
|
-
[`${prefixClsWithoutHash}-item-
|
|
144
|
-
|
|
145
|
-
|
|
194
|
+
[`${prefixClsWithoutHash}-item-process`]: {
|
|
195
|
+
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
196
|
+
backgroundColor: stepToken.processIconBgColor
|
|
197
|
+
},
|
|
198
|
+
['&:not(:last-child, :first-child)']: {
|
|
199
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
200
|
+
['&::after']: {
|
|
201
|
+
background: stepToken.tailProcessColor
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
},
|
|
205
|
+
['&:first-child']: {
|
|
206
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
207
|
+
['&::after']: {
|
|
208
|
+
background: stepToken.tailProcessFirstChildColor
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
},
|
|
212
|
+
['&:last-child']: {
|
|
213
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
214
|
+
['&::after']: {
|
|
215
|
+
background: stepToken.tailLastChildColor
|
|
216
|
+
}
|
|
146
217
|
}
|
|
147
218
|
}
|
|
148
|
-
}
|
|
149
|
-
},
|
|
150
|
-
[`${prefixClsWithoutHash}-item-process`]: {
|
|
151
|
-
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
152
|
-
backgroundColor: stepToken.processIconBgColor
|
|
153
219
|
},
|
|
154
|
-
[
|
|
155
|
-
[`${prefixClsWithoutHash}-item-
|
|
156
|
-
|
|
157
|
-
|
|
220
|
+
[`${prefixClsWithoutHash}-item-wait`]: {
|
|
221
|
+
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
222
|
+
backgroundColor: stepToken.waitIconBgColor,
|
|
223
|
+
['svg']: {
|
|
224
|
+
color: stepToken.waitIconColor
|
|
225
|
+
}
|
|
226
|
+
},
|
|
227
|
+
[`${prefixClsWithoutHash}-item-title`]: {
|
|
228
|
+
color: stepToken.waitTitleColor
|
|
229
|
+
},
|
|
230
|
+
['&:not(:last-child, :first-child)']: {
|
|
231
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
232
|
+
['&::after']: {
|
|
233
|
+
backgroundColor: stepToken.waitTailColor
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
},
|
|
237
|
+
[`&:last-child`]: {
|
|
238
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
239
|
+
['&::after']: {
|
|
240
|
+
background: stepToken.tailWaitLastChildColor
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
},
|
|
244
|
+
[`&${prefixClsWithoutHash}-item-active`]: {
|
|
245
|
+
['&:not(:first-child)']: {
|
|
246
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
247
|
+
['&::after']: {
|
|
248
|
+
background: stepToken.tailWaitMiddleChildColor
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
},
|
|
252
|
+
[`&:first-child`]: {
|
|
253
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
254
|
+
['&::after']: {
|
|
255
|
+
background: 'none !important'
|
|
256
|
+
}
|
|
257
|
+
}
|
|
158
258
|
}
|
|
159
259
|
}
|
|
160
260
|
},
|
|
161
|
-
[
|
|
162
|
-
[`${prefixClsWithoutHash}-item-
|
|
163
|
-
|
|
164
|
-
|
|
261
|
+
[`${prefixClsWithoutHash}-item-error`]: {
|
|
262
|
+
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
263
|
+
backgroundColor: stepToken.errorIconBgColor
|
|
264
|
+
},
|
|
265
|
+
['&:not(:last-child, :first-child)']: {
|
|
266
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
267
|
+
['&::after']: {
|
|
268
|
+
background: stepToken.tailErrorChildColor
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
},
|
|
272
|
+
[`&:first-child`]: {
|
|
273
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
274
|
+
['&::after']: {
|
|
275
|
+
background: 'none !important'
|
|
276
|
+
}
|
|
165
277
|
}
|
|
166
278
|
}
|
|
167
279
|
},
|
|
168
|
-
[
|
|
169
|
-
[`${prefixClsWithoutHash}-item
|
|
170
|
-
['
|
|
171
|
-
|
|
280
|
+
[`&${prefixClsWithoutHash}-small`]: {
|
|
281
|
+
[`${prefixClsWithoutHash}-item`]: {
|
|
282
|
+
['&-container']: {
|
|
283
|
+
rowGap: '0'
|
|
284
|
+
},
|
|
285
|
+
[`&-icon`]: {
|
|
286
|
+
scale: '0.8'
|
|
287
|
+
},
|
|
288
|
+
['&-tail']: {
|
|
289
|
+
top: '18px'
|
|
172
290
|
}
|
|
173
291
|
}
|
|
174
|
-
}
|
|
175
|
-
},
|
|
176
|
-
[`${prefixClsWithoutHash}-item-wait`]: {
|
|
177
|
-
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
178
|
-
backgroundColor: stepToken.waitIconBgColor,
|
|
179
|
-
['svg']: {
|
|
180
|
-
color: stepToken.waitIconColor
|
|
181
|
-
}
|
|
182
292
|
},
|
|
183
|
-
[
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
293
|
+
[`&${prefixClsWithoutHash}-dot`]: {
|
|
294
|
+
[`${prefixClsWithoutHash}-item`]: {
|
|
295
|
+
overflow: 'hidden',
|
|
296
|
+
[`&-icon`]: {
|
|
297
|
+
width: '10px !important',
|
|
298
|
+
height: '10px !important',
|
|
299
|
+
marginInlineStart: '0 !important',
|
|
300
|
+
['span']: {
|
|
301
|
+
color: 'inherit !important',
|
|
302
|
+
background: 'inherit !important'
|
|
303
|
+
}
|
|
304
|
+
},
|
|
305
|
+
[`&${prefixClsWithoutHash}-icon`]: {
|
|
306
|
+
background: 'inherit !important',
|
|
307
|
+
[`&${prefixClsWithoutHash}-icon-dot`]: {
|
|
308
|
+
background: 'inherit !important'
|
|
309
|
+
}
|
|
310
|
+
},
|
|
311
|
+
['&-title']: {
|
|
312
|
+
paddingInlineEnd: '0'
|
|
313
|
+
},
|
|
314
|
+
['&-tail']: {
|
|
315
|
+
top: '3px',
|
|
316
|
+
marginInline: '0',
|
|
317
|
+
['&::after']: {
|
|
318
|
+
width: '100%',
|
|
319
|
+
marginInlineStart: '0'
|
|
320
|
+
}
|
|
190
321
|
}
|
|
191
322
|
}
|
|
192
323
|
},
|
|
193
|
-
[
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
324
|
+
[`&${prefixClsWithoutHash}-vertical`]: {
|
|
325
|
+
rowGap: '30px',
|
|
326
|
+
[`${prefixClsWithoutHash}-item`]: {
|
|
327
|
+
['&-container']: {
|
|
328
|
+
flexDirection: 'row',
|
|
329
|
+
justifyContent: 'start',
|
|
330
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
331
|
+
top: '30px',
|
|
332
|
+
insetInlineStart: '18px',
|
|
333
|
+
height: '45px',
|
|
334
|
+
['&::after']: {
|
|
335
|
+
width: '3px',
|
|
336
|
+
background: '#4482ff'
|
|
337
|
+
}
|
|
338
|
+
}
|
|
339
|
+
},
|
|
340
|
+
[`&-content`]: {
|
|
341
|
+
minHeight: 'auto'
|
|
342
|
+
},
|
|
343
|
+
['&:last-child']: {
|
|
344
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
345
|
+
display: 'none !important'
|
|
346
|
+
}
|
|
197
347
|
}
|
|
198
348
|
}
|
|
199
349
|
}
|
package/dist/cjs/types.d.ts
CHANGED
|
@@ -5,70 +5,107 @@ import { ReactNode } from 'react';
|
|
|
5
5
|
export type TStepDirectionAndPlacement = 'horizontal' | 'vertical';
|
|
6
6
|
export type TSize = 'default' | 'small';
|
|
7
7
|
export type TStepStatus = 'wait' | 'process' | 'finish' | 'error';
|
|
8
|
-
export type TStepType = 'default' | 'navigation'
|
|
9
|
-
export type TStepProgressDot = (
|
|
10
|
-
iconDot,
|
|
11
|
-
{ index, status, title, description }
|
|
12
|
-
) => ReactNode;
|
|
8
|
+
export type TStepType = 'default' | 'navigation';
|
|
13
9
|
|
|
14
|
-
type
|
|
10
|
+
type SMergedHTMLAttributes = React.HTMLAttributes<HTMLElement> &
|
|
15
11
|
React.ButtonHTMLAttributes<HTMLButtonElement> &
|
|
16
12
|
React.AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
17
13
|
|
|
18
|
-
export interface IStepProps extends
|
|
14
|
+
export interface IStepProps extends SMergedHTMLAttributes {
|
|
19
15
|
/**
|
|
20
16
|
* The current step index.
|
|
21
17
|
* @default 0
|
|
22
18
|
*/
|
|
23
19
|
current?: number;
|
|
20
|
+
|
|
24
21
|
/**
|
|
25
22
|
* The initial step index.
|
|
26
23
|
* @default 0
|
|
27
24
|
*/
|
|
28
25
|
initial?: number;
|
|
26
|
+
|
|
29
27
|
/**
|
|
30
28
|
* Whether the steps are responsive.
|
|
31
29
|
* @default true
|
|
32
30
|
*/
|
|
33
31
|
responsive?: boolean;
|
|
32
|
+
|
|
34
33
|
/**
|
|
35
34
|
* The status of the steps.
|
|
35
|
+
* @default 'process'
|
|
36
36
|
*/
|
|
37
37
|
status?: TStepStatus;
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* Trigger when Step is changed
|
|
41
|
+
*/
|
|
38
42
|
onChange?: (current) => void;
|
|
43
|
+
|
|
39
44
|
/**
|
|
40
45
|
* The steps items.
|
|
46
|
+
* @default []
|
|
41
47
|
*/
|
|
42
48
|
items?: {
|
|
43
49
|
/**
|
|
44
50
|
* The description of the step.
|
|
45
51
|
*/
|
|
46
52
|
description?: ReactNode;
|
|
53
|
+
|
|
47
54
|
/**
|
|
48
55
|
* Whether the step is disabled.
|
|
49
56
|
*/
|
|
50
57
|
disabled?: boolean;
|
|
58
|
+
|
|
51
59
|
/**
|
|
52
60
|
* The status of the step.
|
|
53
61
|
*/
|
|
54
62
|
status?: TStepStatus;
|
|
63
|
+
|
|
55
64
|
/**
|
|
56
65
|
* The subtitle of the step.
|
|
57
66
|
*/
|
|
58
67
|
subTitle?: ReactNode;
|
|
68
|
+
|
|
59
69
|
/**
|
|
60
70
|
* The title of the step.
|
|
61
71
|
*/
|
|
62
72
|
title: ReactNode;
|
|
73
|
+
|
|
63
74
|
/**
|
|
64
75
|
* The icon of the step.
|
|
65
76
|
*/
|
|
66
77
|
icon?: IconName;
|
|
67
78
|
}[];
|
|
79
|
+
|
|
68
80
|
/**
|
|
69
81
|
* Convert to multiple views.
|
|
70
82
|
*/
|
|
71
83
|
manyItems?: boolean;
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* To specify the direction of the step bar, horizontal or vertical
|
|
87
|
+
* @default 'horizontal'
|
|
88
|
+
*/
|
|
89
|
+
direction?: TStepDirectionAndPlacement;
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be vertical
|
|
93
|
+
* @default false
|
|
94
|
+
*/
|
|
95
|
+
progressDot?: boolean;
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* To specify the size of the step bar, default and small are currently supported
|
|
99
|
+
* @default 'default'
|
|
100
|
+
*/
|
|
101
|
+
size?: TSize;
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* Type of steps, can be set to one of the following values: default navigation inline
|
|
105
|
+
* @default 'default'
|
|
106
|
+
*/
|
|
107
|
+
type?: TStepType;
|
|
108
|
+
|
|
72
109
|
/**
|
|
73
110
|
* Never use this prop. Akinon design system does not allow custom styles.
|
|
74
111
|
* @ignore
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { IStepProps } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* Steps component for displaying the progress of a process with multiple stages.
|
|
5
|
+
*
|
|
6
|
+
* The Steps component is used to visually represent a sequence of steps, providing users with an understanding of their current position
|
|
7
|
+
* within a workflow or process. It supports both horizontal and vertical layouts, multiple statuses for individual steps, and customizable
|
|
8
|
+
* icons and titles for each step.
|
|
9
|
+
*
|
|
10
|
+
* Features:
|
|
11
|
+
* - Horizontal and vertical orientations.
|
|
12
|
+
* - Various step sizes (`default`, `small`) for adaptability to different layouts.
|
|
13
|
+
* - Step statuses (`wait`, `process`, `finish`, `error`) for visual feedback.
|
|
14
|
+
* - Progress dot style for streamlined visual designs.
|
|
15
|
+
* - Navigation-type steps for guiding users through processes.
|
|
16
|
+
*
|
|
17
|
+
* The Steps component ensures clear communication of multi-step processes, enhancing user engagement and understanding.
|
|
18
|
+
*/
|
|
3
19
|
export declare const Steps: ({ items, manyItems, ...restStepsProps }: IStepProps) => React.JSX.Element;
|
|
4
20
|
export type { IStepProps };
|
|
5
21
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/esm/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,KAAK,4CAIf,UAAU,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC;;;;;;;;;;;;;;;GAeG;AAEH,eAAO,MAAM,KAAK,4CAIf,UAAU,sBAgVZ,CAAC;AAEF,YAAY,EAAE,UAAU,EAAE,CAAC"}
|
package/dist/esm/index.js
CHANGED
|
@@ -14,6 +14,22 @@ import { useToken } from '@akinon/ui-theme';
|
|
|
14
14
|
import { useStyleRegister } from '@ant-design/cssinjs';
|
|
15
15
|
import { ConfigProvider, Steps as AntSteps } from 'antd';
|
|
16
16
|
import * as React from 'react';
|
|
17
|
+
/**
|
|
18
|
+
* Steps component for displaying the progress of a process with multiple stages.
|
|
19
|
+
*
|
|
20
|
+
* The Steps component is used to visually represent a sequence of steps, providing users with an understanding of their current position
|
|
21
|
+
* within a workflow or process. It supports both horizontal and vertical layouts, multiple statuses for individual steps, and customizable
|
|
22
|
+
* icons and titles for each step.
|
|
23
|
+
*
|
|
24
|
+
* Features:
|
|
25
|
+
* - Horizontal and vertical orientations.
|
|
26
|
+
* - Various step sizes (`default`, `small`) for adaptability to different layouts.
|
|
27
|
+
* - Step statuses (`wait`, `process`, `finish`, `error`) for visual feedback.
|
|
28
|
+
* - Progress dot style for streamlined visual designs.
|
|
29
|
+
* - Navigation-type steps for guiding users through processes.
|
|
30
|
+
*
|
|
31
|
+
* The Steps component ensures clear communication of multi-step processes, enhancing user engagement and understanding.
|
|
32
|
+
*/
|
|
17
33
|
export const Steps = (_a) => {
|
|
18
34
|
var { items = [], manyItems = false } = _a, restStepsProps = __rest(_a, ["items", "manyItems"]);
|
|
19
35
|
const stepsWithIcons = items.map(item => (Object.assign(Object.assign({}, item), { icon: item.icon ? React.createElement(Icon, { icon: item.icon }) : undefined })));
|
|
@@ -29,168 +45,302 @@ export const Steps = (_a) => {
|
|
|
29
45
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
30
46
|
theme: theme
|
|
31
47
|
}, () => {
|
|
32
|
-
const prefixCls = `:where(.${hashId})
|
|
48
|
+
const prefixCls = `:where(.${hashId})${prefixClsWithoutHash}`;
|
|
33
49
|
return {
|
|
34
|
-
[prefixCls]: {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
display: stepToken.flex,
|
|
41
|
-
flexDirection: manyItems ? 'column-reverse' : 'column',
|
|
42
|
-
alignItems: manyItems ? 'center' : 'center',
|
|
43
|
-
justifyContent: manyItems ? 'center' : 'center',
|
|
44
|
-
rowGap: stepToken.rowGap
|
|
45
|
-
},
|
|
46
|
-
[`&-content`]: {
|
|
47
|
-
transform: manyItems
|
|
48
|
-
? stepToken.manyItemsTransform
|
|
49
|
-
: stepToken.none,
|
|
50
|
-
width: manyItems ? stepToken.manyItemsWidth : stepToken.auto,
|
|
51
|
-
paddingInlineEnd: manyItems
|
|
52
|
-
? stepToken.paddingInlineEnd
|
|
53
|
-
: stepToken.zero,
|
|
54
|
-
height: manyItems ? stepToken.manyItemsHeight : stepToken.auto,
|
|
55
|
-
whiteSpace: manyItems
|
|
56
|
-
? stepToken.manyItemsWhiteSpace
|
|
57
|
-
: stepToken.none,
|
|
58
|
-
display: stepToken.flex,
|
|
59
|
-
alignItems: 'center',
|
|
60
|
-
wordBreak: 'break-word',
|
|
61
|
-
marginInlineStart: manyItems
|
|
62
|
-
? stepToken.manyItemsMarginInlineStart
|
|
63
|
-
: stepToken.zero
|
|
64
|
-
},
|
|
65
|
-
[`&-title`]: {
|
|
66
|
-
lineHeight: 1,
|
|
67
|
-
fontSize: stepToken.titleFontSize,
|
|
68
|
-
fontWeight: '600 !important',
|
|
69
|
-
paddingInlineEnd: manyItems
|
|
70
|
-
? stepToken.zero
|
|
71
|
-
: stepToken.paddingInlineEnd,
|
|
72
|
-
['&::after']: {
|
|
73
|
-
display: stepToken.none
|
|
74
|
-
}
|
|
75
|
-
},
|
|
76
|
-
[`&-icon`]: {
|
|
77
|
-
lineHeight: 1,
|
|
78
|
-
width: manyItems
|
|
79
|
-
? stepToken.manyItemsIconWidthHeight
|
|
80
|
-
: stepToken.iconWidthHeight,
|
|
81
|
-
height: manyItems
|
|
82
|
-
? stepToken.manyItemsIconWidthHeight
|
|
83
|
-
: stepToken.iconWidthHeight,
|
|
84
|
-
marginInlineEnd: stepToken.zero,
|
|
85
|
-
['span']: {
|
|
86
|
-
borderRadius: '50%',
|
|
50
|
+
[prefixCls]: {
|
|
51
|
+
[`&${prefixClsWithoutHash}`]: {
|
|
52
|
+
[`${prefixClsWithoutHash}-item`]: {
|
|
53
|
+
paddingInlineStart: stepToken.zero,
|
|
54
|
+
flex: '1 !important',
|
|
55
|
+
[`&-container`]: {
|
|
87
56
|
display: stepToken.flex,
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
57
|
+
flexDirection: manyItems ? 'column-reverse' : 'column',
|
|
58
|
+
alignItems: manyItems ? 'center' : 'center',
|
|
59
|
+
justifyContent: manyItems ? 'center' : 'center',
|
|
60
|
+
rowGap: stepToken.rowGap
|
|
61
|
+
},
|
|
62
|
+
[`&-content`]: {
|
|
63
|
+
flexDirection: 'column',
|
|
64
|
+
transform: manyItems
|
|
65
|
+
? stepToken.manyItemsTransform
|
|
66
|
+
: stepToken.none,
|
|
67
|
+
width: manyItems ? stepToken.manyItemsWidth : stepToken.auto,
|
|
68
|
+
paddingInlineEnd: manyItems
|
|
69
|
+
? stepToken.paddingInlineEnd
|
|
70
|
+
: stepToken.zero,
|
|
71
|
+
height: manyItems ? stepToken.manyItemsHeight : stepToken.auto,
|
|
72
|
+
whiteSpace: manyItems
|
|
73
|
+
? stepToken.manyItemsWhiteSpace
|
|
74
|
+
: stepToken.none,
|
|
75
|
+
display: stepToken.flex,
|
|
76
|
+
alignItems: 'center',
|
|
77
|
+
wordBreak: 'break-word',
|
|
78
|
+
marginInlineStart: manyItems
|
|
79
|
+
? stepToken.manyItemsMarginInlineStart
|
|
80
|
+
: stepToken.zero
|
|
81
|
+
},
|
|
82
|
+
[`&-title`]: {
|
|
83
|
+
display: 'flex',
|
|
84
|
+
flexDirection: 'column',
|
|
85
|
+
textAlign: 'center',
|
|
86
|
+
lineHeight: 1,
|
|
87
|
+
fontSize: stepToken.titleFontSize,
|
|
88
|
+
fontWeight: '600 !important',
|
|
89
|
+
paddingInlineEnd: manyItems
|
|
90
|
+
? stepToken.zero
|
|
91
|
+
: stepToken.paddingInlineEnd,
|
|
115
92
|
['&::after']: {
|
|
116
|
-
|
|
93
|
+
display: stepToken.none
|
|
117
94
|
}
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
95
|
+
},
|
|
96
|
+
['&-subtitle']: {
|
|
97
|
+
margin: '10px 0',
|
|
98
|
+
fontSize: '12px'
|
|
99
|
+
},
|
|
100
|
+
['&-description']: {
|
|
101
|
+
marginTop: '10px',
|
|
102
|
+
maxWidth: stepToken.full
|
|
103
|
+
},
|
|
104
|
+
[`&-icon`]: {
|
|
105
|
+
lineHeight: 1,
|
|
106
|
+
width: manyItems
|
|
107
|
+
? stepToken.manyItemsIconWidthHeight
|
|
108
|
+
: stepToken.iconWidthHeight,
|
|
109
|
+
height: manyItems
|
|
110
|
+
? stepToken.manyItemsIconWidthHeight
|
|
111
|
+
: stepToken.iconWidthHeight,
|
|
112
|
+
marginInlineEnd: stepToken.zero,
|
|
113
|
+
['span']: {
|
|
114
|
+
borderRadius: '50%',
|
|
115
|
+
display: stepToken.flex,
|
|
116
|
+
width: stepToken.full,
|
|
117
|
+
height: stepToken.full
|
|
118
|
+
},
|
|
119
|
+
['svg']: {
|
|
120
|
+
width: stepToken.iconSize,
|
|
121
|
+
height: stepToken.iconSize,
|
|
122
|
+
margin: stepToken.auto,
|
|
123
|
+
color: stepToken.iconColor,
|
|
124
|
+
display: manyItems ? stepToken.none : 'inline-block'
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
[`&-tail`]: {
|
|
128
|
+
display: 'block !important',
|
|
129
|
+
zIndex: -1,
|
|
130
|
+
top: manyItems ? stepToken.auto : stepToken.tailTop,
|
|
131
|
+
bottom: manyItems
|
|
132
|
+
? stepToken.manyItemsTailBottom
|
|
133
|
+
: stepToken.auto,
|
|
134
|
+
['::after']: {
|
|
135
|
+
height: manyItems
|
|
136
|
+
? stepToken.manyItemsTailHeight
|
|
137
|
+
: stepToken.tailHeight,
|
|
138
|
+
borderRadius: stepToken.zero
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
[`&:first-child`]: {
|
|
142
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
143
|
+
['&::after']: {
|
|
144
|
+
background: stepToken.tailFirstChildColor
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
},
|
|
148
|
+
[`&:last-child`]: {
|
|
149
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
150
|
+
['&::after']: {
|
|
151
|
+
background: stepToken.tailLastChildColor
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
[`&:not(.${prefixClsWithoutHash}-item-finish, .${prefixClsWithoutHash}-item-process):last-child`]: {
|
|
156
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
157
|
+
['&::after']: {
|
|
158
|
+
background: stepToken.tailColor
|
|
159
|
+
}
|
|
124
160
|
}
|
|
125
161
|
}
|
|
126
162
|
},
|
|
127
|
-
[
|
|
128
|
-
[`${prefixClsWithoutHash}-item-
|
|
129
|
-
|
|
130
|
-
|
|
163
|
+
[`${prefixClsWithoutHash}-item-finish`]: {
|
|
164
|
+
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
165
|
+
backgroundColor: stepToken.finishIconBgColor
|
|
166
|
+
},
|
|
167
|
+
['&:not(:last-child, :first-child)']: {
|
|
168
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
169
|
+
['&::after']: {
|
|
170
|
+
background: stepToken.finishTailColor
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
},
|
|
174
|
+
[`&${prefixClsWithoutHash}-item-active`]: {
|
|
175
|
+
['&:not(:last-child, :first-child)']: {
|
|
176
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
177
|
+
['&::after']: {
|
|
178
|
+
background: stepToken.tailLastChildColor
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
},
|
|
182
|
+
[`&:first-child`]: {
|
|
183
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
184
|
+
['&::after']: {
|
|
185
|
+
background: 'none !important'
|
|
186
|
+
}
|
|
187
|
+
}
|
|
131
188
|
}
|
|
132
189
|
}
|
|
133
|
-
}
|
|
134
|
-
},
|
|
135
|
-
[`${prefixClsWithoutHash}-item-finish`]: {
|
|
136
|
-
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
137
|
-
backgroundColor: stepToken.finishIconBgColor
|
|
138
190
|
},
|
|
139
|
-
[
|
|
140
|
-
[`${prefixClsWithoutHash}-item-
|
|
141
|
-
|
|
142
|
-
|
|
191
|
+
[`${prefixClsWithoutHash}-item-process`]: {
|
|
192
|
+
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
193
|
+
backgroundColor: stepToken.processIconBgColor
|
|
194
|
+
},
|
|
195
|
+
['&:not(:last-child, :first-child)']: {
|
|
196
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
197
|
+
['&::after']: {
|
|
198
|
+
background: stepToken.tailProcessColor
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
},
|
|
202
|
+
['&:first-child']: {
|
|
203
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
204
|
+
['&::after']: {
|
|
205
|
+
background: stepToken.tailProcessFirstChildColor
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
},
|
|
209
|
+
['&:last-child']: {
|
|
210
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
211
|
+
['&::after']: {
|
|
212
|
+
background: stepToken.tailLastChildColor
|
|
213
|
+
}
|
|
143
214
|
}
|
|
144
215
|
}
|
|
145
|
-
}
|
|
146
|
-
},
|
|
147
|
-
[`${prefixClsWithoutHash}-item-process`]: {
|
|
148
|
-
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
149
|
-
backgroundColor: stepToken.processIconBgColor
|
|
150
216
|
},
|
|
151
|
-
[
|
|
152
|
-
[`${prefixClsWithoutHash}-item-
|
|
153
|
-
|
|
154
|
-
|
|
217
|
+
[`${prefixClsWithoutHash}-item-wait`]: {
|
|
218
|
+
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
219
|
+
backgroundColor: stepToken.waitIconBgColor,
|
|
220
|
+
['svg']: {
|
|
221
|
+
color: stepToken.waitIconColor
|
|
222
|
+
}
|
|
223
|
+
},
|
|
224
|
+
[`${prefixClsWithoutHash}-item-title`]: {
|
|
225
|
+
color: stepToken.waitTitleColor
|
|
226
|
+
},
|
|
227
|
+
['&:not(:last-child, :first-child)']: {
|
|
228
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
229
|
+
['&::after']: {
|
|
230
|
+
backgroundColor: stepToken.waitTailColor
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
},
|
|
234
|
+
[`&:last-child`]: {
|
|
235
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
236
|
+
['&::after']: {
|
|
237
|
+
background: stepToken.tailWaitLastChildColor
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
},
|
|
241
|
+
[`&${prefixClsWithoutHash}-item-active`]: {
|
|
242
|
+
['&:not(:first-child)']: {
|
|
243
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
244
|
+
['&::after']: {
|
|
245
|
+
background: stepToken.tailWaitMiddleChildColor
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
},
|
|
249
|
+
[`&:first-child`]: {
|
|
250
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
251
|
+
['&::after']: {
|
|
252
|
+
background: 'none !important'
|
|
253
|
+
}
|
|
254
|
+
}
|
|
155
255
|
}
|
|
156
256
|
}
|
|
157
257
|
},
|
|
158
|
-
[
|
|
159
|
-
[`${prefixClsWithoutHash}-item-
|
|
160
|
-
|
|
161
|
-
|
|
258
|
+
[`${prefixClsWithoutHash}-item-error`]: {
|
|
259
|
+
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
260
|
+
backgroundColor: stepToken.errorIconBgColor
|
|
261
|
+
},
|
|
262
|
+
['&:not(:last-child, :first-child)']: {
|
|
263
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
264
|
+
['&::after']: {
|
|
265
|
+
background: stepToken.tailErrorChildColor
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
},
|
|
269
|
+
[`&:first-child`]: {
|
|
270
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
271
|
+
['&::after']: {
|
|
272
|
+
background: 'none !important'
|
|
273
|
+
}
|
|
162
274
|
}
|
|
163
275
|
}
|
|
164
276
|
},
|
|
165
|
-
[
|
|
166
|
-
[`${prefixClsWithoutHash}-item
|
|
167
|
-
['
|
|
168
|
-
|
|
277
|
+
[`&${prefixClsWithoutHash}-small`]: {
|
|
278
|
+
[`${prefixClsWithoutHash}-item`]: {
|
|
279
|
+
['&-container']: {
|
|
280
|
+
rowGap: '0'
|
|
281
|
+
},
|
|
282
|
+
[`&-icon`]: {
|
|
283
|
+
scale: '0.8'
|
|
284
|
+
},
|
|
285
|
+
['&-tail']: {
|
|
286
|
+
top: '18px'
|
|
169
287
|
}
|
|
170
288
|
}
|
|
171
|
-
}
|
|
172
|
-
},
|
|
173
|
-
[`${prefixClsWithoutHash}-item-wait`]: {
|
|
174
|
-
[`${prefixClsWithoutHash}-item-icon`]: {
|
|
175
|
-
backgroundColor: stepToken.waitIconBgColor,
|
|
176
|
-
['svg']: {
|
|
177
|
-
color: stepToken.waitIconColor
|
|
178
|
-
}
|
|
179
289
|
},
|
|
180
|
-
[
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
290
|
+
[`&${prefixClsWithoutHash}-dot`]: {
|
|
291
|
+
[`${prefixClsWithoutHash}-item`]: {
|
|
292
|
+
overflow: 'hidden',
|
|
293
|
+
[`&-icon`]: {
|
|
294
|
+
width: '10px !important',
|
|
295
|
+
height: '10px !important',
|
|
296
|
+
marginInlineStart: '0 !important',
|
|
297
|
+
['span']: {
|
|
298
|
+
color: 'inherit !important',
|
|
299
|
+
background: 'inherit !important'
|
|
300
|
+
}
|
|
301
|
+
},
|
|
302
|
+
[`&${prefixClsWithoutHash}-icon`]: {
|
|
303
|
+
background: 'inherit !important',
|
|
304
|
+
[`&${prefixClsWithoutHash}-icon-dot`]: {
|
|
305
|
+
background: 'inherit !important'
|
|
306
|
+
}
|
|
307
|
+
},
|
|
308
|
+
['&-title']: {
|
|
309
|
+
paddingInlineEnd: '0'
|
|
310
|
+
},
|
|
311
|
+
['&-tail']: {
|
|
312
|
+
top: '3px',
|
|
313
|
+
marginInline: '0',
|
|
314
|
+
['&::after']: {
|
|
315
|
+
width: '100%',
|
|
316
|
+
marginInlineStart: '0'
|
|
317
|
+
}
|
|
187
318
|
}
|
|
188
319
|
}
|
|
189
320
|
},
|
|
190
|
-
[
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
321
|
+
[`&${prefixClsWithoutHash}-vertical`]: {
|
|
322
|
+
rowGap: '30px',
|
|
323
|
+
[`${prefixClsWithoutHash}-item`]: {
|
|
324
|
+
['&-container']: {
|
|
325
|
+
flexDirection: 'row',
|
|
326
|
+
justifyContent: 'start',
|
|
327
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
328
|
+
top: '30px',
|
|
329
|
+
insetInlineStart: '18px',
|
|
330
|
+
height: '45px',
|
|
331
|
+
['&::after']: {
|
|
332
|
+
width: '3px',
|
|
333
|
+
background: '#4482ff'
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
},
|
|
337
|
+
[`&-content`]: {
|
|
338
|
+
minHeight: 'auto'
|
|
339
|
+
},
|
|
340
|
+
['&:last-child']: {
|
|
341
|
+
[`${prefixClsWithoutHash}-item-tail`]: {
|
|
342
|
+
display: 'none !important'
|
|
343
|
+
}
|
|
194
344
|
}
|
|
195
345
|
}
|
|
196
346
|
}
|
package/dist/esm/types.d.ts
CHANGED
|
@@ -5,70 +5,107 @@ import { ReactNode } from 'react';
|
|
|
5
5
|
export type TStepDirectionAndPlacement = 'horizontal' | 'vertical';
|
|
6
6
|
export type TSize = 'default' | 'small';
|
|
7
7
|
export type TStepStatus = 'wait' | 'process' | 'finish' | 'error';
|
|
8
|
-
export type TStepType = 'default' | 'navigation'
|
|
9
|
-
export type TStepProgressDot = (
|
|
10
|
-
iconDot,
|
|
11
|
-
{ index, status, title, description }
|
|
12
|
-
) => ReactNode;
|
|
8
|
+
export type TStepType = 'default' | 'navigation';
|
|
13
9
|
|
|
14
|
-
type
|
|
10
|
+
type SMergedHTMLAttributes = React.HTMLAttributes<HTMLElement> &
|
|
15
11
|
React.ButtonHTMLAttributes<HTMLButtonElement> &
|
|
16
12
|
React.AnchorHTMLAttributes<HTMLAnchorElement>;
|
|
17
13
|
|
|
18
|
-
export interface IStepProps extends
|
|
14
|
+
export interface IStepProps extends SMergedHTMLAttributes {
|
|
19
15
|
/**
|
|
20
16
|
* The current step index.
|
|
21
17
|
* @default 0
|
|
22
18
|
*/
|
|
23
19
|
current?: number;
|
|
20
|
+
|
|
24
21
|
/**
|
|
25
22
|
* The initial step index.
|
|
26
23
|
* @default 0
|
|
27
24
|
*/
|
|
28
25
|
initial?: number;
|
|
26
|
+
|
|
29
27
|
/**
|
|
30
28
|
* Whether the steps are responsive.
|
|
31
29
|
* @default true
|
|
32
30
|
*/
|
|
33
31
|
responsive?: boolean;
|
|
32
|
+
|
|
34
33
|
/**
|
|
35
34
|
* The status of the steps.
|
|
35
|
+
* @default 'process'
|
|
36
36
|
*/
|
|
37
37
|
status?: TStepStatus;
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* Trigger when Step is changed
|
|
41
|
+
*/
|
|
38
42
|
onChange?: (current) => void;
|
|
43
|
+
|
|
39
44
|
/**
|
|
40
45
|
* The steps items.
|
|
46
|
+
* @default []
|
|
41
47
|
*/
|
|
42
48
|
items?: {
|
|
43
49
|
/**
|
|
44
50
|
* The description of the step.
|
|
45
51
|
*/
|
|
46
52
|
description?: ReactNode;
|
|
53
|
+
|
|
47
54
|
/**
|
|
48
55
|
* Whether the step is disabled.
|
|
49
56
|
*/
|
|
50
57
|
disabled?: boolean;
|
|
58
|
+
|
|
51
59
|
/**
|
|
52
60
|
* The status of the step.
|
|
53
61
|
*/
|
|
54
62
|
status?: TStepStatus;
|
|
63
|
+
|
|
55
64
|
/**
|
|
56
65
|
* The subtitle of the step.
|
|
57
66
|
*/
|
|
58
67
|
subTitle?: ReactNode;
|
|
68
|
+
|
|
59
69
|
/**
|
|
60
70
|
* The title of the step.
|
|
61
71
|
*/
|
|
62
72
|
title: ReactNode;
|
|
73
|
+
|
|
63
74
|
/**
|
|
64
75
|
* The icon of the step.
|
|
65
76
|
*/
|
|
66
77
|
icon?: IconName;
|
|
67
78
|
}[];
|
|
79
|
+
|
|
68
80
|
/**
|
|
69
81
|
* Convert to multiple views.
|
|
70
82
|
*/
|
|
71
83
|
manyItems?: boolean;
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* To specify the direction of the step bar, horizontal or vertical
|
|
87
|
+
* @default 'horizontal'
|
|
88
|
+
*/
|
|
89
|
+
direction?: TStepDirectionAndPlacement;
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be vertical
|
|
93
|
+
* @default false
|
|
94
|
+
*/
|
|
95
|
+
progressDot?: boolean;
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* To specify the size of the step bar, default and small are currently supported
|
|
99
|
+
* @default 'default'
|
|
100
|
+
*/
|
|
101
|
+
size?: TSize;
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* Type of steps, can be set to one of the following values: default navigation inline
|
|
105
|
+
* @default 'default'
|
|
106
|
+
*/
|
|
107
|
+
type?: TStepType;
|
|
108
|
+
|
|
72
109
|
/**
|
|
73
110
|
* Never use this prop. Akinon design system does not allow custom styles.
|
|
74
111
|
* @ignore
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@akinon/ui-steps",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/esm/index.js",
|
|
@@ -9,16 +9,16 @@
|
|
|
9
9
|
"dist"
|
|
10
10
|
],
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"antd": "5.
|
|
13
|
-
"@akinon/
|
|
14
|
-
"@akinon/
|
|
12
|
+
"antd": "5.22.6",
|
|
13
|
+
"@akinon/ui-theme": "1.0.0",
|
|
14
|
+
"@akinon/icons": "1.0.0"
|
|
15
15
|
},
|
|
16
16
|
"devDependencies": {
|
|
17
17
|
"clean-package": "2.2.0",
|
|
18
18
|
"copyfiles": "^2.4.1",
|
|
19
19
|
"rimraf": "^5.0.5",
|
|
20
|
-
"typescript": "
|
|
21
|
-
"@akinon/typescript-config": "0.
|
|
20
|
+
"typescript": "*",
|
|
21
|
+
"@akinon/typescript-config": "1.0.0"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
24
|
"react": ">=18",
|