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:header--select event (#1453)

Browse source 
* feat(data-table): dispatch `on:click:header--select` event

* Run "yarn build:docs"
This commit is contained in:
metonym 2022-08-17 10:19:31 -07:00 • committed by GitHub
commit f794cb5312
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
COMPONENT_INDEX.md
View file

@ -1004,6 +1004,7 @@ export interface DataTableCell {
| click | dispatched | <code>{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }</code> | | click | dispatched | <code>{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }</code> |
| click:header--expand | dispatched | <code>{ expanded: boolean; }</code> | | click:header--expand | dispatched | <code>{ expanded: boolean; }</code> |
| click:header | dispatched | <code>{ header: DataTableHeader; sortDirection?: "ascending" &#124; "descending" &#124; "none" }</code> | | click:header | dispatched | <code>{ header: DataTableHeader; sortDirection?: "ascending" &#124; "descending" &#124; "none" }</code> |
| click:header--select | dispatched | <code>{ indeterminate: boolean; selected: boolean; }</code> |
| click:row | dispatched | <code>DataTableRow</code> | | click:row | dispatched | <code>DataTableRow</code> |
| mouseenter:row | dispatched | <code>DataTableRow</code> | | mouseenter:row | dispatched | <code>DataTableRow</code> |
| mouseleave:row | dispatched | <code>DataTableRow</code> | | mouseleave:row | dispatched | <code>DataTableRow</code> |

5
docs/src/COMPONENT_API.json
View file

@ -2647,6 +2647,11 @@
"name": "click:header", "name": "click:header",
"detail": "{ header: DataTableHeader; sortDirection?: \"ascending\" | \"descending\" | \"none\" }" "detail": "{ header: DataTableHeader; sortDirection?: \"ascending\" | \"descending\" | \"none\" }"
}, },
{
"type": "dispatched",
"name": "click:header--select",
"detail": "{ indeterminate: boolean; selected: boolean; }"
},
{ "type": "dispatched", "name": "click:row", "detail": "DataTableRow" }, { "type": "dispatched", "name": "click:row", "detail": "DataTableRow" },
{ {
"type": "dispatched", "type": "dispatched",

6
src/DataTable/DataTable.svelte
View file

@ -14,6 +14,7 @@
* @event {{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }} click * @event {{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }} click
* @event {{ expanded: boolean; }} click:header--expand * @event {{ expanded: boolean; }} click:header--expand
* @event {{ header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" }} click:header * @event {{ header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" }} click:header
* @event {{ indeterminate: boolean; selected: boolean; }} click:header--select
* @event {DataTableRow} click:row * @event {DataTableRow} click:row
* @event {DataTableRow} mouseenter:row * @event {DataTableRow} mouseenter:row
* @event {DataTableRow} mouseleave:row * @event {DataTableRow} mouseleave:row
@ -316,6 +317,11 @@
checked="{selectAll}" checked="{selectAll}"
indeterminate="{indeterminate}" indeterminate="{indeterminate}"
on:change="{(e) => { on:change="{(e) => {
dispatch('click:header--select', {
indeterminate,
selected: !indeterminate && e.target.checked,
});
if (indeterminate) { if (indeterminate) {
e.target.checked = false; e.target.checked = false;
selectAll = false; selectAll = false;

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

@ -191,6 +191,10 @@ export default class DataTable extends SvelteComponentTyped<
header: DataTableHeader; header: DataTableHeader;
sortDirection?: "ascending" | "descending" | "none"; sortDirection?: "ascending" | "descending" | "none";
}>; }>;
["click:header--select"]: CustomEvent<{
indeterminate: boolean;
selected: boolean;
}>;
["click:row"]: CustomEvent<DataTableRow>; ["click:row"]: CustomEvent<DataTableRow>;
["mouseenter:row"]: CustomEvent<DataTableRow>; ["mouseenter:row"]: CustomEvent<DataTableRow>;
["mouseleave:row"]: CustomEvent<DataTableRow>; ["mouseleave:row"]: CustomEvent<DataTableRow>;