@tdesign/uniapp 0.7.2 → 0.8.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 (199) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/README.md +32 -2
  3. package/dist/action-sheet/README.md +1 -1
  4. package/dist/action-sheet/action-sheet.vue +158 -150
  5. package/dist/action-sheet/props.ts +2 -2
  6. package/dist/action-sheet/type.ts +1 -1
  7. package/dist/avatar/avatar.vue +89 -87
  8. package/dist/avatar-group/avatar-group.vue +69 -67
  9. package/dist/back-top/back-top.vue +60 -58
  10. package/dist/badge/badge.vue +69 -59
  11. package/dist/button/button.vue +121 -116
  12. package/dist/button/props.ts +2 -2
  13. package/dist/button/type.ts +1 -1
  14. package/dist/calendar/calendar-header.vue +4 -4
  15. package/dist/calendar/calendar.vue +308 -297
  16. package/dist/calendar/template.vue +1 -1
  17. package/dist/cascader/README.en-US.md +2 -1
  18. package/dist/cascader/README.md +2 -1
  19. package/dist/cascader/cascader.vue +340 -328
  20. package/dist/cascader/props.ts +6 -1
  21. package/dist/cascader/type.ts +6 -0
  22. package/dist/cell/cell.vue +127 -121
  23. package/dist/cell-group/cell-group.vue +32 -30
  24. package/dist/check-tag/check-tag.vue +73 -71
  25. package/dist/checkbox/README.en-US.md +6 -6
  26. package/dist/checkbox/README.md +5 -5
  27. package/dist/checkbox/checkbox.vue +127 -127
  28. package/dist/checkbox/props.ts +6 -6
  29. package/dist/checkbox/type.ts +6 -4
  30. package/dist/checkbox-group/checkbox-group.vue +175 -173
  31. package/dist/checkbox-group/props.ts +6 -6
  32. package/dist/checkbox-group/type.ts +6 -4
  33. package/dist/col/col.vue +26 -24
  34. package/dist/collapse/collapse.vue +83 -81
  35. package/dist/collapse-panel/collapse-panel.vue +121 -119
  36. package/dist/collapse-panel/props.ts +4 -4
  37. package/dist/collapse-panel/type.ts +2 -2
  38. package/dist/color-picker/README.md +1 -1
  39. package/dist/color-picker/color-picker.vue +324 -322
  40. package/dist/color-picker/props.ts +2 -2
  41. package/dist/color-picker/template.vue +14 -10
  42. package/dist/common/common.ts +1 -0
  43. package/dist/common/style/theme/index.css +57 -61
  44. package/dist/common/utils.js +7 -2
  45. package/dist/common/validator.js +172 -0
  46. package/dist/config-provider/README.en-US.md +184 -0
  47. package/dist/config-provider/README.md +234 -0
  48. package/dist/config-provider/config-provider.vue +105 -0
  49. package/dist/config-provider/config-store.js +70 -0
  50. package/dist/config-provider/props.ts +16 -0
  51. package/dist/config-provider/reactive-state.js +39 -0
  52. package/dist/config-provider/type.ts +401 -0
  53. package/dist/config-provider/use-config.js +29 -0
  54. package/dist/config-provider/utils.js +29 -0
  55. package/dist/count-down/count-down.vue +98 -97
  56. package/dist/date-time-picker/date-time-picker.vue +410 -395
  57. package/dist/demo/demo.vue +1 -0
  58. package/dist/dialog/dialog.vue +176 -173
  59. package/dist/divider/divider.vue +38 -36
  60. package/dist/draggable/draggable.vue +60 -58
  61. package/dist/drawer/README.md +1 -1
  62. package/dist/drawer/drawer.vue +48 -46
  63. package/dist/dropdown-item/dropdown-item.vue +209 -207
  64. package/dist/dropdown-item/props.ts +4 -4
  65. package/dist/dropdown-item/type.ts +3 -3
  66. package/dist/dropdown-menu/dropdown-menu.vue +93 -99
  67. package/dist/empty/empty.vue +43 -42
  68. package/dist/fab/fab.vue +88 -86
  69. package/dist/footer/footer.vue +36 -34
  70. package/dist/form/README.en-US.md +17 -24
  71. package/dist/form/README.md +18 -25
  72. package/dist/form/form.css +1 -166
  73. package/dist/form/form.vue +251 -236
  74. package/dist/form/props.ts +2 -21
  75. package/dist/form/type.ts +7 -70
  76. package/dist/form-item/README.en-US.md +4 -5
  77. package/dist/form-item/README.md +4 -5
  78. package/dist/form-item/form-item.css +69 -96
  79. package/dist/form-item/form-item.vue +315 -336
  80. package/dist/form-item/form-model.ts +125 -173
  81. package/dist/form-item/props.ts +4 -17
  82. package/dist/form-item/type.ts +43 -1
  83. package/dist/grid/grid.vue +53 -51
  84. package/dist/grid-item/grid-item.vue +121 -119
  85. package/dist/guide/README.md +1 -1
  86. package/dist/guide/guide.vue +281 -277
  87. package/dist/icon/README.md +2 -4
  88. package/dist/icon/icon.vue +78 -76
  89. package/dist/image/README.md +1 -1
  90. package/dist/image/image.vue +103 -101
  91. package/dist/image-viewer/image-viewer.vue +160 -158
  92. package/dist/image-viewer/props.ts +2 -2
  93. package/dist/image-viewer/type.ts +1 -1
  94. package/dist/index.js +3 -0
  95. package/dist/indexes/indexes.vue +264 -267
  96. package/dist/indexes-anchor/indexes-anchor.vue +41 -41
  97. package/dist/input/input.vue +192 -192
  98. package/dist/input/props.ts +6 -6
  99. package/dist/input/type.ts +3 -3
  100. package/dist/link/link.vue +73 -71
  101. package/dist/loading/loading.vue +59 -59
  102. package/dist/locale/ar_KW.ts +157 -0
  103. package/dist/locale/en_US.ts +146 -0
  104. package/dist/locale/it_IT.ts +145 -0
  105. package/dist/locale/ja_JP.ts +132 -0
  106. package/dist/locale/ko_KR.ts +132 -0
  107. package/dist/locale/ru_RU.ts +157 -0
  108. package/dist/locale/zh_CN.ts +133 -0
  109. package/dist/locale/zh_TW.ts +132 -0
  110. package/dist/message/message.vue +181 -173
  111. package/dist/message/props.ts +2 -2
  112. package/dist/message/type.ts +1 -1
  113. package/dist/message-item/message-item.vue +192 -184
  114. package/dist/mixins/using-config.js +39 -0
  115. package/dist/navbar/navbar.vue +201 -199
  116. package/dist/notice-bar/notice-bar.vue +175 -171
  117. package/dist/notice-bar/props.ts +2 -2
  118. package/dist/notice-bar/type.ts +1 -1
  119. package/dist/npm/dayjs/esm/locale/ar.js +81 -0
  120. package/dist/npm/dayjs/esm/locale/it.js +39 -0
  121. package/dist/overlay/overlay.vue +50 -48
  122. package/dist/picker/picker.vue +168 -161
  123. package/dist/picker-item/picker-item.vue +269 -269
  124. package/dist/popover/README.md +1 -1
  125. package/dist/popover/popover.vue +262 -261
  126. package/dist/popover/props.ts +4 -4
  127. package/dist/popover/type.ts +2 -2
  128. package/dist/popup/popup.vue +46 -45
  129. package/dist/progress/README.md +1 -1
  130. package/dist/progress/progress.vue +76 -76
  131. package/dist/pull-down-refresh/props.ts +2 -2
  132. package/dist/pull-down-refresh/pull-down-refresh.vue +240 -234
  133. package/dist/pull-down-refresh/type.ts +1 -1
  134. package/dist/qrcode/README.md +1 -1
  135. package/dist/qrcode/components/qrcode-canvas/qrcode-canvas.vue +340 -338
  136. package/dist/qrcode/components/qrcode-status/qrcode-status.vue +6 -6
  137. package/dist/qrcode/qrcode.vue +93 -87
  138. package/dist/radio/props.ts +6 -6
  139. package/dist/radio/radio.vue +118 -120
  140. package/dist/radio/type.ts +3 -3
  141. package/dist/radio-group/props.ts +4 -4
  142. package/dist/radio-group/radio-group.vue +136 -134
  143. package/dist/radio-group/type.ts +4 -4
  144. package/dist/rate/computed.js +2 -2
  145. package/dist/rate/props.ts +4 -4
  146. package/dist/rate/rate.vue +155 -154
  147. package/dist/rate/type.ts +2 -2
  148. package/dist/result/result.vue +41 -39
  149. package/dist/row/row.vue +38 -36
  150. package/dist/scroll-view/scroll-view.vue +24 -22
  151. package/dist/search/props.ts +2 -2
  152. package/dist/search/search.vue +127 -125
  153. package/dist/search/type.ts +1 -1
  154. package/dist/side-bar/side-bar.vue +57 -55
  155. package/dist/side-bar-item/side-bar-item.vue +86 -86
  156. package/dist/skeleton/skeleton.vue +126 -124
  157. package/dist/slider/README.md +1 -1
  158. package/dist/slider/props.ts +2 -2
  159. package/dist/slider/slider.vue +457 -457
  160. package/dist/slider/type.ts +1 -1
  161. package/dist/step-item/step-item.vue +77 -75
  162. package/dist/stepper/props.ts +2 -2
  163. package/dist/stepper/stepper.vue +168 -149
  164. package/dist/stepper/type.ts +1 -1
  165. package/dist/steps/props.ts +2 -2
  166. package/dist/steps/steps.vue +83 -81
  167. package/dist/steps/type.ts +1 -1
  168. package/dist/sticky/sticky.vue +104 -102
  169. package/dist/swipe-cell/swipe-cell.vue +91 -89
  170. package/dist/swiper/README.md +1 -1
  171. package/dist/swiper/swiper.vue +91 -89
  172. package/dist/swiper-nav/swiper-nav.vue +38 -36
  173. package/dist/switch/props.ts +2 -2
  174. package/dist/switch/switch.vue +62 -62
  175. package/dist/switch/type.ts +1 -1
  176. package/dist/tab-bar/tab-bar.vue +88 -86
  177. package/dist/tab-bar-item/tab-bar-item.vue +85 -82
  178. package/dist/tab-panel/tab-panel.vue +66 -64
  179. package/dist/tabs/tabs.vue +294 -287
  180. package/dist/tag/tag.vue +79 -77
  181. package/dist/textarea/props.ts +6 -6
  182. package/dist/textarea/textarea.vue +127 -126
  183. package/dist/textarea/type.ts +3 -3
  184. package/dist/toast/toast.vue +107 -106
  185. package/dist/transition/transition.vue +30 -28
  186. package/dist/tree-select/tree-select.vue +151 -151
  187. package/dist/types/config-provider.d.ts +7 -0
  188. package/dist/types/index.d.ts +2 -0
  189. package/dist/types/popover.d.ts +7 -0
  190. package/dist/upload/README.en-US.md +13 -14
  191. package/dist/upload/README.md +11 -12
  192. package/dist/upload/props.ts +2 -4
  193. package/dist/upload/type.ts +12 -11
  194. package/dist/upload/upload.css +1 -1
  195. package/dist/upload/upload.vue +672 -512
  196. package/dist/watermark/watermark.vue +151 -149
  197. package/global.d.ts +2 -0
  198. package/package.json +16 -2
  199. package/dist/form/form-item-props.ts +0 -56
@@ -25,7 +25,12 @@ export default {
25
25
  /** 未选中时的提示文案 */
26
26
  placeholder: {
27
27
  type: String,
28
- default: '选择选项',
28
+ default: '',
29
+ },
30
+ /** 透传 Popup 组件全部属性 */
31
+ popupProps: {
32
+ type: Object,
33
+ default: () => ({}),
29
34
  },
30
35
  /** 每级展示的次标题 */
31
36
  subTitles: {
@@ -4,6 +4,7 @@
4
4
  * 该文件为脚本自动生成文件,请勿随意修改。如需修改请联系 PMC
5
5
  * */
6
6
 
7
+ import type { TdPopupProps as PopupProps } from '../popup/type';
7
8
  import type { TreeOptionData, TreeKeysType } from '../common/common';
8
9
 
9
10
  export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOptionData> {
@@ -31,6 +32,11 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
31
32
  * @default 选择选项
32
33
  */
33
34
  placeholder?: string;
35
+ /**
36
+ * 透传 Popup 组件全部属性
37
+ * @default {}
38
+ */
39
+ popupProps?: PopupProps;
34
40
  /**
35
41
  * 每级展示的次标题
36
42
  * @default []
@@ -1,9 +1,9 @@
1
1
  <template>
2
2
  <view
3
- :style="tools._style([customStyle])"
3
+ :style="'' + tools._style([customStyle])"
4
4
  :class="[
5
5
  tClass,
6
- tools.cls(classPrefix, [['bordered', bordered || isLastChild]])
6
+ tools.cls(classPrefix, [['bordered', bordered || isLastChild]]),
7
7
  ]"
8
8
  :hover-class="hover ? classPrefix + '--hover' : ''"
9
9
  hover-stay-time="70"
@@ -44,7 +44,7 @@
44
44
  classPrefix + '__title-text ',
45
45
  tClassTitle
46
46
  ]"
47
- :style="tools._style(titleStyle)"
47
+ :style="'' + tools._style(titleStyle)"
48
48
  >
49
49
  <block v-if="title">
50
50
  {{ title }}
@@ -79,7 +79,7 @@
79
79
  classPrefix + '__note ',
80
80
  tClassNote
81
81
  ]"
82
- :style="tools._style(noteStyle)"
82
+ :style="'' + tools._style(noteStyle)"
83
83
  >
84
84
  <text v-if="note">
85
85
  {{ note }}
@@ -88,8 +88,8 @@
88
88
  </view>
89
89
  <view
90
90
  :class="[
91
- tools.cls(classPrefix + '__right', [align]),
92
- tClassRight
91
+ tools.cls(`${classPrefix}__right`, [align]),
92
+ tClassRight,
93
93
  ]"
94
94
  >
95
95
  <t-icon
@@ -144,133 +144,139 @@ const COMMON_RIGHT_ICON_STYLE = {
144
144
  fontSize: 'var(--td-cell-right-icon-font-size, 24px)',
145
145
  };
146
146
 
147
- export default uniComponent({
148
- name,
149
- options: {
150
- styleIsolation: 'shared',
151
- },
152
- externalClasses: [
153
- `${prefix}-class`,
154
- `${prefix}-class-title`,
155
- `${prefix}-class-description`,
156
- `${prefix}-class-note`,
157
- `${prefix}-class-hover`,
158
- `${prefix}-class-image`,
159
- `${prefix}-class-left`,
160
- `${prefix}-class-left-icon`,
161
- `${prefix}-class-center`,
162
- `${prefix}-class-right`,
163
- `${prefix}-class-right-icon`,
164
- ],
165
- mixins: [ChildrenMixin(RELATION_MAP.Cell)],
147
+ export default {
166
148
  components: {
167
149
  TIcon,
168
150
  TImage,
169
151
  },
170
- props: {
171
- ...props,
172
- },
173
- emits: [
174
- 'click',
175
- ],
176
- data() {
177
- return {
178
- prefix,
179
- classPrefix: name,
180
- rightArrow: null,
181
- iRightIcon: null,
182
- iLeftIcon: null,
183
- isLastChild: false,
184
- tools,
185
- };
186
- },
187
- computed: {
188
- rightArrowCustomStyle() {
189
- return tools._style([
190
- {
191
- color: this.rightArrow.color
192
- ? this.rightArrow.color
193
- : COMMON_RIGHT_ICON_STYLE.color,
194
- fontSize: this.rightArrow.size
195
- ? addUnit(this.rightArrow.size)
196
- : COMMON_RIGHT_ICON_STYLE.fontSize,
197
- },
198
- this.rightIconStyle || '',
199
- this.rightArrow.style || '',
200
- ]);
152
+ ...uniComponent({
153
+ name,
154
+ options: {
155
+ styleIsolation: 'shared',
201
156
  },
202
- rightIconCustomStyle() {
203
- return tools._style([
204
- {
205
- color: this.iRightIcon.color
206
- ? this.iRightIcon.color
207
- : COMMON_RIGHT_ICON_STYLE.color,
208
- fontSize: this.iRightIcon.size
209
- ? addUnit(this.iRightIcon.size)
210
- : COMMON_RIGHT_ICON_STYLE.fontSize,
211
- },
212
- this.rightIconStyle || '',
213
- this.iRightIcon.style || '',
214
- ]);
215
- },
216
- leftIconCustomStyle() {
217
- return tools._style([
218
- {
219
- color: this.iLeftIcon.color
220
- ? this.iLeftIcon.color
221
- : 'var(--td-cell-left-icon-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)))',
222
- fontSize: this.iLeftIcon.size
223
- ? addUnit(this.iLeftIcon.size)
224
- : 'var(--td-cell-left-icon-font-size, 24px)',
225
- },
226
- this.iLeftIcon.style || '',
227
- ]);
157
+ externalClasses: [
158
+ `${prefix}-class`,
159
+ `${prefix}-class-title`,
160
+ `${prefix}-class-description`,
161
+ `${prefix}-class-note`,
162
+ `${prefix}-class-hover`,
163
+ `${prefix}-class-image`,
164
+ `${prefix}-class-left`,
165
+ `${prefix}-class-left-icon`,
166
+ `${prefix}-class-center`,
167
+ `${prefix}-class-right`,
168
+ `${prefix}-class-right-icon`,
169
+ ],
170
+ mixins: [ChildrenMixin(RELATION_MAP.Cell)],
171
+ props: {
172
+ ...props,
228
173
  },
229
- leftImageCustomStyle() {
230
- return tools._style({
231
- height: 'var(--td-cell-image-height, 48px)',
232
- width: 'var(--td-cell-image-width, 48px)',
233
- });
174
+ emits: [
175
+ 'click',
176
+ ],
177
+ data() {
178
+ return {
179
+ prefix,
180
+ classPrefix: name,
181
+ rightArrow: null,
182
+ iRightIcon: null,
183
+ iLeftIcon: null,
184
+ isLastChild: false,
185
+ tools,
186
+ };
234
187
  },
235
- },
236
- watch: {
237
- leftIcon: {
238
- handler(e) {
239
- this.setIcon('iLeftIcon', e, '');
188
+ computed: {
189
+ rightArrowCustomStyle() {
190
+ if (!this.rightArrow) return '';
191
+ return tools._style([
192
+ {
193
+ color: this.rightArrow.color
194
+ ? this.rightArrow.color
195
+ : COMMON_RIGHT_ICON_STYLE.color,
196
+ fontSize: this.rightArrow.size
197
+ ? addUnit(this.rightArrow.size)
198
+ : COMMON_RIGHT_ICON_STYLE.fontSize,
199
+ },
200
+ this.rightIconStyle || '',
201
+ this.rightArrow.style || '',
202
+ ]);
240
203
  },
241
- immediate: true,
242
- },
243
- rightIcon: {
244
- handler(e) {
245
- this.setIcon('iRightIcon', e, '');
204
+ rightIconCustomStyle() {
205
+ if (!this.iRightIcon) return '';
206
+ return tools._style([
207
+ {
208
+ color: this.iRightIcon.color
209
+ ? this.iRightIcon.color
210
+ : COMMON_RIGHT_ICON_STYLE.color,
211
+ fontSize: this.iRightIcon.size
212
+ ? addUnit(this.iRightIcon.size)
213
+ : COMMON_RIGHT_ICON_STYLE.fontSize,
214
+ },
215
+ this.rightIconStyle || '',
216
+ this.iRightIcon.style || '',
217
+ ]);
246
218
  },
247
- immediate: true,
248
- },
249
- arrow: {
250
- handler(e) {
251
- this.setIcon('rightArrow', e, 'chevron-right');
219
+ leftIconCustomStyle() {
220
+ if (!this.iLeftIcon) return '';
221
+
222
+ return tools._style([
223
+ {
224
+ color: this.iLeftIcon.color
225
+ ? this.iLeftIcon.color
226
+ : 'var(--td-cell-left-icon-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)))',
227
+ fontSize: this.iLeftIcon.size
228
+ ? addUnit(this.iLeftIcon.size)
229
+ : 'var(--td-cell-left-icon-font-size, 24px)',
230
+ },
231
+ this.iLeftIcon.style || '',
232
+ ]);
233
+ },
234
+ leftImageCustomStyle() {
235
+ return tools._style({
236
+ height: 'var(--td-cell-image-height, 48px)',
237
+ width: 'var(--td-cell-image-width, 48px)',
238
+ });
252
239
  },
253
- immediate: true,
254
- },
255
- },
256
- methods: {
257
- setIcon(e, t, s) {
258
- this[e] = calcIcon(t, s);
259
240
  },
260
- onClick(e) {
261
- this.$emit('click', e);
262
- this.jumpLink();
241
+ watch: {
242
+ leftIcon: {
243
+ handler(e) {
244
+ this.setIcon('iLeftIcon', e, '');
245
+ },
246
+ immediate: true,
247
+ },
248
+ rightIcon: {
249
+ handler(e) {
250
+ this.setIcon('iRightIcon', e, '');
251
+ },
252
+ immediate: true,
253
+ },
254
+ arrow: {
255
+ handler(e) {
256
+ this.setIcon('rightArrow', e, 'chevron-right');
257
+ },
258
+ immediate: true,
259
+ },
263
260
  },
264
- jumpLink(e = 'url', t = 'jumpType') {
265
- const s = this[e];
266
- const i = this[t];
267
- if (s) {
268
- uni[i]({
269
- url: s,
270
- });
271
- }
261
+ methods: {
262
+ setIcon(e, t, s) {
263
+ this[e] = calcIcon(t, s);
264
+ },
265
+ onClick(e) {
266
+ this.$emit('click', e);
267
+ this.jumpLink();
268
+ },
269
+ jumpLink(e = 'url', t = 'jumpType') {
270
+ const s = this[e];
271
+ const i = this[t];
272
+ if (s) {
273
+ uni[i]({
274
+ url: s,
275
+ });
276
+ }
277
+ },
272
278
  },
273
- },
274
- });
279
+ }),
280
+ };
275
281
  </script>
276
282
  <style scoped src="./cell.css"></style>
@@ -10,7 +10,7 @@
10
10
  {{ title }}
11
11
  </view>
12
12
  <view
13
- :style="tools._style([customStyle])"
13
+ :style="'' + tools._style([customStyle])"
14
14
  :class="[
15
15
  tools.cls(classPrefix, [['bordered', bordered], theme]),
16
16
  tClass
@@ -31,37 +31,39 @@ import { ParentMixin, RELATION_MAP } from '../common/relation';
31
31
  const name = `${prefix}-cell-group`;
32
32
 
33
33
 
34
- export default uniComponent({
35
- name,
36
- options: {
37
- styleIsolation: 'shared',
38
- },
39
- externalClasses: [`${prefix}-class`, `${prefix}-class-title`],
40
- mixins: [ParentMixin(RELATION_MAP.Cell)],
41
- props: {
42
- ...props,
43
- },
44
- data() {
45
- return {
46
- prefix,
47
- classPrefix: name,
48
- tools,
49
- };
50
- },
51
- methods: {
52
- innerAfterLinked() {
53
- this.updateLastChid();
34
+ export default {
35
+ ...uniComponent({
36
+ name,
37
+ options: {
38
+ styleIsolation: 'shared',
54
39
  },
55
- innerAfterUnLinked() {
56
- this.updateLastChid();
40
+ externalClasses: [`${prefix}-class`, `${prefix}-class-title`],
41
+ mixins: [ParentMixin(RELATION_MAP.Cell)],
42
+ props: {
43
+ ...props,
57
44
  },
58
- updateLastChid() {
59
- const { children } = this;
60
- children.forEach((child, index) => {
61
- child.isLastChild = index === children.length - 1;
62
- });
45
+ data() {
46
+ return {
47
+ prefix,
48
+ classPrefix: name,
49
+ tools,
50
+ };
63
51
  },
64
- },
65
- });
52
+ methods: {
53
+ innerAfterLinked() {
54
+ this.updateLastChid();
55
+ },
56
+ innerAfterUnLinked() {
57
+ this.updateLastChid();
58
+ },
59
+ updateLastChid() {
60
+ const { children } = this;
61
+ children.forEach((child, index) => {
62
+ child.isLastChild = index === children.length - 1;
63
+ });
64
+ },
65
+ },
66
+ }),
67
+ };
66
68
  </script>
67
69
  <style scoped src="./cell-group.css"></style>
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <view
3
- :style="tools._style([customStyle])"
3
+ :style="'' + tools._style([customStyle])"
4
4
  :class="className + ' ' + tClass"
5
5
  @click="onClick"
6
6
  >
@@ -59,88 +59,90 @@ import tools from '../common/utils.wxs';
59
59
  const name = `${prefix}-tag`;
60
60
 
61
61
 
62
- export default uniComponent({
63
- name,
64
- options: {
65
- styleIsolation: 'shared',
66
- },
67
- controlledProps: [{
68
- key: 'checked',
69
- event: 'change',
70
- }],
71
- externalClasses: [
72
- `${prefix}-class`,
73
-
74
- ],
62
+ export default {
75
63
  components: {
76
64
  TIcon,
77
65
  },
78
- props: {
79
- ...props,
80
- },
81
- data() {
82
- return {
83
- prefix,
84
- classPrefix: name,
85
- className: '',
86
- tools,
87
- innerIcon: null,
66
+ ...uniComponent({
67
+ name,
68
+ options: {
69
+ styleIsolation: 'shared',
70
+ },
71
+ controlledProps: [{
72
+ key: 'checked',
73
+ event: 'change',
74
+ }],
75
+ externalClasses: [
76
+ `${prefix}-class`,
88
77
 
89
- dataChecked: coalesce(this.checked, this.defaultChecked),
90
- };
91
- },
92
- watch: {
93
- size: 'setClass',
94
- disabled: 'setClass',
95
- dataChecked: 'setClass',
96
- icon: {
97
- handler(e) {
98
- this.innerIcon = calcIcon(e);
99
- },
100
- immediate: true,
78
+ ],
79
+ props: {
80
+ ...props,
81
+ },
82
+ data() {
83
+ return {
84
+ prefix,
85
+ classPrefix: name,
86
+ className: '',
87
+ tools,
88
+ innerIcon: null,
89
+
90
+ dataChecked: coalesce(this.checked, this.defaultChecked),
91
+ };
101
92
  },
102
- checked: {
103
- handler(value) {
104
- this.dataChecked = value;
93
+ watch: {
94
+ size: 'setClass',
95
+ disabled: 'setClass',
96
+ dataChecked: 'setClass',
97
+ icon: {
98
+ handler(e) {
99
+ this.innerIcon = calcIcon(e);
100
+ },
101
+ immediate: true,
102
+ },
103
+ checked: {
104
+ handler(value) {
105
+ this.dataChecked = value;
106
+ },
107
+ immediate: true,
105
108
  },
106
- immediate: true,
107
109
  },
108
- },
109
- mounted() {
110
- this.setClass();
111
- },
112
- methods: {
113
- setClass() {
114
- const { classPrefix } = this;
115
- const { size, variant, disabled, dataChecked, shape } = this;
116
- const tagClass = [
117
- classPrefix,
118
- `${classPrefix}--checkable`,
119
- disabled ? `${classPrefix}--disabled` : '',
120
- dataChecked ? `${classPrefix}--checked` : '',
121
- `${classPrefix}--${dataChecked ? 'primary' : 'default'}`,
122
- `${classPrefix}--${size}`,
123
- `${classPrefix}--${variant}`,
124
- `${classPrefix}--${shape}`,
125
- ];
126
- const className = classNames(tagClass);
127
- this.className = className;
110
+ mounted() {
111
+ this.setClass();
128
112
  },
113
+ methods: {
114
+ setClass() {
115
+ const { classPrefix } = this;
116
+ const { size, variant, disabled, dataChecked, shape } = this;
117
+ const tagClass = [
118
+ classPrefix,
119
+ `${classPrefix}--checkable`,
120
+ disabled ? `${classPrefix}--disabled` : '',
121
+ dataChecked ? `${classPrefix}--checked` : '',
122
+ `${classPrefix}--${dataChecked ? 'primary' : 'default'}`,
123
+ `${classPrefix}--${size}`,
124
+ `${classPrefix}--${variant}`,
125
+ `${classPrefix}--${shape}`,
126
+ ];
127
+ const className = classNames(tagClass);
128
+ this.className = className;
129
+ },
129
130
 
130
- onClick() {
131
- if (this.disabled) return;
132
- const { dataChecked } = this;
131
+ onClick() {
132
+ if (this.disabled) return;
133
+ const { dataChecked } = this;
133
134
 
134
- this._trigger('click');
135
- this._trigger('change', { checked: !dataChecked });
136
- },
135
+ this._trigger('click');
136
+ this._trigger('change', { checked: !dataChecked });
137
+ },
137
138
 
138
- onClose(e) {
139
- if (this.disabled) return;
140
- this._trigger('close', e);
139
+ onClose(e) {
140
+ if (this.disabled) return;
141
+ this._trigger('close', e);
142
+ },
141
143
  },
142
- },
143
- });
144
+ }),
145
+ };
144
146
 
145
147
  </script>
146
148
  <style scoped src="./check-tag.css"></style>
@@ -15,7 +15,7 @@ default-checked | Boolean | - | uncontrolled property | N
15
15
  content | String | - | \- | N
16
16
  content-disabled | Boolean | - | \- | N
17
17
  disabled | Boolean | undefined | \- | N
18
- icon | String / Array | 'circle' | Typescript:`'circle' \| 'line' \| 'rectangle' \| string[]` | N
18
+ icon | String / Array | 'circle' | Typescript: `CheckboxIconType` `type CheckboxIconType = 'circle' \| 'line' \| 'rectangle' \| string[];`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/checkbox/type.ts) | N
19
19
  indeterminate | Boolean | false | \- | N
20
20
  label | String | - | \- | N
21
21
  max-content-row | Number | 5 | \- | N
@@ -24,7 +24,7 @@ name | String | - | \- | N
24
24
  placement | String | left | options: left/right | N
25
25
  readonly | Boolean | undefined | \- | N
26
26
  relation-key | String | - | \- | N
27
- value | String / Number / Boolean | - | value of checkbox。Typescript:`string \| number \| boolean` | N
27
+ value | String / Number / Boolean | - | value of checkbox。Typescript: `string \| number \| boolean` | N
28
28
 
29
29
  ### Checkbox Events
30
30
 
@@ -58,14 +58,14 @@ name | type | default | description | required
58
58
  custom-style | Object | - | CSS(Cascading Style Sheets) | N
59
59
  borderless | Boolean | false | \- | N
60
60
  disabled | Boolean | undefined | \- | N
61
- keys | Object | - | Typescript:`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
61
+ keys | Object | - | Typescript: `KeysType`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/common/common.ts) | N
62
62
  max | Number | undefined | \- | N
63
63
  name | String | - | \- | N
64
- options | Array | [] | Typescript:`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string \| number; disabled?: boolean; checkAll?: true }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/checkbox-group/type.ts) | N
64
+ options | Array | [] | Typescript: `Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string \| number; disabled?: boolean;icon?:CheckboxIconType; checkAll?: true }`,[Checkbox API Documents](./checkbox?tab=api)。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/checkbox-group/type.ts) | N
65
65
  readonly | Boolean | undefined | \- | N
66
66
  relation-key | String | - | \- | N
67
- value | Array | - | `v-model:value` is supported。Typescript:`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/checkbox-group/type.ts) | N
68
- default-value | Array | - | uncontrolled property。Typescript:`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/checkbox-group/type.ts) | N
67
+ value | Array | - | `v-model:value` is supported。Typescript: `T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/checkbox-group/type.ts) | N
68
+ default-value | Array | - | uncontrolled property。Typescript: `T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/checkbox-group/type.ts) | N
69
69
 
70
70
  ### CheckboxGroup Events
71
71
 
@@ -70,7 +70,7 @@ default-checked | Boolean | - | 是否选中。非受控属性 | N
70
70
  content | String | - | 多选框内容 | N
71
71
  content-disabled | Boolean | - | 是否禁用组件内容(content)触发选中 | N
72
72
  disabled | Boolean | undefined | 是否禁用组件。如果父组件存在 CheckboxGroup,默认值由 CheckboxGroup.disabled 控制。优先级:Checkbox.disabled > CheckboxGroup.disabled > Form.disabled | N
73
- icon | String / Array | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示:`[选中态图标,非选中态图标,半选中态图标]`。使用 String 时,值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标。TS 类型:`'circle' \| 'line' \| 'rectangle' \| string[]` | N
73
+ icon | String / Array | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示:`[选中态图标,非选中态图标,半选中态图标]`。使用 String 时,值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标。TS 类型:`CheckboxIconType` `type CheckboxIconType = 'circle' \| 'line' \| 'rectangle' \| string[];`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/checkbox/type.ts) | N
74
74
  indeterminate | Boolean | false | 是否为半选 | N
75
75
  label | String | - | 主文案 | N
76
76
  max-content-row | Number | 5 | 内容最大行数限制 | N
@@ -113,14 +113,14 @@ t-class-label | 标签样式类
113
113
  custom-style | Object | - | 自定义样式 | N
114
114
  borderless | Boolean | false | 是否开启无边框模式。优先级低于 Checkbox.borderless | N
115
115
  disabled | Boolean | undefined | 是否禁用组件。优先级:Form.disabled < CheckboxGroup.disabled < Checkbox.disabled | N
116
- keys | Object | - | 用来定义 value / label / disabled 在 `options` 中对应的字段别名。TS 类型:`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/common/common.ts) | N
116
+ keys | Object | - | 用来定义 value / label / disabled 在 `options` 中对应的字段别名。TS 类型:`KeysType`。[通用类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/common/common.ts) | N
117
117
  max | Number | undefined | 支持最多选中的数量 | N
118
118
  name | String | - | 统一设置内部复选框 HTML 属性 | N
119
- options | Array | [] | 以配置形式设置子元素。示例1:`['北京', '上海']` ,示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型:`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string \| number; disabled?: boolean; checkAll?: true }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/checkbox-group/type.ts) | N
119
+ options | Array | [] | 以配置形式设置子元素。示例1:`['北京', '上海']` ,示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型:`Array<CheckboxOption>` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string \| number; disabled?: boolean;icon?:CheckboxIconType; checkAll?: true }`,[Checkbox API Documents](./checkbox?tab=api)。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/checkbox-group/type.ts) | N
120
120
  readonly | Boolean | undefined | 只读状态 | N
121
121
  relation-key | String | - | -1 时代表独立,不再寻找 parent,用于头条小程序 | N
122
- value | Array | - | 选中值。支持语法糖 `v-model:value`。TS 类型:`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/checkbox-group/type.ts) | N
123
- default-value | Array | - | 选中值。非受控属性。TS 类型:`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/packages/uniapp-components/checkbox-group/type.ts) | N
122
+ value | Array | - | 选中值。支持语法糖 `v-model:value`。TS 类型:`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/checkbox-group/type.ts) | N
123
+ default-value | Array | - | 选中值。非受控属性。TS 类型:`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/checkbox-group/type.ts) | N
124
124
 
125
125
  ### CheckboxGroup Events
126
126