sard-uniapp 1.17.0 → 1.17.1
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/CHANGELOG.md +14 -0
- package/components/config/index.d.ts +1 -0
- package/components/config/index.js +1 -0
- package/components/popup/popup.vue +14 -1
- package/components/step/common.d.ts +22 -0
- package/components/step/common.js +1 -0
- package/components/step/index.d.ts +1 -0
- package/components/step/index.js +1 -0
- package/components/step/index.scss +215 -0
- package/components/step/step.d.ts +10 -0
- package/components/step/step.vue +97 -0
- package/components/steps/common.d.ts +18 -1
- package/components/steps/common.js +1 -0
- package/components/steps/index.d.ts +1 -1
- package/components/steps/index.scss +0 -216
- package/components/steps/steps.d.ts +10 -2
- package/components/steps/steps.vue +34 -56
- package/global.d.ts +1 -0
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
## [1.17.1](https://github.com/sutras/sard-uniapp/compare/v1.17.0...v1.17.1) (2025-05-30)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* 修复Popup在H5 attrs 透传问题 ([4de8765](https://github.com/sutras/sard-uniapp/commit/4de87657580cb6525c1025bc3862d4f4eef3afb1))
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* steps组件新增自定义内容插槽 ([5f17466](https://github.com/sutras/sard-uniapp/commit/5f17466c9370d21f699f0ec691e0ea5f74888188))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
1
15
|
# [1.17.0](https://github.com/sutras/sard-uniapp/compare/v1.16.0...v1.17.0) (2025-05-29)
|
|
2
16
|
|
|
3
17
|
|
|
@@ -17,13 +17,25 @@
|
|
|
17
17
|
:root-class="overlayClass"
|
|
18
18
|
@click="onOverlayClick"
|
|
19
19
|
/>
|
|
20
|
+
<!-- #ifndef MP -->
|
|
20
21
|
<view
|
|
22
|
+
v-bind="$attrs"
|
|
21
23
|
:class="popupClass"
|
|
22
24
|
:style="popupStyle"
|
|
23
25
|
@transitionend="onTransitionEnd"
|
|
24
26
|
>
|
|
25
27
|
<slot></slot>
|
|
26
28
|
</view>
|
|
29
|
+
<!-- #endif -->
|
|
30
|
+
<!-- #ifdef MP -->
|
|
31
|
+
<view
|
|
32
|
+
:class="popupClass"
|
|
33
|
+
:style="popupStyle"
|
|
34
|
+
@transitionend="onTransitionEnd"
|
|
35
|
+
>
|
|
36
|
+
<slot></slot>
|
|
37
|
+
</view>
|
|
38
|
+
<!-- #endif -->
|
|
27
39
|
</view>
|
|
28
40
|
<!-- #ifdef MP -->
|
|
29
41
|
</root-portal>
|
|
@@ -52,7 +64,8 @@ export default _defineComponent({
|
|
|
52
64
|
options: {
|
|
53
65
|
virtualHost: true,
|
|
54
66
|
styleIsolation: "shared"
|
|
55
|
-
}
|
|
67
|
+
},
|
|
68
|
+
inheritAttrs: false
|
|
56
69
|
},
|
|
57
70
|
__name: "popup",
|
|
58
71
|
props: _mergeDefaults({
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { type StyleValue } from 'vue';
|
|
2
|
+
import { type StepsStatus } from '../steps/common';
|
|
3
|
+
export interface StepProps {
|
|
4
|
+
rootStyle?: StyleValue;
|
|
5
|
+
rootClass?: string;
|
|
6
|
+
status?: StepsStatus;
|
|
7
|
+
name?: string;
|
|
8
|
+
description?: string;
|
|
9
|
+
index: number;
|
|
10
|
+
}
|
|
11
|
+
export interface StepSlots {
|
|
12
|
+
default?(props: {
|
|
13
|
+
status: StepsStatus;
|
|
14
|
+
}): any;
|
|
15
|
+
icon?(props: {
|
|
16
|
+
status: StepsStatus;
|
|
17
|
+
}): any;
|
|
18
|
+
}
|
|
19
|
+
export interface StepEmits {
|
|
20
|
+
}
|
|
21
|
+
export interface StepExpose {
|
|
22
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export type { StepProps, StepSlots, StepEmits, StepExpose } from './common';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,215 @@
|
|
|
1
|
+
@use '../style/base' as *;
|
|
2
|
+
|
|
3
|
+
@include bem(step) {
|
|
4
|
+
@include b() {
|
|
5
|
+
@include universal;
|
|
6
|
+
flex: 1;
|
|
7
|
+
font-size: var(--sar-steps-step-font-size);
|
|
8
|
+
|
|
9
|
+
&:first-child {
|
|
10
|
+
@include e(line-before) {
|
|
11
|
+
opacity: 0;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
&:last-child {
|
|
16
|
+
flex: none;
|
|
17
|
+
white-space: nowrap;
|
|
18
|
+
|
|
19
|
+
@include e(line) {
|
|
20
|
+
display: none;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@include e(line-after) {
|
|
24
|
+
opacity: 0;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@include m(behind) {
|
|
29
|
+
@include e(line) {
|
|
30
|
+
background-color: var(--sar-steps-line-active-color);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@include m(self) {
|
|
35
|
+
@include e(line-before) {
|
|
36
|
+
background-color: var(--sar-steps-line-active-color);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@include m(finish) {
|
|
41
|
+
@include e(icon) {
|
|
42
|
+
color: var(--sar-steps-icon-finish-color);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@include e(body) {
|
|
46
|
+
color: var(--sar-steps-text-finish-color);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@include m(process) {
|
|
51
|
+
@include e(icon) {
|
|
52
|
+
color: var(--sar-steps-icon-process-color);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
@include e(body) {
|
|
56
|
+
color: var(--sar-steps-text-process-color);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@include m(wait) {
|
|
61
|
+
@include e(icon) {
|
|
62
|
+
color: var(--sar-steps-icon-wait-color);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@include e(body) {
|
|
66
|
+
color: var(--sar-steps-text-wait-color);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@include m(error) {
|
|
71
|
+
@include e(icon) {
|
|
72
|
+
color: var(--sar-steps-icon-error-color);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@include e(body) {
|
|
76
|
+
color: var(--sar-steps-text-error-color);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
@include e(header) {
|
|
82
|
+
@include universal;
|
|
83
|
+
flex-direction: row;
|
|
84
|
+
align-items: center;
|
|
85
|
+
padding-top: var(--sar-steps-header-gap-y);
|
|
86
|
+
padding-bottom: var(--sar-steps-header-gap-y);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
@include e(line) {
|
|
90
|
+
@include universal;
|
|
91
|
+
height: var(--sar-steps-line-thickness);
|
|
92
|
+
width: 0;
|
|
93
|
+
flex-grow: 1;
|
|
94
|
+
flex-shrink: 1;
|
|
95
|
+
flex-basis: 0;
|
|
96
|
+
margin-left: var(--sar-steps-line-gap);
|
|
97
|
+
margin-right: var(--sar-steps-line-gap);
|
|
98
|
+
background-color: var(--sar-steps-line-color);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
@include e(line-before) {
|
|
102
|
+
display: none;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
@include e(icon) {
|
|
106
|
+
@include universal;
|
|
107
|
+
font-size: var(--sar-steps-icon-font-size);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
@include e(body) {
|
|
111
|
+
@include universal;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
@include e(name) {
|
|
115
|
+
font-size: var(--sar-steps-name-font-size);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
@include e(description) {
|
|
119
|
+
margin-top: var(--sar-steps-description-margin-top);
|
|
120
|
+
font-size: var(--sar-steps-description-font-size);
|
|
121
|
+
color: var(--sar-steps-description-color);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
@include m(vertical) {
|
|
125
|
+
flex-direction: row;
|
|
126
|
+
min-height: var(--sar-steps-step-min-height);
|
|
127
|
+
|
|
128
|
+
&:last-child {
|
|
129
|
+
@include e(line) {
|
|
130
|
+
white-space: unset;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
@include e(header) {
|
|
135
|
+
top: calc(
|
|
136
|
+
var(--sar-steps-header-vertical-top) + var(--sar-steps-body-padding-y)
|
|
137
|
+
);
|
|
138
|
+
flex: none;
|
|
139
|
+
flex-direction: column;
|
|
140
|
+
padding-top: 0;
|
|
141
|
+
padding-bottom: 0;
|
|
142
|
+
padding-left: var(--sar-steps-header-gap-x);
|
|
143
|
+
padding-right: var(--sar-steps-header-gap-x);
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
@include e(line) {
|
|
147
|
+
width: var(--sar-steps-line-thickness);
|
|
148
|
+
height: 0;
|
|
149
|
+
margin-left: 0;
|
|
150
|
+
margin-right: 0;
|
|
151
|
+
margin-top: var(--sar-steps-line-gap);
|
|
152
|
+
margin-bottom: var(--sar-steps-line-gap);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
@include e(body) {
|
|
156
|
+
flex: 1;
|
|
157
|
+
padding-top: var(--sar-steps-body-padding-y);
|
|
158
|
+
padding-bottom: var(--sar-steps-body-padding-y);
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
@include m(center) {
|
|
163
|
+
justify-content: center;
|
|
164
|
+
|
|
165
|
+
&:last-child {
|
|
166
|
+
flex: 1;
|
|
167
|
+
white-space: unset;
|
|
168
|
+
|
|
169
|
+
@include e(line) {
|
|
170
|
+
display: flex;
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
@include e(line-before) {
|
|
175
|
+
display: flex;
|
|
176
|
+
margin-left: 0;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
@include e(line-after) {
|
|
180
|
+
margin-right: 0;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
@include e(body) {
|
|
184
|
+
align-items: center;
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
@include m-intersect(center, vertical) {
|
|
189
|
+
justify-content: center;
|
|
190
|
+
align-items: center;
|
|
191
|
+
|
|
192
|
+
&:last-child {
|
|
193
|
+
flex: 1;
|
|
194
|
+
white-space: unset;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
@include e(header) {
|
|
198
|
+
top: 0;
|
|
199
|
+
align-self: stretch;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
@include e(line-before) {
|
|
203
|
+
margin-top: 0;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
@include e(line-after) {
|
|
207
|
+
margin-bottom: 0;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
@include e(body) {
|
|
211
|
+
justify-content: center;
|
|
212
|
+
align-items: flex-start;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { type StepProps, type StepSlots } from './common';
|
|
2
|
+
declare function __VLS_template(): Readonly<StepSlots> & StepSlots;
|
|
3
|
+
declare const __VLS_component: import("vue").DefineComponent<StepProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<StepProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
4
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
|
|
5
|
+
export default _default;
|
|
6
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
7
|
+
new (): {
|
|
8
|
+
$slots: S;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<view :class="stepClass" :style="stepStyle">
|
|
3
|
+
<view :class="bem.e('header')">
|
|
4
|
+
<view :class="classNames(bem.e('line'), bem.e('line-before'))"></view>
|
|
5
|
+
<view :class="bem.e('icon')">
|
|
6
|
+
<slot name="icon" :status="currentStatus">
|
|
7
|
+
<sar-icon
|
|
8
|
+
:family="context.iconFamily || 'sari'"
|
|
9
|
+
:name="statusIcon"
|
|
10
|
+
:size="context.iconSize"
|
|
11
|
+
/>
|
|
12
|
+
</slot>
|
|
13
|
+
</view>
|
|
14
|
+
<view :class="classNames(bem.e('line'), bem.e('line-after'))"></view>
|
|
15
|
+
</view>
|
|
16
|
+
<view :class="bem.e('body')">
|
|
17
|
+
<slot :status="currentStatus">
|
|
18
|
+
<view :class="bem.e('name')">{{ name }}</view>
|
|
19
|
+
<view v-if="description" :class="bem.e('description')">
|
|
20
|
+
{{ description }}
|
|
21
|
+
</view>
|
|
22
|
+
</slot>
|
|
23
|
+
</view>
|
|
24
|
+
</view>
|
|
25
|
+
</template>
|
|
26
|
+
|
|
27
|
+
<script>
|
|
28
|
+
import { defineComponent as _defineComponent } from "vue";
|
|
29
|
+
import { computed, inject } from "vue";
|
|
30
|
+
import SarIcon from "../icon/icon.vue";
|
|
31
|
+
import { classNames, stringifyStyle, createBem } from "../../utils";
|
|
32
|
+
import { stepsContextSymbol } from "../steps/common";
|
|
33
|
+
export default _defineComponent({
|
|
34
|
+
components: {
|
|
35
|
+
SarIcon,
|
|
36
|
+
},
|
|
37
|
+
...{
|
|
38
|
+
options: {
|
|
39
|
+
virtualHost: true,
|
|
40
|
+
styleIsolation: "shared"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
__name: "step",
|
|
44
|
+
props: {
|
|
45
|
+
rootStyle: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
|
|
46
|
+
rootClass: { type: String, required: false },
|
|
47
|
+
status: { type: String, required: false },
|
|
48
|
+
name: { type: String, required: false },
|
|
49
|
+
description: { type: String, required: false },
|
|
50
|
+
index: { type: Number, required: true }
|
|
51
|
+
},
|
|
52
|
+
setup(__props, { expose: __expose }) {
|
|
53
|
+
const props = __props;
|
|
54
|
+
__expose({});
|
|
55
|
+
const bem = createBem("step");
|
|
56
|
+
const context = inject(stepsContextSymbol);
|
|
57
|
+
if (!context) {
|
|
58
|
+
throw new Error("Step must be included in Steps.");
|
|
59
|
+
}
|
|
60
|
+
const currentStatus = computed(() => {
|
|
61
|
+
return props.status ?? (props.index < context.current ? "finish" : props.index === context.current ? context.status ?? "process" : "wait");
|
|
62
|
+
});
|
|
63
|
+
const statusIcon = computed(() => {
|
|
64
|
+
return {
|
|
65
|
+
finish: context.finishIcon,
|
|
66
|
+
process: context.processIcon,
|
|
67
|
+
wait: context.waitIcon,
|
|
68
|
+
error: context.errorIcon
|
|
69
|
+
}[currentStatus.value];
|
|
70
|
+
});
|
|
71
|
+
const position = computed(() => {
|
|
72
|
+
return props.index < context.current ? "behind" : context.current === props.index ? "self" : "front";
|
|
73
|
+
});
|
|
74
|
+
const stepClass = computed(() => {
|
|
75
|
+
return classNames(
|
|
76
|
+
bem.b(),
|
|
77
|
+
bem.m("center", context.center),
|
|
78
|
+
bem.m(currentStatus.value),
|
|
79
|
+
bem.m(position.value),
|
|
80
|
+
bem.m(context.direction),
|
|
81
|
+
props.rootClass
|
|
82
|
+
);
|
|
83
|
+
});
|
|
84
|
+
const stepStyle = computed(() => {
|
|
85
|
+
return stringifyStyle(props.rootStyle);
|
|
86
|
+
});
|
|
87
|
+
const __returned__ = { props, bem, context, currentStatus, statusIcon, position, stepClass, stepStyle, SarIcon, get classNames() {
|
|
88
|
+
return classNames;
|
|
89
|
+
} };
|
|
90
|
+
return __returned__;
|
|
91
|
+
}
|
|
92
|
+
});
|
|
93
|
+
</script>
|
|
94
|
+
|
|
95
|
+
<style lang="scss">
|
|
96
|
+
@import './index.scss';
|
|
97
|
+
</style>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type StyleValue } from 'vue';
|
|
1
|
+
import { InjectionKey, type StyleValue } from 'vue';
|
|
2
2
|
export type StepsStatus = 'wait' | 'process' | 'error' | 'finish';
|
|
3
3
|
export interface StepsItem {
|
|
4
4
|
status?: StepsStatus;
|
|
@@ -23,9 +23,26 @@ export interface StepsProps {
|
|
|
23
23
|
export declare const defaultStepsProps: {
|
|
24
24
|
current: number;
|
|
25
25
|
center: boolean;
|
|
26
|
+
itemList: () => never[];
|
|
26
27
|
direction: StepsProps["direction"];
|
|
27
28
|
finishIcon: string;
|
|
28
29
|
processIcon: string;
|
|
29
30
|
waitIcon: string;
|
|
30
31
|
errorIcon: string;
|
|
31
32
|
};
|
|
33
|
+
export interface StepsSlots {
|
|
34
|
+
default?(props: Record<string, never>): any;
|
|
35
|
+
}
|
|
36
|
+
export interface StepsContext {
|
|
37
|
+
current: number;
|
|
38
|
+
center?: boolean;
|
|
39
|
+
direction?: StepsProps['direction'];
|
|
40
|
+
iconFamily?: string;
|
|
41
|
+
iconSize?: string;
|
|
42
|
+
finishIcon?: string;
|
|
43
|
+
processIcon?: string;
|
|
44
|
+
waitIcon?: string;
|
|
45
|
+
errorIcon?: string;
|
|
46
|
+
status?: StepsStatus;
|
|
47
|
+
}
|
|
48
|
+
export declare const stepsContextSymbol: InjectionKey<StepsContext>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export type { StepsStatus, StepsItem,
|
|
1
|
+
export type { StepsProps, StepsSlots, StepsContext, StepsStatus, StepsItem, } from './common';
|
|
@@ -8,224 +8,8 @@
|
|
|
8
8
|
align-items: flex-start;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
@include e(step) {
|
|
12
|
-
@include universal;
|
|
13
|
-
flex: 1;
|
|
14
|
-
font-size: var(--sar-steps-step-font-size);
|
|
15
|
-
|
|
16
|
-
&:first-child {
|
|
17
|
-
@include e(line-before) {
|
|
18
|
-
opacity: 0;
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
&:last-child {
|
|
23
|
-
flex: none;
|
|
24
|
-
white-space: nowrap;
|
|
25
|
-
|
|
26
|
-
@include e(line) {
|
|
27
|
-
display: none;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
@include e(line-after) {
|
|
31
|
-
opacity: 0;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
@include m(behind) {
|
|
36
|
-
@include e(line) {
|
|
37
|
-
background-color: var(--sar-steps-line-active-color);
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
@include m(self) {
|
|
42
|
-
@include e(line-before) {
|
|
43
|
-
background-color: var(--sar-steps-line-active-color);
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
@include m(finish) {
|
|
48
|
-
@include e(icon) {
|
|
49
|
-
color: var(--sar-steps-icon-finish-color);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
@include e(body) {
|
|
53
|
-
color: var(--sar-steps-text-finish-color);
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
@include m(process) {
|
|
58
|
-
@include e(icon) {
|
|
59
|
-
color: var(--sar-steps-icon-process-color);
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
@include e(body) {
|
|
63
|
-
color: var(--sar-steps-text-process-color);
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
@include m(wait) {
|
|
68
|
-
@include e(icon) {
|
|
69
|
-
color: var(--sar-steps-icon-wait-color);
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
@include e(body) {
|
|
73
|
-
color: var(--sar-steps-text-wait-color);
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
@include m(error) {
|
|
78
|
-
@include e(icon) {
|
|
79
|
-
color: var(--sar-steps-icon-error-color);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
@include e(body) {
|
|
83
|
-
color: var(--sar-steps-text-error-color);
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
@include e(header) {
|
|
89
|
-
@include universal;
|
|
90
|
-
flex-direction: row;
|
|
91
|
-
align-items: center;
|
|
92
|
-
padding-top: var(--sar-steps-header-gap-y);
|
|
93
|
-
padding-bottom: var(--sar-steps-header-gap-y);
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
@include e(line) {
|
|
97
|
-
@include universal;
|
|
98
|
-
height: var(--sar-steps-line-thickness);
|
|
99
|
-
width: 0;
|
|
100
|
-
flex-grow: 1;
|
|
101
|
-
flex-shrink: 1;
|
|
102
|
-
flex-basis: 0;
|
|
103
|
-
margin-left: var(--sar-steps-line-gap);
|
|
104
|
-
margin-right: var(--sar-steps-line-gap);
|
|
105
|
-
background-color: var(--sar-steps-line-color);
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
@include e(line-before) {
|
|
109
|
-
display: none;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
@include e(icon) {
|
|
113
|
-
@include universal;
|
|
114
|
-
font-size: var(--sar-steps-icon-font-size);
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
@include e(body) {
|
|
118
|
-
@include universal;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
@include e(name) {
|
|
122
|
-
font-size: var(--sar-steps-name-font-size);
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
@include e(description) {
|
|
126
|
-
margin-top: var(--sar-steps-description-margin-top);
|
|
127
|
-
font-size: var(--sar-steps-description-font-size);
|
|
128
|
-
color: var(--sar-steps-description-color);
|
|
129
|
-
}
|
|
130
|
-
|
|
131
11
|
@include m(vertical) {
|
|
132
12
|
flex-direction: column;
|
|
133
13
|
align-items: stretch;
|
|
134
|
-
|
|
135
|
-
@include e(step) {
|
|
136
|
-
flex-direction: row;
|
|
137
|
-
min-height: var(--sar-steps-step-min-height);
|
|
138
|
-
|
|
139
|
-
&:last-child {
|
|
140
|
-
@include e(line) {
|
|
141
|
-
white-space: unset;
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
@include e(header) {
|
|
147
|
-
top: calc(
|
|
148
|
-
var(--sar-steps-header-vertical-top) + var(--sar-steps-body-padding-y)
|
|
149
|
-
);
|
|
150
|
-
flex: none;
|
|
151
|
-
flex-direction: column;
|
|
152
|
-
padding-top: 0;
|
|
153
|
-
padding-bottom: 0;
|
|
154
|
-
padding-left: var(--sar-steps-header-gap-x);
|
|
155
|
-
padding-right: var(--sar-steps-header-gap-x);
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
@include e(line) {
|
|
159
|
-
width: var(--sar-steps-line-thickness);
|
|
160
|
-
height: 0;
|
|
161
|
-
margin-left: 0;
|
|
162
|
-
margin-right: 0;
|
|
163
|
-
margin-top: var(--sar-steps-line-gap);
|
|
164
|
-
margin-bottom: var(--sar-steps-line-gap);
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
@include e(body) {
|
|
168
|
-
flex: 1;
|
|
169
|
-
padding-top: var(--sar-steps-body-padding-y);
|
|
170
|
-
padding-bottom: var(--sar-steps-body-padding-y);
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
@include m(center) {
|
|
175
|
-
@include e(step) {
|
|
176
|
-
justify-content: center;
|
|
177
|
-
|
|
178
|
-
&:last-child {
|
|
179
|
-
flex: 1;
|
|
180
|
-
white-space: unset;
|
|
181
|
-
|
|
182
|
-
@include e(line) {
|
|
183
|
-
display: flex;
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
@include e(line-before) {
|
|
189
|
-
display: flex;
|
|
190
|
-
margin-left: 0;
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
@include e(line-after) {
|
|
194
|
-
margin-right: 0;
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
@include e(body) {
|
|
198
|
-
align-items: center;
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
@include m-intersect(center, vertical) {
|
|
203
|
-
@include e(step) {
|
|
204
|
-
justify-content: center;
|
|
205
|
-
align-items: center;
|
|
206
|
-
|
|
207
|
-
&:last-child {
|
|
208
|
-
flex: 1;
|
|
209
|
-
white-space: unset;
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
@include e(header) {
|
|
214
|
-
top: 0;
|
|
215
|
-
align-self: stretch;
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
@include e(line-before) {
|
|
219
|
-
margin-top: 0;
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
@include e(line-after) {
|
|
223
|
-
margin-bottom: 0;
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
@include e(body) {
|
|
227
|
-
justify-content: center;
|
|
228
|
-
align-items: flex-start;
|
|
229
|
-
}
|
|
230
14
|
}
|
|
231
15
|
}
|
|
@@ -1,11 +1,19 @@
|
|
|
1
|
-
import { type StepsProps } from './common';
|
|
2
|
-
declare
|
|
1
|
+
import { type StepsProps, type StepsSlots } from './common';
|
|
2
|
+
declare function __VLS_template(): Readonly<StepsSlots> & StepsSlots;
|
|
3
|
+
declare const __VLS_component: import("vue").DefineComponent<StepsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<StepsProps> & Readonly<{}>, {
|
|
3
4
|
center: boolean;
|
|
4
5
|
direction: "vertical" | "horizontal";
|
|
6
|
+
itemList: import("./common").StepsItem[];
|
|
5
7
|
current: number;
|
|
6
8
|
finishIcon: string;
|
|
7
9
|
processIcon: string;
|
|
8
10
|
waitIcon: string;
|
|
9
11
|
errorIcon: string;
|
|
10
12
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
13
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
|
|
11
14
|
export default _default;
|
|
15
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
16
|
+
new (): {
|
|
17
|
+
$slots: S;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
@@ -1,46 +1,30 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<view :class="stepsClass" :style="stepsStyle">
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
>
|
|
14
|
-
<view :class="bem.e('header')">
|
|
15
|
-
<view :class="classNames(bem.e('line'), bem.e('line-before'))"></view>
|
|
16
|
-
<view :class="bem.e('icon')">
|
|
17
|
-
<sar-icon
|
|
18
|
-
:family="iconFamily || 'sari'"
|
|
19
|
-
:name="getStatusIcon(item.status ?? getStatus(current, i))"
|
|
20
|
-
:size="iconSize"
|
|
21
|
-
/>
|
|
22
|
-
</view>
|
|
23
|
-
<view :class="classNames(bem.e('line'), bem.e('line-after'))"></view>
|
|
24
|
-
</view>
|
|
25
|
-
<view :class="bem.e('body')">
|
|
26
|
-
<view :class="bem.e('name')">{{ item.name }}</view>
|
|
27
|
-
<view v-if="item.description" :class="bem.e('description')">
|
|
28
|
-
{{ item.description }}
|
|
29
|
-
</view>
|
|
30
|
-
</view>
|
|
31
|
-
</view>
|
|
3
|
+
<slot>
|
|
4
|
+
<sar-step
|
|
5
|
+
v-for="(item, i) in itemList"
|
|
6
|
+
:key="i"
|
|
7
|
+
:index="i"
|
|
8
|
+
:status="item.status"
|
|
9
|
+
:name="item.name"
|
|
10
|
+
:description="item.description"
|
|
11
|
+
/>
|
|
12
|
+
</slot>
|
|
32
13
|
</view>
|
|
33
14
|
</template>
|
|
34
15
|
|
|
35
16
|
<script>
|
|
36
17
|
import { mergeDefaults as _mergeDefaults, defineComponent as _defineComponent } from "vue";
|
|
37
|
-
import { computed } from "vue";
|
|
18
|
+
import { computed, provide, reactive, toRef } from "vue";
|
|
38
19
|
import { classNames, stringifyStyle, createBem } from "../../utils";
|
|
39
|
-
import
|
|
40
|
-
import {
|
|
20
|
+
import SarStep from "../step/step.vue";
|
|
21
|
+
import {
|
|
22
|
+
defaultStepsProps,
|
|
23
|
+
stepsContextSymbol
|
|
24
|
+
} from "./common";
|
|
41
25
|
export default _defineComponent({
|
|
42
26
|
components: {
|
|
43
|
-
|
|
27
|
+
SarStep,
|
|
44
28
|
},
|
|
45
29
|
...{
|
|
46
30
|
options: {
|
|
@@ -67,35 +51,29 @@ export default _defineComponent({
|
|
|
67
51
|
setup(__props, { expose: __expose }) {
|
|
68
52
|
__expose();
|
|
69
53
|
const props = __props;
|
|
70
|
-
const getStatus = (current, index) => {
|
|
71
|
-
return index < current ? "finish" : index === current ? props.status ?? "process" : "wait";
|
|
72
|
-
};
|
|
73
|
-
const getStatusIcon = (status) => {
|
|
74
|
-
return {
|
|
75
|
-
finish: props.finishIcon,
|
|
76
|
-
process: props.processIcon,
|
|
77
|
-
wait: props.waitIcon,
|
|
78
|
-
error: props.errorIcon
|
|
79
|
-
}[status];
|
|
80
|
-
};
|
|
81
|
-
const getPosition = (current, index) => {
|
|
82
|
-
return index < current ? "behind" : current === index ? "self" : "front";
|
|
83
|
-
};
|
|
84
54
|
const bem = createBem("steps");
|
|
55
|
+
provide(
|
|
56
|
+
stepsContextSymbol,
|
|
57
|
+
reactive({
|
|
58
|
+
current: toRef(() => props.current),
|
|
59
|
+
direction: toRef(() => props.direction),
|
|
60
|
+
center: toRef(() => props.center),
|
|
61
|
+
iconFamily: toRef(() => props.iconFamily),
|
|
62
|
+
iconSize: toRef(() => props.iconSize),
|
|
63
|
+
finishIcon: toRef(() => props.finishIcon),
|
|
64
|
+
processIcon: toRef(() => props.processIcon),
|
|
65
|
+
waitIcon: toRef(() => props.waitIcon),
|
|
66
|
+
errorIcon: toRef(() => props.errorIcon),
|
|
67
|
+
status: toRef(() => props.status)
|
|
68
|
+
})
|
|
69
|
+
);
|
|
85
70
|
const stepsClass = computed(() => {
|
|
86
|
-
return classNames(
|
|
87
|
-
bem.b(),
|
|
88
|
-
bem.m(props.direction),
|
|
89
|
-
bem.m("center", props.center),
|
|
90
|
-
props.rootClass
|
|
91
|
-
);
|
|
71
|
+
return classNames(bem.b(), bem.m(props.direction), props.rootClass);
|
|
92
72
|
});
|
|
93
73
|
const stepsStyle = computed(() => {
|
|
94
74
|
return stringifyStyle(props.rootStyle);
|
|
95
75
|
});
|
|
96
|
-
const __returned__ = { props,
|
|
97
|
-
return classNames;
|
|
98
|
-
}, SarIcon };
|
|
76
|
+
const __returned__ = { props, bem, stepsClass, stepsStyle, SarStep };
|
|
99
77
|
return __returned__;
|
|
100
78
|
}
|
|
101
79
|
});
|
package/global.d.ts
CHANGED
|
@@ -99,6 +99,7 @@ declare module 'vue' {
|
|
|
99
99
|
SarSlider: typeof import('./components/slider/slider').default
|
|
100
100
|
SarSpace: typeof import('./components/space/space').default
|
|
101
101
|
SarStatusBar: typeof import('./components/status-bar/status-bar').default
|
|
102
|
+
SarStep: typeof import('./components/step/step').default
|
|
102
103
|
SarStepper: typeof import('./components/stepper/stepper').default
|
|
103
104
|
SarSteps: typeof import('./components/steps/steps').default
|
|
104
105
|
SarSwiperDot: typeof import('./components/swiper-dot/swiper-dot').default
|
package/index.d.ts
CHANGED
|
@@ -85,6 +85,7 @@ export * from './components/skeleton';
|
|
|
85
85
|
export * from './components/slider';
|
|
86
86
|
export * from './components/space';
|
|
87
87
|
export * from './components/status-bar';
|
|
88
|
+
export * from './components/step';
|
|
88
89
|
export * from './components/stepper';
|
|
89
90
|
export * from './components/steps';
|
|
90
91
|
export * from './components/swiper-dot';
|
package/index.js
CHANGED
|
@@ -85,6 +85,7 @@ export * from './components/skeleton';
|
|
|
85
85
|
export * from './components/slider';
|
|
86
86
|
export * from './components/space';
|
|
87
87
|
export * from './components/status-bar';
|
|
88
|
+
export * from './components/step';
|
|
88
89
|
export * from './components/stepper';
|
|
89
90
|
export * from './components/steps';
|
|
90
91
|
export * from './components/swiper-dot';
|