From cae4629b98a4cb0797ca7c16d36e0a9b2c85ec06 Mon Sep 17 00:00:00 2001
From: metonym {error.message}{status}
-
-{component}
-
- Table of Contents
- Table of Contents
-
No props.
{/if} -No slots.
{/if} -No forwarded events.
{/if} -No dispatched events.
{/if} -
API documentation is
-### Default
+## Default
Custom element
items
object must have a unique "id" property.rows
object must have a unique "id" property.items
object must have a unique "id" property.items
object must have a unique "id" property.
@@ -26,24 +26,24 @@ By default, the tooltip is triggered by an information icon.
Top
Right
Bottom
Left
Start
End
Center
@@ -55,7 +55,7 @@ By default, the tooltip is triggered by an information icon.
@@ -63,7 +63,7 @@ By default, the tooltip is triggered by an information icon.
diff --git a/docs/src/pages/components/TooltipDefinition.svx b/docs/src/pages/components/TooltipDefinition.svx
index c71332ae..7ff316b9 100644
--- a/docs/src/pages/components/TooltipDefinition.svx
+++ b/docs/src/pages/components/TooltipDefinition.svx
@@ -3,13 +3,13 @@
import Preview from "../../components/Preview.svelte";
-### Default
+## Default
Before importing components, you will need to first apply Carbon
component styles. The Carbon Design System supports five themes (2
@@ -222,7 +222,7 @@
Use the "all.css" StyleSheet for dynamic, client-side theming.
The Carbon Svelte portfolio includes packages for icons, pictograms,
and data visualization.
diff --git a/docs/svelte.config.js b/docs/svelte.config.js
index bdacb967..75f5c700 100644
--- a/docs/svelte.config.js
+++ b/docs/svelte.config.js
@@ -170,7 +170,7 @@ module.exports = {
walk(parse(content), {
enter(node) {
if (node.type === "Element") {
- if (node.name === "h3") {
+ if (node.name === "h2") {
const id = node.attributes.find(
(attribute) => attribute.name === "id"
);
From f794cb531202b0bc2fd5d55c414c2edc6d82e6a6 Mon Sep 17 00:00:00 2001
From: metonym Dynamic theming
+ Dynamic theming
Portfolio
+ Portfolio
{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }
|
| click:header--expand | dispatched | { expanded: boolean; }
|
| click:header | dispatched | { header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" }
|
+| click:header--select | dispatched | { indeterminate: boolean; selected: boolean; }
|
| click:row | dispatched | DataTableRow
|
| mouseenter:row | dispatched | DataTableRow
|
| mouseleave:row | dispatched | DataTableRow
|
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index c4024a81..0a032b3c 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -2647,6 +2647,11 @@
"name": "click:header",
"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",
diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index 32ab17a6..a24a1d7f 100644
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@@ -14,6 +14,7 @@
* @event {{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }} click
* @event {{ expanded: boolean; }} click:header--expand
* @event {{ header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" }} click:header
+ * @event {{ indeterminate: boolean; selected: boolean; }} click:header--select
* @event {DataTableRow} click:row
* @event {DataTableRow} mouseenter:row
* @event {DataTableRow} mouseleave:row
@@ -316,6 +317,11 @@
checked="{selectAll}"
indeterminate="{indeterminate}"
on:change="{(e) => {
+ dispatch('click:header--select', {
+ indeterminate,
+ selected: !indeterminate && e.target.checked,
+ });
+
if (indeterminate) {
e.target.checked = false;
selectAll = false;
diff --git a/types/DataTable/DataTable.svelte.d.ts b/types/DataTable/DataTable.svelte.d.ts
index 67ba8eda..80747eea 100644
--- a/types/DataTable/DataTable.svelte.d.ts
+++ b/types/DataTable/DataTable.svelte.d.ts
@@ -191,6 +191,10 @@ export default class DataTable extends SvelteComponentTyped<
header: DataTableHeader;
sortDirection?: "ascending" | "descending" | "none";
}>;
+ ["click:header--select"]: CustomEvent<{
+ indeterminate: boolean;
+ selected: boolean;
+ }>;
["click:row"]: CustomEventlet
| Yes | null | HTMLInputElement
| null
| Obtain a reference to the input HTML element |
+| filteredRowIds | No | let
| Yes | ReadonlyArray
| []
| The filtered row ids |
| expanded | No | let
| Yes | boolean
| false
| Set to `true` to expand the search bar |
| value | No | let
| Yes | number | string
| ""
| Specify the value of the search input |
| persistent | No | let
| No | boolean
| false
| Set to `true` to keep the search bar expanded |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 0a032b3c..68d92c00 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -13829,6 +13829,18 @@
"constant": false,
"reactive": false
},
+ {
+ "name": "filteredRowIds",
+ "kind": "let",
+ "description": "The filtered row ids",
+ "type": "ReadonlyArray{typeMap[type]}
+ {typeMap[type]}
{:else if type.startsWith("(")}
- {type}
+ {type}
{:else}
{prop.value}
{prop.value}
v{process.env.VERSION || ""}
+ Carbon Components Svelte v{process.env.VERSION || ""}
+ Installation
-
+