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

breaking(types): type arrays as read-only (#1335)

Browse source 
Closes #1259

* breaking(types): type arrays as read-only

* Run "yarn build:docs"

* test: assert read-only arrays
This commit is contained in:
metonym 2022-06-05 13:25:43 -07:00 • committed by GitHub
commit 260bf4e040
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
34 changed files with 257 additions and 192 deletions
Download patch file Download diff file Expand all files Collapse all files

164
COMPONENT_INDEX.md
View file

@ -453,7 +453,7 @@ None.
| :------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | ------------------------------------------------- | | :------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | ------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| title | No | <code>let</code> | Yes | <code>string</code> | <code>undefined</code> | Specify the title attribute for the label element | | title | No | <code>let</code> | Yes | <code>string</code> | <code>undefined</code> | Specify the title attribute for the label element |
| group | No | <code>let</code> | Yes | <code>any[]</code> | <code>undefined</code> | Specify the bound group | | group | No | <code>let</code> | Yes | <code>ReadonlyArray<any></code> | <code>undefined</code> | Specify the bound group |
| checked | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Specify whether the checkbox is checked | | checked | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Specify whether the checkbox is checked |
| value | No | <code>let</code> | No | <code>any</code> | <code>""</code> | Specify the value of the checkbox | | value | No | <code>let</code> | No | <code>any</code> | <code>""</code> | Specify the value of the checkbox |
| indeterminate | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Specify whether the checkbox is indeterminate | | indeterminate | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Specify whether the checkbox is indeterminate |
@ -659,7 +659,7 @@ export interface ComboBoxItem {
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the combobox menu dropdown | | open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the combobox menu dropdown |
| value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the selected combobox value | | value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the selected combobox value |
| selectedId | No | <code>let</code> | Yes | <code>ComboBoxItemId</code> | <code>undefined</code> | Set the selected item by value id | | selectedId | No | <code>let</code> | Yes | <code>ComboBoxItemId</code> | <code>undefined</code> | Set the selected item by value id |
| items | No | <code>let</code> | No | <code>ComboBoxItem[]</code> | <code>[]</code> | Set the combobox items | | items | No | <code>let</code> | No | <code>ReadonlyArray<ComboBoxItem></code> | <code>[]</code> | Set the combobox items |
| itemToString | No | <code>let</code> | No | <code>(item: ComboBoxItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a combobox item | | itemToString | No | <code>let</code> | No | <code>(item: ComboBoxItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a combobox item |
| direction | No | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu | | direction | No | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the combobox | | size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the combobox |
@ -780,13 +780,13 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | | :-------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLUListElement</code> | <code>null</code> | Obtain a reference to the unordered list HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLUListElement</code> | <code>null</code> | Obtain a reference to the unordered list HTML element |
| y | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the vertical offset of the menu position | | y | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the vertical offset of the menu position |
| x | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the horizontal offset of the menu position | | x | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the horizontal offset of the menu position |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu<br />Either `x` and `y` must be greater than zero | | open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu<br />Either `x` and `y` must be greater than zero |
| target | No | <code>let</code> | No | <code>null &#124; HTMLElement &#124; HTMLElement[]</code> | <code>null</code> | Specify an element or list of elements to trigger the context menu.<br />If no element is specified, the context menu applies to the entire window | | target | No | <code>let</code> | No | <code>null &#124; ReadonlyArray<null &#124; HTMLElement></code> | <code>null</code> | Specify an element or list of elements to trigger the context menu.<br />If no element is specified, the context menu applies to the entire window |
### Slots ### Slots
@ -821,10 +821,10 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :---------- | :------- | :--------------- | :------- | --------------------- | --------------- | ---------------------- | | :---------- | :------- | :--------------- | :------- | ---------------------------------- | --------------- | ---------------------- |
| selectedIds | No | <code>let</code> | Yes | <code>string[]</code> | <code>[]</code> | -- | | selectedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<string></code> | <code>[]</code> | -- |
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text | | labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
### Slots ### Slots
@ -963,22 +963,22 @@ export interface DataTableCell {
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------- | | :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------- |
| selectedRowIds | No | <code>let</code> | Yes | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the row ids to be selected | | selectedRowIds | No | <code>let</code> | Yes | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the row ids to be selected |
| selectable | No | <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 | No | <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 | No | <code>let</code> | Yes | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the row ids to be expanded | | 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` | | 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` |
| headers | No | <code>let</code> | No | <code>DataTableHeader[]</code> | <code>[]</code> | Specify the data table headers | | headers | No | <code>let</code> | No | <code>ReadonlyArray<DataTableHeader></code> | <code>[]</code> | Specify the data table headers |
| rows | No | <code>let</code> | No | <code>DataTableRow[]</code> | <code>[]</code> | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids | | 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 |
| size | No | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | <code>undefined</code> | Set the size of the data table | | size | No | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "medium" &#124; "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 | | 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 | | description | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the description of the data table |
| zebra | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles | | zebra | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use zebra styles |
| sortable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant | | sortable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the sortable variant |
| batchExpansion | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch expansion | | batchExpansion | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch expansion |
| nonExpandableRowIds | No | <code>let</code> | No | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the ids for rows that should not be expandable | | nonExpandableRowIds | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the ids for rows that should not be expandable |
| radio | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the radio selection variant | | radio | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the radio selection variant |
| batchSelection | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch selection | | batchSelection | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable batch selection |
| nonSelectableRowIds | No | <code>let</code> | No | <code>DataTableRowId[]</code> | <code>[]</code> | Specify the ids of rows that should not be selectable | | nonSelectableRowIds | No | <code>let</code> | No | <code>ReadonlyArray<DataTableRowId></code> | <code>[]</code> | Specify the ids of rows that should not be selectable |
| stickyHeader | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header | | stickyHeader | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header |
| useStaticWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width | | useStaticWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use static width |
| pageSize | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Specify the number of items to display in a page | | pageSize | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Specify the number of items to display in a page |
@ -1012,15 +1012,15 @@ export interface DataTableCell {
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :---------- | :------- | :--------------- | :------- | ------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------- | | :---------- | :------- | :--------------- | :------- | ------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------- |
| columns | No | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of columns<br />Superseded by `headers` if `headers` is a non-empty array | | columns | No | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of columns<br />Superseded by `headers` if `headers` is a non-empty array |
| rows | No | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of rows | | rows | No | <code>let</code> | No | <code>number</code> | <code>5</code> | Specify the number of rows |
| size | No | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "tall"</code> | <code>undefined</code> | Set the size of the data table | | size | No | <code>let</code> | No | <code>"compact" &#124; "short" &#124; "tall"</code> | <code>undefined</code> | Set the size of the data table |
| zebra | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to apply zebra styles to the datatable rows | | zebra | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to apply zebra styles to the datatable rows |
| showHeader | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the header | | showHeader | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the header |
| headers | No | <code>let</code> | No | <code>string[] &#124; Partial<DataTableHeader>[]</code> | <code>[]</code> | Set the column headers<br />Supersedes `columns` if value is a non-empty array | | headers | No | <code>let</code> | No | <code>ReadonlyArray<string &#124; Partial<DataTableHeader>></code> | <code>[]</code> | Set the column headers<br />Supersedes `columns` if value is a non-empty array |
| showToolbar | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the toolbar | | showToolbar | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the toolbar |
### Slots ### Slots
@ -1154,7 +1154,7 @@ export interface DropdownItem {
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown | | open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown |
| selectedId | Yes | <code>let</code> | Yes | <code>DropdownItemId</code> | <code>undefined</code> | Specify the selected item id | | selectedId | Yes | <code>let</code> | Yes | <code>DropdownItemId</code> | <code>undefined</code> | Specify the selected item id |
| items | No | <code>let</code> | No | <code>DropdownItem[]</code> | <code>[]</code> | Set the dropdown items | | items | No | <code>let</code> | No | <code>ReadonlyArray<DropdownItem></code> | <code>[]</code> | Set the dropdown items |
| itemToString | No | <code>let</code> | No | <code>(item: DropdownItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a dropdown item | | itemToString | No | <code>let</code> | No | <code>(item: DropdownItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a dropdown item |
| type | No | <code>let</code> | No | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Specify the type of dropdown | | type | No | <code>let</code> | No | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Specify the type of dropdown |
| direction | No | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the dropdown menu | | direction | No | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the dropdown menu |
@ -1247,10 +1247,10 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------------------------------ | --------------------------------------- | ----------------------------------------------------------- | | :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------------------------------ | --------------------------------------- | ----------------------------------------------------------- |
| files | No | <code>let</code> | Yes | <code>File[]</code> | <code>[]</code> | Obtain a reference to the uploaded files | | files | No | <code>let</code> | Yes | <code>ReadonlyArray<File></code> | <code>[]</code> | Obtain a reference to the uploaded files |
| status | No | <code>let</code> | No | <code>"uploading" &#124; "edit" &#124; "complete"</code> | <code>"uploading"</code> | Specify the file uploader status | | status | No | <code>let</code> | No | <code>"uploading" &#124; "edit" &#124; "complete"</code> | <code>"uploading"</code> | Specify the file uploader status |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the file uploader | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the file uploader |
| accept | No | <code>let</code> | No | <code>string[]</code> | <code>[]</code> | Specify the accepted file types | | accept | No | <code>let</code> | No | <code>ReadonlyArray<string></code> | <code>[]</code> | Specify the accepted file types |
| multiple | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files | | multiple | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files |
| clearFiles | No | <code>const</code> | No | <code>() => void</code> | <code>() => { files = []; }</code> | Programmatically clear the uploaded files | | clearFiles | No | <code>const</code> | No | <code>() => void</code> | <code>() => { files = []; }</code> | Programmatically clear the uploaded files |
| labelDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label description | | labelDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label description |
@ -1266,16 +1266,16 @@ None.
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :--------- | :------------------ | | :--------- | :--------- | :------------------------------- |
| add | dispatched | <code>File[]</code> | | add | dispatched | <code>ReadonlyArray<File></code> |
| remove | dispatched | <code>File[]</code> | | remove | dispatched | <code>ReadonlyArray<File></code> |
| change | dispatched | <code>File[]</code> | | change | dispatched | <code>ReadonlyArray<File></code> |
| click | forwarded | -- | | click | forwarded | -- |
| mouseover | forwarded | -- | | mouseover | forwarded | -- |
| mouseenter | forwarded | -- | | mouseenter | forwarded | -- |
| mouseleave | forwarded | -- | | mouseleave | forwarded | -- |
| keydown | forwarded | -- | | keydown | forwarded | -- |
## `FileUploaderButton` ## `FileUploaderButton`
@ -1285,8 +1285,8 @@ None.
| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------------------------------- | | :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------ | -------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| labelText | No | <code>let</code> | Yes | <code>string</code> | <code>"Add file"</code> | Specify the label text | | labelText | No | <code>let</code> | Yes | <code>string</code> | <code>"Add file"</code> | Specify the label text |
| files | No | <code>let</code> | Yes | <code>File[]</code> | <code>[]</code> | Obtain a reference to the uploaded files | | files | No | <code>let</code> | Yes | <code>ReadonlyArray<File></code> | <code>[]</code> | Obtain a reference to the uploaded files |
| accept | No | <code>let</code> | No | <code>string[]</code> | <code>[]</code> | Specify the accepted file types | | accept | No | <code>let</code> | No | <code>ReadonlyArray<string></code> | <code>[]</code> | Specify the accepted file types |
| multiple | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files | | multiple | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
| disableLabelChanges | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable label changes | | disableLabelChanges | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable label changes |
@ -1304,29 +1304,29 @@ None.
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :--------- | :------------------ | | :--------- | :--------- | :------------------------------- |
| change | dispatched | <code>File[]</code> | | change | dispatched | <code>ReadonlyArray<File></code> |
| keydown | forwarded | -- | | keydown | forwarded | -- |
| click | forwarded | -- | | click | forwarded | -- |
## `FileUploaderDropContainer` ## `FileUploaderDropContainer`
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | | :------------ | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| files | No | <code>let</code> | Yes | <code>File[]</code> | <code>[]</code> | Obtain a reference to the uploaded files | | files | No | <code>let</code> | Yes | <code>ReadonlyArray<File></code> | <code>[]</code> | Obtain a reference to the uploaded files |
| accept | No | <code>let</code> | No | <code>string[]</code> | <code>[]</code> | Specify the accepted file types | | accept | No | <code>let</code> | No | <code>ReadonlyArray<string></code> | <code>[]</code> | Specify the accepted file types |
| multiple | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files | | multiple | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files |
| validateFiles | No | <code>let</code> | No | <code>(files: File[]) => File[]</code> | <code>(files) => files</code> | Override the default behavior of validating uploaded files<br />The default behavior does not validate files | | validateFiles | No | <code>let</code> | No | <code>(files: ReadonlyArray<File>) => ReadonlyArray<File></code> | <code>(files) => files</code> | Override the default behavior of validating uploaded files.<br />By default, files are not validated |
| labelText | No | <code>let</code> | No | <code>string</code> | <code>"Add file"</code> | Specify the label text | | labelText | No | <code>let</code> | No | <code>string</code> | <code>"Add file"</code> | Specify the label text |
| role | No | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `role` attribute of the drop container | | role | No | <code>let</code> | No | <code>string</code> | <code>"button"</code> | Specify the `role` attribute of the drop container |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify `tabindex` attribute | | tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify `tabindex` attribute |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element | | id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the input | | name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify a name attribute for the input |
### Slots ### Slots
@ -1336,15 +1336,15 @@ None.
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :--------- | :------------------ | | :--------- | :--------- | :------------------------------- |
| add | dispatched | <code>File[]</code> | | add | dispatched | <code>ReadonlyArray<File></code> |
| change | dispatched | <code>File[]</code> | | change | dispatched | <code>ReadonlyArray<File></code> |
| dragover | forwarded | -- | | dragover | forwarded | -- |
| dragleave | forwarded | -- | | dragleave | forwarded | -- |
| drop | forwarded | -- | | drop | forwarded | -- |
| keydown | forwarded | -- | | keydown | forwarded | -- |
| click | forwarded | -- | | click | forwarded | -- |
## `FileUploaderItem` ## `FileUploaderItem`
@ -1805,13 +1805,13 @@ export interface HeaderSearchResult {
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------ | -------------------------------------------------- | | :------------------ | :------- | :--------------- | :------- | ---------------------------------------------- | ------------------ | -------------------------------------------------- |
| selectedResultIndex | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the selected result index | | selectedResultIndex | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the selected result index |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| active | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to activate and focus the search bar | | active | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to activate and focus the search bar |
| value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the search input value | | value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the search input value |
| results | No | <code>let</code> | No | <code>HeaderSearchResult[]</code> | <code>[]</code> | Render a list of search results | | results | No | <code>let</code> | No | <code>ReadonlyArray<HeaderSearchResult></code> | <code>[]</code> | Render a list of search results |
### Slots ### Slots
@ -2348,8 +2348,8 @@ export interface MultiSelectItem {
| inputRef | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | inputRef | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown | | open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown |
| value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the multiselect value | | value | No | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the multiselect value |
| selectedIds | No | <code>let</code> | Yes | <code>MultiSelectItemId[]</code> | <code>[]</code> | Set the selected ids | | selectedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<MultiSelectItemId></code> | <code>[]</code> | Set the selected ids |
| items | No | <code>let</code> | Yes | <code>MultiSelectItem[]</code> | <code>[]</code> | Set the multiselect items | | items | No | <code>let</code> | Yes | <code>ReadonlyArray<MultiSelectItem></code> | <code>[]</code> | Set the multiselect items |
| itemToString | No | <code>let</code> | No | <code>(item: MultiSelectItem) => any</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a multiselect item | | itemToString | No | <code>let</code> | No | <code>(item: MultiSelectItem) => any</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a multiselect item |
| itemToInput | No | <code>let</code> | No | <code>(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; }</code> | <code>(item) => {}</code> | Override the item name, title, labelText passed to the checkbox input | | itemToInput | No | <code>let</code> | No | <code>(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; }</code> | <code>(item) => {}</code> | Override the item name, title, labelText passed to the checkbox input |
| size | No | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>undefined</code> | Set the size of the combobox | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>undefined</code> | Set the size of the combobox |
@ -2664,7 +2664,7 @@ None.
| itemRangeText | No | <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 | No | <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 | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the page input | | pageInputDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the page input |
| pageSizeInputDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the page size input | | pageSizeInputDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the page size input |
| pageSizes | No | <code>let</code> | No | <code>number[]</code> | <code>[10]</code> | Specify the available page sizes | | pageSizes | No | <code>let</code> | No | <code>ReadonlyArray<number></code> | <code>[10]</code> | Specify the available page sizes |
| pagesUnknown | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the number of pages is unknown | | pagesUnknown | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the number of pages is unknown |
| pageText | No | <code>let</code> | No | <code>(page: number) => string</code> | <code>(page) => \`page ${page}\`</code> | Override the page text | | pageText | No | <code>let</code> | No | <code>(page: number) => string</code> | <code>(page) => \`page ${page}\`</code> | Override the page text |
| pageRangeText | No | <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 | No | <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 |
@ -4648,8 +4648,8 @@ export interface TreeNode {
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------ | :------- | :-------------------- | :------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | | :------------ | :------- | :-------------------- | :------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
| expandedIds | No | <code>let</code> | Yes | <code>TreeNodeId[]</code> | <code>[]</code> | Set the node ids to be expanded | | expandedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<TreeNodeId></code> | <code>[]</code> | Set the node ids to be expanded |
| selectedIds | No | <code>let</code> | Yes | <code>TreeNodeId[]</code> | <code>[]</code> | Set the node ids to be selected | | selectedIds | No | <code>let</code> | Yes | <code>ReadonlyArray<TreeNodeId></code> | <code>[]</code> | Set the node ids to be selected |
| activeId | No | <code>let</code> | Yes | <code>TreeNodeId</code> | <code>""</code> | Set the current active node id<br />Only one node can be active | | activeId | No | <code>let</code> | Yes | <code>TreeNodeId</code> | <code>""</code> | Set the current active node id<br />Only one node can be active |
| children | No | <code>let</code> | No | <code>Array<TreeNode & { children?: TreeNode[] }></code> | <code>[]</code> | Provide an array of children nodes to render | | children | No | <code>let</code> | No | <code>Array<TreeNode & { children?: TreeNode[] }></code> | <code>[]</code> | Provide an array of children nodes to render |
| size | No | <code>let</code> | No | <code>"default" &#124; "compact"</code> | <code>"default"</code> | Specify the TreeView size | | size | No | <code>let</code> | No | <code>"default" &#124; "compact"</code> | <code>"default"</code> | Specify the TreeView size |

88
docs/src/COMPONENT_API.json
View file

@ -754,7 +754,7 @@
"name": "group", "name": "group",
"kind": "let", "kind": "let",
"description": "Specify the bound group", "description": "Specify the bound group",
"type": "any[]", "type": "ReadonlyArray<any>",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -1460,7 +1460,7 @@
"name": "items", "name": "items",
"kind": "let", "kind": "let",
"description": "Set the combobox items", "description": "Set the combobox items",
"type": "ComboBoxItem[]", "type": "ReadonlyArray<ComboBoxItem>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -1961,7 +1961,7 @@
"name": "target", "name": "target",
"kind": "let", "kind": "let",
"description": "Specify an element or list of elements to trigger the context menu.\nIf no element is specified, the context menu applies to the entire window", "description": "Specify an element or list of elements to trigger the context menu.\nIf no element is specified, the context menu applies to the entire window",
"type": "null | HTMLElement | HTMLElement[]", "type": "null | ReadonlyArray<null | HTMLElement>",
"value": "null", "value": "null",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -2045,7 +2045,7 @@
{ {
"name": "selectedIds", "name": "selectedIds",
"kind": "let", "kind": "let",
"type": "string[]", "type": "ReadonlyArray<string>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -2342,7 +2342,7 @@
"name": "headers", "name": "headers",
"kind": "let", "kind": "let",
"description": "Specify the data table headers", "description": "Specify the data table headers",
"type": "DataTableHeader[]", "type": "ReadonlyArray<DataTableHeader>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -2354,7 +2354,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": "DataTableRow[]", "type": "ReadonlyArray<DataTableRow>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -2449,7 +2449,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": "DataTableRowId[]", "type": "ReadonlyArray<DataTableRowId>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -2461,7 +2461,7 @@
"name": "nonExpandableRowIds", "name": "nonExpandableRowIds",
"kind": "let", "kind": "let",
"description": "Specify the ids for rows that should not be expandable", "description": "Specify the ids for rows that should not be expandable",
"type": "DataTableRowId[]", "type": "ReadonlyArray<DataTableRowId>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -2509,7 +2509,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": "DataTableRowId[]", "type": "ReadonlyArray<DataTableRowId>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -2521,7 +2521,7 @@
"name": "nonSelectableRowIds", "name": "nonSelectableRowIds",
"kind": "let", "kind": "let",
"description": "Specify the ids of rows that should not be selectable", "description": "Specify the ids of rows that should not be selectable",
"type": "DataTableRowId[]", "type": "ReadonlyArray<DataTableRowId>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -2760,7 +2760,7 @@
"name": "headers", "name": "headers",
"kind": "let", "kind": "let",
"description": "Set the column headers\nSupersedes `columns` if value is a non-empty array", "description": "Set the column headers\nSupersedes `columns` if value is a non-empty array",
"type": "string[] | Partial<DataTableHeader>[]", "type": "ReadonlyArray<string | Partial<DataTableHeader>>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -3223,7 +3223,7 @@
"name": "items", "name": "items",
"kind": "let", "kind": "let",
"description": "Set the dropdown items", "description": "Set the dropdown items",
"type": "DropdownItem[]", "type": "ReadonlyArray<DropdownItem>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -3714,7 +3714,7 @@
"name": "accept", "name": "accept",
"kind": "let", "kind": "let",
"description": "Specify the accepted file types", "description": "Specify the accepted file types",
"type": "string[]", "type": "ReadonlyArray<string>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -3726,7 +3726,7 @@
"name": "files", "name": "files",
"kind": "let", "kind": "let",
"description": "Obtain a reference to the uploaded files", "description": "Obtain a reference to the uploaded files",
"type": "File[]", "type": "ReadonlyArray<File>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -3834,9 +3834,21 @@
"moduleExports": [], "moduleExports": [],
"slots": [], "slots": [],
"events": [ "events": [
{ "type": "dispatched", "name": "add", "detail": "File[]" }, {
{ "type": "dispatched", "name": "remove", "detail": "File[]" }, "type": "dispatched",
{ "type": "dispatched", "name": "change", "detail": "File[]" }, "name": "add",
"detail": "ReadonlyArray<File>"
},
{
"type": "dispatched",
"name": "remove",
"detail": "ReadonlyArray<File>"
},
{
"type": "dispatched",
"name": "change",
"detail": "ReadonlyArray<File>"
},
{ "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" },
@ -3854,7 +3866,7 @@
"name": "accept", "name": "accept",
"kind": "let", "kind": "let",
"description": "Specify the accepted file types", "description": "Specify the accepted file types",
"type": "string[]", "type": "ReadonlyArray<string>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -3866,7 +3878,7 @@
"name": "files", "name": "files",
"kind": "let", "kind": "let",
"description": "Obtain a reference to the uploaded files", "description": "Obtain a reference to the uploaded files",
"type": "File[]", "type": "ReadonlyArray<File>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -4005,7 +4017,11 @@
} }
], ],
"events": [ "events": [
{ "type": "dispatched", "name": "change", "detail": "File[]" }, {
"type": "dispatched",
"name": "change",
"detail": "ReadonlyArray<File>"
},
{ "type": "forwarded", "name": "keydown", "element": "label" }, { "type": "forwarded", "name": "keydown", "element": "label" },
{ "type": "forwarded", "name": "click", "element": "input" } { "type": "forwarded", "name": "click", "element": "input" }
], ],
@ -4020,7 +4036,7 @@
"name": "accept", "name": "accept",
"kind": "let", "kind": "let",
"description": "Specify the accepted file types", "description": "Specify the accepted file types",
"type": "string[]", "type": "ReadonlyArray<string>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -4032,7 +4048,7 @@
"name": "files", "name": "files",
"kind": "let", "kind": "let",
"description": "Obtain a reference to the uploaded files", "description": "Obtain a reference to the uploaded files",
"type": "File[]", "type": "ReadonlyArray<File>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -4055,8 +4071,8 @@
{ {
"name": "validateFiles", "name": "validateFiles",
"kind": "let", "kind": "let",
"description": "Override the default behavior of validating uploaded files\nThe default behavior does not validate files", "description": "Override the default behavior of validating uploaded files.\nBy default, files are not validated",
"type": "(files: File[]) => File[]", "type": "(files: ReadonlyArray<File>) => ReadonlyArray<File>",
"value": "(files) => files", "value": "(files) => files",
"isFunction": true, "isFunction": true,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -4159,8 +4175,16 @@
} }
], ],
"events": [ "events": [
{ "type": "dispatched", "name": "add", "detail": "File[]" }, {
{ "type": "dispatched", "name": "change", "detail": "File[]" }, "type": "dispatched",
"name": "add",
"detail": "ReadonlyArray<File>"
},
{
"type": "dispatched",
"name": "change",
"detail": "ReadonlyArray<File>"
},
{ "type": "forwarded", "name": "dragover", "element": "div" }, { "type": "forwarded", "name": "dragover", "element": "div" },
{ "type": "forwarded", "name": "dragleave", "element": "div" }, { "type": "forwarded", "name": "dragleave", "element": "div" },
{ "type": "forwarded", "name": "drop", "element": "div" }, { "type": "forwarded", "name": "drop", "element": "div" },
@ -5245,7 +5269,7 @@
"name": "results", "name": "results",
"kind": "let", "kind": "let",
"description": "Render a list of search results", "description": "Render a list of search results",
"type": "HeaderSearchResult[]", "type": "ReadonlyArray<HeaderSearchResult>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -6861,7 +6885,7 @@
"name": "items", "name": "items",
"kind": "let", "kind": "let",
"description": "Set the multiselect items", "description": "Set the multiselect items",
"type": "MultiSelectItem[]", "type": "ReadonlyArray<MultiSelectItem>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -6897,7 +6921,7 @@
"name": "selectedIds", "name": "selectedIds",
"kind": "let", "kind": "let",
"description": "Set the selected ids", "description": "Set the selected ids",
"type": "MultiSelectItemId[]", "type": "ReadonlyArray<MultiSelectItemId>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -8283,7 +8307,7 @@
"name": "pageSizes", "name": "pageSizes",
"kind": "let", "kind": "let",
"description": "Specify the available page sizes", "description": "Specify the available page sizes",
"type": "number[]", "type": "ReadonlyArray<number>",
"value": "[10]", "value": "[10]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -14210,7 +14234,7 @@
"name": "selectedIds", "name": "selectedIds",
"kind": "let", "kind": "let",
"description": "Set the node ids to be selected", "description": "Set the node ids to be selected",
"type": "TreeNodeId[]", "type": "ReadonlyArray<TreeNodeId>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -14222,7 +14246,7 @@
"name": "expandedIds", "name": "expandedIds",
"kind": "let", "kind": "let",
"description": "Set the node ids to be expanded", "description": "Set the node ids to be expanded",
"type": "TreeNodeId[]", "type": "ReadonlyArray<TreeNodeId>",
"value": "[]", "value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,

2
src/Checkbox/Checkbox.svelte
View file

@ -14,7 +14,7 @@
/** /**
* Specify the bound group * Specify the bound group
* @type {any[]} * @type {ReadonlyArray<any>}
*/ */
export let group = undefined; export let group = undefined;

2
src/ComboBox/ComboBox.svelte
View file

@ -8,7 +8,7 @@
/** /**
* Set the combobox items * Set the combobox items
* @type {ComboBoxItem[]} * @type {ReadonlyArray<ComboBoxItem>}
*/ */
export let items = []; export let items = [];

2
src/ContextMenu/ContextMenu.svelte
View file

@ -6,7 +6,7 @@
/** /**
* Specify an element or list of elements to trigger the context menu. * Specify an element or list of elements to trigger the context menu.
* If no element is specified, the context menu applies to the entire window * If no element is specified, the context menu applies to the entire window
* @type {null | HTMLElement | HTMLElement[]} * @type {null | ReadonlyArray<null | HTMLElement>}
*/ */
export let target = null; export let target = null;

2
src/ContextMenu/ContextMenuGroup.svelte
View file

@ -1,5 +1,5 @@
<script> <script>
/** @type {string[]} */ /** @type {ReadonlyArray<string>} */
export let selectedIds = []; export let selectedIds = [];
/** Specify the label text */ /** Specify the label text */

12
src/DataTable/DataTable.svelte
View file

@ -24,14 +24,14 @@
/** /**
* Specify the data table headers * Specify the data table headers
* @type {DataTableHeader[]} * @type {ReadonlyArray<DataTableHeader>}
*/ */
export let headers = []; export let headers = [];
/** /**
* 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 {DataTableRow[]} * @type {ReadonlyArray<DataTableRow>}
*/ */
export let rows = []; export let rows = [];
@ -66,13 +66,13 @@
/** /**
* Specify the row ids to be expanded * Specify the row ids to be expanded
* @type {DataTableRowId[]} * @type {ReadonlyArray<DataTableRowId>}
*/ */
export let expandedRowIds = []; export let expandedRowIds = [];
/** /**
* Specify the ids for rows that should not be expandable * Specify the ids for rows that should not be expandable
* @type {DataTableRowId[]} * @type {ReadonlyArray<DataTableRowId>}
*/ */
export let nonExpandableRowIds = []; export let nonExpandableRowIds = [];
@ -90,13 +90,13 @@
/** /**
* Specify the row ids to be selected * Specify the row ids to be selected
* @type {DataTableRowId[]} * @type {ReadonlyArray<DataTableRowId>}
*/ */
export let selectedRowIds = []; export let selectedRowIds = [];
/** /**
* Specify the ids of rows that should not be selectable * Specify the ids of rows that should not be selectable
* @type {DataTableRowId[]} * @type {ReadonlyArray<DataTableRowId>}
*/ */
export let nonSelectableRowIds = []; export let nonSelectableRowIds = [];

2
src/DataTable/DataTableSkeleton.svelte
View file

@ -25,7 +25,7 @@
/** /**
* Set the column headers * Set the column headers
* Supersedes `columns` if value is a non-empty array * Supersedes `columns` if value is a non-empty array
* @type {string[] | Partial<DataTableHeader>[]} * @type {ReadonlyArray<string | Partial<DataTableHeader>>}
*/ */
export let headers = []; export let headers = [];

2
src/Dropdown/Dropdown.svelte
View file

@ -9,7 +9,7 @@
/** /**
* Set the dropdown items * Set the dropdown items
* @type {DropdownItem[]} * @type {ReadonlyArray<DropdownItem>}
*/ */
export let items = []; export let items = [];

10
src/FileUploader/FileUploader.svelte
View file

@ -1,8 +1,8 @@
<script> <script>
/** /**
* @event {File[]} add * @event {ReadonlyArray<File>} add
* @event {File[]} remove * @event {ReadonlyArray<File>} remove
* @event {File[]} change * @event {ReadonlyArray<File>} change
*/ */
/** /**
@ -16,13 +16,13 @@
/** /**
* Specify the accepted file types * Specify the accepted file types
* @type {string[]} * @type {ReadonlyArray<string>}
*/ */
export let accept = []; export let accept = [];
/** /**
* Obtain a reference to the uploaded files * Obtain a reference to the uploaded files
* @type {File[]} * @type {ReadonlyArray<File>}
*/ */
export let files = []; export let files = [];

6
src/FileUploader/FileUploaderButton.svelte
View file

@ -1,17 +1,17 @@
<script> <script>
/** /**
* @event {File[]} change * @event {ReadonlyArray<File>} change
*/ */
/** /**
* Specify the accepted file types * Specify the accepted file types
* @type {string[]} * @type {ReadonlyArray<string>}
*/ */
export let accept = []; export let accept = [];
/** /**
* Obtain a reference to the uploaded files * Obtain a reference to the uploaded files
* @type {File[]} * @type {ReadonlyArray<File>}
*/ */
export let files = []; export let files = [];

14
src/FileUploader/FileUploaderDropContainer.svelte
View file

@ -1,18 +1,18 @@
<script> <script>
/** /**
* @event {File[]} add * @event {ReadonlyArray<File>} add
* @event {File[]} change * @event {ReadonlyArray<File>} change
*/ */
/** /**
* Specify the accepted file types * Specify the accepted file types
* @type {string[]} * @type {ReadonlyArray<string>}
*/ */
export let accept = []; export let accept = [];
/** /**
* Obtain a reference to the uploaded files * Obtain a reference to the uploaded files
* @type {File[]} * @type {ReadonlyArray<File>}
*/ */
export let files = []; export let files = [];
@ -20,9 +20,9 @@
export let multiple = false; export let multiple = false;
/** /**
* Override the default behavior of validating uploaded files * Override the default behavior of validating uploaded files.
* The default behavior does not validate files * By default, files are not validated
* @type {(files: File[]) => File[]} * @type {(files: ReadonlyArray<File>) => ReadonlyArray<File>}
*/ */
export let validateFiles = (files) => files; export let validateFiles = (files) => files;

4
src/MultiSelect/MultiSelect.svelte
View file

@ -11,7 +11,7 @@
/** /**
* Set the multiselect items * Set the multiselect items
* @type {MultiSelectItem[]} * @type {ReadonlyArray<MultiSelectItem>}
*/ */
export let items = []; export let items = [];
@ -29,7 +29,7 @@
/** /**
* Set the selected ids * Set the selected ids
* @type {MultiSelectItemId[]} * @type {ReadonlyArray<MultiSelectItemId>}
*/ */
export let selectedIds = []; export let selectedIds = [];

2
src/Pagination/Pagination.svelte
View file

@ -47,7 +47,7 @@
/** /**
* Specify the available page sizes * Specify the available page sizes
* @type {number[]} * @type {ReadonlyArray<number>}
*/ */
export let pageSizes = [10]; export let pageSizes = [10];

4
src/TreeView/TreeView.svelte
View file

@ -22,13 +22,13 @@
/** /**
* Set the node ids to be selected * Set the node ids to be selected
* @type {TreeNodeId[]} * @type {ReadonlyArray<TreeNodeId>}
*/ */
export let selectedIds = []; export let selectedIds = [];
/** /**
* Set the node ids to be expanded * Set the node ids to be expanded
* @type {TreeNodeId[]} * @type {ReadonlyArray<TreeNodeId>}
*/ */
export let expandedIds = []; export let expandedIds = [];

2
src/UIShell/HeaderSearch.svelte
View file

@ -19,7 +19,7 @@
/** /**
* Render a list of search results * Render a list of search results
* @type {HeaderSearchResult[]} * @type {ReadonlyArray<HeaderSearchResult>}
*/ */
export let results = []; export let results = [];

7
tests/ContextMenu.test.svelte
View file

@ -9,13 +9,16 @@
import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte"; import CopyFile from "carbon-icons-svelte/lib/CopyFile.svelte";
import Cut from "carbon-icons-svelte/lib/Cut.svelte"; import Cut from "carbon-icons-svelte/lib/Cut.svelte";
let ref: HTMLElement;
let selectedId = "0"; let selectedId = "0";
let selectedIds = []; let selectedIds = [];
$: console.log("selectedId", selectedId); $: console.log("selectedId", selectedId);
</script> </script>
<ContextMenu open on:open="{(e) => console.log(e.detail)}"> <div bind:this="{ref}"></div>
<ContextMenu target="{null}" open on:open="{(e) => console.log(e.detail)}">
<ContextMenuOption <ContextMenuOption
kind="danger" kind="danger"
indented indented
@ -42,7 +45,7 @@
</ContextMenuGroup> </ContextMenuGroup>
</ContextMenu> </ContextMenu>
<ContextMenu on:open on:close> <ContextMenu target="{[null, ref]}" on:open on:close>
<ContextMenuOption indented labelText="Open" /> <ContextMenuOption indented labelText="Open" />
<ContextMenuDivider /> <ContextMenuDivider />
<ContextMenuRadioGroup bind:selectedId labelText="Radio group"> <ContextMenuRadioGroup bind:selectedId labelText="Radio group">

41
tests/Dropdown.test.svelte
View file

@ -1,16 +1,41 @@
<script lang="ts"> <script lang="ts">
import { Dropdown, DropdownSkeleton } from "../types"; import { Dropdown, DropdownSkeleton } from "../types";
import type { DropdownProps } from "../types/Dropdown/Dropdown.svelte";
let items: DropdownProps["items"] = [
{ id: 0, text: "Slack" },
{ id: "1", text: "Email" },
{ id: "2", text: "Fax" },
] as const;
let itemsWithoutConst = [...items];
type FieldId = typeof items[number]["id"]; // 'foo' | 'bar' | 'baz'
export const fieldId: FieldId = "bar";
// @ts-expect-error
$: items[0] = { id: "0", text: "Slack" };
$: {
// @ts-expect-error
items[0] = { id: "0", text: "Slack" };
}
$: {
items = [...items, { id: "3", text: "Email" }];
items = items.map((item, index) => {
if (index === 0) {
return { id: "0", text: "Slack" };
}
return item;
});
}
</script> </script>
<Dropdown <Dropdown
direction="top" direction="top"
titleText="Contact" titleText="Contact"
selectedId="0" selectedId="0"
items="{[ items="{items}"
{ id: 0, text: 'Slack' },
{ id: '1', text: 'Email' },
{ id: '2', text: 'Fax', disabled: true },
]}"
on:select="{(e) => { on:select="{(e) => {
console.log(e.detail.selectedId); console.log(e.detail.selectedId);
}}" }}"
@ -31,11 +56,7 @@
}}" }}"
titleText="Contact" titleText="Contact"
selectedId="0" selectedId="0"
items="{[ items="{itemsWithoutConst}"
{ id: '0', text: 'Slack' },
{ id: '1', text: 'Email' },
{ id: '2', text: 'Fax' },
]}"
/> />
<Dropdown <Dropdown

8
tests/FileUploader.test.svelte
View file

@ -6,8 +6,15 @@
FileUploaderItem, FileUploaderItem,
FileUploaderSkeleton, FileUploaderSkeleton,
} from "../types"; } from "../types";
import type { FileUploaderProps } from "../types/FileUploader/FileUploader.svelte";
let fileUploader: FileUploader; let fileUploader: FileUploader;
let files: FileUploaderProps["files"] = [];
$: {
// @ts-expect-error
files[0] = null;
}
$: fileUploader?.clearFiles(); $: fileUploader?.clearFiles();
</script> </script>
@ -27,6 +34,7 @@
labelDescription="Only JPEG files are accepted." labelDescription="Only JPEG files are accepted."
accept="{['.jpg', '.jpeg']}" accept="{['.jpg', '.jpeg']}"
status="complete" status="complete"
bind:files
on:add="{(e) => { on:add="{(e) => {
console.log(e.detail); // File[] console.log(e.detail); // File[]
}}" }}"

9
tests/MultiSelect.test.svelte
View file

@ -1,5 +1,13 @@
<script lang="ts"> <script lang="ts">
import { MultiSelect } from "../types"; import { MultiSelect } from "../types";
import type { MultiSelectProps } from "../types/MultiSelect/MultiSelect.svelte";
let selectedIds: MultiSelectProps["selectedIds"] = [0];
$: {
// @ts-expect-error
selectedIds[0] = [0];
}
</script> </script>
<MultiSelect <MultiSelect
@ -7,6 +15,7 @@
titleText="Contact" titleText="Contact"
label="Select contact methods..." label="Select contact methods..."
hideLabel hideLabel
bind:selectedIds
items="{[ items="{[
{ id: 0, text: 'Slack' }, { id: 0, text: 'Slack' },
{ id: '1', text: 'Email' }, { id: '1', text: 'Email' },

2
types/Checkbox/Checkbox.svelte.d.ts vendored
View file

@ -18,7 +18,7 @@ export interface CheckboxProps {
* Specify the bound group * Specify the bound group
* @default undefined * @default undefined
*/ */
group?: any[]; group?: ReadonlyArray<any>;
/** /**
* Specify whether the checkbox is indeterminate * Specify whether the checkbox is indeterminate

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

@ -15,7 +15,7 @@ export interface ComboBoxProps
* Set the combobox items * Set the combobox items
* @default [] * @default []
*/ */
items?: ComboBoxItem[]; items?: ReadonlyArray<ComboBoxItem>;
/** /**
* Override the display of a combobox item * Override the display of a combobox item

2
types/ContextMenu/ContextMenu.svelte.d.ts vendored
View file

@ -8,7 +8,7 @@ export interface ContextMenuProps
* If no element is specified, the context menu applies to the entire window * If no element is specified, the context menu applies to the entire window
* @default null * @default null
*/ */
target?: null | HTMLElement | HTMLElement[]; target?: null | ReadonlyArray<null | HTMLElement>;
/** /**
* Set to `true` to open the menu * Set to `true` to open the menu

2
types/ContextMenu/ContextMenuGroup.svelte.d.ts vendored
View file

@ -5,7 +5,7 @@ export interface ContextMenuGroupProps {
/** /**
* @default [] * @default []
*/ */
selectedIds?: string[]; selectedIds?: ReadonlyArray<string>;
/** /**
* Specify the label text * Specify the label text

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

@ -46,14 +46,14 @@ export interface DataTableProps
* Specify the data table headers * Specify the data table headers
* @default [] * @default []
*/ */
headers?: DataTableHeader[]; headers?: ReadonlyArray<DataTableHeader>;
/** /**
* 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
* @default [] * @default []
*/ */
rows?: DataTableRow[]; rows?: ReadonlyArray<DataTableRow>;
/** /**
* Set the size of the data table * Set the size of the data table
@ -102,13 +102,13 @@ export interface DataTableProps
* Specify the row ids to be expanded * Specify the row ids to be expanded
* @default [] * @default []
*/ */
expandedRowIds?: DataTableRowId[]; expandedRowIds?: ReadonlyArray<DataTableRowId>;
/** /**
* Specify the ids for rows that should not be expandable * Specify the ids for rows that should not be expandable
* @default [] * @default []
*/ */
nonExpandableRowIds?: DataTableRowId[]; nonExpandableRowIds?: ReadonlyArray<DataTableRowId>;
/** /**
* Set to `true` for the radio selection variant * Set to `true` for the radio selection variant
@ -133,13 +133,13 @@ export interface DataTableProps
* Specify the row ids to be selected * Specify the row ids to be selected
* @default [] * @default []
*/ */
selectedRowIds?: DataTableRowId[]; selectedRowIds?: ReadonlyArray<DataTableRowId>;
/** /**
* Specify the ids of rows that should not be selectable * Specify the ids of rows that should not be selectable
* @default [] * @default []
*/ */
nonSelectableRowIds?: DataTableRowId[]; nonSelectableRowIds?: ReadonlyArray<DataTableRowId>;
/** /**
* Set to `true` to enable a sticky header * Set to `true` to enable a sticky header

2
types/DataTable/DataTableSkeleton.svelte.d.ts vendored
View file

@ -41,7 +41,7 @@ export interface DataTableSkeletonProps
* Supersedes `columns` if value is a non-empty array * Supersedes `columns` if value is a non-empty array
* @default [] * @default []
*/ */
headers?: string[] | Partial<DataTableHeader>[]; headers?: ReadonlyArray<string | Partial<DataTableHeader>>;
/** /**
* Set to `false` to hide the toolbar * Set to `false` to hide the toolbar

2
types/Dropdown/Dropdown.svelte.d.ts vendored
View file

@ -17,7 +17,7 @@ export interface DropdownProps
* Set the dropdown items * Set the dropdown items
* @default [] * @default []
*/ */
items?: DropdownItem[]; items?: ReadonlyArray<DropdownItem>;
/** /**
* Override the display of a dropdown item * Override the display of a dropdown item

10
types/FileUploader/FileUploader.svelte.d.ts vendored
View file

@ -19,13 +19,13 @@ export interface FileUploaderProps
* Specify the accepted file types * Specify the accepted file types
* @default [] * @default []
*/ */
accept?: string[]; accept?: ReadonlyArray<string>;
/** /**
* Obtain a reference to the uploaded files * Obtain a reference to the uploaded files
* @default [] * @default []
*/ */
files?: File[]; files?: ReadonlyArray<File>;
/** /**
* Set to `true` to allow multiple files * Set to `true` to allow multiple files
@ -73,9 +73,9 @@ export interface FileUploaderProps
export default class FileUploader extends SvelteComponentTyped< export default class FileUploader extends SvelteComponentTyped<
FileUploaderProps, FileUploaderProps,
{ {
add: CustomEvent<File[]>; add: CustomEvent<ReadonlyArray<File>>;
remove: CustomEvent<File[]>; remove: CustomEvent<ReadonlyArray<File>>;
change: CustomEvent<File[]>; change: CustomEvent<ReadonlyArray<File>>;
click: WindowEventMap["click"]; click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"]; mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"]; mouseenter: WindowEventMap["mouseenter"];

6
types/FileUploader/FileUploaderButton.svelte.d.ts vendored
View file

@ -7,13 +7,13 @@ export interface FileUploaderButtonProps
* Specify the accepted file types * Specify the accepted file types
* @default [] * @default []
*/ */
accept?: string[]; accept?: ReadonlyArray<string>;
/** /**
* Obtain a reference to the uploaded files * Obtain a reference to the uploaded files
* @default [] * @default []
*/ */
files?: File[]; files?: ReadonlyArray<File>;
/** /**
* Set to `true` to allow multiple files * Set to `true` to allow multiple files
@ -79,7 +79,7 @@ export interface FileUploaderButtonProps
export default class FileUploaderButton extends SvelteComponentTyped< export default class FileUploaderButton extends SvelteComponentTyped<
FileUploaderButtonProps, FileUploaderButtonProps,
{ {
change: CustomEvent<File[]>; change: CustomEvent<ReadonlyArray<File>>;
keydown: WindowEventMap["keydown"]; keydown: WindowEventMap["keydown"];
click: WindowEventMap["click"]; click: WindowEventMap["click"];
}, },

14
types/FileUploader/FileUploaderDropContainer.svelte.d.ts vendored
View file

@ -7,13 +7,13 @@ export interface FileUploaderDropContainerProps
* Specify the accepted file types * Specify the accepted file types
* @default [] * @default []
*/ */
accept?: string[]; accept?: ReadonlyArray<string>;
/** /**
* Obtain a reference to the uploaded files * Obtain a reference to the uploaded files
* @default [] * @default []
*/ */
files?: File[]; files?: ReadonlyArray<File>;
/** /**
* Set to `true` to allow multiple files * Set to `true` to allow multiple files
@ -22,11 +22,11 @@ export interface FileUploaderDropContainerProps
multiple?: boolean; multiple?: boolean;
/** /**
* Override the default behavior of validating uploaded files * Override the default behavior of validating uploaded files.
* The default behavior does not validate files * By default, files are not validated
* @default (files) => files * @default (files) => files
*/ */
validateFiles?: (files: File[]) => File[]; validateFiles?: (files: ReadonlyArray<File>) => ReadonlyArray<File>;
/** /**
* Specify the label text * Specify the label text
@ -74,8 +74,8 @@ export interface FileUploaderDropContainerProps
export default class FileUploaderDropContainer extends SvelteComponentTyped< export default class FileUploaderDropContainer extends SvelteComponentTyped<
FileUploaderDropContainerProps, FileUploaderDropContainerProps,
{ {
add: CustomEvent<File[]>; add: CustomEvent<ReadonlyArray<File>>;
change: CustomEvent<File[]>; change: CustomEvent<ReadonlyArray<File>>;
dragover: WindowEventMap["dragover"]; dragover: WindowEventMap["dragover"];
dragleave: WindowEventMap["dragleave"]; dragleave: WindowEventMap["dragleave"];
drop: WindowEventMap["drop"]; drop: WindowEventMap["drop"];

4
types/MultiSelect/MultiSelect.svelte.d.ts vendored
View file

@ -17,7 +17,7 @@ export interface MultiSelectProps
* Set the multiselect items * Set the multiselect items
* @default [] * @default []
*/ */
items?: MultiSelectItem[]; items?: ReadonlyArray<MultiSelectItem>;
/** /**
* Override the display of a multiselect item * Override the display of a multiselect item
@ -39,7 +39,7 @@ export interface MultiSelectProps
* Set the selected ids * Set the selected ids
* @default [] * @default []
*/ */
selectedIds?: MultiSelectItemId[]; selectedIds?: ReadonlyArray<MultiSelectItemId>;
/** /**
* Specify the multiselect value * Specify the multiselect value

2
types/Pagination/Pagination.svelte.d.ts vendored
View file

@ -73,7 +73,7 @@ export interface PaginationProps
* Specify the available page sizes * Specify the available page sizes
* @default [10] * @default [10]
*/ */
pageSizes?: number[]; pageSizes?: ReadonlyArray<number>;
/** /**
* Set to `true` if the number of pages is unknown * Set to `true` if the number of pages is unknown

4
types/TreeView/TreeView.svelte.d.ts vendored
View file

@ -30,13 +30,13 @@ export interface TreeViewProps
* Set the node ids to be selected * Set the node ids to be selected
* @default [] * @default []
*/ */
selectedIds?: TreeNodeId[]; selectedIds?: ReadonlyArray<TreeNodeId>;
/** /**
* Set the node ids to be expanded * Set the node ids to be expanded
* @default [] * @default []
*/ */
expandedIds?: TreeNodeId[]; expandedIds?: ReadonlyArray<TreeNodeId>;
/** /**
* Specify the TreeView size * Specify the TreeView size

2
types/UIShell/HeaderSearch.svelte.d.ts vendored
View file

@ -31,7 +31,7 @@ export interface HeaderSearchProps
* Render a list of search results * Render a list of search results
* @default [] * @default []
*/ */
results?: HeaderSearchResult[]; results?: ReadonlyArray<HeaderSearchResult>;
/** /**
* Specify the selected result index * Specify the selected result index