@veltra/desktop 1.1.9 → 1.1.10

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 (44) hide show
  1. package/dist/components/action/action-group.vue.d.ts +1 -1
  2. package/dist/components/action/action.vue.d.ts +1 -1
  3. package/dist/components/button/style2.css +75 -11
  4. package/dist/components/card/style2.css +4 -6
  5. package/dist/components/cascade/cascade.vue.d.ts +2 -2
  6. package/dist/components/checkbox/checkbox-button.vue.d.ts +1 -1
  7. package/dist/components/collapse/collapse-item.js +8 -23
  8. package/dist/components/collapse/collapse-item.js.map +1 -1
  9. package/dist/components/collapse/collapse-item.vue.d.ts +5 -9
  10. package/dist/components/collapse/collapse.js +22 -44
  11. package/dist/components/collapse/collapse.js.map +1 -1
  12. package/dist/components/collapse/collapse.vue.d.ts +3 -4
  13. package/dist/components/collapse/di.js.map +1 -1
  14. package/dist/components/collapse/style2.css +36 -38
  15. package/dist/components/date-panel/date-panel.vue.d.ts +1 -1
  16. package/dist/components/date-picker/date-picker.vue.d.ts +1 -1
  17. package/dist/components/date-range-picker/date-range-picker.vue.d.ts +1 -1
  18. package/dist/components/drawer/drawer.vue.d.ts +2 -2
  19. package/dist/components/file-viewer/file-viewer.vue.d.ts +3 -3
  20. package/dist/components/multi-select/multi-select.vue.d.ts +1 -1
  21. package/dist/components/multi-tree-select/multi-tree-select.vue.d.ts +1 -1
  22. package/dist/components/number-range-input/number-range-input.vue.d.ts +1 -1
  23. package/dist/components/pop-confirm/pop-confirm.vue.d.ts +1 -1
  24. package/dist/components/progress-nodes/progress-nodes.vue.d.ts +2 -2
  25. package/dist/components/tabs/style.js +1 -0
  26. package/dist/components/tabs/tabs-horizontal.vue.d.ts +2 -2
  27. package/dist/components/tabs/tabs-vertical.vue.d.ts +2 -2
  28. package/dist/components/tabs/tabs.vue.d.ts +2 -2
  29. package/dist/components/tip/tip.vue.d.ts +1 -1
  30. package/dist/components/tree/tree.vue.d.ts +1 -1
  31. package/dist/components/tree-select/tree-select.vue.d.ts +1 -1
  32. package/dist/index.d.ts +3 -3
  33. package/dist/types/collapse.d.ts +5 -28
  34. package/dist/types/index.d.ts +2 -2
  35. package/package.json +11 -11
  36. package/src/components/button/style.scss +26 -7
  37. package/src/components/card/style.scss +4 -18
  38. package/src/components/collapse/__test__/collapse.test.ts +178 -0
  39. package/src/components/collapse/collapse-item.vue +3 -12
  40. package/src/components/collapse/collapse.vue +42 -52
  41. package/src/components/collapse/di.ts +3 -2
  42. package/src/components/collapse/style.scss +32 -80
  43. package/src/components/tabs/style.ts +1 -0
  44. package/src/types/collapse.ts +4 -32
package/dist/components/action/action-group.vue.d.ts CHANGED
@@ -8,8 +8,8 @@ type __VLS_Slots = {
8
8
  default?: () => VNode[];
9
9
  };
10
10
  declare const __VLS_base: _$vue.DefineComponent<ActionGroupProps, _ActionGroupExposed, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<ActionGroupProps> & Readonly<{}>, {
11
- type: _$_veltra_utils0.ColorType;
12
11
  size: "small" | "default" | "large";
12
+ type: _$_veltra_utils0.ColorType;
13
13
  text: boolean;
14
14
  circle: boolean;
15
15
  max: number;
package/dist/components/action/action.vue.d.ts CHANGED
@@ -15,8 +15,8 @@ declare const __VLS_base: _$vue.DefineComponent<ActionProps, {}, {}, {}, {}, _$v
15
15
  }, string, _$vue.PublicProps, Readonly<ActionProps> & Readonly<{
16
16
  onRun?: (() => any) | undefined;
17
17
  }>, {
18
- type: ButtonType;
19
18
  size: _$_veltra_utils0.ComponentSize;
19
+ type: ButtonType;
20
20
  text: boolean;
21
21
  circle: boolean;
22
22
  loading: boolean;
package/dist/components/button/style2.css CHANGED
@@ -18,14 +18,14 @@
18
18
  .u-button {
19
19
  color: var(--u-button-default-color, var(--u-text-color-main));
20
20
  box-sizing: border-box;
21
+ border-radius: 9999px;
21
22
  line-height: 1;
22
23
  outline: none;
23
24
  text-decoration: none;
24
25
  white-space: nowrap;
25
26
  vertical-align: middle;
26
- border-radius: var(--u-radius-default);
27
27
  cursor: pointer;
28
- padding: 0 0.8em;
28
+ padding: 0 1em;
29
29
  -webkit-appearance: none;
30
30
  border: 1px solid var(--u-button-default-border, transparent);
31
31
  background-color: var(--u-button-default-bg, var(--u-color-default));
@@ -55,6 +55,7 @@
55
55
  .u-button.is-plain {
56
56
  background-color: var(--u-bg-color-top);
57
57
  border-color: var(--u-color-default-dark-1);
58
+ box-shadow: none;
58
59
  }
59
60
  .u-button.is-plain:hover {
60
61
  border-color: var(--u-color-default-dark-1);
@@ -109,10 +110,12 @@
109
110
  }
110
111
  .u-button--color-primary {
111
112
  background-color: var(--u-color-primary);
113
+ border-color: var(--u-button-primary-border, var(--u-color-primary));
112
114
  color: var(--u-button-primary-text-color, var(--u-text-color-white));
113
115
  }
114
116
  .u-button--color-primary:hover {
115
117
  background-color: var(--u-button-primary-hover-bg, var(--u-color-primary-dark-1));
118
+ border-color: var(--u-button-primary-hover-border, var(--u-color-primary-dark-1));
116
119
  color: var(--u-button-primary-hover-color, var(--u-button-primary-text-color, var(--u-text-color-white)));
117
120
  }
118
121
  .u-button--color-primary.is-disabled {
@@ -146,13 +149,20 @@
146
149
  .u-button--color-primary.is-plain {
147
150
  color: var(--u-button-primary-plain-color, var(--u-color-primary));
148
151
  background-color: var(--u-button-primary-plain-bg, var(--u-color-primary-light-9));
149
- box-shadow: 0px 0px 2px 1px var(--u-button-primary-plain-shadow, var(--u-color-primary-light-5));
152
+ border-color: var(--u-button-primary-plain-border, var(--u-color-primary-light-5));
153
+ box-shadow: none;
154
+ }
155
+ .u-button--color-primary.is-plain:not(.is-disabled):not(.is-loading):hover {
156
+ color: var(--u-color-primary);
157
+ border-color: var(--u-color-primary);
158
+ background-color: var(--u-color-primary-light-9);
150
159
  }
151
160
  .u-button--color-primary.is-plain:active {
152
161
  box-shadow: none;
153
162
  }
154
163
  .u-button--color-primary.is-plain.is-disabled {
155
164
  color: var(--u-color-primary-light-5);
165
+ border-color: var(--u-color-primary-light-8);
156
166
  }
157
167
  .u-button .is-ripple-success {
158
168
  background-color: var(--u-color-success);
@@ -160,10 +170,12 @@
160
170
  }
161
171
  .u-button--color-success {
162
172
  background-color: var(--u-color-success);
173
+ border-color: var(--u-button-success-border, var(--u-color-success));
163
174
  color: var(--u-button-success-text-color, var(--u-text-color-white));
164
175
  }
165
176
  .u-button--color-success:hover {
166
177
  background-color: var(--u-button-success-hover-bg, var(--u-color-success-dark-1));
178
+ border-color: var(--u-button-success-hover-border, var(--u-color-success-dark-1));
167
179
  color: var(--u-button-success-hover-color, var(--u-button-success-text-color, var(--u-text-color-white)));
168
180
  }
169
181
  .u-button--color-success.is-disabled {
@@ -197,13 +209,20 @@
197
209
  .u-button--color-success.is-plain {
198
210
  color: var(--u-button-success-plain-color, var(--u-color-success));
199
211
  background-color: var(--u-button-success-plain-bg, var(--u-color-success-light-9));
200
- box-shadow: 0px 0px 2px 1px var(--u-button-success-plain-shadow, var(--u-color-success-light-5));
212
+ border-color: var(--u-button-success-plain-border, var(--u-color-success-light-5));
213
+ box-shadow: none;
214
+ }
215
+ .u-button--color-success.is-plain:not(.is-disabled):not(.is-loading):hover {
216
+ color: var(--u-color-success);
217
+ border-color: var(--u-color-success);
218
+ background-color: var(--u-color-success-light-9);
201
219
  }
202
220
  .u-button--color-success.is-plain:active {
203
221
  box-shadow: none;
204
222
  }
205
223
  .u-button--color-success.is-plain.is-disabled {
206
224
  color: var(--u-color-success-light-5);
225
+ border-color: var(--u-color-success-light-8);
207
226
  }
208
227
  .u-button .is-ripple-warning {
209
228
  background-color: var(--u-color-warning);
@@ -211,10 +230,12 @@
211
230
  }
212
231
  .u-button--color-warning {
213
232
  background-color: var(--u-color-warning);
233
+ border-color: var(--u-button-warning-border, var(--u-color-warning));
214
234
  color: var(--u-button-warning-text-color, var(--u-text-color-white));
215
235
  }
216
236
  .u-button--color-warning:hover {
217
237
  background-color: var(--u-button-warning-hover-bg, var(--u-color-warning-dark-1));
238
+ border-color: var(--u-button-warning-hover-border, var(--u-color-warning-dark-1));
218
239
  color: var(--u-button-warning-hover-color, var(--u-button-warning-text-color, var(--u-text-color-white)));
219
240
  }
220
241
  .u-button--color-warning.is-disabled {
@@ -248,13 +269,20 @@
248
269
  .u-button--color-warning.is-plain {
249
270
  color: var(--u-button-warning-plain-color, var(--u-color-warning));
250
271
  background-color: var(--u-button-warning-plain-bg, var(--u-color-warning-light-9));
251
- box-shadow: 0px 0px 2px 1px var(--u-button-warning-plain-shadow, var(--u-color-warning-light-5));
272
+ border-color: var(--u-button-warning-plain-border, var(--u-color-warning-light-5));
273
+ box-shadow: none;
274
+ }
275
+ .u-button--color-warning.is-plain:not(.is-disabled):not(.is-loading):hover {
276
+ color: var(--u-color-warning);
277
+ border-color: var(--u-color-warning);
278
+ background-color: var(--u-color-warning-light-9);
252
279
  }
253
280
  .u-button--color-warning.is-plain:active {
254
281
  box-shadow: none;
255
282
  }
256
283
  .u-button--color-warning.is-plain.is-disabled {
257
284
  color: var(--u-color-warning-light-5);
285
+ border-color: var(--u-color-warning-light-8);
258
286
  }
259
287
  .u-button .is-ripple-danger {
260
288
  background-color: var(--u-color-danger);
@@ -262,10 +290,12 @@
262
290
  }
263
291
  .u-button--color-danger {
264
292
  background-color: var(--u-color-danger);
293
+ border-color: var(--u-button-danger-border, var(--u-color-danger));
265
294
  color: var(--u-button-danger-text-color, var(--u-text-color-white));
266
295
  }
267
296
  .u-button--color-danger:hover {
268
297
  background-color: var(--u-button-danger-hover-bg, var(--u-color-danger-dark-1));
298
+ border-color: var(--u-button-danger-hover-border, var(--u-color-danger-dark-1));
269
299
  color: var(--u-button-danger-hover-color, var(--u-button-danger-text-color, var(--u-text-color-white)));
270
300
  }
271
301
  .u-button--color-danger.is-disabled {
@@ -299,13 +329,20 @@
299
329
  .u-button--color-danger.is-plain {
300
330
  color: var(--u-button-danger-plain-color, var(--u-color-danger));
301
331
  background-color: var(--u-button-danger-plain-bg, var(--u-color-danger-light-9));
302
- box-shadow: 0px 0px 2px 1px var(--u-button-danger-plain-shadow, var(--u-color-danger-light-5));
332
+ border-color: var(--u-button-danger-plain-border, var(--u-color-danger-light-5));
333
+ box-shadow: none;
334
+ }
335
+ .u-button--color-danger.is-plain:not(.is-disabled):not(.is-loading):hover {
336
+ color: var(--u-color-danger);
337
+ border-color: var(--u-color-danger);
338
+ background-color: var(--u-color-danger-light-9);
303
339
  }
304
340
  .u-button--color-danger.is-plain:active {
305
341
  box-shadow: none;
306
342
  }
307
343
  .u-button--color-danger.is-plain.is-disabled {
308
344
  color: var(--u-color-danger-light-5);
345
+ border-color: var(--u-color-danger-light-8);
309
346
  }
310
347
  .u-button .is-ripple-info {
311
348
  background-color: var(--u-color-info);
@@ -313,10 +350,12 @@
313
350
  }
314
351
  .u-button--color-info {
315
352
  background-color: var(--u-color-info);
353
+ border-color: var(--u-button-info-border, var(--u-color-info));
316
354
  color: var(--u-button-info-text-color, var(--u-text-color-white));
317
355
  }
318
356
  .u-button--color-info:hover {
319
357
  background-color: var(--u-button-info-hover-bg, var(--u-color-info-dark-1));
358
+ border-color: var(--u-button-info-hover-border, var(--u-color-info-dark-1));
320
359
  color: var(--u-button-info-hover-color, var(--u-button-info-text-color, var(--u-text-color-white)));
321
360
  }
322
361
  .u-button--color-info.is-disabled {
@@ -350,13 +389,20 @@
350
389
  .u-button--color-info.is-plain {
351
390
  color: var(--u-button-info-plain-color, var(--u-color-info));
352
391
  background-color: var(--u-button-info-plain-bg, var(--u-color-info-light-9));
353
- box-shadow: 0px 0px 2px 1px var(--u-button-info-plain-shadow, var(--u-color-info-light-5));
392
+ border-color: var(--u-button-info-plain-border, var(--u-color-info-light-5));
393
+ box-shadow: none;
394
+ }
395
+ .u-button--color-info.is-plain:not(.is-disabled):not(.is-loading):hover {
396
+ color: var(--u-color-info);
397
+ border-color: var(--u-color-info);
398
+ background-color: var(--u-color-info-light-9);
354
399
  }
355
400
  .u-button--color-info.is-plain:active {
356
401
  box-shadow: none;
357
402
  }
358
403
  .u-button--color-info.is-plain.is-disabled {
359
404
  color: var(--u-color-info-light-5);
405
+ border-color: var(--u-color-info-light-8);
360
406
  }
361
407
  .u-button .is-ripple-disabled {
362
408
  background-color: var(--u-color-disabled);
@@ -364,10 +410,12 @@
364
410
  }
365
411
  .u-button--color-disabled {
366
412
  background-color: var(--u-color-disabled);
413
+ border-color: var(--u-button-disabled-border, var(--u-color-disabled));
367
414
  color: var(--u-button-disabled-text-color, var(--u-text-color-white));
368
415
  }
369
416
  .u-button--color-disabled:hover {
370
417
  background-color: var(--u-button-disabled-hover-bg, var(--u-color-disabled-dark-1));
418
+ border-color: var(--u-button-disabled-hover-border, var(--u-color-disabled-dark-1));
371
419
  color: var(--u-button-disabled-hover-color, var(--u-button-disabled-text-color, var(--u-text-color-white)));
372
420
  }
373
421
  .u-button--color-disabled.is-disabled {
@@ -401,13 +449,20 @@
401
449
  .u-button--color-disabled.is-plain {
402
450
  color: var(--u-button-disabled-plain-color, var(--u-color-disabled));
403
451
  background-color: var(--u-button-disabled-plain-bg, var(--u-color-disabled-light-9));
404
- box-shadow: 0px 0px 2px 1px var(--u-button-disabled-plain-shadow, var(--u-color-disabled-light-5));
452
+ border-color: var(--u-button-disabled-plain-border, var(--u-color-disabled-light-5));
453
+ box-shadow: none;
454
+ }
455
+ .u-button--color-disabled.is-plain:not(.is-disabled):not(.is-loading):hover {
456
+ color: var(--u-color-disabled);
457
+ border-color: var(--u-color-disabled);
458
+ background-color: var(--u-color-disabled-light-9);
405
459
  }
406
460
  .u-button--color-disabled.is-plain:active {
407
461
  box-shadow: none;
408
462
  }
409
463
  .u-button--color-disabled.is-plain.is-disabled {
410
464
  color: var(--u-color-disabled-light-5);
465
+ border-color: var(--u-color-disabled-light-8);
411
466
  }
412
467
  .u-button .is-ripple-default {
413
468
  background-color: var(--u-color-default);
@@ -415,10 +470,12 @@
415
470
  }
416
471
  .u-button--color-default {
417
472
  background-color: var(--u-color-default);
473
+ border-color: var(--u-button-default-border, var(--u-color-default));
418
474
  color: var(--u-button-default-text-color, var(--u-text-color-white));
419
475
  }
420
476
  .u-button--color-default:hover {
421
477
  background-color: var(--u-button-default-hover-bg, var(--u-color-default-dark-1));
478
+ border-color: var(--u-button-default-hover-border, var(--u-color-default-dark-1));
422
479
  color: var(--u-button-default-hover-color, var(--u-button-default-text-color, var(--u-text-color-white)));
423
480
  }
424
481
  .u-button--color-default.is-disabled {
@@ -452,13 +509,20 @@
452
509
  .u-button--color-default.is-plain {
453
510
  color: var(--u-button-default-plain-color, var(--u-color-default));
454
511
  background-color: var(--u-button-default-plain-bg, var(--u-color-default-light-9));
455
- box-shadow: 0px 0px 2px 1px var(--u-button-default-plain-shadow, var(--u-color-default-light-5));
512
+ border-color: var(--u-button-default-plain-border, var(--u-color-default-light-5));
513
+ box-shadow: none;
514
+ }
515
+ .u-button--color-default.is-plain:not(.is-disabled):not(.is-loading):hover {
516
+ color: var(--u-color-default);
517
+ border-color: var(--u-color-default);
518
+ background-color: var(--u-color-default-light-9);
456
519
  }
457
520
  .u-button--color-default.is-plain:active {
458
521
  box-shadow: none;
459
522
  }
460
523
  .u-button--color-default.is-plain.is-disabled {
461
524
  color: var(--u-color-default-light-5);
525
+ border-color: var(--u-color-default-light-8);
462
526
  }
463
527
  .u-button.is-circle {
464
528
  border-radius: 50%;
@@ -477,8 +541,8 @@
477
541
  border-radius: 0;
478
542
  }
479
543
  .u-button-group .u-button:first-child {
480
- border-radius: var(--u-radius-default) 0 0 var(--u-radius-default);
544
+ border-radius: 9999px 0 0 9999px;
481
545
  }
482
546
  .u-button-group .u-button:last-child {
483
- border-radius: 0 var(--u-radius-default) var(--u-radius-default) 0;
547
+ border-radius: 0 9999px 9999px 0;
484
548
  }
package/dist/components/card/style2.css CHANGED
@@ -25,14 +25,12 @@
25
25
  }
26
26
  .u-card.is-integrate {
27
27
  box-shadow: none;
28
+ --u-card-header-bg: transparent;
29
+ --u-card-action-bg: transparent;
28
30
  }
29
31
  .u-card.is-integrate > .u-card__header {
30
- border-bottom: none;
31
32
  padding-bottom: 0;
32
33
  }
33
- .u-card.is-integrate > .u-card__action {
34
- border-top: none;
35
- }
36
34
  .u-card--small {
37
35
  font-size: var(--u-font-size-main-small);
38
36
  }
@@ -82,7 +80,7 @@
82
80
  font-weight: bold;
83
81
  }
84
82
  .u-card__header {
85
- border-bottom: var(--u-border);
83
+ background-color: var(--u-header-bg-transparent);
86
84
  color: var(--u-text-color-title);
87
85
  }
88
86
  .u-card__cover {
@@ -101,7 +99,7 @@
101
99
  transform: translateY(-50%);
102
100
  }
103
101
  .u-card__action {
104
- border-top: var(--u-border);
102
+ background-color: var(--u-action-bg-transparent);
105
103
  }
106
104
  .u-card__action .u-button + .u-button {
107
105
  margin-left: var(--u-gap-default);
package/dist/components/cascade/cascade.vue.d.ts CHANGED
@@ -12,16 +12,16 @@ declare const __VLS_export: _$vue.DefineComponent<CascadeProps, {}, {}, {}, {},
12
12
  onChange?: ((...args: [value?: string | undefined, label?: string | undefined, item?: Record<string, any> | undefined] | [value: string[], label: string[], data: Record<string, any>[]]) => any) | undefined;
13
13
  }>, {
14
14
  disabled: boolean;
15
- data: Record<string, any>[];
16
15
  readonly: boolean;
17
16
  labelKey: string;
18
17
  valueKey: string;
19
18
  childrenKey: string;
19
+ data: Record<string, any>[];
20
20
  placeholder: string;
21
21
  clearable: boolean;
22
22
  filterable: boolean;
23
- separator: string;
24
23
  visibilityLimit: number;
24
+ separator: string;
25
25
  }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
26
26
  declare const _default: typeof __VLS_export;
27
27
  //#endregion
package/dist/components/checkbox/checkbox-button.vue.d.ts CHANGED
@@ -21,8 +21,8 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
21
21
  onChange?: ((checked: boolean) => any) | undefined;
22
22
  }>, {
23
23
  disabled: boolean;
24
- type: _$_veltra_utils0.ColorType;
25
24
  readonly: boolean;
25
+ type: _$_veltra_utils0.ColorType;
26
26
  round: boolean;
27
27
  }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
28
28
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
package/dist/components/collapse/collapse-item.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _sfc_main$1 from "../icon/icon.js";
2
2
  import { CollapseDIKey } from "./di.js";
3
- import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, watch, withCtx, withKeys, withModifiers } from "vue";
3
+ import { computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, watch, withCtx, withKeys, withModifiers } from "vue";
4
4
  import { bem } from "@veltra/utils";
5
5
  import { ArrowRight } from "@veltra/icons/normal";
6
6
  //#region src/components/collapse/collapse-item.vue
@@ -17,18 +17,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
17
17
  props: {
18
18
  value: {},
19
19
  title: {},
20
- disabled: { type: Boolean },
21
- hideIcon: { type: Boolean }
20
+ disabled: { type: Boolean }
22
21
  },
23
22
  setup(__props) {
24
23
  const props = __props;
25
24
  const context = inject(CollapseDIKey);
26
25
  const cls = context?.cls ?? bem("collapse");
27
26
  const isActive = computed(() => !!context?.activeValues.value.includes(props.value));
28
- const iconPosition = computed(() => context?.iconPosition.value ?? "right");
29
27
  const iconComponent = computed(() => context?.expandIcon.value ?? ArrowRight);
30
- const showLeftIcon = computed(() => !props.hideIcon && iconPosition.value === "left");
31
- const showRightIcon = computed(() => !props.hideIcon && iconPosition.value === "right");
32
28
  const classList = computed(() => [
33
29
  cls.e("item"),
34
30
  bem.is("active", isActive.value),
@@ -46,6 +42,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
46
42
  const wrapperEl = ref();
47
43
  const { expandTransition } = context;
48
44
  onMounted(() => {
45
+ context?.register(props.value);
49
46
  if (!wrapperEl.value) return;
50
47
  expandTransition.setExpanded(wrapperEl.value, isActive.value);
51
48
  });
@@ -54,6 +51,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
54
51
  active ? expandTransition.expand(wrapperEl.value) : expandTransition.collapse(wrapperEl.value);
55
52
  });
56
53
  onBeforeUnmount(() => {
54
+ context?.unregister(props.value);
57
55
  if (!wrapperEl.value) return;
58
56
  expandTransition.cancel(wrapperEl.value);
59
57
  });
@@ -66,23 +64,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
66
64
  tabindex: __props.disabled ? -1 : 0,
67
65
  onClick: handleClick,
68
66
  onKeydown: [withKeys(withModifiers(handleClick, ["prevent"]), ["enter"]), withKeys(withModifiers(handleClick, ["prevent"]), ["space"])]
69
- }, [
70
- showLeftIcon.value ? (openBlock(), createElementBlock("span", {
71
- key: 0,
72
- class: normalizeClass(unref(cls).e("icon"))
73
- }, [renderSlot(_ctx.$slots, "icon", { isActive: isActive.value }, () => [createVNode(unref(_sfc_main$1), null, {
74
- default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(iconComponent.value)))]),
75
- _: 1
76
- })])], 2)) : createCommentVNode("v-if", true),
77
- createElementVNode("span", { class: normalizeClass(unref(cls).e("title")) }, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])], 2),
78
- showRightIcon.value ? (openBlock(), createElementBlock("span", {
79
- key: 1,
80
- class: normalizeClass(unref(cls).e("icon"))
81
- }, [renderSlot(_ctx.$slots, "icon", { isActive: isActive.value }, () => [createVNode(unref(_sfc_main$1), null, {
82
- default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(iconComponent.value)))]),
83
- _: 1
84
- })])], 2)) : createCommentVNode("v-if", true)
85
- ], 42, _hoisted_1), createElementVNode("div", {
67
+ }, [createElementVNode("span", { class: normalizeClass(unref(cls).e("title")) }, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])], 2), createElementVNode("span", { class: normalizeClass(unref(cls).e("icon")) }, [renderSlot(_ctx.$slots, "icon", { isActive: isActive.value }, () => [createVNode(unref(_sfc_main$1), null, {
68
+ default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(iconComponent.value)))]),
69
+ _: 1
70
+ })])], 2)], 42, _hoisted_1), createElementVNode("div", {
86
71
  ref_key: "wrapperEl",
87
72
  ref: wrapperEl,
88
73
  class: normalizeClass(unref(cls).e("content-wrapper")),
package/dist/components/collapse/collapse-item.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"collapse-item.js","names":[],"sources":["../../../src/components/collapse/collapse-item.vue"],"sourcesContent":["<template>\n <div :class=\"classList\">\n <div\n :class=\"headerClassList\"\n role=\"button\"\n :aria-expanded=\"isActive\"\n :aria-disabled=\"disabled\"\n :tabindex=\"disabled ? -1 : 0\"\n @click=\"handleClick\"\n @keydown.enter.prevent=\"handleClick\"\n @keydown.space.prevent=\"handleClick\"\n >\n <span v-if=\"showLeftIcon\" :class=\"cls.e('icon')\">\n <slot name=\"icon\" :is-active=\"isActive\">\n <UIcon><component :is=\"iconComponent\" /></UIcon>\n </slot>\n </span>\n\n <span :class=\"cls.e('title')\">\n <slot name=\"title\">{{ title }}</slot>\n </span>\n\n <span v-if=\"showRightIcon\" :class=\"cls.e('icon')\">\n <slot name=\"icon\" :is-active=\"isActive\">\n <UIcon><component :is=\"iconComponent\" /></UIcon>\n </slot>\n </span>\n </div>\n <div ref=\"wrapperEl\" :class=\"cls.e('content-wrapper')\" :aria-hidden=\"!isActive\">\n <div :class=\"cls.e('content')\">\n <slot />\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ArrowRight } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport type { CollapseItemProps } from '../../types'\nimport { UIcon } from '../icon'\nimport { CollapseDIKey } from './di'\n\ndefineOptions({\n name: 'CollapseItem'\n})\n\nconst props = defineProps<CollapseItemProps>()\n\nconst context = inject(CollapseDIKey)!\n\nconst cls = context?.cls ?? bem('collapse')\n\nconst isActive = computed(() => !!context?.activeValues.value.includes(props.value))\n\nconst iconPosition = computed(() => context?.iconPosition.value ?? 'right')\n\nconst iconComponent = computed(() => context?.expandIcon.value ?? ArrowRight)\n\nconst showLeftIcon = computed(() => !props.hideIcon && iconPosition.value === 'left')\nconst showRightIcon = computed(() => !props.hideIcon && iconPosition.value === 'right')\n\nconst classList = computed(() => [\n cls.e('item'),\n bem.is('active', isActive.value),\n bem.is('disabled', props.disabled)\n])\n\nconst headerClassList = computed(() => [\n cls.e('header'),\n bem.is('disabled', props.disabled),\n bem.is('active', isActive.value)\n])\n\nconst handleClick = () => {\n if (props.disabled) return\n context?.toggle(props.value)\n}\n\nconst wrapperEl = ref<HTMLElement>()\n\nconst { expandTransition } = context\n\nonMounted(() => {\n if (!wrapperEl.value) return\n expandTransition.setExpanded(wrapperEl.value, isActive.value)\n})\n\nwatch(isActive, (active) => {\n if (!wrapperEl.value) return\n active ? expandTransition.expand(wrapperEl.value) : expandTransition.collapse(wrapperEl.value)\n})\n\nonBeforeUnmount(() => {\n if (!wrapperEl.value) return\n expandTransition.cancel(wrapperEl.value)\n})\n</script>\n"],"mappings":"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"}
1
+ {"version":3,"file":"collapse-item.js","names":[],"sources":["../../../src/components/collapse/collapse-item.vue"],"sourcesContent":["<template>\n <div :class=\"classList\">\n <div\n :class=\"headerClassList\"\n role=\"button\"\n :aria-expanded=\"isActive\"\n :aria-disabled=\"disabled\"\n :tabindex=\"disabled ? -1 : 0\"\n @click=\"handleClick\"\n @keydown.enter.prevent=\"handleClick\"\n @keydown.space.prevent=\"handleClick\"\n >\n <span :class=\"cls.e('title')\">\n <slot name=\"title\">{{ title }}</slot>\n </span>\n\n <span :class=\"cls.e('icon')\">\n <slot name=\"icon\" :is-active=\"isActive\">\n <UIcon><component :is=\"iconComponent\" /></UIcon>\n </slot>\n </span>\n </div>\n <div ref=\"wrapperEl\" :class=\"cls.e('content-wrapper')\" :aria-hidden=\"!isActive\">\n <div :class=\"cls.e('content')\">\n <slot />\n </div>\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ArrowRight } from '@veltra/icons/normal'\nimport { bem } from '@veltra/utils'\nimport { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport type { CollapseItemProps } from '../../types'\nimport { UIcon } from '../icon'\nimport { CollapseDIKey } from './di'\n\ndefineOptions({\n name: 'CollapseItem'\n})\n\nconst props = defineProps<CollapseItemProps>()\n\nconst context = inject(CollapseDIKey)!\n\nconst cls = context?.cls ?? bem('collapse')\n\nconst isActive = computed(() => !!context?.activeValues.value.includes(props.value))\n\nconst iconComponent = computed(() => context?.expandIcon.value ?? ArrowRight)\n\nconst classList = computed(() => [\n cls.e('item'),\n bem.is('active', isActive.value),\n bem.is('disabled', props.disabled)\n])\n\nconst headerClassList = computed(() => [\n cls.e('header'),\n bem.is('disabled', props.disabled),\n bem.is('active', isActive.value)\n])\n\nconst handleClick = () => {\n if (props.disabled) return\n context?.toggle(props.value)\n}\n\nconst wrapperEl = ref<HTMLElement>()\n\nconst { expandTransition } = context\n\nonMounted(() => {\n context?.register(props.value)\n if (!wrapperEl.value) return\n expandTransition.setExpanded(wrapperEl.value, isActive.value)\n})\n\nwatch(isActive, (active) => {\n if (!wrapperEl.value) return\n active ? expandTransition.expand(wrapperEl.value) : expandTransition.collapse(wrapperEl.value)\n})\n\nonBeforeUnmount(() => {\n context?.unregister(props.value)\n if (!wrapperEl.value) return\n expandTransition.cancel(wrapperEl.value)\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EA2CA,MAAM,QAAQ;EAEd,MAAM,UAAU,OAAO,cAAc;EAErC,MAAM,MAAM,SAAS,OAAO,IAAI,WAAU;EAE1C,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,aAAa,MAAM,SAAS,MAAM,MAAM,CAAA;EAEnF,MAAM,gBAAgB,eAAe,SAAS,WAAW,SAAS,WAAU;EAE5E,MAAM,YAAY,eAAe;GAC/B,IAAI,EAAE,OAAO;GACb,IAAI,GAAG,UAAU,SAAS,MAAM;GAChC,IAAI,GAAG,YAAY,MAAM,SAAQ;GAClC,CAAA;EAED,MAAM,kBAAkB,eAAe;GACrC,IAAI,EAAE,SAAS;GACf,IAAI,GAAG,YAAY,MAAM,SAAS;GAClC,IAAI,GAAG,UAAU,SAAS,MAAK;GAChC,CAAA;EAED,MAAM,oBAAoB;AACxB,OAAI,MAAM,SAAU;AACpB,YAAS,OAAO,MAAM,MAAK;;EAG7B,MAAM,YAAY,KAAiB;EAEnC,MAAM,EAAE,qBAAqB;AAE7B,kBAAgB;AACd,YAAS,SAAS,MAAM,MAAK;AAC7B,OAAI,CAAC,UAAU,MAAO;AACtB,oBAAiB,YAAY,UAAU,OAAO,SAAS,MAAK;IAC7D;AAED,QAAM,WAAW,WAAW;AAC1B,OAAI,CAAC,UAAU,MAAO;AACtB,YAAS,iBAAiB,OAAO,UAAU,MAAM,GAAG,iBAAiB,SAAS,UAAU,MAAK;IAC9F;AAED,wBAAsB;AACpB,YAAS,WAAW,MAAM,MAAK;AAC/B,OAAI,CAAC,UAAU,MAAO;AACtB,oBAAiB,OAAO,UAAU,MAAK;IACxC;;uBAxFC,mBA0BM,OAAA,EA1BA,OAAK,eAAE,UAAA,MAAS,EAAA,EAAA,CACpB,mBAmBM,OAAA;IAlBH,OAAK,eAAE,gBAAA,MAAe;IACvB,MAAK;IACJ,iBAAe,SAAA;IACf,iBAAe,QAAA;IACf,UAAU,QAAA,WAAQ,KAAA;IAClB,SAAO;IACP,WAAO,CAAA,SAAA,cAAgB,aAAW,CAAA,UAAA,CAAA,EAAA,CAAA,QAAA,CAAA,EAAA,SAAA,cACX,aAAW,CAAA,UAAA,CAAA,EAAA,CAAA,QAAA,CAAA,CAAA;OAEnC,mBAEO,QAAA,EAFA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA,EAAA,EAAA,CACjB,WAAqC,KAAA,QAAA,SAAA,EAAA,QAAA,CAAA,gBAAA,gBAAf,QAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAG7B,mBAIO,QAAA,EAJA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,OAAA,CAAA,EAAA,EAAA,CACjB,WAEO,KAAA,QAAA,QAAA,EAFY,UAAW,SAAA,OAAQ,QAE/B,CADL,YAAgD,MAAA,YAAA,EAAA,MAAA;2BAAR,EAAA,WAAA,EAAjC,YAAiC,wBAAjB,cAAA,MAAa,CAAA,EAAA,CAAA;;gCAI1C,mBAIM,OAAA;aAJG;IAAJ,KAAI;IAAa,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,kBAAA,CAAA;IAAsB,eAAW,CAAG,SAAA;OACpE,mBAEM,OAAA,EAFA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,UAAA,CAAA,EAAA,EAAA,CAChB,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA,CAAA,EAAA,IAAA,WAAA,CAAA,EAAA,EAAA"}
package/dist/components/collapse/collapse-item.vue.d.ts CHANGED
@@ -2,19 +2,15 @@ import { CollapseItemProps } from "../../types/collapse.js";
2
2
  import * as _$vue from "vue";
3
3
 
4
4
  //#region src/components/collapse/collapse-item.vue.d.ts
5
- declare var __VLS_1: {
5
+ declare var __VLS_1: {}, __VLS_3: {
6
6
  isActive: boolean;
7
- }, __VLS_14: {}, __VLS_16: {
8
- isActive: boolean;
9
- }, __VLS_29: {};
7
+ }, __VLS_16: {};
10
8
  type __VLS_Slots = {} & {
11
- icon?: (props: typeof __VLS_1) => any;
12
- } & {
13
- title?: (props: typeof __VLS_14) => any;
9
+ title?: (props: typeof __VLS_1) => any;
14
10
  } & {
15
- icon?: (props: typeof __VLS_16) => any;
11
+ icon?: (props: typeof __VLS_3) => any;
16
12
  } & {
17
- default?: (props: typeof __VLS_29) => any;
13
+ default?: (props: typeof __VLS_16) => any;
18
14
  };
19
15
  declare const __VLS_base: _$vue.DefineComponent<CollapseItemProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<CollapseItemProps> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
20
16
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
package/dist/components/collapse/collapse.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { CollapseDIKey } from "./di.js";
2
- import { computed, createElementBlock, defineComponent, normalizeClass, openBlock, provide, renderSlot } from "vue";
2
+ import { computed, createElementBlock, defineComponent, normalizeClass, openBlock, provide, ref, renderSlot } from "vue";
3
3
  import { useFormFallbackProps, useModel as useModel$1 } from "@veltra/compositions";
4
4
  import { ExpandTransition, bem } from "@veltra/utils";
5
5
  //#region src/components/collapse/collapse.vue
@@ -12,29 +12,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
12
12
  type: Boolean,
13
13
  default: false
14
14
  },
15
- bordered: {
15
+ defaultCollapseAll: {
16
16
  type: Boolean,
17
- default: true
17
+ default: false
18
18
  },
19
- iconPosition: { default: "right" },
20
19
  expandIcon: {},
21
20
  size: {}
22
21
  },
23
22
  emits: ["update:modelValue", "change"],
24
- setup(__props, { expose: __expose, emit: __emit }) {
23
+ setup(__props, { emit: __emit }) {
25
24
  const props = __props;
26
25
  const emit = __emit;
27
26
  const cls = bem("collapse");
28
27
  const expandTransition = new ExpandTransition({ transition: "height 0.24s cubic-bezier(0.4, 0, 0.2, 1)" });
29
28
  const { size } = useFormFallbackProps([props], { size: "default" });
30
- const iconPosition = computed(() => props.iconPosition ?? "right");
31
29
  const expandIcon = computed(() => props.expandIcon);
32
- const classList = computed(() => [
33
- cls.b,
34
- cls.m(size.value),
35
- cls.m(`icon-${iconPosition.value}`),
36
- bem.is("bordered", props.bordered)
37
- ]);
30
+ const classList = computed(() => [cls.b, cls.m(size.value)]);
38
31
  const modelValue = useModel$1({
39
32
  props,
40
33
  emit,
@@ -60,47 +53,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
60
53
  else values.push(value);
61
54
  update(values);
62
55
  };
63
- const expand = (value) => {
64
- if (activeValues.value.includes(value)) return;
65
- if (props.accordion) {
66
- update(value);
67
- return;
56
+ const registeredValues = ref([]);
57
+ const hasInitialValue = modelValue.value !== void 0 && modelValue.value !== null && (!Array.isArray(modelValue.value) || modelValue.value.length > 0);
58
+ const register = (value) => {
59
+ if (!registeredValues.value.includes(value)) {
60
+ registeredValues.value.push(value);
61
+ if (!props.defaultCollapseAll && !hasInitialValue) if (props.accordion) {
62
+ if (registeredValues.value.length === 1) update(value);
63
+ } else {
64
+ const current = Array.isArray(modelValue.value) ? modelValue.value : modelValue.value !== void 0 && modelValue.value !== null ? [modelValue.value] : [];
65
+ if (!current.includes(value)) update([...current, value]);
66
+ }
68
67
  }
69
- update([...activeValues.value, value]);
70
68
  };
71
- const collapse = (value) => {
72
- if (!activeValues.value.includes(value)) return;
73
- if (props.accordion) {
74
- update([]);
75
- return;
76
- }
77
- update(activeValues.value.filter((v) => v !== value));
78
- };
79
- const expandAll = (values) => {
80
- if (props.accordion) {
81
- update(values[0] ?? []);
82
- return;
83
- }
84
- update([...values]);
85
- };
86
- const collapseAll = () => {
87
- update([]);
69
+ const unregister = (value) => {
70
+ const idx = registeredValues.value.indexOf(value);
71
+ if (idx > -1) registeredValues.value.splice(idx, 1);
88
72
  };
89
73
  provide(CollapseDIKey, {
90
74
  cls,
91
75
  size,
92
- iconPosition,
93
76
  expandIcon,
94
77
  activeValues,
95
78
  toggle,
96
- expandTransition
97
- });
98
- __expose({
99
- toggle,
100
- expand,
101
- collapse,
102
- expandAll,
103
- collapseAll
79
+ expandTransition,
80
+ register,
81
+ unregister
104
82
  });
105
83
  return (_ctx, _cache) => {
106
84
  return openBlock(), createElementBlock("div", {
package/dist/components/collapse/collapse.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"collapse.js","names":[],"sources":["../../../src/components/collapse/collapse.vue"],"sourcesContent":["<template>\n <div :class=\"classList\" role=\"region\">\n <slot />\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps, useModel } from '@veltra/compositions'\nimport { bem, ExpandTransition } from '@veltra/utils'\nimport { computed, provide } from 'vue'\n\nimport type {\n CollapseEmits,\n CollapseModelValue,\n CollapseProps,\n CollapseValue,\n _CollapseExposed\n} from '../../types'\nimport { CollapseDIKey } from './di'\n\ndefineOptions({\n name: 'Collapse'\n})\n\nconst props = withDefaults(defineProps<CollapseProps>(), {\n accordion: false,\n bordered: true,\n iconPosition: 'right'\n})\nconst emit = defineEmits<CollapseEmits>()\n\nconst cls = bem('collapse')\n\nconst expandTransition = new ExpandTransition({\n transition: 'height 0.24s cubic-bezier(0.4, 0, 0.2, 1)'\n})\n\nconst { size } = useFormFallbackProps([props], { size: 'default' })\n\nconst iconPosition = computed(() => props.iconPosition ?? 'right')\nconst expandIcon = computed(() => props.expandIcon)\n\nconst classList = computed(() => [\n cls.b,\n cls.m(size.value),\n cls.m(`icon-${iconPosition.value}`),\n bem.is('bordered', props.bordered)\n])\n\nconst modelValue = useModel<CollapseProps, 'modelValue'>({\n props,\n emit,\n propName: 'modelValue'\n})\n\nconst activeValues = computed<CollapseValue[]>(() => {\n const v = modelValue.value\n if (v === undefined || v === null) return []\n return Array.isArray(v) ? v : [v]\n})\n\nconst update = (next: CollapseModelValue) => {\n modelValue.value = next\n emit('change', next)\n}\n\nconst toggle = (value: CollapseValue) => {\n if (props.accordion) {\n update(activeValues.value[0] === value ? [] : value)\n return\n }\n\n const values = activeValues.value.slice()\n const index = values.indexOf(value)\n if (index > -1) values.splice(index, 1)\n else values.push(value)\n update(values)\n}\n\nconst expand = (value: CollapseValue) => {\n if (activeValues.value.includes(value)) return\n if (props.accordion) {\n update(value)\n return\n }\n update([...activeValues.value, value])\n}\n\nconst collapse = (value: CollapseValue) => {\n if (!activeValues.value.includes(value)) return\n if (props.accordion) {\n update([])\n return\n }\n update(activeValues.value.filter((v) => v !== value))\n}\n\nconst expandAll = (values: CollapseValue[]) => {\n if (props.accordion) {\n update(values[0] ?? [])\n return\n }\n update([...values])\n}\n\nconst collapseAll = () => {\n update([])\n}\n\nprovide(CollapseDIKey, {\n cls,\n size,\n iconPosition,\n expandIcon,\n activeValues,\n toggle,\n expandTransition\n})\n\ndefineExpose<_CollapseExposed>({\n toggle,\n expand,\n collapse,\n expandAll,\n collapseAll\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;EAwBA,MAAM,QAAQ;EAKd,MAAM,OAAO;EAEb,MAAM,MAAM,IAAI,WAAU;EAE1B,MAAM,mBAAmB,IAAI,iBAAiB,EAC5C,YAAY,6CACb,CAAA;EAED,MAAM,EAAE,SAAS,qBAAqB,CAAC,MAAM,EAAE,EAAE,MAAM,WAAW,CAAA;EAElE,MAAM,eAAe,eAAe,MAAM,gBAAgB,QAAO;EACjE,MAAM,aAAa,eAAe,MAAM,WAAU;EAElD,MAAM,YAAY,eAAe;GAC/B,IAAI;GACJ,IAAI,EAAE,KAAK,MAAM;GACjB,IAAI,EAAE,QAAQ,aAAa,QAAQ;GACnC,IAAI,GAAG,YAAY,MAAM,SAAQ;GAClC,CAAA;EAED,MAAM,aAAa,WAAsC;GACvD;GACA;GACA,UAAU;GACX,CAAA;EAED,MAAM,eAAe,eAAgC;GACnD,MAAM,IAAI,WAAW;AACrB,OAAI,MAAM,KAAA,KAAa,MAAM,KAAM,QAAO,EAAC;AAC3C,UAAO,MAAM,QAAQ,EAAE,GAAG,IAAI,CAAC,EAAC;IACjC;EAED,MAAM,UAAU,SAA6B;AAC3C,cAAW,QAAQ;AACnB,QAAK,UAAU,KAAI;;EAGrB,MAAM,UAAU,UAAyB;AACvC,OAAI,MAAM,WAAW;AACnB,WAAO,aAAa,MAAM,OAAO,QAAQ,EAAE,GAAG,MAAK;AACnD;;GAGF,MAAM,SAAS,aAAa,MAAM,OAAM;GACxC,MAAM,QAAQ,OAAO,QAAQ,MAAK;AAClC,OAAI,QAAQ,GAAI,QAAO,OAAO,OAAO,EAAC;OACjC,QAAO,KAAK,MAAK;AACtB,UAAO,OAAM;;EAGf,MAAM,UAAU,UAAyB;AACvC,OAAI,aAAa,MAAM,SAAS,MAAM,CAAE;AACxC,OAAI,MAAM,WAAW;AACnB,WAAO,MAAK;AACZ;;AAEF,UAAO,CAAC,GAAG,aAAa,OAAO,MAAM,CAAA;;EAGvC,MAAM,YAAY,UAAyB;AACzC,OAAI,CAAC,aAAa,MAAM,SAAS,MAAM,CAAE;AACzC,OAAI,MAAM,WAAW;AACnB,WAAO,EAAE,CAAA;AACT;;AAEF,UAAO,aAAa,MAAM,QAAQ,MAAM,MAAM,MAAM,CAAA;;EAGtD,MAAM,aAAa,WAA4B;AAC7C,OAAI,MAAM,WAAW;AACnB,WAAO,OAAO,MAAM,EAAE,CAAA;AACtB;;AAEF,UAAO,CAAC,GAAG,OAAO,CAAA;;EAGpB,MAAM,oBAAoB;AACxB,UAAO,EAAE,CAAA;;AAGX,UAAQ,eAAe;GACrB;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAAA;AAED,WAA+B;GAC7B;GACA;GACA;GACA;GACA;GACD,CAAA;;uBA5HC,mBAEM,OAAA;IAFA,OAAK,eAAE,UAAA,MAAS;IAAE,MAAK;OAC3B,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}
1
+ {"version":3,"file":"collapse.js","names":[],"sources":["../../../src/components/collapse/collapse.vue"],"sourcesContent":["<template>\n <div :class=\"classList\" role=\"region\">\n <slot />\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useFormFallbackProps, useModel } from '@veltra/compositions'\nimport { bem, ExpandTransition } from '@veltra/utils'\nimport { computed, provide, ref } from 'vue'\n\nimport type { CollapseEmits, CollapseModelValue, CollapseProps, CollapseValue } from '../../types'\nimport { CollapseDIKey } from './di'\n\ndefineOptions({\n name: 'Collapse'\n})\n\nconst props = withDefaults(defineProps<CollapseProps>(), {\n accordion: false,\n defaultCollapseAll: false\n})\nconst emit = defineEmits<CollapseEmits>()\n\nconst cls = bem('collapse')\n\nconst expandTransition = new ExpandTransition({\n transition: 'height 0.24s cubic-bezier(0.4, 0, 0.2, 1)'\n})\n\nconst { size } = useFormFallbackProps([props], { size: 'default' })\n\nconst expandIcon = computed(() => props.expandIcon)\n\nconst classList = computed(() => [cls.b, cls.m(size.value)])\n\nconst modelValue = useModel<CollapseProps, 'modelValue'>({\n props,\n emit,\n propName: 'modelValue'\n})\n\nconst activeValues = computed<CollapseValue[]>(() => {\n const v = modelValue.value\n if (v === undefined || v === null) return []\n return Array.isArray(v) ? v : [v]\n})\n\nconst update = (next: CollapseModelValue) => {\n modelValue.value = next\n emit('change', next)\n}\n\nconst toggle = (value: CollapseValue) => {\n if (props.accordion) {\n update(activeValues.value[0] === value ? [] : value)\n return\n }\n\n const values = activeValues.value.slice()\n const index = values.indexOf(value)\n if (index > -1) values.splice(index, 1)\n else values.push(value)\n update(values)\n}\n\n// 收集子组件已注册的 values\nconst registeredValues = ref<CollapseValue[]>([])\n\n// 初始捕获 modelValue 是否具有有效初值\nconst hasInitialValue =\n modelValue.value !== undefined &&\n modelValue.value !== null &&\n (!Array.isArray(modelValue.value) || modelValue.value.length > 0)\n\nconst register = (value: CollapseValue) => {\n if (!registeredValues.value.includes(value)) {\n registeredValues.value.push(value)\n\n // 若默认展开全部（defaultCollapseAll 为 false）且外部未指定初始值，则自动展开该子项\n if (!props.defaultCollapseAll && !hasInitialValue) {\n if (props.accordion) {\n if (registeredValues.value.length === 1) {\n update(value)\n }\n } else {\n const current = Array.isArray(modelValue.value)\n ? modelValue.value\n : modelValue.value !== undefined && modelValue.value !== null\n ? [modelValue.value]\n : []\n if (!current.includes(value)) {\n update([...current, value])\n }\n }\n }\n }\n}\n\nconst unregister = (value: CollapseValue) => {\n const idx = registeredValues.value.indexOf(value)\n if (idx > -1) {\n registeredValues.value.splice(idx, 1)\n }\n}\n\nprovide(CollapseDIKey, {\n cls,\n size,\n expandIcon,\n activeValues,\n toggle,\n expandTransition,\n register,\n unregister\n})\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EAkBA,MAAM,QAAQ;EAId,MAAM,OAAO;EAEb,MAAM,MAAM,IAAI,WAAU;EAE1B,MAAM,mBAAmB,IAAI,iBAAiB,EAC5C,YAAY,6CACb,CAAA;EAED,MAAM,EAAE,SAAS,qBAAqB,CAAC,MAAM,EAAE,EAAE,MAAM,WAAW,CAAA;EAElE,MAAM,aAAa,eAAe,MAAM,WAAU;EAElD,MAAM,YAAY,eAAe,CAAC,IAAI,GAAG,IAAI,EAAE,KAAK,MAAM,CAAC,CAAA;EAE3D,MAAM,aAAa,WAAsC;GACvD;GACA;GACA,UAAU;GACX,CAAA;EAED,MAAM,eAAe,eAAgC;GACnD,MAAM,IAAI,WAAW;AACrB,OAAI,MAAM,KAAA,KAAa,MAAM,KAAM,QAAO,EAAC;AAC3C,UAAO,MAAM,QAAQ,EAAE,GAAG,IAAI,CAAC,EAAC;IACjC;EAED,MAAM,UAAU,SAA6B;AAC3C,cAAW,QAAQ;AACnB,QAAK,UAAU,KAAI;;EAGrB,MAAM,UAAU,UAAyB;AACvC,OAAI,MAAM,WAAW;AACnB,WAAO,aAAa,MAAM,OAAO,QAAQ,EAAE,GAAG,MAAK;AACnD;;GAGF,MAAM,SAAS,aAAa,MAAM,OAAM;GACxC,MAAM,QAAQ,OAAO,QAAQ,MAAK;AAClC,OAAI,QAAQ,GAAI,QAAO,OAAO,OAAO,EAAC;OACjC,QAAO,KAAK,MAAK;AACtB,UAAO,OAAM;;EAIf,MAAM,mBAAmB,IAAqB,EAAE,CAAA;EAGhD,MAAM,kBACJ,WAAW,UAAU,KAAA,KACrB,WAAW,UAAU,SACpB,CAAC,MAAM,QAAQ,WAAW,MAAM,IAAI,WAAW,MAAM,SAAS;EAEjE,MAAM,YAAY,UAAyB;AACzC,OAAI,CAAC,iBAAiB,MAAM,SAAS,MAAM,EAAE;AAC3C,qBAAiB,MAAM,KAAK,MAAK;AAGjC,QAAI,CAAC,MAAM,sBAAsB,CAAC,gBAChC,KAAI,MAAM;SACJ,iBAAiB,MAAM,WAAW,EACpC,QAAO,MAAK;WAET;KACL,MAAM,UAAU,MAAM,QAAQ,WAAW,MAAK,GAC1C,WAAW,QACX,WAAW,UAAU,KAAA,KAAa,WAAW,UAAU,OACrD,CAAC,WAAW,MAAK,GACjB,EAAC;AACP,SAAI,CAAC,QAAQ,SAAS,MAAM,CAC1B,QAAO,CAAC,GAAG,SAAS,MAAM,CAAA;;;;EAOpC,MAAM,cAAc,UAAyB;GAC3C,MAAM,MAAM,iBAAiB,MAAM,QAAQ,MAAK;AAChD,OAAI,MAAM,GACR,kBAAiB,MAAM,OAAO,KAAK,EAAC;;AAIxC,UAAQ,eAAe;GACrB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAAA;;uBAlHC,mBAEM,OAAA;IAFA,OAAK,eAAE,UAAA,MAAS;IAAE,MAAK;OAC3B,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}
package/dist/components/collapse/collapse.vue.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { CollapseIconPosition, CollapseModelValue, CollapseProps, _CollapseExposed } from "../../types/collapse.js";
1
+ import { CollapseModelValue, CollapseProps } from "../../types/collapse.js";
2
2
  import * as _$vue from "vue";
3
3
 
4
4
  //#region src/components/collapse/collapse.vue.d.ts
@@ -6,16 +6,15 @@ declare var __VLS_1: {};
6
6
  type __VLS_Slots = {} & {
7
7
  default?: (props: typeof __VLS_1) => any;
8
8
  };
9
- declare const __VLS_base: _$vue.DefineComponent<CollapseProps, _CollapseExposed, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {} & {
9
+ declare const __VLS_base: _$vue.DefineComponent<CollapseProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {} & {
10
10
  "update:modelValue": (value: CollapseModelValue) => any;
11
11
  change: (value: CollapseModelValue) => any;
12
12
  }, string, _$vue.PublicProps, Readonly<CollapseProps> & Readonly<{
13
13
  "onUpdate:modelValue"?: ((value: CollapseModelValue) => any) | undefined;
14
14
  onChange?: ((value: CollapseModelValue) => any) | undefined;
15
15
  }>, {
16
- iconPosition: CollapseIconPosition;
17
16
  accordion: boolean;
18
- bordered: boolean;
17
+ defaultCollapseAll: boolean;
19
18
  }, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
20
19
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
21
20
  declare const _default: typeof __VLS_export;