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

Run "yarn build:docs"

Browse source
This commit is contained in:
Eric Liu 2024-04-20 14:59:11 -07:00
commit 38df04e69e
3 changed files with 83 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

68
COMPONENT_INDEX.md
View file

@ -926,31 +926,33 @@ None.
### Types ### Types
```ts ```ts
export type DataTableKey = string; export type DataTableKey<Row = DataTableRow> = Exclude<keyof Row, "id">;
export type DataTableValue = any; export type DataTableValue = any;
export interface DataTableEmptyHeader { export interface DataTableEmptyHeader<Row = DataTableRow> {
key: DataTableKey; key: DataTableKey<Row>;
empty: boolean; empty: boolean;
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; display?: (item: DataTableValue, row: Row) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number); sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
columnMenu?: boolean; columnMenu?: boolean;
width?: string; width?: string;
minWidth?: string; minWidth?: string;
} }
export interface DataTableNonEmptyHeader { export interface DataTableNonEmptyHeader<Row = DataTableRow> {
key: DataTableKey; key: DataTableKey<Row>;
value: DataTableValue; value: DataTableValue;
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; display?: (item: DataTableValue, row: Row) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number); sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
columnMenu?: boolean; columnMenu?: boolean;
width?: string; width?: string;
minWidth?: string; minWidth?: string;
} }
export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader; export type DataTableHeader<Row = DataTableRow> =
| DataTableNonEmptyHeader<Row>
| DataTableEmptyHeader<Row>;
export interface DataTableRow { export interface DataTableRow {
id: any; id: any;
@ -959,8 +961,8 @@ export interface DataTableRow {
export type DataTableRowId = any; export type DataTableRowId = any;
export interface DataTableCell { export interface DataTableCell<Row = DataTableRow> {
key: DataTableKey; key: DataTableKey<Row>;
value: DataTableValue; value: DataTableValue;
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
} }
@ -975,9 +977,9 @@ export interface DataTableCell {
| expandedRowIds | No | <code>let</code> | Yes | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the row ids to be expanded | | expandedRowIds | No | <code>let</code> | Yes | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the row ids to be expanded |
| expandable | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the expandable variant<br />Automatically set to `true` if `batchExpansion` is `true` | | expandable | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the expandable variant<br />Automatically set to `true` if `batchExpansion` is `true` |
| sortDirection | No | <code>let</code> | Yes | <code>"none" &#124; "ascending" &#124; "descending"</code> | <code>"none"</code> | Specify the sort direction | | sortDirection | No | <code>let</code> | Yes | <code>"none" &#124; "ascending" &#124; "descending"</code> | <code>"none"</code> | Specify the sort direction |
| sortKey | No | <code>let</code> | Yes | <code>DataTableKey</code> | <code>null</code> | Specify the header key to sort by | | sortKey | No | <code>let</code> | Yes | <code>DataTableKey<Row></code> | <code>null</code> | Specify the header key to sort by |
| headers | No | <code>let</code> | No | <code>ReadonlyArray<DataTableHeader></code> | <code>[]</code> | Specify the data table headers | | headers | No | <code>let</code> | No | <code>ReadonlyArray<DataTableHeader<Row>></code> | <code>[]</code> | Specify the data table headers |
| rows | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRow></code> | <code>[]</code> | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids | | rows | No | <code>let</code> | No | <code>ReadonlyArray<Row></code> | <code>[]</code> | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids |
| size | No | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | <code>undefined</code> | Set the size of the data table | | size | No | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | <code>undefined</code> | Set the size of the data table |
| title | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title of the data table | | title | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title of the data table |
| description | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the description of the data table | | description | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the description of the data table |
@ -995,29 +997,29 @@ export interface DataTableCell {
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :----------- | :------ | :--------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- | | :----------- | :------ | :----------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- |
| -- | Yes | -- | -- | | -- | Yes | -- | -- |
| cell | No | <code>{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; } </code> | <code>{cell.display ? cell.display(cell.value, row) : cell.value}</code> | | cell | No | <code>{ row: Row; cell: DataTableCell<Row>; rowIndex: number; cellIndex: number; } </code> | <code>{cell.display ? cell.display(cell.value, row) : cell.value}</code> |
| cell-header | No | <code>{ header: DataTableNonEmptyHeader; } </code> | <code>{header.value}</code> | | cell-header | No | <code>{ header: DataTableNonEmptyHeader; } </code> | <code>{header.value}</code> |
| description | No | -- | <code>{description}</code> | | description | No | -- | <code>{description}</code> |
| expanded-row | No | <code>{ row: DataTableRow; } </code> | -- | | expanded-row | No | <code>{ row: Row; } </code> | -- |
| title | No | -- | <code>{title}</code> | | title | No | -- | <code>{title}</code> |
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :------------------- | :--------- | :------------------------------------------------------------------------------------------------------ | | :------------------- | :--------- | :----------------------------------------------------------------------------------------------------------- |
| click | dispatched | <code>{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }</code> | | click | dispatched | <code>{ header?: DataTableHeader<Row>; row?: Row; cell?: DataTableCell<Row>; }</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<Row>; sortDirection?: "ascending" &#124; "descending" &#124; "none" }</code> |
| click:header--select | dispatched | <code>{ indeterminate: boolean; selected: boolean; }</code> | | click:header--select | dispatched | <code>{ indeterminate: boolean; selected: boolean; }</code> |
| click:row | dispatched | <code>DataTableRow</code> | | click:row | dispatched | <code>Row</code> |
| mouseenter:row | dispatched | <code>DataTableRow</code> | | mouseenter:row | dispatched | <code>Row</code> |
| mouseleave:row | dispatched | <code>DataTableRow</code> | | mouseleave:row | dispatched | <code>Row</code> |
| click:row--expand | dispatched | <code>{ expanded: boolean; row: DataTableRow; }</code> | | click:row--expand | dispatched | <code>{ expanded: boolean; row: Row; }</code> |
| click:row--select | dispatched | <code>{ selected: boolean; row: DataTableRow; }</code> | | click:row--select | dispatched | <code>{ selected: boolean; row: Row; }</code> |
| click:cell | dispatched | <code>DataTableCell</code> | | click:cell | dispatched | <code>DataTableCell<Row></code> |
## `DataTableSkeleton` ## `DataTableSkeleton`

66
docs/src/COMPONENT_API.json
View file

@ -2381,7 +2381,7 @@
"name": "headers", "name": "headers",
"kind": "let", "kind": "let",
"description": "Specify the data table headers", "description": "Specify the data table headers",
"type": "ReadonlyArray<DataTableHeader>", "type": "ReadonlyArray<DataTableHeader<Row>>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -2393,7 +2393,7 @@
"name": "rows", "name": "rows",
"kind": "let", "kind": "let",
"description": "Specify the rows the data table should render\nkeys defined in `headers` are used for the row ids", "description": "Specify the rows the data table should render\nkeys defined in `headers` are used for the row ids",
"type": "ReadonlyArray<DataTableRow>", "type": "ReadonlyArray<Row>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -2464,7 +2464,7 @@
"name": "sortKey", "name": "sortKey",
"kind": "let", "kind": "let",
"description": "Specify the header key to sort by", "description": "Specify the header key to sort by",
"type": "DataTableKey", "type": "DataTableKey<Row>",
"value": "null", "value": "null",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -2648,7 +2648,7 @@
"name": "cell", "name": "cell",
"default": false, "default": false,
"fallback": "{cell.display ? cell.display(cell.value, row) : cell.value}", "fallback": "{cell.display ? cell.display(cell.value, row) : cell.value}",
"slot_props": "{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; }" "slot_props": "{ row: Row; cell: DataTableCell<Row>; rowIndex: number; cellIndex: number; }"
}, },
{ {
"name": "cell-header", "name": "cell-header",
@ -2665,7 +2665,7 @@
{ {
"name": "expanded-row", "name": "expanded-row",
"default": false, "default": false,
"slot_props": "{ row: DataTableRow; }" "slot_props": "{ row: Row; }"
}, },
{ {
"name": "title", "name": "title",
@ -2678,7 +2678,7 @@
{ {
"type": "dispatched", "type": "dispatched",
"name": "click", "name": "click",
"detail": "{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }" "detail": "{ header?: DataTableHeader<Row>; row?: Row; cell?: DataTableCell<Row>; }"
}, },
{ {
"type": "dispatched", "type": "dispatched",
@ -2688,45 +2688,37 @@
{ {
"type": "dispatched", "type": "dispatched",
"name": "click:header", "name": "click:header",
"detail": "{ header: DataTableHeader; sortDirection?: \"ascending\" | \"descending\" | \"none\" }" "detail": "{ header: DataTableHeader<Row>; sortDirection?: \"ascending\" | \"descending\" | \"none\" }"
}, },
{ {
"type": "dispatched", "type": "dispatched",
"name": "click:header--select", "name": "click:header--select",
"detail": "{ indeterminate: boolean; selected: boolean; }" "detail": "{ indeterminate: boolean; selected: boolean; }"
}, },
{ "type": "dispatched", "name": "click:row", "detail": "DataTableRow" }, { "type": "dispatched", "name": "click:row", "detail": "Row" },
{ { "type": "dispatched", "name": "mouseenter:row", "detail": "Row" },
"type": "dispatched", { "type": "dispatched", "name": "mouseleave:row", "detail": "Row" },
"name": "mouseenter:row",
"detail": "DataTableRow"
},
{
"type": "dispatched",
"name": "mouseleave:row",
"detail": "DataTableRow"
},
{ {
"type": "dispatched", "type": "dispatched",
"name": "click:row--expand", "name": "click:row--expand",
"detail": "{ expanded: boolean; row: DataTableRow; }" "detail": "{ expanded: boolean; row: Row; }"
}, },
{ {
"type": "dispatched", "type": "dispatched",
"name": "click:row--select", "name": "click:row--select",
"detail": "{ selected: boolean; row: DataTableRow; }" "detail": "{ selected: boolean; row: Row; }"
}, },
{ {
"type": "dispatched", "type": "dispatched",
"name": "click:cell", "name": "click:cell",
"detail": "DataTableCell" "detail": "DataTableCell<Row>"
} }
], ],
"typedefs": [ "typedefs": [
{ {
"type": "string", "type": "Exclude<keyof Row, \"id\">",
"name": "DataTableKey", "name": "DataTableKey<Row=DataTableRow>",
"ts": "type DataTableKey = string" "ts": "type DataTableKey<Row=DataTableRow> = Exclude<keyof Row, \"id\">"
}, },
{ {
"type": "any", "type": "any",
@ -2734,19 +2726,19 @@
"ts": "type DataTableValue = any" "ts": "type DataTableValue = any"
}, },
{ {
"type": "{ key: DataTableKey; empty: boolean; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }", "type": "{ key: DataTableKey<Row>; empty: boolean; display?: (item: DataTableValue, row: Row) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }",
"name": "DataTableEmptyHeader", "name": "DataTableEmptyHeader<Row=DataTableRow>",
"ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }" "ts": "interface DataTableEmptyHeader<Row=DataTableRow> { key: DataTableKey<Row>; empty: boolean; display?: (item: DataTableValue, row: Row) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }"
}, },
{ {
"type": "{ key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }", "type": "{ key: DataTableKey<Row>; value: DataTableValue; display?: (item: DataTableValue, row: Row) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }",
"name": "DataTableNonEmptyHeader", "name": "DataTableNonEmptyHeader<Row=DataTableRow>",
"ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }" "ts": "interface DataTableNonEmptyHeader<Row=DataTableRow> { key: DataTableKey<Row>; value: DataTableValue; display?: (item: DataTableValue, row: Row) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }"
}, },
{ {
"type": "DataTableNonEmptyHeader | DataTableEmptyHeader", "type": "DataTableNonEmptyHeader<Row> | DataTableEmptyHeader<Row>",
"name": "DataTableHeader", "name": "DataTableHeader<Row=DataTableRow>",
"ts": "type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader" "ts": "type DataTableHeader<Row=DataTableRow> = DataTableNonEmptyHeader<Row> | DataTableEmptyHeader<Row>"
}, },
{ {
"type": "{ id: any; [key: string]: DataTableValue; }", "type": "{ id: any; [key: string]: DataTableValue; }",
@ -2759,12 +2751,12 @@
"ts": "type DataTableRowId = any" "ts": "type DataTableRowId = any"
}, },
{ {
"type": "{ key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }", "type": "{ key: DataTableKey<Row>; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }",
"name": "DataTableCell", "name": "DataTableCell<Row=DataTableRow>",
"ts": "interface DataTableCell { key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }" "ts": "interface DataTableCell<Row=DataTableRow> { key: DataTableKey<Row>; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }"
} }
], ],
"generics": null, "generics": ["Row", "Row extends DataTableRow = DataTableRow"],
"rest_props": { "type": "Element", "name": "div" } "rest_props": { "type": "Element", "name": "div" }
}, },
{ {

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

@ -1,33 +1,31 @@
import type { SvelteComponentTyped } from "svelte"; import type { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements"; import type { SvelteHTMLElements } from "svelte/elements";
export type DataTableKey = string; export type DataTableKey<Row = DataTableRow> = Exclude<keyof Row, "id">;
export type DataTableValue = any; export type DataTableValue = any;
export interface DataTableEmptyHeader<Row extends DataTableRow = DataTableRow> { export interface DataTableEmptyHeader<Row = DataTableRow> {
key: keyof Row; key: DataTableKey<Row>;
empty: boolean; empty: boolean;
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; display?: (item: DataTableValue, row: Row) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number); sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
columnMenu?: boolean; columnMenu?: boolean;
width?: string; width?: string;
minWidth?: string; minWidth?: string;
} }
export interface DataTableNonEmptyHeader< export interface DataTableNonEmptyHeader<Row = DataTableRow> {
Row extends DataTableRow = DataTableRow key: DataTableKey<Row>;
> {
key: keyof Row;
value: DataTableValue; value: DataTableValue;
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; display?: (item: DataTableValue, row: Row) => DataTableValue;
sort?: false | ((a: DataTableValue, b: DataTableValue) => number); sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
columnMenu?: boolean; columnMenu?: boolean;
width?: string; width?: string;
minWidth?: string; minWidth?: string;
} }
export type DataTableHeader<Row extends DataTableRow = DataTableRow> = export type DataTableHeader<Row = DataTableRow> =
| DataTableNonEmptyHeader<Row> | DataTableNonEmptyHeader<Row>
| DataTableEmptyHeader<Row>; | DataTableEmptyHeader<Row>;
@ -38,15 +36,15 @@ export interface DataTableRow {
export type DataTableRowId = any; export type DataTableRowId = any;
export interface DataTableCell<Row extends DataTableRow = DataTableRow> { export interface DataTableCell<Row = DataTableRow> {
key: keyof Row; key: DataTableKey<Row>;
value: DataTableValue; value: DataTableValue;
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
} }
type $RestProps = SvelteHTMLElements["div"]; type $RestProps = SvelteHTMLElements["div"];
type $Props = { type $Props<Row> = {
/** /**
* Specify the data table headers * Specify the data table headers
* @default [] * @default []
@ -94,7 +92,7 @@ type $Props = {
* Specify the header key to sort by * Specify the header key to sort by
* @default null * @default null
*/ */
sortKey?: DataTableKey; sortKey?: DataTableKey<Row>;
/** /**
* Specify the sort direction * Specify the sort direction
@ -185,7 +183,8 @@ type $Props = {
[key: `data-${string}`]: any; [key: `data-${string}`]: any;
}; };
export type DataTableProps = Omit<$RestProps, keyof $Props> & $Props; export type DataTableProps<Row> = Omit<$RestProps, keyof $Props<Row>> &
$Props<Row>;
export default class DataTable< export default class DataTable<
Row extends DataTableRow = DataTableRow Row extends DataTableRow = DataTableRow
@ -209,21 +208,15 @@ export default class DataTable<
["click:row"]: CustomEvent<Row>; ["click:row"]: CustomEvent<Row>;
["mouseenter:row"]: CustomEvent<Row>; ["mouseenter:row"]: CustomEvent<Row>;
["mouseleave:row"]: CustomEvent<Row>; ["mouseleave:row"]: CustomEvent<Row>;
["click:row--expand"]: CustomEvent<{ ["click:row--expand"]: CustomEvent<{ expanded: boolean; row: Row }>;
expanded: boolean; ["click:row--select"]: CustomEvent<{ selected: boolean; row: Row }>;
row: Row; ["click:cell"]: CustomEvent<DataTableCell<Row>>;
}>;
["click:row--select"]: CustomEvent<{
selected: boolean;
row: Row;
}>;
["click:cell"]: CustomEvent<DataTableCell>;
}, },
{ {
default: {}; default: {};
cell: { cell: {
row: DataTableRow; row: Row;
cell: DataTableCell; cell: DataTableCell<Row>;
rowIndex: number; rowIndex: number;
cellIndex: number; cellIndex: number;
}; };