mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +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

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>