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

Reactive audit (#449)

Browse source 
* refactor(search): resolve svelte file paths

* docs(Search): add reactive example

* refactor(tag): use class name directive for tag types, resolve svelte icon path

* chore(button-skeleton): deprecate small prop

* fix(breadcrumb-item): type default slot

* refactor(breadcrumb-skeleton): omit unused index

* refactor(aspect-ratio): use class name directive

* refactor(accordion): use the class name directive, resolve svelte icon paths

* refactor(code-snippet): use class name directive, resolve svelte icon paths

* fix(code-snippet-skeleton): CodeSnippetSkeleton can only be single or multi

* refactor(content-switcher): use class name directive

* docs(content-switcher): add reactive example

* docs(content-switcher): remove unused import

* docs(toggle): add reactive example

* refactor(tooltip-definition): use class name directive

* refactor(tooltip-icon): use class name directive

* refactor(tooltip): resolve svelte icon import

* fix(select): type dispatched change event

* refactor(select): resolve svelte icon import

* feat(select-item): spread rest props, avoid $ variable name

* fix(pagination-nav): type dispatched events

* refactor(pagination): resolve svelte imports

* fix(pagination): type dispatched update event

* fix(overflow-menu): type dispatched close event

* fix(number-input): type dispatched change event

* refactor(modal): use class name directive, resolve svelte imports

* refactor(inline-loading): use class name directive, resolve svelte imports

* refactor(composed-modal): resolve svelte icon imports

* refactor(combo-box): resolve svelte imports

* fix(fluid-form): rest props should not override Form class

* refactor(progress-step): resolve svelte icon imports
This commit is contained in:
Eric Liu 2020-12-06 03:59:30 -08:00 • committed by GitHub
commit 3214d8563f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
56 changed files with 463 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

104
COMPONENT_INDEX.md
View file

@ -192,12 +192,12 @@
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| disabled | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to disable the accordion item |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the first accordion item |
| title | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the accordion item heading<br />Alternatively, use the named slot "title" (e.g., &lt;div slot="title"&gt;...&lt;/div&gt;) |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Expand/Collapse"</code> | Specify the ARIA label for the accordion item chevron icon |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
| disabled | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to disable the accordion item |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the first accordion item |
| title | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the accordion item heading<br />Alternatively, use the "title" slot (e.g., &lt;div slot="title"&gt;...&lt;/div&gt;) |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Expand/Collapse"</code> | Specify the ARIA label for the accordion item chevron icon |
### Slots
@ -294,9 +294,9 @@ None.
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| -- | Yes | -- | -- |
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :------------------------------------------------------------------------ | :------- |
| -- | Yes | <code>{props?: { ["aria-current"]?: string; class: "bx--link"; }} </code> | -- |
### Events
@ -387,11 +387,11 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | -------------------------------------- |
| href | <code>let</code> | No | <code>string</code> | -- | Set the `href` to use an anchor link |
| size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small"</code> | <code>"default"</code> | Specify the size of button skeleton |
| small | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the small variant |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | ------------------------------------ |
| href | <code>let</code> | No | <code>string</code> | -- | Set the `href` to use an anchor link |
| size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small"</code> | <code>"default"</code> | Specify the size of button skeleton |
| small | <code>let</code> | No | <code>boolean</code> | <code>false</code> | -- |
### Slots
@ -527,9 +527,9 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :--------------------------------------------------- | --------------------- | ---------------------------- |
| type | <code>let</code> | No | <code>"single" &#124; "inline" &#124; "multi"</code> | <code>"single"</code> | Set the type of code snippet |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :----------------------------------- | --------------------- | ---------------------------- |
| type | <code>let</code> | No | <code>"single" &#124; "multi"</code> | <code>"single"</code> | Set the type of code snippet |
### Slots
@ -2295,14 +2295,14 @@ export type NumberInputTranslationId = "increment" | "decrement";
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| input | forwarded | -- |
| change | dispatched | -- |
| Event name | Type | Detail |
| :--------- | :--------- | :------------------ |
| change | dispatched | <code>number</code> |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| input | forwarded | -- |
## `NumberInputSkeleton`
@ -2377,14 +2377,14 @@ None.
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :----- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| keydown | forwarded | -- |
| close | dispatched | -- |
| Event name | Type | Detail |
| :--------- | :--------- | :-------------------------------------------- |
| close | dispatched | <code>{ index: number; text: string; }</code> |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| keydown | forwarded | -- |
## `OverflowMenuItem`
@ -2444,9 +2444,9 @@ None.
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :----- |
| update | dispatched | -- |
| Event name | Type | Detail |
| :--------- | :--------- | :----------------------------------------------- |
| update | dispatched | <code>{ pageSize: number; page: number; }</code> |
## `PaginationNav`
@ -2467,11 +2467,11 @@ None.
### Events
| Event name | Type | Detail |
| :--------------------- | :--------- | :----- |
| click:button--previous | dispatched | -- |
| click:button--next | dispatched | -- |
| change | dispatched | -- |
| Event name | Type | Detail |
| :--------------------- | :--------- | :----------------------------- |
| change | dispatched | <code>{ page: number; }</code> |
| click:button--previous | dispatched | <code>{ page: number; }</code> |
| click:button--next | dispatched | <code>{ page: number; }</code> |
## `PaginationSkeleton`
@ -2834,10 +2834,10 @@ None.
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :----- |
| blur | forwarded | -- |
| change | dispatched | -- |
| Event name | Type | Detail |
| :--------- | :--------- | :------------------ |
| change | dispatched | <code>string</code> |
| blur | forwarded | -- |
## `SelectItem`
@ -3320,13 +3320,13 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| selected | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the switch to be selected |
| text | <code>let</code> | No | <code>string</code> | <code>"Provide text"</code> | Specify the switch text<br />Alternatively, use the named slot "text" (e.g., &lt;span slot="text"&gt;...&lt;/span&gt;) |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the switch |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element |
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| selected | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the switch to be selected |
| text | <code>let</code> | No | <code>string</code> | <code>"Provide text"</code> | Specify the switch text<br />Alternatively, use the "text" slot (e.g., &lt;span slot="text"&gt;...&lt;/span&gt;) |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the switch |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element |
### Slots

168
docs/src/COMPONENT_API.json
View file

@ -191,7 +191,7 @@
{
"name": "title",
"kind": "let",
"description": "Specify the title of the accordion item heading\nAlternatively, use the named slot \"title\" (e.g., <div slot=\"title\">...</div>)",
"description": "Specify the title of the accordion item heading\nAlternatively, use the \"title\" slot (e.g., <div slot=\"title\">...</div>)",
"type": "string",
"value": "\"title\"",
"isFunction": false,
@ -456,7 +456,13 @@
"reactive": false
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"slots": [
{
"name": "__default__",
"default": true,
"slot_props": "{props?: { [\"aria-current\"]?: string; class: \"bx--link\"; }}"
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "li" },
{ "type": "forwarded", "name": "mouseover", "element": "li" },
@ -492,7 +498,6 @@
{
"name": "small",
"kind": "let",
"description": "Set to `true` to use the small variant",
"type": "boolean",
"value": "false",
"isFunction": false,
@ -906,7 +911,7 @@
{
"name": "text",
"kind": "let",
"description": "Specify the switch text\nAlternatively, use the named slot \"text\" (e.g., <span slot=\"text\">...</span>)",
"description": "Specify the switch text\nAlternatively, use the \"text\" slot (e.g., <span slot=\"text\">...</span>)",
"type": "string",
"value": "\"Provide text\"",
"isFunction": false,
@ -1884,7 +1889,7 @@
"name": "type",
"kind": "let",
"description": "Set the type of code snippet",
"type": "\"single\" | \"inline\" | \"multi\"",
"type": "\"single\" | \"multi\"",
"value": "\"single\"",
"isFunction": false,
"constant": false,
@ -3122,12 +3127,16 @@
}
],
"events": [
{
"type": "dispatched",
"name": "close",
"detail": "{ index: number; text: string; }"
},
{ "type": "forwarded", "name": "click", "element": "button" },
{ "type": "forwarded", "name": "mouseover", "element": "button" },
{ "type": "forwarded", "name": "mouseenter", "element": "button" },
{ "type": "forwarded", "name": "mouseleave", "element": "button" },
{ "type": "forwarded", "name": "keydown", "element": "button" },
{ "type": "dispatched", "name": "close" }
{ "type": "forwarded", "name": "keydown", "element": "button" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "button" }
@ -6125,12 +6134,12 @@
}
],
"events": [
{ "type": "dispatched", "name": "change", "detail": "number" },
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" },
{ "type": "forwarded", "name": "input", "element": "input" },
{ "type": "dispatched", "name": "change" }
{ "type": "forwarded", "name": "input", "element": "input" }
],
"typedefs": [
{
@ -6345,33 +6354,8 @@
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [
{ "type": "forwarded", "name": "blur", "element": "select" },
{ "type": "dispatched", "name": "change" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
},
{
"moduleName": "SelectSkeleton",
"filePath": "/src/Select/SelectSkeleton.svelte",
"props": [
{
"name": "hideLabel",
"kind": "let",
"description": "Set to `true` to hide the label text",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" }
{ "type": "dispatched", "name": "change", "detail": "string" },
{ "type": "forwarded", "name": "blur", "element": "select" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
@ -6423,37 +6407,8 @@
],
"slots": [],
"events": [],
"typedefs": []
},
{
"moduleName": "SelectItemGroup",
"filePath": "/src/Select/SelectItemGroup.svelte",
"props": [
{
"name": "disabled",
"kind": "let",
"description": "Set to `true` to disable the optgroup element",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "label",
"kind": "let",
"description": "Specify the label attribute of the optgroup element",
"type": "string",
"value": "\"Provide label\"",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [],
"typedefs": [],
"rest_props": { "type": "Element", "name": "optgroup" }
"rest_props": { "type": "Element", "name": "option" }
},
{
"moduleName": "Pagination",
@ -6621,7 +6576,13 @@
}
],
"slots": [],
"events": [{ "type": "dispatched", "name": "update" }],
"events": [
{
"type": "dispatched",
"name": "update",
"detail": "{ pageSize: number; page: number; }"
}
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
},
@ -6706,9 +6667,21 @@
],
"slots": [],
"events": [
{ "type": "dispatched", "name": "click:button--previous" },
{ "type": "dispatched", "name": "click:button--next" },
{ "type": "dispatched", "name": "change" }
{
"type": "dispatched",
"name": "change",
"detail": "{ page: number; }"
},
{
"type": "dispatched",
"name": "click:button--previous",
"detail": "{ page: number; }"
},
{
"type": "dispatched",
"name": "click:button--next",
"detail": "{ page: number; }"
}
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "nav" }
@ -6971,6 +6944,61 @@
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
},
{
"moduleName": "SelectSkeleton",
"filePath": "/src/Select/SelectSkeleton.svelte",
"props": [
{
"name": "hideLabel",
"kind": "let",
"description": "Set to `true` to hide the label text",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [],
"events": [
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
},
{
"moduleName": "SelectItemGroup",
"filePath": "/src/Select/SelectItemGroup.svelte",
"props": [
{
"name": "disabled",
"kind": "let",
"description": "Set to `true` to disable the optgroup element",
"type": "boolean",
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
},
{
"name": "label",
"kind": "let",
"description": "Specify the label attribute of the optgroup element",
"type": "string",
"value": "\"Provide label\"",
"isFunction": false,
"constant": false,
"reactive": false
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [],
"typedefs": [],
"rest_props": { "type": "Element", "name": "optgroup" }
},
{
"moduleName": "SkeletonPlaceholder",
"filePath": "/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte",

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

@ -24,6 +24,10 @@ components: ["ContentSwitcher", "Switch"]
<Switch text="Recommended" />
</ContentSwitcher>
### Reactive example
<FileSource src="/framed/ContentSwitcher/ContentSwitcherReactive" />
### Light variant
<ContentSwitcher light>

4
docs/src/pages/components/Search.svx
View file

@ -13,6 +13,10 @@ The `Search` component size is extra-large by default. There are [large](#large-
<Search placeholder="Search catalog..." value="Cloud functions" />
### Reactive example
<FileSource src="/framed/Search/SearchReactive" />
### Light variant
<Search light />

4
docs/src/pages/components/Toggle.svx
View file

@ -15,6 +15,10 @@ components: ["Toggle", "ToggleSkeleton"]
<Toggle labelText="Push notifications" toggled />
### Reactive example
<FileSource src="/framed/Toggle/ToggleReactive" />
### Custom labels
<Toggle labelText="Push notifications" labelA="No" labelB="Yes" />

29
docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte Normal file
View file

@ -0,0 +1,29 @@
<script>
import { ContentSwitcher, Switch, Button } from "carbon-components-svelte";
let selectedIndex = 1;
</script>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>
<ContentSwitcher bind:selectedIndex>
<Switch text="Latest news" />
<Switch text="Trending" />
<Switch text="Recommended" />
</ContentSwitcher>
<div>
<Button
size="small"
disabled="{selectedIndex === 2}"
on:click="{() => (selectedIndex = 2)}"
>
Set selected to 2
</Button>
</div>
<div>Selected index: {selectedIndex}</div>

35
docs/src/pages/framed/Search/SearchReactive.svelte Normal file
View file

@ -0,0 +1,35 @@
<script>
import { Search, ButtonSet, Button } from "carbon-components-svelte";
let value = "";
</script>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>
<Search bind:value />
<div>
<ButtonSet>
<Button
size="small"
disabled="{value === 'Cloud functions'}"
on:click="{() => (value = 'Cloud functions')}"
>
Set value
</Button>
<Button
kind="ghost"
size="small"
disabled="{value.length === 0}"
on:click="{() => (value = '')}"
>
Clear value
</Button>
</ButtonSet>
</div>
<div>Value: {value}</div>

22
docs/src/pages/framed/Toggle/ToggleReactive.svelte Normal file
View file

@ -0,0 +1,22 @@
<script>
import { Toggle, Button } from "carbon-components-svelte";
let toggled = true;
</script>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>
<Toggle labelText="Push notifications" bind:toggled />
<div>
<Button size="small" on:click="{() => (toggled = !toggled)}">
Toggle
{toggled ? 'off' : 'on'}
</Button>
</div>
<div>Toggled: {toggled}</div>

7
src/Accordion/Accordion.svelte
View file

@ -43,10 +43,11 @@
{:else}
<ul
class:bx--accordion="{true}"
class:bx--accordion--start="{align === 'start'}"
class:bx--accordion--end="{align === 'end'}"
class:bx--accordion--sm="{size === 'sm'}"
class:bx--accordion--xl="{size === 'xl'}"
{...$$restProps}
class="bx--accordion--{align}
{size && `bx--accordion--${size}`}
{$$restProps.class}"
on:click
on:mouseover
on:mouseenter

11
src/Accordion/AccordionItem.svelte
View file

@ -1,7 +1,7 @@
<script>
/**
* Specify the title of the accordion item heading
* Alternatively, use the named slot "title" (e.g., <div slot="title">...</div>)
* Alternatively, use the "title" slot (e.g., <div slot="title">...</div>)
*/
export let title = "title";
@ -15,7 +15,7 @@
export let iconDescription = "Expand/Collapse";
import { onMount, getContext } from "svelte";
import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";
import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16/ChevronRight16.svelte";
let initialDisabled = disabled;
@ -38,8 +38,9 @@
class:bx--accordion__item="{true}"
class:bx--accordion__item--active="{open}"
class:bx--accordion__item--disabled="{disabled}"
class:bx--accordion__item--expanding="{animation === 'expanding'}"
class:bx--accordion__item--collapsing="{animation === 'collapsing'}"
{...$$restProps}
class="bx--accordion__item--{animation} {$$restProps.class}"
on:animationend
on:animationend="{() => {
animation = undefined;
@ -70,11 +71,11 @@
class="bx--accordion__arrow"
aria-label="{iconDescription}"
/>
<div class="bx--accordion__title">
<div class:bx--accordion__title="{true}">
<slot name="title">{title}</slot>
</div>
</button>
<div class="bx--accordion__content">
<div class:bx--accordion__content="{true}">
<slot />
</div>
</li>

15
src/Accordion/AccordionSkeleton.svelte
View file

@ -17,17 +17,18 @@
/** Set to `false` to close the first accordion item */
export let open = true;
import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";
import { SkeletonText } from "../SkeletonText";
import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16/ChevronRight16.svelte";
import SkeletonText from "../SkeletonText/SkeletonText.svelte";
</script>
<ul
class:bx--accordion="{true}"
class:bx--skeleton="{true}"
class:bx--accordion="{true}"
class:bx--accordion--start="{align === 'start'}"
class:bx--accordion--end="{align === 'end'}"
class:bx--accordion--sm="{size === 'sm'}"
class:bx--accordion--xl="{size === 'xl'}"
{...$$restProps}
class="bx--accordion--{align}
{size && `bx--accordion--${size}`}
{$$restProps.class}"
on:click
on:mouseover
on:mouseenter
@ -49,7 +50,7 @@
</div>
</li>
{/if}
{#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item, i (item)}
{#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item (item)}
<li class="bx--accordion__item">
<span class="bx--accordion__heading">
<ChevronRight16 class="bx--accordion__arrow" />

10
src/AspectRatio/AspectRatio.svelte
View file

@ -7,9 +7,15 @@
</script>
<div
{...$$restProps}
class:bx--aspect-ratio="{true}"
class="bx--aspect-ratio--{ratio} {$$restProps.class}"
class:bx--aspect-ratio--2x1="{ratio === '2x1'}"
class:bx--aspect-ratio--16x9="{ratio === '16x9'}"
class:bx--aspect-ratio--4x3="{ratio === '4x3'}"
class:bx--aspect-ratio--1x1="{ratio === '1x1'}"
class:bx--aspect-ratio--3x4="{ratio === '3x4'}"
class:bx--aspect-ratio--9x16="{ratio === '9x16'}"
class:bx--aspect-ratio--1x2="{ratio === '1x2'}"
{...$$restProps}
>
<div class:bx--aspect-ratio--object="{true}">
<slot />

6
src/Breadcrumb/BreadcrumbItem.svelte
View file

@ -1,4 +1,8 @@
<script>
/**
* @slot {{props?: { ["aria-current"]?: string; class: "bx--link"; }}}
*/
/**
* Set the `href` to use an anchor link
* @type {string}
@ -8,7 +12,7 @@
/** Set to `true` if the breadcrumb item represents the current page */
export let isCurrentPage = false;
import { Link } from "../Link";
import Link from "../Link/Link.svelte";
</script>
<li

4
src/Breadcrumb/BreadcrumbSkeleton.svelte
View file

@ -7,16 +7,16 @@
</script>
<div
class:bx--skeleton="{true}"
class:bx--breadcrumb="{true}"
class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
class:bx--skeleton="{true}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave
>
{#each Array.from({ length: count }, (_, i) => i) as item, i (item)}
{#each Array.from({ length: count }, (_, i) => i) as item (item)}
<div class:bx--breadcrumb-item="{true}">
<span class:bx--link="{true}">&nbsp;</span>
</div>

5
src/Button/ButtonSkeleton.svelte
View file

@ -11,7 +11,10 @@
*/
export let size = "default";
/** Set to `true` to use the small variant */
/**
* @deprecated this prop will be removed in the next major release
* Use size="small" instead
*/
export let small = false;
</script>

28
src/CodeSnippet/CodeSnippet.svelte
View file

@ -70,10 +70,10 @@
export let ref = null;
import { tick } from "svelte";
import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
import { Button } from "../Button";
import { Copy } from "../Copy";
import { CopyButton } from "../CopyButton";
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";
function setShowMoreLess() {
@ -101,12 +101,14 @@
{#if type === 'inline'}
{#if hideCopyButton}
<span
class="bx--snippet {type && `bx--snippet--${type}`}
{type === 'inline' && 'bx--btn--copy'}
{expanded && 'bx--snippet--expand'}
{light && 'bx--snippet--light'}
{hideCopyButton && 'bx--snippet--no-copy'}
{wrapText && 'bx--snippet--wraptext'}"
class:bx--snippet="{true}"
class:bx--snippet--expand="{expanded}"
class:bx--snippet--light="{light}"
class:bx--snippet--no-copy="{hideCopyButton}"
class:bx--snippet--wraptext="{wrapText}"
class:bx--snippet--single="{type === 'single'}"
class:bx--snippet--inline="{type === 'inline'}"
class:bx--snippet--multi="{type === 'multi'}"
{...$$restProps}
>
<code id="{id}">
@ -144,8 +146,10 @@
class:bx--snippet--light="{light}"
class:bx--snippet--no-copy="{hideCopyButton}"
class:bx--snippet--wraptext="{wrapText}"
class:bx--snippet--single="{type === 'single'}"
class:bx--snippet--inline="{type === 'inline'}"
class:bx--snippet--multi="{type === 'multi'}"
{...$$restProps}
class="{type && `bx--snippet--${type}`} {$$restProps.class}"
on:mouseover
on:mouseenter
on:mouseleave
@ -153,8 +157,8 @@
<div
role="{type === 'single' ? 'textbox' : undefined}"
tabindex="{type === 'single' ? '0' : undefined}"
class:bx--snippet-container="{true}"
aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}"
class:bx--snippet-container="{true}"
>
<code>
<pre bind:this="{ref}">

4
src/CodeSnippet/CodeSnippetSkeleton.svelte
View file

@ -1,14 +1,14 @@
<script>
/**
* Set the type of code snippet
* @type {"single" | "inline" | "multi"}
* @type {"single" | "multi"}
*/
export let type = "single";
</script>
<div
class:bx--snippet="{true}"
class:bx--skeleton="{true}"
class:bx--snippet="{true}"
class:bx--snippet--single="{type === 'single'}"
class:bx--snippet--multi="{type === 'multi'}"
{...$$restProps}

16
src/ComboBox/ComboBox.svelte
View file

@ -83,15 +83,13 @@
export let listRef = null;
import { createEventDispatcher, afterUpdate, tick } from "svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
import {
ListBox,
ListBoxField,
ListBoxMenu,
ListBoxMenuIcon,
ListBoxMenuItem,
ListBoxSelection,
} from "../ListBox";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
import ListBox from "../ListBox/ListBox.svelte";
import ListBoxField from "../ListBox/ListBoxField.svelte";
import ListBoxMenu from "../ListBox/ListBoxMenu.svelte";
import ListBoxMenuIcon from "../ListBox/ListBoxMenuIcon.svelte";
import ListBoxMenuItem from "../ListBox/ListBoxMenuItem.svelte";
import ListBoxSelection from "../ListBox/ListBoxSelection.svelte";
const dispatch = createEventDispatcher();

11
src/ComposedModal/ComposedModal.svelte
View file

@ -54,15 +54,13 @@
});
function focus(element) {
if (selectorPrimaryFocus == null) {
return;
}
if (selectorPrimaryFocus == null) return;
const node =
(element || innerModal).querySelector(selectorPrimaryFocus) || buttonRef;
if (node != null) node.focus();
}
$: opened = false;
let opened = false;
$: didOpen = open;
onMount(async () => {
@ -116,7 +114,10 @@
<div
bind:this="{innerModal}"
class:bx--modal-container="{true}"
class="{size && `bx--modal-container--${size}`} {containerClass}"
class:bx--modal-container--xs="{size === 'xs'}"
class:bx--modal-container--sm="{size === 'sm'}"
class:bx--modal-container--lg="{size === 'lg'}"
class="{containerClass}"
on:click="{() => {
didClickInnerModal = true;
}}"

2
src/ComposedModal/ModalFooter.svelte
View file

@ -24,7 +24,7 @@
export let danger = false;
import { getContext } from "svelte";
import { Button } from "../Button";
import Button from "../Button/Button.svelte";
const { closeModal, submit } = getContext("ComposedModal");
</script>

2
src/ComposedModal/ModalHeader.svelte
View file

@ -21,7 +21,7 @@
export let iconDescription = "Close";
import { getContext } from "svelte";
import Close20 from "carbon-icons-svelte/lib/Close20";
import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
const { closeModal } = getContext("ComposedModal");
</script>

3
src/ContentSwitcher/ContentSwitcher.svelte
View file

@ -64,8 +64,9 @@
role="tablist"
class:bx--content-switcher="{true}"
class:bx--content-switcher--light="{light}"
class:bx--content-switcher--sm="{size === 'sm'}"
class:bx--content-switcher--xl="{size === 'xl'}"
{...$$restProps}
class="{size && `bx--content-switcher--${size}`} {$$restProps.class}"
on:click
on:mouseover
on:mouseenter

2
src/ContentSwitcher/Switch.svelte
View file

@ -1,7 +1,7 @@
<script>
/**
* Specify the switch text
* Alternatively, use the named slot "text" (e.g., <span slot="text">...</span>)
* Alternatively, use the "text" slot (e.g., <span slot="text">...</span>)
*/
export let text = "Provide text";

8
src/FluidForm/FluidForm.svelte
View file

@ -1,12 +1,10 @@
<script>
import { setContext } from "svelte";
import { Form } from "../Form";
import Form from "../Form/Form.svelte";
setContext("Form", {
isFluid: true,
});
setContext("Form", { isFluid: true });
</script>
<Form class="bx--form--fluid" {...$$restProps}>
<Form {...$$restProps} class="bx--form--fluid {$$restProps.class}">
<slot />
</Form>

6
src/InlineLoading/InlineLoading.svelte
View file

@ -21,9 +21,9 @@
export let successDelay = 1500;
import { createEventDispatcher, afterUpdate, onMount } from "svelte";
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
import Error20 from "carbon-icons-svelte/lib/Error20";
import { Loading } from "../Loading";
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16/CheckmarkFilled16.svelte";
import Error20 from "carbon-icons-svelte/lib/Error20/Error20.svelte";
import Loading from "../Loading/Loading.svelte";
const dispatch = createEventDispatcher();

8
src/Modal/Modal.svelte
View file

@ -69,8 +69,8 @@
export let ref = null;
import { createEventDispatcher, onMount, afterUpdate } from "svelte";
import Close20 from "carbon-icons-svelte/lib/Close20";
import { Button } from "../Button";
import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
import Button from "../Button/Button.svelte";
const dispatch = createEventDispatcher();
@ -160,7 +160,9 @@
aria-modal="true"
aria-label="{ariaLabel}"
class:bx--modal-container="{true}"
class="{size && `bx--modal-container--${size}`}"
class:bx--modal-container--xs="{size === 'xs'}"
class:bx--modal-container--sm="{size === 'sm'}"
class:bx--modal-container--lg="{size === 'lg'}"
on:click="{() => {
didClickInnerModal = true;
}}"

7
src/NumberInput/NumberInput.svelte
View file

@ -1,6 +1,7 @@
<script>
/**
* @typedef {"increment" | "decrement"} NumberInputTranslationId
* @event {number} change
*/
/**
@ -91,9 +92,9 @@
export let ref = null;
import { createEventDispatcher, afterUpdate } from "svelte";
import CaretDownGlyph from "carbon-icons-svelte/lib/CaretDownGlyph";
import CaretUpGlyph from "carbon-icons-svelte/lib/CaretUpGlyph";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
import CaretDownGlyph from "carbon-icons-svelte/lib/CaretDownGlyph/CaretDownGlyph.svelte";
import CaretUpGlyph from "carbon-icons-svelte/lib/CaretUpGlyph/CaretUpGlyph.svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
const defaultTranslations = {
[translationIds.increment]: "Increment number",

6
src/OverflowMenu/OverflowMenu.svelte
View file

@ -1,4 +1,8 @@
<script>
/**
* @event {{ index: number; text: string; }} close
*/
/**
* Specify the size of the overflow menu
* @type {"sm" | "xl"}
@ -52,7 +56,7 @@
import { createEventDispatcher, setContext, afterUpdate } from "svelte";
import { writable } from "svelte/store";
import OverflowMenuVertical16 from "carbon-icons-svelte/lib/OverflowMenuVertical16";
import OverflowMenuVertical16 from "carbon-icons-svelte/lib/OverflowMenuVertical16/OverflowMenuVertical16.svelte";
import { formatStyle } from "./formatStyle";
const dispatch = createEventDispatcher();

13
src/Pagination/Pagination.svelte
View file

@ -1,4 +1,8 @@
<script>
/**
* @event {{ pageSize: number; page: number; }} update
*/
/** Specify the current page index */
export let page = 1;
@ -65,10 +69,11 @@
export let id = "ccs-" + Math.random().toString(36);
import { createEventDispatcher } from "svelte";
import CaretLeft16 from "carbon-icons-svelte/lib/CaretLeft16";
import CaretRight16 from "carbon-icons-svelte/lib/CaretRight16";
import { Button } from "../Button";
import { Select, SelectItem } from "../Select";
import CaretLeft16 from "carbon-icons-svelte/lib/CaretLeft16/CaretLeft16.svelte";
import CaretRight16 from "carbon-icons-svelte/lib/CaretRight16/CaretRight16.svelte";
import Button from "../Button/Button.svelte";
import Select from "../Select/Select.svelte";
import SelectItem from "../Select/SelectItem.svelte";
const dispatch = createEventDispatcher();

2
src/Pagination/PaginationSkeleton.svelte
View file

@ -1,5 +1,5 @@
<script>
import { SkeletonText } from "../SkeletonText";
import SkeletonText from "../SkeletonText/SkeletonText.svelte";
</script>
<div

12
src/PaginationNav/PaginationNav.svelte
View file

@ -1,4 +1,10 @@
<script>
/**
* @event {{ page: number; }} change
* @event {{ page: number; }} click:button--previous
* @event {{ page: number; }} click:button--next
*/
/** Specify the current page index */
export let page = 0;
@ -18,11 +24,11 @@
export let backwardText = "Previous page";
import { afterUpdate, createEventDispatcher } from "svelte";
import CaretLeft16 from "carbon-icons-svelte/lib/CaretLeft16";
import CaretRight16 from "carbon-icons-svelte/lib/CaretRight16";
import CaretLeft16 from "carbon-icons-svelte/lib/CaretLeft16/CaretLeft16.svelte";
import CaretRight16 from "carbon-icons-svelte/lib/CaretRight16/CaretRight16.svelte";
import PaginationItem from "./PaginationItem.svelte";
import PaginationOverflow from "./PaginationOverflow.svelte";
import { Button } from "../Button";
import Button from "../Button/Button.svelte";
const dispatch = createEventDispatcher();
const MIN = 4;

6
src/PaginationNav/PaginationOverflow.svelte
View file

@ -1,4 +1,8 @@
<script>
/**
* @event {{ index: number; }} select
*/
/** Specify the pivot start index */
export let fromIndex = 0;
@ -6,7 +10,7 @@
export let count = 0;
import { createEventDispatcher } from "svelte";
import OverflowMenuHorizontal16 from "carbon-icons-svelte/lib/OverflowMenuHorizontal16";
import OverflowMenuHorizontal16 from "carbon-icons-svelte/lib/OverflowMenuHorizontal16/OverflowMenuHorizontal16.svelte";
import PaginationItem from "./PaginationItem.svelte";
const dispatch = createEventDispatcher();

4
src/ProgressIndicator/ProgressStep.svelte
View file

@ -24,8 +24,8 @@
export let id = "ccs-" + Math.random().toString(36);
import { onMount, getContext } from "svelte";
import CheckmarkOutline16 from "carbon-icons-svelte/lib/CheckmarkOutline16";
import Warning16 from "carbon-icons-svelte/lib/Warning16";
import CheckmarkOutline16 from "carbon-icons-svelte/lib/CheckmarkOutline16/CheckmarkOutline16.svelte";
import Warning16 from "carbon-icons-svelte/lib/Warning16/Warning16.svelte";
let step = {};

8
src/Search/Search.svelte
View file

@ -1,7 +1,7 @@
<script>
/**
* @deprecated this prop will be removed in the next major release
* Set to `true` to use the small variant
* Use size="sm" instead
* @type {boolean} [small=false]
*/
export let small = false;
@ -70,9 +70,9 @@
export let ref = null;
import { createEventDispatcher } from "svelte";
import Close16 from "carbon-icons-svelte/lib/Close16";
import Close20 from "carbon-icons-svelte/lib/Close20";
import Search16 from "carbon-icons-svelte/lib/Search16";
import Close16 from "carbon-icons-svelte/lib/Close16/Close16.svelte";
import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
import Search16 from "carbon-icons-svelte/lib/Search16/Search16.svelte";
import SearchSkeleton from "./SearchSkeleton.svelte";
const dispatch = createEventDispatcher();

8
src/Select/Select.svelte
View file

@ -1,4 +1,8 @@
<script>
/**
* @event {string} change
*/
/**
* Specify the selected item value
* @type {string}
@ -52,8 +56,8 @@
import { createEventDispatcher, setContext, afterUpdate } from "svelte";
import { writable } from "svelte/store";
import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16/ChevronDown16.svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
const dispatch = createEventDispatcher();
const selectedValue = writable(selected);

7
src/Select/SelectItem.svelte
View file

@ -17,8 +17,8 @@
let selected = false;
const unsubscribe = ctx.selectedValue.subscribe(($) => {
selected = $ === value;
const unsubscribe = ctx.selectedValue.subscribe((currentValue) => {
selected = currentValue === value;
});
onDestroy(() => {
@ -32,8 +32,7 @@
hidden="{hidden}"
selected="{selected}"
class:bx--select-option="{true}"
class="{$$restProps.class}"
style="{$$restProps.style}"
{...$$restProps}
>
{text || value}
</option>

34
src/Tag/Tag.svelte
View file

@ -1,11 +1,9 @@
<script>
/**
* @restProps {div | span}
*/
/** @restProps {div | span} */
/**
* Specify the type of tag
* @type {"red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast"} [type]
* @type {"red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast"}
*/
export let type = undefined;
@ -24,7 +22,7 @@
/** Set an id for the filterable tag */
export let id = "ccs-" + Math.random().toString(36);
import Close16 from "carbon-icons-svelte/lib/Close16";
import Close16 from "carbon-icons-svelte/lib/Close16/Close16.svelte";
import TagSkeleton from "./TagSkeleton.svelte";
</script>
@ -44,8 +42,17 @@
class:bx--tag="{true}"
class:bx--tag--disabled="{disabled}"
class:bx--tag--filter="{filter}"
{...$$restProps}
class="{type && `bx--tag--${type}`} {$$restProps.class}"
class:bx--tag--red="{type === 'red'}"
class:bx--tag--magenta="{type === 'magenta'}"
class:bx--tag--purple="{type === 'purple'}"
class:bx--tag--blue="{type === 'blue'}"
class:bx--tag--cyan="{type === 'cyan'}"
class:bx--tag--teal="{type === 'teal'}"
class:bx--tag--green="{type === 'green'}"
class:bx--tag--gray="{type === 'gray'}"
class:bx--tag--cool-gray="{type === 'cool-gray'}"
class:bx--tag--warm-gray="{type === 'warm-gray'}"
class:bx--tag--high-contrast="{type === 'high-contrast'}"
>
<slot props="{{ class: 'bx--tag__label' }}">
<span class:bx--tag__label="{true}">{type}</span>
@ -67,8 +74,17 @@
<span
class:bx--tag="{true}"
class:bx--tag--disabled="{disabled}"
{...$$restProps}
class="{type && `bx--tag--${type}`} {$$restProps.class}"
class:bx--tag--red="{type === 'red'}"
class:bx--tag--magenta="{type === 'magenta'}"
class:bx--tag--purple="{type === 'purple'}"
class:bx--tag--blue="{type === 'blue'}"
class:bx--tag--cyan="{type === 'cyan'}"
class:bx--tag--teal="{type === 'teal'}"
class:bx--tag--green="{type === 'green'}"
class:bx--tag--gray="{type === 'gray'}"
class:bx--tag--cool-gray="{type === 'cool-gray'}"
class:bx--tag--warm-gray="{type === 'warm-gray'}"
class:bx--tag--high-contrast="{type === 'high-contrast'}"
on:click
on:mouseover
on:mouseenter

2
src/Tooltip/Tooltip.svelte
View file

@ -64,7 +64,7 @@
export let refIcon = null;
import { createEventDispatcher, afterUpdate } from "svelte";
import Information16 from "carbon-icons-svelte/lib/Information16";
import Information16 from "carbon-icons-svelte/lib/Information16/Information16.svelte";
const dispatch = createEventDispatcher();

7
src/TooltipDefinition/TooltipDefinition.svelte
View file

@ -51,8 +51,11 @@
class:bx--tooltip__trigger--definition="{true}"
class:bx--tooltip--hidden="{!visible}"
class:bx--tooltip--visible="{visible}"
class="{direction && `bx--tooltip--${direction}`}
{align && `bx--tooltip--align-${align}`}"
class:bx--tooltip--top="{direction === 'top'}"
class:bx--tooltip--bottom="{direction === 'bottom'}"
class:bx--tooltip--align-start="{align === 'start'}"
class:bx--tooltip--align-center="{align === 'center'}"
class:bx--tooltip--align-end="{align === 'end'}"
on:click
on:mouseover
on:mouseenter

10
src/TooltipIcon/TooltipIcon.svelte
View file

@ -36,10 +36,14 @@
class:bx--tooltip__trigger="{true}"
class:bx--tooltip--a11y="{true}"
class:bx--tooltip--hidden="{hidden}"
class:bx--tooltip--top="{direction === 'top'}"
class:bx--tooltip--right="{direction === 'right'}"
class:bx--tooltip--bottom="{direction === 'bottom'}"
class:bx--tooltip--left="{direction === 'left'}"
class:bx--tooltip--align-start="{align === 'start'}"
class:bx--tooltip--align-center="{align === 'center'}"
class:bx--tooltip--align-end="{align === 'end'}"
{...$$restProps}
class="{direction && `bx--tooltip--${direction}`}
{align && `bx--tooltip--align-${align}`}
{$$restProps.class}"
on:click
on:mouseover
on:mouseenter

7
tests/NumberInput.test.svelte
View file

@ -2,7 +2,12 @@
import { NumberInput, NumberInputSkeleton } from "../types";
</script>
<NumberInput label="Clusters" />
<NumberInput
label="Clusters"
on:change="{(e) => {
console.log(e.detail); // number
}}"
/>
<NumberInput
label="Clusters"

6
tests/OverflowMenu.test.svelte
View file

@ -3,7 +3,11 @@
import Add16 from "carbon-icons-svelte/lib/Add16";
</script>
<OverflowMenu>
<OverflowMenu
on:close="{(e) => {
console.log(e.detail); // { index: number; text: string; }
}}"
>
<OverflowMenuItem text="Manage credentials" />
<OverflowMenuItem
href="https://cloud.ibm.com/docs/api-gateway/"

8
tests/Pagination.test.svelte
View file

@ -2,7 +2,13 @@
import { Pagination, PaginationSkeleton } from "../types";
</script>
<Pagination totalItems="{102}" pageSizes="{[10, 15, 20]}" />
<Pagination
totalItems="{102}"
pageSizes="{[10, 15, 20]}"
on:update="{(e) => {
console.log(e.detail); // { pageSize: number; page: number; }
}}"
/>
<Pagination totalItems="{102}" page="{4}" />

14
tests/PaginationNav.test.svelte
View file

@ -4,4 +4,16 @@
<PaginationNav />
<PaginationNav total="{3}" loop />
<PaginationNav
total="{3}"
loop
on:change="{(e) => {
console.log(e.detail); // { page: number; }
}}"
on:click:button--next="{(e) => {
console.log(e.detail); // { page: number; }
}}"
on:click:button--previous="{(e) => {
console.log(e.detail); // { page: number; }
}}"
/>

2
types/Accordion/AccordionItem.d.ts vendored
View file

@ -3,7 +3,7 @@
export interface AccordionItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
/**
* Specify the title of the accordion item heading
* Alternatively, use the named slot "title" (e.g., <div slot="title">...</div>)
* Alternatively, use the "title" slot (e.g., <div slot="title">...</div>)
* @default "title"
*/
title?: string;

2
types/Breadcrumb/BreadcrumbItem.d.ts vendored
View file

@ -16,7 +16,7 @@ export interface BreadcrumbItemProps extends svelte.JSX.HTMLAttributes<HTMLEleme
export default class BreadcrumbItem {
$$prop_def: BreadcrumbItemProps;
$$slot_def: {
default: {};
default: { props?: { ["aria-current"]?: string; class: "bx--link" } };
};
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;

1
types/Button/ButtonSkeleton.d.ts vendored
View file

@ -13,7 +13,6 @@ export interface ButtonSkeletonProps extends svelte.JSX.HTMLAttributes<HTMLEleme
size?: "default" | "field" | "small";
/**
* Set to `true` to use the small variant
* @default false
*/
small?: boolean;

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

@ -5,7 +5,7 @@ export interface CodeSnippetSkeletonProps extends svelte.JSX.HTMLAttributes<HTML
* Set the type of code snippet
* @default "single"
*/
type?: "single" | "inline" | "multi";
type?: "single" | "multi";
}
export default class CodeSnippetSkeleton {

2
types/ContentSwitcher/Switch.d.ts vendored
View file

@ -3,7 +3,7 @@
export interface SwitchProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
/**
* Specify the switch text
* Alternatively, use the named slot "text" (e.g., <span slot="text">...</span>)
* Alternatively, use the "text" slot (e.g., <span slot="text">...</span>)
* @default "Provide text"
*/
text?: string;

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

@ -133,11 +133,11 @@ export default class NumberInput {
label: {};
};
$on(eventname: "change", cb: (event: CustomEvent<number>) => void): () => void;
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
$on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
$on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
$on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
$on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void;
$on(eventname: "change", cb: (event: CustomEvent<any>) => void): () => void;
$on(eventname: string, cb: (event: Event) => void): () => void;
}

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

@ -77,11 +77,11 @@ export default class OverflowMenu {
menu: {};
};
$on(eventname: "close", cb: (event: CustomEvent<{ index: number; text: string }>) => void): () => void;
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
$on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
$on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
$on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
$on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
$on(eventname: "close", cb: (event: CustomEvent<any>) => void): () => void;
$on(eventname: string, cb: (event: Event) => void): () => void;
}

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

@ -102,6 +102,6 @@ export default class Pagination {
$$prop_def: PaginationProps;
$$slot_def: {};
$on(eventname: "update", cb: (event: CustomEvent<any>) => void): () => void;
$on(eventname: "update", cb: (event: CustomEvent<{ pageSize: number; page: number }>) => void): () => void;
$on(eventname: string, cb: (event: Event) => void): () => void;
}

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

@ -42,8 +42,8 @@ export default class PaginationNav {
$$prop_def: PaginationNavProps;
$$slot_def: {};
$on(eventname: "click:button--previous", cb: (event: CustomEvent<any>) => void): () => void;
$on(eventname: "click:button--next", cb: (event: CustomEvent<any>) => void): () => void;
$on(eventname: "change", cb: (event: CustomEvent<any>) => void): () => void;
$on(eventname: "change", cb: (event: CustomEvent<{ page: number }>) => void): () => void;
$on(eventname: "click:button--previous", cb: (event: CustomEvent<{ page: number }>) => void): () => void;
$on(eventname: "click:button--next", cb: (event: CustomEvent<{ page: number }>) => void): () => void;
$on(eventname: string, cb: (event: Event) => void): () => void;
}

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

@ -89,7 +89,7 @@ export default class Select {
default: {};
};
$on(eventname: "change", cb: (event: CustomEvent<string>) => void): () => void;
$on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
$on(eventname: "change", cb: (event: CustomEvent<any>) => void): () => void;
$on(eventname: string, cb: (event: Event) => void): () => void;
}

2
types/Select/SelectItem.d.ts vendored
View file

@ -1,6 +1,6 @@
/// <reference types="svelte" />
export interface SelectItemProps {
export interface SelectItemProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["option"]> {
/**
* Specify the option value
* @default ""

4
types/index.d.ts vendored
View file

@ -86,9 +86,7 @@ export { default as NumberInput } from "./NumberInput/NumberInput";
export { default as NumberInputSkeleton } from "./NumberInput/NumberInputSkeleton";
export { default as OrderedList } from "./OrderedList/OrderedList";
export { default as Select } from "./Select/Select";
export { default as SelectSkeleton } from "./Select/SelectSkeleton";
export { default as SelectItem } from "./Select/SelectItem";
export { default as SelectItemGroup } from "./Select/SelectItemGroup";
export { default as Pagination } from "./Pagination/Pagination";
export { default as PaginationSkeleton } from "./Pagination/PaginationSkeleton";
export { default as PaginationNav } from "./PaginationNav/PaginationNav";
@ -96,6 +94,8 @@ export { default as ProgressIndicator } from "./ProgressIndicator/ProgressIndica
export { default as ProgressIndicatorSkeleton } from "./ProgressIndicator/ProgressIndicatorSkeleton";
export { default as ProgressStep } from "./ProgressIndicator/ProgressStep";
export { default as RadioButtonGroup } from "./RadioButtonGroup/RadioButtonGroup";
export { default as SelectSkeleton } from "./Select/SelectSkeleton";
export { default as SelectItemGroup } from "./Select/SelectItemGroup";
export { default as SkeletonPlaceholder } from "./SkeletonPlaceholder/SkeletonPlaceholder";
export { default as Slider } from "./Slider/Slider";
export { default as SliderSkeleton } from "./Slider/SliderSkeleton";