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

Merge pull request #222 from IBM/types

Browse source 
add TypeScript definitions
This commit is contained in:
Eric Liu 2020-07-27 06:42:35 -07:00 • committed by GitHub
commit be9b6fcc98
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 1620 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

253
README.md
View file

@ -537,26 +537,26 @@ import { ComboBox } from "carbon-components-svelte";
**API**
| Prop name | Type | Default |
| :--------------- | :---------------------------------------------------------- | :------------------------------ |
| items | <code>ComboBoxItem[]</code> | [] |
| itemToString | <code>(item: ComboBoxItem) => string;</code> | (item: ComboBoxItem) => string; |
| selectedIndex | <code>number</code> | -1 |
| value | <code>string</code> | "" |
| size | <code>"sm" &#124; "xl"</code> | - |
| disabled | <code>boolean</code> | false |
| titleText | <code>string</code> | "" |
| placeholder | <code>string</code> | "" |
| helperText | <code>string</code> | "" |
| invalidText | <code>string</code> | "" |
| invalid | <code>boolean</code> | false |
| light | <code>boolean</code> | false |
| open | <code>boolean</code> | false |
| shouldFilterItem | <code>(item: ComboBoxItem, value: string) => boolean</code> | () => true |
| translateWithId | <code>(id: any) => string;</code> | - |
| id | <code>string</code> | - |
| name | <code>string</code> | - |
| ref | <code>null &#124; HTMLInputElement</code> | null |
| Prop name | Type | Default |
| :--------------- | :---------------------------------------------------------- | :----------------------------- |
| items | <code>ComboBoxItem[]</code> | [] |
| itemToString | <code>(item: ComboBoxItem) => string</code> | (item: ComboBoxItem) => string |
| selectedIndex | <code>number</code> | -1 |
| value | <code>string</code> | "" |
| size | <code>"sm" &#124; "xl"</code> | - |
| disabled | <code>boolean</code> | false |
| titleText | <code>string</code> | "" |
| placeholder | <code>string</code> | "" |
| helperText | <code>string</code> | "" |
| invalidText | <code>string</code> | "" |
| invalid | <code>boolean</code> | false |
| light | <code>boolean</code> | false |
| open | <code>boolean</code> | false |
| shouldFilterItem | <code>(item: ComboBoxItem, value: string) => boolean</code> | () => true |
| translateWithId | <code>(id: any) => string</code> | - |
| id | <code>string</code> | - |
| name | <code>string</code> | - |
| ref | <code>null &#124; HTMLInputElement</code> | null |
</details>
@ -916,11 +916,11 @@ import { TableHeader } from "carbon-components-svelte";
**API**
| Prop name | Type | Default |
| :-------------- | :------------------------- | :-------- |
| scope | <code>string</code> | "col" |
| translateWithId | <code>() => string;</code> | () => ""; |
| id | <code>string</code> | - |
| Prop name | Type | Default |
| :-------------- | :------------------------ | :------- |
| scope | <code>string</code> | "col" |
| translateWithId | <code>() => string</code> | () => "" |
| id | <code>string</code> | - |
</details>
@ -1093,26 +1093,26 @@ import { Dropdown } from "carbon-components-svelte";
**API**
| Prop name | Type | Default |
| :-------------- | :------------------------------------------- | :--------------------------------------- |
| items | <code>DropdownItem[]</code> | [] |
| itemToString | <code>(item: DropdownItem) => string;</code> | (item: DropdownItem) => DropdownItemText | DropdownItemId; |
| selectedIndex | <code>number</code> | -1 |
| type | <code>"default" &#124; "inline"</code> | "default" |
| size | <code>"sm" &#124; "lg" &#124; "xl"</code> | - |
| open | <code>boolean</code> | false |
| inline | <code>boolean</code> | false |
| light | <code>boolean</code> | false |
| disabled | <code>boolean</code> | false |
| titleText | <code>string</code> | "" |
| invalid | <code>boolean</code> | false |
| invalidText | <code>string</code> | "" |
| helperText | <code>string</code> | "" |
| label | <code>string</code> | - |
| translateWithId | <code>(id: any) => string;</code> | - |
| id | <code>string</code> | - |
| name | <code>string</code> | - |
| ref | <code>null &#124; HTMLButtonElement</code> | null |
| Prop name | Type | Default |
| :-------------- | :------------------------------------------ | :--------------------------------------- |
| items | <code>DropdownItem[]</code> | [] |
| itemToString | <code>(item: DropdownItem) => string</code> | (item: DropdownItem) => DropdownItemText | DropdownItemId |
| selectedIndex | <code>number</code> | -1 |
| type | <code>"default" &#124; "inline"</code> | "default" |
| size | <code>"sm" &#124; "lg" &#124; "xl"</code> | - |
| open | <code>boolean</code> | false |
| inline | <code>boolean</code> | false |
| light | <code>boolean</code> | false |
| disabled | <code>boolean</code> | false |
| titleText | <code>string</code> | "" |
| invalid | <code>boolean</code> | false |
| invalidText | <code>string</code> | "" |
| helperText | <code>string</code> | "" |
| label | <code>string</code> | - |
| translateWithId | <code>(id: any) => string</code> | - |
| id | <code>string</code> | - |
| name | <code>string</code> | - |
| ref | <code>null &#124; HTMLButtonElement</code> | null |
</details>
@ -1158,7 +1158,7 @@ import { FileUploader } from "carbon-components-svelte";
| accept | <code>string[]</code> | [] |
| files | <code>string[]</code> | [] |
| multiple | <code>boolean</code> | false |
| clearFiles | <code>() => any;</code> | () => void; |
| clearFiles | <code>() => any</code> | () => void |
| labelDescription | <code>string</code> | "" |
| labelTitle | <code>string</code> | "" |
| kind | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger"</code> | "primary" |
@ -1216,18 +1216,18 @@ import { FileUploaderDropContainer } from "carbon-components-svelte";
**API**
| Prop name | Type | Default |
| :------------ | :---------------------------------------- | :----------------------- |
| accept | <code>string[]</code> | [] |
| multiple | <code>boolean</code> | false |
| validateFiles | <code>(files: Files) => Files</code> | (files: Files) => Files; |
| labelText | <code>string</code> | "Add file" |
| role | <code>string</code> | "button" |
| disabled | <code>boolean</code> | false |
| tabindex | <code>string</code> | "0" |
| id | <code>string</code> | - |
| name | <code>string</code> | "" |
| ref | <code>null &#124; HTMLInputElement</code> | null |
| Prop name | Type | Default |
| :------------ | :---------------------------------------- | :---------------------- |
| accept | <code>string[]</code> | [] |
| multiple | <code>boolean</code> | false |
| validateFiles | <code>(files: Files) => Files</code> | (files: Files) => Files |
| labelText | <code>string</code> | "Add file" |
| role | <code>string</code> | "button" |
| disabled | <code>boolean</code> | false |
| tabindex | <code>string</code> | "0" |
| id | <code>string</code> | - |
| name | <code>string</code> | "" |
| ref | <code>null &#124; HTMLInputElement</code> | null |
</details>
@ -1395,7 +1395,6 @@ import { Column } from "carbon-components-svelte";
| lg | <code>ColumnBreakpoint</code> | - |
| xlg | <code>ColumnBreakpoint</code> | - |
| max | <code>ColumnBreakpoint</code> | - |
| | <code>string[]</code> | - |
</details>
@ -1592,15 +1591,14 @@ import { ListBoxField } from "carbon-components-svelte";
**API**
| Prop name | Type | Default |
| :-------------- | :------------------------------------------------------ | :-------------- |
| disabled | <code>boolean</code> | false |
| role | <code>string</code> | "combobox" |
| tabindex | <code>string</code> | "-1" |
| | <code>{ close: "close"; open: "open"; }</code> | - |
| translateWithId | <code>(id: ListBoxFieldTranslationId) => string;</code> | (id) => string; |
| id | <code>string</code> | - |
| ref | <code>null &#124; HTMLElement</code> | null |
| Prop name | Type | Default |
| :-------------- | :------------------------------------------------------ | :------------- |
| disabled | <code>boolean</code> | false |
| role | <code>string</code> | "combobox" |
| tabindex | <code>string</code> | "-1" |
| translateWithId | <code>(id: ListBoxFieldTranslationId) => string;</code> | (id) => string |
| id | <code>string</code> | - |
| ref | <code>null &#124; HTMLElement</code> | null |
</details>
@ -1642,11 +1640,10 @@ import { ListBoxMenuIcon } from "carbon-components-svelte";
**API**
| Prop name | Type | Default |
| :-------------- | :--------------------------------------------------------- | :-------------- |
| open | <code>boolean</code> | false |
| | <code>{ close: "close"; open: "open" }</code> | - |
| translateWithId | <code>(id: ListBoxMenuIconTranslationId) => string;</code> | (id) => string; |
| Prop name | Type | Default |
| :-------------- | :-------------------------------------------------------- | :------------- |
| open | <code>boolean</code> | false |
| translateWithId | <code>(id: ListBoxMenuIconTranslationId) => string</code> | (id) => string |
</details>
@ -1689,13 +1686,12 @@ import { ListBoxSelection } from "carbon-components-svelte";
**API**
| Prop name | Type | Default |
| :-------------- | :---------------------------------------------------------------------- | :-------------- |
| selectionCount | <code>\*</code> | - |
| disabled | <code>boolean</code> | false |
| | <code>{ clearAll: "clearAll"; clearSelection: "clearSelection" }</code> | - |
| translateWithId | <code>(id: ListBoxSelectionTranslationId) => string;</code> | (id) => string; |
| ref | <code>null &#124; HTMLElement</code> | null |
| Prop name | Type | Default |
| :-------------- | :--------------------------------------------------------- | :------------- |
| selectionCount | <code>\*</code> | - |
| disabled | <code>boolean</code> | false |
| translateWithId | <code>(id: ListBoxSelectionTranslationId) => string</code> | (id) => string |
| ref | <code>null &#124; HTMLElement</code> | null |
</details>
@ -1802,7 +1798,7 @@ import { MultiSelect } from "carbon-components-svelte";
| Prop name | Type | Default |
| :---------------- | :------------------------------------------------------------------------ | :---------------------------------------------------------- |
| items | <code>MultiSelectItem[]</code> | [] |
| itemToString | <code>(item: MultiSelectItem) => string;</code> | (item: MultiSelectItem) => MultiSelectItemText | MultiSelectItemId; |
| itemToString | <code>(item: MultiSelectItem) => string</code> | (item: MultiSelectItem) => MultiSelectItemText | MultiSelectItemId |
| selectedIds | <code>MultiSelectItemId[]</code> | [] |
| value | <code>string</code> | "" |
| size | <code>"sm" &#124; "lg" &#124; "xl"</code> | - |
@ -1816,7 +1812,7 @@ import { MultiSelect } from "carbon-components-svelte";
| locale | <code>string</code> | "en" |
| placeholder | <code>string</code> | "" |
| sortItem | <code>(a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem;</code> | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem |
| translateWithId | <code>(id: any) => string;</code> | - |
| translateWithId | <code>(id: any) => string</code> | - |
| titleText | <code>string</code> | "" |
| useTitleInItem | <code>boolean</code> | false |
| invalid | <code>boolean</code> | false |
@ -2019,29 +2015,28 @@ import { NumberInput } from "carbon-components-svelte";
**API**
| Prop name | Type | Default |
| :-------------- | :-------------------------------------------------------------- | :---------------------------------------- |
| size | <code>"sm" &#124; "xl"</code> | - |
| value | <code>string</code> | "" |
| step | <code>number</code> | 1 |
| max | <code>number</code> | - |
| min | <code>number</code> | - |
| light | <code>boolean</code> | false |
| readonly | <code>boolean</code> | false |
| mobile | <code>boolean</code> | false |
| allowEmpty | <code>boolean</code> | false |
| disabled | <code>boolean</code> | false |
| iconDescription | <code>string</code> | "" |
| invalid | <code>boolean</code> | false |
| invalidText | <code>string</code> | "Provide invalidText" |
| helperText | <code>string</code> | "" |
| label | <code>string</code> | "" |
| hideLabel | <code>boolean</code> | false |
| translateWithId | <code>(id: NumberInputTranslationId) => string;</code> | (id: NumberInputTranslationId) => string; |
| | <code>{ increment: "increment"; decrement: "decrement" }</code> | - |
| id | <code>string</code> | - |
| name | <code>string</code> | - |
| ref | <code>null &#124; HTMLInputElement</code> | null |
| Prop name | Type | Default |
| :-------------- | :---------------------------------------------------- | :--------------------------------------- |
| size | <code>"sm" &#124; "xl"</code> | - |
| value | <code>string</code> | "" |
| step | <code>number</code> | 1 |
| max | <code>number</code> | - |
| min | <code>number</code> | - |
| light | <code>boolean</code> | false |
| readonly | <code>boolean</code> | false |
| mobile | <code>boolean</code> | false |
| allowEmpty | <code>boolean</code> | false |
| disabled | <code>boolean</code> | false |
| iconDescription | <code>string</code> | "" |
| invalid | <code>boolean</code> | false |
| invalidText | <code>string</code> | "Provide invalidText" |
| helperText | <code>string</code> | "" |
| label | <code>string</code> | "" |
| hideLabel | <code>boolean</code> | false |
| translateWithId | <code>(id: NumberInputTranslationId) => string</code> | (id: NumberInputTranslationId) => string |
| id | <code>string</code> | - |
| name | <code>string</code> | - |
| ref | <code>null &#124; HTMLInputElement</code> | null |
</details>
@ -2163,23 +2158,23 @@ import { Pagination } from "carbon-components-svelte";
**API**
| Prop name | Type | Default |
| :---------------- | :---------------------------------------------------------------- | :--------------------------------------------------- |
| page | <code>number</code> | 1 |
| total | <code>number</code> | 0 |
| disabled | <code>boolean</code> | false |
| forwardText | <code>string</code> | "Next page" |
| backwardText | <code>string</code> | "Previous page" |
| itemsPerPageText | <code>string</code> | "Items per page:" |
| itemText | <code>(min: number, max: number) => string;</code> | (min: number, max: number) => string; |
| itemRangeText | <code>(min: number, max: number, total: number) => string;</code> | (min: number, max: number, total: number) => string; |
| pageInputDisabled | <code>boolean</code> | false |
| pageSize | <code>number</code> | 10 |
| pageSizes | <code>number[]</code> | [10] |
| pagesUnknown | <code>boolean</code> | false |
| pageText | <code>(page: number) => string;</code> | (current: number) => string; |
| pageRangeText | <code>(current: number, total: number) => string;</code> | (current: number, total: number) => string; |
| id | <code>string</code> | - |
| Prop name | Type | Default |
| :---------------- | :--------------------------------------------------------------- | :-------------------------------------------------- |
| page | <code>number</code> | 1 |
| total | <code>number</code> | 0 |
| disabled | <code>boolean</code> | false |
| forwardText | <code>string</code> | "Next page" |
| backwardText | <code>string</code> | "Previous page" |
| itemsPerPageText | <code>string</code> | "Items per page:" |
| itemText | <code>(min: number, max: number) => string</code> | (min: number, max: number) => string |
| itemRangeText | <code>(min: number, max: number, total: number) => string</code> | (min: number, max: number, total: number) => string |
| pageInputDisabled | <code>boolean</code> | false |
| pageSize | <code>number</code> | 10 |
| pageSizes | <code>number[]</code> | [10] |
| pagesUnknown | <code>boolean</code> | false |
| pageText | <code>(page: number) => string</code> | (current: number) => string |
| pageRangeText | <code>(current: number, total: number) => string</code> | (current: number, total: number) => string |
| id | <code>string</code> | - |
</details>
@ -2230,7 +2225,6 @@ import { PaginationNav } from "carbon-components-svelte";
| loop | <code>boolean</code> | false |
| forwardText | <code>string</code> | "Next page" |
| backwardText | <code>string</code> | "Next page" |
| | <code>4</code> | - |
</details>
@ -2595,13 +2589,12 @@ import { SkeletonText } from "carbon-components-svelte";
**API**
| Prop name | Type | Default |
| :-------- | :-------------------- | :------ |
| lines | <code>number</code> | 3 |
| heading | <code>boolean</code> | false |
| paragraph | <code>boolean</code> | false |
| width | <code>string</code> | "100%" |
| | <code>number[]</code> | - |
| Prop name | Type | Default |
| :-------- | :------------------- | :------ |
| lines | <code>number</code> | 3 |
| heading | <code>boolean</code> | false |
| paragraph | <code>boolean</code> | false |
| width | <code>string</code> | "100%" |
</details>

1
package.json
View file

@ -6,6 +6,7 @@
"svelte": "./src/index.js",
"main": "./lib/index.js",
"module": "./lib/index.mjs",
"types": "./types/index.d.ts",
"scripts": {
"start": "start-storybook -p 9090",
"build": "build-storybook",

4
src/ComboBox/ComboBox.svelte
View file

@ -11,7 +11,7 @@
/**
* Override the display of a combobox item
* @type {(item: ComboBoxItem) => string;} [itemToString = (item: ComboBoxItem) => string;]
* @type {(item: ComboBoxItem) => string} [itemToString = (item: ComboBoxItem) => string]
*/
export let itemToString = (item) => item.text || item.id;
@ -89,7 +89,7 @@
/**
* Override the default translation ids
* @type {(id: any) => string;} [translateWithId]
* @type {(id: any) => string} [translateWithId]
*/
export let translateWithId = undefined;

2
src/DataTable/TableHeader.svelte
View file

@ -7,7 +7,7 @@
/**
* Override the default id translations
* @type {() => string;} [translateWithId = () => "";]
* @type {() => string} [translateWithId = () => ""]
*/
export let translateWithId = () => "";

4
src/Dropdown/Dropdown.svelte
View file

@ -13,7 +13,7 @@
/**
* Override the display of a dropdown item
* @type {(item: DropdownItem) => string;} [itemToString = (item: DropdownItem) => DropdownItemText | DropdownItemId;]
* @type {(item: DropdownItem) => string} [itemToString = (item: DropdownItem) => DropdownItemText | DropdownItemId]
*/
export let itemToString = (item) => item.text || item.id;
@ -91,7 +91,7 @@
/**
* Override the default translation ids
* @type {(id: any) => string;} [translateWithId]
* @type {(id: any) => string} [translateWithId]
*/
export let translateWithId = undefined;

2
src/FileUploader/FileUploader.svelte
View file

@ -25,7 +25,7 @@
/**
* Override the default behavior of clearing the array of uploaded files
* @type {() => any;} [clearFiles = () => void;]
* @type {() => any} [clearFiles = () => void]
*/
export const clearFiles = () => {
files = [];

2
src/FileUploader/FileUploaderDropContainer.svelte
View file

@ -18,7 +18,7 @@
/**
* Override the default behavior of validating uploaded files
* The default behavior does not validate files
* @type {(files: Files) => Files} [validateFiles = (files: Files) => Files;]
* @type {(files: Files) => Files} [validateFiles = (files: Files) => Files]
*/
export let validateFiles = (files) => files;

2
src/Grid/Column.svelte
View file

@ -32,7 +32,7 @@
/**
* @typedef {boolean | number} ColumnSize
* @typedef {{span?: ColumnSize: offset: number;}} ColumnSizeDescriptor
* @typedef {{span?: ColumnSize; offset: number;}} ColumnSizeDescriptor
* @typedef {ColumnSize | ColumnSizeDescriptor} ColumnBreakpoint
*/

2
src/ListBox/ListBoxField.svelte
View file

@ -30,7 +30,7 @@
/**
* Override the default translation ids
* @type {(id: ListBoxFieldTranslationId) => string;} [translateWithId = (id) => string;]
* @type {(id: ListBoxFieldTranslationId) => string} [translateWithId = (id) => string]
*/
export let translateWithId = (id) => defaultTranslations[id];

2
src/ListBox/ListBoxMenuIcon.svelte
View file

@ -18,7 +18,7 @@
/**
* Override the default translation ids
* @type {(id: ListBoxMenuIconTranslationId) => string;} [translateWithId = (id) => string;]
* @type {(id: ListBoxMenuIconTranslationId) => string} [translateWithId = (id) => string]
*/
export let translateWithId = (id) => defaultTranslations[id];

4
src/ListBox/ListBoxSelection.svelte
View file

@ -1,7 +1,7 @@
<script>
/**
* Specify the number of selected items
* @type {*} [selectionCount]
* @type {any} [selectionCount]
*/
export let selectionCount = undefined;
@ -27,7 +27,7 @@
/**
* Override the default translation ids
* @type {(id: ListBoxSelectionTranslationId) => string;} [translateWithId = (id) => string;]
* @type {(id: ListBoxSelectionTranslationId) => string} [translateWithId = (id) => string]
*/
export let translateWithId = (id) => defaultTranslations[id];

8
src/MultiSelect/MultiSelect.svelte
View file

@ -13,7 +13,7 @@
/**
* Override the display of a multiselect item
* @type {(item: MultiSelectItem) => string;} [itemToString = (item: MultiSelectItem) => MultiSelectItemText | MultiSelectItemId;]
* @type {(item: MultiSelectItem) => string} [itemToString = (item: MultiSelectItem) => MultiSelectItemText | MultiSelectItemId]
*/
export let itemToString = (item) => item.text || item.id;
@ -62,7 +62,7 @@
/**
* Override the filtering logic
* The default filtering is an exact string comparison
* @type {(item: MultiSelectItem, value: string) => string;} [filterItem = ((item: MultiSelectItem, value: string) => string;)]
* @type {(item: MultiSelectItem, value: string) => string} [filterItem = (item: MultiSelectItem, value: string) => string]
*/
export let filterItem = (item, value) =>
item.text.toLowerCase().includes(value.toLowerCase());
@ -94,14 +94,14 @@
/**
* Override the sorting logic
* The default sorting compare the item text value
* @type {(a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem;} [sortItem = (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem]
* @type {(a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem} [sortItem = (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem]
*/
export let sortItem = (a, b) =>
a.text.localeCompare(b.text, locale, { numeric: true });
/**
* Override the default translation ids
* @type {(id: any) => string;} [translateWithId]
* @type {(id: any) => string} [translateWithId]
*/
export let translateWithId = undefined;

4
src/NumberInput/NumberInput.svelte
View file

@ -1,6 +1,4 @@
<script>
/**
* Set the size of the input
* @type {"sm" | "xl"} [size]
@ -103,7 +101,7 @@
/**
* Override the default translation ids
* @type {(id: NumberInputTranslationId) => string;} [translateWithId = (id: NumberInputTranslationId) => string;]
* @type {(id: NumberInputTranslationId) => string} [translateWithId = (id: NumberInputTranslationId) => string]
*/
export let translateWithId = (id) => defaultTranslations[id];

8
src/Pagination/Pagination.svelte
View file

@ -37,13 +37,13 @@
/**
* Override the item text
* @type {(min: number, max: number) => string;} [itemText = (min: number, max: number) => string;]
* @type {(min: number, max: number) => string} [itemText = (min: number, max: number) => string]
*/
export let itemText = (min, max) => `${min}–${max} items`;
/**
* Override the item range text
* @type {(min: number, max: number, total: number) => string;} [itemRangeText = (min: number, max: number, total: number) => string;]
* @type {(min: number, max: number, total: number) => string} [itemRangeText = (min: number, max: number, total: number) => string]
*/
export let itemRangeText = (min, max, total) =>
`${min}–${max} of ${total} items`;
@ -74,13 +74,13 @@
/**
* Override the page text
* @type {(page: number) => string;} [pageText = (current: number) => string;]
* @type {(page: number) => string} [pageText = (current: number) => string]
*/
export let pageText = (page) => `page ${page}`;
/**
* Override the page range text
* @type {(current: number, total: number) => string;} [pageRangeText = (current: number, total: number) => string;]
* @type {(current: number, total: number) => string} [pageRangeText = (current: number, total: number) => string]
*/
export let pageRangeText = (current, total) => `of ${total} pages`;

1474
types/index.d.ts vendored Normal file
View file

File diff suppressed because it is too large Load diff