@brightspace-ui/core 3.213.0 → 3.214.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.
- package/components/table/README.md +72 -25
- package/lang/vi.js +29 -32
- package/package.json +1 -1
|
@@ -366,19 +366,26 @@ When a single column is responsible for sorting in multiple facets (e.g., first
|
|
|
366
366
|
|
|
367
367
|
## Selection
|
|
368
368
|
|
|
369
|
-
|
|
369
|
+
Table rows can support both single- and multi-select by leveraging [Selection](../../components/selection/) components.
|
|
370
|
+
|
|
371
|
+
To enable selection, add `d2l-selection-input` components in the selection column, and a `d2l-selection-select-all` component in the the column's header cell. Apply the `selected` attribute to `<tr>` row elements which are actively selected.
|
|
372
|
+
|
|
373
|
+
**Important:** Single selection tables won't need the Select All component in the header, so be sure to add an `aria-label` for screen reader users.
|
|
370
374
|
|
|
371
375
|
<!-- docs: demo -->
|
|
372
376
|
```html
|
|
373
377
|
<script type="module">
|
|
378
|
+
import '@brightspace-ui/core/components/selection/selection-input.js';
|
|
379
|
+
import '@brightspace-ui/core/components/selection/selection-select-all.js';
|
|
374
380
|
import { html, LitElement } from 'lit';
|
|
375
381
|
import { tableStyles } from '@brightspace-ui/core/components/table/table-wrapper.js';
|
|
376
382
|
|
|
377
|
-
class
|
|
383
|
+
class SampleTableWithSelectionInputs extends LitElement {
|
|
378
384
|
|
|
379
385
|
static get properties() {
|
|
380
386
|
return {
|
|
381
|
-
|
|
387
|
+
selectionSingle: { type: Boolean, attribute: 'selection-single' },
|
|
388
|
+
_data: { state: true }
|
|
382
389
|
}
|
|
383
390
|
}
|
|
384
391
|
|
|
@@ -388,45 +395,83 @@ If your table supports row selection, apply the `selected` attribute to `<tr>` r
|
|
|
388
395
|
|
|
389
396
|
constructor() {
|
|
390
397
|
super();
|
|
391
|
-
this.
|
|
398
|
+
this.selectionSingle = false;
|
|
399
|
+
this._data = [{ name: 'John Smith', checked: true }, { name: 'Emily Jones', checked: false }];
|
|
392
400
|
}
|
|
393
401
|
|
|
394
402
|
render() {
|
|
395
403
|
return html`
|
|
396
|
-
<d2l-table-wrapper>
|
|
404
|
+
<d2l-table-wrapper ?selection-single="${this.selectionSingle}">
|
|
397
405
|
<table class="d2l-table">
|
|
398
406
|
<thead>
|
|
399
407
|
<tr>
|
|
400
|
-
|
|
401
|
-
<th>
|
|
408
|
+
${!this.selectionSingle ? html`<th><d2l-selection-select-all></d2l-selection-select-all></th>` : html`<th aria-label="Selection column"></th>`}
|
|
409
|
+
<th>Learner</th>
|
|
402
410
|
</tr>
|
|
403
411
|
</thead>
|
|
404
412
|
<tbody>
|
|
405
|
-
|
|
406
|
-
<
|
|
407
|
-
|
|
408
|
-
|
|
413
|
+
${this._data.map((rowData, i) => html`
|
|
414
|
+
<tr ?selected="${rowData.checked}">
|
|
415
|
+
<td>
|
|
416
|
+
<d2l-selection-input key="${i}" label="${rowData.name}" ?selected="${rowData.checked}" @d2l-selection-change="${this._selectRow}"></d2l-selection-input>
|
|
417
|
+
</td>
|
|
418
|
+
<td>${rowData.name}</td>
|
|
419
|
+
</tr>
|
|
420
|
+
`)}
|
|
409
421
|
</tbody>
|
|
410
422
|
</table>
|
|
411
423
|
</d2l-table-wrapper>
|
|
412
424
|
`;
|
|
413
425
|
}
|
|
414
426
|
|
|
415
|
-
_selectRow() {
|
|
416
|
-
|
|
427
|
+
_selectRow(e) {
|
|
428
|
+
const key = e.target.key;
|
|
429
|
+
this._data[key].checked = e.target.selected;
|
|
430
|
+
this.requestUpdate();
|
|
417
431
|
}
|
|
418
432
|
|
|
419
433
|
}
|
|
420
|
-
customElements.define('d2l-
|
|
434
|
+
customElements.define('d2l-sample-table-with-selection-inputs', SampleTableWithSelectionInputs);
|
|
421
435
|
</script>
|
|
422
|
-
<d2l-
|
|
436
|
+
<d2l-sample-table-with-selection-inputs></d2l-sample-table-with-selection-inputs>
|
|
437
|
+
<d2l-sample-table-with-selection-inputs selection-single></d2l-sample-table-with-selection-inputs>
|
|
423
438
|
```
|
|
424
439
|
|
|
425
440
|
```html
|
|
426
|
-
<
|
|
427
|
-
<
|
|
428
|
-
|
|
429
|
-
|
|
441
|
+
<d2l-table-wrapper>
|
|
442
|
+
<table class="d2l-table">
|
|
443
|
+
<thead>
|
|
444
|
+
<tr>
|
|
445
|
+
<th><d2l-selection-select-all></d2l-selection-select-all></th>
|
|
446
|
+
<th>Learner</th>
|
|
447
|
+
</tr>
|
|
448
|
+
</thead>
|
|
449
|
+
<tbody>
|
|
450
|
+
<tr selected>
|
|
451
|
+
<td><d2l-selection-input key="1" label="John Smith" selected></d2l-selection-input></td>
|
|
452
|
+
<td>John Smith</td>
|
|
453
|
+
</tr>
|
|
454
|
+
<tr>
|
|
455
|
+
<td><d2l-selection-input key="2" label="Emily Jones"></d2l-selection-input></td>
|
|
456
|
+
<td>Emily Jones</td>
|
|
457
|
+
</tr>
|
|
458
|
+
</tbody>
|
|
459
|
+
</table>
|
|
460
|
+
</d2l-table-wrapper>
|
|
461
|
+
```
|
|
462
|
+
|
|
463
|
+
```html
|
|
464
|
+
<d2l-table-wrapper selection-single>
|
|
465
|
+
<table class="d2l-table">
|
|
466
|
+
<thead>
|
|
467
|
+
<tr>
|
|
468
|
+
<th aria-label="Selection column"></th>
|
|
469
|
+
<th>Learner</th>
|
|
470
|
+
</tr>
|
|
471
|
+
</thead>
|
|
472
|
+
...
|
|
473
|
+
</table>
|
|
474
|
+
</d2l-table-wrapper>
|
|
430
475
|
```
|
|
431
476
|
|
|
432
477
|
## Pageable Tables
|
|
@@ -462,8 +507,8 @@ The `d2l-table-controls` component can be placed in the `d2l-table-wrapper`'s `c
|
|
|
462
507
|
constructor() {
|
|
463
508
|
super();
|
|
464
509
|
this._data = {
|
|
465
|
-
a: { checked:
|
|
466
|
-
b: { checked: false },
|
|
510
|
+
a: { checked: false, notes: 'Scroll down to see sticky header behaviour.' },
|
|
511
|
+
b: { checked: false, notes: 'Reduce the width to see the control actions chomp.' },
|
|
467
512
|
};
|
|
468
513
|
}
|
|
469
514
|
|
|
@@ -471,23 +516,25 @@ The `d2l-table-controls` component can be placed in the `d2l-table-wrapper`'s `c
|
|
|
471
516
|
return html`
|
|
472
517
|
<d2l-table-wrapper>
|
|
473
518
|
<d2l-table-controls slot="controls">
|
|
519
|
+
<d2l-selection-action icon="tier1:edit" text="Edit" requires-selection></d2l-selection-action>
|
|
474
520
|
<d2l-selection-action icon="tier1:delete" text="Delete" requires-selection></d2l-selection-action>
|
|
475
521
|
<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
|
|
522
|
+
<d2l-selection-action icon="tier1:help" text="Help"></d2l-selection-action>
|
|
476
523
|
</d2l-table-controls>
|
|
477
524
|
<table class="d2l-table">
|
|
478
525
|
<thead>
|
|
479
526
|
<tr>
|
|
480
|
-
<th><d2l-selection-select-all></d2l-selection-select-all></th>
|
|
481
|
-
<th>
|
|
527
|
+
<th style="width: 1px;"><d2l-selection-select-all></d2l-selection-select-all></th>
|
|
528
|
+
<th>Notes</th>
|
|
482
529
|
</tr>
|
|
483
530
|
</thead>
|
|
484
531
|
<tbody>
|
|
485
532
|
${Object.keys(this._data).map((key, i) => html`
|
|
486
|
-
<tr>
|
|
533
|
+
<tr ?selected="${this._data[key].checked}">
|
|
487
534
|
<td>
|
|
488
535
|
<d2l-selection-input key="${key}" label="${key}" ?selected="${this._data[key].checked}" @d2l-selection-change="${this._selectRow}"></d2l-selection-input>
|
|
489
536
|
</td>
|
|
490
|
-
<td
|
|
537
|
+
<td>${this._data[key].notes}</td>
|
|
491
538
|
</tr>
|
|
492
539
|
`)}
|
|
493
540
|
</tbody>
|
package/lang/vi.js
CHANGED
|
@@ -3,7 +3,7 @@ export default {
|
|
|
3
3
|
"components.breadcrumbs.breadcrumb": "Đường dẫn",
|
|
4
4
|
"components.button-add.addItem": "Thêm mục",
|
|
5
5
|
"components.button-copy.copied": "Đã sao chép!",
|
|
6
|
-
"components.button-copy.error": "Sao chép không thành công. Hãy thử lại
|
|
6
|
+
"components.button-copy.error": "Sao chép không thành công. Hãy thử lại hoặc thử sao chép thủ công.",
|
|
7
7
|
"components.button-split.otherOptions": "Các lựa chọn khác",
|
|
8
8
|
"components.calendar.hasEvents": "Có các sự kiện.",
|
|
9
9
|
"components.calendar.notSelected": "Không được chọn.",
|
|
@@ -13,7 +13,7 @@ export default {
|
|
|
13
13
|
"components.dialog.close": "Đóng hộp thoại này",
|
|
14
14
|
"components.dialog.critical": "Rất quan trọng!",
|
|
15
15
|
"components.dropdown.close": "Đóng",
|
|
16
|
-
"components.filter.activeFilters": "Các bộ lọc
|
|
16
|
+
"components.filter.activeFilters": "Các bộ lọc hoạt động:",
|
|
17
17
|
"components.filter.additionalContentTooltip": "Sử dụng <b>các phím mũi tên trái/phải</b> để di chuyển trọng tâm bên trong mục danh sách này",
|
|
18
18
|
"components.filter.clear": "Xóa",
|
|
19
19
|
"components.filter.clearAll": "Xóa tất cả",
|
|
@@ -30,10 +30,10 @@ export default {
|
|
|
30
30
|
}`,
|
|
31
31
|
"components.filter.filters": "Bộ lọc",
|
|
32
32
|
"components.filter.loading": "Đang tải các bộ lọc",
|
|
33
|
-
"components.filter.noFilters": "Không có bộ lọc nào
|
|
33
|
+
"components.filter.noFilters": "Không có bộ lọc nào khả dụng",
|
|
34
34
|
"components.filter.searchResults":
|
|
35
35
|
`{number, plural,
|
|
36
|
-
other {{number}
|
|
36
|
+
other {{number} kết quả tìm kiếm}
|
|
37
37
|
}`,
|
|
38
38
|
"components.filter.selectedFirstListLabel": "{headerText}. Các bộ lọc được chọn xuất hiện đầu tiên.",
|
|
39
39
|
"components.filter.singleDimensionDescription": "Lọc theo: {filterName}",
|
|
@@ -44,15 +44,14 @@ export default {
|
|
|
44
44
|
}`,
|
|
45
45
|
"components.filter-dimension-set-date-text-value.textHours":
|
|
46
46
|
`{num, plural,
|
|
47
|
-
=1 {Giờ trước}
|
|
48
47
|
other {{num} giờ trước}
|
|
49
48
|
}`,
|
|
50
|
-
"components.filter-dimension-set-date-text-value.textMonths": "{num} tháng
|
|
49
|
+
"components.filter-dimension-set-date-text-value.textMonths": "{num} tháng trước",
|
|
51
50
|
"components.filter-dimension-set-date-time-range-value.label": "{text}, mở rộng để chọn ngày",
|
|
52
51
|
"components.filter-dimension-set-date-time-range-value.text": "Phạm vi ngày tùy chỉnh",
|
|
53
|
-
"components.filter-dimension-set-date-time-range-value.valueTextRange": "{startValue}
|
|
54
|
-
"components.filter-dimension-set-date-time-range-value.valueTextRangeEndOnly": "Trước
|
|
55
|
-
"components.filter-dimension-set-date-time-range-value.valueTextRangeStartOnly": "Sau
|
|
52
|
+
"components.filter-dimension-set-date-time-range-value.valueTextRange": "{startValue} đến {endValue}",
|
|
53
|
+
"components.filter-dimension-set-date-time-range-value.valueTextRangeEndOnly": "Trước {endValue}",
|
|
54
|
+
"components.filter-dimension-set-date-time-range-value.valueTextRangeStartOnly": "Sau {startValue}",
|
|
56
55
|
"components.form-element.defaultError": "{label} không hợp lệ",
|
|
57
56
|
"components.form-element.defaultFieldLabel": "Trường",
|
|
58
57
|
"components.form-element.input.email.typeMismatch": "Email không hợp lệ",
|
|
@@ -93,13 +92,13 @@ export default {
|
|
|
93
92
|
"components.input-date.errorMinDateOnly": "Ngày phải nằm trong hoặc sau {minDate}",
|
|
94
93
|
"components.input-date.errorOutsideRange": "Ngày phải nằm trong khoảng giữa {minDate} và {maxDate}",
|
|
95
94
|
"components.input-date.now": "Bây giờ",
|
|
96
|
-
"components.input-date.openInstructions": "Sử dụng định dạng ngày {format}. Nhấn phím mũi tên xuống hoặc
|
|
95
|
+
"components.input-date.openInstructions": "Sử dụng định dạng ngày {format}. Nhấn phím mũi tên xuống hoặc phím Enter để truy cập lịch nhỏ.",
|
|
97
96
|
"components.input-date.revert": "{label} được trả về giá trị trước đó.",
|
|
98
97
|
"components.input-date.today": "Hôm nay",
|
|
99
98
|
"components.input-date.useDateFormat": "Sử dụng định dạng ngày {format}.",
|
|
100
99
|
"components.input-date-range.endDate": "Ngày Kết thúc",
|
|
101
100
|
"components.input-date-range.errorBadInput": "{startLabel} phải nằm trước {endLabel}",
|
|
102
|
-
"components.input-date-range.interactive-label": "
|
|
101
|
+
"components.input-date-range.interactive-label": "Phạm vi ngày",
|
|
103
102
|
"components.input-date-range.startDate": "Ngày Bắt đầu",
|
|
104
103
|
"components.input-date-time.date": "Ngày tháng",
|
|
105
104
|
"components.input-date-time.errorMaxDateOnly": "Ngày phải là ngày trước hoặc vào {maxDate}",
|
|
@@ -122,28 +121,28 @@ export default {
|
|
|
122
121
|
"components.input-time-range.errorBadInput": "{startLabel} phải trước {endLabel}",
|
|
123
122
|
"components.input-time-range.startTime": "Thời gian Bắt đầu",
|
|
124
123
|
"components.interactive.instructions": "Nhấn phím Enter để tương tác, Nhấn Escape để thoát",
|
|
125
|
-
"components.link.open-in-new-window": "Mở trong một cửa sổ mới
|
|
124
|
+
"components.link.open-in-new-window": "Mở trong một cửa sổ mới được mở.",
|
|
126
125
|
"components.list.keyboard": "Sử dụng <b>phím mũi tên</b> để di chuyển trọng tâm bên trong danh sách này hoặc <b>page up/down</b> để di chuyển lên hoặc xuống 5",
|
|
127
|
-
"components.list-controls.label": "Các hành động cho danh sách",
|
|
126
|
+
"components.list-controls.label": "Các hành động cho danh sách.",
|
|
128
127
|
"components.list-item.addItem": "Thêm mục",
|
|
129
|
-
"components.list-item-drag-handle.default": "Sắp xếp lại
|
|
128
|
+
"components.list-item-drag-handle.default": "Sắp xếp lại hành động mục cho {name}",
|
|
130
129
|
"components.list-item-drag-handle.keyboard": "Sắp xếp lại mục, vị trí hiện tại là {currentPosition} trong tổng số {size}. Để di chuyển mục này, nhấn phím mũi tên lên hoặc xuống.",
|
|
131
130
|
"components.list-item-drag-handle-tooltip.enter-desc": "Bật chế độ sắp xếp lại bằng bàn phím.",
|
|
132
131
|
"components.list-item-drag-handle-tooltip.enter-key": "Phím Enter.",
|
|
133
132
|
"components.list-item-drag-handle-tooltip.left-right-desc": "Thay đổi cấp độ lồng ghép.",
|
|
134
133
|
"components.list-item-drag-handle-tooltip.left-right-key": "Trái/Phải",
|
|
135
|
-
"components.list-item-drag-handle-tooltip.title": "Các điều khiển
|
|
134
|
+
"components.list-item-drag-handle-tooltip.title": "Các điều khiển bàn phím để sắp xếp lại:",
|
|
136
135
|
"components.list-item-drag-handle-tooltip.up-down-desc": "Di chuyển mục lên hoặc xuống trong danh sách.",
|
|
137
136
|
"components.list-item-drag-handle-tooltip.up-down-key": "Lên/Xuống",
|
|
138
|
-
"components.menu-item-return.return": "Quay lại
|
|
137
|
+
"components.menu-item-return.return": "Quay lại menu trước đó.",
|
|
139
138
|
"components.menu-item-return.returnCurrentlyShowing": "Quay lại tới menu trước. Bạn đang xem {menuTitle}.",
|
|
140
139
|
"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",
|
|
141
140
|
"components.meter-mixin.fraction": "{x}⁄{y}",
|
|
142
141
|
"components.meter-mixin.fractionAria": "{x} trên tổng số {y}",
|
|
143
142
|
"components.meter-mixin.progressIndicator": "Chỉ báo tiến trình",
|
|
144
|
-
"components.more-less.less": "ít
|
|
143
|
+
"components.more-less.less": "ít",
|
|
145
144
|
"components.more-less.more": "thêm",
|
|
146
|
-
"components.object-property-list.item-placeholder-text": "Mục
|
|
145
|
+
"components.object-property-list.item-placeholder-text": "Mục giữ chỗ",
|
|
147
146
|
"components.overflow-group.moreActions": "Thêm các Tác vụ",
|
|
148
147
|
"components.pageable.info":
|
|
149
148
|
`{count, plural,
|
|
@@ -182,21 +181,21 @@ export default {
|
|
|
182
181
|
"components.table-col-sort-button.title":
|
|
183
182
|
`{sourceType, select,
|
|
184
183
|
dates {{direction, select,
|
|
185
|
-
desc {
|
|
186
|
-
other {
|
|
184
|
+
desc {Đã sắp xếp từ mới đến cũ}
|
|
185
|
+
other {Đã sắp xếp từ cũ đến mới}
|
|
187
186
|
}}
|
|
188
187
|
numbers {{direction, select,
|
|
189
|
-
desc {
|
|
190
|
-
other {
|
|
188
|
+
desc {Đã sắp xếp từ cao đến thấp}
|
|
189
|
+
other {Đã sắp xếp từ thấp đến cao}
|
|
191
190
|
}}
|
|
192
191
|
words {{direction, select,
|
|
193
|
-
desc {
|
|
194
|
-
other {
|
|
192
|
+
desc {Đã sắp xếp từ Z đến A}
|
|
193
|
+
other {Đã sắp xếp từ A đến Z}
|
|
195
194
|
}}
|
|
196
195
|
value {Đã sắp xếp {selectedMenuItemText}}
|
|
197
196
|
other {{direction, select,
|
|
198
|
-
desc {
|
|
199
|
-
other {
|
|
197
|
+
desc {Đã sắp xếp giảm dần}
|
|
198
|
+
other {Đã sắp xếp tăng dần}
|
|
200
199
|
}}
|
|
201
200
|
}`,
|
|
202
201
|
"components.table-controls.label": "Các tác vụ cho bảng",
|
|
@@ -205,25 +204,23 @@ export default {
|
|
|
205
204
|
"components.tag-list.clear": "Nhấp, nhấn phím xoá lùi hoặc nhấn phím xoá để xoá mục {value}",
|
|
206
205
|
"components.tag-list.clear-all": "Xóa tất cả",
|
|
207
206
|
"components.tag-list.cleared-all": "Đã xóa tất cả các mục danh sách thẻ",
|
|
208
|
-
"components.tag-list.cleared-item": "
|
|
209
|
-
"components.tag-list.interactive-label": "Danh sách
|
|
207
|
+
"components.tag-list.cleared-item": "Xóa mục danh sách thẻ {value}",
|
|
208
|
+
"components.tag-list.interactive-label": "Danh sách thẻ, {count} mục",
|
|
210
209
|
"components.tag-list.num-hidden": "+ {count} mục nữa",
|
|
211
210
|
"components.tag-list.role-description":
|
|
212
211
|
`{count, plural,
|
|
213
|
-
=0 {Danh sách thẻ với 0 mục}
|
|
214
212
|
other {Danh sách thẻ với {count} mục}
|
|
215
213
|
}`,
|
|
216
214
|
"components.tag-list.show-less": "Ẩn bớt",
|
|
217
215
|
"components.tag-list.show-more-description": "Chọn để hiển thị các mục danh sách thẻ ẩn",
|
|
218
216
|
"components.tag-list-item.role-description": "Thẻ",
|
|
219
|
-
"components.tag-list-item.tooltip-arrow-keys": "
|
|
217
|
+
"components.tag-list-item.tooltip-arrow-keys": "Các phím mũi tên",
|
|
220
218
|
"components.tag-list-item.tooltip-arrow-keys-desc": "Di chuyển giữa các thẻ",
|
|
221
219
|
"components.tag-list-item.tooltip-delete-key": "Phím lùi/Xóa",
|
|
222
220
|
"components.tag-list-item.tooltip-delete-key-desc": "Xóa thẻ được chọn",
|
|
223
|
-
"components.tag-list-item.tooltip-title": "
|
|
221
|
+
"components.tag-list-item.tooltip-title": "Các điều khiển bàn phím",
|
|
224
222
|
"components.view-switcher.role-description":
|
|
225
223
|
`{count, plural,
|
|
226
|
-
=0 {Xem Trình chuyển đổi với 0 mục}
|
|
227
224
|
other {Xem Trình chuyển đổi với {count} mục}
|
|
228
225
|
}`,
|
|
229
226
|
"templates.primary-secondary.divider": "Bộ phân cách bảng phụ",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.214.0",
|
|
4
4
|
"description": "A collection of accessible, free, open-source web components for building Brightspace applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": "https://github.com/BrightspaceUI/core.git",
|