diff --git a/CHANGELOG.md b/CHANGELOG.md index 106ba5d3..5be3f38f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,84 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 +## [0.64.0](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.64.0) - 2022-05-14 + +**Breaking Changes** + +- set `flatpickrProps.static` in `DatePicker` to be true by default +- use data attribute instead of id for `DataTable` headers/rows + +**Features** + +- support custom column widths in `DataTable` +- dispatch "expand" and "collapse" events in `CodeSnippet` + +**Fixes** + +- use `@see` tag for flatpickr options link in `DatePicker` +- pressing "Enter" in `DatePicker` should update the value +- dispatched event type without detail should be `null`, not `any` +- type missing "open" event in `HeaderAction` +- use small button in multi-line `CodeSnippet` + +**Documentation** + +- make calendar variants of `DatePicker` more prominent +- add `DataTable` example "Custom column widths" +- add `CodeSnippet` examples "Expanded by default" and "Reactive example" + +## [0.63.8](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.8) - 2022-05-07 + +**Fixes** + +- elevate `Toolbar` z-index so overflow menu is not clipped by the table + +## [0.63.7](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.7) - 2022-05-04 + +**Fixes** + +- strongly type `translateWithId` prop in `Dropdown` + +## [0.63.6](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.6) - 2022-05-04 + +**Fixes** + +- add `translateWithIdsSelection` prop to `ComboBox`, `MultiSelect` to customize clear selection description +- use default values in `ListBoxMenuIcon` if `translateWithIds` is undefined +- use default values in `ListBoxSelection` if `translateWithIds` is undefined + +## [0.63.5](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.5) - 2022-05-02 + +**Fixes** + +- dispatch "change" event in `Tabs` only if selected index has changed + +## [0.63.4](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.4) - 2022-04-30 + +**Fixes** + +- add missing `"2x3"` ratio value to `AspectRatio` +- fix typo in `ToolbarSearch` shouldFilterRows type annotation + +**Documentation** + +- correctly generate icon, action imports in examples +- remove unnecessary `tooltipBodyId` in `Tooltip` examples +- add `DataTable` "Expandable and selectable" example +- add `DataTable` "Batch selection" example + +## [0.63.3](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.3) - 2022-04-28 + +**Fixes** + +- fix `FileUploaderItem` regression where `delete` event should be dispatched if status is "edit" + +**Documentation** + +- add `FileUploader` "Item (edit)" example +- revise `FileUploader` "Item (edit status, invalid state)" example to include `on:delete` usage +- add `FileUploader` "Item (edit status, invalid state with subject, body)" example + ## [0.63.2](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.63.2) - 2022-04-23 **Fixes** diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index fa1956eb..8a78cc4c 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1,6 +1,6 @@ # Component Index -> 165 components exported from carbon-components-svelte@0.63.2. +> 165 components exported from carbon-components-svelte@0.64.0. ## Components @@ -255,9 +255,9 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ | -| ratio | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | "2x1" | Specify the aspect ratio | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ | +| ratio | let | No | "2x1" | "2x3" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | "2x1" | Specify the aspect ratio | ### Slots @@ -563,14 +563,16 @@ None. ### Events -| Event name | Type | Detail | -| :----------- | :--------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| animationend | forwarded | -- | -| copy | dispatched | -- | +| Event name | Type | Detail | +| :----------- | :--------- | :---------------- | +| expand | dispatched | null | +| collapse | dispatched | null | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| animationend | forwarded | -- | +| copy | dispatched | null | ## `CodeSnippetSkeleton` @@ -649,31 +651,32 @@ export interface ComboBoxItem { ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :-------------------- | :------- | :---------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | -| listRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the list HTML element | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| open | let | Yes | boolean | false | Set to `true` to open the combobox menu dropdown | -| value | let | Yes | string | "" | Specify the selected combobox value | -| selectedId | let | Yes | ComboBoxItemId | undefined | Set the selected item by value id | -| items | let | No | ComboBoxItem[] | [] | Set the combobox items | -| itemToString | let | No | (item: ComboBoxItem) => string | (item) => item.text || item.id | Override the display of a combobox item | -| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the combobox dropdown menu | -| size | let | No | "sm" | "xl" | undefined | Set the size of the combobox | -| disabled | let | No | boolean | false | Set to `true` to disable the combobox | -| titleText | let | No | string | "" | Specify the title text of the combobox | -| placeholder | let | No | string | "" | Specify the placeholder text | -| helperText | let | No | string | "" | Specify the helper text | -| invalidText | let | No | string | "" | Specify the invalid state text | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| warn | let | No | boolean | false | Set to `true` to indicate an warning state | -| warnText | let | No | string | "" | Specify the warning state text | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| shouldFilterItem | let | No | (item: ComboBoxItem, value: string) => boolean | () => true | Determine if an item should be filtered given the current combobox value | -| translateWithId | let | No | (id: any) => string | undefined | Override the default translation ids | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | -| name | let | No | string | undefined | Specify a name attribute for the input | -| clear | function | No | (options?: { focus?: boolean; }) => void | () => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = ""; if (options?.focus !== false) ref?.focus(); } | Clear the combo box programmatically | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :----------------------- | :-------------------- | :------- | :---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| listRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the list HTML element | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| open | let | Yes | boolean | false | Set to `true` to open the combobox menu dropdown | +| value | let | Yes | string | "" | Specify the selected combobox value | +| selectedId | let | Yes | ComboBoxItemId | undefined | Set the selected item by value id | +| items | let | No | ComboBoxItem[] | [] | Set the combobox items | +| itemToString | let | No | (item: ComboBoxItem) => string | (item) => item.text || item.id | Override the display of a combobox item | +| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the combobox dropdown menu | +| size | let | No | "sm" | "xl" | undefined | Set the size of the combobox | +| disabled | let | No | boolean | false | Set to `true` to disable the combobox | +| titleText | let | No | string | "" | Specify the title text of the combobox | +| placeholder | let | No | string | "" | Specify the placeholder text | +| helperText | let | No | string | "" | Specify the helper text | +| invalidText | let | No | string | "" | Specify the invalid state text | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| warn | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | let | No | string | "" | Specify the warning state text | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| shouldFilterItem | let | No | (item: ComboBoxItem, value: string) => boolean | () => true | Determine if an item should be filtered given the current combobox value | +| translateWithId | let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.
Defaults to "Open menu" when closed and "Close menu" when open | +| translateWithIdSelection | let | No | (id: "clearSelection") => string | undefined | Override the label of the clear button when the input has a selection.
Defaults to "Clear selected item" since a combo box can only have on selection. | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | +| name | let | No | string | undefined | Specify a name attribute for the input | +| clear | function | No | (options?: { focus?: boolean; }) => void | () => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = ""; if (options?.focus !== false) ref?.focus(); } | Clear the combo box programmatically | ### Slots @@ -723,10 +726,10 @@ export interface ComboBoxItem { | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | -| submit | dispatched | -- | -| click:button--primary | dispatched | -- | -| close | dispatched | -- | -| open | dispatched | -- | +| submit | dispatched | null | +| click:button--primary | dispatched | null | +| close | dispatched | null | +| open | dispatched | null | ## `Content` @@ -796,7 +799,7 @@ None. | open | dispatched | HTMLElement | | click | forwarded | -- | | keydown | forwarded | -- | -| close | dispatched | -- | +| close | dispatched | null | ## `ContextMenuDivider` @@ -859,12 +862,12 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :----- | -| keydown | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| click | dispatched | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :---------------- | +| keydown | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| click | dispatched | null | ## `ContextMenuRadioGroup` @@ -903,11 +906,11 @@ None. ### Events -| Event name | Type | Detail | -| :----------- | :--------- | :----- | -| click | forwarded | -- | -| animationend | forwarded | -- | -| copy | dispatched | -- | +| Event name | Type | Detail | +| :----------- | :--------- | :---------------- | +| click | forwarded | -- | +| animationend | forwarded | -- | +| copy | dispatched | null | ## `DataTable` @@ -924,6 +927,8 @@ export interface DataTableEmptyHeader { display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1); columnMenu?: boolean; + width?: string; + minWidth?: string; } export interface DataTableNonEmptyHeader { @@ -932,6 +937,8 @@ export interface DataTableNonEmptyHeader { display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1); columnMenu?: boolean; + width?: string; + minWidth?: string; } export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader; @@ -1043,7 +1050,7 @@ None. | short | let | No | boolean | false | Set to `true` to use the short variant | | light | let | No | boolean | false | Set to `true` to enable the light variant | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the date picker element | -| flatpickrProps | let | No | import("flatpickr/dist/types/options").Options | {} | Override the options passed to the Flatpickr instance
https://flatpickr.js.org/options | +| flatpickrProps | let | No | import("flatpickr/dist/types/options").Options | { static: true } | Override the options passed to the Flatpickr instance.
@see https://flatpickr.js.org/options | ### Slots @@ -1138,30 +1145,30 @@ export interface DropdownItem { ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------------------------------ | ----------------------------------------------------- | --------------------------------------------- | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | -| inline | let | Yes | boolean | false | Set to `true` to use the inline variant | -| open | let | Yes | boolean | false | Set to `true` to open the dropdown | -| selectedId | let | Yes | DropdownItemId | undefined | Specify the selected item id | -| items | let | No | DropdownItem[] | [] | Set the dropdown items | -| itemToString | let | No | (item: DropdownItem) => string | (item) => item.text || item.id | Override the display of a dropdown item | -| type | let | No | "default" | "inline" | "default" | Specify the type of dropdown | -| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the dropdown menu | -| size | let | No | "sm" | "lg" | "xl" | undefined | Specify the size of the dropdown field | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | let | No | boolean | false | Set to `true` to disable the dropdown | -| titleText | let | No | string | "" | Specify the title text | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| invalidText | let | No | string | "" | Specify the invalid state text | -| warn | let | No | boolean | false | Set to `true` to indicate an warning state | -| warnText | let | No | string | "" | Specify the warning state text | -| helperText | let | No | string | "" | Specify the helper text | -| label | let | No | string | undefined | Specify the list box label | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | -| translateWithId | let | No | (id: any) => string | undefined | Override the default translation ids | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | -| name | let | No | string | undefined | Specify a name attribute for the list box | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | +| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | +| inline | let | Yes | boolean | false | Set to `true` to use the inline variant | +| open | let | Yes | boolean | false | Set to `true` to open the dropdown | +| selectedId | let | Yes | DropdownItemId | undefined | Specify the selected item id | +| items | let | No | DropdownItem[] | [] | Set the dropdown items | +| itemToString | let | No | (item: DropdownItem) => string | (item) => item.text || item.id | Override the display of a dropdown item | +| type | let | No | "default" | "inline" | "default" | Specify the type of dropdown | +| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the dropdown menu | +| size | let | No | "sm" | "lg" | "xl" | undefined | Specify the size of the dropdown field | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | let | No | boolean | false | Set to `true` to disable the dropdown | +| titleText | let | No | string | "" | Specify the title text | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | let | No | string | "" | Specify the invalid state text | +| warn | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | let | No | string | "" | Specify the warning state text | +| helperText | let | No | string | "" | Specify the helper text | +| label | let | No | string | undefined | Specify the list box label | +| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | +| translateWithId | let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.
Defaults to "Open menu" when closed and "Close menu" when open | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | +| name | let | No | string | undefined | Specify a name attribute for the list box | ### Slots @@ -1605,10 +1612,11 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :----- | -| click | forwarded | -- | -| close | dispatched | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :---------------- | +| open | dispatched | null | +| close | dispatched | null | +| click | forwarded | -- | ## `HeaderActionLink` @@ -1884,13 +1892,13 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| success | dispatched | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :---------------- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| success | dispatched | null | ## `InlineNotification` @@ -2231,10 +2239,10 @@ None. | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | -| submit | dispatched | -- | -| click:button--primary | dispatched | -- | -| close | dispatched | -- | -| open | dispatched | -- | +| submit | dispatched | null | +| click:button--primary | dispatched | null | +| close | dispatched | null | +| open | dispatched | null | ## `ModalBody` @@ -2325,42 +2333,43 @@ export interface MultiSelectItem { ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | -| highlightedId | let | Yes | null | MultiSelectItemId | null | Id of the highlighted ListBoxMenuItem | -| selectionRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the selection element | -| fieldRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the field box element | -| multiSelectRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the outer div element | -| inputRef | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| open | let | Yes | boolean | false | Set to `true` to open the dropdown | -| value | let | Yes | string | "" | Specify the multiselect value | -| selectedIds | let | Yes | MultiSelectItemId[] | [] | Set the selected ids | -| items | let | Yes | MultiSelectItem[] | [] | Set the multiselect items | -| itemToString | let | No | (item: MultiSelectItem) => any | (item) => item.text || item.id | Override the display of a multiselect item | -| itemToInput | let | No | (item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; } | (item) => {} | Override the item name, title, labelText passed to the checkbox input | -| size | let | No | "sm" | "lg" | "xl" | undefined | Set the size of the combobox | -| type | let | No | "default" | "inline" | "default" | Specify the type of multiselect | -| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the multiselect dropdown menu | -| selectionFeedback | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items | -| disabled | let | No | boolean | false | Set to `true` to disable the dropdown | -| filterable | let | No | boolean | false | Set to `true` to filter items | -| filterItem | let | No | (item: MultiSelectItem, value: string) => string | (item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase()) | Override the filtering logic
The default filtering is an exact string comparison | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| locale | let | No | string | "en" | Specify the locale | -| placeholder | let | No | string | "" | Specify the placeholder text | -| sortItem | let | No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void) | (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) | Override the sorting logic
The default sorting compare the item text value | -| translateWithId | let | No | (id: any) => string | undefined | Override the default translation ids | -| titleText | let | No | string | "" | Specify the title text | -| useTitleInItem | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| invalidText | let | No | string | "" | Specify the invalid state text | -| warn | let | No | boolean | false | Set to `true` to indicate an warning state | -| warnText | let | No | string | "" | Specify the warning state text | -| helperText | let | No | string | "" | Specify the helper text | -| label | let | No | string | "" | Specify the list box label | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | -| name | let | No | string | undefined | Specify a name attribute for the select | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :----------------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| highlightedId | let | Yes | null | MultiSelectItemId | null | Id of the highlighted ListBoxMenuItem | +| selectionRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the selection element | +| fieldRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the field box element | +| multiSelectRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the outer div element | +| inputRef | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| open | let | Yes | boolean | false | Set to `true` to open the dropdown | +| value | let | Yes | string | "" | Specify the multiselect value | +| selectedIds | let | Yes | MultiSelectItemId[] | [] | Set the selected ids | +| items | let | Yes | MultiSelectItem[] | [] | Set the multiselect items | +| itemToString | let | No | (item: MultiSelectItem) => any | (item) => item.text || item.id | Override the display of a multiselect item | +| itemToInput | let | No | (item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; } | (item) => {} | Override the item name, title, labelText passed to the checkbox input | +| size | let | No | "sm" | "lg" | "xl" | undefined | Set the size of the combobox | +| type | let | No | "default" | "inline" | "default" | Specify the type of multiselect | +| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the multiselect dropdown menu | +| selectionFeedback | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items | +| disabled | let | No | boolean | false | Set to `true` to disable the dropdown | +| filterable | let | No | boolean | false | Set to `true` to filter items | +| filterItem | let | No | (item: MultiSelectItem, value: string) => string | (item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase()) | Override the filtering logic
The default filtering is an exact string comparison | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| locale | let | No | string | "en" | Specify the locale | +| placeholder | let | No | string | "" | Specify the placeholder text | +| sortItem | let | No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void) | (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) | Override the sorting logic
The default sorting compare the item text value | +| translateWithId | let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.
Defaults to "Open menu" when closed and "Close menu" when open | +| translateWithIdSelection | let | No | (id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string | undefined | Override the label of the clear button when the input has a selection.
Defaults to "Clear selected item" and "Clear all items" if more than one item is selected | +| titleText | let | No | string | "" | Specify the title text | +| useTitleInItem | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | let | No | string | "" | Specify the invalid state text | +| warn | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | let | No | string | "" | Specify the warning state text | +| helperText | let | No | string | "" | Specify the helper text | +| label | let | No | string | "" | Specify the list box label | +| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | +| name | let | No | string | undefined | Specify a name attribute for the select | ### Slots @@ -2780,9 +2789,9 @@ None. ### Events -| Event name | Type | Detail | -| :------------ | :--------- | :----- | -| click:outside | dispatched | -- | +| Event name | Type | Detail | +| :------------ | :--------- | :---------------- | +| click:outside | dispatched | null | ## `ProgressBar` @@ -3096,7 +3105,7 @@ None. | blur | forwarded | -- | | keydown | forwarded | -- | | keyup | forwarded | -- | -| clear | dispatched | -- | +| clear | dispatched | null | ## `SearchSkeleton` @@ -3743,13 +3752,14 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------- | :--------------- | :------- | :------------------------------------------------------------------ | ---------------------- | --------------------------------------- | -| size | let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the table | -| zebra | let | No | boolean | false | Set to `true` to use zebra styles | -| useStaticWidth | let | No | boolean | false | Set to `true` to use static width | -| sortable | let | No | boolean | false | Set to `true` for the sortable variant | -| stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------- | :--------------- | :------- | :------------------------------------------------------------------ | ---------------------- | ---------------------------------------------- | +| size | let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the table | +| zebra | let | No | boolean | false | Set to `true` to use zebra styles | +| useStaticWidth | let | No | boolean | false | Set to `true` to use static width | +| sortable | let | No | boolean | false | Set to `true` for the sortable variant | +| stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header | +| tableStyle | let | No | string | undefined | Set the style attribute on the `table` element | ### Slots @@ -3961,13 +3971,13 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| close | dispatched | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :---------------- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| close | dispatched | null | ## `TagSkeleton` @@ -4462,15 +4472,15 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| expanded | let | Yes | boolean | false | Set to `true` to expand the search bar | -| value | let | Yes | number | string | "" | Specify the value of the search input | -| persistent | let | No | boolean | false | Set to `true` to keep the search bar expanded | -| disabled | let | No | boolean | false | Set to `true` to disable the search bar | -| shouldFilterRows | let | No | boolean | ((rows: import("./DataTable.svelte").DataTableRow, value: number | string) => boolean) | false | Set to `true` to filter table rows using the search value.

If `true`, the default search excludes `id`, `cells` fields and
only does a basic comparison on string and number type cell values.

To implement your own client-side filtering, pass a function
that accepts a row and value and returns a boolean. | -| tabindex | let | No | string | "0" | Specify the tabindex | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| expanded | let | Yes | boolean | false | Set to `true` to expand the search bar | +| value | let | Yes | number | string | "" | Specify the value of the search input | +| persistent | let | No | boolean | false | Set to `true` to keep the search bar expanded | +| disabled | let | No | boolean | false | Set to `true` to disable the search bar | +| shouldFilterRows | let | No | boolean | ((row: import("./DataTable.svelte").DataTableRow, value: number | string) => boolean) | false | Set to `true` to filter table rows using the search value.

If `true`, the default search excludes `id`, `cells` fields and
only does a basic comparison on string and number type cell values.

To implement your own client-side filtering, pass a function
that accepts a row and value and returns a boolean. | +| tabindex | let | No | string | "0" | Specify the tabindex | ### Slots diff --git a/carbon.yml b/carbon.yml new file mode 100644 index 00000000..24ee94fe --- /dev/null +++ b/carbon.yml @@ -0,0 +1,699 @@ +# yaml-language-server: $schema=https://unpkg.com/@carbon-platform/schemas@v1/carbon-resources.schema.json +library: + id: carbon-components-svelte + name: Carbon Components Svelte + description: Svelte implementation of Carbon Components. + externalDocsUrl: https://carbon-components-svelte.onrender.com + inherits: carbon-styles +assets: + accordion: + status: stable + externalDocsUrl: https://www.carbondesignsystem.com/components/accordion/usage + framework: svelte + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/Accordion + aspect-ratio: + status: stable + framework: svelte + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/AspectRatio + breadcrumb: + status: stable + externalDocsUrl: https://www.carbondesignsystem.com/components/breadcrumb/usage + framework: svelte + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/Breadcrumb + breakpoint: + name: Breakpoint + status: stable + type: component + platform: web + framework: svelte + thumbnailPath: './thumbnails/breakpoint.svg' + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/Breakpoint + tags: + - shell + button: + status: stable + externalDocsUrl: https://www.carbondesignsystem.com/components/button/usage + framework: svelte + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/Button + button-set: + name: Button set + description: Buttons in a button set are juxtaposed by default. + status: stable + type: component + platform: web + framework: svelte + thumbnailPath: './thumbnails/button-set.svg' + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/ButtonSet + tags: + - input-control + checkbox: + status: stable + externalDocsUrl: https://www.carbondesignsystem.com/components/checkbox/usage + framework: svelte + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/Checkbox + clickable-tile: + name: Clickable tile + status: stable + type: component + platform: web + framework: svelte + thumbnailPath: './thumbnails/clickable-tile.svg' + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/ClickableTile + tags: + - contextual-navigation + code-snippet: + status: stable + externalDocsUrl: https://www.carbondesignsystem.com/components/code-snippet/usage + framework: svelte + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/CodeSnippet + combo-box: + status: stable + framework: svelte + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/ComboBox + composed-modal: + name: Composed modal + status: stable + type: component + platform: web + framework: svelte + thumbnailPath: './thumbnails/composed-modal.svg' + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/ComposedModal + tags: + - input-control + content-switcher: + status: stable + externalDocsUrl: https://www.carbondesignsystem.com/components/content-switcher/usage + framework: svelte + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/ContentSwitcher + context-menu: + name: Context menu + status: stable + type: component + platform: web + framework: svelte + thumbnailPath: './thumbnails/context-menu.svg' + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/ContextMenu + tags: + - input-control + - contextual-navigation + copy-button: + status: stable + framework: svelte + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/CopyButton + data-table: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/data-table/usage + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/DataTable + date-picker: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/date-picker/usage + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/DatePicker + dropdown: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/dropdown/usage + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/Dropdown + expandable-tile: + name: Expandable tile + status: stable + type: component + platform: web + framework: svelte + thumbnailPath: './thumbnails/expandable-tile.svg' + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/ExpandableTile + tags: + - data-display + - content-element + file-uploader: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/file-uploader/usage + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/FileUploader + fluid-form: + name: Fluid form + status: stable + type: component + platform: web + framework: svelte + thumbnailPath: './thumbnails/fluid-form.svg' + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/FluidForm + tags: + - form + form: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/form/usage + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/Form + grid: + status: stable + framework: svelte + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/Grid + image-loader: + name: Image loader + status: stable + type: component + platform: web + framework: svelte + thumbnailPath: './thumbnails/image-loader.svg' + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/ImageLoader + tags: + - shell + - media + - media + inline-loading: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/inline-loading/usage + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/InlineLoading + inline-notification: + name: Inline notification + status: stable + type: component + platform: web + framework: svelte + thumbnailPath: './thumbnails/inline-loading.svg' + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/InlineNotification + tags: + - system-feedback + link: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/link/usage + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/Link + loading: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/loading/usage + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/Loading + local-storage: + name: Local storage + status: stable + type: component + platform: web + framework: svelte + thumbnailPath: './thumbnails/local-storage.svg' + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/LocalStorage + tags: + - input-control + modal: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/modal/usage + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/Modal + multiselect: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/dropdown/usage/#multiselect + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/MultiSelect + number-input: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/number-input/usage + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/NumberInput + ordered-list: + name: Ordered list + status: stable + type: component + platform: web + framework: svelte + thumbnailPath: './thumbnails/ordered-list.svg' + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/OrderedList + tags: + - data-display + overflow-menu: + name: Overflow menu + status: stable + type: component + platform: web + framework: svelte + thumbnailPath: '' + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/OverflowMenu + tags: + - input-control + pagination: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/pagination/usage + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/Pagination + pagination-nav: + status: stable + framework: svelte + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/PaginationNav + password-input: + name: Password input + status: stable + type: component + platform: web + framework: svelte + thumbnailPath: './thumbnails/password-input.svg' + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/PasswordInput + tags: + - form + - contextual-navigation + popover: + status: stable + framework: svelte + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/Popover + progress-bar: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/progress-bar/usage + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/ProgressBar + progress-indicator: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/progress-indicator/usage + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/ProgressIndicator + radio-button: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/radio-button/usage + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/RadioButton + radio-tile: + name: Radio tile + status: stable + type: component + platform: web + framework: svelte + thumbnailPath: './thumbnails/radio-tile.svg' + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/RadioTile + tags: + - input-control + recursive-list: + name: Recursive list + status: stable + type: component + platform: web + framework: svelte + thumbnailPath: './thumbnails/recursive-list.svg' + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/RecursiveList + tags: + - data-display + search: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/search/usage + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/Search + select: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/select/usage + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/Select + selectable-tile: + name: Selectable tile + status: stable + type: component + platform: web + framework: svelte + thumbnailPath: './thumbnails/selectable-tile.svg' + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/SelectableTile + tags: + - input-control + skeleton-placeholder: + name: Skeleton placeholder + status: stable + type: component + platform: web + framework: svelte + thumbnailPath: './thumbnails/skeleton-placeholder.svg' + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/SkeletonPlaceholder + tags: + - system-feedback + skeleton-text: + name: Skeleton text + status: stable + type: component + platform: web + framework: svelte + thumbnailPath: './thumbnails/skeleton-text.svg' + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/SkeletonText + tags: + - shell + slider: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/slider/usage + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/Slider + structured-list: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/structured-list/usage + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/StructuredList + tabs: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/tabs/usage + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/Tabs + tag: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/tag/usage + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/Tag + text-area: + status: stable + framework: svelte + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/TextArea + text-input: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/text-input/usage + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/TextInput + theme: + status: stable + framework: svelte + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/Theme + tile: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/tile/usage + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/Tile + time-picker: + status: stable + framework: svelte + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/TimePicker + toast-notification: + name: Toast notification + status: stable + type: component + platform: web + framework: svelte + thumbnailPath: './thumbnails/toast-notification.svg' + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/ToastNotification + tags: + - input-control + toggle: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/toggle/usage + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/Toggle + tooltip: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/tooltip/usage + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/Tooltip + tooltip-definition: + status: stable + framework: svelte + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/TooltipDefinition + tooltip-icon: + name: Tootlip icon + status: stable + type: component + platform: web + framework: svelte + thumbnailPath: './thumbnails/tooltip-icon.svg' + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/TooltipIcon + tags: + - content-element + tree-view: + status: stable + framework: svelte + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/TreeView + truncate: + name: Truncate + status: stable + type: component + platform: web + framework: svelte + thumbnailPath: './thumbnails/truncate.svg' + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/Truncate + tags: + - data-display + ui-shell-header: + status: stable + framework: svelte + externalDocsUrl: https://www.carbondesignsystem.com/components/UI-shell-header/usage + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/UIShell + unordered-list: + name: Unordered list + status: stable + type: component + platform: web + framework: svelte + thumbnailPath: './thumbnails/unordered-list.svg' + demoLinks: + - type: storybook + name: Storybook + action: link + url: https://carbon-components-svelte.onrender.com/components/UnorderedList + tags: + - data-display + diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index fa485197..1aee0035 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -217,7 +217,7 @@ "name": "ratio", "kind": "let", "description": "Specify the aspect ratio", - "type": "\"2x1\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"3x2\" | \"9x16\" | \"1x2\"", + "type": "\"2x1\" | \"2x3\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"3x2\" | \"9x16\" | \"1x2\"", "value": "\"2x1\"", "isFunction": false, "isFunctionDeclaration": false, @@ -1158,6 +1158,8 @@ } ], "events": [ + { "type": "dispatched", "name": "expand", "detail": "null" }, + { "type": "dispatched", "name": "collapse", "detail": "null" }, { "type": "forwarded", "name": "click", @@ -1183,7 +1185,7 @@ "name": "animationend", "element": "CopyButton" }, - { "type": "dispatched", "name": "copy" } + { "type": "dispatched", "name": "copy", "detail": "null" } ], "typedefs": [], "rest_props": { "type": "InlineComponent", "name": "CodeSnippetSkeleton" } @@ -1555,8 +1557,18 @@ { "name": "translateWithId", "kind": "let", - "description": "Override the default translation ids", - "type": "(id: any) => string", + "description": "Override the chevron icon label based on the open state.\nDefaults to \"Open menu\" when closed and \"Close menu\" when open", + "type": "(id: import(\"../ListBox/ListBoxMenuIcon.svelte\").ListBoxMenuIconTranslationId) => string", + "isFunction": false, + "isFunctionDeclaration": false, + "constant": false, + "reactive": false + }, + { + "name": "translateWithIdSelection", + "kind": "let", + "description": "Override the label of the clear button when the input has a selection.\nDefaults to \"Clear selected item\" since a combo box can only have on selection.", + "type": "(id: \"clearSelection\") => string", "isFunction": false, "isFunctionDeclaration": false, "constant": false, @@ -1747,10 +1759,14 @@ { "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "mouseleave", "element": "div" }, - { "type": "dispatched", "name": "submit" }, - { "type": "dispatched", "name": "click:button--primary" }, - { "type": "dispatched", "name": "close" }, - { "type": "dispatched", "name": "open" } + { "type": "dispatched", "name": "submit", "detail": "null" }, + { + "type": "dispatched", + "name": "click:button--primary", + "detail": "null" + }, + { "type": "dispatched", "name": "close", "detail": "null" }, + { "type": "dispatched", "name": "open", "detail": "null" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "div" } @@ -1881,7 +1897,7 @@ { "type": "dispatched", "name": "open", "detail": "HTMLElement" }, { "type": "forwarded", "name": "click", "element": "ul" }, { "type": "forwarded", "name": "keydown", "element": "ul" }, - { "type": "dispatched", "name": "close" } + { "type": "dispatched", "name": "close", "detail": "null" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "ul" } @@ -2066,7 +2082,7 @@ { "type": "forwarded", "name": "keydown", "element": "li" }, { "type": "forwarded", "name": "mouseenter", "element": "li" }, { "type": "forwarded", "name": "mouseleave", "element": "li" }, - { "type": "dispatched", "name": "click" } + { "type": "dispatched", "name": "click", "detail": "null" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "li" } @@ -2167,7 +2183,7 @@ "events": [ { "type": "forwarded", "name": "click", "element": "button" }, { "type": "forwarded", "name": "animationend", "element": "button" }, - { "type": "dispatched", "name": "copy" } + { "type": "dispatched", "name": "copy", "detail": "null" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "button" } @@ -2479,14 +2495,14 @@ "ts": "type DataTableValue = any" }, { - "type": "{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }", + "type": "{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }", "name": "DataTableEmptyHeader", - "ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }" + "ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }" }, { - "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }", + "type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }", "name": "DataTableNonEmptyHeader", - "ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }" + "ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; width?: string; minWidth?: string; }" }, { "type": "DataTableNonEmptyHeader | DataTableEmptyHeader", @@ -2735,9 +2751,9 @@ { "name": "flatpickrProps", "kind": "let", - "description": "Override the options passed to the Flatpickr instance\nhttps://flatpickr.js.org/options", + "description": "Override the options passed to the Flatpickr instance.\n@see https://flatpickr.js.org/options", "type": "import(\"flatpickr/dist/types/options\").Options", - "value": "{}", + "value": "{ static: true }", "isFunction": false, "isFunctionDeclaration": false, "constant": false, @@ -3197,8 +3213,8 @@ { "name": "translateWithId", "kind": "let", - "description": "Override the default translation ids", - "type": "(id: any) => string", + "description": "Override the chevron icon label based on the open state.\nDefaults to \"Open menu\" when closed and \"Close menu\" when open", + "type": "(id: import(\"../ListBox/ListBoxMenuIcon.svelte\").ListBoxMenuIconTranslationId) => string", "isFunction": false, "isFunctionDeclaration": false, "constant": false, @@ -4053,8 +4069,8 @@ "moduleExports": [], "slots": [], "events": [ - { "type": "forwarded", "name": "click", "element": "Close" }, - { "type": "forwarded", "name": "keydown", "element": "Close" } + { "type": "forwarded", "name": "click", "element": "button" }, + { "type": "forwarded", "name": "keydown", "element": "button" } ], "typedefs": [], "rest_props": { "type": "InlineComponent", "name": "Loading" } @@ -4561,8 +4577,9 @@ } ], "events": [ - { "type": "forwarded", "name": "click", "element": "button" }, - { "type": "dispatched", "name": "close" } + { "type": "dispatched", "name": "open", "detail": "null" }, + { "type": "dispatched", "name": "close", "detail": "null" }, + { "type": "forwarded", "name": "click", "element": "button" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "button" } @@ -5122,7 +5139,7 @@ { "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "mouseleave", "element": "div" }, - { "type": "dispatched", "name": "success" } + { "type": "dispatched", "name": "success", "detail": "null" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "div" } @@ -6159,10 +6176,14 @@ { "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "mouseleave", "element": "div" }, - { "type": "dispatched", "name": "submit" }, - { "type": "dispatched", "name": "click:button--primary" }, - { "type": "dispatched", "name": "close" }, - { "type": "dispatched", "name": "open" } + { "type": "dispatched", "name": "submit", "detail": "null" }, + { + "type": "dispatched", + "name": "click:button--primary", + "detail": "null" + }, + { "type": "dispatched", "name": "close", "detail": "null" }, + { "type": "dispatched", "name": "open", "detail": "null" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "div" } @@ -6583,8 +6604,18 @@ { "name": "translateWithId", "kind": "let", - "description": "Override the default translation ids", - "type": "(id: any) => string", + "description": "Override the chevron icon label based on the open state.\nDefaults to \"Open menu\" when closed and \"Close menu\" when open", + "type": "(id: import(\"../ListBox/ListBoxMenuIcon.svelte\").ListBoxMenuIconTranslationId) => string", + "isFunction": false, + "isFunctionDeclaration": false, + "constant": false, + "reactive": false + }, + { + "name": "translateWithIdSelection", + "kind": "let", + "description": "Override the label of the clear button when the input has a selection.\nDefaults to \"Clear selected item\" and \"Clear all items\" if more than one item is selected", + "type": "(id: import(\"../ListBox/ListBoxSelection.svelte\").ListBoxSelectionTranslationId) => string", "isFunction": false, "isFunctionDeclaration": false, "constant": false, @@ -8231,7 +8262,9 @@ ], "moduleExports": [], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], - "events": [{ "type": "dispatched", "name": "click:outside" }], + "events": [ + { "type": "dispatched", "name": "click:outside", "detail": "null" } + ], "typedefs": [], "rest_props": { "type": "Element", "name": "div" } }, @@ -9247,7 +9280,7 @@ { "type": "forwarded", "name": "blur", "element": "input" }, { "type": "forwarded", "name": "keydown", "element": "input" }, { "type": "forwarded", "name": "keyup", "element": "input" }, - { "type": "dispatched", "name": "clear" } + { "type": "dispatched", "name": "clear", "detail": "null" } ], "typedefs": [], "rest_props": { "type": "InlineComponent", "name": "SearchSkeleton" } @@ -10895,6 +10928,16 @@ "isFunctionDeclaration": false, "constant": false, "reactive": false + }, + { + "name": "tableStyle", + "kind": "let", + "description": "Set the style attribute on the `table` element", + "type": "string", + "isFunction": false, + "isFunctionDeclaration": false, + "constant": false, + "reactive": false } ], "moduleExports": [], @@ -11304,7 +11347,7 @@ { "type": "forwarded", "name": "mouseover", "element": "TagSkeleton" }, { "type": "forwarded", "name": "mouseenter", "element": "TagSkeleton" }, { "type": "forwarded", "name": "mouseleave", "element": "TagSkeleton" }, - { "type": "dispatched", "name": "close" } + { "type": "dispatched", "name": "close", "detail": "null" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "div | span" } @@ -12767,7 +12810,7 @@ "name": "shouldFilterRows", "kind": "let", "description": "Set to `true` to filter table rows using the search value.\n\nIf `true`, the default search excludes `id`, `cells` fields and\nonly does a basic comparison on string and number type cell values.\n\nTo implement your own client-side filtering, pass a function\nthat accepts a row and value and returns a boolean.", - "type": "boolean | ((rows: import(\"./DataTable.svelte\").DataTableRow, value: number | string) => boolean)", + "type": "boolean | ((row: import(\"./DataTable.svelte\").DataTableRow, value: number | string) => boolean)", "value": "false", "isFunction": false, "isFunctionDeclaration": false, diff --git a/docs/src/pages/components/AspectRatio.svx b/docs/src/pages/components/AspectRatio.svx index cb7c86e8..3594061d 100644 --- a/docs/src/pages/components/AspectRatio.svx +++ b/docs/src/pages/components/AspectRatio.svx @@ -5,7 +5,7 @@ The `AspectRatio` component is useful for constraining fluid content within an aspect ratio. To demo this, resize your browser for the examples below. -Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`. +Supported aspect ratios include `"2x1"`, `"2x3"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`. ### Default (2x1) @@ -13,6 +13,12 @@ Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `" 2x1 +### Ratio 2x3 + + + 2x3 + + ### Ratio 16x9 diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx index 933720b0..30effdca 100644 --- a/docs/src/pages/components/Button.svx +++ b/docs/src/pages/components/Button.svx @@ -2,9 +2,6 @@ import { InlineNotification, Button } from "carbon-components-svelte"; import Add from "carbon-icons-svelte/lib/Add.svelte"; import TrashCan from "carbon-icons-svelte/lib/TrashCan.svelte"; - import TextBold from "carbon-icons-svelte/lib/TextBold.svelte"; - import TextItalic from "carbon-icons-svelte/lib/TextItalic.svelte"; - import TextUnderline from "carbon-icons-svelte/lib/TextUnderline.svelte"; import Login from "carbon-icons-svelte/lib/Login.svelte"; import Preview from "../../components/Preview.svelte"; diff --git a/docs/src/pages/components/CodeSnippet.svx b/docs/src/pages/components/CodeSnippet.svx index 42f237f3..e952a2ac 100644 --- a/docs/src/pages/components/CodeSnippet.svx +++ b/docs/src/pages/components/CodeSnippet.svx @@ -60,6 +60,18 @@ To prevent text from being copied entirely, pass a no-op function to the `copy` +### Expanded by default + +Use the `expanded` prop to control whether the multi-line code snippet is expanded or not. + + + +### Reactive example + +The multi-line code snippet also dispatches "expand" and "collapse" events. + + + ### Custom copy feedback text Use the `feedback` prop to override the default copy button feedback text. @@ -68,6 +80,8 @@ Use the `feedback` prop to override the default copy button feedback text. ### Hidden copy button +Set `hideCopyButton` to `true` to hide the copy button. + ### Disabled diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx index 3fef0c40..52714f80 100644 --- a/docs/src/pages/components/DataTable.svx +++ b/docs/src/pages/components/DataTable.svx @@ -328,6 +328,18 @@ title="Load balancers" description="Your organization's active load balancers." ]}" /> +### Custom column widths + +Specify a `width` or `minWidth` property in the `headers` object to customize the width of each column. + +A [table-layout: fixed](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#values) rule will be applied to the `table` element when using custom widths. + + +
Custom column widths do not work with a sticky header.
+ + + + ### Sticky header Set `stickyHeader` to `true` for the header to be fixed in place. @@ -1077,10 +1089,16 @@ In the following example, each row in the sortable data table has an overflow me -### Initial selected rows +### Batch selection +### Batch selection with initial selected rows + +Use the `selectedRowIds` prop to specify which rows should be selected. + + + ### Selectable with batch actions @@ -1150,9 +1168,7 @@ Use `nonSelectableRowIds` to specify the ids for rows that should not be selecta ]}" > - 
-      {JSON.stringify(row, null, 2)}
-
+ 
{JSON.stringify(row, null, 2)}
 @@ -1221,9 +1237,7 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda ]}" > - 
-      {JSON.stringify(row, null, 2)}
-
+ 
{JSON.stringify(row, null, 2)}
 @@ -1282,9 +1296,7 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda ]}" > - 
-      {JSON.stringify(row, null, 2)}
-
+ 
{JSON.stringify(row, null, 2)}
 @@ -1343,9 +1355,7 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda ]}" > - 
-      {JSON.stringify(row, null, 2)}
-
+ 
{JSON.stringify(row, null, 2)}
 @@ -1404,12 +1414,14 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda ]}" > - 
-      {JSON.stringify(row, null, 2)}
-
+ 
{JSON.stringify(row, null, 2)}
 +### Expandable and selectable + + + ### Skeleton diff --git a/docs/src/pages/components/DatePicker.svx b/docs/src/pages/components/DatePicker.svx index 732690a8..9c2cf946 100644 --- a/docs/src/pages/components/DatePicker.svx +++ b/docs/src/pages/components/DatePicker.svx @@ -7,7 +7,39 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"] import Preview from "../../components/Preview.svelte"; -### Default (simple) +Carbon uses the zero dependency [flatpickr](https://github.com/flatpickr/flatpickr) library for its underlying calendar implementation. + +Set `datePickerType` to `"single"` or `"range"` for the calendar functionality. + +Specify [flatpickr options](https://flatpickr.js.org/options/) through the `flatpickrProps` prop. + + +
+ If using Rollup, specify inlineDynamicImports: true in your rollup.config.js. +
+ + +### Single + +By default, the `flatpickr` option `static` is set to `true` so that the calendar is positioned inside the wrapper and next to the input element. This is required for the calendar position to work inside a [Modal](/components/Modal). + +Set `flatpickrProps.static` to `false` to opt out of this behavior. + + + +### Range + +Set `datePickerType` to `"range"` for the range variant. + + + +### DatePicker in a modal + + + +### Simple + +By default, the "simple" date picker does not have a dropdown calendar. @@ -61,30 +93,6 @@ components: ["DatePicker", "DatePickerInput", "DatePickerSkeleton"] -### Single - - -
- If using Rollup, specify inlineDynamicImports: true in your rollup.config.js. -
- - - - -### Range - - - -### DatePicker in a modal - -Use `flatpickrProps` to set `static: true` for the calendar to be positioned relative to the input element. - -This is needed when placing a `DatePicker` inside of a `Modal` component. - -Refer to [flatpickr options](https://flatpickr.js.org/options/) for a full list of config options. - - - ### Skeleton diff --git a/docs/src/pages/components/FileUploader.svx b/docs/src/pages/components/FileUploader.svx index 8f19f122..bff02a4c 100644 --- a/docs/src/pages/components/FileUploader.svx +++ b/docs/src/pages/components/FileUploader.svx @@ -48,9 +48,35 @@ There are two ways to clear files in `FileUploader`: -### Item (invalid) +### Item (edit) - +If the `status` is `"edit"`, clicking the close icon will dispatch a `delete` event. + +The event detail contains the item `id`. + + { + console.log(e.detail); // "readme" +}} /> + +### Item (edit status, invalid state) + +An item can also have an edit status with an invalid state. + + + +### Item (edit status, invalid state with subject, body) + +Use the `errorSubject` and `errorBody` props to customize the error message. + + ### Item sizes diff --git a/docs/src/pages/components/ImageLoader.svx b/docs/src/pages/components/ImageLoader.svx index 9bc498a9..cea8c73b 100644 --- a/docs/src/pages/components/ImageLoader.svx +++ b/docs/src/pages/components/ImageLoader.svx @@ -28,7 +28,7 @@ Use the "loading" and "error" named slots to render an element when the image is If `ratio` is set, this component uses the [AspectRatio](/components/AspectRatio) to constrain the image. -Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`. +Supported aspect ratios include `"2x1"`, `"2x3"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`. diff --git a/docs/src/pages/components/RadioButton.svx b/docs/src/pages/components/RadioButton.svx index 4ee86229..5f6d5f28 100644 --- a/docs/src/pages/components/RadioButton.svx +++ b/docs/src/pages/components/RadioButton.svx @@ -30,8 +30,8 @@ Use the named "legendText" slot to customize the legend text.
Storage tier (disk) - -

+ +

Storage tiers may vary based on geolocation.

diff --git a/docs/src/pages/components/Theme.svx b/docs/src/pages/components/Theme.svx index 395e077f..d0cdc66f 100644 --- a/docs/src/pages/components/Theme.svx +++ b/docs/src/pages/components/Theme.svx @@ -1,9 +1,19 @@ -This utility component dynamically updates the Carbon theme on the client-side using CSS variables. +The `Theme` component can dyanmically update the Carbon theme on the client-side. It can persist the theme locally using [window.localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). + + +
You must use the "all.css" StyleSheet with the Theme component.
+ + +The `all.css` StyleSheet uses [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for dynamic theming. + + ### Default diff --git a/docs/src/pages/components/Tooltip.svx b/docs/src/pages/components/Tooltip.svx index c2905e6e..d4fe45b6 100644 --- a/docs/src/pages/components/Tooltip.svx +++ b/docs/src/pages/components/Tooltip.svx @@ -12,8 +12,8 @@ components: ["Tooltip", "TooltipFooter"] By default, the tooltip is triggered by an information icon. - -

+ +

Resources are provisioned based on your account's organization.

diff --git a/docs/src/pages/framed/Breakpoint/Breakpoint.svelte b/docs/src/pages/framed/Breakpoint/Breakpoint.svelte index b1b7e0a1..9f2473f9 100644 --- a/docs/src/pages/framed/Breakpoint/Breakpoint.svelte +++ b/docs/src/pages/framed/Breakpoint/Breakpoint.svelte @@ -12,9 +12,7 @@

{size}

on:change
-
-  {JSON.stringify(events, null, 2)}
-
+
{JSON.stringify(events, null, 2)}