|
4 | 4 | <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between"> |
5 | 5 | <div class="flex items-center gap-2 text-sm"> |
6 | 6 | <h3 class="text-sm font-semibold text-gray-90">{{ title }}</h3> |
7 | | - <span class="px-2 py-1 rounded-md bg-gray-15 text-gray-50"> {{ t("{0} selected", [selectedTotal]) }} </span> |
| 7 | + <span class="px-2 py-1 rounded-md bg-gray-15 text-gray-50"> {{ $t("Selected") }}: {{ selectedTotal }} </span> |
8 | 8 | </div> |
9 | 9 |
|
10 | 10 | <div class="flex flex-wrap gap-2"> |
@@ -389,8 +389,25 @@ export default { |
389 | 389 | ? this.group.items |
390 | 390 | : [] |
391 | 391 | }, |
392 | | - total() { |
393 | | - return this.nodes.length |
| 392 | +
|
| 393 | + totalLeafCount() { |
| 394 | + const walk = (list) => |
| 395 | + list.reduce((acc, n) => { |
| 396 | + const kids = Array.isArray(n.children) ? n.children : [] |
| 397 | + const mine = this.isNodeCheckable(n) ? 1 : 0 |
| 398 | + return acc + mine + walk(kids) |
| 399 | + }, 0) |
| 400 | + return walk(this.nodes) |
| 401 | + }, |
| 402 | +
|
| 403 | + selectedLeafCount() { |
| 404 | + const walk = (list) => |
| 405 | + list.reduce((acc, n) => { |
| 406 | + const kids = Array.isArray(n.children) ? n.children : [] |
| 407 | + const mine = this.isNodeCheckable(n) && this.isChecked(n) ? 1 : 0 |
| 408 | + return acc + mine + walk(kids) |
| 409 | + }, 0) |
| 410 | + return walk(this.nodes) |
394 | 411 | }, |
395 | 412 | }, |
396 | 413 | watch: { |
@@ -420,7 +437,7 @@ export default { |
420 | 437 | <i :class="open ? 'mdi mdi-chevron-down' : 'mdi mdi-chevron-right'"></i> |
421 | 438 | </button> |
422 | 439 | <span class="font-medium text-gray-90">{{ group.title || group.type }}</span> |
423 | | - <span class="text-xs text-gray-50">· {{ countSelected(group) }} / {{ total }}</span> |
| 440 | + <span class="text-xs text-gray-50">· {{ selectedLeafCount }} / {{ totalLeafCount }}</span> |
424 | 441 | </div> |
425 | 442 | <div class="flex gap-2"> |
426 | 443 | <button class="btn-secondary" @click="selectAll"><i class="mdi mdi-check-all"></i> Select group</button> |
|
0 commit comments