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

Tweaks to DataTable generics (#1968)

Browse source 
Adjust DataTable types.
- Make key in `cell` slot prop less strict to prevent type errors in markup.
- Resolve property path names up to one level deep for header keys.
This commit is contained in:
brunnerh 2024-05-04 20:24:39 +02:00 • committed by Eric Liu
commit e49369ef02
7 changed files with 79 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

11
COMPONENT_INDEX.md
View file

@ -926,14 +926,15 @@ None.
### Types ### Types
```ts ```ts
export type DataTableKey<Row = DataTableRow> = Exclude<keyof Row, "id">; export type DataTableKey<Row = DataTableRow> =
import("./DataTableTypes.d.ts").PropertyPath<Row>;
export type DataTableValue = any; export type DataTableValue = any;
export interface DataTableEmptyHeader<Row = DataTableRow> { export interface DataTableEmptyHeader<Row = DataTableRow> {
key: DataTableKey<Row>; key: DataTableKey<Row>;
empty: boolean; empty: boolean;
display?: (item: DataTableValue, row: Row) => DataTableValue; display?: (item: Value, 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;
@ -943,7 +944,7 @@ export interface DataTableEmptyHeader<Row = DataTableRow> {
export interface DataTableNonEmptyHeader<Row = DataTableRow> { export interface DataTableNonEmptyHeader<Row = DataTableRow> {
key: DataTableKey<Row>; key: DataTableKey<Row>;
value: DataTableValue; value: DataTableValue;
display?: (item: DataTableValue, row: Row) => DataTableValue; display?: (item: Value, 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;
@ -962,9 +963,9 @@ export interface DataTableRow {
export type DataTableRowId = any; export type DataTableRowId = any;
export interface DataTableCell<Row = DataTableRow> { export interface DataTableCell<Row = DataTableRow> {
key: DataTableKey<Row>; key: DataTableKey<Row> | (string & {});
value: DataTableValue; value: DataTableValue;
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue;
} }
``` ```

16
docs/src/COMPONENT_API.json
View file

@ -2716,9 +2716,9 @@
], ],
"typedefs": [ "typedefs": [
{ {
"type": "Exclude<keyof Row, \"id\">", "type": "import('./DataTableTypes.d.ts').PropertyPath<Row>",
"name": "DataTableKey<Row=DataTableRow>", "name": "DataTableKey<Row=DataTableRow>",
"ts": "type DataTableKey<Row=DataTableRow> = Exclude<keyof Row, \"id\">" "ts": "type DataTableKey<Row=DataTableRow> = import('./DataTableTypes.d.ts').PropertyPath<Row>"
}, },
{ {
"type": "any", "type": "any",
@ -2726,14 +2726,14 @@
"ts": "type DataTableValue = any" "ts": "type DataTableValue = any"
}, },
{ {
"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; }", "type": "{\n key: DataTableKey<Row>;\n empty: boolean;\n display?: (item: Value, row: Row) => DataTableValue;\n sort?: false | ((a: DataTableValue, b: DataTableValue) => number);\n columnMenu?: boolean;\n width?: string;\n minWidth?: string;\n}",
"name": "DataTableEmptyHeader<Row=DataTableRow>", "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; }" "ts": "interface DataTableEmptyHeader<Row=DataTableRow> {\n key: DataTableKey<Row>;\n empty: boolean;\n display?: (item: Value, row: Row) => DataTableValue;\n sort?: false | ((a: DataTableValue, b: DataTableValue) => number);\n columnMenu?: boolean;\n width?: string;\n minWidth?: string;\n}"
}, },
{ {
"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; }", "type": "{\n key: DataTableKey<Row>;\n value: DataTableValue;\n display?: (item: Value, row: Row) => DataTableValue;\n sort?: false | ((a: DataTableValue, b: DataTableValue) => number);\n columnMenu?: boolean;\n width?: string;\n minWidth?: string;\n}",
"name": "DataTableNonEmptyHeader<Row=DataTableRow>", "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; }" "ts": "interface DataTableNonEmptyHeader<Row=DataTableRow> {\n key: DataTableKey<Row>;\n value: DataTableValue;\n display?: (item: Value, row: Row) => DataTableValue;\n sort?: false | ((a: DataTableValue, b: DataTableValue) => number);\n columnMenu?: boolean;\n width?: string;\n minWidth?: string;\n}"
}, },
{ {
"type": "DataTableNonEmptyHeader<Row> | DataTableEmptyHeader<Row>", "type": "DataTableNonEmptyHeader<Row> | DataTableEmptyHeader<Row>",
@ -2751,9 +2751,9 @@
"ts": "type DataTableRowId = any" "ts": "type DataTableRowId = any"
}, },
{ {
"type": "{ key: DataTableKey<Row>; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }", "type": "{\n key: DataTableKey<Row> | (string & {});\n value: DataTableValue;\n display?: (item: Value, row: DataTableRow) => DataTableValue;\n}",
"name": "DataTableCell<Row=DataTableRow>", "name": "DataTableCell<Row=DataTableRow>",
"ts": "interface DataTableCell<Row=DataTableRow> { key: DataTableKey<Row>; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }" "ts": "interface DataTableCell<Row=DataTableRow> {\n key: DataTableKey<Row> | (string & {});\n value: DataTableValue;\n display?: (item: Value, row: DataTableRow) => DataTableValue;\n}"
} }
], ],
"generics": ["Row", "Row extends DataTableRow = DataTableRow"], "generics": ["Row", "Row extends DataTableRow = DataTableRow"],

28
src/DataTable/DataTable.svelte
View file

@ -2,14 +2,34 @@
/** /**
* @generics {Row extends DataTableRow = DataTableRow} Row * @generics {Row extends DataTableRow = DataTableRow} Row
* @template {DataTableRow} Row * @template {DataTableRow} Row
* @typedef {Exclude<keyof Row, "id">} DataTableKey<Row=DataTableRow> * @typedef {import('./DataTableTypes.d.ts').PropertyPath<Row>} DataTableKey<Row=DataTableRow>
* @typedef {any} DataTableValue * @typedef {any} DataTableValue
* @typedef {{ key: DataTableKey<Row>; 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 {{
* @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> * key: DataTableKey<Row>;
* empty: boolean;
* display?: (item: Value, 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: Value, 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 {DataTableNonEmptyHeader<Row> | DataTableEmptyHeader<Row>} DataTableHeader<Row=DataTableRow>
* @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow * @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow
* @typedef {any} DataTableRowId * @typedef {any} DataTableRowId
* @typedef {{ key: DataTableKey<Row>; value: DataTableValue; display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; }} DataTableCell<Row=DataTableRow> * @typedef {{
* key: DataTableKey<Row> | (string & {});
* value: DataTableValue;
* display?: (item: Value, row: DataTableRow) => DataTableValue;
* }} DataTableCell<Row=DataTableRow>
* @slot {{ row: Row; }} expanded-row * @slot {{ row: Row; }} expanded-row
* @slot {{ header: DataTableNonEmptyHeader; }} cell-header * @slot {{ header: DataTableNonEmptyHeader; }} cell-header
* @slot {{ row: Row; cell: DataTableCell<Row>; rowIndex: number; cellIndex: number; }} cell * @slot {{ row: Row; cell: DataTableCell<Row>; rowIndex: number; cellIndex: number; }} cell

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

@ -0,0 +1,17 @@
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;
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]
: "";

6
tests/DataTableAppendColumns.test.svelte
View file

@ -54,11 +54,7 @@
]; ];
</script> </script>
<DataTable <DataTable sortable headers="{headers}" rows="{rows}">
sortable
headers="{headers}"
rows="{rows}"
>
<span slot="cell" let:cell> <span slot="cell" let:cell>
{#if cell.key === "overflow"} {#if cell.key === "overflow"}
<OverflowMenu flipped> <OverflowMenu flipped>

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

@ -1,14 +1,15 @@
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<Row = DataTableRow> = Exclude<keyof Row, "id">; export type DataTableKey<Row = DataTableRow> =
import("./DataTableTypes.d.ts").PropertyPath<Row>;
export type DataTableValue = any; export type DataTableValue = any;
export interface DataTableEmptyHeader<Row = DataTableRow> { export interface DataTableEmptyHeader<Row = DataTableRow> {
key: DataTableKey<Row>; key: DataTableKey<Row>;
empty: boolean; empty: boolean;
display?: (item: DataTableValue, row: Row) => DataTableValue; display?: (item: Value, 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;
@ -18,7 +19,7 @@ export interface DataTableEmptyHeader<Row = DataTableRow> {
export interface DataTableNonEmptyHeader<Row = DataTableRow> { export interface DataTableNonEmptyHeader<Row = DataTableRow> {
key: DataTableKey<Row>; key: DataTableKey<Row>;
value: DataTableValue; value: DataTableValue;
display?: (item: DataTableValue, row: Row) => DataTableValue; display?: (item: Value, 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;
@ -37,9 +38,9 @@ export interface DataTableRow {
export type DataTableRowId = any; export type DataTableRowId = any;
export interface DataTableCell<Row = DataTableRow> { export interface DataTableCell<Row = DataTableRow> {
key: DataTableKey<Row>; key: DataTableKey<Row> | (string & {});
value: DataTableValue; value: DataTableValue;
display?: (item: DataTableValue, row: DataTableRow) => DataTableValue; display?: (item: Value, row: DataTableRow) => DataTableValue;
} }
type $RestProps = SvelteHTMLElements["div"]; type $RestProps = SvelteHTMLElements["div"];

17
types/DataTable/DataTableTypes.d.ts vendored Normal file
View file

@ -0,0 +1,17 @@
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;
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]
: "";