mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
Run "yarn build:docs"
This commit is contained in:
Eric Liu
parent
94262c17a4
commit
38df04e69e
3 changed files with 83 additions and 96 deletions
|
|
@ -926,31 +926,33 @@ None.
|
|||
### Types
|
||||
|
||||
```ts
|
||||
export type DataTableKey = string;
|
||||
export type DataTableKey<Row = DataTableRow> = Exclude<keyof Row, "id">;
|
||||
|
||||
export type DataTableValue = any;
|
||||
|
||||
export interface DataTableEmptyHeader {
|
||||
key: DataTableKey;
|
||||
export interface DataTableEmptyHeader<Row = DataTableRow> {
|
||||
key: DataTableKey<Row>;
|
||||
empty: boolean;
|
||||
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
|
||||
display?: (item: DataTableValue, row: Row) => DataTableValue;
|
||||
sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
|
||||
columnMenu?: boolean;
|
||||
width?: string;
|
||||
minWidth?: string;
|
||||
}
|
||||
|
||||
export interface DataTableNonEmptyHeader {
|
||||
key: DataTableKey;
|
||||
export interface DataTableNonEmptyHeader<Row = DataTableRow> {
|
||||
key: DataTableKey<Row>;
|
||||
value: DataTableValue;
|
||||
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
|
||||
display?: (item: DataTableValue, row: Row) => DataTableValue;
|
||||
sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
|
||||
columnMenu?: boolean;
|
||||
width?: string;
|
||||
minWidth?: string;
|
||||
}
|
||||
|
||||
export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader;
|
||||
export type DataTableHeader<Row = DataTableRow> =
|
||||
| DataTableNonEmptyHeader<Row>
|
||||
| DataTableEmptyHeader<Row>;
|
||||
|
||||
export interface DataTableRow {
|
||||
id: any;
|
||||
|
|
@ -959,8 +961,8 @@ export interface DataTableRow {
|
|||
|
||||
export type DataTableRowId = any;
|
||||
|
||||
export interface DataTableCell {
|
||||
key: DataTableKey;
|
||||
export interface DataTableCell<Row = DataTableRow> {
|
||||
key: DataTableKey<Row>;
|
||||
value: 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 |
|
||||
| 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" | "ascending" | "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 |
|
||||
| headers | No | <code>let</code> | No | <code>ReadonlyArray<DataTableHeader></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 |
|
||||
| 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<Row>></code> | <code>[]</code> | Specify the data table headers |
|
||||
| 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" | "short" | "medium" | "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 |
|
||||
| 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
|
||||
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :----------- | :------ | :--------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- |
|
||||
| -- | 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-header | No | <code>{ header: DataTableNonEmptyHeader; } </code> | <code>{header.value}</code> |
|
||||
| description | No | -- | <code>{description}</code> |
|
||||
| expanded-row | No | <code>{ row: DataTableRow; } </code> | -- |
|
||||
| title | No | -- | <code>{title}</code> |
|
||||
| Slot name | Default | Props | Fallback |
|
||||
| :----------- | :------ | :----------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- |
|
||||
| -- | Yes | -- | -- |
|
||||
| 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> |
|
||||
| description | No | -- | <code>{description}</code> |
|
||||
| expanded-row | No | <code>{ row: Row; } </code> | -- |
|
||||
| title | No | -- | <code>{title}</code> |
|
||||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :------------------- | :--------- | :------------------------------------------------------------------------------------------------------ |
|
||||
| click | dispatched | <code>{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }</code> |
|
||||
| click:header--expand | dispatched | <code>{ expanded: boolean; }</code> |
|
||||
| click:header | dispatched | <code>{ header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" }</code> |
|
||||
| click:header--select | dispatched | <code>{ indeterminate: boolean; selected: boolean; }</code> |
|
||||
| click:row | dispatched | <code>DataTableRow</code> |
|
||||
| mouseenter:row | dispatched | <code>DataTableRow</code> |
|
||||
| mouseleave:row | dispatched | <code>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> |
|
||||
| Event name | Type | Detail |
|
||||
| :------------------- | :--------- | :----------------------------------------------------------------------------------------------------------- |
|
||||
| click | dispatched | <code>{ header?: DataTableHeader<Row>; row?: Row; cell?: DataTableCell<Row>; }</code> |
|
||||
| click:header--expand | dispatched | <code>{ expanded: boolean; }</code> |
|
||||
| click:header | dispatched | <code>{ header: DataTableHeader<Row>; sortDirection?: "ascending" | "descending" | "none" }</code> |
|
||||
| click:header--select | dispatched | <code>{ indeterminate: boolean; selected: boolean; }</code> |
|
||||
| click:row | dispatched | <code>Row</code> |
|
||||
| mouseenter:row | dispatched | <code>Row</code> |
|
||||
| mouseleave:row | dispatched | <code>Row</code> |
|
||||
| click:row--expand | dispatched | <code>{ expanded: boolean; row: Row; }</code> |
|
||||
| click:row--select | dispatched | <code>{ selected: boolean; row: Row; }</code> |
|
||||
| click:cell | dispatched | <code>DataTableCell<Row></code> |
|
||||
|
||||
## `DataTableSkeleton`
|
||||
|
||||
|
|
|
|||
|
|
@ -2381,7 +2381,7 @@
|
|||
"name": "headers",
|
||||
"kind": "let",
|
||||
"description": "Specify the data table headers",
|
||||
"type": "ReadonlyArray<DataTableHeader>",
|
||||
"type": "ReadonlyArray<DataTableHeader<Row>>",
|
||||
"value": "[]",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
|
|
@ -2393,7 +2393,7 @@
|
|||
"name": "rows",
|
||||
"kind": "let",
|
||||
"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": "[]",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
|
|
@ -2464,7 +2464,7 @@
|
|||
"name": "sortKey",
|
||||
"kind": "let",
|
||||
"description": "Specify the header key to sort by",
|
||||
"type": "DataTableKey",
|
||||
"type": "DataTableKey<Row>",
|
||||
"value": "null",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
|
|
@ -2648,7 +2648,7 @@
|
|||
"name": "cell",
|
||||
"default": false,
|
||||
"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",
|
||||
|
|
@ -2665,7 +2665,7 @@
|
|||
{
|
||||
"name": "expanded-row",
|
||||
"default": false,
|
||||
"slot_props": "{ row: DataTableRow; }"
|
||||
"slot_props": "{ row: Row; }"
|
||||
},
|
||||
{
|
||||
"name": "title",
|
||||
|
|
@ -2678,7 +2678,7 @@
|
|||
{
|
||||
"type": "dispatched",
|
||||
"name": "click",
|
||||
"detail": "{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }"
|
||||
"detail": "{ header?: DataTableHeader<Row>; row?: Row; cell?: DataTableCell<Row>; }"
|
||||
},
|
||||
{
|
||||
"type": "dispatched",
|
||||
|
|
@ -2688,45 +2688,37 @@
|
|||
{
|
||||
"type": "dispatched",
|
||||
"name": "click:header",
|
||||
"detail": "{ header: DataTableHeader; sortDirection?: \"ascending\" | \"descending\" | \"none\" }"
|
||||
"detail": "{ header: DataTableHeader<Row>; 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": "mouseenter:row",
|
||||
"detail": "DataTableRow"
|
||||
},
|
||||
{
|
||||
"type": "dispatched",
|
||||
"name": "mouseleave:row",
|
||||
"detail": "DataTableRow"
|
||||
},
|
||||
{ "type": "dispatched", "name": "click:row", "detail": "Row" },
|
||||
{ "type": "dispatched", "name": "mouseenter:row", "detail": "Row" },
|
||||
{ "type": "dispatched", "name": "mouseleave:row", "detail": "Row" },
|
||||
{
|
||||
"type": "dispatched",
|
||||
"name": "click:row--expand",
|
||||
"detail": "{ expanded: boolean; row: DataTableRow; }"
|
||||
"detail": "{ expanded: boolean; row: Row; }"
|
||||
},
|
||||
{
|
||||
"type": "dispatched",
|
||||
"name": "click:row--select",
|
||||
"detail": "{ selected: boolean; row: DataTableRow; }"
|
||||
"detail": "{ selected: boolean; row: Row; }"
|
||||
},
|
||||
{
|
||||
"type": "dispatched",
|
||||
"name": "click:cell",
|
||||
"detail": "DataTableCell"
|
||||
"detail": "DataTableCell<Row>"
|
||||
}
|
||||
],
|
||||
"typedefs": [
|
||||
{
|
||||
"type": "string",
|
||||
"name": "DataTableKey",
|
||||
"ts": "type DataTableKey = string"
|
||||
"type": "Exclude<keyof Row, \"id\">",
|
||||
"name": "DataTableKey<Row=DataTableRow>",
|
||||
"ts": "type DataTableKey<Row=DataTableRow> = Exclude<keyof Row, \"id\">"
|
||||
},
|
||||
{
|
||||
"type": "any",
|
||||
|
|
@ -2734,19 +2726,19 @@
|
|||
"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; }",
|
||||
"name": "DataTableEmptyHeader",
|
||||
"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; }"
|
||||
"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<Row=DataTableRow>",
|
||||
"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; }",
|
||||
"name": "DataTableNonEmptyHeader",
|
||||
"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; }"
|
||||
"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<Row=DataTableRow>",
|
||||
"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",
|
||||
"name": "DataTableHeader",
|
||||
"ts": "type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader"
|
||||
"type": "DataTableNonEmptyHeader<Row> | DataTableEmptyHeader<Row>",
|
||||
"name": "DataTableHeader<Row=DataTableRow>",
|
||||
"ts": "type DataTableHeader<Row=DataTableRow> = DataTableNonEmptyHeader<Row> | DataTableEmptyHeader<Row>"
|
||||
},
|
||||
{
|
||||
"type": "{ id: any; [key: string]: DataTableValue; }",
|
||||
|
|
@ -2759,12 +2751,12 @@
|
|||
"ts": "type DataTableRowId = any"
|
||||
},
|
||||
{
|
||||
"type": "{ key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }",
|
||||
"name": "DataTableCell",
|
||||
"ts": "interface DataTableCell { key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }"
|
||||
"type": "{ key: DataTableKey<Row>; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }",
|
||||
"name": "DataTableCell<Row=DataTableRow>",
|
||||
"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" }
|
||||
},
|
||||
{
|
||||
|
|
|
|||
45
types/DataTable/DataTable.svelte.d.ts
vendored
45
types/DataTable/DataTable.svelte.d.ts
vendored
|
|
@ -1,33 +1,31 @@
|
|||
import type { SvelteComponentTyped } from "svelte";
|
||||
import type { SvelteHTMLElements } from "svelte/elements";
|
||||
|
||||
export type DataTableKey = string;
|
||||
export type DataTableKey<Row = DataTableRow> = Exclude<keyof Row, "id">;
|
||||
|
||||
export type DataTableValue = any;
|
||||
|
||||
export interface DataTableEmptyHeader<Row extends DataTableRow = DataTableRow> {
|
||||
key: keyof Row;
|
||||
export interface DataTableEmptyHeader<Row = DataTableRow> {
|
||||
key: DataTableKey<Row>;
|
||||
empty: boolean;
|
||||
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
|
||||
display?: (item: DataTableValue, row: Row) => DataTableValue;
|
||||
sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
|
||||
columnMenu?: boolean;
|
||||
width?: string;
|
||||
minWidth?: string;
|
||||
}
|
||||
|
||||
export interface DataTableNonEmptyHeader<
|
||||
Row extends DataTableRow = DataTableRow
|
||||
> {
|
||||
key: keyof Row;
|
||||
export interface DataTableNonEmptyHeader<Row = DataTableRow> {
|
||||
key: DataTableKey<Row>;
|
||||
value: DataTableValue;
|
||||
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
|
||||
display?: (item: DataTableValue, row: Row) => DataTableValue;
|
||||
sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
|
||||
columnMenu?: boolean;
|
||||
width?: string;
|
||||
minWidth?: string;
|
||||
}
|
||||
|
||||
export type DataTableHeader<Row extends DataTableRow = DataTableRow> =
|
||||
export type DataTableHeader<Row = DataTableRow> =
|
||||
| DataTableNonEmptyHeader<Row>
|
||||
| DataTableEmptyHeader<Row>;
|
||||
|
||||
|
|
@ -38,15 +36,15 @@ export interface DataTableRow {
|
|||
|
||||
export type DataTableRowId = any;
|
||||
|
||||
export interface DataTableCell<Row extends DataTableRow = DataTableRow> {
|
||||
key: keyof Row;
|
||||
export interface DataTableCell<Row = DataTableRow> {
|
||||
key: DataTableKey<Row>;
|
||||
value: DataTableValue;
|
||||
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
|
||||
}
|
||||
|
||||
type $RestProps = SvelteHTMLElements["div"];
|
||||
|
||||
type $Props = {
|
||||
type $Props<Row> = {
|
||||
/**
|
||||
* Specify the data table headers
|
||||
* @default []
|
||||
|
|
@ -94,7 +92,7 @@ type $Props = {
|
|||
* Specify the header key to sort by
|
||||
* @default null
|
||||
*/
|
||||
sortKey?: DataTableKey;
|
||||
sortKey?: DataTableKey<Row>;
|
||||
|
||||
/**
|
||||
* Specify the sort direction
|
||||
|
|
@ -185,7 +183,8 @@ type $Props = {
|
|||
[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<
|
||||
Row extends DataTableRow = DataTableRow
|
||||
|
|
@ -209,21 +208,15 @@ export default class DataTable<
|
|||
["click:row"]: CustomEvent<Row>;
|
||||
["mouseenter:row"]: CustomEvent<Row>;
|
||||
["mouseleave:row"]: CustomEvent<Row>;
|
||||
["click:row--expand"]: CustomEvent<{
|
||||
expanded: boolean;
|
||||
row: Row;
|
||||
}>;
|
||||
["click:row--select"]: CustomEvent<{
|
||||
selected: boolean;
|
||||
row: Row;
|
||||
}>;
|
||||
["click:cell"]: CustomEvent<DataTableCell>;
|
||||
["click:row--expand"]: CustomEvent<{ expanded: boolean; row: Row }>;
|
||||
["click:row--select"]: CustomEvent<{ selected: boolean; row: Row }>;
|
||||
["click:cell"]: CustomEvent<DataTableCell<Row>>;
|
||||
},
|
||||
{
|
||||
default: {};
|
||||
cell: {
|
||||
row: DataTableRow;
|
||||
cell: DataTableCell;
|
||||
row: Row;
|
||||
cell: DataTableCell<Row>;
|
||||
rowIndex: number;
|
||||
cellIndex: number;
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue