stellar-ui-plus 1.25.7 → 1.25.8

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.
Files changed (18) hide show
  1. package/components/ste-app-update/method.ts +189 -20
  2. package/components/ste-app-update/ste-app-update.vue +160 -15
  3. package/components/ste-dropdown-menu/README.md +186 -1
  4. package/components/ste-dropdown-menu/ste-dropdown-menu.scss +8 -1
  5. package/components/ste-popup/ATTRIBUTES.md +3 -3
  6. package/components/ste-popup/ste-popup.easycom.json +138 -138
  7. package/components/ste-popup/ste-popup.vue +19 -23
  8. package/components/ste-radio/ATTRIBUTES.md +2 -2
  9. package/components/ste-radio/ste-radio.easycom.json +4 -4
  10. package/components/ste-select/README.md +0 -6
  11. package/components/ste-select-order/README.md +61 -0
  12. package/components/ste-select-order/config.json +5 -0
  13. package/components/ste-select-order/props.ts +30 -0
  14. package/components/ste-select-order/ste-select-order.easycom.json +73 -0
  15. package/components/ste-select-order/ste-select-order.vue +276 -0
  16. package/components/ste-table/ste-table.vue +7 -37
  17. package/package.json +2 -3
  18. package/utils/System.ts +1 -1
package/components/ste-dropdown-menu/README.md CHANGED
@@ -177,10 +177,195 @@
177
177
  }
178
178
 
179
179
  .action-box {
180
- padding: 0 40rpx;
180
+ padding: 0 40rpx 20rpx 40rpx;
181
181
  display: flex;
182
182
  justify-content: space-between;
183
+ }
184
+ }
185
+ }
186
+ </style>
187
+ ```
188
+
189
+ ## 单据类型筛选
190
+
191
+ 此示例展示了如何实现一个单据类型筛选菜单，包含左侧分类选择、右侧输入框和子选项选择。
192
+
193
+ ```html
194
+ <script lang="ts" setup>
195
+ import type { RefDropdownMenu } from 'stellar-ui-plus/types/refComponents';
196
+ import { computed, reactive, ref } from 'vue';
197
+
198
+ const orderMenus = [
199
+ {
200
+ label: '单据类型1',
201
+ value: '1',
202
+ children: [
203
+ { label: '类型1A', value: '1-1' },
204
+ { label: '类型1B', value: '1-2' },
205
+ { label: '类型1C', value: '1-3' },
206
+ { label: '类型1D', value: '1-4' },
207
+ ],
208
+ },
209
+ {
210
+ label: '单据类型2',
211
+ value: '2',
212
+ children: [
213
+ { label: '类型2A', value: '2-1' },
214
+ { label: '类型2B', value: '2-2' },
215
+ { label: '类型2C', value: '2-3' },
216
+ { label: '类型2D', value: '2-4' },
217
+ ],
218
+ },
219
+ ];
220
+
221
+ const orderData = reactive({
222
+ parent: '1',
223
+ type: '1-1',
224
+ code: '',
225
+ });
226
+
227
+ const orderChildren = computed(() => orderMenus.find(item => item.value == orderData.parent)?.children || []);
228
+
229
+ const setOrder = (key: keyof typeof orderData, v: string) => {
230
+ orderData[key] = v;
231
+ if (key == 'parent') {
232
+ const children = orderMenus.find(item => item.value == v)?.children || [];
233
+ orderData.type = children[0]?.value || '';
234
+ }
235
+ };
236
+
237
+ const orderMenuRef = ref<RefDropdownMenu>();
238
+ function confirmOrderMenu() {
239
+ uni.showToast({
240
+ title: `确认订单 parent:${orderData.parent}, type:${orderData.type}, code:${orderData.code}`,
241
+ icon: 'none',
242
+ });
243
+ orderMenuRef.value?.close();
244
+ }
245
+ </script>
246
+ <template>
247
+ <view class="menu-item">
248
+ <view>
249
+ <ste-dropdown-menu value="2" title="单据类型" ref="orderMenuRef">
250
+ <view class="order-menu-box">
251
+ <view class="content-box">
252
+ <view class="content-left">
253
+ <view v-for="(m, i) in orderMenus" :key="i" class="left-menu-item" :class="orderData.parent == m.value ? 'active' : ''" @click="setOrder('parent', m.value)">
254
+ {{ m.label }}
255
+ </view>
256
+ </view>
257
+ <view class="content-right">
258
+ <view class="right-codes">
259
+ <view class="content-title">订单尾号</view>
260
+ <ste-input style="width: 356rpx" placeholder="请输入订单最后5位" v-model="orderData.code" background="#f5f5f5"></ste-input>
261
+ </view>
262
+ <view class="right-types">
263
+ <view class="content-title">单据类型</view>
264
+ <view class="right-menus">
265
+ <view v-for="(m, i) in orderChildren" :key="i" class="right-menu-item" :class="orderData.type == m.value ? 'active' : ''" @click="setOrder('type', m.value)">
266
+ {{ m.label }}
267
+ </view>
268
+ </view>
269
+ </view>
270
+ </view>
271
+ </view>
272
+ <view class="action-box">
273
+ <ste-button width="320" background="rgba(0,0,0,0)" borderColor="#0090FF" color="#0090FF" @click="confirmOrderMenu">重置</ste-button>
274
+ <ste-button width="320" @click="confirmOrderMenu">确认</ste-button>
275
+ </view>
276
+ </view>
277
+ </ste-dropdown-menu>
278
+ </view>
279
+ </view>
280
+ </template>
281
+ <style lang="scss">
282
+ .menu-item {
283
+ display: flex;
284
+ padding: 0 20rpx;
285
+ width: 100%;
286
+ box-shadow: 0 0 10px #ddd;
287
+ > view {
288
+ flex: 1;
289
+ display: flex;
290
+ align-items: center;
291
+ justify-content: center;
292
+ }
293
+
294
+ .order-menu-box {
295
+ background-color: #fff;
296
+ padding-top: 24rpx;
297
+ border-top: solid 4rpx #f5f5f5;
183
298
 
299
+ .content-box {
300
+ width: 100%;
301
+ display: flex;
302
+ margin-bottom: 56rpx;
303
+ font-size: 28rpx;
304
+
305
+ .content-left {
306
+ width: 150rpx;
307
+ background-color: #f9f9f9;
308
+
309
+ .left-menu-item {
310
+ height: 90rpx;
311
+ display: flex;
312
+ align-items: center;
313
+ justify-content: center;
314
+ font-size: 24rpx;
315
+ color: #a4a4a4;
316
+
317
+ &.active {
318
+ background-color: #fff;
319
+ color: #0090ff;
320
+ }
321
+ }
322
+ }
323
+
324
+ .content-right {
325
+ flex: 1;
326
+ margin-left: 26rpx;
327
+ margin-right: 18rpx;
328
+ background-color: #fff;
329
+
330
+ .content-title {
331
+ height: 90rpx;
332
+ display: flex;
333
+ align-items: center;
334
+ font-size: 24rpx;
335
+ color: #1c1f23;
336
+ }
337
+
338
+ .right-types {
339
+ .right-menus {
340
+ display: flex;
341
+ flex-wrap: wrap;
342
+ align-items: center;
343
+ gap: 20rpx;
344
+
345
+ .right-menu-item {
346
+ width: 162rpx;
347
+ height: 64rpx;
348
+ display: flex;
349
+ align-items: center;
350
+ justify-content: center;
351
+ background: #f9f9f9;
352
+ border-radius: 8rpx;
353
+
354
+ &.active {
355
+ background-color: #0090ff;
356
+ font-weight: bold;
357
+ color: #fff;
358
+ }
359
+ }
360
+ }
361
+ }
362
+ }
363
+ }
364
+
365
+ .action-box {
366
+ padding: 0 40rpx;
367
+ display: flex;
368
+ justify-content: space-between;
184
369
  padding-bottom: 20rpx;
185
370
  }
186
371
  }
package/components/ste-dropdown-menu/ste-dropdown-menu.scss CHANGED
@@ -1,14 +1,17 @@
1
1
  .ste-dropdown-menu-root {
2
2
  .menu-box {
3
3
  padding: 20rpx 0;
4
+
4
5
  .menu-title-icon {
5
6
  display: inline-flex;
6
7
  transition: all var(--duration) linear;
7
8
  }
9
+
8
10
  .title {
9
11
  font-size: var(--font-size-24, 24rpx);
10
12
  margin-right: 16rpx;
11
13
  }
14
+
12
15
  display: flex;
13
16
  align-items: center;
14
17
  }
@@ -59,6 +62,7 @@
59
62
  .menu-title-icon {
60
63
  transform: rotate(180deg);
61
64
  }
65
+
62
66
  .dropdown-content {
63
67
  opacity: 1;
64
68
  z-index: var(--menu-z-index);
@@ -73,6 +77,7 @@
73
77
  .menu-title-icon {
74
78
  transform: rotate(180deg);
75
79
  }
80
+
76
81
  .dropdown-content {
77
82
  display: flex;
78
83
  flex-direction: column;
@@ -82,10 +87,12 @@
82
87
  transform: translateY(100%);
83
88
  }
84
89
  }
90
+
85
91
  &.open {
86
92
  .menu-title-icon {
87
93
  transform: rotate(0);
88
94
  }
95
+
89
96
  .menu-item-content {
90
97
  transform: translateY(0);
91
98
  }
@@ -96,4 +103,4 @@
96
103
  }
97
104
  }
98
105
  }
99
- }
106
+ }
package/components/ste-popup/ATTRIBUTES.md CHANGED
@@ -21,9 +21,9 @@
21
21
  ### Events
22
22
  | 事件名 | 说明 | 事件参数 | 支持版本 |
23
23
  | ----- | ----- | ------- | -------- |
24
- | `close` | 弹窗关闭动画执行完毕事件 | `data`：() => void | - |
25
- | `open` | 弹窗打开动画执行完毕事件 | `data`：() => void | - |
26
- | `maskClick` | 点击遮罩时触发 | `data`：() => void | - |
24
+ | `close` | 弹窗关闭前触发，可用于异步拦截关闭 | `suspend`：开启等待的回调函数<br/>`next`：执行后续关闭操作的回调函数<br/>`stop`：阻止后续关闭操作的回调函数 | - |
25
+ | `open-after` | 弹窗打开动画执行完毕事件 | - | - |
26
+ | `clickMask` | 点击遮罩时触发 | - | - |
27
27
 
28
28
 
29
29
  ### Slots
package/components/ste-popup/ste-popup.easycom.json CHANGED
@@ -1,138 +1,138 @@
1
- {
2
- "name": "ste-popup",
3
- "description": "验证码输入",
4
- "example": "<ste-popup v-model:show='show'></ste-popup>",
5
- "tutorial": "https://stellar-ui.intecloud.com.cn/?projectName=stellar-ui-plus&menu=%E7%BB%84%E4%BB%B6&active=ste-popup",
6
- "attributes": [
7
- {
8
- "name": "show",
9
- "description": "是否显示弹出层，使用v-model修饰符来双向绑定",
10
- "type": "boolean",
11
- "default": false
12
- },
13
- {
14
- "name": "backgroundColor",
15
- "description": "内容容器的背景色",
16
- "type": "string",
17
- "default": "#ffffff"
18
- },
19
- {
20
- "name": "isMaskClick",
21
- "description": "是否可以点击遮罩层关闭",
22
- "type": "boolean",
23
- "default": true
24
- },
25
- {
26
- "name": "width",
27
- "description": "内容区宽度",
28
- "type": "string | number",
29
- "default": "auto"
30
- },
31
- {
32
- "name": "height",
33
- "description": "内容区高度",
34
- "type": "string | number",
35
- "default": "auto"
36
- },
37
- {
38
- "name": "position",
39
- "description": "弹出位置",
40
- "type": "string",
41
- "values": [
42
- {
43
- "name": "center",
44
- "description": "中"
45
- },
46
- {
47
- "name": "top",
48
- "description": "上"
49
- },
50
- {
51
- "name": "bottom",
52
- "description": "下"
53
- },
54
- {
55
- "name": "left",
56
- "description": "左"
57
- },
58
- {
59
- "name": "right",
60
- "description": "右"
61
- }
62
- ],
63
- "default": "center"
64
- },
65
- {
66
- "name": "round",
67
- "description": "是否圆角",
68
- "type": "boolean",
69
- "default": false
70
- },
71
- {
72
- "name": "showClose",
73
- "description": "是否右上角显示关闭图标",
74
- "type": "boolean",
75
- "default": true
76
- },
77
- {
78
- "name": "offsetX",
79
- "description": "根据弹出位置，设置X轴偏移量，单位px 默认 0",
80
- "type": "string | number "
81
- },
82
- {
83
- "name": "offsetY",
84
- "description": "根据弹出位置，设置Y轴偏移量，单位px 默认 0",
85
- "type": "string | number"
86
- },
87
- {
88
- "name": "duration",
89
- "description": "动画持续时间，单位ms",
90
- "type": "number",
91
- "default": 200
92
- },
93
- {
94
- "name": "zIndex",
95
- "description": "弹窗层级z-index",
96
- "type": "number",
97
- "default": 998
98
- },
99
- {
100
- "name": "keepContent",
101
- "description": "隐藏后是否不销毁弹窗内容元素",
102
- "type": "boolean",
103
- "default": true
104
- },
105
- {
106
- "name": "[event]close",
107
- "description": "弹窗关闭前触发，可用于异步拦截关闭",
108
- "params": [
109
- {
110
- "name": "suspend",
111
- "description": "开启等待的回调函数"
112
- },
113
- {
114
- "name": "next",
115
- "description": "执行后续关闭操作的回调函数"
116
- },
117
- {
118
- "name": "stop",
119
- "description": "阻止后续关闭操作的回调函数"
120
- }
121
- ]
122
- },
123
- {
124
- "name": "[event]open-after",
125
- "description": "弹窗打开动画执行完毕事件",
126
- "params": []
127
- },
128
- {
129
- "name": "[event]clickMask",
130
- "description": "点击遮罩时触发",
131
- "params": []
132
- },
133
- {
134
- "name": "[slot]default",
135
- "description": "内容部分插槽"
136
- }
137
- ]
138
- }
1
+ {
2
+ "name": "ste-popup",
3
+ "description": "验证码输入",
4
+ "example": "<ste-popup v-model:show='show'></ste-popup>",
5
+ "tutorial": "https://stellar-ui.intecloud.com.cn/?projectName=stellar-ui-plus&menu=%E7%BB%84%E4%BB%B6&active=ste-popup",
6
+ "attributes": [
7
+ {
8
+ "name": "show",
9
+ "description": "是否显示弹出层，使用v-model修饰符来双向绑定",
10
+ "type": "boolean",
11
+ "default": false
12
+ },
13
+ {
14
+ "name": "backgroundColor",
15
+ "description": "内容容器的背景色",
16
+ "type": "string",
17
+ "default": "#ffffff"
18
+ },
19
+ {
20
+ "name": "isMaskClick",
21
+ "description": "是否可以点击遮罩层关闭",
22
+ "type": "boolean",
23
+ "default": true
24
+ },
25
+ {
26
+ "name": "width",
27
+ "description": "内容区宽度",
28
+ "type": "string | number",
29
+ "default": "auto"
30
+ },
31
+ {
32
+ "name": "height",
33
+ "description": "内容区高度",
34
+ "type": "string | number",
35
+ "default": "auto"
36
+ },
37
+ {
38
+ "name": "position",
39
+ "description": "弹出位置",
40
+ "type": "string",
41
+ "values": [
42
+ {
43
+ "name": "center",
44
+ "description": "中"
45
+ },
46
+ {
47
+ "name": "top",
48
+ "description": "上"
49
+ },
50
+ {
51
+ "name": "bottom",
52
+ "description": "下"
53
+ },
54
+ {
55
+ "name": "left",
56
+ "description": "左"
57
+ },
58
+ {
59
+ "name": "right",
60
+ "description": "右"
61
+ }
62
+ ],
63
+ "default": "center"
64
+ },
65
+ {
66
+ "name": "round",
67
+ "description": "是否圆角",
68
+ "type": "boolean",
69
+ "default": false
70
+ },
71
+ {
72
+ "name": "showClose",
73
+ "description": "是否右上角显示关闭图标",
74
+ "type": "boolean",
75
+ "default": true
76
+ },
77
+ {
78
+ "name": "offsetX",
79
+ "description": "根据弹出位置，设置X轴偏移量，单位px 默认 0",
80
+ "type": "string | number "
81
+ },
82
+ {
83
+ "name": "offsetY",
84
+ "description": "根据弹出位置，设置Y轴偏移量，单位px 默认 0",
85
+ "type": "string | number"
86
+ },
87
+ {
88
+ "name": "duration",
89
+ "description": "动画持续时间，单位ms",
90
+ "type": "number",
91
+ "default": 200
92
+ },
93
+ {
94
+ "name": "zIndex",
95
+ "description": "弹窗层级z-index",
96
+ "type": "number",
97
+ "default": 998
98
+ },
99
+ {
100
+ "name": "keepContent",
101
+ "description": "隐藏后是否不销毁弹窗内容元素",
102
+ "type": "boolean",
103
+ "default": true
104
+ },
105
+ {
106
+ "name": "[event]close",
107
+ "description": "弹窗关闭前触发，可用于异步拦截关闭",
108
+ "params": [
109
+ {
110
+ "name": "suspend",
111
+ "description": "开启等待的回调函数"
112
+ },
113
+ {
114
+ "name": "next",
115
+ "description": "执行后续关闭操作的回调函数"
116
+ },
117
+ {
118
+ "name": "stop",
119
+ "description": "阻止后续关闭操作的回调函数"
120
+ }
121
+ ]
122
+ },
123
+ {
124
+ "name": "[event]open-after",
125
+ "description": "弹窗打开动画执行完毕事件",
126
+ "params": []
127
+ },
128
+ {
129
+ "name": "[event]clickMask",
130
+ "description": "点击遮罩时触发",
131
+ "params": []
132
+ },
133
+ {
134
+ "name": "[slot]default",
135
+ "description": "内容部分插槽"
136
+ }
137
+ ]
138
+ }
package/components/ste-popup/ste-popup.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <script setup lang="ts">
2
- import { ref, computed, watch, type CSSProperties } from 'vue';
2
+ import { ref, computed, watch, onUnmounted, type CSSProperties } from 'vue';
3
3
  import propsData from './props';
4
4
  import utils from '../../utils/utils';
5
5
  const DEFAULT_BORDER_RADIUS = 32;
@@ -13,12 +13,15 @@ defineOptions({
13
13
  },
14
14
  });
15
15
 
16
- const animationProp: UniApp.CreateAnimationOptions = { duration: props.duration, timingFunction: 'ease-out' };
16
+ const animationProp = computed<UniApp.CreateAnimationOptions>(() => ({ duration: props.duration, timingFunction: 'ease-out' }));
17
17
  const pageDisplay = ref('none');
18
18
  const overlayAnimationData = ref<UniApp.Animation>();
19
19
  const animationData = ref<UniApp.Animation>();
20
20
  const showContent = ref(false);
21
21
 
22
+ let beginTimer: ReturnType<typeof setTimeout> | null = null;
23
+ let endTimer: ReturnType<typeof setTimeout> | null = null;
24
+
22
25
  const emits = defineEmits<{
23
26
  (e: 'clickMask'): void;
24
27
  (e: 'close', suspend: () => void, next: () => void, stop: () => void): void;
@@ -48,14 +51,6 @@ const cmpContentStyle = computed(() => {
48
51
  height: utils.addUnit(props.height),
49
52
  backgroundColor: props.backgroundColor,
50
53
  };
51
-
52
- if (props.position === 'center') {
53
- } else if (props.position === 'bottom') {
54
- } else if (props.position === 'top') {
55
- } else if (props.position === 'left') {
56
- } else if (props.position === 'right') {
57
- }
58
-
59
54
  return style;
60
55
  });
61
56
 
@@ -108,8 +103,8 @@ async function beginAnimation() {
108
103
 
109
104
  pageDisplay.value = 'flex';
110
105
  await utils.sleep(50);
111
- let animation = uni.createAnimation(animationProp);
112
- let overlayAnimation = uni.createAnimation(animationProp);
106
+ let animation = uni.createAnimation(animationProp.value);
107
+ let overlayAnimation = uni.createAnimation(animationProp.value);
113
108
  overlayAnimation.opacity(1).step({
114
109
  duration: props.duration,
115
110
  });
@@ -128,15 +123,16 @@ async function beginAnimation() {
128
123
  overlayAnimationData.value = overlayAnimation.export();
129
124
  animationData.value = animation.export();
130
125
 
131
- setTimeout(() => {
126
+ if (beginTimer) clearTimeout(beginTimer);
127
+ beginTimer = setTimeout(() => {
132
128
  showContent.value = true;
133
129
  emits('open-after');
134
130
  }, props.duration);
135
131
  }
136
132
 
137
133
  function endAnimation() {
138
- let animation = uni.createAnimation(animationProp);
139
- let overlayAnimation = uni.createAnimation(animationProp);
134
+ let animation = uni.createAnimation(animationProp.value);
135
+ let overlayAnimation = uni.createAnimation(animationProp.value);
140
136
  overlayAnimation.opacity(0).step();
141
137
 
142
138
  if (props.position === 'center') {
@@ -150,23 +146,24 @@ function endAnimation() {
150
146
  overlayAnimationData.value = overlayAnimation.export();
151
147
  animationData.value = animation.export();
152
148
 
153
- setTimeout(() => {
149
+ if (endTimer) clearTimeout(endTimer);
150
+ endTimer = setTimeout(() => {
154
151
  pageDisplay.value = 'none';
155
152
  showContent.value = false;
156
153
  }, props.duration);
157
154
  }
158
155
 
159
- function touchmove(e: TouchEvent) {
160
- // TODO nvue 取消冒泡
161
- e.stopPropagation();
162
- }
156
+ onUnmounted(() => {
157
+ if (beginTimer) clearTimeout(beginTimer);
158
+ if (endTimer) clearTimeout(endTimer);
159
+ });
163
160
  </script>
164
161
 
165
162
  <template>
166
163
  <view class="ste-popup" :class="position" :style="[cmpPageStyle]" @click.stop="onMaskClick" :animation="overlayAnimationData" data-test="popup">
167
164
  <view class="content" :class="position" :style="[cmpContentStyle]" :animation="animationData" @click.stop>
168
165
  <template v-if="keepContent || showContent">
169
- <scroll-view style="width: 100%; height: 100%" v-if="Number(height) > 0" :scroll-y="true" @touchmove.stop.prevent="touchmove">
166
+ <scroll-view style="width: 100%; height: 100%" v-if="Number(height) > 0" :scroll-y="true" @touchmove.stop.prevent>
170
167
  <slot name="default"></slot>
171
168
  </scroll-view>
172
169
  <slot v-else name="default"></slot>
@@ -176,7 +173,7 @@ function touchmove(e: TouchEvent) {
176
173
  </view>
177
174
  </view>
178
175
  <view class="close-icon-box-center" @click="handleClose" v-if="showClose && position == 'center' && showContent">
179
- <ste-icon code="&#xe6a0;" :size="40" color="'#fff'"></ste-icon>
176
+ <ste-icon code="&#xe6a0;" :size="40" :color="'#fff'"></ste-icon>
180
177
  </view>
181
178
  </view>
182
179
  </template>
@@ -189,7 +186,6 @@ function touchmove(e: TouchEvent) {
189
186
  position: fixed;
190
187
  left: 0;
191
188
  top: 0;
192
- overflow: hidden;
193
189
  justify-content: center;
194
190
  align-items: center;
195
191
  touch-action: none;
package/components/ste-radio/ATTRIBUTES.md CHANGED
@@ -23,7 +23,7 @@
23
23
  ### Events
24
24
  | 事件名 | 说明 | 事件参数 | 支持版本 |
25
25
  | ----- | ----- | ------- | -------- |
26
- | `click` | 点击复选框时触发的事件 | `value`：当前复选框的绑定值<br/>`suspend`：等待<br/>`next`：继续<br/>`stop`：停止 | - |
27
- | `change` | 当绑定值变化时触发的事件 | `value`：当前复选框的绑定值 | - |
26
+ | `click` | 点击单选框时触发的事件 | `value`：当前单选框的绑定值<br/>`suspend`：等待<br/>`next`：继续<br/>`stop`：停止 | - |
27
+ | `change` | 当绑定值变化时触发的事件 | `value`：当前单选框的绑定值 | - |
28
28
 
29
29