mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(data-table): dispatch on:click:row--select event (#1450)

Browse source
This commit is contained in:
naegelin 2022-08-17 15:39:03 +02:00 • committed by GitHub
commit 30487128b3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 14 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
COMPONENT_INDEX.md
View file

@ -1008,6 +1008,7 @@ export interface DataTableCell {
| mouseenter:row | dispatched | <code>DataTableRow</code> | | mouseenter:row | dispatched | <code>DataTableRow</code> |
| mouseleave:row | dispatched | <code>DataTableRow</code> | | mouseleave:row | dispatched | <code>DataTableRow</code> |
| click:row--expand | dispatched | <code>{ expanded: boolean; row: DataTableRow; }</code> | | click:row--expand | dispatched | <code>{ expanded: boolean; row: DataTableRow; }</code> |
| click:row--select | dispatched | <code>{ selected: boolean; row: DataTableRow; }</code> |
| click:cell | dispatched | <code>DataTableCell</code> | | click:cell | dispatched | <code>DataTableCell</code> |
## `DataTableSkeleton` ## `DataTableSkeleton`

5
docs/src/COMPONENT_API.json
View file

@ -2663,6 +2663,11 @@
"name": "click:row--expand", "name": "click:row--expand",
"detail": "{ expanded: boolean; row: DataTableRow; }" "detail": "{ expanded: boolean; row: DataTableRow; }"
}, },
{
"type": "dispatched",
"name": "click:row--select",
"detail": "{ selected: boolean; row: DataTableRow; }"
},
{ {
"type": "dispatched", "type": "dispatched",
"name": "click:cell", "name": "click:cell",

4
src/DataTable/DataTable.svelte
View file

@ -18,6 +18,7 @@
* @event {DataTableRow} mouseenter:row * @event {DataTableRow} mouseenter:row
* @event {DataTableRow} mouseleave:row * @event {DataTableRow} mouseleave:row
* @event {{ expanded: boolean; row: DataTableRow; }} click:row--expand * @event {{ expanded: boolean; row: DataTableRow; }} click:row--expand
* @event {{ selected: boolean; row: DataTableRow; }} click:row--select
* @event {DataTableCell} click:cell * @event {DataTableCell} click:cell
* @restProps {div} * @restProps {div}
*/ */
@ -440,6 +441,7 @@
checked="{selectedRowIds.includes(row.id)}" checked="{selectedRowIds.includes(row.id)}"
on:change="{() => { on:change="{() => {
selectedRowIds = [row.id]; selectedRowIds = [row.id];
dispatch('click:row--select', { row, selected: true });
}}" }}"
/> />
{:else} {:else}
@ -451,8 +453,10 @@
selectedRowIds = selectedRowIds.filter( selectedRowIds = selectedRowIds.filter(
(id) => id !== row.id (id) => id !== row.id
); );
dispatch('click:row--select', { row, selected: false });
} else { } else {
selectedRowIds = [...selectedRowIds, row.id]; selectedRowIds = [...selectedRowIds, row.id];
dispatch('click:row--select', { row, selected: true });
} }
}}" }}"
/> />

4
types/DataTable/DataTable.svelte.d.ts vendored
View file

@ -198,6 +198,10 @@ export default class DataTable extends SvelteComponentTyped<
expanded: boolean; expanded: boolean;
row: DataTableRow; row: DataTableRow;
}>; }>;
["click:row--select"]: CustomEvent<{
selected: boolean;
row: DataTableRow;
}>;
["click:cell"]: CustomEvent<DataTableCell>; ["click:cell"]: CustomEvent<DataTableCell>;
}, },
{ {