mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

Alignment with Carbon version 10.32 (#588)

Browse source 
* feat(code-snippet): add copy functionality

- docs: add custom feedback copy text example

* feat(tile): support disabled state for SelectableTile, RadioTile

Closes #539

* build(rollup): add clipboard-copy to globals

* feat(copy-button): add copy functionality

* feat(content-switcher): deprecate the light prop

- docs: remove the light variant example

* fix(toolbar-search): remove outer div

* feat(search): add searchClass prop

* fix(composed-modal): set hasScrollingContent class on ModalBody

* docs(data-table): add expandable size examples

* feat(tooltip): add TooltipFooter component

* fix(time-picker): correctly display invalidText

* feat(breadcrumb): support overflow menu

* feat(multi-select): export inputRef prop

* chore(deps-dev): upgrade carbon-components to v10.32.0

* feat(form): add noMargin prop to FormGroup

* docs(tooltip): document TooltipFooter

* feat(context-menu): support danger kind for ContextMenuOption

* feat(data-table): support rendering empty table header in skeleton

* refactor(types): use shorter import path in DataTableSkeleton

* feat(data-table): allow sorting to be disabled for a specific header

* docs(data-table): update example to desort the Protocol header

As an example, it makes more sense because all the values ("http") are the same.

* fix(context-menu): set initial y offset of context menu based on window height #577

* fix(context-menu): render submenu based on viewport constraints #577
This commit is contained in:
Eric Liu 2021-04-02 13:31:53 -07:00 • committed by GitHub
commit fa9b90cd79
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
61 changed files with 825 additions and 233 deletions
Download patch file Download diff file Expand all files Collapse all files

139
COMPONENT_INDEX.md
View file

@ -1,6 +1,6 @@
# Component Index
> 166 components exported from carbon-components-svelte@0.31.1.
> 167 components exported from carbon-components-svelte@0.31.1.
## Components
@ -167,6 +167,7 @@
- [`ToolbarSearch`](#toolbarsearch)
- [`Tooltip`](#tooltip)
- [`TooltipDefinition`](#tooltipdefinition)
- [`TooltipFooter`](#tooltipfooter)
- [`TooltipIcon`](#tooltipicon)
- [`Truncate`](#truncate)
- [`UnorderedList`](#unorderedlist)
@ -500,25 +501,25 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLPreElement</code> | <code>null</code> | Obtain a reference to the pre HTML element |
| showMoreLess | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the show more/less button |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand a multi-line code snippet (type="multi") |
| type | <code>let</code> | No | <code>"single" &#124; "inline" &#124; "multi"</code> | <code>"single"</code> | Set the type of code snippet |
| code | <code>let</code> | No | <code>string</code> | -- | Set the code snippet text<br />Alternatively, use the default slot (e.g., &lt;CodeSnippet&gt;{`code`}&lt;/CodeSnippet&gt;) |
| hideCopyButton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the copy button |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the disabled variant<br />Only applies to the "single", "multi" types |
| wrapText | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to wrap the text<br />Note that `type` must be "multi" |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| copyButtonDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the copy button icon |
| copyLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label of the copy button |
| feedback | <code>let</code> | No | <code>string</code> | <code>"Copied!"</code> | Specify the feedback text displayed when clicking the snippet |
| feedbackTimeout | <code>let</code> | No | <code>number</code> | <code>2000</code> | Set the timeout duration (ms) to display feedback text |
| showLessText | <code>let</code> | No | <code>string</code> | <code>"Show less"</code> | Specify the show less text<br />`type` must be "multi" |
| showMoreText | <code>let</code> | No | <code>string</code> | <code>"Show more"</code> | Specify the show more text<br />`type` must be "multi" |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the code element |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLPreElement</code> | <code>null</code> | Obtain a reference to the pre HTML element |
| showMoreLess | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the show more/less button |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand a multi-line code snippet (type="multi") |
| type | <code>let</code> | No | <code>"single" &#124; "inline" &#124; "multi"</code> | <code>"single"</code> | Set the type of code snippet |
| code | <code>let</code> | No | <code>string</code> | -- | Set the code snippet text<br />Alternatively, use the default slot (e.g., &lt;CodeSnippet&gt;{`code`}&lt;/CodeSnippet&gt;)<br />You must use the `code` prop to copy the code |
| hideCopyButton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the copy button |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the disabled variant<br />Only applies to the "single", "multi" types |
| wrapText | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to wrap the text<br />Note that `type` must be "multi" |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| copyButtonDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the copy button icon |
| copyLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label of the copy button |
| feedback | <code>let</code> | No | <code>string</code> | <code>"Copied!"</code> | Specify the feedback text displayed when clicking the snippet |
| feedbackTimeout | <code>let</code> | No | <code>number</code> | <code>2000</code> | Set the timeout duration (ms) to display feedback text |
| showLessText | <code>let</code> | No | <code>string</code> | <code>"Show less"</code> | Specify the show less text<br />`type` must be "multi" |
| showMoreText | <code>let</code> | No | <code>string</code> | <code>"Show more"</code> | Specify the show more text<br />`type` must be "multi" |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the code element |
### Slots
@ -528,13 +529,14 @@ None.
### Events
| Event name | Type | Detail |
| :----------- | :-------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| animationend | forwarded | -- |
| Event name | Type | Detail |
| :----------- | :--------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| animationend | forwarded | -- |
| copy | dispatched | -- |
## `CodeSnippetSkeleton`
@ -798,6 +800,7 @@ None.
| selected | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the selected variant |
| icon | <code>let</code> | Yes | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render<br />Icon is rendered to the left of the label text |
| indented | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to indent the label |
| kind | <code>let</code> | No | <code>"default" &#124; "danger"</code> | <code>"default"</code> | Specify the kind of option |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the disabled state |
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text<br />Alternatively, use the "labelText" slot (e.g., &lt;span slot="labelText"&gt;...&lt;/span&gt;) |
| shortcutText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the shortcut text<br />Alternatively, use the "shortcutText" slot (e.g., &lt;span slot="shortcutText"&gt;...&lt;/span&gt;) |
@ -869,6 +872,7 @@ None.
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :------------------ | -------------------------------- | ------------------------------------------------ |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Copy to clipboard"</code> | Set the title and ARIA label for the copy button |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text to copy |
### Slots
@ -876,10 +880,11 @@ None.
### Events
| Event name | Type | Detail |
| :----------- | :-------- | :----- |
| click | forwarded | -- |
| animationend | forwarded | -- |
| Event name | Type | Detail |
| :----------- | :--------- | :----- |
| click | forwarded | -- |
| animationend | forwarded | -- |
| copy | dispatched | -- |
## `DataTable`
@ -894,7 +899,7 @@ export interface DataTableEmptyHeader {
key: DataTableKey;
empty: boolean;
display?: (item: Value) => DataTableValue;
sort?: (a: DataTableValue, b: DataTableValue) => 0 | -1 | 1;
sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
columnMenu?: boolean;
}
@ -902,7 +907,7 @@ export interface DataTableNonEmptyHeader {
key: DataTableKey;
value: DataTableValue;
display?: (item: Value) => DataTableValue;
sort?: (a: DataTableValue, b: DataTableValue) => 0 | -1 | 1;
sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
columnMenu?: boolean;
}
@ -952,16 +957,16 @@ export interface DataTableCell {
### Events
| Event name | Type | Detail |
| :------------------- | :--------- | :----------------------------------------------------------------------------------------------------- |
| click | dispatched | <code>{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }</code> |
| click:header--expand | dispatched | <code>{ expanded: boolean; }</code> |
| click:header | dispatched | <code>{ header: DataTableHeader; sortDirection: "ascending" &#124; "descending" &#124; "none" }</code> |
| click:row | dispatched | <code>DataTableRow</code> |
| mouseenter:row | dispatched | <code>DataTableRow</code> |
| mouseleave:row | dispatched | <code>DataTableRow</code> |
| click:row--expand | dispatched | <code>{ expanded: boolean; row: DataTableRow; }</code> |
| click:cell | dispatched | <code>DataTableCell</code> |
| Event name | Type | Detail |
| :------------------- | :--------- | :------------------------------------------------------------------------------------------------------ |
| click | dispatched | <code>{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }</code> |
| click:header--expand | dispatched | <code>{ expanded: boolean; }</code> |
| click:header | dispatched | <code>{ header: DataTableHeader; sortDirection?: "ascending" &#124; "descending" &#124; "none" }</code> |
| click:row | dispatched | <code>DataTableRow</code> |
| mouseenter:row | dispatched | <code>DataTableRow</code> |
| mouseleave:row | dispatched | <code>DataTableRow</code> |
| click:row--expand | dispatched | <code>{ expanded: boolean; row: DataTableRow; }</code> |
| click:cell | dispatched | <code>DataTableCell</code> |
## `DataTableSkeleton`
@ -1402,12 +1407,13 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------------ |
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| message | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a form requirement |
| messageText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the message text |
| legendText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- |
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| message | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a form requirement |
| noMargin | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for to remove the bottom margin |
| messageText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the message text |
| legendText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
### Slots
@ -2323,6 +2329,7 @@ export interface MultiSelectItem {
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| inputRef | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the dropdown |
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the multiselect value |
| selectedIds | <code>let</code> | Yes | <code>MultiSelectItemId[]</code> | <code>[]</code> | Set the selected ids |
@ -2576,13 +2583,13 @@ None.
| :--------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- |
| menuRef | <code>let</code> | Yes | <code>null &#124; HTMLUListElement</code> | <code>null</code> | Obtain a reference to the overflow menu element |
| buttonRef | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element |
| icon | <code>let</code> | Yes | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu |
| size | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | -- | Specify the size of the overflow menu |
| direction | <code>let</code> | No | <code>"top" &#124; "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| flipped | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flip the menu relative to the button |
| menuOptionsClass | <code>let</code> | No | <code>string</code> | -- | Specify the menu options class |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| iconClass | <code>let</code> | No | <code>string</code> | -- | Specify the icon class |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Open and close list of options"</code> | Specify the ARIA label for the icon |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element |
@ -2945,6 +2952,7 @@ None.
| :-------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | -------------------------------------------------------- |
| checked | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to check the tile |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile |
| value | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the value of the radio input |
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Tile checkmark"</code> | Specify the ARIA label for the radio tile checkmark icon |
@ -3002,6 +3010,7 @@ None.
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the value of the search input |
| small | <code>let</code> | No | <code>boolean</code> | <code>false</code> | -- |
| size | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>"xl"</code> | Specify the size of the search input |
| searchClass | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the search input |
@ -3158,6 +3167,7 @@ None.
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| selected | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to select the tile |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile |
| title | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the selectable tile |
| value | <code>let</code> | No | <code>string</code> | <code>"value"</code> | Specify the value of the selectable tile |
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
@ -3762,11 +3772,12 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :------------------------ | ------------------------------------------------ | ------------------------------------ |
| scope | <code>let</code> | No | <code>string</code> | <code>"col"</code> | Specify the `scope` attribute |
| translateWithId | <code>let</code> | No | <code>() => string</code> | <code>() => ""</code> | Override the default id translations |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :------------------------ | ------------------------------------------------ | ------------------------------------------------------ |
| disableSorting | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable sorting on this specific cell |
| scope | <code>let</code> | No | <code>string</code> | <code>"col"</code> | Specify the `scope` attribute |
| translateWithId | <code>let</code> | No | <code>() => string</code> | <code>() => ""</code> | Override the default id translations |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
### Slots
@ -4464,6 +4475,24 @@ None.
| mouseleave | forwarded | -- |
| focus | forwarded | -- |
## `TooltipFooter`
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------------- | :--------------- | :------- | :------------------ | ---------------------------------------------- | --------------------------------------------------------------------------- |
| selectorPrimaryFocus | <code>let</code> | No | <code>string</code> | <code>"a[href], button:not([disabled])"</code> | Specify a selector to be focused inside the footer when opening the tooltip |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| -- | Yes | -- | -- |
### Events
None.
## `TooltipIcon`
### Props

3
docs/package.json
View file

@ -11,9 +11,8 @@
"devDependencies": {
"@sveltech/routify": "^1.9.9",
"autoprefixer": "^10.2.3",
"carbon-components": "10.31.0",
"carbon-components": "10.32.0",
"carbon-components-svelte": "../",
"clipboard-copy": "^3.1.0",
"mdsvex": "^0.8.8",
"npm-run-all": "^4.1.5",
"postcss": "^8.2.4",

129
docs/src/COMPONENT_API.json
View file

@ -1,5 +1,5 @@
{
"total": 166,
"total": 167,
"components": [
{
"moduleName": "Accordion",
@ -805,7 +805,7 @@
{
"name": "code",
"kind": "let",
"description": "Set the code snippet text\nAlternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)",
"description": "Set the code snippet text\nAlternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)\nYou must use the `code` prop to copy the code",
"type": "string",
"isFunction": false,
"constant": false,
@ -989,7 +989,12 @@
"name": "mouseleave",
"element": "CodeSnippetSkeleton"
},
{ "type": "forwarded", "name": "animationend", "element": "CopyButton" }
{
"type": "forwarded",
"name": "animationend",
"element": "CopyButton"
},
{ "type": "dispatched", "name": "copy" }
],
"typedefs": [],
"rest_props": { "type": "InlineComponent", "name": "CodeSnippetSkeleton" }
@ -1651,6 +1656,16 @@
"moduleName": "ContextMenuOption",
"filePath": "src/ContextMenu/ContextMenuOption.svelte",
"props": [
{
"name": "kind",
"kind": "let",
"description": "Specify the kind of option",
"type": "\"default\" | \"danger\"",
"value": "\"default\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "disabled",
"kind": "let",
@ -1857,12 +1872,22 @@
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "text",
"kind": "let",
"description": "Specify the text to copy",
"type": "string",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [],
"events": [
{ "type": "forwarded", "name": "click", "element": "Copy" },
{ "type": "forwarded", "name": "animationend", "element": "Copy" }
{ "type": "forwarded", "name": "animationend", "element": "Copy" },
{ "type": "dispatched", "name": "copy" }
],
"typedefs": [],
"rest_props": { "type": "InlineComponent", "name": "Copy" },
@ -2056,7 +2081,7 @@
{
"type": "dispatched",
"name": "click:header",
"detail": "{ header: DataTableHeader; sortDirection: \"ascending\" | \"descending\" | \"none\" }"
"detail": "{ header: DataTableHeader; sortDirection?: \"ascending\" | \"descending\" | \"none\" }"
},
{ "type": "dispatched", "name": "click:row", "detail": "DataTableRow" },
{
@ -2092,14 +2117,14 @@
"ts": "type DataTableValue = any"
},
{
"type": "{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: (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; }",
"name": "DataTableEmptyHeader",
"ts": "interface DataTableEmptyHeader { key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: (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; }"
},
{
"type": "{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: (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; }",
"name": "DataTableNonEmptyHeader",
"ts": "interface DataTableNonEmptyHeader { key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: (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; }"
},
{
"type": "DataTableNonEmptyHeader | DataTableEmptyHeader",
@ -2207,10 +2232,7 @@
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" },
"extends": {
"interface": "DataTableHeader",
"import": "\"../DataTable/DataTable\""
}
"extends": { "interface": "DataTableHeader", "import": "\"./DataTable\"" }
},
{
"moduleName": "DatePicker",
@ -3499,6 +3521,16 @@
"constant": false,
"reactive": false
},
{
"name": "noMargin",
"kind": "let",
"description": "Set to `true` for to remove the bottom margin",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "messageText",
"kind": "let",
@ -5766,6 +5798,16 @@
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "inputRef",
"kind": "let",
"description": "Obtain a reference to the input HTML element",
"type": "null | HTMLInputElement",
"value": "null",
"isFunction": false,
"constant": false,
"reactive": true
}
],
"slots": [],
@ -6354,7 +6396,7 @@
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon",
"isFunction": false,
"constant": false,
"reactive": false
"reactive": true
},
{
"name": "iconClass",
@ -7518,6 +7560,16 @@
"constant": false,
"reactive": false
},
{
"name": "disabled",
"kind": "let",
"description": "Set to `true` to disable the tile",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "value",
"kind": "let",
@ -7690,6 +7742,16 @@
"constant": false,
"reactive": false
},
{
"name": "searchClass",
"kind": "let",
"description": "Specify the class name passed to the outer div element",
"type": "string",
"value": "\"\"",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "skeleton",
"kind": "let",
@ -8171,6 +8233,16 @@
"constant": false,
"reactive": false
},
{
"name": "disabled",
"kind": "let",
"description": "Set to `true` to disable the tile",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "title",
"kind": "let",
@ -9369,6 +9441,16 @@
"moduleName": "TableHeader",
"filePath": "src/DataTable/TableHeader.svelte",
"props": [
{
"name": "disableSorting",
"kind": "let",
"description": "Set to `true` to disable sorting on this specific cell",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "scope",
"kind": "let",
@ -11157,6 +11239,25 @@
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
},
{
"moduleName": "TooltipFooter",
"filePath": "src/Tooltip/TooltipFooter.svelte",
"props": [
{
"name": "selectorPrimaryFocus",
"kind": "let",
"description": "Specify a selector to be focused inside the footer when opening the tooltip",
"type": "string",
"value": "\"a[href], button:not([disabled])\"",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [],
"typedefs": []
},
{
"moduleName": "TooltipIcon",
"filePath": "src/TooltipIcon/TooltipIcon.svelte",

9
docs/src/components/InlineSnippet.svelte
View file

@ -2,17 +2,10 @@
export let code = "";
import { CodeSnippet } from "carbon-components-svelte";
import copy from "clipboard-copy";
</script>
<div>
<CodeSnippet
code="{code}"
type="inline"
on:click="{() => {
copy(code);
}}"
/>
<CodeSnippet code="{code}" type="inline" />
</div>
<style>

3
docs/src/components/Preview.svelte
View file

@ -6,7 +6,6 @@
import { CodeSnippet, Button } from "carbon-components-svelte";
import Launch16 from "carbon-icons-svelte/lib/Launch16";
import copy from "clipboard-copy";
import { url } from "@sveltech/routify";
import { theme } from "../store";
@ -41,7 +40,7 @@
{/if}
</div>
<div class="code-override">
<CodeSnippet type="multi" on:click="{() => copy(codeRaw)}">
<CodeSnippet type="multi" code="{codeRaw}">
{@html code}
</CodeSnippet>
</div>

8
docs/src/pages/_layout.svelte
View file

@ -105,7 +105,11 @@
>
{child.title}
{#if deprecated.includes(child.title)}
<Tag size="sm" type="red" style="margin-top: 0; margin-bottom: 0">
<Tag
size="sm"
type="red"
style="margin-top: 0; margin-bottom: 0; cursor: inherit"
>
Deprecated
</Tag>
{/if}
@ -113,7 +117,7 @@
<Tag
size="sm"
type="green"
style="margin-top: 0; margin-bottom: 0"
style="margin-top: 0; margin-bottom: 0; cursor: inherit"
>
New
</Tag>

16
docs/src/pages/components/Breadcrumb.svx
View file

@ -6,6 +6,8 @@ components: ["Breadcrumb", "BreadcrumbItem"]
import {
Breadcrumb,
BreadcrumbItem,
OverflowMenu,
OverflowMenuItem
} from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
@ -27,6 +29,20 @@ See the [Breadcrumbs recipe](/recipes/Breadcrumbs) for a reusable breadcrumbs co
<BreadcrumbItem href="/profile" isCurrentPage>Profile</BreadcrumbItem>
</Breadcrumb>
### Overflow menu
<Breadcrumb>
<BreadcrumbItem href="/">Home</BreadcrumbItem>
<BreadcrumbItem href="/api">API documentation</BreadcrumbItem>
<BreadcrumbItem>
<OverflowMenu>
<OverflowMenuItem href="/api/data" text="Data" />
<OverflowMenuItem href="/api/data/latest" text="Latest" />
</OverflowMenu>
</BreadcrumbItem>
<BreadcrumbItem href="/api/data/latest/usage" isCurrentPage>Usage</BreadcrumbItem>
</Breadcrumb>
### Skeleton
<Breadcrumb noTrailingSlash skeleton count={3} />

14
docs/src/pages/components/CodeSnippet.svx
View file

@ -28,21 +28,27 @@ let comment = `
</script>
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">By design, the copy button does not copy text to the clipboard. You will need to write your own logic. Refer to the <Link href="/recipes/CopyableCodeSnippet">CopyableCodeSnippet recipe</Link> for an example.</div>
<div class="body-short-01">As of version 0.32, the CodeSnippet will copy the provided `code` text when clicking the copy button.</div>
</InlineNotification>
### Default (single-line)
<CodeSnippet>yarn add -D carbon-components-svelte</CodeSnippet>
<CodeSnippet code="yarn add -D carbon-components-svelte" />
### Inline
<CodeSnippet type="inline">rm -rf node_modules/</CodeSnippet>
<CodeSnippet type="inline" code="rm -rf node_modules/" />
### Multi-line
<CodeSnippet type="multi" {code} />
### Custom copy feedback text
Use the `feedback` prop to override the default copy button feedback text.
<CodeSnippet type="multi" {code} feedback="Copied to clipboard" />
### Hidden copy button
<CodeSnippet type="multi" {code} hideCopyButton />
@ -51,7 +57,7 @@ let comment = `
The `disabled` prop applies only to the `"single"` and `"multi"` code snippet types.
<CodeSnippet disabled>yarn add -D carbon-components-svelte</CodeSnippet>
<CodeSnippet disabled code="yarn add -D carbon-components-svelte" />
<br />
<CodeSnippet disabled type="multi" code="{comment}" />

7
docs/src/pages/components/ContentSwitcher.svx
View file

@ -28,13 +28,6 @@ components: ["ContentSwitcher", "Switch"]
<FileSource src="/framed/ContentSwitcher/ContentSwitcherReactive" />
### Light variant
<ContentSwitcher light>
<Switch text="Latest news" />
<Switch text="Trending" />
</ContentSwitcher>
### Custom switch slot
<ContentSwitcher>

8
docs/src/pages/components/CopyButton.svx
View file

@ -4,13 +4,13 @@
</script>
<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
<div class="body-short-01">By design, the copy button does not copy text to the clipboard. You will need to write your own logic. Refer to the <Link href="/recipes/CopyableCodeSnippet">CopyableCodeSnippet recipe</Link> for an example.</div>
<div class="body-short-01">As of version 0.32, this component will copy the provided `code` text when clicking the button.</div>
</InlineNotification>
### Default
<CopyButton on:click />
<CopyButton text="Carbon svelte" />
### Custom feedback
### Custom feedback text
<CopyButton on:click feedback="Copied to clipboard" />
<CopyButton text="Carbon svelte" feedback="Copied to clipboard" />

197
docs/src/pages/components/DataTable.svx
View file

@ -550,10 +550,16 @@ The slot name for the table header cells is `"cell-header"`.
### Sortable
Set `sortable` to `true` to enable table column sorting.
To disable sorting on a specific column, set `sort` to `false` in the header object passed to the `headers` prop.
In the example below, the "Protocol" column is not sortable.
<DataTable sortable
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "protocol", value: "Protocol", sort: false },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" }
]}"
@ -757,6 +763,189 @@ In the following example, each row in the sortable data table has an overflow me
</div>
</DataTable>
### Expandable (compact size)
<DataTable size="compact" expandable
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" }
]}"
rows="{[
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
]}"
>
<div slot="expanded-row" let:row>
<pre>
{JSON.stringify(row, null, 2)}
</pre>
</div>
</DataTable>
### Expandable (short size)
<DataTable size="short" expandable
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" }
]}"
rows="{[
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
]}"
>
<div slot="expanded-row" let:row>
<pre>
{JSON.stringify(row, null, 2)}
</pre>
</div>
</DataTable>
### Expandable (tall size)
<DataTable size="tall" expandable
headers="{[
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" }
]}"
rows="{[
{
id: "a",
name: "Load Balancer 3",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "b",
name: "Load Balancer 1",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "c",
name: "Load Balancer 2",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
{
id: "d",
name: "Load Balancer 6",
protocol: "HTTP",
port: 3000,
rule: "Round robin"
},
{
id: "e",
name: "Load Balancer 4",
protocol: "HTTP",
port: 443,
rule: "Round robin"
},
{
id: "f",
name: "Load Balancer 5",
protocol: "HTTP",
port: 80,
rule: "DNS delegation"
},
]}"
>
<div slot="expanded-row" let:row>
<pre>
{JSON.stringify(row, null, 2)}
</pre>
</div>
</DataTable>
### Batch expansion
<DataTable batchExpansion
@ -832,6 +1021,12 @@ In the following example, each row in the sortable data table has an overflow me
<DataTableSkeleton headers={[{ value: "Name" }, {value: "Protocol"}, {value:"Port"}, { value: "Rule"}]} rows={10} />
### Skeleton with empty header
Pass an object with `"empty"` set to `true` to render an empty table header column.
<DataTableSkeleton headers={[{ value: "Name" }, {value: "Protocol"}, {value:"Port"}, { value: "Rule"}, { empty: true }]} rows={10} />
### Skeleton without header, toolbar
<DataTableSkeleton showHeader={false} showToolbar={false} />

14
docs/src/pages/components/RadioTile.svx
View file

@ -33,4 +33,18 @@ components: ["TileGroup", "RadioTile"]
<RadioTile light value="2">
Plus plan
</RadioTile>
</TileGroup>
### Disabled state
<TileGroup legend="Service pricing tiers">
<RadioTile value="0" checked>
Lite plan
</RadioTile>
<RadioTile value="1" disabled>
Standard plan
</RadioTile>
<RadioTile value="2" disabled>
Plus plan
</RadioTile>
</TileGroup>

14
docs/src/pages/components/SelectableTile.svx
View file

@ -33,4 +33,18 @@ components: ["SelectableTile"]
<SelectableTile light>
Multi-select Tile
</SelectableTile>
</div>
### Disabled state
<div role="group" aria-label="selectable tiles">
<SelectableTile selected>
Multi-select Tile
</SelectableTile>
<SelectableTile disabled>
Multi-select Tile
</SelectableTile>
<SelectableTile disabled>
Multi-select Tile
</SelectableTile>
</div>

16
docs/src/pages/components/TimePicker.svx
View file

@ -59,7 +59,21 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
</TimePickerSelect>
</TimePicker>
### Disabled
### Invalid state
<TimePicker invalid invalidText="A valid value is required" labelText="Cron job" placeholder="hh:mm">
<TimePickerSelect value="PM">
<SelectItem value="am" text="AM" />
<SelectItem value="pm" text="PM" />
</TimePickerSelect>
<TimePickerSelect value="PDT">
<SelectItem value="pdt" text="PDT" />
<SelectItem value="gmt" text="GMT" />
</TimePickerSelect>
</TimePicker>
### Disabled state
<TimePicker labelText="Cron job" placeholder="hh:mm" disabled>
<TimePickerSelect value="PM" disabled>

12
docs/src/pages/components/Tooltip.svx
View file

@ -1,5 +1,9 @@
---
components: ["Tooltip", "TooltipFooter"]
---
<script>
import { Tooltip, Link, Button } from "carbon-components-svelte";
import { Tooltip, TooltipFooter, Link, Button } from "carbon-components-svelte";
import Catalog16 from "carbon-icons-svelte/lib/Catalog16";
import Preview from "../../components/Preview.svelte";
</script>
@ -45,10 +49,10 @@ By default, the tooltip is triggered by an information icon.
<p>
Resources are provisioned based on your account's organization.
</p>
<div class="bx--tooltip__footer">
<TooltipFooter selectorPrimaryFocus="#d">
<Link href="/">Learn more</Link>
<Button size="small">Manage</Button>
</div>
<Button id="d" size="small">Manage</Button>
</TooltipFooter>
</Tooltip>
### Custom icon (component)

2
docs/src/pages/framed/ContextMenu/ContextMenu.svelte
View file

@ -42,4 +42,6 @@
<ContextMenuOption id="1" labelText="Reduce noise" />
<ContextMenuOption id="2" labelText="Auto-sharpen" />
</ContextMenuGroup>
<ContextMenuDivider />
<ContextMenuOption indented kind="danger" labelText="Delete" />
</ContextMenu>

8
docs/src/pages/framed/CopyableCodeSnippet/CopyableCodeSnippet.svelte
View file

@ -1,8 +0,0 @@
<script>
export let code = "yarn add -D carbon-component-svelte";
import { CodeSnippet } from "carbon-components-svelte";
import copy from "clipboard-copy";
</script>
<CodeSnippet on:click="{() => copy(code)}" code="{code}" />

17
docs/src/pages/index.svelte
View file

@ -9,7 +9,6 @@
} from "carbon-components-svelte";
import TileCard from "../components/TileCard.svelte";
import { metatags } from "@sveltech/routify";
import copy from "clipboard-copy";
metatags.title = "Carbon Components Svelte";
metatags.description =
@ -53,21 +52,9 @@
<Column>
<h3>Install</h3>
<h4>Installing with yarn:</h4>
<CodeSnippet
code="{installYarn}"
on:click="{() => {
copy(installYarn);
}}"
/>
<CodeSnippet code="{installYarn}" />
<h4>Using npm:</h4>
<CodeSnippet
code="{installNpm}"
on:click="{() => {
copy(installNpm);
}}"
/>
<CodeSnippet code="{installNpm}" />
</Column>
</Row>
<Row>

17
docs/src/pages/recipes/CopyableCodeSnippet.svx
View file

@ -1,17 +0,0 @@
---
layout: recipe
---
<script>
import Preview from "../../components/Preview.svelte";
</script>
The [CodeSnippet](/components/CodeSnippet) and [CopyButton](/components/CopyButton) components do not include logic to copy the supplied `code` text.
You can use a third party open source module like [clipboard-copy](https://www.npmjs.com/package/clipboard-copy) that is compatible with modern web browsers.
## clipboard-copy
This documentation website uses [clipboard-copy](https://www.npmjs.com/package/clipboard-copy).
<FileSource src="/framed/CopyableCodeSnippet/CopyableCodeSnippet" />

29
docs/yarn.lock
View file

@ -837,25 +837,26 @@ caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001178:
integrity sha512-n8JVqXuZMVSPKiPiypjFtDTXc4jWIdjxull0f92WLo7e1MSi3uJ3NvveakSh/aCl1QKFAvIz3vIj0v+0K+FrXw==
carbon-components-svelte@../:
version "0.30.0"
version "0.31.1"
dependencies:
carbon-icons-svelte "^10.21.0"
carbon-icons-svelte "^10.27.0"
clipboard-copy "3.2.0"
flatpickr "4.6.9"
carbon-components@10.31.0:
version "10.31.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.31.0.tgz#050751e7fb4d845b7d1c6e8ac7fdfa9c71403c12"
integrity sha512-gUXRky9rUHavqFLJJQf+Lzouk8GHsXJUjxRgTOUQ6vdBfA0ks6ugwptG8fiFGwCJJht/CW9/YsKb5w8N9a39sg==
carbon-components@10.32.0:
version "10.32.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.32.0.tgz#0fbf60ea8fc12cea43ae7860bec844b3c2c0880f"
integrity sha512-LM44X6VhUc+yrZBSz+IW1aT/OGxAS0oiiy/kV7CiDpsUDF5zlPOwgokZbeYLo2mhB1wBZ1q9jwvItZ4zfaZuMw==
dependencies:
"@carbon/telemetry" "0.0.0-alpha.6"
flatpickr "4.6.1"
lodash.debounce "^4.0.8"
warning "^3.0.0"
carbon-icons-svelte@^10.21.0:
version "10.21.0"
resolved "https://registry.npmjs.org/carbon-icons-svelte/-/carbon-icons-svelte-10.21.0.tgz#9bbdd37d5513d484e9706d6335c121f60f3186c4"
integrity sha512-5NNaRdmbS4N36dUGNj72Ys3VqVjH3fZ69AhYUHx+bH02GFYCwAaE49qjtP77kP7DKMtDV9NmMEti/P/JB83aYQ==
carbon-icons-svelte@^10.27.0:
version "10.28.0"
resolved "https://registry.yarnpkg.com/carbon-icons-svelte/-/carbon-icons-svelte-10.28.0.tgz#812a6eae858d0c9e043067c714910fcfb6249cd2"
integrity sha512-C3K+U2PRy63WHFZme1HQNju89rhVIQmUkfgBrZzcezdutkhXbSPOY+o/MI0B2mDcQ7G9gfhEpqsXET8gBTWfJQ==
caseless@~0.12.0:
version "0.12.0"
@ -946,10 +947,10 @@ cli-spinners@^2.2.0:
resolved "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.4.0.tgz#c6256db216b878cfba4720e719cec7cf72685d7f"
integrity sha512-sJAofoarcm76ZGpuooaO0eDy8saEy+YoZBLjC4h8srt4jeBnkYeOgqxgsJQTpyt2LjI5PTfLJHSL+41Yu4fEJA==
clipboard-copy@^3.1.0:
version "3.1.0"
resolved "https://registry.npmjs.org/clipboard-copy/-/clipboard-copy-3.1.0.tgz#4c59030a43d4988990564a664baeafba99f78ca4"
integrity sha512-Xsu1NddBXB89IUauda5BIq3Zq73UWkjkaQlPQbLNvNsd5WBMnTWPNKYR6HGaySOxGYZ+BKxP2E9X4ElnI3yiPA==
clipboard-copy@3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/clipboard-copy/-/clipboard-copy-3.2.0.tgz#3c5b8651d3512dcfad295d77a9eb09e7fac8d5fb"
integrity sha512-vooFaGFL6ulEP1liiaWFBmmfuPm3cY3y7T9eB83ZTnYc/oFeAKsq3NcDrOkBC8XaauEE8zHQwI7k0+JSYiVQSQ==
clipboard@^2.0.0:
version "2.0.6"

3
package.json
View file

@ -24,6 +24,7 @@
},
"dependencies": {
"carbon-icons-svelte": "^10.27.0",
"clipboard-copy": "3.2.0",
"flatpickr": "4.6.9"
},
"devDependencies": {
@ -31,7 +32,7 @@
"@rollup/plugin-node-resolve": "^11.1.1",
"@tsconfig/svelte": "^1.0.10",
"autoprefixer": "^10.2.4",
"carbon-components": "10.31.0",
"carbon-components": "10.32.0",
"gh-pages": "^3.1.0",
"husky": "^4.3.8",
"lint-staged": "^10.5.3",

2
preprocess/api.json
View file

@ -1,5 +1,5 @@
{
"version": "0.31.0",
"version": "0.31.1",
"components": {
"Accordion": {
"path": "carbon-components-svelte/src/Accordion/Accordion.svelte"

5
rollup.config.js
View file

@ -14,7 +14,10 @@ export default ["es", "umd"].map((format) => {
format,
file: UMD ? pkg.main : pkg.module,
name: UMD ? "carbon-components-svelte" : undefined,
globals: { flatpickr: "flatpickr" },
globals: {
flatpickr: "flatpickr",
"clipboard-copy": "copy",
},
},
external: Object.keys(pkg.dependencies),
plugins: [

4
src/Breadcrumb/BreadcrumbItem.svelte
View file

@ -13,6 +13,10 @@
export let isCurrentPage = false;
import Link from "../Link/Link.svelte";
import { setContext } from "svelte";
setContext("BreadcrumbItem", {});
</script>
<li

13
src/CodeSnippet/CodeSnippet.svelte
View file

@ -8,6 +8,7 @@
/**
* Set the code snippet text
* Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)
* You must use the `code` prop to copy the code
* @type {string}
*/
export let code = undefined;
@ -75,18 +76,26 @@
/** Obtain a reference to the pre HTML element */
export let ref = null;
import { tick } from "svelte";
import { createEventDispatcher, tick } from "svelte";
import copy from "clipboard-copy";
import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
import Button from "../Button/Button.svelte";
import Copy from "../Copy/Copy.svelte";
import CopyButton from "../CopyButton/CopyButton.svelte";
import CodeSnippetSkeleton from "./CodeSnippetSkeleton.svelte";
const dispatch = createEventDispatcher();
function setShowMoreLess() {
const { height } = ref.getBoundingClientRect();
if (height > 0) showMoreLess = ref.getBoundingClientRect().height > 255;
}
function copyCode() {
copy(code);
dispatch("copy");
}
$: expandText = expanded ? showLessText : showMoreText;
$: if (type === "multi" && ref) {
if (code === undefined) setShowMoreLess();
@ -138,6 +147,7 @@
{wrapText && 'bx--snippet--wraptext'}"
{...$$restProps}
on:click
on:click="{copyCode}"
on:mouseover
on:mouseenter
on:mouseleave
@ -182,6 +192,7 @@
feedbackTimeout="{feedbackTimeout}"
iconDescription="{copyButtonDescription}"
on:click
on:click="{copyCode}"
on:animationend
/>
{/if}

1
src/ComposedModal/ModalBody.svelte
View file

@ -11,6 +11,7 @@
role="{hasScrollingContent ? 'region' : undefined}"
class:bx--modal-content="{true}"
class:bx--modal-content--with-form="{hasForm}"
class:bx--modal-scroll-content="{hasScrollingContent}"
{...$$restProps}
>
<slot />

5
src/ContentSwitcher/ContentSwitcher.svelte
View file

@ -6,7 +6,10 @@
/** Set the selected index of the switch item */
export let selectedIndex = 0;
/** Set to `true` to enable the light variant */
/**
* Set to `true` to enable the light variant
* @deprecated
*/
export let light = false;
/**

24
src/ContextMenu/ContextMenu.svelte
View file

@ -26,6 +26,7 @@
const position = writable([x, y]);
const currentIndex = writable(-1);
const hasPopup = writable(false);
const menuOffsetX = writable(0);
const ctx = getContext("ContextMenu");
let options = [];
@ -44,6 +45,7 @@
}
setContext("ContextMenu", {
menuOffsetX,
currentIndex,
position,
close,
@ -77,8 +79,26 @@
<svelte:window
on:contextmenu|preventDefault="{(e) => {
if (level > 1) return;
if (open || x === 0) x = e.x;
if (open || y === 0) y = e.y;
const { height, width } = ref.getBoundingClientRect();
if (open || x === 0) {
if (window.innerWidth - width < e.x) {
x = e.x - width;
} else {
x = e.x;
}
}
if (open || y === 0) {
menuOffsetX.set(e.x);
if (window.innerHeight - height < e.y) {
y = e.y - height;
} else {
y = e.y;
}
}
position.set([x, y]);
open = true;
}}"

21
src/ContextMenu/ContextMenuOption.svelte
View file

@ -1,4 +1,10 @@
<script>
/**
* Specify the kind of option
* @type {"default" | "danger"}
*/
export let kind = "default";
/** Set to `true` to enable the disabled state */
export let disabled = false;
@ -64,11 +70,16 @@
let role = "menuitem";
let submenuOpen = false;
let submenuPosition = [0, 0];
let menuOffsetX = 0;
const unsubPosition = ctx.position.subscribe((position) => {
rootMenuPosition = position;
});
const unsubMenuOffsetX = ctx.menuOffsetX.subscribe((_menuOffsetX) => {
menuOffsetX = _menuOffsetX;
});
function handleClick(opts = {}) {
if (disabled) return ctx.close();
if (subOptions) return;
@ -106,6 +117,7 @@
return () => {
unsubPosition();
unsubMenuOffsetX();
if (unsubCurrentIds) unsubCurrentIds();
if (unsubCurrentId) unsubCurrentId();
if (typeof timeoutHover === "number") clearTimeout(timeoutHover);
@ -118,7 +130,13 @@
$: ctx.setPopup(submenuOpen);
$: if (submenuOpen) {
const { width, y } = ref.getBoundingClientRect();
submenuPosition = [rootMenuPosition[0] + width, y];
let x = rootMenuPosition[0] + width;
if (window.innerWidth - menuOffsetX < width) {
x = rootMenuPosition[0] - width;
}
submenuPosition = [x, y];
}
$: {
if (isSelectable) {
@ -158,6 +176,7 @@
class:bx--context-menu-option="{true}"
class:bx--context-menu-option--disabled="{true}"
class:bx--context-menu-option--active="{subOptions && submenuOpen}"
class:bx--context-menu-option--danger="{!subOptions && kind === 'danger'}"
indented="{indented}"
aria-checked="{isSelectable || isRadio ? selected : undefined}"
data-nested="{ref &&

20
src/CopyButton/CopyButton.svelte
View file

@ -4,8 +4,18 @@
/** Set the title and ARIA label for the copy button */
export let iconDescription = "Copy to clipboard";
import { Copy } from "../Copy";
import Copy16 from "carbon-icons-svelte/lib/Copy16";
/**
* Specify the text to copy
* @type {string}
*/
export let text = undefined;
import Copy from "../Copy/Copy.svelte";
import Copy16 from "carbon-icons-svelte/lib/Copy16/Copy16.svelte";
import copy from "clipboard-copy";
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
</script>
<Copy
@ -14,6 +24,12 @@
title="{iconDescription}"
{...$$restProps}
on:click
on:click="{() => {
if (text !== undefined) {
copy(text);
dispatch('copy');
}
}}"
on:animationend
>
<Copy16 class="bx--snippet__icon" />

36
src/DataTable/DataTable.svelte
View file

@ -2,8 +2,8 @@
/**
* @typedef {string} DataTableKey
* @typedef {any} DataTableValue
* @typedef {{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }} DataTableEmptyHeader
* @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: (a: DataTableValue, b: DataTableValue) => (0 | -1 | 1); columnMenu?: boolean; }} DataTableNonEmptyHeader
* @typedef {{ key: DataTableKey; empty: boolean; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }} DataTableEmptyHeader
* @typedef {{ key: DataTableKey; value: DataTableValue; display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => (0 | -1 | 1)); columnMenu?: boolean; }} DataTableNonEmptyHeader
* @typedef {DataTableNonEmptyHeader | DataTableEmptyHeader} DataTableHeader
* @typedef {{ id: any; [key: string]: DataTableValue; }} DataTableRow
* @typedef {string} DataTableRowId
@ -13,7 +13,7 @@
* @slot {{ row: DataTableRow; cell: DataTableCell; }} cell
* @event {{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }} click
* @event {{ expanded: boolean; }} click:header--expand
* @event {{ header: DataTableHeader; sortDirection: "ascending" | "descending" | "none" }} click:header
* @event {{ header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" }} click:header
* @event {DataTableRow} click:row
* @event {DataTableRow} mouseenter:row
* @event {DataTableRow} mouseleave:row
@ -250,20 +250,26 @@
<th scope="col"></th>
{:else}
<TableHeader
disableSorting="{header.sort === false}"
on:click="{() => {
dispatch('click', { header });
let active = header.key === $sortHeader.key;
let currentSortDirection = active
? $sortHeader.sortDirection
: 'none';
let sortDirection = sortDirectionMap[currentSortDirection];
dispatch('click:header', { header, sortDirection });
sortHeader.set({
id: sortDirection === 'none' ? null : $thKeys[header.key],
key: header.key,
sort: header.sort,
sortDirection,
});
if (header.sort === false) {
dispatch('click:header', { header });
} else {
let active = header.key === $sortHeader.key;
let currentSortDirection = active
? $sortHeader.sortDirection
: 'none';
let sortDirection = sortDirectionMap[currentSortDirection];
dispatch('click:header', { header, sortDirection });
sortHeader.set({
id: sortDirection === 'none' ? null : $thKeys[header.key],
key: header.key,
sort: header.sort,
sortDirection,
});
}
}}"
>
<slot name="cell-header" header="{header}">{header.value}</slot>

8
src/DataTable/DataTableSkeleton.svelte
View file

@ -1,5 +1,5 @@
<script>
/** @extends {"../DataTable/DataTable"} DataTableHeader */
/** @extends {"./DataTable"} DataTableHeader */
/**
* Specify the number of columns
@ -77,7 +77,11 @@
<thead>
<tr>
{#each cols as col (col)}
<th>{values[col] || ""}</th>
{#if typeof values[col] === "object" && values[col].empty === true}
<th></th>
{:else}
<th>{values[col] || ""}</th>
{/if}
{/each}
</tr>
</thead>

9
src/DataTable/TableHeader.svelte
View file

@ -1,4 +1,7 @@
<script>
/** Set to `true` to disable sorting on this specific cell */
export let disableSorting = false;
/** Specify the `scope` attribute */
export let scope = "col";
@ -12,8 +15,8 @@
export let id = "ccs-" + Math.random().toString(36);
import { getContext } from "svelte";
import ArrowUp20 from "carbon-icons-svelte/lib/ArrowUp20";
import ArrowsVertical20 from "carbon-icons-svelte/lib/ArrowsVertical20";
import ArrowUp20 from "carbon-icons-svelte/lib/ArrowUp20/ArrowUp20.svelte";
import ArrowsVertical20 from "carbon-icons-svelte/lib/ArrowsVertical20/ArrowsVertical20.svelte";
const { sortHeader, tableSortable, add } = getContext("DataTable");
@ -24,7 +27,7 @@
$: ariaLabel = translateWithId();
</script>
{#if $tableSortable}
{#if $tableSortable && !disableSorting}
<th
aria-sort="{active ? $sortHeader.sortDirection : 'none'}"
scope="{scope}"

53
src/DataTable/ToolbarSearch.svelte
View file

@ -32,32 +32,33 @@
await tick();
ref.focus();
}
$: classes = [
expanded && "bx--toolbar-search-container-active",
persistent
? "bx--toolbar-search-container-persistent"
: "bx--toolbar-search-container-expandable",
disabled && "bx--toolbar-search-container-disabled",
]
.filter(Boolean)
.join(" ");
</script>
<div
tabindex="{expanded || disabled ? '-1' : tabindex}"
class:bx--toolbar-action="{true}"
class:bx--toolbar-search-container-active="{expanded}"
class:bx--toolbar-search-container-expandable="{!persistent}"
class:bx--toolbar-search-container-persistent="{persistent}"
class:bx--toolbar-search-container-disabled="{disabled}"
on:click="{expandSearch}"
<Search
size="sm"
tabindex="{tabindex}"
disabled="{disabled}"
{...$$restProps}
searchClass="{classes} {$$restProps.class}"
bind:ref
bind:value
on:clear
on:change
on:input
on:focus
on:focus="{expandSearch}"
>
<Search
size="sm"
tabindex="{expanded ? tabindex : '-1'}"
disabled="{disabled}"
{...$$restProps}
bind:ref
bind:value
on:clear
on:change
on:input
on:focus
on:blur
on:blur="{() => {
expanded = !persistent && !!value.length;
}}"
/>
</div>
on:blur
on:blur="{() => {
expanded = !persistent && !!value.length;
}}"
/>

4
src/FormGroup/FormGroup.svelte
View file

@ -5,6 +5,9 @@
/** Set to `true` to render a form requirement */
export let message = false;
/** Set to `true` for to remove the bottom margin */
export let noMargin = false;
/** Specify the message text */
export let messageText = "";
@ -15,6 +18,7 @@
<fieldset
data-invalid="{invalid || undefined}"
class:bx--fieldset="{true}"
class:bx--fieldset--no-margin="{noMargin}"
{...$$restProps}
on:click
on:mouseover

5
src/MultiSelect/MultiSelect.svelte
View file

@ -125,6 +125,9 @@
*/
export let name = undefined;
/** Obtain a reference to the input HTML element */
export let inputRef = null;
import { afterUpdate, createEventDispatcher, setContext } from "svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16/WarningAltFilled16.svelte";
@ -143,7 +146,7 @@
let multiSelectRef = null;
let fieldRef = null;
let selectionRef = null;
let inputRef = null;
let inputValue = "";
let initialSorted = false;
let highlightedIndex = -1;

20
src/OverflowMenu/OverflowMenu.svelte
View file

@ -54,11 +54,19 @@
/** Obtain a reference to the overflow menu element */
export let menuRef = null;
import { createEventDispatcher, setContext, afterUpdate } from "svelte";
import {
createEventDispatcher,
getContext,
setContext,
afterUpdate,
} from "svelte";
import { writable } from "svelte/store";
import OverflowMenuVertical16 from "carbon-icons-svelte/lib/OverflowMenuVertical16/OverflowMenuVertical16.svelte";
import OverflowMenuHorizontal16 from "carbon-icons-svelte/lib/OverflowMenuHorizontal16/OverflowMenuHorizontal16.svelte";
import { formatStyle } from "./formatStyle";
const ctxBreadcrumbItem = getContext("BreadcrumbItem");
const dispatch = createEventDispatcher();
const items = writable([]);
const currentId = writable(undefined);
@ -68,6 +76,10 @@
let buttonWidth = undefined;
let onMountAfterUpdate = true;
$: if (ctxBreadcrumbItem) {
icon = OverflowMenuHorizontal16;
}
setContext("OverflowMenu", {
focusedId,
add: ({ id, text, primaryFocus }) => {
@ -123,6 +135,11 @@
} else if (direction === "bottom") {
menuRef.style.top = height + "px";
}
if (ctxBreadcrumbItem) {
menuRef.style.top = height + 10 + "px";
menuRef.style.left = -11 + "px";
}
}
if (!open) {
@ -218,6 +235,7 @@
class:bx--overflow-menu-options--light="{light}"
class:bx--overflow-menu-options--sm="{size === 'sm'}"
class:bx--overflow-menu-options--xl="{size === 'xl'}"
class:bx--breadcrumb-menu-options="{!!ctxBreadcrumbItem}"
class:menuOptionsClass
>
<slot />

4
src/Search/Search.svelte
View file

@ -12,6 +12,9 @@
*/
export let size = "xl";
/** Specify the class name passed to the outer div element */
export let searchClass = "";
/**
* Set to `true` to display the skeleton state
* @type {boolean} [skeleton=false]
@ -98,6 +101,7 @@
class:bx--search--sm="{size === 'sm' || small}"
class:bx--search--lg="{size === 'lg'}"
class:bx--search--xl="{size === 'xl'}"
class="{searchClass}"
>
<Search16 class="bx--search-magnifier" />
<label id="{id}-search" for="{id}" class:bx--label="{true}"

11
src/Tile/RadioTile.svelte
View file

@ -5,6 +5,9 @@
/** Set to `true` to enable the light variant */
export let light = false;
/** Set to `true` to disable the tile */
export let disabled = false;
/** Specify the value of the radio input */
export let value = "";
@ -21,7 +24,7 @@
export let name = "";
import { getContext } from "svelte";
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16/CheckmarkFilled16.svelte";
const { add, update, selectedValue } = getContext("TileGroup");
@ -36,14 +39,17 @@
name="{name}"
value="{value}"
checked="{checked}"
tabindex="{tabindex}"
tabindex="{disabled ? undefined : tabindex}"
disabled="{disabled}"
class:bx--tile-input="{true}"
on:change
on:change="{() => {
if (disabled) return;
update(value);
}}"
on:keydown
on:keydown="{(e) => {
if (disabled) return;
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
update(value);
@ -56,6 +62,7 @@
class:bx--tile--selectable="{true}"
class:bx--tile--is-selected="{checked}"
class:bx--tile--light="{light}"
class:bx--tile--disabled="{disabled}"
{...$$restProps}
on:click
on:mouseover

13
src/Tile/SelectableTile.svelte
View file

@ -5,6 +5,9 @@
/** Set to `true` to enable the light variant */
export let light = false;
/** Set to `true` to disable the tile */
export let disabled = false;
/** Specify the title of the selectable tile */
export let title = "title";
@ -30,11 +33,11 @@
export let ref = null;
import { createEventDispatcher } from "svelte";
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16/CheckmarkFilled16.svelte";
const dispatch = createEventDispatcher();
$: dispatch(selected ? "select" : "deselect", id);
$: if (!disabled) dispatch(selected ? "select" : "deselect", id);
</script>
<input
@ -47,17 +50,20 @@
value="{value}"
name="{name}"
title="{title}"
disabled="{disabled}"
/>
<label
for="{id}"
tabindex="{tabindex}"
tabindex="{disabled ? undefined : tabindex}"
class:bx--tile="{true}"
class:bx--tile--selectable="{true}"
class:bx--tile--is-selected="{selected}"
class:bx--tile--light="{light}"
class:bx--tile--disabled="{disabled}"
{...$$restProps}
on:click
on:click|preventDefault="{() => {
if (disabled) return;
selected = !selected;
}}"
on:mouseover
@ -65,6 +71,7 @@
on:mouseleave
on:keydown
on:keydown="{(e) => {
if (disabled) return;
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
selected = !selected;

1
src/TimePicker/TimePicker.svelte
View file

@ -67,6 +67,7 @@
<div
class:bx--time-picker="{true}"
class:bx--time-picker--light="{light}"
class:bx--time-picker--invalid="{invalid}"
class:bx--time-picker--sm="{size === 'sm'}"
class:bx--time-picker--xl="{size === 'xl'}"
class:bx--select--light="{light}"

7
src/Tooltip/Tooltip.svelte
View file

@ -63,10 +63,14 @@
/** Obtain a reference to the icon HTML element */
export let refIcon = null;
import { createEventDispatcher, afterUpdate } from "svelte";
import { createEventDispatcher, afterUpdate, setContext } from "svelte";
import { writable } from "svelte/store";
import Information16 from "carbon-icons-svelte/lib/Information16/Information16.svelte";
const dispatch = createEventDispatcher();
const tooltipOpen = writable(open);
setContext("Tooltip", { tooltipOpen });
function onKeydown(e) {
if (e.key === "Escape") {
@ -143,6 +147,7 @@
}
});
$: tooltipOpen.set(open);
$: dispatch(open ? "open" : "close");
$: buttonProps = {
role: "button",

29
src/Tooltip/TooltipFooter.svelte Normal file
View file

@ -0,0 +1,29 @@
<script>
/** Specify a selector to be focused inside the footer when opening the tooltip */
export let selectorPrimaryFocus = "a[href], button:not([disabled])";
import { getContext, onMount } from "svelte";
let ref = null;
let open = false;
const ctx = getContext("Tooltip");
const unsubscribe = ctx.tooltipOpen.subscribe((tooltipOpen) => {
open = tooltipOpen;
});
onMount(() => {
return () => {
unsubscribe();
};
});
$: if (open && ref) {
const node = ref.querySelector(selectorPrimaryFocus);
if (node) node.focus();
}
</script>
<div bind:this="{ref}" class:bx--tooltip__footer="{true}">
<slot />
</div>

1
src/Tooltip/index.js
View file

@ -1 +1,2 @@
export { default as Tooltip } from "./Tooltip.svelte";
export { default as TooltipFooter } from "./TooltipFooter.svelte";

2
src/index.js
View file

@ -121,7 +121,7 @@ export {
export { TimePicker, TimePickerSelect } from "./TimePicker";
export { Toggle, ToggleSkeleton } from "./Toggle";
export { ToggleSmall, ToggleSmallSkeleton } from "./ToggleSmall";
export { Tooltip } from "./Tooltip";
export { Tooltip, TooltipFooter } from "./Tooltip";
export { TooltipDefinition } from "./TooltipDefinition";
export { TooltipIcon } from "./TooltipIcon";
export { Truncate } from "./Truncate";

1
tests/ContextMenu.test.svelte
View file

@ -17,6 +17,7 @@
<ContextMenu>
<ContextMenuOption
kind="danger"
indented
labelText="Copy"
shortcutText="⌘C"

6
tests/DataTable.test.svelte
View file

@ -10,13 +10,14 @@
Button,
Link,
} from "../types";
import type { DataTableHeader } from "../types/DataTable/DataTable";
import Launch16 from "carbon-icons-svelte/lib/Launch16";
const headers = [
const headers: DataTableHeader[] = [
{ key: "name", value: "Name" },
{ key: "protocol", value: "Protocol" },
{ key: "port", value: "Port" },
{ key: "rule", value: "Rule" },
{ key: "rule", value: "Rule", sort: false },
];
const rows = [
{
@ -249,6 +250,7 @@
{ value: 'Protocol' },
{ value: 'Port' },
{ value: 'Rule' },
{ empty: true },
]}"
rows="{10}"
/>

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

@ -11,6 +11,7 @@ export interface CodeSnippetProps {
/**
* Set the code snippet text
* Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)
* You must use the `code` prop to copy the code
*/
code?: string;
@ -115,6 +116,7 @@ export default class CodeSnippet extends SvelteComponentTyped<
mouseenter: WindowEventMap["mouseenter"];
mouseleave: WindowEventMap["mouseleave"];
animationend: WindowEventMap["animationend"];
copy: CustomEvent<any>;
},
{ default: {} }
> {}

6
types/ContextMenu/ContextMenuOption.d.ts vendored
View file

@ -3,6 +3,12 @@ import { SvelteComponentTyped } from "svelte";
export interface ContextMenuOptionProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
/**
* Specify the kind of option
* @default "default"
*/
kind?: "default" | "danger";
/**
* Set to `true` to enable the disabled state
* @default false

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

@ -8,6 +8,11 @@ export interface CopyButtonProps extends CopyProps {
* @default "Copy to clipboard"
*/
iconDescription?: string;
/**
* Specify the text to copy
*/
text?: string;
}
export default class CopyButton extends SvelteComponentTyped<
@ -15,6 +20,7 @@ export default class CopyButton extends SvelteComponentTyped<
{
click: WindowEventMap["click"];
animationend: WindowEventMap["animationend"];
copy: CustomEvent<any>;
},
{}
> {}

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

@ -9,7 +9,7 @@ export interface DataTableEmptyHeader {
key: DataTableKey;
empty: boolean;
display?: (item: Value) => DataTableValue;
sort?: (a: DataTableValue, b: DataTableValue) => 0 | -1 | 1;
sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
columnMenu?: boolean;
}
@ -17,7 +17,7 @@ export interface DataTableNonEmptyHeader {
key: DataTableKey;
value: DataTableValue;
display?: (item: Value) => DataTableValue;
sort?: (a: DataTableValue, b: DataTableValue) => 0 | -1 | 1;
sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
columnMenu?: boolean;
}
@ -141,7 +141,7 @@ export default class DataTable extends SvelteComponentTyped<
["click:header--expand"]: CustomEvent<{ expanded: boolean }>;
["click:header"]: CustomEvent<{
header: DataTableHeader;
sortDirection: "ascending" | "descending" | "none";
sortDirection?: "ascending" | "descending" | "none";
}>;
["click:row"]: CustomEvent<DataTableRow>;
["mouseenter:row"]: CustomEvent<DataTableRow>;

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

@ -1,6 +1,6 @@
/// <reference types="svelte" />
import { SvelteComponentTyped } from "svelte";
import { DataTableHeader } from "../DataTable/DataTable";
import { DataTableHeader } from "./DataTable";
export interface DataTableSkeletonProps
extends DataTableHeader,

6
types/DataTable/TableHeader.d.ts vendored
View file

@ -3,6 +3,12 @@ import { SvelteComponentTyped } from "svelte";
export interface TableHeaderProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["th"]> {
/**
* Set to `true` to disable sorting on this specific cell
* @default false
*/
disableSorting?: boolean;
/**
* Specify the `scope` attribute
* @default "col"

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

@ -15,6 +15,12 @@ export interface FormGroupProps
*/
message?: boolean;
/**
* Set to `true` for to remove the bottom margin
* @default false
*/
noMargin?: boolean;
/**
* Specify the message text
* @default ""

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

@ -174,6 +174,12 @@ export interface MultiSelectProps
* Specify a name attribute for the select
*/
name?: string;
/**
* Obtain a reference to the input HTML element
* @default null
*/
inputRef?: null | HTMLInputElement;
}
export default class MultiSelect extends SvelteComponentTyped<

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

@ -13,6 +13,12 @@ export interface SearchProps {
*/
size?: "sm" | "lg" | "xl";
/**
* Specify the class name passed to the outer div element
* @default ""
*/
searchClass?: string;
/**
* Set to `true` to display the skeleton state
* @default false

6
types/Tile/RadioTile.d.ts vendored
View file

@ -15,6 +15,12 @@ export interface RadioTileProps
*/
light?: boolean;
/**
* Set to `true` to disable the tile
* @default false
*/
disabled?: boolean;
/**
* Specify the value of the radio input
* @default ""

6
types/Tile/SelectableTile.d.ts vendored
View file

@ -15,6 +15,12 @@ export interface SelectableTileProps
*/
light?: boolean;
/**
* Set to `true` to disable the tile
* @default false
*/
disabled?: boolean;
/**
* Specify the title of the selectable tile
* @default "title"

16
types/Tooltip/TooltipFooter.d.ts vendored Normal file
View file

@ -0,0 +1,16 @@
/// <reference types="svelte" />
import { SvelteComponentTyped } from "svelte";
export interface TooltipFooterProps {
/**
* Specify a selector to be focused inside the footer when opening the tooltip
* @default "a[href], button:not([disabled])"
*/
selectorPrimaryFocus?: string;
}
export default class TooltipFooter extends SvelteComponentTyped<
TooltipFooterProps,
{},
{ default: {} }
> {}

1
types/index.d.ts vendored
View file

@ -139,6 +139,7 @@ export { default as ToggleSkeleton } from "./Toggle/ToggleSkeleton";
export { default as ToggleSmall } from "./ToggleSmall/ToggleSmall";
export { default as ToggleSmallSkeleton } from "./ToggleSmall/ToggleSmallSkeleton";
export { default as Tooltip } from "./Tooltip/Tooltip";
export { default as TooltipFooter } from "./Tooltip/TooltipFooter";
export { default as TooltipDefinition } from "./TooltipDefinition/TooltipDefinition";
export { default as TooltipIcon } from "./TooltipIcon/TooltipIcon";
export { default as Truncate } from "./Truncate/Truncate";

13
yarn.lock
View file

@ -453,10 +453,10 @@ caniuse-lite@^1.0.30001181:
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001183.tgz#7a57ba9d6584119bb5f2bc76d3cc47ba9356b3e2"
integrity sha512-7JkwTEE1hlRKETbCFd8HDZeLiQIUcl8rC6JgNjvHCNaxOeNmQ9V4LvQXRUsKIV2CC73qKxljwVhToaA3kLRqTw==
carbon-components@10.31.0:
version "10.31.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.31.0.tgz#050751e7fb4d845b7d1c6e8ac7fdfa9c71403c12"
integrity sha512-gUXRky9rUHavqFLJJQf+Lzouk8GHsXJUjxRgTOUQ6vdBfA0ks6ugwptG8fiFGwCJJht/CW9/YsKb5w8N9a39sg==
carbon-components@10.32.0:
version "10.32.0"
resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.32.0.tgz#0fbf60ea8fc12cea43ae7860bec844b3c2c0880f"
integrity sha512-LM44X6VhUc+yrZBSz+IW1aT/OGxAS0oiiy/kV7CiDpsUDF5zlPOwgokZbeYLo2mhB1wBZ1q9jwvItZ4zfaZuMw==
dependencies:
"@carbon/telemetry" "0.0.0-alpha.6"
flatpickr "4.6.1"
@ -540,6 +540,11 @@ cli-truncate@^2.1.0:
slice-ansi "^3.0.0"
string-width "^4.2.0"
clipboard-copy@3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/clipboard-copy/-/clipboard-copy-3.2.0.tgz#3c5b8651d3512dcfad295d77a9eb09e7fac8d5fb"
integrity sha512-vooFaGFL6ulEP1liiaWFBmmfuPm3cY3y7T9eB83ZTnYc/oFeAKsq3NcDrOkBC8XaauEE8zHQwI7k0+JSYiVQSQ==
cliui@^7.0.2:
version "7.0.4"
resolved "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"