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

feat(data-table): support generics (#1954)

Browse source 
Co-authored-by: K.Kiyokawa <koichi20110068@gmail.com>
Co-authored-by: brunnerh <brunnerh@users.noreply.github.com>
This commit is contained in:
Eric Liu 2024-11-11 21:10:45 -08:00 • committed by GitHub
commit dd43224119
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 278 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/DataTable/DataTable.svelte
View file

@ -1,39 +1,61 @@
<script>
/**
* @typedef {string} DataTableKey
* @generics {Row extends DataTableRow = DataTableRow} Row
* @template {DataTableRow} Row
* @typedef {import('./DataTableTypes.d.ts').PropertyPath<Row>} DataTableKey<Row=DataTableRow>
* @typedef {any} DataTableValue
* @typedef {{ key: DataTableKey; empty: boolean; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableEmptyHeader
* @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => number); columnMenu?: boolean; width?: string; minWidth?: string; }} DataTableNonEmptyHeader
* @typedef {DataTableNonEmptyHeader | DataTableEmptyHeader} DataTableHeader
* @typedef {{
* key: DataTableKey<Row> | (string & {});
* empty: boolean;
* display?: (item: DataTableValue, row: Row) => DataTableValue;
* sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
* columnMenu?: boolean;
* width?: string;
* minWidth?: string;
* }} DataTableEmptyHeader<Row=DataTableRow>
* @typedef {{
* key: DataTableKey<Row>;
* value: DataTableValue;
* display?: (item: DataTableValue, row: Row) => DataTableValue;
* sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
* columnMenu?: boolean;
* width?: string;
* minWidth?: string;
* }} DataTableNonEmptyHeader<Row=DataTableRow>
* @typedef {DataTableNonEmptyHeader<Row> | DataTableEmptyHeader<Row>} DataTableHeader<Row=DataTableRow>
* @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow
* @typedef {any} DataTableRowId
* @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }} DataTableCell
* @slot {{ row: DataTableRow; }} expanded-row
* @typedef {{
* key: DataTableKey<Row> | (string & {});
* value: DataTableValue;
* display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
* }} DataTableCell<Row=DataTableRow>
* @slot {{ row: Row; }} expanded-row
* @slot {{ header: DataTableNonEmptyHeader; }} cell-header
* @slot {{ row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; }} cell
* @event {{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }} click
* @slot {{ row: Row; cell: DataTableCell<Row>; rowIndex: number; cellIndex: number; }} cell
* @event {{ header?: DataTableHeader<Row>; row?: Row; cell?: DataTableCell<Row>; }} click
* @event {{ expanded: boolean; }} click:header--expand
* @event {{ header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" }} click:header
* @event {{ header: DataTableHeader<Row>; 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
* @event {{ expanded: boolean; row: DataTableRow; }} click:row--expand
* @event {{ selected: boolean; row: DataTableRow; }} click:row--select
* @event {DataTableCell} click:cell
* @event {Row} click:row
* @event {Row} mouseenter:row
* @event {Row} mouseleave:row
* @event {{ expanded: boolean; row: Row; }} click:row--expand
* @event {{ selected: boolean; row: Row; }} click:row--select
* @event {DataTableCell<Row>} click:cell
* @restProps {div}
*/
/**
* Specify the data table headers
* @type {ReadonlyArray<DataTableHeader>}
* @type {ReadonlyArray<DataTableHeader<Row>>}
*/
export let headers = [];
/**
* Specify the rows the data table should render
* keys defined in `headers` are used for the row ids
* @type {ReadonlyArray<DataTableRow>}
* @type {ReadonlyArray<Row>}
*/
export let rows = [];
@ -57,7 +79,7 @@
/**
* Specify the header key to sort by
* @type {DataTableKey}
* @type {DataTableKey<Row>}
*/
export let sortKey = null;

18
src/DataTable/DataTableTypes.d.ts vendored Normal file
View file

@ -0,0 +1,18 @@
type PathDepth = [never, 0, 1, 2, ...0[]];
type Join<K, P> = K extends string | number
? P extends string | number
? `${K}${"" extends P ? "" : "."}${P}`
: never
: never;
// For performance, the maximum traversal depth is 10.
export type PropertyPath<T, D extends number = 10> = [D] extends [never]
? never
: T extends object
? {
[K in keyof T]-?: K extends string | number
? `${K}` | Join<K, PropertyPath<T[K], PathDepth[D]>>
: never;
}[keyof T]
: "";