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

fix(types): export component types (#411)

Browse source
This commit is contained in:
Eric Liu 2020-11-25 10:19:11 -08:00 • committed by GitHub
commit 0d8064043f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 214 additions and 175 deletions
Download patch file Download diff file Expand all files Collapse all files

108
COMPONENT_INDEX.md
View file

@ -548,14 +548,14 @@ None.
### Types
```ts
type ColumnSize = boolean | number;
export type ColumnSize = boolean | number;
interface ColumnSizeDescriptor {
export interface ColumnSizeDescriptor {
span?: ColumnSize;
offset: number;
}
type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
```
### Props
@ -588,7 +588,7 @@ None.
### Types
```ts
interface ComboBoxItem {
export interface ComboBoxItem {
id: string;
text: string;
}
@ -722,9 +722,9 @@ None.
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------------------------------------------------------------------- |
| -- | Yes | -- | <code>{#if animation}{feedback &#124;&#124; \$\$restProps['aria-label']}{/if}</code> |
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :--------------------------------------------------------------------------------- |
| -- | Yes | -- | <code>{#if animation}{feedback &#124;&#124; $$restProps['aria-label']}{/if}</code> |
### Events
@ -757,35 +757,35 @@ None.
### Types
```ts
type Key = string;
export type DataTableKey = string;
type Value = any;
export type DataTableValue = any;
interface EmptyHeader {
key: Key;
export interface DataTableEmptyHeader {
key: DataTableKey;
empty: boolean;
display?: (item: Value) => Value;
sort?: (a: Value, b: Value) => 0 | -1 | 1;
display?: (item: Value) => DataTableValue;
sort?: (a: DataTableValue, b: DataTableValue) => 0 | -1 | 1;
columnMenu?: boolean;
}
interface NonEmptyHeader {
key: Key;
value: Value;
display?: (item: Value) => Value;
sort?: (a: Value, b: Value) => 0 | -1 | 1;
export interface DataTableNonEmptyHeader {
key: DataTableKey;
value: DataTableValue;
display?: (item: Value) => DataTableValue;
sort?: (a: DataTableValue, b: DataTableValue) => 0 | -1 | 1;
columnMenu?: boolean;
}
type DataTableHeader = NonEmptyHeader | EmptyHeader;
export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader;
type Row = Record<Key, Value>;
export type DataTableRow = Record<DataTableKey, DataTableValue>;
type RowId = string;
export type DataTableRowId = string;
interface Cell {
key: Key;
value: Value;
export interface DataTableCell {
key: DataTableKey;
value: DataTableValue;
}
```
@ -793,11 +793,11 @@ interface Cell {
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
| selectedRowIds | <code>let</code> | Yes | <code>RowId[]</code> | <code>[]</code> | Specify the row ids to be selected |
| selectedRowIds | <code>let</code> | Yes | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the row ids to be selected |
| selectable | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the selectable variant<br />Automatically set to `true` if `radio` or `batchSelection` are `true` |
| expandedRowIds | <code>let</code> | Yes | <code>RowId[]</code> | <code>[]</code> | Specify the row ids to be expanded |
| expandedRowIds | <code>let</code> | Yes | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the row ids to be expanded |
| expandable | <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` |
| rows | <code>let</code> | Yes | <code>Row[]</code> | <code>[]</code> | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids |
| rows | <code>let</code> | Yes | <code>DataTableRow[]</code> | <code>[]</code> | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids |
| headers | <code>let</code> | No | <code>DataTableHeader[]</code> | <code>[]</code> | Specify the data table headers |
| size | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "tall"</code> | -- | Set the size of the data table |
| title | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title of the data table |
@ -811,25 +811,25 @@ interface Cell {
### Slots
| Slot name | Default | Props | Fallback |
| :----------- | :------ | :---------------------------------------- | :------------------------------------------------------------------------------ |
| -- | Yes | -- | -- |
| cell | No | <code>{ row: Row; cell: Cell; } </code> | <code>{headers[j].display ? headers[j].display(cell.value) : cell.value}</code> |
| cell-header | No | <code>{ header: NonEmptyHeader; } </code> | <code>{header.value}</code> |
| expanded-row | No | <code>{ row: Row; } </code> | -- |
| Slot name | Default | Props | Fallback |
| :----------- | :------ | :-------------------------------------------------------- | :------------------------------------------------------------------------------ |
| -- | Yes | -- | -- |
| cell | No | <code>{ row: DataTableRow; cell: DataTableCell; } </code> | <code>{headers[j].display ? headers[j].display(cell.value) : cell.value}</code> |
| cell-header | No | <code>{ header: DataTableNonEmptyHeader; } </code> | <code>{header.value}</code> |
| expanded-row | No | <code>{ row: DataTableRow; } </code> | -- |
### Events
| Event name | Type | Detail |
| :------------------- | :--------- | :----------------------------------------------------------------------------------------------------- |
| click | dispatched | <code>{ header?: DataTableHeader; row?: Row; cell?: Cell; }</code> |
| 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" &#124; "descending" &#124; "none" }</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:cell | dispatched | <code>Cell</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:cell | dispatched | <code>DataTableCell</code> |
## `DataTableSkeleton`
@ -950,11 +950,11 @@ None.
### Types
```ts
type DropdownItemId = string;
export type DropdownItemId = string;
type DropdownItemText = string;
export type DropdownItemText = string;
interface DropdownItem {
export interface DropdownItem {
id: DropdownItemId;
text: DropdownItemText;
}
@ -1052,7 +1052,7 @@ None.
### Types
```ts
type Files = string[];
export type Files = string[];
```
### Props
@ -1093,7 +1093,7 @@ None.
### Types
```ts
type Files = string[];
export type Files = string[];
```
### Props
@ -1129,7 +1129,7 @@ None.
### Types
```ts
type Files = string[];
export type Files = string[];
```
### Props
@ -1783,7 +1783,7 @@ None.
### Types
```ts
type ListBoxFieldTranslationId = "close" | "open";
export type ListBoxFieldTranslationId = "close" | "open";
```
### Props
@ -1841,7 +1841,7 @@ type ListBoxFieldTranslationId = "close" | "open";
### Types
```ts
type ListBoxMenuIconTranslationId = "close" | "open";
export type ListBoxMenuIconTranslationId = "close" | "open";
```
### Props
@ -1890,7 +1890,7 @@ None.
### Types
```ts
type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
```
### Props
@ -2075,11 +2075,11 @@ None.
### Types
```ts
type MultiSelectItemId = string;
export type MultiSelectItemId = string;
type MultiSelectItemText = string;
export type MultiSelectItemText = string;
interface MultiSelectItem {
export interface MultiSelectItem {
id: MultiSelectItemId;
text: MultiSelectItemText;
}
@ -2217,7 +2217,7 @@ None.
### Types
```ts
type NumberInputTranslationId = "increment" | "decrement";
export type NumberInputTranslationId = "increment" | "decrement";
```
### Props
@ -2388,12 +2388,12 @@ None.
| backwardText | <code>let</code> | No | <code>string</code> | <code>"Previous page"</code> | Specify the backward button text |
| itemsPerPageText | <code>let</code> | No | <code>string</code> | <code>"Items per page:"</code> | Specify the items per page text |
| itemText | <code>let</code> | No | <code>(min: number, max: number) => string</code> | <code>(min, max) => \`${min}–${max} items\`</code> | Override the item text |
| itemRangeText | <code>let</code> | No | <code>(min: number, max: number, total: number) => string</code> | <code>(min, max, total) => \`${min}–${max} of \${total} items\`</code> | Override the item range text |
| itemRangeText | <code>let</code> | No | <code>(min: number, max: number, total: number) => string</code> | <code>(min, max, total) => \`${min}–${max} of ${total} items\`</code> | Override the item range text |
| pageInputDisabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the page input |
| pageSizeInputDisabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the page size input |
| pageSizes | <code>let</code> | No | <code>number[]</code> | <code>[10]</code> | Specify the available page sizes |
| pagesUnknown | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the number of pages is unknown |
| pageText | <code>let</code> | No | <code>(page: number) => string</code> | <code>(page) => \`page \${page}\`</code> | Override the page text |
| pageText | <code>let</code> | No | <code>(page: number) => string</code> | <code>(page) => \`page ${page}\`</code> | Override the page text |
| pageRangeText | <code>let</code> | No | <code>(current: number, total: number) => string</code> | <code>(current, total) => \`of ${total} page${total === 1 ? "" : "s"}\`</code> | Override the page range text |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |

82
docs/src/COMPONENT_API.json
View file

@ -2434,7 +2434,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": "Row[]",
"type": "DataTableRow[]",
"value": "[]",
"isFunction": false,
"constant": false,
@ -2513,7 +2513,7 @@
"name": "expandedRowIds",
"kind": "let",
"description": "Specify the row ids to be expanded",
"type": "RowId[]",
"type": "DataTableRowId[]",
"value": "[]",
"isFunction": false,
"constant": false,
@ -2553,7 +2553,7 @@
"name": "selectedRowIds",
"kind": "let",
"description": "Specify the row ids to be selected",
"type": "RowId[]",
"type": "DataTableRowId[]",
"value": "[]",
"isFunction": false,
"constant": false,
@ -2576,25 +2576,25 @@
"name": "cell",
"default": false,
"fallback": "{headers[j].display ? headers[j].display(cell.value) : cell.value}",
"slot_props": "{ row: Row; cell: Cell; }"
"slot_props": "{ row: DataTableRow; cell: DataTableCell; }"
},
{
"name": "cell-header",
"default": false,
"fallback": "{header.value}",
"slot_props": "{ header: NonEmptyHeader; }"
"slot_props": "{ header: DataTableNonEmptyHeader; }"
},
{
"name": "expanded-row",
"default": false,
"slot_props": "{ row: Row; }"
"slot_props": "{ row: DataTableRow; }"
}
],
"events": [
{
"type": "dispatched",
"name": "click",
"detail": "{ header?: DataTableHeader; row?: Row; cell?: Cell; }"
"detail": "{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }"
},
{
"type": "dispatched",
@ -2606,44 +2606,68 @@
"name": "click:header",
"detail": "{ header: DataTableHeader; sortDirection: \"ascending\" | \"descending\" | \"none\" }"
},
{ "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", "detail": "DataTableRow" },
{
"type": "dispatched",
"name": "mouseenter:row",
"detail": "DataTableRow"
},
{
"type": "dispatched",
"name": "mouseleave:row",
"detail": "DataTableRow"
},
{
"type": "dispatched",
"name": "click:row--expand",
"detail": "{ expanded: boolean; row: Row; }"
"detail": "{ expanded: boolean; row: DataTableRow; }"
},
{ "type": "dispatched", "name": "click:cell", "detail": "Cell" }
{
"type": "dispatched",
"name": "click:cell",
"detail": "DataTableCell"
}
],
"typedefs": [
{ "type": "string", "name": "Key", "ts": "type Key = string" },
{ "type": "any", "name": "Value", "ts": "type Value = any" },
{
"type": "{ key: Key; empty: boolean; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }",
"name": "EmptyHeader",
"ts": "interface EmptyHeader { key: Key; empty: boolean; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }"
"type": "string",
"name": "DataTableKey",
"ts": "type DataTableKey = string"
},
{
"type": "{ key: Key; value: Value; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }",
"name": "NonEmptyHeader",
"ts": "interface NonEmptyHeader { key: Key; value: Value; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }"
"type": "any",
"name": "DataTableValue",
"ts": "type DataTableValue = any"
},
{
"type": "NonEmptyHeader | EmptyHeader",
"type": "{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }",
"name": "DataTableEmptyHeader",
"ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }"
},
{
"type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }",
"name": "DataTableNonEmptyHeader",
"ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }"
},
{
"type": "DataTableNonEmptyHeader | DataTableEmptyHeader",
"name": "DataTableHeader",
"ts": "type DataTableHeader = NonEmptyHeader | EmptyHeader"
"ts": "type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader"
},
{
"type": "Record<Key, Value>",
"name": "Row",
"ts": "type Row = Record<Key, Value>"
"type": "Record<DataTableKey, DataTableValue>",
"name": "DataTableRow",
"ts": "type DataTableRow = Record<DataTableKey, DataTableValue>"
},
{ "type": "string", "name": "RowId", "ts": "type RowId = string" },
{
"type": "{ key: Key; value: Value; }",
"name": "Cell",
"ts": "interface Cell { key: Key; value: Value; }"
"type": "string",
"name": "DataTableRowId",
"ts": "type DataTableRowId = string"
},
{
"type": "{ key: DataTableKey; value: DataTableValue; }",
"name": "DataTableCell",
"ts": "interface DataTableCell { key: DataTableKey; value: DataTableValue; }"
}
],
"rest_props": { "type": "InlineComponent", "name": "TableContainer" }

2
package.json
View file

@ -39,7 +39,7 @@
"rollup": "^2.33.3",
"rollup-plugin-svelte": "^6.1.1",
"rollup-plugin-terser": "^7.0.2",
"sveld": "^0.2.1",
"sveld": "^0.3.0",
"svelte": "^3.29.7",
"svelte-check": "^1.1.15",
"svelte-loader": "^2.13.6",

40
src/DataTable/DataTable.svelte
View file

@ -1,24 +1,24 @@
<script>
/**
* @typedef {string} Key
* @typedef {any} Value
* @typedef {{ key: Key; empty: boolean; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }} EmptyHeader
* @typedef {{ key: Key; value: Value; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }} NonEmptyHeader
* @typedef {NonEmptyHeader | EmptyHeader} DataTableHeader
* @typedef {Record<Key, Value>} Row
* @typedef {string} RowId
* @typedef {{ key: Key; value: Value; }} Cell
* @slot {{ row: Row; }} expanded-row
* @slot {{ header: NonEmptyHeader; }} cell-header
* @slot {{ row: Row; cell: Cell; }} cell
* @event {{ header?: DataTableHeader; row?: Row; cell?: Cell; }} click
* @typedef {string} DataTableKey
* @typedef {any} DataTableValue
* @typedef {{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }} DataTableEmptyHeader
* @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }} DataTableNonEmptyHeader
* @typedef {DataTableNonEmptyHeader | DataTableEmptyHeader} DataTableHeader
* @typedef {Record<DataTableKey, DataTableValue>} DataTableRow
* @typedef {string} DataTableRowId
* @typedef {{ key: DataTableKey; value: DataTableValue; }} DataTableCell
* @slot {{ row: DataTableRow; }} expanded-row
* @slot {{ header: DataTableNonEmptyHeader; }} cell-header
* @slot {{ row: DataTableRow; cell: DataTableCell; }} cell
* @event {{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }} click
* @event {{ expanded: boolean; }} click:header--expand
* @event {{ header: DataTableHeader; sortDirection: "ascending" | "descending" | "none" }} click:header
* @event {Row} click:row
* @event {Row} mouseenter:row
* @event {Row} mouseleave:row
* @event {{ expanded: boolean; row: Row; }} click:row--expand
* @event {Cell} click:cell
* @event {DataTableRow} click:row
* @event {DataTableRow} mouseenter:row
* @event {DataTableRow} mouseleave:row
* @event {{ expanded: boolean; row: DataTableRow; }} click:row--expand
* @event {DataTableCell} click:cell
*/
/**
@ -30,7 +30,7 @@
/**
* Specify the rows the data table should render
* keys defined in `headers` are used for the row ids
* @type {Row[]}
* @type {DataTableRow[]}
*/
export let rows = [];
@ -65,7 +65,7 @@
/**
* Specify the row ids to be expanded
* @type {RowId[]}
* @type {DataTableRowId[]}
*/
export let expandedRowIds = [];
@ -83,7 +83,7 @@
/**
* Specify the row ids to be selected
* @type {RowId[]}
* @type {DataTableRowId[]}
*/
export let selectedRowIds = [];

21
src/RadioButtonGroup/RadioButtonGroup.svelte
View file

@ -26,7 +26,12 @@
*/
export let id = undefined;
import { beforeUpdate, createEventDispatcher, onMount, setContext } from "svelte";
import {
beforeUpdate,
createEventDispatcher,
onMount,
setContext,
} from "svelte";
import { writable } from "svelte/store";
const dispatch = createEventDispatcher();
@ -45,17 +50,17 @@
});
onMount(() => {
$selectedValue = selected
})
$selectedValue = selected;
});
beforeUpdate(() => {
$selectedValue = selected
})
$selectedValue = selected;
});
selectedValue.subscribe(value => {
selected = value
selectedValue.subscribe((value) => {
selected = value;
dispatch("change", value);
})
});
</script>
<div

19
tests/ComboBox.test.svelte
View file

@ -1,44 +1,51 @@
<script lang="ts">
import { ComboBox } from "../types";
import type { ComboBoxItem } from "../types/ComboBox/ComboBox";
const items: ComboBoxItem[] = [
{ id: "0", text: "Slack" },
{ id: "1", text: "Email" },
{ id: "2", text: "Fax" },
];
</script>
<ComboBox
titleText="Contact"
placeholder="Select contact method"
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
items="{items}"
/>
<ComboBox
titleText="Contact"
placeholder="Select contact method"
selectedIndex="{1}"
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
items="{items}"
/>
<ComboBox
light
titleText="Contact"
placeholder="Select contact method"
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
items="{items}"
/>
<ComboBox
titleText="Contact"
placeholder="Select contact method"
size="xl"
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
items="{items}"
/>
<ComboBox
titleText="Contact"
placeholder="Select contact method"
size="sm"
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
items="{items}"
/>
<ComboBox
disabled
titleText="Contact"
placeholder="Select contact method"
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
items="{items}"
/>

2
types/ComboBox/ComboBox.d.ts vendored
View file

@ -1,6 +1,6 @@
/// <reference types="svelte" />
interface ComboBoxItem {
export interface ComboBoxItem {
id: string;
text: string;
}

61
types/DataTable/DataTable.d.ts vendored
View file

@ -1,34 +1,34 @@
/// <reference types="svelte" />
type Key = string;
export type DataTableKey = string;
type Value = any;
export type DataTableValue = any;
interface EmptyHeader {
key: Key;
export interface DataTableEmptyHeader {
key: DataTableKey;
empty: boolean;
display?: (item: Value) => Value;
sort?: (a: Value, b: Value) => 0 | -1 | 1;
display?: (item: Value) => DataTableValue;
sort?: (a: DataTableValue, b: DataTableValue) => 0 | -1 | 1;
columnMenu?: boolean;
}
interface NonEmptyHeader {
key: Key;
value: Value;
display?: (item: Value) => Value;
sort?: (a: Value, b: Value) => 0 | -1 | 1;
export interface DataTableNonEmptyHeader {
key: DataTableKey;
value: DataTableValue;
display?: (item: Value) => DataTableValue;
sort?: (a: DataTableValue, b: DataTableValue) => 0 | -1 | 1;
columnMenu?: boolean;
}
type DataTableHeader = NonEmptyHeader | EmptyHeader;
export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader;
type Row = Record<Key, Value>;
export type DataTableRow = Record<DataTableKey, DataTableValue>;
type RowId = string;
export type DataTableRowId = string;
interface Cell {
key: Key;
value: Value;
export interface DataTableCell {
key: DataTableKey;
value: DataTableValue;
}
export interface DataTableProps {
@ -43,7 +43,7 @@ export interface DataTableProps {
* keys defined in `headers` are used for the row ids
* @default []
*/
rows?: Row[];
rows?: DataTableRow[];
/**
* Set the size of the data table
@ -91,7 +91,7 @@ export interface DataTableProps {
* Specify the row ids to be expanded
* @default []
*/
expandedRowIds?: RowId[];
expandedRowIds?: DataTableRowId[];
/**
* Set to `true` for the radio selection variant
@ -116,7 +116,7 @@ export interface DataTableProps {
* Specify the row ids to be selected
* @default []
*/
selectedRowIds?: RowId[];
selectedRowIds?: DataTableRowId[];
/**
* Set to `true` to enable a sticky header
@ -129,24 +129,27 @@ export default class DataTable {
$$prop_def: DataTableProps;
$$slot_def: {
default: {};
cell: { row: Row; cell: Cell };
["cell-header"]: { header: NonEmptyHeader };
["expanded-row"]: { row: Row };
cell: { row: DataTableRow; cell: DataTableCell };
["cell-header"]: { header: DataTableNonEmptyHeader };
["expanded-row"]: { row: DataTableRow };
};
$on(
eventname: "click",
cb: (event: CustomEvent<{ header?: DataTableHeader; row?: Row; cell?: Cell }>) => void
cb: (event: CustomEvent<{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell }>) => void
): () => void;
$on(eventname: "click:header--expand", cb: (event: CustomEvent<{ expanded: boolean }>) => void): () => void;
$on(
eventname: "click:header",
cb: (event: CustomEvent<{ header: DataTableHeader; sortDirection: "ascending" | "descending" | "none" }>) => void
): () => void;
$on(eventname: "click:row", cb: (event: CustomEvent<Row>) => void): () => void;
$on(eventname: "mouseenter:row", cb: (event: CustomEvent<Row>) => void): () => void;
$on(eventname: "mouseleave:row", cb: (event: CustomEvent<Row>) => void): () => void;
$on(eventname: "click:row--expand", cb: (event: CustomEvent<{ expanded: boolean; row: Row }>) => void): () => void;
$on(eventname: "click:cell", cb: (event: CustomEvent<Cell>) => void): () => void;
$on(eventname: "click:row", cb: (event: CustomEvent<DataTableRow>) => void): () => void;
$on(eventname: "mouseenter:row", cb: (event: CustomEvent<DataTableRow>) => void): () => void;
$on(eventname: "mouseleave:row", cb: (event: CustomEvent<DataTableRow>) => void): () => void;
$on(
eventname: "click:row--expand",
cb: (event: CustomEvent<{ expanded: boolean; row: DataTableRow }>) => void
): () => void;
$on(eventname: "click:cell", cb: (event: CustomEvent<DataTableCell>) => void): () => void;
$on(eventname: string, cb: (event: Event) => void): () => void;
}

6
types/Dropdown/Dropdown.d.ts vendored
View file

@ -1,10 +1,10 @@
/// <reference types="svelte" />
type DropdownItemId = string;
export type DropdownItemId = string;
type DropdownItemText = string;
export type DropdownItemText = string;
interface DropdownItem {
export interface DropdownItem {
id: DropdownItemId;
text: DropdownItemText;
}

2
types/FileUploader/FileUploader.d.ts vendored
View file

@ -1,6 +1,6 @@
/// <reference types="svelte" />
type Files = string[];
export type Files = string[];
export interface FileUploaderProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**

2
types/FileUploader/FileUploaderButton.d.ts vendored
View file

@ -1,6 +1,6 @@
/// <reference types="svelte" />
type Files = string[];
export type Files = string[];
export interface FileUploaderButtonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
/**

2
types/FileUploader/FileUploaderDropContainer.d.ts vendored
View file

@ -1,6 +1,6 @@
/// <reference types="svelte" />
type Files = string[];
export type Files = string[];
export interface FileUploaderDropContainerProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**

6
types/Grid/Column.d.ts vendored
View file

@ -1,13 +1,13 @@
/// <reference types="svelte" />
type ColumnSize = boolean | number;
export type ColumnSize = boolean | number;
interface ColumnSizeDescriptor {
export interface ColumnSizeDescriptor {
span?: ColumnSize;
offset: number;
}
type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
export interface ColumnProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**

2
types/ListBox/ListBoxField.d.ts vendored
View file

@ -1,6 +1,6 @@
/// <reference types="svelte" />
type ListBoxFieldTranslationId = "close" | "open";
export type ListBoxFieldTranslationId = "close" | "open";
export interface ListBoxFieldProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**

2
types/ListBox/ListBoxMenuIcon.d.ts vendored
View file

@ -1,6 +1,6 @@
/// <reference types="svelte" />
type ListBoxMenuIconTranslationId = "close" | "open";
export type ListBoxMenuIconTranslationId = "close" | "open";
export interface ListBoxMenuIconProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**

2
types/ListBox/ListBoxSelection.d.ts vendored
View file

@ -1,6 +1,6 @@
/// <reference types="svelte" />
type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
export interface ListBoxSelectionProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**

6
types/MultiSelect/MultiSelect.d.ts vendored
View file

@ -1,10 +1,10 @@
/// <reference types="svelte" />
type MultiSelectItemId = string;
export type MultiSelectItemId = string;
type MultiSelectItemText = string;
export type MultiSelectItemText = string;
interface MultiSelectItem {
export interface MultiSelectItem {
id: MultiSelectItemId;
text: MultiSelectItemText;
}

2
types/NumberInput/NumberInput.d.ts vendored
View file

@ -1,6 +1,6 @@
/// <reference types="svelte" />
type NumberInputTranslationId = "increment" | "decrement";
export type NumberInputTranslationId = "increment" | "decrement";
export interface NumberInputProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**

22
yarn.lock
View file

@ -2105,11 +2105,6 @@ prettier-plugin-svelte@^1.4.1:
resolved "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-1.4.1.tgz#2f0f7a149190f476dc9b4ba9da8d482bd196f1e2"
integrity sha512-6y0m37Xw01GRf/WIHau+Kp3uXj2JB1agtEmNVKb9opMy34A6OMOYhfneVpNIlrghQSw/jIV+t3e5Ngt4up2CMA==
prettier@^2.1.2:
version "2.1.2"
resolved "https://registry.npmjs.org/prettier/-/prettier-2.1.2.tgz#3050700dae2e4c8b67c4c3f666cdb8af405e1ce5"
integrity sha512-16c7K+x4qVlJg9rEbXl7HEGmQyZlG4R9AgP+oHKRMsMsuk8s+ATStlf1NpDqyBI1HpVyfjLOeMhH2LvuNvV5Vg==
prettier@^2.2.0:
version "2.2.0"
resolved "https://registry.npmjs.org/prettier/-/prettier-2.2.0.tgz#8a03c7777883b29b37fb2c4348c66a78e980418b"
@ -2733,18 +2728,18 @@ supports-color@^7.0.0, supports-color@^7.1.0:
dependencies:
has-flag "^4.0.0"
sveld@^0.2.1:
version "0.2.1"
resolved "https://registry.npmjs.org/sveld/-/sveld-0.2.1.tgz#3294ba51d18905e260546d6ca088ceda015dcbb2"
integrity sha512-NEEXxKaOWt0JBXrxnpG/TNVzCUadW65YEyD3l/49IV9xo7/5Jkrm7At8wGPNFSYGlC6564tmP8NBhFQH/0mzBg==
sveld@^0.3.0:
version "0.3.0"
resolved "https://registry.npmjs.org/sveld/-/sveld-0.3.0.tgz#a1a8c188511a8d5674c72fd8b2987278fae0d062"
integrity sha512-aEuxRaeN11P+k0DvQ+32lEzRQNzv+dFO5qRC4wSM0p5MW9i6sxgPmnYV3xy5TSzaYXVmSI9JJRSMDd3C1ayw0w==
dependencies:
"@rollup/plugin-node-resolve" "^10.0.0"
comment-parser "^0.7.6"
fs-extra "^9.0.1"
prettier "^2.1.2"
prettier "^2.2.0"
rollup "^2.33.3"
rollup-plugin-svelte "^6.1.1"
svelte "^3.29.7"
svelte "^3.30.0"
svelte-check@^1.1.15:
version "1.1.15"
@ -2788,6 +2783,11 @@ svelte@^3.29.7:
resolved "https://registry.npmjs.org/svelte/-/svelte-3.29.7.tgz#e254eb2d0d609ce0fd60f052d444ac4a66d90f7d"
integrity sha512-rx0g311kBODvEWUU01DFBUl3MJuJven04bvTVFUG/w0On/wuj0PajQY/QlXcJndFxG+W1s8iXKaB418tdHWc3A==
svelte@^3.30.0:
version "3.30.0"
resolved "https://registry.npmjs.org/svelte/-/svelte-3.30.0.tgz#cbde341e96bf34f4ac73c8f14f8a014e03bfb7d6"
integrity sha512-z+hdIACb9TROGvJBQWcItMtlr4s0DBUgJss6qWrtFkOoIInkG+iAMo/FJZQFyDBQZc+dul2+TzYSi/tpTT5/Ag==
tar@^2.0.0:
version "2.2.2"
resolved "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz#0ca8848562c7299b8b446ff6a4d60cdbb23edc40"