mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

chore: format files with Prettier 3

Browse source
This commit is contained in:
Eric Liu 2024-11-11 21:27:04 -08:00
commit 8e996dc683
391 changed files with 3725 additions and 3785 deletions
Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -105,7 +105,7 @@ import "carbon-components-svelte/css/all.css";
Update the theme by setting the `theme` attribute on the `html` element. The default `theme` is `"white"`. Update the theme by setting the `theme` attribute on the `html` element. The default `theme` is `"white"`.
```html ```html
<!DOCTYPE html> <!doctype html>
<html lang="en" theme="g10"> <html lang="en" theme="g10">
<body> <body>
... ...

2
docs/src/App.svelte
View file

@ -3,4 +3,4 @@
import { routes } from "../.routify/routes"; import { routes } from "../.routify/routes";
</script> </script>
<Router routes="{routes}" /> <Router {routes} />

10
docs/src/components/ComponentApi.svelte
View file

@ -32,16 +32,16 @@
$: source = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/${component.filePath}`; $: source = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/${component.filePath}`;
$: forwarded_events = component.events.filter( $: forwarded_events = component.events.filter(
(event) => event.type === "forwarded" (event) => event.type === "forwarded",
); );
$: dispatched_events = component.events.filter( $: dispatched_events = component.events.filter(
(event) => event.type === "dispatched" (event) => event.type === "dispatched",
); );
</script> </script>
<p style="margin-bottom: var(--cds-layout-02)"> <p style="margin-bottom: var(--cds-layout-02)">
Source code: Source code:
<OutboundLink size="lg" inline href="{source}"> <OutboundLink size="lg" inline href={source}>
{component.filePath} {component.filePath}
</OutboundLink> </OutboundLink>
</p> </p>
@ -65,7 +65,7 @@
}) as prop (prop.name)} }) as prop (prop.name)}
<StructuredListRow> <StructuredListRow>
<StructuredListCell noWrap> <StructuredListCell noWrap>
<InlineSnippet code="{prop.name}" /> <InlineSnippet code={prop.name} />
{#if prop.reactive} {#if prop.reactive}
<div <div
style="white-space: nowrap; margin-top: var(--cds-spacing-03); margin-bottom: var(--cds-spacing-{prop.isRequired style="white-space: nowrap; margin-top: var(--cds-spacing-03); margin-bottom: var(--cds-spacing-{prop.isRequired
@ -99,7 +99,7 @@
{:else if type.startsWith("(")} {:else if type.startsWith("(")}
<code class="code-01">{type}</code> <code class="code-01">{type}</code>
{:else} {:else}
<InlineSnippet code="{type}" /> <InlineSnippet code={type} />
{/if} {/if}
</div> </div>
{/each} {/each}

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

@ -6,7 +6,7 @@
</script> </script>
<div> <div>
<CodeSnippet code="{code}" type="inline" copy="{(text) => copy(text)}" /> <CodeSnippet {code} type="inline" copy={(text) => copy(text)} />
</div> </div>
<style> <style>

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

@ -26,8 +26,8 @@
kind="ghost" kind="ghost"
target="_blank" target="_blank"
size="field" size="field"
href="{themedSrcUrl}" href={themedSrcUrl}
icon="{Launch}" icon={Launch}
> >
Open in new tab Open in new tab
</Button> </Button>
@ -35,13 +35,13 @@
{/if} {/if}
<div class="preview-viewer" class:framed> <div class="preview-viewer" class:framed>
{#if framed} {#if framed}
<iframe title="{src.split('/').pop()}" src="{themedSrcUrl}"></iframe> <iframe title={src.split("/").pop()} src={themedSrcUrl}></iframe>
{:else} {:else}
<slot /> <slot />
{/if} {/if}
</div> </div>
<div class="code-override"> <div class="code-override">
<CodeSnippet type="multi" code="{codeRaw}" copy="{(text) => copy(text)}"> <CodeSnippet type="multi" code={codeRaw} copy={(text) => copy(text)}>
{@html code} {@html code}
</CodeSnippet> </CodeSnippet>
</div> </div>

10
docs/src/components/TileCard.svelte
View file

@ -15,8 +15,8 @@
<div class="card-wrapper" class:borderRight class:borderBottom> <div class="card-wrapper" class:borderRight class:borderBottom>
<AspectRatio> <AspectRatio>
<svelte:component <svelte:component
this="{tileComponent}" this={tileComponent}
href="{href}" {href}
{...$$restProps} {...$$restProps}
style="height: 100%;" style="height: 100%;"
> >
@ -29,11 +29,11 @@
</div> </div>
<div class="card-footer"> <div class="card-footer">
<svelte:component <svelte:component
this="{LogoGithub}" this={LogoGithub}
size="{32}" size={32}
style="fill: var(--cds-icon-01)" style="fill: var(--cds-icon-01)"
/> />
<Launch size="{20}" style="fill: var(--cds-icon-01)" /> <Launch size={20} style="fill: var(--cds-icon-01)" />
</div> </div>
</div> </div>
</svelte:component> </svelte:component>

20
docs/src/layouts/ComponentLayout.svelte
View file

@ -29,7 +29,7 @@
// TODO: `find` is not supported in IE // TODO: `find` is not supported in IE
$: api_components = components.map((i) => $: api_components = components.map((i) =>
COMPONENT_API.components.find((_) => _.moduleName === i) COMPONENT_API.components.find((_) => _.moduleName === i),
); );
$: multiple = api_components.length > 1; $: multiple = api_components.length > 1;
@ -62,7 +62,7 @@
// TODO: [refactor] read from package.json value // TODO: [refactor] read from package.json value
$: sourceCode = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/${formatSourceURL( $: sourceCode = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/${formatSourceURL(
multiple multiple,
)}`; )}`;
</script> </script>
@ -83,7 +83,7 @@
id="select-theme" id="select-theme"
inline inline
labelText="Theme" labelText="Theme"
bind:selected="{$theme}" bind:selected={$theme}
> >
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
@ -95,8 +95,8 @@
kind="ghost" kind="ghost"
target="_blank" target="_blank"
size="field" size="field"
href="{sourceCode}" href={sourceCode}
icon="{Code}" icon={Code}
> >
Source code Source code
</Button> </Button>
@ -144,28 +144,28 @@
</Row> </Row>
<Row> <Row>
<Column class="prose" noGutter="{multiple}"> <Column class="prose" noGutter={multiple}>
{#if multiple} {#if multiple}
<Tabs class="override-tabs"> <Tabs class="override-tabs">
{#each api_components as component (component.moduleName)} {#each api_components as component (component.moduleName)}
<Tab label="{component.moduleName}" /> <Tab label={component.moduleName} />
{/each} {/each}
<div slot="content" style="padding-top: var(--cds-spacing-06)"> <div slot="content" style="padding-top: var(--cds-spacing-06)">
{#each api_components as component (component.moduleName)} {#each api_components as component (component.moduleName)}
<TabContent> <TabContent>
<ComponentApi component="{component}" /> <ComponentApi {component} />
</TabContent> </TabContent>
{/each} {/each}
</div> </div>
</Tabs> </Tabs>
{:else} {:else}
<ComponentApi component="{api_components[0]}" /> <ComponentApi component={api_components[0]} />
{/if} {/if}
</Column> </Column>
</Row> </Row>
</Grid> </Grid>
<Column class="table" xlg="{4}" lg="{5}"> <Column class="table" xlg={4} lg={5}>
<div class="toc"> <div class="toc">
<h5>Examples</h5> <h5>Examples</h5>
<slot name="aside" /> <slot name="aside" />

2
docs/src/pages/_fallback.svelte
View file

@ -12,7 +12,7 @@
<h1>404</h1> <h1>404</h1>
<div> <div>
Page not found. Page not found.
<Link href="{$url('/')}">Return home</Link> <Link href={$url("/")}>Return home</Link>
</div> </div>
</Column> </Column>
</Row> </Row>

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

@ -52,7 +52,7 @@
$: isMobile = innerWidth < 1056; $: isMobile = innerWidth < 1056;
$: components = $layout.children.filter( $: components = $layout.children.filter(
(child) => child.title === "components" (child) => child.title === "components",
)[0]; )[0];
$beforeUrlChange(() => { $beforeUrlChange(() => {
@ -65,7 +65,7 @@
<svelte:window bind:innerWidth /> <svelte:window bind:innerWidth />
<svelte:body <svelte:body
on:keydown="{(e) => { on:keydown={(e) => {
if (active) return; if (active) return;
if ( if (
document.activeElement instanceof HTMLInputElement || document.activeElement instanceof HTMLInputElement ||
@ -76,14 +76,15 @@
} }
const isCommandOrControl = e.metaKey || e.ctrlKey; const isCommandOrControl = e.metaKey || e.ctrlKey;
const isCmdK = isCommandOrControl && e.key.toLowerCase() === 'k'; const isCmdK = isCommandOrControl && e.key.toLowerCase() === "k";
const isSlash = e.key === '/'; const isSlash = e.key === "/";
if (isCmdK || isSlash) { if (isCmdK || isSlash) {
e.preventDefault(); e.preventDefault();
active = true; active = true;
} }
}}" /> }}
/>
<svelte:head> <svelte:head>
<!-- Tealium/GA Set up --> <!-- Tealium/GA Set up -->
@ -123,26 +124,26 @@
<Theme <Theme
persist persist
bind:theme="{$theme}" bind:theme={$theme}
on:update="{(e) => { on:update={(e) => {
const theme = e.detail.theme; const theme = e.detail.theme;
document.documentElement.style.setProperty( document.documentElement.style.setProperty(
'color-scheme', "color-scheme",
['white', 'g10'].includes(theme) ? 'light' : 'dark' ["white", "g10"].includes(theme) ? "light" : "dark",
); );
}}" }}
> >
<Header <Header
aria-label="Navigation" aria-label="Navigation"
href="{$url('/')}" href={$url("/")}
expandedByDefault="{true}" expandedByDefault={true}
bind:isSideNavOpen bind:isSideNavOpen
> >
<svelte:fragment slot="skip-to-content"> <svelte:fragment slot="skip-to-content">
<SkipToContent /> <SkipToContent />
</svelte:fragment> </svelte:fragment>
<span slot="platform" class="platform-name" class:hidden="{active}"> <span slot="platform" class="platform-name" class:hidden={active}>
Carbon Components Svelte &nbsp;<code class="code-01" Carbon Components Svelte &nbsp;<code class="code-01"
>v{process.env.VERSION || ""}</code >v{process.env.VERSION || ""}</code
> >
@ -152,17 +153,17 @@
bind:value bind:value
bind:active bind:active
placeholder="Search" placeholder="Search"
results="{results}" {results}
on:select="{(e) => { on:select={(e) => {
$goto(e.detail.selectedResult.href); $goto(e.detail.selectedResult.href);
}}" }}
/> />
<HeaderActionLink <HeaderActionLink
icon="{LogoGithub}" icon={LogoGithub}
href="https://github.com/carbon-design-system/carbon-components-svelte" href="https://github.com/carbon-design-system/carbon-components-svelte"
target="_blank" target="_blank"
/> />
<HeaderAction transition="{false}" bind:isOpen> <HeaderAction transition={false} bind:isOpen>
<HeaderPanelLinks> <HeaderPanelLinks>
<HeaderPanelDivider>Carbon Svelte portfolio</HeaderPanelDivider> <HeaderPanelDivider>Carbon Svelte portfolio</HeaderPanelDivider>
<HeaderPanelLink <HeaderPanelLink
@ -197,13 +198,13 @@
</HeaderUtilities> </HeaderUtilities>
</Header> </Header>
<SideNav bind:isOpen="{isSideNavOpen}"> <SideNav bind:isOpen={isSideNavOpen}>
<SideNavItems> <SideNavItems>
{#each components.children.filter((child) => !deprecated.includes(child.title)) as child (child.path)} {#each components.children.filter((child) => !deprecated.includes(child.title)) as child (child.path)}
<SideNavMenuItem <SideNavMenuItem
text="{child.title}" text={child.title}
href="{$url(child.path)}" href={$url(child.path)}
isSelected="{$isActive($url(child.path))}" isSelected={$isActive($url(child.path))}
> >
{child.title} {child.title}
{#if deprecated.includes(child.title)} {#if deprecated.includes(child.title)}

4
docs/src/pages/framed/Accordion/ExpandableAccordion.svelte
View file

@ -22,14 +22,14 @@
let open = false; let open = false;
</script> </script>
<Button kind="ghost" size="field" on:click="{() => (open = !open)}"> <Button kind="ghost" size="field" on:click={() => (open = !open)}>
{open ? "Collapse" : "Expand"} {open ? "Collapse" : "Expand"}
all all
</Button> </Button>
<Accordion> <Accordion>
{#each items as item} {#each items as item}
<AccordionItem title="{item.title}" open="{open}"> <AccordionItem title={item.title} {open}>
<p>{item.description}</p> <p>{item.description}</p>
</AccordionItem> </AccordionItem>
{/each} {/each}

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

@ -10,7 +10,7 @@
<Breadcrumb> <Breadcrumb>
{#each items as item, i} {#each items as item, i}
<BreadcrumbItem href="{item.href}" isCurrentPage="{i === items.length - 1}"> <BreadcrumbItem href={item.href} isCurrentPage={i === items.length - 1}>
{item.text} {item.text}
</BreadcrumbItem> </BreadcrumbItem>
{/each} {/each}

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

@ -5,7 +5,7 @@
let events = []; let events = [];
</script> </script>
<Breakpoint bind:size on:change="{(e) => (events = [...events, e.detail])}" /> <Breakpoint bind:size on:change={(e) => (events = [...events, e.detail])} />
<p>Resize the width of your browser.</p> <p>Resize the width of your browser.</p>
<h6>Breakpoint size</h6> <h6>Breakpoint size</h6>

4
docs/src/pages/framed/Button/ProgrammaticFocus.svelte
View file

@ -7,9 +7,9 @@
<Button bind:ref>Primary button</Button> <Button bind:ref>Primary button</Button>
<Button <Button
kind="ghost" kind="ghost"
on:click="{() => { on:click={() => {
ref?.focus(); ref?.focus();
}}" }}
> >
Click to focus the Primary button Click to focus the Primary button
</Button> </Button>

18
docs/src/pages/framed/Button/SelectedIconOnlyButton.svelte
View file

@ -8,23 +8,23 @@
</script> </script>
<Button <Button
isSelected="{index === 0}" isSelected={index === 0}
kind="ghost" kind="ghost"
iconDescription="Bold" iconDescription="Bold"
icon="{TextBold}" icon={TextBold}
on:click="{() => (index = 0)}" on:click={() => (index = 0)}
/> />
<Button <Button
isSelected="{index === 1}" isSelected={index === 1}
kind="ghost" kind="ghost"
iconDescription="Italicize" iconDescription="Italicize"
icon="{TextItalic}" icon={TextItalic}
on:click="{() => (index = 1)}" on:click={() => (index = 1)}
/> />
<Button <Button
isSelected="{index === 2}" isSelected={index === 2}
kind="ghost" kind="ghost"
iconDescription="Underline" iconDescription="Underline"
icon="{TextUnderline}" icon={TextUnderline}
on:click="{() => (index = 2)}" on:click={() => (index = 2)}
/> />

2
docs/src/pages/framed/Checkbox/CheckboxReactive.svelte
View file

@ -7,7 +7,7 @@
<Checkbox labelText="Label text" bind:checked /> <Checkbox labelText="Label text" bind:checked />
<div style="margin: var(--cds-layout-01) 0"> <div style="margin: var(--cds-layout-01) 0">
<Button on:click="{() => (checked = !checked)}">Toggle</Button> <Button on:click={() => (checked = !checked)}>Toggle</Button>
</div> </div>
<strong>checked:</strong> <strong>checked:</strong>

4
docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte
View file

@ -6,11 +6,11 @@
</script> </script>
{#each values as value} {#each values as value}
<Checkbox bind:group labelText="{value}" value="{value}" /> <Checkbox bind:group labelText={value} {value} />
{/each} {/each}
<div style="margin: var(--cds-layout-01) 0"> <div style="margin: var(--cds-layout-01) 0">
<Button on:click="{() => (group = ['Banana'])}">Set to ["Banana"]</Button> <Button on:click={() => (group = ["Banana"])}>Set to ["Banana"]</Button>
</div> </div>
<strong>Selected:</strong> <strong>Selected:</strong>

2
docs/src/pages/framed/CodeSnippet/CodeSnippetOverride.svelte
View file

@ -5,5 +5,5 @@
<CodeSnippet <CodeSnippet
code="npm i carbon-components-svelte" code="npm i carbon-components-svelte"
copy="{(text) => copy(text)}" copy={(text) => copy(text)}
/> />

16
docs/src/pages/framed/CodeSnippet/CodeSnippetReactive.svelte
View file

@ -4,16 +4,16 @@
let expanded = false; let expanded = false;
</script> </script>
<Button on:click="{() => (expanded = !expanded)}">Toggle expansion</Button> <Button on:click={() => (expanded = !expanded)}>Toggle expansion</Button>
<CodeSnippet <CodeSnippet
type="multi" type="multi"
code="{Array.from({ length: 30 }, (_, i) => i + 1).join('\n')}" code={Array.from({ length: 30 }, (_, i) => i + 1).join("\n")}
bind:expanded bind:expanded
on:expand="{() => { on:expand={() => {
console.log('on:expand'); console.log("on:expand");
}}" }}
on:collapse="{() => { on:collapse={() => {
console.log('on:collapse'); console.log("on:collapse");
}}" }}
/> />

2
docs/src/pages/framed/CodeSnippet/DynamicCodeSnippet.svelte
View file

@ -13,4 +13,4 @@
labelText="Trigger snippet overflow" labelText="Trigger snippet overflow"
style="margin-bottom: var(--cds-spacing-05)" style="margin-bottom: var(--cds-spacing-05)"
/> />
<CodeSnippet type="multi" code="{code}" /> <CodeSnippet type="multi" {code} />

8
docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
View file

@ -17,16 +17,16 @@
<h5>"Show more" will not render</h5> <h5>"Show more" will not render</h5>
<br /> <br />
{/if} {/if}
<div class:hidden="{!toggled}"> <div class:hidden={!toggled}>
<CodeSnippet type="multi" code="{code}" /> <CodeSnippet type="multi" {code} />
</div> </div>
{#if toggled} {#if toggled}
<br /><br /> <br /><br />
<h5>"Show more" will render</h5> <h5>"Show more" will render</h5>
<br /> <br />
<div class:hidden="{!toggled}"> <div class:hidden={!toggled}>
<CodeSnippet type="multi" code="{code}" /> <CodeSnippet type="multi" {code} />
</div> </div>
{/if} {/if}

16
docs/src/pages/framed/ComboBox/ComboBoxClear.svelte
View file

@ -8,13 +8,13 @@
titleText="Contact" titleText="Contact"
placeholder="Select contact method" placeholder="Select contact method"
selectedId="1" selectedId="1"
bind:this="{ref}" bind:this={ref}
items="{[ items={[
{ id: '0', text: 'Slack' }, { id: "0", text: "Slack" },
{ id: '1', text: 'Email' }, { id: "1", text: "Email" },
{ id: '2', text: 'Fax' }, { id: "2", text: "Fax" },
]}" ]}
/> />
<br /> <br />
<Button on:click="{ref.clear}">Clear</Button> <Button on:click={ref.clear}>Clear</Button>
<Button on:click="{() => ref.clear({ focus: false })}">Clear (no focus)</Button> <Button on:click={() => ref.clear({ focus: false })}>Clear (no focus)</Button>

10
docs/src/pages/framed/ComboBox/ComboBoxSlot.svelte
View file

@ -5,11 +5,11 @@
<ComboBox <ComboBox
titleText="Contact" titleText="Contact"
placeholder="Select contact method" placeholder="Select contact method"
items="{[ items={[
{ id: '0', text: 'Slack' }, { id: "0", text: "Slack" },
{ id: '1', text: 'Email' }, { id: "1", text: "Email" },
{ id: '2', text: 'Fax' }, { id: "2", text: "Fax" },
]}" ]}
let:item let:item
let:index let:index
> >

12
docs/src/pages/framed/ComboBox/FilterableComboBox.svelte
View file

@ -10,10 +10,10 @@
<ComboBox <ComboBox
titleText="Contact" titleText="Contact"
placeholder="Select contact method" placeholder="Select contact method"
items="{[ items={[
{ id: '0', text: 'Slack' }, { id: "0", text: "Slack" },
{ id: '1', text: 'Email' }, { id: "1", text: "Email" },
{ id: '2', text: 'Fax' }, { id: "2", text: "Fax" },
]}" ]}
shouldFilterItem="{shouldFilterItem}" {shouldFilterItem}
/> />

14
docs/src/pages/framed/ComboBox/FilterableComboBoxCustomLabel.svelte
View file

@ -24,11 +24,11 @@
<ComboBox <ComboBox
titleText="Contact" titleText="Contact"
placeholder="Select contact method" placeholder="Select contact method"
items="{[ items={[
{ id: '0', key: 'Slack' }, { id: "0", key: "Slack" },
{ id: '1', key: 'Email' }, { id: "1", key: "Email" },
{ id: '2', key: 'Fax' }, { id: "2", key: "Fax" },
]}" ]}
shouldFilterItem="{shouldFilterItem}" {shouldFilterItem}
itemToString="{itemToString}" {itemToString}
/> />

8
docs/src/pages/framed/ComboBox/MultipleComboBox.svelte
View file

@ -18,19 +18,19 @@
</script> </script>
<ComboBox <ComboBox
bind:selectedId="{comboBox1_selectedId}" bind:selectedId={comboBox1_selectedId}
titleText="Primary contact" titleText="Primary contact"
placeholder="Select primary contact method" placeholder="Select primary contact method"
items="{items}" {items}
/> />
<div>Primary: {primary}</div> <div>Primary: {primary}</div>
<ComboBox <ComboBox
bind:selectedId="{comboBox2_selectedId}" bind:selectedId={comboBox2_selectedId}
titleText="Secondary contact" titleText="Secondary contact"
placeholder="Select secondary contact method" placeholder="Select secondary contact method"
items="{items}" {items}
/> />
<div>Secondary: {secondary}</div> <div>Secondary: {secondary}</div>

14
docs/src/pages/framed/ComboBox/ReactiveComboBox.svelte
View file

@ -7,14 +7,14 @@
titleText="Contact" titleText="Contact"
placeholder="Select contact method" placeholder="Select contact method"
bind:selectedId bind:selectedId
items="{[ items={[
{ id: '0', text: 'Slack' }, { id: "0", text: "Slack" },
{ id: '1', text: 'Email' }, { id: "1", text: "Email" },
{ id: '2', text: 'Fax' }, { id: "2", text: "Fax" },
]}" ]}
/> />
<br /> <br />
<Button on:click="{() => (selectedId = undefined)}" <Button on:click={() => (selectedId = undefined)}
>Set to undefined (unselected)</Button >Set to undefined (unselected)</Button
> >
<Button on:click="{() => (selectedId = '2')}">Set to 2 (Fax)</Button> <Button on:click={() => (selectedId = "2")}>Set to 2 (Fax)</Button>

4
docs/src/pages/framed/ContentSwitcher/ContentSwitcherReactive.svelte
View file

@ -13,8 +13,8 @@
<div> <div>
<Button <Button
size="small" size="small"
disabled="{selectedIndex === 2}" disabled={selectedIndex === 2}
on:click="{() => (selectedIndex = 2)}" on:click={() => (selectedIndex = 2)}
> >
Set selected to 2 Set selected to 2
</Button> </Button>

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

@ -18,9 +18,9 @@
indented indented
labelText="Copy" labelText="Copy"
shortcutText="⌘C" shortcutText="⌘C"
icon="{CopyFile}" icon={CopyFile}
/> />
<ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" /> <ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon={Cut} />
<ContextMenuDivider /> <ContextMenuDivider />
<ContextMenuOption indented labelText="Export as"> <ContextMenuOption indented labelText="Export as">
<ContextMenuGroup labelText="Export options" bind:selectedIds> <ContextMenuGroup labelText="Export options" bind:selectedIds>

8
docs/src/pages/framed/ContextMenu/ContextMenuTarget.svelte
View file

@ -11,14 +11,14 @@
let target; let target;
</script> </script>
<ContextMenu target="{target}" on:open="{(e) => console.log(e.detail)}"> <ContextMenu {target} on:open={(e) => console.log(e.detail)}>
<ContextMenuOption <ContextMenuOption
indented indented
labelText="Copy" labelText="Copy"
shortcutText="⌘C" shortcutText="⌘C"
icon="{CopyFile}" icon={CopyFile}
/> />
<ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" /> <ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon={Cut} />
<ContextMenuDivider /> <ContextMenuDivider />
<ContextMenuOption indented labelText="Export as"> <ContextMenuOption indented labelText="Export as">
<ContextMenuGroup labelText="Export options"> <ContextMenuGroup labelText="Export options">
@ -40,7 +40,7 @@
</ContextMenu> </ContextMenu>
<div> <div>
<p bind:this="{target}">Right click this element</p> <p bind:this={target}>Right click this element</p>
</div> </div>
<style> <style>

13
docs/src/pages/framed/ContextMenu/ContextMenuTargets.svelte
View file

@ -12,17 +12,14 @@
let target2; let target2;
</script> </script>
<ContextMenu <ContextMenu target={[target, target2]} on:open={(e) => console.log(e.detail)}>
target="{[target, target2]}"
on:open="{(e) => console.log(e.detail)}"
>
<ContextMenuOption <ContextMenuOption
indented indented
labelText="Copy" labelText="Copy"
shortcutText="⌘C" shortcutText="⌘C"
icon="{CopyFile}" icon={CopyFile}
/> />
<ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" /> <ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon={Cut} />
<ContextMenuDivider /> <ContextMenuDivider />
<ContextMenuOption indented labelText="Export as"> <ContextMenuOption indented labelText="Export as">
<ContextMenuGroup labelText="Export options"> <ContextMenuGroup labelText="Export options">
@ -44,8 +41,8 @@
</ContextMenu> </ContextMenu>
<div> <div>
<p bind:this="{target}">Right click this element</p> <p bind:this={target}>Right click this element</p>
<p bind:this="{target2}">... or this one</p> <p bind:this={target2}>... or this one</p>
</div> </div>
<style> <style>

2
docs/src/pages/framed/CopyButton/CopyButtonOverride.svelte
View file

@ -3,4 +3,4 @@
import { CopyButton } from "carbon-components-svelte"; import { CopyButton } from "carbon-components-svelte";
</script> </script>
<CopyButton text="Carbon svelte" copy="{(text) => copy(text)}" /> <CopyButton text="Carbon svelte" copy={(text) => copy(text)} />

2
docs/src/pages/framed/DataTable/DataTableAppendColumns.svelte
View file

@ -22,7 +22,7 @@
]; ];
</script> </script>
<DataTable sortable headers="{headers}" rows="{rows}"> <DataTable sortable {headers} {rows}>
<svelte:fragment slot="cell" let:cell> <svelte:fragment slot="cell" let:cell>
{#if cell.key === "overflow"} {#if cell.key === "overflow"}
<OverflowMenu flipped> <OverflowMenu flipped>

20
docs/src/pages/framed/DataTable/DataTableBatchSelection.svelte
View file

@ -9,16 +9,16 @@
<DataTable <DataTable
batchSelection batchSelection
bind:selectedRowIds bind:selectedRowIds
headers="{[ headers={[
{ key: 'name', value: 'Name' }, { key: "name", value: "Name" },
{ key: 'port', value: 'Port' }, { key: "port", value: "Port" },
{ key: 'rule', value: 'Rule' }, { key: "rule", value: "Rule" },
]}" ]}
rows="{Array.from({ length: 6 }).map((_, i) => ({ rows={Array.from({ length: 6 }).map((_, i) => ({
id: i, id: i,
name: 'Load Balancer ' + (i + 1), name: "Load Balancer " + (i + 1),
protocol: 'HTTP', protocol: "HTTP",
port: i % 3 ? (i % 2 ? 3000 : 80) : 443, port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
rule: i % 3 ? 'Round robin' : 'DNS delegation', rule: i % 3 ? "Round robin" : "DNS delegation",
}))}" }))}
/> />

20
docs/src/pages/framed/DataTable/DataTableBatchSelectionInitial.svelte
View file

@ -9,16 +9,16 @@
<DataTable <DataTable
batchSelection batchSelection
bind:selectedRowIds bind:selectedRowIds
headers="{[ headers={[
{ key: 'name', value: 'Name' }, { key: "name", value: "Name" },
{ key: 'port', value: 'Port' }, { key: "port", value: "Port" },
{ key: 'rule', value: 'Rule' }, { key: "rule", value: "Rule" },
]}" ]}
rows="{Array.from({ length: 6 }).map((_, i) => ({ rows={Array.from({ length: 6 }).map((_, i) => ({
id: i, id: i,
name: 'Load Balancer ' + (i + 1), name: "Load Balancer " + (i + 1),
protocol: 'HTTP', protocol: "HTTP",
port: i % 3 ? (i % 2 ? 3000 : 80) : 443, port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
rule: i % 3 ? 'Round robin' : 'DNS delegation', rule: i % 3 ? "Round robin" : "DNS delegation",
}))}" }))}
/> />

4
docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbar.svelte
View file

@ -31,10 +31,10 @@
$: console.log("selectedRowIds", selectedRowIds); $: console.log("selectedRowIds", selectedRowIds);
</script> </script>
<DataTable batchSelection bind:selectedRowIds headers="{headers}" rows="{rows}"> <DataTable batchSelection bind:selectedRowIds {headers} {rows}>
<Toolbar> <Toolbar>
<ToolbarBatchActions> <ToolbarBatchActions>
<Button icon="{Save}">Save</Button> <Button icon={Save}>Save</Button>
</ToolbarBatchActions> </ToolbarBatchActions>
<ToolbarContent> <ToolbarContent>
<ToolbarSearch /> <ToolbarSearch />

20
docs/src/pages/framed/DataTable/DataTableBatchSelectionToolbarControlled.svelte
View file

@ -32,32 +32,32 @@
<DataTable <DataTable
selectable selectable
batchSelection="{active}" batchSelection={active}
bind:selectedRowIds bind:selectedRowIds
headers="{headers}" {headers}
rows="{rows}" {rows}
> >
<Toolbar> <Toolbar>
<ToolbarBatchActions <ToolbarBatchActions
bind:active bind:active
on:cancel="{(e) => { on:cancel={(e) => {
e.preventDefault(); e.preventDefault();
active = false; active = false;
}}" }}
> >
<Button <Button
icon="{TrashCan}" icon={TrashCan}
disabled="{selectedRowIds.length === 0}" disabled={selectedRowIds.length === 0}
on:click="{() => { on:click={() => {
rows = rows.filter((row) => !selectedRowIds.includes(row.id)); rows = rows.filter((row) => !selectedRowIds.includes(row.id));
selectedRowIds = []; selectedRowIds = [];
}}" }}
> >
Delete Delete
</Button> </Button>
</ToolbarBatchActions> </ToolbarBatchActions>
<ToolbarContent> <ToolbarContent>
<Button on:click="{() => (active = true)}">Edit rows</Button> <Button on:click={() => (active = true)}>Edit rows</Button>
</ToolbarContent> </ToolbarContent>
</Toolbar> </Toolbar>
</DataTable> </DataTable>

22
docs/src/pages/framed/DataTable/DataTableExpandableSelectable.svelte
View file

@ -15,19 +15,19 @@
batchSelection batchSelection
bind:expandedRowIds bind:expandedRowIds
bind:selectedRowIds bind:selectedRowIds
headers="{[ headers={[
{ key: 'name', value: 'Name' }, { key: "name", value: "Name" },
{ key: 'protocol', value: 'Protocol' }, { key: "protocol", value: "Protocol" },
{ key: 'port', value: 'Port' }, { key: "port", value: "Port" },
{ key: 'rule', value: 'Rule' }, { key: "rule", value: "Rule" },
]}" ]}
rows="{Array.from({ length: 6 }).map((_, i) => ({ rows={Array.from({ length: 6 }).map((_, i) => ({
id: i, id: i,
name: 'Load Balancer ' + (i + 1), name: "Load Balancer " + (i + 1),
protocol: 'HTTP', protocol: "HTTP",
port: i % 3 ? (i % 2 ? 3000 : 80) : 443, port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
rule: i % 3 ? 'Round robin' : 'DNS delegation', rule: i % 3 ? "Round robin" : "DNS delegation",
}))}" }))}
> >
<svelte:fragment slot="expanded-row" let:row> <svelte:fragment slot="expanded-row" let:row>
<pre> {JSON.stringify(row, null, 2)}</pre> <pre> {JSON.stringify(row, null, 2)}</pre>

66
docs/src/pages/framed/DataTable/DataTableExpandableZebra.svelte
View file

@ -5,57 +5,57 @@
<DataTable <DataTable
zebra zebra
expandable expandable
nonExpandableRowIds="{['a', 'd']}" nonExpandableRowIds={["a", "d"]}
headers="{[ headers={[
{ key: 'name', value: 'Name' }, { key: "name", value: "Name" },
{ key: 'protocol', value: 'Protocol' }, { key: "protocol", value: "Protocol" },
{ key: 'port', value: 'Port' }, { key: "port", value: "Port" },
{ key: 'rule', value: 'Rule' }, { key: "rule", value: "Rule" },
]}" ]}
rows="{[ rows={[
{ {
id: 'a', id: "a",
name: 'Load Balancer 3', name: "Load Balancer 3",
protocol: 'HTTP', protocol: "HTTP",
port: 3000, port: 3000,
rule: 'Round robin', rule: "Round robin",
}, },
{ {
id: 'b', id: "b",
name: 'Load Balancer 1', name: "Load Balancer 1",
protocol: 'HTTP', protocol: "HTTP",
port: 443, port: 443,
rule: 'Round robin', rule: "Round robin",
}, },
{ {
id: 'c', id: "c",
name: 'Load Balancer 2', name: "Load Balancer 2",
protocol: 'HTTP', protocol: "HTTP",
port: 80, port: 80,
rule: 'DNS delegation', rule: "DNS delegation",
}, },
{ {
id: 'd', id: "d",
name: 'Load Balancer 6', name: "Load Balancer 6",
protocol: 'HTTP', protocol: "HTTP",
port: 3000, port: 3000,
rule: 'Round robin', rule: "Round robin",
}, },
{ {
id: 'e', id: "e",
name: 'Load Balancer 4', name: "Load Balancer 4",
protocol: 'HTTP', protocol: "HTTP",
port: 443, port: 443,
rule: 'Round robin', rule: "Round robin",
}, },
{ {
id: 'f', id: "f",
name: 'Load Balancer 5', name: "Load Balancer 5",
protocol: 'HTTP', protocol: "HTTP",
port: 80, port: 80,
rule: 'DNS delegation', rule: "DNS delegation",
}, },
]}" ]}
> >
<svelte:fragment slot="expanded-row" let:row> <svelte:fragment slot="expanded-row" let:row>
<pre>{JSON.stringify(row, null, 2)}</pre> <pre>{JSON.stringify(row, null, 2)}</pre>

24
docs/src/pages/framed/DataTable/DataTableFilterCustom.svelte
View file

@ -22,27 +22,27 @@
</script> </script>
<DataTable <DataTable
headers="{[ headers={[
{ key: 'name', value: 'Name' }, { key: "name", value: "Name" },
{ key: 'protocol', value: 'Protocol' }, { key: "protocol", value: "Protocol" },
{ key: 'port', value: 'Port' }, { key: "port", value: "Port" },
{ key: 'rule', value: 'Rule' }, { key: "rule", value: "Rule" },
]}" ]}
rows="{rows}" {rows}
pageSize="{pageSize}" {pageSize}
page="{page}" {page}
> >
<Toolbar> <Toolbar>
<ToolbarContent> <ToolbarContent>
<ToolbarSearch <ToolbarSearch
persistent persistent
value="round" value="round"
shouldFilterRows="{(row, value) => { shouldFilterRows={(row, value) => {
return ( return (
/(6|8)$/.test(row.name) && /(6|8)$/.test(row.name) &&
row.rule.toLowerCase().includes(value.toLowerCase()) row.rule.toLowerCase().includes(value.toLowerCase())
); );
}}" }}
bind:filteredRowIds bind:filteredRowIds
/> />
</ToolbarContent> </ToolbarContent>
@ -52,6 +52,6 @@
<Pagination <Pagination
bind:pageSize bind:pageSize
bind:page bind:page
totalItems="{filteredRowIds.length}" totalItems={filteredRowIds.length}
pageSizeInputDisabled pageSizeInputDisabled
/> />

20
docs/src/pages/framed/DataTable/DataTableFilterable.svelte
View file

@ -22,15 +22,15 @@
</script> </script>
<DataTable <DataTable
headers="{[ headers={[
{ key: 'name', value: 'Name' }, { key: "name", value: "Name" },
{ key: 'protocol', value: 'Protocol' }, { key: "protocol", value: "Protocol" },
{ key: 'port', value: 'Port' }, { key: "port", value: "Port" },
{ key: 'rule', value: 'Rule' }, { key: "rule", value: "Rule" },
]}" ]}
rows="{rows}" {rows}
pageSize="{pageSize}" {pageSize}
page="{page}" {page}
> >
<Toolbar> <Toolbar>
<ToolbarContent> <ToolbarContent>
@ -47,6 +47,6 @@
<Pagination <Pagination
bind:pageSize bind:pageSize
bind:page bind:page
totalItems="{filteredRowIds.length}" totalItems={filteredRowIds.length}
pageSizeInputDisabled pageSizeInputDisabled
/> />

22
docs/src/pages/framed/DataTable/DataTableHeaderWidth.svelte
View file

@ -3,17 +3,17 @@
</script> </script>
<DataTable <DataTable
headers="{[ headers={[
{ key: 'name', value: 'Name', width: '50%', minWidth: '200px' }, { key: "name", value: "Name", width: "50%", minWidth: "200px" },
{ key: 'protocol', value: 'Protocol', width: '60px' }, { key: "protocol", value: "Protocol", width: "60px" },
{ key: 'port', value: 'Port', width: '60px' }, { key: "port", value: "Port", width: "60px" },
{ key: 'rule', value: 'Rule', width: '10rem' }, { key: "rule", value: "Rule", width: "10rem" },
]}" ]}
rows="{Array.from({ length: 6 }).map((_, i) => ({ rows={Array.from({ length: 6 }).map((_, i) => ({
id: i, id: i,
name: 'Load Balancer ' + (i + 1), name: "Load Balancer " + (i + 1),
protocol: 'HTTP', protocol: "HTTP",
port: i % 3 ? (i % 2 ? 3000 : 80) : 443, port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
rule: i % 3 ? 'Round robin' : 'DNS delegation', rule: i % 3 ? "Round robin" : "DNS delegation",
}))}" }))}
/> />

18
docs/src/pages/framed/DataTable/DataTableNonExpandableRows.svelte
View file

@ -49,16 +49,16 @@
<DataTable <DataTable
batchExpansion batchExpansion
nonExpandableRowIds="{rows nonExpandableRowIds={rows
.filter((row) => row.port < 3000) .filter((row) => row.port < 3000)
.map((row) => row.id)}" .map((row) => row.id)}
headers="{[ headers={[
{ key: 'name', value: 'Name' }, { key: "name", value: "Name" },
{ key: 'protocol', value: 'Protocol' }, { key: "protocol", value: "Protocol" },
{ key: 'port', value: 'Port' }, { key: "port", value: "Port" },
{ key: 'rule', value: 'Rule' }, { key: "rule", value: "Rule" },
]}" ]}
rows="{rows}" {rows}
> >
<svelte:fragment slot="expanded-row" let:row> <svelte:fragment slot="expanded-row" let:row>
<pre>{JSON.stringify(row, null, 2)}</pre> <pre>{JSON.stringify(row, null, 2)}</pre>

18
docs/src/pages/framed/DataTable/DataTableNonSelectableRows.svelte
View file

@ -49,14 +49,14 @@
<DataTable <DataTable
batchSelection batchSelection
nonSelectableRowIds="{rows nonSelectableRowIds={rows
.filter((row) => row.port === 3000) .filter((row) => row.port === 3000)
.map((row) => row.id)}" .map((row) => row.id)}
headers="{[ headers={[
{ key: 'name', value: 'Name' }, { key: "name", value: "Name" },
{ key: 'protocol', value: 'Protocol' }, { key: "protocol", value: "Protocol" },
{ key: 'port', value: 'Port' }, { key: "port", value: "Port" },
{ key: 'rule', value: 'Rule' }, { key: "rule", value: "Rule" },
]}" ]}
rows="{rows}" {rows}
/> />

20
docs/src/pages/framed/DataTable/DataTablePagination.svelte
View file

@ -16,19 +16,19 @@
sortable sortable
title="Load balancers" title="Load balancers"
description="Your organization's active load balancers." description="Your organization's active load balancers."
headers="{[ headers={[
{ key: 'name', value: 'Name' }, { key: "name", value: "Name" },
{ key: 'protocol', value: 'Protocol' }, { key: "protocol", value: "Protocol" },
{ key: 'port', value: 'Port' }, { key: "port", value: "Port" },
{ key: 'rule', value: 'Rule' }, { key: "rule", value: "Rule" },
]}" ]}
pageSize="{pageSize}" {pageSize}
page="{page}" {page}
rows="{rows}" {rows}
/> />
<Pagination <Pagination
bind:pageSize bind:pageSize
bind:page bind:page
totalItems="{rows.length}" totalItems={rows.length}
pageSizeInputDisabled pageSizeInputDisabled
/> />

90
docs/src/pages/framed/DataTable/DataTableProgrammaticSorting.svelte
View file

@ -10,32 +10,32 @@
<Button <Button
kind="tertiary" kind="tertiary"
disabled="{sortKey === 'port' && sortDirection === 'ascending'}" disabled={sortKey === "port" && sortDirection === "ascending"}
on:click="{() => { on:click={() => {
sortKey = 'port'; sortKey = "port";
sortDirection = 'ascending'; sortDirection = "ascending";
}}" }}
> >
Sort "port" in ascending order Sort "port" in ascending order
</Button> </Button>
<Button <Button
kind="tertiary" kind="tertiary"
disabled="{sortKey === 'name' && sortDirection === 'descending'}" disabled={sortKey === "name" && sortDirection === "descending"}
on:click="{() => { on:click={() => {
sortKey = 'name'; sortKey = "name";
sortDirection = 'descending'; sortDirection = "descending";
}}" }}
> >
Sort "name" in descending order Sort "name" in descending order
</Button> </Button>
<Button <Button
kind="ghost" kind="ghost"
on:click="{() => { on:click={() => {
sortKey = null; sortKey = null;
sortDirection = 'none'; sortDirection = "none";
}}" }}
> >
Clear sorting Clear sorting
</Button> </Button>
@ -44,54 +44,54 @@
sortable sortable
bind:sortKey bind:sortKey
bind:sortDirection bind:sortDirection
headers="{[ headers={[
{ key: 'name', value: 'Name' }, { key: "name", value: "Name" },
{ key: 'protocol', value: 'Protocol', sort: false }, { key: "protocol", value: "Protocol", sort: false },
{ key: 'port', value: 'Port' }, { key: "port", value: "Port" },
{ key: 'rule', value: 'Rule' }, { key: "rule", value: "Rule" },
]}" ]}
rows="{[ rows={[
{ {
id: 'a', id: "a",
name: 'Load Balancer 3', name: "Load Balancer 3",
protocol: 'HTTP', protocol: "HTTP",
port: 3000, port: 3000,
rule: 'Round robin', rule: "Round robin",
}, },
{ {
id: 'b', id: "b",
name: 'Load Balancer 1', name: "Load Balancer 1",
protocol: 'HTTP', protocol: "HTTP",
port: 443, port: 443,
rule: 'Round robin', rule: "Round robin",
}, },
{ {
id: 'c', id: "c",
name: 'Load Balancer 2', name: "Load Balancer 2",
protocol: 'HTTP', protocol: "HTTP",
port: 80, port: 80,
rule: 'DNS delegation', rule: "DNS delegation",
}, },
{ {
id: 'd', id: "d",
name: 'Load Balancer 6', name: "Load Balancer 6",
protocol: 'HTTP', protocol: "HTTP",
port: 3000, port: 3000,
rule: 'Round robin', rule: "Round robin",
}, },
{ {
id: 'e', id: "e",
name: 'Load Balancer 4', name: "Load Balancer 4",
protocol: 'HTTP', protocol: "HTTP",
port: 443, port: 443,
rule: 'Round robin', rule: "Round robin",
}, },
{ {
id: 'f', id: "f",
name: 'Load Balancer 5', name: "Load Balancer 5",
protocol: 'HTTP', protocol: "HTTP",
port: 80, port: 80,
rule: 'DNS delegation', rule: "DNS delegation",
}, },
]}" ]}
/> />

2
docs/src/pages/framed/DataTable/RadioSelectableDataTable.svelte
View file

@ -21,4 +21,4 @@
$: console.log("selectedRowIds", selectedRowIds); $: console.log("selectedRowIds", selectedRowIds);
</script> </script>
<DataTable radio bind:selectedRowIds headers="{headers}" rows="{rows}" /> <DataTable radio bind:selectedRowIds {headers} {rows} />

20
docs/src/pages/framed/DataTable/SelectableDataTable.svelte
View file

@ -9,16 +9,16 @@
<DataTable <DataTable
selectable selectable
bind:selectedRowIds bind:selectedRowIds
headers="{[ headers={[
{ key: 'name', value: 'Name' }, { key: "name", value: "Name" },
{ key: 'port', value: 'Port' }, { key: "port", value: "Port" },
{ key: 'rule', value: 'Rule' }, { key: "rule", value: "Rule" },
]}" ]}
rows="{Array.from({ length: 6 }).map((_, i) => ({ rows={Array.from({ length: 6 }).map((_, i) => ({
id: i, id: i,
name: 'Load Balancer ' + (i + 1), name: "Load Balancer " + (i + 1),
protocol: 'HTTP', protocol: "HTTP",
port: i % 3 ? (i % 2 ? 3000 : 80) : 443, port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
rule: i % 3 ? 'Round robin' : 'DNS delegation', rule: i % 3 ? "Round robin" : "DNS delegation",
}))}" }))}
/> />

4
docs/src/pages/framed/DatePicker/DatePickerModal.svelte
View file

@ -9,14 +9,14 @@
let open = false; let open = false;
</script> </script>
<Button on:click="{() => (open = true)}">Select date</Button> <Button on:click={() => (open = true)}>Select date</Button>
<Modal <Modal
bind:open bind:open
modalHeading="Meeting date" modalHeading="Meeting date"
primaryButtonText="Confirm" primaryButtonText="Confirm"
secondaryButtonText="Cancel" secondaryButtonText="Cancel"
on:click:button--secondary="{() => (open = false)}" on:click:button--secondary={() => (open = false)}
> >
<DatePicker datePickerType="single" style="min-height: 420px"> <DatePicker datePickerType="single" style="min-height: 420px">
<DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" /> <DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />

10
docs/src/pages/framed/Dropdown/DropdownSlot.svelte
View file

@ -5,11 +5,11 @@
<Dropdown <Dropdown
titleText="Contact" titleText="Contact"
selectedId="0" selectedId="0"
items="{[ items={[
{ id: '0', text: 'Slack' }, { id: "0", text: "Slack" },
{ id: '1', text: 'Email' }, { id: "1", text: "Email" },
{ id: '2', text: 'Fax' }, { id: "2", text: "Fax" },
]}" ]}
let:item let:item
let:index let:index
> >

10
docs/src/pages/framed/Dropdown/MultipleDropdown.svelte
View file

@ -19,18 +19,18 @@
<Dropdown <Dropdown
titleText="Primary contact" titleText="Primary contact"
bind:selectedId="{dropdown1_selectedId}" bind:selectedId={dropdown1_selectedId}
items="{items}" {items}
/> />
<div>Primary: {primary}</div> <div>Primary: {primary}</div>
<Dropdown <Dropdown
invalid="{dropdown1_selectedId === dropdown2_selectedId}" invalid={dropdown1_selectedId === dropdown2_selectedId}
invalidText="Secondary contact method must be different from the primary contact" invalidText="Secondary contact method must be different from the primary contact"
titleText="Secondary contact" titleText="Secondary contact"
bind:selectedId="{dropdown2_selectedId}" bind:selectedId={dropdown2_selectedId}
items="{items}" {items}
/> />
<div>Secondary: {secondary}</div> <div>Secondary: {secondary}</div>

12
docs/src/pages/framed/FileUploader/FileUploaderClearFiles.svelte
View file

@ -6,7 +6,7 @@
</script> </script>
<FileUploader <FileUploader
bind:this="{fileUploader}" bind:this={fileUploader}
multiple multiple
labelTitle="Upload files" labelTitle="Upload files"
buttonLabel="Add files" buttonLabel="Add files"
@ -18,15 +18,11 @@
<Button <Button
kind="tertiary" kind="tertiary"
disabled="{!files.length}" disabled={!files.length}
on:click="{fileUploader.clearFiles}" on:click={fileUploader.clearFiles}
> >
Clear (programmatic) Clear (programmatic)
</Button> </Button>
<Button <Button kind="tertiary" disabled={!files.length} on:click={() => (files = [])}>
kind="tertiary"
disabled="{!files.length}"
on:click="{() => (files = [])}"
>
Clear (two-way binding) Clear (two-way binding)
</Button> </Button>

4
docs/src/pages/framed/FluidForm/FluidFormInvalid.svelte
View file

@ -14,8 +14,8 @@
<FluidForm> <FluidForm>
<TextInput labelText="User name" placeholder="Enter user name..." required /> <TextInput labelText="User name" placeholder="Enter user name..." required />
<PasswordInput <PasswordInput
bind:value="{password}" bind:value={password}
invalid="{invalid}" {invalid}
invalidText="Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number." invalidText="Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number."
required required
type="password" type="password"

8
docs/src/pages/framed/Grid/OffsetColumns.svelte
View file

@ -4,9 +4,9 @@
<Grid> <Grid>
<Row> <Row>
<Column sm="{{ span: 1, offset: 3 }}">Offset 3</Column> <Column sm={{ span: 1, offset: 3 }}>Offset 3</Column>
<Column sm="{{ span: 2, offset: 2 }}">Offset 2</Column> <Column sm={{ span: 2, offset: 2 }}>Offset 2</Column>
<Column sm="{{ span: 3, offset: 1 }}">Offset 1</Column> <Column sm={{ span: 3, offset: 1 }}>Offset 1</Column>
<Column sm="{{ span: 4, offset: 0 }}">Offset 0</Column> <Column sm={{ span: 4, offset: 0 }}>Offset 0</Column>
</Row> </Row>
</Grid> </Grid>

8
docs/src/pages/framed/Grid/ResponsiveGrid.svelte
View file

@ -4,9 +4,9 @@
<Grid> <Grid>
<Row> <Row>
<Column sm="{1}" md="{4}" lg="{8}">sm: 1, md: 4, lg: 8</Column> <Column sm={1} md={4} lg={8}>sm: 1, md: 4, lg: 8</Column>
<Column sm="{1}" md="{2}" lg="{2}">sm: 1, md: 2, lg: 2</Column> <Column sm={1} md={2} lg={2}>sm: 1, md: 2, lg: 2</Column>
<Column sm="{1}" md="{1}" lg="{1}">sm: 1, md: 1, lg: 1</Column> <Column sm={1} md={1} lg={1}>sm: 1, md: 1, lg: 1</Column>
<Column sm="{1}" md="{1}" lg="{1}">sm: 1, md: 1, lg: 1</Column> <Column sm={1} md={1} lg={1}>sm: 1, md: 1, lg: 1</Column>
</Row> </Row>
</Grid> </Grid>

6
docs/src/pages/framed/ImageLoader/DynamicImageLoader.svelte
View file

@ -13,13 +13,13 @@
<Button <Button
kind="ghost" kind="ghost"
on:click="{() => { on:click={() => {
index = index === 0 ? 1 : 0; index = index === 0 ? 1 : 0;
}}" }}
> >
Toggle image Toggle image
</Button> </Button>
<div style:margin-top="1rem" style:width="100%" style:max-width="120px"> <div style:margin-top="1rem" style:width="100%" style:max-width="120px">
<ImageLoader ratio="1x1" fadeIn src="{src}" alt="{src}" /> <ImageLoader ratio="1x1" fadeIn {src} alt={src} />
</div> </div>

8
docs/src/pages/framed/ImageLoader/ProgrammaticImageLoader.svelte
View file

@ -11,15 +11,15 @@
<Button <Button
kind="ghost" kind="ghost"
disabled="{!imageLoader || error}" disabled={!imageLoader || error}
on:click="{() => imageLoader.loadImage(srcError)}" on:click={() => imageLoader.loadImage(srcError)}
> >
Simulate error Simulate error
</Button> </Button>
<ImageLoader bind:this="{imageLoader}" bind:error fadeIn src="{src}"> <ImageLoader bind:this={imageLoader} bind:error fadeIn {src}>
<svelte:fragment slot="error"> <svelte:fragment slot="error">
<Button kind="ghost" on:click="{() => imageLoader.loadImage(src)}"> <Button kind="ghost" on:click={() => imageLoader.loadImage(src)}>
Error. Try again Error. Try again
</Button> </Button>
</svelte:fragment> </svelte:fragment>

8
docs/src/pages/framed/InlineLoading/InlineLoadingUx.svelte
View file

@ -37,14 +37,14 @@
<ButtonSet> <ButtonSet>
<Button <Button
kind="ghost" kind="ghost"
disabled="{state === 'dormant' || state === 'finished'}" disabled={state === "dormant" || state === "finished"}
on:click="{() => (state = 'inactive')}" on:click={() => (state = "inactive")}
> >
Cancel Cancel
</Button> </Button>
{#if state !== "dormant"} {#if state !== "dormant"}
<InlineLoading status="{state}" description="{descriptionMap[state]}" /> <InlineLoading status={state} description={descriptionMap[state]} />
{:else} {:else}
<Button on:click="{() => (state = 'active')}">Submit</Button> <Button on:click={() => (state = "active")}>Submit</Button>
{/if} {/if}
</ButtonSet> </ButtonSet>

14
docs/src/pages/framed/LocalStorage/LocalStorage.svelte
View file

@ -9,13 +9,13 @@
<LocalStorage <LocalStorage
key="dark-mode" key="dark-mode"
bind:value="{toggled}" bind:value={toggled}
on:save="{() => { on:save={() => {
events = [...events, { event: 'on:save' }]; events = [...events, { event: "on:save" }];
}}" }}
on:update="{({ detail }) => { on:update={({ detail }) => {
events = [...events, { event: 'on:update', detail }]; events = [...events, { event: "on:update", detail }];
}}" }}
/> />
<Toggle size="sm" labelText="Dark mode" bind:toggled /> <Toggle size="sm" labelText="Dark mode" bind:toggled />

4
docs/src/pages/framed/LocalStorage/LocalStorageClear.svelte
View file

@ -7,11 +7,11 @@
$: document.documentElement.setAttribute("theme", toggled ? "g100" : "white"); $: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
</script> </script>
<LocalStorage bind:this="{storage}" bind:value="{toggled}" /> <LocalStorage bind:this={storage} bind:value={toggled} />
<Toggle size="sm" labelText="Dark mode" bind:toggled /> <Toggle size="sm" labelText="Dark mode" bind:toggled />
<br /> <br />
<br /> <br />
<Button size="small" on:click="{storage.clearAll}">Clear storage</Button> <Button size="small" on:click={storage.clearAll}>Clear storage</Button>

16
docs/src/pages/framed/Modal/3ButtonComposedModal.svelte
View file

@ -12,20 +12,20 @@
let checked = false; let checked = false;
</script> </script>
<Button on:click="{() => (open = true)}">Review changes</Button> <Button on:click={() => (open = true)}>Review changes</Button>
<ComposedModal bind:open on:submit="{() => (open = false)}"> <ComposedModal bind:open on:submit={() => (open = false)}>
<ModalHeader label="Changes" title="Confirm changes" /> <ModalHeader label="Changes" title="Confirm changes" />
<ModalBody hasForm> <ModalBody hasForm>
<Checkbox labelText="I have reviewed the changes" bind:checked /> <Checkbox labelText="I have reviewed the changes" bind:checked />
</ModalBody> </ModalBody>
<ModalFooter <ModalFooter
primaryButtonText="Proceed" primaryButtonText="Proceed"
primaryButtonDisabled="{!checked}" primaryButtonDisabled={!checked}
secondaryButtons="{[{ text: 'Cancel' }, { text: 'Review' }]}" secondaryButtons={[{ text: "Cancel" }, { text: "Review" }]}
on:click:button--secondary="{({ detail }) => { on:click:button--secondary={({ detail }) => {
if (detail.text === 'Cancel') open = false; if (detail.text === "Cancel") open = false;
if (detail.text === 'Review') console.log('Review'); if (detail.text === "Review") console.log("Review");
}}" }}
/> />
</ComposedModal> </ComposedModal>

12
docs/src/pages/framed/Modal/3ButtonModal.svelte
View file

@ -4,17 +4,17 @@
let open = false; let open = false;
</script> </script>
<Button on:click="{() => (open = true)}">Create database</Button> <Button on:click={() => (open = true)}>Create database</Button>
<Modal <Modal
bind:open bind:open
modalHeading="Create database" modalHeading="Create database"
primaryButtonText="Confirm" primaryButtonText="Confirm"
secondaryButtons="{[{ text: 'Cancel' }, { text: 'Edit' }]}" secondaryButtons={[{ text: "Cancel" }, { text: "Edit" }]}
on:click:button--secondary="{({ detail }) => { on:click:button--secondary={({ detail }) => {
if (detail.text === 'Cancel') open = false; if (detail.text === "Cancel") open = false;
if (detail.text === 'Edit') console.log('Edit'); if (detail.text === "Edit") console.log("Edit");
}}" }}
on:open on:open
on:close on:close
on:submit on:submit

2
docs/src/pages/framed/Modal/ComposedModal.svelte
View file

@ -15,5 +15,5 @@
<ModalBody hasForm> <ModalBody hasForm>
<Checkbox labelText="I have reviewed the changes" bind:checked /> <Checkbox labelText="I have reviewed the changes" bind:checked />
</ModalBody> </ModalBody>
<ModalFooter primaryButtonText="Proceed" primaryButtonDisabled="{!checked}" /> <ModalFooter primaryButtonText="Proceed" primaryButtonDisabled={!checked} />
</ComposedModal> </ComposedModal>

4
docs/src/pages/framed/Modal/DangerModal.svelte
View file

@ -4,7 +4,7 @@
let open = false; let open = false;
</script> </script>
<Button kind="danger" on:click="{() => (open = true)}">Delete all</Button> <Button kind="danger" on:click={() => (open = true)}>Delete all</Button>
<Modal <Modal
danger danger
@ -12,7 +12,7 @@
modalHeading="Delete all instances" modalHeading="Delete all instances"
primaryButtonText="Delete" primaryButtonText="Delete"
secondaryButtonText="Cancel" secondaryButtonText="Cancel"
on:click:button--secondary="{() => (open = false)}" on:click:button--secondary={() => (open = false)}
on:open on:open
on:close on:close
on:submit on:submit

4
docs/src/pages/framed/Modal/Modal.svelte
View file

@ -4,14 +4,14 @@
let open = false; let open = false;
</script> </script>
<Button on:click="{() => (open = true)}">Create database</Button> <Button on:click={() => (open = true)}>Create database</Button>
<Modal <Modal
bind:open bind:open
modalHeading="Create database" modalHeading="Create database"
primaryButtonText="Confirm" primaryButtonText="Confirm"
secondaryButtonText="Cancel" secondaryButtonText="Cancel"
on:click:button--secondary="{() => (open = false)}" on:click:button--secondary={() => (open = false)}
on:open on:open
on:close on:close
on:submit on:submit

4
docs/src/pages/framed/Modal/ModalButtonWithIcon.svelte
View file

@ -5,13 +5,13 @@
let open = false; let open = false;
</script> </script>
<Button on:click="{() => (open = true)}">Create database</Button> <Button on:click={() => (open = true)}>Create database</Button>
<Modal <Modal
bind:open bind:open
modalHeading="Invite someone" modalHeading="Invite someone"
primaryButtonText="Send invitation" primaryButtonText="Send invitation"
primaryButtonIcon="{Send}" primaryButtonIcon={Send}
secondaryButtonText="Cancel" secondaryButtonText="Cancel"
> >
<p>Do you really want to invite someone?</p> <p>Do you really want to invite someone?</p>

4
docs/src/pages/framed/Modal/ModalCustomFocus.svelte
View file

@ -4,7 +4,7 @@
let open = false; let open = false;
</script> </script>
<Button on:click="{() => (open = true)}">Create database</Button> <Button on:click={() => (open = true)}>Create database</Button>
<Modal <Modal
bind:open bind:open
@ -12,7 +12,7 @@
primaryButtonText="Confirm" primaryButtonText="Confirm"
secondaryButtonText="Cancel" secondaryButtonText="Cancel"
selectorPrimaryFocus="#db-name" selectorPrimaryFocus="#db-name"
on:click:button--secondary="{() => (open = false)}" on:click:button--secondary={() => (open = false)}
on:open on:open
on:close on:close
on:submit on:submit

2
docs/src/pages/framed/Modal/ModalExtraSmall.svelte
View file

@ -4,7 +4,7 @@
let open = false; let open = false;
</script> </script>
<Button on:click="{() => (open = true)}">Create database</Button> <Button on:click={() => (open = true)}>Create database</Button>
<Modal <Modal
size="xs" size="xs"

2
docs/src/pages/framed/Modal/ModalLarge.svelte
View file

@ -4,7 +4,7 @@
let open = false; let open = false;
</script> </script>
<Button on:click="{() => (open = true)}">Create database</Button> <Button on:click={() => (open = true)}>Create database</Button>
<Modal <Modal
size="lg" size="lg"

12
docs/src/pages/framed/Modal/ModalMultiple.svelte
View file

@ -5,17 +5,17 @@
let openDelete = false; let openDelete = false;
</script> </script>
<Button on:click="{() => (openCreate = true)}">Create database</Button> <Button on:click={() => (openCreate = true)}>Create database</Button>
<Button kind="danger-tertiary" on:click="{() => (openDelete = true)}"> <Button kind="danger-tertiary" on:click={() => (openDelete = true)}>
Delete database Delete database
</Button> </Button>
<Modal <Modal
bind:open="{openCreate}" bind:open={openCreate}
modalHeading="Create database" modalHeading="Create database"
primaryButtonText="Confirm" primaryButtonText="Confirm"
secondaryButtonText="Cancel" secondaryButtonText="Cancel"
on:click:button--secondary="{() => (openCreate = false)}" on:click:button--secondary={() => (openCreate = false)}
on:open on:open
on:close on:close
on:submit on:submit
@ -25,11 +25,11 @@
<Modal <Modal
danger danger
bind:open="{openDelete}" bind:open={openDelete}
modalHeading="Delete database" modalHeading="Delete database"
primaryButtonText="Delete" primaryButtonText="Delete"
secondaryButtonText="Cancel" secondaryButtonText="Cancel"
on:click:button--secondary="{() => (openDelete = false)}" on:click:button--secondary={() => (openDelete = false)}
on:open on:open
on:close on:close
on:submit on:submit

2
docs/src/pages/framed/Modal/ModalPreventOutsideClick.svelte
View file

@ -4,7 +4,7 @@
let open = false; let open = false;
</script> </script>
<Button on:click="{() => (open = true)}">Create database</Button> <Button on:click={() => (open = true)}>Create database</Button>
<Modal <Modal
preventCloseOnClickOutside preventCloseOnClickOutside

2
docs/src/pages/framed/Modal/ModalScrollingContent.svelte
View file

@ -4,7 +4,7 @@
let open = false; let open = false;
</script> </script>
<Button on:click="{() => (open = true)}">Create database</Button> <Button on:click={() => (open = true)}>Create database</Button>
<Modal bind:open passiveModal modalHeading="About Cloudant" hasScrollingContent> <Modal bind:open passiveModal modalHeading="About Cloudant" hasScrollingContent>
<p> <p>

2
docs/src/pages/framed/Modal/ModalSmall.svelte
View file

@ -4,7 +4,7 @@
let open = false; let open = false;
</script> </script>
<Button on:click="{() => (open = true)}">Create database</Button> <Button on:click={() => (open = true)}>Create database</Button>
<Modal <Modal
size="sm" size="sm"

2
docs/src/pages/framed/Modal/PassiveModal.svelte
View file

@ -4,7 +4,7 @@
let open = false; let open = false;
</script> </script>
<Button kind="tertiary" on:click="{() => (open = true)}">Learn more</Button> <Button kind="tertiary" on:click={() => (open = true)}>Learn more</Button>
<Modal passiveModal bind:open modalHeading="IBM Cloudant" on:open on:close> <Modal passiveModal bind:open modalHeading="IBM Cloudant" on:open on:close>
<p> <p>

10
docs/src/pages/framed/MultiSelect/MultiSelectSlot.svelte
View file

@ -5,11 +5,11 @@
<MultiSelect <MultiSelect
titleText="Contact" titleText="Contact"
label="Select contact methods..." label="Select contact methods..."
items="{[ items={[
{ id: '0', text: 'Slack' }, { id: "0", text: "Slack" },
{ id: '1', text: 'Email' }, { id: "1", text: "Email" },
{ id: '2', text: 'Fax' }, { id: "2", text: "Fax" },
]}" ]}
let:item let:item
let:index let:index
> >

8
docs/src/pages/framed/MultiSelect/MultipleMultiSelect.svelte
View file

@ -21,18 +21,18 @@
<MultiSelect <MultiSelect
titleText="Primary contact" titleText="Primary contact"
bind:selectedIds="{multiselect1_selectedIds}" bind:selectedIds={multiselect1_selectedIds}
label="Select contact methods..." label="Select contact methods..."
items="{items}" {items}
/> />
<div>Primary: {primary}</div> <div>Primary: {primary}</div>
<MultiSelect <MultiSelect
titleText="Secondary contact" titleText="Secondary contact"
bind:selectedIds="{multiselect2_selectedIds}" bind:selectedIds={multiselect2_selectedIds}
label="Select contact methods..." label="Select contact methods..."
items="{items}" {items}
/> />
<div>Secondary: {secondary}</div> <div>Secondary: {secondary}</div>

4
docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte
View file

@ -7,8 +7,8 @@
<NumberInput allowEmpty bind:value /> <NumberInput allowEmpty bind:value />
<div style="margin: var(--cds-layout-01) 0"> <div style="margin: var(--cds-layout-01) 0">
<Button on:click="{() => (value = null)}">Set to null</Button> <Button on:click={() => (value = null)}>Set to null</Button>
<Button on:click="{() => (value = 0)}">Set to 0</Button> <Button on:click={() => (value = 0)}>Set to 0</Button>
</div> </div>
<strong>Value:</strong> <strong>Value:</strong>

2
docs/src/pages/framed/PaginationNav/PaginationNavReactive.svelte
View file

@ -7,7 +7,7 @@
<PaginationNav bind:page /> <PaginationNav bind:page />
<div style="margin: var(--cds-layout-01) 0"> <div style="margin: var(--cds-layout-01) 0">
<Button on:click="{() => (page = 1)}" disabled="{page === 0}"> <Button on:click={() => (page = 1)} disabled={page === 0}>
Set page to 1 Set page to 1
</Button> </Button>
</div> </div>

10
docs/src/pages/framed/Popover/WithButton.svelte
View file

@ -5,15 +5,15 @@
let ref = null; let ref = null;
</script> </script>
<div bind:this="{ref}" style:position="relative"> <div bind:this={ref} style:position="relative">
<Button on:click="{() => (open = !open)}">Toggle popover</Button> <Button on:click={() => (open = !open)}>Toggle popover</Button>
<Popover <Popover
bind:open bind:open
align="bottom-left" align="bottom-left"
on:click:outside="{({ detail }) => { on:click:outside={({ detail }) => {
console.log('on:click:outside'); console.log("on:click:outside");
open = ref.contains(detail.target); open = ref.contains(detail.target);
}}" }}
> >
<div style="padding: var(--cds-spacing-05)">Content</div> <div style="padding: var(--cds-spacing-05)">Content</div>
</Popover> </Popover>

22
docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte
View file

@ -13,18 +13,12 @@
} }
</script> </script>
<ProgressBar <ProgressBar labelText="Upload status" {value} {max} {helperText} {status} />
labelText="Upload status"
value="{value}"
max="{max}"
helperText="{helperText}"
status="{status}"
/>
<ButtonSet style="margin-top: var(--cds-spacing-08)"> <ButtonSet style="margin-top: var(--cds-spacing-08)">
<Button <Button
disabled="{value > 0}" disabled={value > 0}
on:click="{() => { on:click={() => {
const interval = setInterval(() => { const interval = setInterval(() => {
const delta = Math.random() * 10; const delta = Math.random() * 10;
@ -35,17 +29,17 @@
clearInterval(interval); clearInterval(interval);
} }
}, 30); }, 30);
}}" }}
> >
Start Start
</Button> </Button>
<Button <Button
kind="tertiary" kind="tertiary"
disabled="{value !== max}" disabled={value !== max}
on:click="{() => { on:click={() => {
value = 0; value = 0;
status = 'active'; status = "active";
}}" }}
> >
Reset Reset
</Button> </Button>

8
docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte
View file

@ -22,7 +22,7 @@
/> />
<ProgressStep <ProgressStep
complete complete
bind:current="{thirdStepCurrent}" bind:current={thirdStepCurrent}
label="Step 3" label="Step 3"
description="The progress indicator will listen for clicks on the steps" description="The progress indicator will listen for clicks on the steps"
/> />
@ -34,10 +34,10 @@
<div style="margin: var(--cds-layout-02) 0"> <div style="margin: var(--cds-layout-02) 0">
<Button <Button
kind="{currentIndex === 2 ? 'secondary' : 'primary'}" kind={currentIndex === 2 ? "secondary" : "primary"}
on:click="{() => { on:click={() => {
currentIndex = currentIndex === 2 ? 0 : 2; currentIndex = currentIndex === 2 ? 0 : 2;
}}" }}
> >
Set currentIndex to Set currentIndex to
{currentIndex === 2 ? 0 : 2} {currentIndex === 2 ? 0 : 2}

8
docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte
View file

@ -13,10 +13,10 @@
<RadioButtonGroup <RadioButtonGroup
legendText="Storage tier (disk)" legendText="Storage tier (disk)"
name="plan" name="plan"
bind:selected="{plan}" bind:selected={plan}
> >
{#each plans as value (value)} {#each plans as value (value)}
<RadioButton labelText="{value}" value="{value}" /> <RadioButton labelText={value} {value} />
{/each} {/each}
</RadioButtonGroup> </RadioButtonGroup>
@ -25,8 +25,8 @@
<Button <Button
size="small" size="small"
kind="secondary" kind="secondary"
disabled="{plan === value}" disabled={plan === value}
on:click="{() => (plan = value)}" on:click={() => (plan = value)}
> >
Select "{value}" Select "{value}"
</Button> </Button>

6
docs/src/pages/framed/RadioTile/RadioTileReactive.svelte
View file

@ -8,7 +8,7 @@
<TileGroup legend="Service pricing tiers" name="plan" bind:selected> <TileGroup legend="Service pricing tiers" name="plan" bind:selected>
{#each values as value} {#each values as value}
<RadioTile value="{value}">{value}</RadioTile> <RadioTile {value}>{value}</RadioTile>
{/each} {/each}
</TileGroup> </TileGroup>
@ -18,8 +18,8 @@
<Button <Button
size="small" size="small"
disabled="{selected === values[1]}" disabled={selected === values[1]}
on:click="{() => (selected = values[1])}" on:click={() => (selected = values[1])}
> >
Set to "{values[1]}" Set to "{values[1]}"
</Button> </Button>

4
docs/src/pages/framed/RadioTile/RadioTileReactiveOneWay.svelte
View file

@ -9,10 +9,10 @@
<TileGroup <TileGroup
legend="Service pricing tiers" legend="Service pricing tiers"
name="plan" name="plan"
on:select="{({ detail }) => (selected = detail)}" on:select={({ detail }) => (selected = detail)}
> >
{#each values as value} {#each values as value}
<RadioTile value="{value}" checked="{selected === value}"> <RadioTile {value} checked={selected === value}>
{value} {value}
</RadioTile> </RadioTile>
{/each} {/each}

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

@ -29,4 +29,4 @@
]; ];
</script> </script>
<RecursiveList nodes="{nodes}" /> <RecursiveList {nodes} />

2
docs/src/pages/framed/RecursiveList/RecursiveListOrdered.svelte
View file

@ -29,4 +29,4 @@
]; ];
</script> </script>
<RecursiveList type="ordered" nodes="{nodes}" /> <RecursiveList type="ordered" {nodes} />

2
docs/src/pages/framed/RecursiveList/RecursiveListOrderedNative.svelte
View file

@ -29,4 +29,4 @@
]; ];
</script> </script>
<RecursiveList type="ordered-native" nodes="{nodes}" /> <RecursiveList type="ordered-native" {nodes} />

8
docs/src/pages/framed/Search/SearchReactive.svelte
View file

@ -10,16 +10,16 @@
<ButtonSet> <ButtonSet>
<Button <Button
size="small" size="small"
disabled="{value === 'Cloud functions'}" disabled={value === "Cloud functions"}
on:click="{() => (value = 'Cloud functions')}" on:click={() => (value = "Cloud functions")}
> >
Set value Set value
</Button> </Button>
<Button <Button
kind="ghost" kind="ghost"
size="small" size="small"
disabled="{value.length === 0}" disabled={value.length === 0}
on:click="{() => (value = '')}" on:click={() => (value = "")}
> >
Clear value Clear value
</Button> </Button>

2
docs/src/pages/framed/Select/SelectReactive.svelte
View file

@ -16,6 +16,6 @@
Selected: <strong>{selected}</strong> Selected: <strong>{selected}</strong>
</div> </div>
<Button disabled="{selected === 'g90'}" on:click="{() => (selected = 'g90')}"> <Button disabled={selected === "g90"} on:click={() => (selected = "g90")}>
Set to "g90" Set to "g90"
</Button> </Button>

2
docs/src/pages/framed/Tabs/TabsReactive.svelte
View file

@ -16,7 +16,7 @@
</Tabs> </Tabs>
<div style="margin: var(--cds-layout-01) 0"> <div style="margin: var(--cds-layout-01) 0">
<Button on:click="{() => (selected = 1)}">Set index to 1</Button> <Button on:click={() => (selected = 1)}>Set index to 1</Button>
</div> </div>
<strong>Selected index:</strong> <strong>Selected index:</strong>

4
docs/src/pages/framed/Theme/Theme.svelte
View file

@ -10,8 +10,8 @@
<Theme bind:theme /> <Theme bind:theme />
<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}"> <RadioButtonGroup legendText="Carbon theme" bind:selected={theme}>
{#each ["white", "g10", "g80", "g90", "g100"] as value} {#each ["white", "g10", "g80", "g90", "g100"] as value}
<RadioButton labelText="{value}" value="{value}" /> <RadioButton labelText={value} {value} />
{/each} {/each}
</RadioButtonGroup> </RadioButtonGroup>

4
docs/src/pages/framed/Theme/ThemePersist.svelte
View file

@ -10,8 +10,8 @@
<Theme bind:theme persist persistKey="__carbon-theme" /> <Theme bind:theme persist persistKey="__carbon-theme" />
<RadioButtonGroup legendText="Carbon theme" bind:selected="{theme}"> <RadioButtonGroup legendText="Carbon theme" bind:selected={theme}>
{#each ["white", "g10", "g80", "g90", "g100"] as value} {#each ["white", "g10", "g80", "g90", "g100"] as value}
<RadioButton labelText="{value}" value="{value}" /> <RadioButton labelText={value} {value} />
{/each} {/each}
</RadioButtonGroup> </RadioButtonGroup>

8
docs/src/pages/framed/Theme/ThemeSelectCustom.svelte
View file

@ -4,9 +4,9 @@
<Theme <Theme
render="select" render="select"
select="{{ select={{
themes: ['white', 'g90', 'g100'], themes: ["white", "g90", "g100"],
labelText: 'Select a theme', labelText: "Select a theme",
inline: true, inline: true,
}}" }}
/> />

12
docs/src/pages/framed/Theme/ThemeToggleCustom.svelte
View file

@ -4,11 +4,11 @@
<Theme <Theme
render="toggle" render="toggle"
toggle="{{ toggle={{
themes: ['g10', 'g80'], themes: ["g10", "g80"],
labelA: 'Enable dark mode', labelA: "Enable dark mode",
labelB: 'Enable dark mode', labelB: "Enable dark mode",
hideLabel: true, hideLabel: true,
size: 'sm', size: "sm",
}}" }}
/> />

10
docs/src/pages/framed/Theme/ThemeTokens.svelte
View file

@ -4,11 +4,11 @@
<Theme <Theme
theme="g90" theme="g90"
tokens="{{ tokens={{
'interactive-01': '#d02670', "interactive-01": "#d02670",
'hover-primary': '#ee5396', "hover-primary": "#ee5396",
'active-primary': '#9f1853', "active-primary": "#9f1853",
}}" }}
/> />
<Button>Primary button</Button> <Button>Primary button</Button>

14
docs/src/pages/framed/ToastNotification/ToastNotificationTimeout.svelte
View file

@ -7,10 +7,10 @@
</script> </script>
<Button <Button
disabled="{showNotification}" disabled={showNotification}
on:click="{() => { on:click={() => {
timeout = 3_000; // 3 seconds timeout = 3_000; // 3 seconds
}}" }}
> >
Show notification Show notification
</Button> </Button>
@ -18,15 +18,15 @@
{#if showNotification} {#if showNotification}
<div transition:fade> <div transition:fade>
<ToastNotification <ToastNotification
timeout="{timeout}" {timeout}
kind="success" kind="success"
title="Success" title="Success"
subtitle="This notification will autoclose in {timeout.toLocaleString()} ms." subtitle="This notification will autoclose in {timeout.toLocaleString()} ms."
caption="{new Date().toLocaleString()}" caption={new Date().toLocaleString()}
on:close="{(e) => { on:close={(e) => {
timeout = undefined; timeout = undefined;
console.log(e.detail.timeout); // true if closed via timeout console.log(e.detail.timeout); // true if closed via timeout
}}" }}
/> />
</div> </div>
{/if} {/if}

2
docs/src/pages/framed/Toggle/ToggleReactive.svelte
View file

@ -7,7 +7,7 @@
<Toggle labelText="Push notifications" bind:toggled /> <Toggle labelText="Push notifications" bind:toggled />
<div> <div>
<Button size="small" on:click="{() => (toggled = !toggled)}"> <Button size="small" on:click={() => (toggled = !toggled)}>
Toggle Toggle
{toggled ? "off" : "on"} {toggled ? "off" : "on"}
</Button> </Button>

2
docs/src/pages/framed/Tooltip/TooltipReactive.svelte
View file

@ -9,7 +9,7 @@
</Tooltip> </Tooltip>
<div style="margin-top: var(--cds-spacing-12);"> <div style="margin-top: var(--cds-spacing-12);">
<Button size="small" on:click="{() => (open = !open)}"> <Button size="small" on:click={() => (open = !open)}>
{open ? "Close tooltip" : "Open tooltip"} {open ? "Close tooltip" : "Open tooltip"}
</Button> </Button>
</div> </div>

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

@ -47,12 +47,12 @@
<TreeView <TreeView
labelText="Cloud Products" labelText="Cloud Products"
nodes="{nodes}" {nodes}
bind:activeId bind:activeId
bind:selectedIds bind:selectedIds
on:select="{({ detail }) => console.log('select', detail)}" on:select={({ detail }) => console.log("select", detail)}
on:toggle="{({ detail }) => console.log('toggle', detail)}" on:toggle={({ detail }) => console.log("toggle", detail)}
on:focus="{({ detail }) => console.log('focus', detail)}" on:focus={({ detail }) => console.log("focus", detail)}
/> />
<div>Active node id: {activeId}</div> <div>Active node id: {activeId}</div>

8
docs/src/pages/framed/TreeView/TreeViewActive.svelte
View file

@ -47,12 +47,12 @@
<TreeView <TreeView
labelText="Cloud Products" labelText="Cloud Products"
nodes="{nodes}" {nodes}
bind:activeId bind:activeId
bind:selectedIds bind:selectedIds
on:select="{({ detail }) => console.log('select', detail)}" on:select={({ detail }) => console.log("select", detail)}
on:toggle="{({ detail }) => console.log('toggle', detail)}" on:toggle={({ detail }) => console.log("toggle", detail)}
on:focus="{({ detail }) => console.log('focus', detail)}" on:focus={({ detail }) => console.log("focus", detail)}
/> />
<div>Active node id: {activeId}</div> <div>Active node id: {activeId}</div>

6
docs/src/pages/framed/TreeView/TreeViewCollapseAll.svelte
View file

@ -46,14 +46,14 @@
</script> </script>
<div> <div>
<Button on:click="{treeview?.collapseAll}">Collapse all</Button> <Button on:click={treeview?.collapseAll}>Collapse all</Button>
</div> </div>
<TreeView <TreeView
bind:this="{treeview}" bind:this={treeview}
bind:expandedIds bind:expandedIds
labelText="Cloud Products" labelText="Cloud Products"
nodes="{nodes}" {nodes}
/> />
<style> <style>

Some files were not shown because too many files have changed in this diff Show more