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 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
 
@@ -367,6 +367,7 @@ export declare const defaultConfig: {
367
367
  steps: {
368
368
  current: number;
369
369
  center: boolean;
370
+ itemList: () => never[];
370
371
  direction: StepsProps["direction"];
371
372
  finishIcon: string;
372
373
  processIcon: string;
@@ -329,6 +329,7 @@ export const defaultConfig = {
329
329
  steps: {
330
330
  current: 0,
331
331
  center: false,
332
+ itemList: () => [],
332
333
  direction: 'horizontal',
333
334
  finishIcon: 'check-circle-fill',
334
335
  processIcon: 'circle',
@@ -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,2 +1,3 @@
1
1
  import { defaultConfig } from '../config';
2
2
  export const defaultStepsProps = defaultConfig.steps;
3
+ export const stepsContextSymbol = Symbol('steps-context');
@@ -1 +1 @@
1
- export type { StepsStatus, StepsItem, StepsProps } from './common';
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 const _default: import("vue").DefineComponent<StepsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<StepsProps> & Readonly<{}>, {
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
- <view
4
- v-for="(item, i) in itemList"
5
- :key="i"
6
- :class="
7
- classNames(
8
- bem.e('step'),
9
- bem.em('step', item.status ?? getStatus(current, i)),
10
- bem.em('step', getPosition(current, i)),
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 SarIcon from "../icon/icon.vue";
40
- import { defaultStepsProps } from "./common";
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
- SarIcon,
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, getStatus, getStatusIcon, getPosition, bem, stepsClass, stepsStyle, get classNames() {
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';
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "id": "sard-uniapp",
3
3
  "name": "sard-uniapp",
4
4
  "displayName": "sard-uniapp",
5
- "version": "1.17.0",
5
+ "version": "1.17.1",
6
6
  "description": "sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库",
7
7
  "main": "index.js",
8
8
  "scripts": {