@tdesign/uniapp 0.8.1 → 0.9.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.
Files changed (50) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/badge/README.en-US.md +1 -0
  3. package/dist/badge/README.md +1 -0
  4. package/dist/badge/badge.css +1 -1
  5. package/dist/button/button.vue +5 -0
  6. package/dist/calendar/calendar.vue +6 -2
  7. package/dist/common/style/theme/index-light.css +282 -0
  8. package/dist/common/style/theme/index-light.less +9 -0
  9. package/dist/common/style/theme/raw/_components-light.less +8 -0
  10. package/dist/common/style/theme/raw/_light-only.less +181 -0
  11. package/dist/dropdown-item/dropdown-item.vue +2 -0
  12. package/dist/dropdown-menu/dropdown-menu.vue +1 -1
  13. package/dist/fab/fab.vue +2 -2
  14. package/dist/fab/props.ts +1 -1
  15. package/dist/fab/type.ts +1 -1
  16. package/dist/form-item/form-item.css +2 -2
  17. package/dist/form-item/form-item.vue +28 -21
  18. package/dist/indexes/computed.js +6 -2
  19. package/dist/indexes/indexes.css +7 -2
  20. package/dist/indexes/indexes.vue +1 -1
  21. package/dist/indexes/props.ts +5 -0
  22. package/dist/indexes/type.ts +5 -0
  23. package/dist/input/input.vue +8 -6
  24. package/dist/search/search.css +5 -0
  25. package/dist/search/search.vue +7 -12
  26. package/dist/segmented/README.en-US.md +42 -0
  27. package/dist/segmented/README.md +75 -0
  28. package/dist/segmented/props.ts +31 -0
  29. package/dist/segmented/segmented.css +66 -0
  30. package/dist/segmented/segmented.vue +174 -0
  31. package/dist/segmented/type.ts +41 -0
  32. package/dist/tab-bar-item/tab-bar-item.vue +4 -6
  33. package/dist/table/README.en-US.md +72 -0
  34. package/dist/table/README.md +117 -0
  35. package/dist/table/base-table-props.ts +105 -0
  36. package/dist/table/props.ts +94 -0
  37. package/dist/table/table.css +251 -0
  38. package/dist/table/table.vue +551 -0
  39. package/dist/table/type.ts +180 -0
  40. package/dist/tabs/tabs.css +4 -0
  41. package/dist/theme-light.css +282 -0
  42. package/dist/theme-light.css.d.ts +2 -0
  43. package/dist/theme-light.less +1 -0
  44. package/dist/theme-light.less.d.ts +2 -0
  45. package/dist/types/index.d.ts +2 -0
  46. package/dist/types/segmented.d.ts +7 -0
  47. package/dist/types/table.d.ts +7 -0
  48. package/global.d.ts +2 -0
  49. package/package.json +33 -9
  50. package/{dist/script → script}/postinstall.js +18 -2
package/CHANGELOG.md CHANGED
@@ -5,6 +5,20 @@ toc: false
5
5
  docClass: timeline
6
6
  ---
7
7
 
8
+ ## 🌈 0.9.0 `2026-05-08`
9
+
10
+ ### 🚀 Features
11
+
12
+ - `Table`: 新增 `Table` 表格组件 @novlan1 ([#4397](https://github.com/Tencent/tdesign-miniprogram/pull/4397))
13
+ - `Segmented`: 新增 `Segmented` 分段控制器组件 @novlan1 ([#4413](https://github.com/Tencent/tdesign-miniprogram/pull/4413))
14
+
15
+ ### 🐞 Bug Fixes
16
+
17
+ - `Calendar`: 修复 `type` 为 `range` 时,未滚动到目标位置的问题 @novlan1 ([#4413](https://github.com/Tencent/tdesign-miniprogram/pull/4413))
18
+ - `DropdownMenu`: 修复 `label` 回显错误问题 @novlan1 ([#4413](https://github.com/Tencent/tdesign-miniprogram/pull/4413))
19
+ - `Input`: 修复 input clearable 点击后没有及时更新双向绑定的问题 @Kriac ([#4420](https://github.com/Tencent/tdesign-miniprogram/pull/4420))
20
+ - `TabBar`: 修复 `badgeProps` 属性中的 `color` 和 `shape` 字段无效 @liweijie0812 ([#4427](https://github.com/Tencent/tdesign-miniprogram/pull/4427))
21
+
8
22
  ## 🌈 0.8.1 `2026-04-09`
9
23
 
10
24
  ### 🚀 Features
@@ -44,6 +44,7 @@ Name | Default Value | Description
44
44
  --td-badge-border-radius | 4rpx | -
45
45
  --td-badge-bubble-border-radius | 20rpx 20rpx 20rpx 1px | -
46
46
  --td-badge-content-text-color | @text-color-primary | -
47
+ --td-badge-content-text-font | @font-body-large | -
47
48
  --td-badge-dot-size | 16rpx | -
48
49
  --td-badge-font | @font-mark-extraSmall | -
49
50
  --td-badge-large-font | @font-mark-small | -
@@ -77,6 +77,7 @@ t-class-count | 计数样式类
77
77
  --td-badge-border-radius | 4rpx | -
78
78
  --td-badge-bubble-border-radius | 20rpx 20rpx 20rpx 1px | -
79
79
  --td-badge-content-text-color | @text-color-primary | -
80
+ --td-badge-content-text-font | @font-body-large | -
80
81
  --td-badge-dot-size | 16rpx | -
81
82
  --td-badge-font | @font-mark-extraSmall | -
82
83
  --td-badge-large-font | @font-mark-small | -
@@ -132,7 +132,7 @@
132
132
  }
133
133
  .t-badge__content-text {
134
134
  display: block;
135
- font: var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
135
+ font: var(--td-badge-content-text-font, var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
136
136
  color: var(--td-badge-content-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
137
137
  }
138
138
  .t-badge__count:empty {
@@ -20,6 +20,7 @@
20
20
  :send-message-img="sendMessageImg"
21
21
  :app-parameter="appParameter"
22
22
  :show-message-card="showMessageCard"
23
+ :phone-number-no-quota-toast="phoneNumberNoQuotaToast"
23
24
  :aria-label="ariaLabel"
24
25
  @click.stop.prevent="handleTap"
25
26
  @getuserinfo="getuserinfo"
@@ -30,6 +31,7 @@
30
31
  @launchapp="launchapp"
31
32
  @chooseavatar="chooseavatar"
32
33
  @agreeprivacyauthorization="agreeprivacyauthorization"
34
+ @phoneoneclicklogin="phoneoneclicklogin"
33
35
  >
34
36
  <block
35
37
  v-if="innerIcon"
@@ -213,6 +215,9 @@ export default {
213
215
  agreeprivacyauthorization(t) {
214
216
  this.$emit('agreeprivacyauthorization', t);
215
217
  },
218
+ phoneoneclicklogin(t) {
219
+ this.$emit('phoneoneclicklogin', t);
220
+ },
216
221
  handleTap(t) {
217
222
  if (this.disabled || this.loading) return;
218
223
  this.$emit('click', t);
@@ -224,9 +224,9 @@ export default {
224
224
  dataVisible: {
225
225
  handler(v) {
226
226
  if (v) {
227
- this.onScrollIntoView();
228
227
  this.base.value = this.dataValue;
229
228
  this.calcMonths();
229
+ this.onScrollIntoView();
230
230
  }
231
231
  },
232
232
  immediate: true,
@@ -298,7 +298,11 @@ export default {
298
298
  const date = new Date(Array.isArray(value) ? value[0] : value);
299
299
 
300
300
  if (date) {
301
- this.scrollIntoView = `year_${date.getFullYear()}_month_${date.getMonth()}`;
301
+ // 先置空再赋值,确保 scroll-view 在每次打开时都能响应 scroll-into-view 变化并滚动到目标月份
302
+ this.scrollIntoView = '';
303
+ this.$nextTick(() => {
304
+ this.scrollIntoView = `year_${date.getFullYear()}_month_${date.getMonth()}`;
305
+ });
302
306
  }
303
307
  },
304
308
 
@@ -0,0 +1,282 @@
1
+ /* ./raw/_light-only.less */
2
+ /* #ifdef H5 */
3
+ :root,
4
+ /* #endif */
5
+ page,
6
+ .page {
7
+ --td-brand-color-1: #f2f3ff;
8
+ --td-brand-color-2: #d9e1ff;
9
+ --td-brand-color-3: #b5c7ff;
10
+ --td-brand-color-4: #8eabff;
11
+ --td-brand-color-5: #618dff;
12
+ --td-brand-color-6: #366ef4;
13
+ --td-brand-color-7: #0052d9;
14
+ --td-brand-color-8: #003cab;
15
+ --td-brand-color-9: #002a7c;
16
+ --td-brand-color-10: #001a57;
17
+
18
+ --td-primary-color-1: var(--td-brand-color-1);
19
+ --td-primary-color-2: var(--td-brand-color-2);
20
+ --td-primary-color-3: var(--td-brand-color-3);
21
+ --td-primary-color-4: var(--td-brand-color-4);
22
+ --td-primary-color-5: var(--td-brand-color-5);
23
+ --td-primary-color-6: var(--td-brand-color-6);
24
+ --td-primary-color-7: var(--td-brand-color-7);
25
+ --td-primary-color-8: var(--td-brand-color-8);
26
+ --td-primary-color-9: var(--td-brand-color-9);
27
+ --td-primary-color-10: var(--td-brand-color-10);
28
+
29
+ --td-warning-color-1: #fff1e9;
30
+ --td-warning-color-2: #ffd9c2;
31
+ --td-warning-color-3: #ffb98c;
32
+ --td-warning-color-4: #fa9550;
33
+ --td-warning-color-5: #e37318;
34
+ --td-warning-color-6: #be5a00;
35
+ --td-warning-color-7: #954500;
36
+ --td-warning-color-8: #713300;
37
+ --td-warning-color-9: #532300;
38
+ --td-warning-color-10: #3b1700;
39
+
40
+ --td-error-color-1: #fff0ed;
41
+ --td-error-color-2: #ffd8d2;
42
+ --td-error-color-3: #ffb9b0;
43
+ --td-error-color-4: #ff9285;
44
+ --td-error-color-5: #f6685d;
45
+ --td-error-color-6: #d54941;
46
+ --td-error-color-7: #ad352f;
47
+ --td-error-color-8: #881f1c;
48
+ --td-error-color-9: #68070a;
49
+ --td-error-color-10: #490002;
50
+
51
+ --td-success-color-1: #e3f9e9;
52
+ --td-success-color-2: #c6f3d7;
53
+ --td-success-color-3: #92dab2;
54
+ --td-success-color-4: #56c08d;
55
+ --td-success-color-5: #2ba471;
56
+ --td-success-color-6: #008858;
57
+ --td-success-color-7: #006c45;
58
+ --td-success-color-8: #005334;
59
+ --td-success-color-9: #003b23;
60
+ --td-success-color-10: #002515;
61
+
62
+ --td-gray-color-1: #f3f3f3;
63
+ --td-gray-color-2: #eeeeee;
64
+ --td-gray-color-3: #e7e7e7;
65
+ --td-gray-color-4: #dcdcdc;
66
+ --td-gray-color-5: #c5c5c5;
67
+ --td-gray-color-6: #a6a6a6;
68
+ --td-gray-color-7: #8b8b8b;
69
+ --td-gray-color-8: #777777;
70
+ --td-gray-color-9: #5e5e5e;
71
+ --td-gray-color-10: #4b4b4b;
72
+ --td-gray-color-11: #383838;
73
+ --td-gray-color-12: #2c2c2c;
74
+ --td-gray-color-13: #242424;
75
+ --td-gray-color-14: #181818;
76
+
77
+ --td-font-white-1: rgba(255, 255, 255, 1);
78
+ --td-font-white-2: rgba(255, 255, 255, 0.55);
79
+ --td-font-white-3: rgba(255, 255, 255, 0.35);
80
+ --td-font-white-4: rgba(255, 255, 255, 0.22);
81
+ --td-font-gray-1: rgba(0, 0, 0, 0.9);
82
+ --td-font-gray-2: rgba(0, 0, 0, 0.6);
83
+ --td-font-gray-3: rgba(0, 0, 0, 0.4);
84
+ --td-font-gray-4: rgba(0, 0, 0, 0.26);
85
+
86
+ --td-brand-color: var(--td-primary-color-7);
87
+ --td-warning-color: var(--td-warning-color-5);
88
+ --td-error-color: var(--td-error-color-6);
89
+ --td-success-color: var(--td-success-color-5);
90
+
91
+ --td-brand-color-focus: var(--td-primary-color-1);
92
+ --td-brand-color-active: var(--td-primary-color-8);
93
+ --td-brand-color-disabled: var(--td-primary-color-3);
94
+ --td-brand-color-light: var(--td-primary-color-1);
95
+ --td-brand-color-light-active: var(--td-primary-color-2);
96
+
97
+ --td-warning-color-active: var(--td-warning-color-6);
98
+ --td-warning-color-disabled: var(--td-warning-color-3);
99
+ --td-warning-color-focus: var(--td-warning-color-2);
100
+ --td-warning-color-light: var(--td-warning-color-1);
101
+ --td-warning-color-light-active: var(--td-warning-color-2);
102
+
103
+ --td-error-color-focus: var(--td-error-color-2);
104
+ --td-error-color-active: var(--td-error-color-7);
105
+ --td-error-color-disabled: var(--td-error-color-3);
106
+ --td-error-color-light: var(--td-error-color-1);
107
+ --td-error-color-light-active: var(--td-error-color-2);
108
+
109
+ --td-success-color-focus: var(--td-success-color-2);
110
+ --td-success-color-active: var(--td-success-color-6);
111
+ --td-success-color-disabled: var(--td-success-color-3);
112
+ --td-success-color-light: var(--td-success-color-1);
113
+ --td-success-color-light-active: var(--td-success-color-2);
114
+
115
+ --td-mask-active: rgba(0, 0, 0, 60%);
116
+ --td-mask-disabled: rgba(255, 255, 255, 60%);
117
+ --td-mask-background: rgba(255, 255, 255, 96%);
118
+
119
+ --td-bg-color-page: var(--td-gray-color-1);
120
+ --td-bg-color-container: var(--td-font-white-1);
121
+ --td-bg-color-container-active: var(--td-gray-color-3);
122
+ --td-bg-color-secondarycontainer: var(--td-gray-color-1);
123
+ --td-bg-color-secondarycontainer-active: var(--td-gray-color-4);
124
+ --td-bg-color-component: var(--td-gray-color-3);
125
+ --td-bg-color-component-active: var(--td-gray-color-6);
126
+ --td-bg-color-component-disabled: var(--td-gray-color-2);
127
+ --td-bg-color-secondarycomponent: var(--td-gray-color-4);
128
+ --td-bg-color-secondarycomponent-active: var(--td-gray-color-6);
129
+
130
+ --td-bg-color-specialcomponent: #fff;
131
+
132
+ --td-text-color-primary: var(--td-font-gray-1);
133
+ --td-text-color-secondary: var(--td-font-gray-2);
134
+ --td-text-color-placeholder: var(--td-font-gray-3);
135
+ --td-text-color-disabled: var(--td-font-gray-4);
136
+ --td-text-color-anti: var(--td-font-white-1);
137
+ --td-text-color-brand: var(--td-brand-color);
138
+ --td-text-color-link: var(--td-brand-color);
139
+
140
+ --td-border-level-1-color: var(--td-gray-color-3);
141
+ --td-component-stroke: var(--td-gray-color-3);
142
+ --td-border-level-2-color: var(--td-gray-color-4);
143
+ --td-component-border: var(--td-gray-color-4);
144
+
145
+ --td-shadow-1: 0 1px 10px rgba(0, 0, 0, 5%), 0 4px 5px rgba(0, 0, 0, 8%), 0 2px 4px -1px rgba(0, 0, 0, 12%);
146
+ --td-shadow-2:
147
+ 0 3px 14px 2px rgba(0, 0, 0, 5%), 0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);
148
+ --td-shadow-3:
149
+ 0 6px 30px 5px rgba(0, 0, 0, 5%), 0 16px 24px 2px rgba(0, 0, 0, 4%), 0 8px 10px -5px rgba(0, 0, 0, 8%);
150
+ --td-shadow-4: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
151
+
152
+ --td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
153
+ --td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
154
+ --td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
155
+ --td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
156
+
157
+ --td-table-shadow-color: rgba(0, 0, 0, 8%);
158
+
159
+ --td-scrollbar-color: rgba(0, 0, 0, 10%);
160
+ --td-scrollbar-hover-color: rgba(0, 0, 0, 30%);
161
+ --td-scroll-track-color: #fff;
162
+ }
163
+
164
+ /* ./raw/_radius.less */
165
+ page,
166
+ .page {
167
+ --td-radius-small: 3px;
168
+ --td-radius-default: 6px;
169
+ --td-radius-large: 9px;
170
+ --td-radius-extraLarge: 12px;
171
+ --td-radius-round: 999px;
172
+ --td-radius-circle: 50%;
173
+ }
174
+
175
+ /* ./raw/_font.less */
176
+ page,
177
+ .page {
178
+ --td-font-family: PingFang SC, Microsoft YaHei, Arial Regular;
179
+ --td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium;
180
+
181
+ --td-font-size-link-small: 12px;
182
+ --td-font-size-link-medium: 14px;
183
+ --td-font-size-link-large: 16px;
184
+ --td-font-size-mark-extraSmall: 10px;
185
+ --td-font-size-mark-small: 12px;
186
+ --td-font-size-mark-medium: 14px;
187
+ --td-font-size-mark-large: 16px;
188
+ --td-font-size-body-extraSmall: 10px;
189
+ --td-font-size-body-small: 12px;
190
+ --td-font-size-body-medium: 14px;
191
+ --td-font-size-body-large: 16px;
192
+ --td-font-size-title-small: 14px;
193
+ --td-font-size-title-medium: 16px;
194
+ --td-font-size-title-large: 18px;
195
+ --td-font-size-title-extraLarge: 20px;
196
+ --td-font-size-headline-small: 24px;
197
+ --td-font-size-headline-medium: 28px;
198
+ --td-font-size-headline-large: 36px;
199
+ --td-font-size-display-medium: 48px;
200
+ --td-font-size-display-large: 64px;
201
+
202
+ --td-line-height-link-small: 20px;
203
+ --td-line-height-link-medium: 22px;
204
+ --td-line-height-link-large: 24px;
205
+ --td-line-height-mark-extraSmall: 16px;
206
+ --td-line-height-mark-small: 20px;
207
+ --td-line-height-mark-medium: 22px;
208
+ --td-line-height-mark-large: 24px;
209
+ --td-line-height-body-extraSmall: 16px;
210
+ --td-line-height-body-small: 20px;
211
+ --td-line-height-body-medium: 22px;
212
+ --td-line-height-body-large: 24px;
213
+ --td-line-height-title-small: 22px;
214
+ --td-line-height-title-medium: 24px;
215
+ --td-line-height-title-large: 26px;
216
+ --td-line-height-title-extraLarge: 28px;
217
+ --td-line-height-headline-small: 32px;
218
+ --td-line-height-headline-medium: 36px;
219
+ --td-line-height-headline-large: 44px;
220
+ --td-line-height-display-medium: 56px;
221
+ --td-line-height-display-large: 72px;
222
+
223
+ --td-font-link-small: var(--td-font-size-link-small) / var(--td-line-height-link-small) var(--td-font-family);
224
+ --td-font-link-medium: var(--td-font-size-link-medium) / var(--td-line-height-link-medium) var(--td-font-family);
225
+ --td-font-link-large: var(--td-font-size-link-large) / var(--td-line-height-link-large) var(--td-font-family);
226
+ --td-font-mark-extraSmall: 600 var(--td-font-size-mark-extraSmall) / var(--td-line-height-mark-extraSmall)
227
+ var(--td-font-family);
228
+ --td-font-mark-small: 600 var(--td-font-size-mark-small) / var(--td-line-height-mark-small) var(--td-font-family);
229
+ --td-font-mark-medium: 600 var(--td-font-size-mark-medium) / var(--td-line-height-mark-medium) var(--td-font-family);
230
+ --td-font-mark-large: 600 var(--td-font-size-mark-large) / var(--td-line-height-mark-large) var(--td-font-family);
231
+ --td-font-body-extraSmall: var(--td-font-size-body-extraSmall) / var(--td-line-height-body-extraSmall)
232
+ var(--td-font-family);
233
+ --td-font-body-small: var(--td-font-size-body-small) / var(--td-line-height-body-small) var(--td-font-family);
234
+ --td-font-body-medium: var(--td-font-size-body-medium) / var(--td-line-height-body-medium) var(--td-font-family);
235
+ --td-font-body-large: var(--td-font-size-body-large) / var(--td-line-height-body-large) var(--td-font-family);
236
+ --td-font-title-small: 600 var(--td-font-size-title-small) / var(--td-line-height-title-small) var(--td-font-family);
237
+ --td-font-title-medium: 600 var(--td-font-size-title-medium) / var(--td-line-height-title-medium)
238
+ var(--td-font-family);
239
+ --td-font-title-large: 600 var(--td-font-size-title-large) / var(--td-line-height-title-large) var(--td-font-family);
240
+ --td-font-title-extraLarge: 600 var(--td-font-size-title-extraLarge) / var(--td-line-height-title-extraLarge)
241
+ var(--td-font-family);
242
+ --td-font-headline-small: 600 var(--td-font-size-headline-small) / var(--td-line-height-headline-small)
243
+ var(--td-font-family);
244
+ --td-font-headline-medium: 600 var(--td-font-size-headline-medium) / var(--td-line-height-headline-medium)
245
+ var(--td-font-family);
246
+ --td-font-headline-large: 600 var(--td-font-size-headline-large) / var(--td-line-height-headline-large)
247
+ var(--td-font-family);
248
+ --td-font-display-medium: 600 var(--td-font-size-display-medium) / var(--td-line-height-display-medium)
249
+ var(--td-font-family);
250
+ --td-font-display-large: 600 var(--td-font-size-display-large) / var(--td-line-height-display-large)
251
+ var(--td-font-family);
252
+
253
+ --td-font-size: 10px;
254
+ --td-font-size-xs: var(--td-font-size-body-extraSmall);
255
+ --td-font-size-s: var(--td-font-size-body-small);
256
+ --td-font-size-base: var(--td-font-size-title-small);
257
+ --td-font-size-m: var(--td-font-size-title-medium);
258
+ --td-font-size-l: var(--td-font-size-title-large);
259
+ --td-font-size-xl: var(--td-font-size-title-extraLarge);
260
+ --td-font-size-xxl: var(--td-font-size-headline-large);
261
+ }
262
+
263
+ /* ./raw/_spacer.less */
264
+ page,
265
+ .page {
266
+ --td-spacer: 8px;
267
+ --td-spacer-1: 12px;
268
+ --td-spacer-2: 16px;
269
+ --td-spacer-3: 24px;
270
+ --td-spacer-4: 32px;
271
+ --td-spacer-5: 48px;
272
+ --td-spacer-6: 80px;
273
+ }
274
+
275
+ /* ./raw/_components-light.less */
276
+ page,
277
+ .page {
278
+ --td-picker-transparent-color: rgba(255, 255, 255, 0);
279
+
280
+ --td-switch-dot-disabled-color: var(--td-font-white-1);
281
+ --td-switch-loading-color: var(--td-brand-color);
282
+ }
@@ -0,0 +1,9 @@
1
+ @import './raw/_light-only.less';
2
+
3
+ @import './raw/_radius.less';
4
+
5
+ @import './raw/_font.less';
6
+
7
+ @import './raw/_spacer.less';
8
+
9
+ @import './raw/_components-light.less';
@@ -0,0 +1,8 @@
1
+ // 部分特殊处理的组件级 token(纯浅色模式,不含 media query 包裹)
2
+ page,
3
+ .page {
4
+ --td-picker-transparent-color: rgba(255, 255, 255, 0);
5
+
6
+ --td-switch-dot-disabled-color: var(--td-font-white-1);
7
+ --td-switch-loading-color: var(--td-brand-color);
8
+ }
@@ -0,0 +1,181 @@
1
+ // 纯浅色模式变量(不含 media query 包裹,不会随系统深色模式切换)
2
+ /* #ifdef H5 */
3
+ :root,
4
+ /* #endif */
5
+ page,
6
+ .page {
7
+ --td-brand-color-1: #f2f3ff;
8
+ --td-brand-color-2: #d9e1ff;
9
+ --td-brand-color-3: #b5c7ff;
10
+ --td-brand-color-4: #8eabff;
11
+ --td-brand-color-5: #618dff;
12
+ --td-brand-color-6: #366ef4;
13
+ --td-brand-color-7: #0052d9;
14
+ --td-brand-color-8: #003cab;
15
+ --td-brand-color-9: #002a7c;
16
+ --td-brand-color-10: #001a57;
17
+
18
+ --td-primary-color-1: var(--td-brand-color-1);
19
+ --td-primary-color-2: var(--td-brand-color-2);
20
+ --td-primary-color-3: var(--td-brand-color-3);
21
+ --td-primary-color-4: var(--td-brand-color-4);
22
+ --td-primary-color-5: var(--td-brand-color-5);
23
+ --td-primary-color-6: var(--td-brand-color-6);
24
+ --td-primary-color-7: var(--td-brand-color-7);
25
+ --td-primary-color-8: var(--td-brand-color-8);
26
+ --td-primary-color-9: var(--td-brand-color-9);
27
+ --td-primary-color-10: var(--td-brand-color-10);
28
+
29
+ --td-warning-color-1: #fff1e9;
30
+ --td-warning-color-2: #ffd9c2;
31
+ --td-warning-color-3: #ffb98c;
32
+ --td-warning-color-4: #fa9550;
33
+ --td-warning-color-5: #e37318;
34
+ --td-warning-color-6: #be5a00;
35
+ --td-warning-color-7: #954500;
36
+ --td-warning-color-8: #713300;
37
+ --td-warning-color-9: #532300;
38
+ --td-warning-color-10: #3b1700;
39
+
40
+ --td-error-color-1: #fff0ed;
41
+ --td-error-color-2: #ffd8d2;
42
+ --td-error-color-3: #ffb9b0;
43
+ --td-error-color-4: #ff9285;
44
+ --td-error-color-5: #f6685d;
45
+ --td-error-color-6: #d54941;
46
+ --td-error-color-7: #ad352f;
47
+ --td-error-color-8: #881f1c;
48
+ --td-error-color-9: #68070a;
49
+ --td-error-color-10: #490002;
50
+
51
+ --td-success-color-1: #e3f9e9;
52
+ --td-success-color-2: #c6f3d7;
53
+ --td-success-color-3: #92dab2;
54
+ --td-success-color-4: #56c08d;
55
+ --td-success-color-5: #2ba471;
56
+ --td-success-color-6: #008858;
57
+ --td-success-color-7: #006c45;
58
+ --td-success-color-8: #005334;
59
+ --td-success-color-9: #003b23;
60
+ --td-success-color-10: #002515;
61
+
62
+ --td-gray-color-1: #f3f3f3;
63
+ --td-gray-color-2: #eeeeee;
64
+ --td-gray-color-3: #e7e7e7;
65
+ --td-gray-color-4: #dcdcdc;
66
+ --td-gray-color-5: #c5c5c5;
67
+ --td-gray-color-6: #a6a6a6;
68
+ --td-gray-color-7: #8b8b8b;
69
+ --td-gray-color-8: #777777;
70
+ --td-gray-color-9: #5e5e5e;
71
+ --td-gray-color-10: #4b4b4b;
72
+ --td-gray-color-11: #383838;
73
+ --td-gray-color-12: #2c2c2c;
74
+ --td-gray-color-13: #242424;
75
+ --td-gray-color-14: #181818;
76
+
77
+ // 文字 & 图标 颜色
78
+ --td-font-white-1: rgba(255, 255, 255, 1);
79
+ --td-font-white-2: rgba(255, 255, 255, 0.55);
80
+ --td-font-white-3: rgba(255, 255, 255, 0.35);
81
+ --td-font-white-4: rgba(255, 255, 255, 0.22);
82
+ --td-font-gray-1: rgba(0, 0, 0, 0.9);
83
+ --td-font-gray-2: rgba(0, 0, 0, 0.6);
84
+ --td-font-gray-3: rgba(0, 0, 0, 0.4);
85
+ --td-font-gray-4: rgba(0, 0, 0, 0.26);
86
+
87
+ // 基础颜色
88
+ --td-brand-color: var(--td-primary-color-7);
89
+ --td-warning-color: var(--td-warning-color-5);
90
+ --td-error-color: var(--td-error-color-6);
91
+ --td-success-color: var(--td-success-color-5);
92
+
93
+ // 基础颜色的扩展 用于 聚焦 / 禁用 / 点击 等状态
94
+ --td-brand-color-focus: var(--td-primary-color-1);
95
+ --td-brand-color-active: var(--td-primary-color-8);
96
+ --td-brand-color-disabled: var(--td-primary-color-3);
97
+ --td-brand-color-light: var(--td-primary-color-1);
98
+ --td-brand-color-light-active: var(--td-primary-color-2);
99
+
100
+ // 警告色扩展
101
+ --td-warning-color-active: var(--td-warning-color-6);
102
+ --td-warning-color-disabled: var(--td-warning-color-3);
103
+ --td-warning-color-focus: var(--td-warning-color-2);
104
+ --td-warning-color-light: var(--td-warning-color-1);
105
+ --td-warning-color-light-active: var(--td-warning-color-2);
106
+
107
+ // 失败/错误色扩展
108
+ --td-error-color-focus: var(--td-error-color-2);
109
+ --td-error-color-active: var(--td-error-color-7);
110
+ --td-error-color-disabled: var(--td-error-color-3);
111
+ --td-error-color-light: var(--td-error-color-1);
112
+ --td-error-color-light-active: var(--td-error-color-2);
113
+
114
+ // 成功色扩展
115
+ --td-success-color-focus: var(--td-success-color-2);
116
+ --td-success-color-active: var(--td-success-color-6);
117
+ --td-success-color-disabled: var(--td-success-color-3);
118
+ --td-success-color-light: var(--td-success-color-1);
119
+ --td-success-color-light-active: var(--td-success-color-2);
120
+
121
+ // 遮罩
122
+ --td-mask-active: rgba(0, 0, 0, 60%); // 遮罩-弹出
123
+ --td-mask-disabled: rgba(255, 255, 255, 60%); // 遮罩-禁用
124
+ --td-mask-background: rgba(255, 255, 255, 96%); // 二维码遮罩
125
+
126
+ // 背景色
127
+ --td-bg-color-page: var(--td-gray-color-1);
128
+ --td-bg-color-container: var(--td-font-white-1);
129
+ --td-bg-color-container-active: var(--td-gray-color-3);
130
+ --td-bg-color-secondarycontainer: var(--td-gray-color-1);
131
+ --td-bg-color-secondarycontainer-active: var(--td-gray-color-4);
132
+ --td-bg-color-component: var(--td-gray-color-3);
133
+ --td-bg-color-component-active: var(--td-gray-color-6);
134
+ --td-bg-color-component-disabled: var(--td-gray-color-2);
135
+ --td-bg-color-secondarycomponent: var(--td-gray-color-4);
136
+ --td-bg-color-secondarycomponent-active: var(--td-gray-color-6);
137
+
138
+ // 特殊组件背景色,目前只用于 button、input 组件多主题场景,浅色主题下固定为白色,深色主题下为 transparent 适配背景颜色
139
+ --td-bg-color-specialcomponent: #fff;
140
+
141
+ // 文本颜色
142
+ --td-text-color-primary: var(--td-font-gray-1);
143
+ --td-text-color-secondary: var(--td-font-gray-2);
144
+ --td-text-color-placeholder: var(--td-font-gray-3);
145
+ --td-text-color-disabled: var(--td-font-gray-4);
146
+ --td-text-color-anti: var(--td-font-white-1);
147
+ --td-text-color-brand: var(--td-brand-color);
148
+ --td-text-color-link: var(--td-brand-color);
149
+
150
+ // 分割线
151
+ --td-border-level-1-color: var(--td-gray-color-3);
152
+ --td-component-stroke: var(--td-gray-color-3);
153
+ // 边框
154
+ --td-border-level-2-color: var(--td-gray-color-4);
155
+ --td-component-border: var(--td-gray-color-4);
156
+
157
+ // 基础/下层 投影 hover 使用的组件包括:表格 /
158
+ --td-shadow-1: 0 1px 10px rgba(0, 0, 0, 5%), 0 4px 5px rgba(0, 0, 0, 8%), 0 2px 4px -1px rgba(0, 0, 0, 12%);
159
+ // 中层投影 下拉 使用的组件包括:下拉菜单 / 气泡确认框 / 选择器 /
160
+ --td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 5%), 0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);
161
+ // 上层投影(警示/弹窗)使用的组件包括:全局提示 / 消息通知
162
+ --td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 5%), 0 16px 24px 2px rgba(0, 0, 0, 4%),
163
+ 0 8px 10px -5px rgba(0, 0, 0, 8%);
164
+ --td-shadow-4: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
165
+
166
+ // 内投影 用于弹窗类组件(气泡确认框 / 全局提示 / 消息通知)的内描边
167
+ --td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
168
+ --td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
169
+ --td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
170
+ --td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
171
+
172
+ // table 特定阴影
173
+ --td-table-shadow-color: rgba(0, 0, 0, 8%);
174
+
175
+ // 滚动条颜色
176
+ --td-scrollbar-color: rgba(0, 0, 0, 10%);
177
+ // 滚动条悬浮颜色( hover )
178
+ --td-scrollbar-hover-color: rgba(0, 0, 0, 30%);
179
+ // 滚动条轨道颜色,不能是带透明度,否则纵向滚动时,横向滚动条会穿透
180
+ --td-scroll-track-color: #fff;
181
+ }
@@ -272,6 +272,8 @@ export default {
272
272
 
273
273
  if (target) {
274
274
  this.computedLabel = target[labelAlias];
275
+ } else {
276
+ this.computedLabel = '';
275
277
  }
276
278
  },
277
279
  immediate: true,
@@ -148,7 +148,7 @@ export default {
148
148
  },
149
149
  getAllItems() {
150
150
  const menus = this.children?.map(data => ({
151
- label: data.label || data.computedLabel,
151
+ label: data.computedLabel || data.label,
152
152
  disabled: data.disabled,
153
153
  }));
154
154
 
package/dist/fab/fab.vue CHANGED
@@ -120,7 +120,7 @@ import { uniComponent } from '../common/src/index';
120
120
  import { prefix } from '../common/config';
121
121
  import props from './props';
122
122
  import useCustomNavbar from '../mixins/using-custom-navbar';
123
- import { unitConvert, getWindowInfo } from '../common/utils';
123
+ import { unitConvert, getWindowInfo, calcIcon } from '../common/utils';
124
124
  import tools from '../common/utils.wxs';
125
125
 
126
126
  const name = `${prefix}-fab`;
@@ -167,7 +167,7 @@ export default {
167
167
  ...baseButtonProps,
168
168
  shape: this.text ? 'round' : 'circle',
169
169
  ...this.buttonProps,
170
- icon: this.icon,
170
+ icon: calcIcon(this.icon),
171
171
  content: this.text,
172
172
  ariaLabel: this.ariaLabel,
173
173
  };
package/dist/fab/props.ts CHANGED
@@ -17,7 +17,7 @@ export default {
17
17
  },
18
18
  /** 图标 */
19
19
  icon: {
20
- type: String,
20
+ type: [String, Object],
21
21
  default: '',
22
22
  },
23
23
  /** 悬浮按钮的样式,常用于调整位置(即将废弃,建议使用 `style`) */
package/dist/fab/type.ts CHANGED
@@ -20,7 +20,7 @@ export interface TdFabProps {
20
20
  * 图标
21
21
  * @default ''
22
22
  */
23
- icon?: string;
23
+ icon?: string | Record<string, any>;
24
24
  /**
25
25
  * 悬浮按钮的样式,常用于调整位置(即将废弃,建议使用 `style`)
26
26
  * @default right: 16px; bottom: 32px;
@@ -73,13 +73,13 @@
73
73
  .t-form__label--right {
74
74
  text-align: right;
75
75
  }
76
- .t-form__label--required:not(.t-form__label--required-right) label::before {
76
+ .t-form__label--required:not(.t-form__label--required-right) .t-form__label-text::before {
77
77
  display: inline;
78
78
  margin-right: calc(var(--td-spacer, 16rpx) / 2);
79
79
  color: var(--td-error-color-6, #d54941);
80
80
  content: '*';
81
81
  }
82
- .t-form__label--required-right label::after {
82
+ .t-form__label--required-right .t-form__label-text::after {
83
83
  display: inline;
84
84
  margin-left: calc(var(--td-spacer, 16rpx) / 2);
85
85
  color: var(--td-error-color-6, #d54941);