mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11: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

102
COMPONENT_INDEX.md
View file

@ -548,14 +548,14 @@ None.
### Types ### Types
```ts ```ts
type ColumnSize = boolean | number; export type ColumnSize = boolean | number;
interface ColumnSizeDescriptor { export interface ColumnSizeDescriptor {
span?: ColumnSize; span?: ColumnSize;
offset: number; offset: number;
} }
type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
``` ```
### Props ### Props
@ -588,7 +588,7 @@ None.
### Types ### Types
```ts ```ts
interface ComboBoxItem { export interface ComboBoxItem {
id: string; id: string;
text: string; text: string;
} }
@ -723,8 +723,8 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------------------------------------------------------------------- | | :-------- | :------ | :---- | :--------------------------------------------------------------------------------- |
| -- | Yes | -- | <code>{#if animation}{feedback &#124;&#124; \$\$restProps['aria-label']}{/if}</code> | | -- | Yes | -- | <code>{#if animation}{feedback &#124;&#124; $$restProps['aria-label']}{/if}</code> |
### Events ### Events
@ -757,35 +757,35 @@ None.
### Types ### Types
```ts ```ts
type Key = string; export type DataTableKey = string;
type Value = any; export type DataTableValue = any;
interface EmptyHeader { export interface DataTableEmptyHeader {
key: Key; key: DataTableKey;
empty: boolean; empty: boolean;
display?: (item: Value) => Value; display?: (item: Value) => DataTableValue;
sort?: (a: Value, b: Value) => 0 | -1 | 1; sort?: (a: DataTableValue, b: DataTableValue) => 0 | -1 | 1;
columnMenu?: boolean; columnMenu?: boolean;
} }
interface NonEmptyHeader { export interface DataTableNonEmptyHeader {
key: Key; key: DataTableKey;
value: Value; value: DataTableValue;
display?: (item: Value) => Value; display?: (item: Value) => DataTableValue;
sort?: (a: Value, b: Value) => 0 | -1 | 1; sort?: (a: DataTableValue, b: DataTableValue) => 0 | -1 | 1;
columnMenu?: boolean; 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 { export interface DataTableCell {
key: Key; key: DataTableKey;
value: Value; value: DataTableValue;
} }
``` ```
@ -793,11 +793,11 @@ interface Cell {
| Prop name | Kind | Reactive | Type | Default value | Description | | 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` | | 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` | | 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 | | 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 | | 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 | | title | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title of the data table |
@ -812,24 +812,24 @@ interface Cell {
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :----------- | :------ | :---------------------------------------- | :------------------------------------------------------------------------------ | | :----------- | :------ | :-------------------------------------------------------- | :------------------------------------------------------------------------------ |
| -- | Yes | -- | -- | | -- | Yes | -- | -- |
| cell | No | <code>{ row: Row; cell: Cell; } </code> | <code>{headers[j].display ? headers[j].display(cell.value) : cell.value}</code> | | 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: NonEmptyHeader; } </code> | <code>{header.value}</code> | | cell-header | No | <code>{ header: DataTableNonEmptyHeader; } </code> | <code>{header.value}</code> |
| expanded-row | No | <code>{ row: Row; } </code> | -- | | expanded-row | No | <code>{ row: DataTableRow; } </code> | -- |
### Events ### Events
| Event name | Type | Detail | | 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--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; sortDirection: "ascending" &#124; "descending" &#124; "none" }</code> |
| click:row | dispatched | <code>Row</code> | | click:row | dispatched | <code>DataTableRow</code> |
| mouseenter:row | dispatched | <code>Row</code> | | mouseenter:row | dispatched | <code>DataTableRow</code> |
| mouseleave:row | dispatched | <code>Row</code> | | mouseleave:row | dispatched | <code>DataTableRow</code> |
| click:row--expand | dispatched | <code>{ expanded: boolean; row: Row; }</code> | | click:row--expand | dispatched | <code>{ expanded: boolean; row: DataTableRow; }</code> |
| click:cell | dispatched | <code>Cell</code> | | click:cell | dispatched | <code>DataTableCell</code> |
## `DataTableSkeleton` ## `DataTableSkeleton`
@ -950,11 +950,11 @@ None.
### Types ### Types
```ts ```ts
type DropdownItemId = string; export type DropdownItemId = string;
type DropdownItemText = string; export type DropdownItemText = string;
interface DropdownItem { export interface DropdownItem {
id: DropdownItemId; id: DropdownItemId;
text: DropdownItemText; text: DropdownItemText;
} }
@ -1052,7 +1052,7 @@ None.
### Types ### Types
```ts ```ts
type Files = string[]; export type Files = string[];
``` ```
### Props ### Props
@ -1093,7 +1093,7 @@ None.
### Types ### Types
```ts ```ts
type Files = string[]; export type Files = string[];
``` ```
### Props ### Props
@ -1129,7 +1129,7 @@ None.
### Types ### Types
```ts ```ts
type Files = string[]; export type Files = string[];
``` ```
### Props ### Props
@ -1783,7 +1783,7 @@ None.
### Types ### Types
```ts ```ts
type ListBoxFieldTranslationId = "close" | "open"; export type ListBoxFieldTranslationId = "close" | "open";
``` ```
### Props ### Props
@ -1841,7 +1841,7 @@ type ListBoxFieldTranslationId = "close" | "open";
### Types ### Types
```ts ```ts
type ListBoxMenuIconTranslationId = "close" | "open"; export type ListBoxMenuIconTranslationId = "close" | "open";
``` ```
### Props ### Props
@ -1890,7 +1890,7 @@ None.
### Types ### Types
```ts ```ts
type ListBoxSelectionTranslationId = "clearAll" | "clearSelection"; export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
``` ```
### Props ### Props
@ -2075,11 +2075,11 @@ None.
### Types ### Types
```ts ```ts
type MultiSelectItemId = string; export type MultiSelectItemId = string;
type MultiSelectItemText = string; export type MultiSelectItemText = string;
interface MultiSelectItem { export interface MultiSelectItem {
id: MultiSelectItemId; id: MultiSelectItemId;
text: MultiSelectItemText; text: MultiSelectItemText;
} }
@ -2217,7 +2217,7 @@ None.
### Types ### Types
```ts ```ts
type NumberInputTranslationId = "increment" | "decrement"; export type NumberInputTranslationId = "increment" | "decrement";
``` ```
### Props ### Props
@ -2388,12 +2388,12 @@ None.
| backwardText | <code>let</code> | No | <code>string</code> | <code>"Previous page"</code> | Specify the backward button text | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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", "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": "Row[]", "type": "DataTableRow[]",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
@ -2513,7 +2513,7 @@
"name": "expandedRowIds", "name": "expandedRowIds",
"kind": "let", "kind": "let",
"description": "Specify the row ids to be expanded", "description": "Specify the row ids to be expanded",
"type": "RowId[]", "type": "DataTableRowId[]",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
@ -2553,7 +2553,7 @@
"name": "selectedRowIds", "name": "selectedRowIds",
"kind": "let", "kind": "let",
"description": "Specify the row ids to be selected", "description": "Specify the row ids to be selected",
"type": "RowId[]", "type": "DataTableRowId[]",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
@ -2576,25 +2576,25 @@
"name": "cell", "name": "cell",
"default": false, "default": false,
"fallback": "{headers[j].display ? headers[j].display(cell.value) : cell.value}", "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", "name": "cell-header",
"default": false, "default": false,
"fallback": "{header.value}", "fallback": "{header.value}",
"slot_props": "{ header: NonEmptyHeader; }" "slot_props": "{ header: DataTableNonEmptyHeader; }"
}, },
{ {
"name": "expanded-row", "name": "expanded-row",
"default": false, "default": false,
"slot_props": "{ row: Row; }" "slot_props": "{ row: DataTableRow; }"
} }
], ],
"events": [ "events": [
{ {
"type": "dispatched", "type": "dispatched",
"name": "click", "name": "click",
"detail": "{ header?: DataTableHeader; row?: Row; cell?: Cell; }" "detail": "{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }"
}, },
{ {
"type": "dispatched", "type": "dispatched",
@ -2606,44 +2606,68 @@
"name": "click:header", "name": "click:header",
"detail": "{ header: DataTableHeader; sortDirection: \"ascending\" | \"descending\" | \"none\" }" "detail": "{ header: DataTableHeader; sortDirection: \"ascending\" | \"descending\" | \"none\" }"
}, },
{ "type": "dispatched", "name": "click:row", "detail": "Row" }, { "type": "dispatched", "name": "click:row", "detail": "DataTableRow" },
{ "type": "dispatched", "name": "mouseenter:row", "detail": "Row" }, {
{ "type": "dispatched", "name": "mouseleave:row", "detail": "Row" }, "type": "dispatched",
"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: Row; }" "detail": "{ expanded: boolean; row: DataTableRow; }"
}, },
{ "type": "dispatched", "name": "click:cell", "detail": "Cell" } {
"type": "dispatched",
"name": "click:cell",
"detail": "DataTableCell"
}
], ],
"typedefs": [ "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; }", "type": "string",
"name": "EmptyHeader", "name": "DataTableKey",
"ts": "interface EmptyHeader { key: Key; empty: boolean; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }" "ts": "type DataTableKey = string"
}, },
{ {
"type": "{ key: Key; value: Value; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }", "type": "any",
"name": "NonEmptyHeader", "name": "DataTableValue",
"ts": "interface NonEmptyHeader { key: Key; value: Value; display?: (item: Value) => Value; sort?: (a: Value, b: Value) => (0 | -1 | 1); columnMenu?: boolean; }" "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", "name": "DataTableHeader",
"ts": "type DataTableHeader = NonEmptyHeader | EmptyHeader" "ts": "type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader"
}, },
{ {
"type": "Record<Key, Value>", "type": "Record<DataTableKey, DataTableValue>",
"name": "Row", "name": "DataTableRow",
"ts": "type Row = Record<Key, Value>" "ts": "type DataTableRow = Record<DataTableKey, DataTableValue>"
}, },
{ "type": "string", "name": "RowId", "ts": "type RowId = string" },
{ {
"type": "{ key: Key; value: Value; }", "type": "string",
"name": "Cell", "name": "DataTableRowId",
"ts": "interface Cell { key: Key; value: Value; }" "ts": "type DataTableRowId = string"
},
{
"type": "{ key: DataTableKey; value: DataTableValue; }",
"name": "DataTableCell",
"ts": "interface DataTableCell { key: DataTableKey; value: DataTableValue; }"
} }
], ],
"rest_props": { "type": "InlineComponent", "name": "TableContainer" } "rest_props": { "type": "InlineComponent", "name": "TableContainer" }

2
package.json
View file

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

40
src/DataTable/DataTable.svelte
View file

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

21
src/RadioButtonGroup/RadioButtonGroup.svelte
View file

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

19
tests/ComboBox.test.svelte
View file

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

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

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

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

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

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

@ -1,6 +1,6 @@
/// <reference types="svelte" /> /// <reference types="svelte" />
type Files = string[]; export type Files = string[];
export interface FileUploaderProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { 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" /> /// <reference types="svelte" />
type Files = string[]; export type Files = string[];
export interface FileUploaderButtonProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> { 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" /> /// <reference types="svelte" />
type Files = string[]; export type Files = string[];
export interface FileUploaderDropContainerProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { 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" /> /// <reference types="svelte" />
type ColumnSize = boolean | number; export type ColumnSize = boolean | number;
interface ColumnSizeDescriptor { export interface ColumnSizeDescriptor {
span?: ColumnSize; span?: ColumnSize;
offset: number; offset: number;
} }
type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
export interface ColumnProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { 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" /> /// <reference types="svelte" />
type ListBoxFieldTranslationId = "close" | "open"; export type ListBoxFieldTranslationId = "close" | "open";
export interface ListBoxFieldProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { 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" /> /// <reference types="svelte" />
type ListBoxMenuIconTranslationId = "close" | "open"; export type ListBoxMenuIconTranslationId = "close" | "open";
export interface ListBoxMenuIconProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { 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" /> /// <reference types="svelte" />
type ListBoxSelectionTranslationId = "clearAll" | "clearSelection"; export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
export interface ListBoxSelectionProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { 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" /> /// <reference types="svelte" />
type MultiSelectItemId = string; export type MultiSelectItemId = string;
type MultiSelectItemText = string; export type MultiSelectItemText = string;
interface MultiSelectItem { export interface MultiSelectItem {
id: MultiSelectItemId; id: MultiSelectItemId;
text: MultiSelectItemText; text: MultiSelectItemText;
} }

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

@ -1,6 +1,6 @@
/// <reference types="svelte" /> /// <reference types="svelte" />
type NumberInputTranslationId = "increment" | "decrement"; export type NumberInputTranslationId = "increment" | "decrement";
export interface NumberInputProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { 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" resolved "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-1.4.1.tgz#2f0f7a149190f476dc9b4ba9da8d482bd196f1e2"
integrity sha512-6y0m37Xw01GRf/WIHau+Kp3uXj2JB1agtEmNVKb9opMy34A6OMOYhfneVpNIlrghQSw/jIV+t3e5Ngt4up2CMA== 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: prettier@^2.2.0:
version "2.2.0" version "2.2.0"
resolved "https://registry.npmjs.org/prettier/-/prettier-2.2.0.tgz#8a03c7777883b29b37fb2c4348c66a78e980418b" 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: dependencies:
has-flag "^4.0.0" has-flag "^4.0.0"
sveld@^0.2.1: sveld@^0.3.0:
version "0.2.1" version "0.3.0"
resolved "https://registry.npmjs.org/sveld/-/sveld-0.2.1.tgz#3294ba51d18905e260546d6ca088ceda015dcbb2" resolved "https://registry.npmjs.org/sveld/-/sveld-0.3.0.tgz#a1a8c188511a8d5674c72fd8b2987278fae0d062"
integrity sha512-NEEXxKaOWt0JBXrxnpG/TNVzCUadW65YEyD3l/49IV9xo7/5Jkrm7At8wGPNFSYGlC6564tmP8NBhFQH/0mzBg== integrity sha512-aEuxRaeN11P+k0DvQ+32lEzRQNzv+dFO5qRC4wSM0p5MW9i6sxgPmnYV3xy5TSzaYXVmSI9JJRSMDd3C1ayw0w==
dependencies: dependencies:
"@rollup/plugin-node-resolve" "^10.0.0" "@rollup/plugin-node-resolve" "^10.0.0"
comment-parser "^0.7.6" comment-parser "^0.7.6"
fs-extra "^9.0.1" fs-extra "^9.0.1"
prettier "^2.1.2" prettier "^2.2.0"
rollup "^2.33.3" rollup "^2.33.3"
rollup-plugin-svelte "^6.1.1" rollup-plugin-svelte "^6.1.1"
svelte "^3.29.7" svelte "^3.30.0"
svelte-check@^1.1.15: svelte-check@^1.1.15:
version "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" resolved "https://registry.npmjs.org/svelte/-/svelte-3.29.7.tgz#e254eb2d0d609ce0fd60f052d444ac4a66d90f7d"
integrity sha512-rx0g311kBODvEWUU01DFBUl3MJuJven04bvTVFUG/w0On/wuj0PajQY/QlXcJndFxG+W1s8iXKaB418tdHWc3A== 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: tar@^2.0.0:
version "2.2.2" version "2.2.2"
resolved "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz#0ca8848562c7299b8b446ff6a4d60cdbb23edc40" resolved "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz#0ca8848562c7299b8b446ff6a4d60cdbb23edc40"