mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 09:51:36 +00:00
chore: format files with Prettier 3
This commit is contained in:
Eric Liu
parent
1dcd09bd98
commit
8e996dc683
391 changed files with 3725 additions and 3785 deletions
|
|
@ -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"`.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en" theme="g10">
|
||||
<body>
|
||||
...
|
||||
|
|
|
|||
|
|
@ -3,4 +3,4 @@
|
|||
import { routes } from "../.routify/routes";
|
||||
</script>
|
||||
|
||||
<Router routes="{routes}" />
|
||||
<Router {routes} />
|
||||
|
|
|
|||
|
|
@ -32,16 +32,16 @@
|
|||
|
||||
$: source = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/${component.filePath}`;
|
||||
$: forwarded_events = component.events.filter(
|
||||
(event) => event.type === "forwarded"
|
||||
(event) => event.type === "forwarded",
|
||||
);
|
||||
$: dispatched_events = component.events.filter(
|
||||
(event) => event.type === "dispatched"
|
||||
(event) => event.type === "dispatched",
|
||||
);
|
||||
</script>
|
||||
|
||||
<p style="margin-bottom: var(--cds-layout-02)">
|
||||
Source code:
|
||||
<OutboundLink size="lg" inline href="{source}">
|
||||
<OutboundLink size="lg" inline href={source}>
|
||||
{component.filePath}
|
||||
</OutboundLink>
|
||||
</p>
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
}) as prop (prop.name)}
|
||||
<StructuredListRow>
|
||||
<StructuredListCell noWrap>
|
||||
<InlineSnippet code="{prop.name}" />
|
||||
<InlineSnippet code={prop.name} />
|
||||
{#if prop.reactive}
|
||||
<div
|
||||
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("(")}
|
||||
<code class="code-01">{type}</code>
|
||||
{:else}
|
||||
<InlineSnippet code="{type}" />
|
||||
<InlineSnippet code={type} />
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
</script>
|
||||
|
||||
<div>
|
||||
<CodeSnippet code="{code}" type="inline" copy="{(text) => copy(text)}" />
|
||||
<CodeSnippet {code} type="inline" copy={(text) => copy(text)} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -26,8 +26,8 @@
|
|||
kind="ghost"
|
||||
target="_blank"
|
||||
size="field"
|
||||
href="{themedSrcUrl}"
|
||||
icon="{Launch}"
|
||||
href={themedSrcUrl}
|
||||
icon={Launch}
|
||||
>
|
||||
Open in new tab
|
||||
</Button>
|
||||
|
|
@ -35,13 +35,13 @@
|
|||
{/if}
|
||||
<div class="preview-viewer" class:framed>
|
||||
{#if framed}
|
||||
<iframe title="{src.split('/').pop()}" src="{themedSrcUrl}"></iframe>
|
||||
<iframe title={src.split("/").pop()} src={themedSrcUrl}></iframe>
|
||||
{:else}
|
||||
<slot />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="code-override">
|
||||
<CodeSnippet type="multi" code="{codeRaw}" copy="{(text) => copy(text)}">
|
||||
<CodeSnippet type="multi" code={codeRaw} copy={(text) => copy(text)}>
|
||||
{@html code}
|
||||
</CodeSnippet>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@
|
|||
<div class="card-wrapper" class:borderRight class:borderBottom>
|
||||
<AspectRatio>
|
||||
<svelte:component
|
||||
this="{tileComponent}"
|
||||
href="{href}"
|
||||
this={tileComponent}
|
||||
{href}
|
||||
{...$$restProps}
|
||||
style="height: 100%;"
|
||||
>
|
||||
|
|
@ -29,11 +29,11 @@
|
|||
</div>
|
||||
<div class="card-footer">
|
||||
<svelte:component
|
||||
this="{LogoGithub}"
|
||||
size="{32}"
|
||||
this={LogoGithub}
|
||||
size={32}
|
||||
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>
|
||||
</svelte:component>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
// TODO: `find` is not supported in IE
|
||||
$: api_components = components.map((i) =>
|
||||
COMPONENT_API.components.find((_) => _.moduleName === i)
|
||||
COMPONENT_API.components.find((_) => _.moduleName === i),
|
||||
);
|
||||
$: multiple = api_components.length > 1;
|
||||
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
|
||||
// TODO: [refactor] read from package.json value
|
||||
$: sourceCode = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/${formatSourceURL(
|
||||
multiple
|
||||
multiple,
|
||||
)}`;
|
||||
</script>
|
||||
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
id="select-theme"
|
||||
inline
|
||||
labelText="Theme"
|
||||
bind:selected="{$theme}"
|
||||
bind:selected={$theme}
|
||||
>
|
||||
<SelectItem value="white" text="White" />
|
||||
<SelectItem value="g10" text="Gray 10" />
|
||||
|
|
@ -95,8 +95,8 @@
|
|||
kind="ghost"
|
||||
target="_blank"
|
||||
size="field"
|
||||
href="{sourceCode}"
|
||||
icon="{Code}"
|
||||
href={sourceCode}
|
||||
icon={Code}
|
||||
>
|
||||
Source code
|
||||
</Button>
|
||||
|
|
@ -144,28 +144,28 @@
|
|||
</Row>
|
||||
|
||||
<Row>
|
||||
<Column class="prose" noGutter="{multiple}">
|
||||
<Column class="prose" noGutter={multiple}>
|
||||
{#if multiple}
|
||||
<Tabs class="override-tabs">
|
||||
{#each api_components as component (component.moduleName)}
|
||||
<Tab label="{component.moduleName}" />
|
||||
<Tab label={component.moduleName} />
|
||||
{/each}
|
||||
<div slot="content" style="padding-top: var(--cds-spacing-06)">
|
||||
{#each api_components as component (component.moduleName)}
|
||||
<TabContent>
|
||||
<ComponentApi component="{component}" />
|
||||
<ComponentApi {component} />
|
||||
</TabContent>
|
||||
{/each}
|
||||
</div>
|
||||
</Tabs>
|
||||
{:else}
|
||||
<ComponentApi component="{api_components[0]}" />
|
||||
<ComponentApi component={api_components[0]} />
|
||||
{/if}
|
||||
</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
|
||||
<Column class="table" xlg="{4}" lg="{5}">
|
||||
<Column class="table" xlg={4} lg={5}>
|
||||
<div class="toc">
|
||||
<h5>Examples</h5>
|
||||
<slot name="aside" />
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<h1>404</h1>
|
||||
<div>
|
||||
Page not found.
|
||||
<Link href="{$url('/')}">Return home</Link>
|
||||
<Link href={$url("/")}>Return home</Link>
|
||||
</div>
|
||||
</Column>
|
||||
</Row>
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@
|
|||
|
||||
$: isMobile = innerWidth < 1056;
|
||||
$: components = $layout.children.filter(
|
||||
(child) => child.title === "components"
|
||||
(child) => child.title === "components",
|
||||
)[0];
|
||||
|
||||
$beforeUrlChange(() => {
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
<svelte:window bind:innerWidth />
|
||||
|
||||
<svelte:body
|
||||
on:keydown="{(e) => {
|
||||
on:keydown={(e) => {
|
||||
if (active) return;
|
||||
if (
|
||||
document.activeElement instanceof HTMLInputElement ||
|
||||
|
|
@ -76,14 +76,15 @@
|
|||
}
|
||||
|
||||
const isCommandOrControl = e.metaKey || e.ctrlKey;
|
||||
const isCmdK = isCommandOrControl && e.key.toLowerCase() === 'k';
|
||||
const isSlash = e.key === '/';
|
||||
const isCmdK = isCommandOrControl && e.key.toLowerCase() === "k";
|
||||
const isSlash = e.key === "/";
|
||||
|
||||
if (isCmdK || isSlash) {
|
||||
e.preventDefault();
|
||||
active = true;
|
||||
}
|
||||
}}" />
|
||||
}}
|
||||
/>
|
||||
|
||||
<svelte:head>
|
||||
<!-- Tealium/GA Set up -->
|
||||
|
|
@ -123,26 +124,26 @@
|
|||
|
||||
<Theme
|
||||
persist
|
||||
bind:theme="{$theme}"
|
||||
on:update="{(e) => {
|
||||
bind:theme={$theme}
|
||||
on:update={(e) => {
|
||||
const theme = e.detail.theme;
|
||||
document.documentElement.style.setProperty(
|
||||
'color-scheme',
|
||||
['white', 'g10'].includes(theme) ? 'light' : 'dark'
|
||||
"color-scheme",
|
||||
["white", "g10"].includes(theme) ? "light" : "dark",
|
||||
);
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<Header
|
||||
aria-label="Navigation"
|
||||
href="{$url('/')}"
|
||||
expandedByDefault="{true}"
|
||||
href={$url("/")}
|
||||
expandedByDefault={true}
|
||||
bind:isSideNavOpen
|
||||
>
|
||||
<svelte:fragment slot="skip-to-content">
|
||||
<SkipToContent />
|
||||
</svelte:fragment>
|
||||
|
||||
<span slot="platform" class="platform-name" class:hidden="{active}">
|
||||
<span slot="platform" class="platform-name" class:hidden={active}>
|
||||
Carbon Components Svelte <code class="code-01"
|
||||
>v{process.env.VERSION || ""}</code
|
||||
>
|
||||
|
|
@ -152,17 +153,17 @@
|
|||
bind:value
|
||||
bind:active
|
||||
placeholder="Search"
|
||||
results="{results}"
|
||||
on:select="{(e) => {
|
||||
{results}
|
||||
on:select={(e) => {
|
||||
$goto(e.detail.selectedResult.href);
|
||||
}}"
|
||||
}}
|
||||
/>
|
||||
<HeaderActionLink
|
||||
icon="{LogoGithub}"
|
||||
icon={LogoGithub}
|
||||
href="https://github.com/carbon-design-system/carbon-components-svelte"
|
||||
target="_blank"
|
||||
/>
|
||||
<HeaderAction transition="{false}" bind:isOpen>
|
||||
<HeaderAction transition={false} bind:isOpen>
|
||||
<HeaderPanelLinks>
|
||||
<HeaderPanelDivider>Carbon Svelte portfolio</HeaderPanelDivider>
|
||||
<HeaderPanelLink
|
||||
|
|
@ -197,13 +198,13 @@
|
|||
</HeaderUtilities>
|
||||
</Header>
|
||||
|
||||
<SideNav bind:isOpen="{isSideNavOpen}">
|
||||
<SideNav bind:isOpen={isSideNavOpen}>
|
||||
<SideNavItems>
|
||||
{#each components.children.filter((child) => !deprecated.includes(child.title)) as child (child.path)}
|
||||
<SideNavMenuItem
|
||||
text="{child.title}"
|
||||
href="{$url(child.path)}"
|
||||
isSelected="{$isActive($url(child.path))}"
|
||||
text={child.title}
|
||||
href={$url(child.path)}
|
||||
isSelected={$isActive($url(child.path))}
|
||||
>
|
||||
{child.title}
|
||||
{#if deprecated.includes(child.title)}
|
||||
|
|
|
|||
|
|
@ -22,14 +22,14 @@
|
|||
let open = false;
|
||||
</script>
|
||||
|
||||
<Button kind="ghost" size="field" on:click="{() => (open = !open)}">
|
||||
<Button kind="ghost" size="field" on:click={() => (open = !open)}>
|
||||
{open ? "Collapse" : "Expand"}
|
||||
all
|
||||
</Button>
|
||||
|
||||
<Accordion>
|
||||
{#each items as item}
|
||||
<AccordionItem title="{item.title}" open="{open}">
|
||||
<AccordionItem title={item.title} {open}>
|
||||
<p>{item.description}</p>
|
||||
</AccordionItem>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<Breadcrumb>
|
||||
{#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}
|
||||
</BreadcrumbItem>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
let events = [];
|
||||
</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>
|
||||
<h6>Breakpoint size</h6>
|
||||
|
|
|
|||
|
|
@ -7,9 +7,9 @@
|
|||
<Button bind:ref>Primary button</Button>
|
||||
<Button
|
||||
kind="ghost"
|
||||
on:click="{() => {
|
||||
on:click={() => {
|
||||
ref?.focus();
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
Click to focus the Primary button
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -8,23 +8,23 @@
|
|||
</script>
|
||||
|
||||
<Button
|
||||
isSelected="{index === 0}"
|
||||
isSelected={index === 0}
|
||||
kind="ghost"
|
||||
iconDescription="Bold"
|
||||
icon="{TextBold}"
|
||||
on:click="{() => (index = 0)}"
|
||||
icon={TextBold}
|
||||
on:click={() => (index = 0)}
|
||||
/>
|
||||
<Button
|
||||
isSelected="{index === 1}"
|
||||
isSelected={index === 1}
|
||||
kind="ghost"
|
||||
iconDescription="Italicize"
|
||||
icon="{TextItalic}"
|
||||
on:click="{() => (index = 1)}"
|
||||
icon={TextItalic}
|
||||
on:click={() => (index = 1)}
|
||||
/>
|
||||
<Button
|
||||
isSelected="{index === 2}"
|
||||
isSelected={index === 2}
|
||||
kind="ghost"
|
||||
iconDescription="Underline"
|
||||
icon="{TextUnderline}"
|
||||
on:click="{() => (index = 2)}"
|
||||
icon={TextUnderline}
|
||||
on:click={() => (index = 2)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<Checkbox labelText="Label text" bind:checked />
|
||||
|
||||
<div style="margin: var(--cds-layout-01) 0">
|
||||
<Button on:click="{() => (checked = !checked)}">Toggle</Button>
|
||||
<Button on:click={() => (checked = !checked)}>Toggle</Button>
|
||||
</div>
|
||||
|
||||
<strong>checked:</strong>
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@
|
|||
</script>
|
||||
|
||||
{#each values as value}
|
||||
<Checkbox bind:group labelText="{value}" value="{value}" />
|
||||
<Checkbox bind:group labelText={value} {value} />
|
||||
{/each}
|
||||
|
||||
<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>
|
||||
|
||||
<strong>Selected:</strong>
|
||||
|
|
|
|||
|
|
@ -5,5 +5,5 @@
|
|||
|
||||
<CodeSnippet
|
||||
code="npm i carbon-components-svelte"
|
||||
copy="{(text) => copy(text)}"
|
||||
copy={(text) => copy(text)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -4,16 +4,16 @@
|
|||
let expanded = false;
|
||||
</script>
|
||||
|
||||
<Button on:click="{() => (expanded = !expanded)}">Toggle expansion</Button>
|
||||
<Button on:click={() => (expanded = !expanded)}>Toggle expansion</Button>
|
||||
|
||||
<CodeSnippet
|
||||
type="multi"
|
||||
code="{Array.from({ length: 30 }, (_, i) => i + 1).join('\n')}"
|
||||
code={Array.from({ length: 30 }, (_, i) => i + 1).join("\n")}
|
||||
bind:expanded
|
||||
on:expand="{() => {
|
||||
console.log('on:expand');
|
||||
}}"
|
||||
on:collapse="{() => {
|
||||
console.log('on:collapse');
|
||||
}}"
|
||||
on:expand={() => {
|
||||
console.log("on:expand");
|
||||
}}
|
||||
on:collapse={() => {
|
||||
console.log("on:collapse");
|
||||
}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -13,4 +13,4 @@
|
|||
labelText="Trigger snippet overflow"
|
||||
style="margin-bottom: var(--cds-spacing-05)"
|
||||
/>
|
||||
<CodeSnippet type="multi" code="{code}" />
|
||||
<CodeSnippet type="multi" {code} />
|
||||
|
|
|
|||
|
|
@ -17,16 +17,16 @@
|
|||
<h5>"Show more" will not render</h5>
|
||||
<br />
|
||||
{/if}
|
||||
<div class:hidden="{!toggled}">
|
||||
<CodeSnippet type="multi" code="{code}" />
|
||||
<div class:hidden={!toggled}>
|
||||
<CodeSnippet type="multi" {code} />
|
||||
</div>
|
||||
|
||||
{#if toggled}
|
||||
<br /><br />
|
||||
<h5>"Show more" will render</h5>
|
||||
<br />
|
||||
<div class:hidden="{!toggled}">
|
||||
<CodeSnippet type="multi" code="{code}" />
|
||||
<div class:hidden={!toggled}>
|
||||
<CodeSnippet type="multi" {code} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@
|
|||
titleText="Contact"
|
||||
placeholder="Select contact method"
|
||||
selectedId="1"
|
||||
bind:this="{ref}"
|
||||
items="{[
|
||||
{ id: '0', text: 'Slack' },
|
||||
{ id: '1', text: 'Email' },
|
||||
{ id: '2', text: 'Fax' },
|
||||
]}"
|
||||
bind:this={ref}
|
||||
items={[
|
||||
{ id: "0", text: "Slack" },
|
||||
{ id: "1", text: "Email" },
|
||||
{ id: "2", text: "Fax" },
|
||||
]}
|
||||
/>
|
||||
<br />
|
||||
<Button on:click="{ref.clear}">Clear</Button>
|
||||
<Button on:click="{() => ref.clear({ focus: false })}">Clear (no focus)</Button>
|
||||
<Button on:click={ref.clear}>Clear</Button>
|
||||
<Button on:click={() => ref.clear({ focus: false })}>Clear (no focus)</Button>
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
<ComboBox
|
||||
titleText="Contact"
|
||||
placeholder="Select contact method"
|
||||
items="{[
|
||||
{ id: '0', text: 'Slack' },
|
||||
{ id: '1', text: 'Email' },
|
||||
{ id: '2', text: 'Fax' },
|
||||
]}"
|
||||
items={[
|
||||
{ id: "0", text: "Slack" },
|
||||
{ id: "1", text: "Email" },
|
||||
{ id: "2", text: "Fax" },
|
||||
]}
|
||||
let:item
|
||||
let:index
|
||||
>
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@
|
|||
<ComboBox
|
||||
titleText="Contact"
|
||||
placeholder="Select contact method"
|
||||
items="{[
|
||||
{ id: '0', text: 'Slack' },
|
||||
{ id: '1', text: 'Email' },
|
||||
{ id: '2', text: 'Fax' },
|
||||
]}"
|
||||
shouldFilterItem="{shouldFilterItem}"
|
||||
items={[
|
||||
{ id: "0", text: "Slack" },
|
||||
{ id: "1", text: "Email" },
|
||||
{ id: "2", text: "Fax" },
|
||||
]}
|
||||
{shouldFilterItem}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -24,11 +24,11 @@
|
|||
<ComboBox
|
||||
titleText="Contact"
|
||||
placeholder="Select contact method"
|
||||
items="{[
|
||||
{ id: '0', key: 'Slack' },
|
||||
{ id: '1', key: 'Email' },
|
||||
{ id: '2', key: 'Fax' },
|
||||
]}"
|
||||
shouldFilterItem="{shouldFilterItem}"
|
||||
itemToString="{itemToString}"
|
||||
items={[
|
||||
{ id: "0", key: "Slack" },
|
||||
{ id: "1", key: "Email" },
|
||||
{ id: "2", key: "Fax" },
|
||||
]}
|
||||
{shouldFilterItem}
|
||||
{itemToString}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -18,19 +18,19 @@
|
|||
</script>
|
||||
|
||||
<ComboBox
|
||||
bind:selectedId="{comboBox1_selectedId}"
|
||||
bind:selectedId={comboBox1_selectedId}
|
||||
titleText="Primary contact"
|
||||
placeholder="Select primary contact method"
|
||||
items="{items}"
|
||||
{items}
|
||||
/>
|
||||
|
||||
<div>Primary: {primary}</div>
|
||||
|
||||
<ComboBox
|
||||
bind:selectedId="{comboBox2_selectedId}"
|
||||
bind:selectedId={comboBox2_selectedId}
|
||||
titleText="Secondary contact"
|
||||
placeholder="Select secondary contact method"
|
||||
items="{items}"
|
||||
{items}
|
||||
/>
|
||||
|
||||
<div>Secondary: {secondary}</div>
|
||||
|
|
|
|||
|
|
@ -7,14 +7,14 @@
|
|||
titleText="Contact"
|
||||
placeholder="Select contact method"
|
||||
bind:selectedId
|
||||
items="{[
|
||||
{ id: '0', text: 'Slack' },
|
||||
{ id: '1', text: 'Email' },
|
||||
{ id: '2', text: 'Fax' },
|
||||
]}"
|
||||
items={[
|
||||
{ id: "0", text: "Slack" },
|
||||
{ id: "1", text: "Email" },
|
||||
{ id: "2", text: "Fax" },
|
||||
]}
|
||||
/>
|
||||
<br />
|
||||
<Button on:click="{() => (selectedId = undefined)}"
|
||||
<Button on:click={() => (selectedId = undefined)}
|
||||
>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>
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@
|
|||
<div>
|
||||
<Button
|
||||
size="small"
|
||||
disabled="{selectedIndex === 2}"
|
||||
on:click="{() => (selectedIndex = 2)}"
|
||||
disabled={selectedIndex === 2}
|
||||
on:click={() => (selectedIndex = 2)}
|
||||
>
|
||||
Set selected to 2
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -18,9 +18,9 @@
|
|||
indented
|
||||
labelText="Copy"
|
||||
shortcutText="⌘C"
|
||||
icon="{CopyFile}"
|
||||
icon={CopyFile}
|
||||
/>
|
||||
<ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
|
||||
<ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon={Cut} />
|
||||
<ContextMenuDivider />
|
||||
<ContextMenuOption indented labelText="Export as">
|
||||
<ContextMenuGroup labelText="Export options" bind:selectedIds>
|
||||
|
|
|
|||
|
|
@ -11,14 +11,14 @@
|
|||
let target;
|
||||
</script>
|
||||
|
||||
<ContextMenu target="{target}" on:open="{(e) => console.log(e.detail)}">
|
||||
<ContextMenu {target} on:open={(e) => console.log(e.detail)}>
|
||||
<ContextMenuOption
|
||||
indented
|
||||
labelText="Copy"
|
||||
shortcutText="⌘C"
|
||||
icon="{CopyFile}"
|
||||
icon={CopyFile}
|
||||
/>
|
||||
<ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
|
||||
<ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon={Cut} />
|
||||
<ContextMenuDivider />
|
||||
<ContextMenuOption indented labelText="Export as">
|
||||
<ContextMenuGroup labelText="Export options">
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
</ContextMenu>
|
||||
|
||||
<div>
|
||||
<p bind:this="{target}">Right click this element</p>
|
||||
<p bind:this={target}>Right click this element</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -12,17 +12,14 @@
|
|||
let target2;
|
||||
</script>
|
||||
|
||||
<ContextMenu
|
||||
target="{[target, target2]}"
|
||||
on:open="{(e) => console.log(e.detail)}"
|
||||
>
|
||||
<ContextMenu target={[target, target2]} on:open={(e) => console.log(e.detail)}>
|
||||
<ContextMenuOption
|
||||
indented
|
||||
labelText="Copy"
|
||||
shortcutText="⌘C"
|
||||
icon="{CopyFile}"
|
||||
icon={CopyFile}
|
||||
/>
|
||||
<ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon="{Cut}" />
|
||||
<ContextMenuOption indented labelText="Cut" shortcutText="⌘X" icon={Cut} />
|
||||
<ContextMenuDivider />
|
||||
<ContextMenuOption indented labelText="Export as">
|
||||
<ContextMenuGroup labelText="Export options">
|
||||
|
|
@ -44,8 +41,8 @@
|
|||
</ContextMenu>
|
||||
|
||||
<div>
|
||||
<p bind:this="{target}">Right click this element</p>
|
||||
<p bind:this="{target2}">... or this one</p>
|
||||
<p bind:this={target}>Right click this element</p>
|
||||
<p bind:this={target2}>... or this one</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -3,4 +3,4 @@
|
|||
import { CopyButton } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<CopyButton text="Carbon svelte" copy="{(text) => copy(text)}" />
|
||||
<CopyButton text="Carbon svelte" copy={(text) => copy(text)} />
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
];
|
||||
</script>
|
||||
|
||||
<DataTable sortable headers="{headers}" rows="{rows}">
|
||||
<DataTable sortable {headers} {rows}>
|
||||
<svelte:fragment slot="cell" let:cell>
|
||||
{#if cell.key === "overflow"}
|
||||
<OverflowMenu flipped>
|
||||
|
|
|
|||
|
|
@ -9,16 +9,16 @@
|
|||
<DataTable
|
||||
batchSelection
|
||||
bind:selectedRowIds
|
||||
headers="{[
|
||||
{ key: 'name', value: 'Name' },
|
||||
{ key: 'port', value: 'Port' },
|
||||
{ key: 'rule', value: 'Rule' },
|
||||
]}"
|
||||
rows="{Array.from({ length: 6 }).map((_, i) => ({
|
||||
headers={[
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" },
|
||||
]}
|
||||
rows={Array.from({ length: 6 }).map((_, i) => ({
|
||||
id: i,
|
||||
name: 'Load Balancer ' + (i + 1),
|
||||
protocol: 'HTTP',
|
||||
name: "Load Balancer " + (i + 1),
|
||||
protocol: "HTTP",
|
||||
port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
|
||||
rule: i % 3 ? 'Round robin' : 'DNS delegation',
|
||||
}))}"
|
||||
rule: i % 3 ? "Round robin" : "DNS delegation",
|
||||
}))}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -9,16 +9,16 @@
|
|||
<DataTable
|
||||
batchSelection
|
||||
bind:selectedRowIds
|
||||
headers="{[
|
||||
{ key: 'name', value: 'Name' },
|
||||
{ key: 'port', value: 'Port' },
|
||||
{ key: 'rule', value: 'Rule' },
|
||||
]}"
|
||||
rows="{Array.from({ length: 6 }).map((_, i) => ({
|
||||
headers={[
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" },
|
||||
]}
|
||||
rows={Array.from({ length: 6 }).map((_, i) => ({
|
||||
id: i,
|
||||
name: 'Load Balancer ' + (i + 1),
|
||||
protocol: 'HTTP',
|
||||
name: "Load Balancer " + (i + 1),
|
||||
protocol: "HTTP",
|
||||
port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
|
||||
rule: i % 3 ? 'Round robin' : 'DNS delegation',
|
||||
}))}"
|
||||
rule: i % 3 ? "Round robin" : "DNS delegation",
|
||||
}))}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -31,10 +31,10 @@
|
|||
$: console.log("selectedRowIds", selectedRowIds);
|
||||
</script>
|
||||
|
||||
<DataTable batchSelection bind:selectedRowIds headers="{headers}" rows="{rows}">
|
||||
<DataTable batchSelection bind:selectedRowIds {headers} {rows}>
|
||||
<Toolbar>
|
||||
<ToolbarBatchActions>
|
||||
<Button icon="{Save}">Save</Button>
|
||||
<Button icon={Save}>Save</Button>
|
||||
</ToolbarBatchActions>
|
||||
<ToolbarContent>
|
||||
<ToolbarSearch />
|
||||
|
|
|
|||
|
|
@ -32,32 +32,32 @@
|
|||
|
||||
<DataTable
|
||||
selectable
|
||||
batchSelection="{active}"
|
||||
batchSelection={active}
|
||||
bind:selectedRowIds
|
||||
headers="{headers}"
|
||||
rows="{rows}"
|
||||
{headers}
|
||||
{rows}
|
||||
>
|
||||
<Toolbar>
|
||||
<ToolbarBatchActions
|
||||
bind:active
|
||||
on:cancel="{(e) => {
|
||||
on:cancel={(e) => {
|
||||
e.preventDefault();
|
||||
active = false;
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
icon="{TrashCan}"
|
||||
disabled="{selectedRowIds.length === 0}"
|
||||
on:click="{() => {
|
||||
icon={TrashCan}
|
||||
disabled={selectedRowIds.length === 0}
|
||||
on:click={() => {
|
||||
rows = rows.filter((row) => !selectedRowIds.includes(row.id));
|
||||
selectedRowIds = [];
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</ToolbarBatchActions>
|
||||
<ToolbarContent>
|
||||
<Button on:click="{() => (active = true)}">Edit rows</Button>
|
||||
<Button on:click={() => (active = true)}>Edit rows</Button>
|
||||
</ToolbarContent>
|
||||
</Toolbar>
|
||||
</DataTable>
|
||||
|
|
|
|||
|
|
@ -15,19 +15,19 @@
|
|||
batchSelection
|
||||
bind:expandedRowIds
|
||||
bind:selectedRowIds
|
||||
headers="{[
|
||||
{ key: 'name', value: 'Name' },
|
||||
{ key: 'protocol', value: 'Protocol' },
|
||||
{ key: 'port', value: 'Port' },
|
||||
{ key: 'rule', value: 'Rule' },
|
||||
]}"
|
||||
rows="{Array.from({ length: 6 }).map((_, i) => ({
|
||||
headers={[
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "protocol", value: "Protocol" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" },
|
||||
]}
|
||||
rows={Array.from({ length: 6 }).map((_, i) => ({
|
||||
id: i,
|
||||
name: 'Load Balancer ' + (i + 1),
|
||||
protocol: 'HTTP',
|
||||
name: "Load Balancer " + (i + 1),
|
||||
protocol: "HTTP",
|
||||
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>
|
||||
<pre> {JSON.stringify(row, null, 2)}</pre>
|
||||
|
|
|
|||
|
|
@ -5,57 +5,57 @@
|
|||
<DataTable
|
||||
zebra
|
||||
expandable
|
||||
nonExpandableRowIds="{['a', 'd']}"
|
||||
headers="{[
|
||||
{ key: 'name', value: 'Name' },
|
||||
{ key: 'protocol', value: 'Protocol' },
|
||||
{ key: 'port', value: 'Port' },
|
||||
{ key: 'rule', value: 'Rule' },
|
||||
]}"
|
||||
rows="{[
|
||||
nonExpandableRowIds={["a", "d"]}
|
||||
headers={[
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "protocol", value: "Protocol" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" },
|
||||
]}
|
||||
rows={[
|
||||
{
|
||||
id: 'a',
|
||||
name: 'Load Balancer 3',
|
||||
protocol: 'HTTP',
|
||||
id: "a",
|
||||
name: "Load Balancer 3",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: 'Round robin',
|
||||
rule: "Round robin",
|
||||
},
|
||||
{
|
||||
id: 'b',
|
||||
name: 'Load Balancer 1',
|
||||
protocol: 'HTTP',
|
||||
id: "b",
|
||||
name: "Load Balancer 1",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: 'Round robin',
|
||||
rule: "Round robin",
|
||||
},
|
||||
{
|
||||
id: 'c',
|
||||
name: 'Load Balancer 2',
|
||||
protocol: 'HTTP',
|
||||
id: "c",
|
||||
name: "Load Balancer 2",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: 'DNS delegation',
|
||||
rule: "DNS delegation",
|
||||
},
|
||||
{
|
||||
id: 'd',
|
||||
name: 'Load Balancer 6',
|
||||
protocol: 'HTTP',
|
||||
id: "d",
|
||||
name: "Load Balancer 6",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: 'Round robin',
|
||||
rule: "Round robin",
|
||||
},
|
||||
{
|
||||
id: 'e',
|
||||
name: 'Load Balancer 4',
|
||||
protocol: 'HTTP',
|
||||
id: "e",
|
||||
name: "Load Balancer 4",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: 'Round robin',
|
||||
rule: "Round robin",
|
||||
},
|
||||
{
|
||||
id: 'f',
|
||||
name: 'Load Balancer 5',
|
||||
protocol: 'HTTP',
|
||||
id: "f",
|
||||
name: "Load Balancer 5",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: 'DNS delegation',
|
||||
rule: "DNS delegation",
|
||||
},
|
||||
]}"
|
||||
]}
|
||||
>
|
||||
<svelte:fragment slot="expanded-row" let:row>
|
||||
<pre>{JSON.stringify(row, null, 2)}</pre>
|
||||
|
|
|
|||
|
|
@ -22,27 +22,27 @@
|
|||
</script>
|
||||
|
||||
<DataTable
|
||||
headers="{[
|
||||
{ key: 'name', value: 'Name' },
|
||||
{ key: 'protocol', value: 'Protocol' },
|
||||
{ key: 'port', value: 'Port' },
|
||||
{ key: 'rule', value: 'Rule' },
|
||||
]}"
|
||||
rows="{rows}"
|
||||
pageSize="{pageSize}"
|
||||
page="{page}"
|
||||
headers={[
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "protocol", value: "Protocol" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" },
|
||||
]}
|
||||
{rows}
|
||||
{pageSize}
|
||||
{page}
|
||||
>
|
||||
<Toolbar>
|
||||
<ToolbarContent>
|
||||
<ToolbarSearch
|
||||
persistent
|
||||
value="round"
|
||||
shouldFilterRows="{(row, value) => {
|
||||
shouldFilterRows={(row, value) => {
|
||||
return (
|
||||
/(6|8)$/.test(row.name) &&
|
||||
row.rule.toLowerCase().includes(value.toLowerCase())
|
||||
);
|
||||
}}"
|
||||
}}
|
||||
bind:filteredRowIds
|
||||
/>
|
||||
</ToolbarContent>
|
||||
|
|
@ -52,6 +52,6 @@
|
|||
<Pagination
|
||||
bind:pageSize
|
||||
bind:page
|
||||
totalItems="{filteredRowIds.length}"
|
||||
totalItems={filteredRowIds.length}
|
||||
pageSizeInputDisabled
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -22,15 +22,15 @@
|
|||
</script>
|
||||
|
||||
<DataTable
|
||||
headers="{[
|
||||
{ key: 'name', value: 'Name' },
|
||||
{ key: 'protocol', value: 'Protocol' },
|
||||
{ key: 'port', value: 'Port' },
|
||||
{ key: 'rule', value: 'Rule' },
|
||||
]}"
|
||||
rows="{rows}"
|
||||
pageSize="{pageSize}"
|
||||
page="{page}"
|
||||
headers={[
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "protocol", value: "Protocol" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" },
|
||||
]}
|
||||
{rows}
|
||||
{pageSize}
|
||||
{page}
|
||||
>
|
||||
<Toolbar>
|
||||
<ToolbarContent>
|
||||
|
|
@ -47,6 +47,6 @@
|
|||
<Pagination
|
||||
bind:pageSize
|
||||
bind:page
|
||||
totalItems="{filteredRowIds.length}"
|
||||
totalItems={filteredRowIds.length}
|
||||
pageSizeInputDisabled
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -3,17 +3,17 @@
|
|||
</script>
|
||||
|
||||
<DataTable
|
||||
headers="{[
|
||||
{ key: 'name', value: 'Name', width: '50%', minWidth: '200px' },
|
||||
{ key: 'protocol', value: 'Protocol', width: '60px' },
|
||||
{ key: 'port', value: 'Port', width: '60px' },
|
||||
{ key: 'rule', value: 'Rule', width: '10rem' },
|
||||
]}"
|
||||
rows="{Array.from({ length: 6 }).map((_, i) => ({
|
||||
headers={[
|
||||
{ key: "name", value: "Name", width: "50%", minWidth: "200px" },
|
||||
{ key: "protocol", value: "Protocol", width: "60px" },
|
||||
{ key: "port", value: "Port", width: "60px" },
|
||||
{ key: "rule", value: "Rule", width: "10rem" },
|
||||
]}
|
||||
rows={Array.from({ length: 6 }).map((_, i) => ({
|
||||
id: i,
|
||||
name: 'Load Balancer ' + (i + 1),
|
||||
protocol: 'HTTP',
|
||||
name: "Load Balancer " + (i + 1),
|
||||
protocol: "HTTP",
|
||||
port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
|
||||
rule: i % 3 ? 'Round robin' : 'DNS delegation',
|
||||
}))}"
|
||||
rule: i % 3 ? "Round robin" : "DNS delegation",
|
||||
}))}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -49,16 +49,16 @@
|
|||
|
||||
<DataTable
|
||||
batchExpansion
|
||||
nonExpandableRowIds="{rows
|
||||
nonExpandableRowIds={rows
|
||||
.filter((row) => row.port < 3000)
|
||||
.map((row) => row.id)}"
|
||||
headers="{[
|
||||
{ key: 'name', value: 'Name' },
|
||||
{ key: 'protocol', value: 'Protocol' },
|
||||
{ key: 'port', value: 'Port' },
|
||||
{ key: 'rule', value: 'Rule' },
|
||||
]}"
|
||||
rows="{rows}"
|
||||
.map((row) => row.id)}
|
||||
headers={[
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "protocol", value: "Protocol" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" },
|
||||
]}
|
||||
{rows}
|
||||
>
|
||||
<svelte:fragment slot="expanded-row" let:row>
|
||||
<pre>{JSON.stringify(row, null, 2)}</pre>
|
||||
|
|
|
|||
|
|
@ -49,14 +49,14 @@
|
|||
|
||||
<DataTable
|
||||
batchSelection
|
||||
nonSelectableRowIds="{rows
|
||||
nonSelectableRowIds={rows
|
||||
.filter((row) => row.port === 3000)
|
||||
.map((row) => row.id)}"
|
||||
headers="{[
|
||||
{ key: 'name', value: 'Name' },
|
||||
{ key: 'protocol', value: 'Protocol' },
|
||||
{ key: 'port', value: 'Port' },
|
||||
{ key: 'rule', value: 'Rule' },
|
||||
]}"
|
||||
rows="{rows}"
|
||||
.map((row) => row.id)}
|
||||
headers={[
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "protocol", value: "Protocol" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" },
|
||||
]}
|
||||
{rows}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -16,19 +16,19 @@
|
|||
sortable
|
||||
title="Load balancers"
|
||||
description="Your organization's active load balancers."
|
||||
headers="{[
|
||||
{ key: 'name', value: 'Name' },
|
||||
{ key: 'protocol', value: 'Protocol' },
|
||||
{ key: 'port', value: 'Port' },
|
||||
{ key: 'rule', value: 'Rule' },
|
||||
]}"
|
||||
pageSize="{pageSize}"
|
||||
page="{page}"
|
||||
rows="{rows}"
|
||||
headers={[
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "protocol", value: "Protocol" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" },
|
||||
]}
|
||||
{pageSize}
|
||||
{page}
|
||||
{rows}
|
||||
/>
|
||||
<Pagination
|
||||
bind:pageSize
|
||||
bind:page
|
||||
totalItems="{rows.length}"
|
||||
totalItems={rows.length}
|
||||
pageSizeInputDisabled
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -10,32 +10,32 @@
|
|||
|
||||
<Button
|
||||
kind="tertiary"
|
||||
disabled="{sortKey === 'port' && sortDirection === 'ascending'}"
|
||||
on:click="{() => {
|
||||
sortKey = 'port';
|
||||
sortDirection = 'ascending';
|
||||
}}"
|
||||
disabled={sortKey === "port" && sortDirection === "ascending"}
|
||||
on:click={() => {
|
||||
sortKey = "port";
|
||||
sortDirection = "ascending";
|
||||
}}
|
||||
>
|
||||
Sort "port" in ascending order
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
kind="tertiary"
|
||||
disabled="{sortKey === 'name' && sortDirection === 'descending'}"
|
||||
on:click="{() => {
|
||||
sortKey = 'name';
|
||||
sortDirection = 'descending';
|
||||
}}"
|
||||
disabled={sortKey === "name" && sortDirection === "descending"}
|
||||
on:click={() => {
|
||||
sortKey = "name";
|
||||
sortDirection = "descending";
|
||||
}}
|
||||
>
|
||||
Sort "name" in descending order
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
kind="ghost"
|
||||
on:click="{() => {
|
||||
on:click={() => {
|
||||
sortKey = null;
|
||||
sortDirection = 'none';
|
||||
}}"
|
||||
sortDirection = "none";
|
||||
}}
|
||||
>
|
||||
Clear sorting
|
||||
</Button>
|
||||
|
|
@ -44,54 +44,54 @@
|
|||
sortable
|
||||
bind:sortKey
|
||||
bind:sortDirection
|
||||
headers="{[
|
||||
{ key: 'name', value: 'Name' },
|
||||
{ key: 'protocol', value: 'Protocol', sort: false },
|
||||
{ key: 'port', value: 'Port' },
|
||||
{ key: 'rule', value: 'Rule' },
|
||||
]}"
|
||||
rows="{[
|
||||
headers={[
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "protocol", value: "Protocol", sort: false },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" },
|
||||
]}
|
||||
rows={[
|
||||
{
|
||||
id: 'a',
|
||||
name: 'Load Balancer 3',
|
||||
protocol: 'HTTP',
|
||||
id: "a",
|
||||
name: "Load Balancer 3",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: 'Round robin',
|
||||
rule: "Round robin",
|
||||
},
|
||||
{
|
||||
id: 'b',
|
||||
name: 'Load Balancer 1',
|
||||
protocol: 'HTTP',
|
||||
id: "b",
|
||||
name: "Load Balancer 1",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: 'Round robin',
|
||||
rule: "Round robin",
|
||||
},
|
||||
{
|
||||
id: 'c',
|
||||
name: 'Load Balancer 2',
|
||||
protocol: 'HTTP',
|
||||
id: "c",
|
||||
name: "Load Balancer 2",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: 'DNS delegation',
|
||||
rule: "DNS delegation",
|
||||
},
|
||||
{
|
||||
id: 'd',
|
||||
name: 'Load Balancer 6',
|
||||
protocol: 'HTTP',
|
||||
id: "d",
|
||||
name: "Load Balancer 6",
|
||||
protocol: "HTTP",
|
||||
port: 3000,
|
||||
rule: 'Round robin',
|
||||
rule: "Round robin",
|
||||
},
|
||||
{
|
||||
id: 'e',
|
||||
name: 'Load Balancer 4',
|
||||
protocol: 'HTTP',
|
||||
id: "e",
|
||||
name: "Load Balancer 4",
|
||||
protocol: "HTTP",
|
||||
port: 443,
|
||||
rule: 'Round robin',
|
||||
rule: "Round robin",
|
||||
},
|
||||
{
|
||||
id: 'f',
|
||||
name: 'Load Balancer 5',
|
||||
protocol: 'HTTP',
|
||||
id: "f",
|
||||
name: "Load Balancer 5",
|
||||
protocol: "HTTP",
|
||||
port: 80,
|
||||
rule: 'DNS delegation',
|
||||
rule: "DNS delegation",
|
||||
},
|
||||
]}"
|
||||
]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -21,4 +21,4 @@
|
|||
$: console.log("selectedRowIds", selectedRowIds);
|
||||
</script>
|
||||
|
||||
<DataTable radio bind:selectedRowIds headers="{headers}" rows="{rows}" />
|
||||
<DataTable radio bind:selectedRowIds {headers} {rows} />
|
||||
|
|
|
|||
|
|
@ -9,16 +9,16 @@
|
|||
<DataTable
|
||||
selectable
|
||||
bind:selectedRowIds
|
||||
headers="{[
|
||||
{ key: 'name', value: 'Name' },
|
||||
{ key: 'port', value: 'Port' },
|
||||
{ key: 'rule', value: 'Rule' },
|
||||
]}"
|
||||
rows="{Array.from({ length: 6 }).map((_, i) => ({
|
||||
headers={[
|
||||
{ key: "name", value: "Name" },
|
||||
{ key: "port", value: "Port" },
|
||||
{ key: "rule", value: "Rule" },
|
||||
]}
|
||||
rows={Array.from({ length: 6 }).map((_, i) => ({
|
||||
id: i,
|
||||
name: 'Load Balancer ' + (i + 1),
|
||||
protocol: 'HTTP',
|
||||
name: "Load Balancer " + (i + 1),
|
||||
protocol: "HTTP",
|
||||
port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
|
||||
rule: i % 3 ? 'Round robin' : 'DNS delegation',
|
||||
}))}"
|
||||
rule: i % 3 ? "Round robin" : "DNS delegation",
|
||||
}))}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@
|
|||
let open = false;
|
||||
</script>
|
||||
|
||||
<Button on:click="{() => (open = true)}">Select date</Button>
|
||||
<Button on:click={() => (open = true)}>Select date</Button>
|
||||
|
||||
<Modal
|
||||
bind:open
|
||||
modalHeading="Meeting date"
|
||||
primaryButtonText="Confirm"
|
||||
secondaryButtonText="Cancel"
|
||||
on:click:button--secondary="{() => (open = false)}"
|
||||
on:click:button--secondary={() => (open = false)}
|
||||
>
|
||||
<DatePicker datePickerType="single" style="min-height: 420px">
|
||||
<DatePickerInput labelText="Meeting date" placeholder="mm/dd/yyyy" />
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
<Dropdown
|
||||
titleText="Contact"
|
||||
selectedId="0"
|
||||
items="{[
|
||||
{ id: '0', text: 'Slack' },
|
||||
{ id: '1', text: 'Email' },
|
||||
{ id: '2', text: 'Fax' },
|
||||
]}"
|
||||
items={[
|
||||
{ id: "0", text: "Slack" },
|
||||
{ id: "1", text: "Email" },
|
||||
{ id: "2", text: "Fax" },
|
||||
]}
|
||||
let:item
|
||||
let:index
|
||||
>
|
||||
|
|
|
|||
|
|
@ -19,18 +19,18 @@
|
|||
|
||||
<Dropdown
|
||||
titleText="Primary contact"
|
||||
bind:selectedId="{dropdown1_selectedId}"
|
||||
items="{items}"
|
||||
bind:selectedId={dropdown1_selectedId}
|
||||
{items}
|
||||
/>
|
||||
|
||||
<div>Primary: {primary}</div>
|
||||
|
||||
<Dropdown
|
||||
invalid="{dropdown1_selectedId === dropdown2_selectedId}"
|
||||
invalid={dropdown1_selectedId === dropdown2_selectedId}
|
||||
invalidText="Secondary contact method must be different from the primary contact"
|
||||
titleText="Secondary contact"
|
||||
bind:selectedId="{dropdown2_selectedId}"
|
||||
items="{items}"
|
||||
bind:selectedId={dropdown2_selectedId}
|
||||
{items}
|
||||
/>
|
||||
|
||||
<div>Secondary: {secondary}</div>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
</script>
|
||||
|
||||
<FileUploader
|
||||
bind:this="{fileUploader}"
|
||||
bind:this={fileUploader}
|
||||
multiple
|
||||
labelTitle="Upload files"
|
||||
buttonLabel="Add files"
|
||||
|
|
@ -18,15 +18,11 @@
|
|||
|
||||
<Button
|
||||
kind="tertiary"
|
||||
disabled="{!files.length}"
|
||||
on:click="{fileUploader.clearFiles}"
|
||||
disabled={!files.length}
|
||||
on:click={fileUploader.clearFiles}
|
||||
>
|
||||
Clear (programmatic)
|
||||
</Button>
|
||||
<Button
|
||||
kind="tertiary"
|
||||
disabled="{!files.length}"
|
||||
on:click="{() => (files = [])}"
|
||||
>
|
||||
<Button kind="tertiary" disabled={!files.length} on:click={() => (files = [])}>
|
||||
Clear (two-way binding)
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@
|
|||
<FluidForm>
|
||||
<TextInput labelText="User name" placeholder="Enter user name..." required />
|
||||
<PasswordInput
|
||||
bind:value="{password}"
|
||||
invalid="{invalid}"
|
||||
bind:value={password}
|
||||
{invalid}
|
||||
invalidText="Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number."
|
||||
required
|
||||
type="password"
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
|
||||
<Grid>
|
||||
<Row>
|
||||
<Column sm="{{ span: 1, offset: 3 }}">Offset 3</Column>
|
||||
<Column sm="{{ span: 2, offset: 2 }}">Offset 2</Column>
|
||||
<Column sm="{{ span: 3, offset: 1 }}">Offset 1</Column>
|
||||
<Column sm="{{ span: 4, offset: 0 }}">Offset 0</Column>
|
||||
<Column sm={{ span: 1, offset: 3 }}>Offset 3</Column>
|
||||
<Column sm={{ span: 2, offset: 2 }}>Offset 2</Column>
|
||||
<Column sm={{ span: 3, offset: 1 }}>Offset 1</Column>
|
||||
<Column sm={{ span: 4, offset: 0 }}>Offset 0</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
|
||||
<Grid>
|
||||
<Row>
|
||||
<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="{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={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={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>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -13,13 +13,13 @@
|
|||
|
||||
<Button
|
||||
kind="ghost"
|
||||
on:click="{() => {
|
||||
on:click={() => {
|
||||
index = index === 0 ? 1 : 0;
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
Toggle image
|
||||
</Button>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -11,15 +11,15 @@
|
|||
|
||||
<Button
|
||||
kind="ghost"
|
||||
disabled="{!imageLoader || error}"
|
||||
on:click="{() => imageLoader.loadImage(srcError)}"
|
||||
disabled={!imageLoader || error}
|
||||
on:click={() => imageLoader.loadImage(srcError)}
|
||||
>
|
||||
Simulate error
|
||||
</Button>
|
||||
|
||||
<ImageLoader bind:this="{imageLoader}" bind:error fadeIn src="{src}">
|
||||
<ImageLoader bind:this={imageLoader} bind:error fadeIn {src}>
|
||||
<svelte:fragment slot="error">
|
||||
<Button kind="ghost" on:click="{() => imageLoader.loadImage(src)}">
|
||||
<Button kind="ghost" on:click={() => imageLoader.loadImage(src)}>
|
||||
Error. Try again
|
||||
</Button>
|
||||
</svelte:fragment>
|
||||
|
|
|
|||
|
|
@ -37,14 +37,14 @@
|
|||
<ButtonSet>
|
||||
<Button
|
||||
kind="ghost"
|
||||
disabled="{state === 'dormant' || state === 'finished'}"
|
||||
on:click="{() => (state = 'inactive')}"
|
||||
disabled={state === "dormant" || state === "finished"}
|
||||
on:click={() => (state = "inactive")}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
{#if state !== "dormant"}
|
||||
<InlineLoading status="{state}" description="{descriptionMap[state]}" />
|
||||
<InlineLoading status={state} description={descriptionMap[state]} />
|
||||
{:else}
|
||||
<Button on:click="{() => (state = 'active')}">Submit</Button>
|
||||
<Button on:click={() => (state = "active")}>Submit</Button>
|
||||
{/if}
|
||||
</ButtonSet>
|
||||
|
|
|
|||
|
|
@ -9,13 +9,13 @@
|
|||
|
||||
<LocalStorage
|
||||
key="dark-mode"
|
||||
bind:value="{toggled}"
|
||||
on:save="{() => {
|
||||
events = [...events, { event: 'on:save' }];
|
||||
}}"
|
||||
on:update="{({ detail }) => {
|
||||
events = [...events, { event: 'on:update', detail }];
|
||||
}}"
|
||||
bind:value={toggled}
|
||||
on:save={() => {
|
||||
events = [...events, { event: "on:save" }];
|
||||
}}
|
||||
on:update={({ detail }) => {
|
||||
events = [...events, { event: "on:update", detail }];
|
||||
}}
|
||||
/>
|
||||
|
||||
<Toggle size="sm" labelText="Dark mode" bind:toggled />
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@
|
|||
$: document.documentElement.setAttribute("theme", toggled ? "g100" : "white");
|
||||
</script>
|
||||
|
||||
<LocalStorage bind:this="{storage}" bind:value="{toggled}" />
|
||||
<LocalStorage bind:this={storage} bind:value={toggled} />
|
||||
|
||||
<Toggle size="sm" labelText="Dark mode" bind:toggled />
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<Button size="small" on:click="{storage.clearAll}">Clear storage</Button>
|
||||
<Button size="small" on:click={storage.clearAll}>Clear storage</Button>
|
||||
|
|
|
|||
|
|
@ -12,20 +12,20 @@
|
|||
let checked = false;
|
||||
</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" />
|
||||
<ModalBody hasForm>
|
||||
<Checkbox labelText="I have reviewed the changes" bind:checked />
|
||||
</ModalBody>
|
||||
<ModalFooter
|
||||
primaryButtonText="Proceed"
|
||||
primaryButtonDisabled="{!checked}"
|
||||
secondaryButtons="{[{ text: 'Cancel' }, { text: 'Review' }]}"
|
||||
on:click:button--secondary="{({ detail }) => {
|
||||
if (detail.text === 'Cancel') open = false;
|
||||
if (detail.text === 'Review') console.log('Review');
|
||||
}}"
|
||||
primaryButtonDisabled={!checked}
|
||||
secondaryButtons={[{ text: "Cancel" }, { text: "Review" }]}
|
||||
on:click:button--secondary={({ detail }) => {
|
||||
if (detail.text === "Cancel") open = false;
|
||||
if (detail.text === "Review") console.log("Review");
|
||||
}}
|
||||
/>
|
||||
</ComposedModal>
|
||||
|
|
|
|||
|
|
@ -4,17 +4,17 @@
|
|||
let open = false;
|
||||
</script>
|
||||
|
||||
<Button on:click="{() => (open = true)}">Create database</Button>
|
||||
<Button on:click={() => (open = true)}>Create database</Button>
|
||||
|
||||
<Modal
|
||||
bind:open
|
||||
modalHeading="Create database"
|
||||
primaryButtonText="Confirm"
|
||||
secondaryButtons="{[{ text: 'Cancel' }, { text: 'Edit' }]}"
|
||||
on:click:button--secondary="{({ detail }) => {
|
||||
if (detail.text === 'Cancel') open = false;
|
||||
if (detail.text === 'Edit') console.log('Edit');
|
||||
}}"
|
||||
secondaryButtons={[{ text: "Cancel" }, { text: "Edit" }]}
|
||||
on:click:button--secondary={({ detail }) => {
|
||||
if (detail.text === "Cancel") open = false;
|
||||
if (detail.text === "Edit") console.log("Edit");
|
||||
}}
|
||||
on:open
|
||||
on:close
|
||||
on:submit
|
||||
|
|
|
|||
|
|
@ -15,5 +15,5 @@
|
|||
<ModalBody hasForm>
|
||||
<Checkbox labelText="I have reviewed the changes" bind:checked />
|
||||
</ModalBody>
|
||||
<ModalFooter primaryButtonText="Proceed" primaryButtonDisabled="{!checked}" />
|
||||
<ModalFooter primaryButtonText="Proceed" primaryButtonDisabled={!checked} />
|
||||
</ComposedModal>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
let open = false;
|
||||
</script>
|
||||
|
||||
<Button kind="danger" on:click="{() => (open = true)}">Delete all</Button>
|
||||
<Button kind="danger" on:click={() => (open = true)}>Delete all</Button>
|
||||
|
||||
<Modal
|
||||
danger
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
modalHeading="Delete all instances"
|
||||
primaryButtonText="Delete"
|
||||
secondaryButtonText="Cancel"
|
||||
on:click:button--secondary="{() => (open = false)}"
|
||||
on:click:button--secondary={() => (open = false)}
|
||||
on:open
|
||||
on:close
|
||||
on:submit
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@
|
|||
let open = false;
|
||||
</script>
|
||||
|
||||
<Button on:click="{() => (open = true)}">Create database</Button>
|
||||
<Button on:click={() => (open = true)}>Create database</Button>
|
||||
|
||||
<Modal
|
||||
bind:open
|
||||
modalHeading="Create database"
|
||||
primaryButtonText="Confirm"
|
||||
secondaryButtonText="Cancel"
|
||||
on:click:button--secondary="{() => (open = false)}"
|
||||
on:click:button--secondary={() => (open = false)}
|
||||
on:open
|
||||
on:close
|
||||
on:submit
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
let open = false;
|
||||
</script>
|
||||
|
||||
<Button on:click="{() => (open = true)}">Create database</Button>
|
||||
<Button on:click={() => (open = true)}>Create database</Button>
|
||||
|
||||
<Modal
|
||||
bind:open
|
||||
modalHeading="Invite someone"
|
||||
primaryButtonText="Send invitation"
|
||||
primaryButtonIcon="{Send}"
|
||||
primaryButtonIcon={Send}
|
||||
secondaryButtonText="Cancel"
|
||||
>
|
||||
<p>Do you really want to invite someone?</p>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
let open = false;
|
||||
</script>
|
||||
|
||||
<Button on:click="{() => (open = true)}">Create database</Button>
|
||||
<Button on:click={() => (open = true)}>Create database</Button>
|
||||
|
||||
<Modal
|
||||
bind:open
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
primaryButtonText="Confirm"
|
||||
secondaryButtonText="Cancel"
|
||||
selectorPrimaryFocus="#db-name"
|
||||
on:click:button--secondary="{() => (open = false)}"
|
||||
on:click:button--secondary={() => (open = false)}
|
||||
on:open
|
||||
on:close
|
||||
on:submit
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
let open = false;
|
||||
</script>
|
||||
|
||||
<Button on:click="{() => (open = true)}">Create database</Button>
|
||||
<Button on:click={() => (open = true)}>Create database</Button>
|
||||
|
||||
<Modal
|
||||
size="xs"
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
let open = false;
|
||||
</script>
|
||||
|
||||
<Button on:click="{() => (open = true)}">Create database</Button>
|
||||
<Button on:click={() => (open = true)}>Create database</Button>
|
||||
|
||||
<Modal
|
||||
size="lg"
|
||||
|
|
|
|||
|
|
@ -5,17 +5,17 @@
|
|||
let openDelete = false;
|
||||
</script>
|
||||
|
||||
<Button on:click="{() => (openCreate = true)}">Create database</Button>
|
||||
<Button kind="danger-tertiary" on:click="{() => (openDelete = true)}">
|
||||
<Button on:click={() => (openCreate = true)}>Create database</Button>
|
||||
<Button kind="danger-tertiary" on:click={() => (openDelete = true)}>
|
||||
Delete database
|
||||
</Button>
|
||||
|
||||
<Modal
|
||||
bind:open="{openCreate}"
|
||||
bind:open={openCreate}
|
||||
modalHeading="Create database"
|
||||
primaryButtonText="Confirm"
|
||||
secondaryButtonText="Cancel"
|
||||
on:click:button--secondary="{() => (openCreate = false)}"
|
||||
on:click:button--secondary={() => (openCreate = false)}
|
||||
on:open
|
||||
on:close
|
||||
on:submit
|
||||
|
|
@ -25,11 +25,11 @@
|
|||
|
||||
<Modal
|
||||
danger
|
||||
bind:open="{openDelete}"
|
||||
bind:open={openDelete}
|
||||
modalHeading="Delete database"
|
||||
primaryButtonText="Delete"
|
||||
secondaryButtonText="Cancel"
|
||||
on:click:button--secondary="{() => (openDelete = false)}"
|
||||
on:click:button--secondary={() => (openDelete = false)}
|
||||
on:open
|
||||
on:close
|
||||
on:submit
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
let open = false;
|
||||
</script>
|
||||
|
||||
<Button on:click="{() => (open = true)}">Create database</Button>
|
||||
<Button on:click={() => (open = true)}>Create database</Button>
|
||||
|
||||
<Modal
|
||||
preventCloseOnClickOutside
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
let open = false;
|
||||
</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>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
let open = false;
|
||||
</script>
|
||||
|
||||
<Button on:click="{() => (open = true)}">Create database</Button>
|
||||
<Button on:click={() => (open = true)}>Create database</Button>
|
||||
|
||||
<Modal
|
||||
size="sm"
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
let open = false;
|
||||
</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>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
<MultiSelect
|
||||
titleText="Contact"
|
||||
label="Select contact methods..."
|
||||
items="{[
|
||||
{ id: '0', text: 'Slack' },
|
||||
{ id: '1', text: 'Email' },
|
||||
{ id: '2', text: 'Fax' },
|
||||
]}"
|
||||
items={[
|
||||
{ id: "0", text: "Slack" },
|
||||
{ id: "1", text: "Email" },
|
||||
{ id: "2", text: "Fax" },
|
||||
]}
|
||||
let:item
|
||||
let:index
|
||||
>
|
||||
|
|
|
|||
|
|
@ -21,18 +21,18 @@
|
|||
|
||||
<MultiSelect
|
||||
titleText="Primary contact"
|
||||
bind:selectedIds="{multiselect1_selectedIds}"
|
||||
bind:selectedIds={multiselect1_selectedIds}
|
||||
label="Select contact methods..."
|
||||
items="{items}"
|
||||
{items}
|
||||
/>
|
||||
|
||||
<div>Primary: {primary}</div>
|
||||
|
||||
<MultiSelect
|
||||
titleText="Secondary contact"
|
||||
bind:selectedIds="{multiselect2_selectedIds}"
|
||||
bind:selectedIds={multiselect2_selectedIds}
|
||||
label="Select contact methods..."
|
||||
items="{items}"
|
||||
{items}
|
||||
/>
|
||||
|
||||
<div>Secondary: {secondary}</div>
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
<NumberInput allowEmpty bind:value />
|
||||
|
||||
<div style="margin: var(--cds-layout-01) 0">
|
||||
<Button on:click="{() => (value = null)}">Set to null</Button>
|
||||
<Button on:click="{() => (value = 0)}">Set to 0</Button>
|
||||
<Button on:click={() => (value = null)}>Set to null</Button>
|
||||
<Button on:click={() => (value = 0)}>Set to 0</Button>
|
||||
</div>
|
||||
|
||||
<strong>Value:</strong>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<PaginationNav bind:page />
|
||||
|
||||
<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
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,15 +5,15 @@
|
|||
let ref = null;
|
||||
</script>
|
||||
|
||||
<div bind:this="{ref}" style:position="relative">
|
||||
<Button on:click="{() => (open = !open)}">Toggle popover</Button>
|
||||
<div bind:this={ref} style:position="relative">
|
||||
<Button on:click={() => (open = !open)}>Toggle popover</Button>
|
||||
<Popover
|
||||
bind:open
|
||||
align="bottom-left"
|
||||
on:click:outside="{({ detail }) => {
|
||||
console.log('on:click:outside');
|
||||
on:click:outside={({ detail }) => {
|
||||
console.log("on:click:outside");
|
||||
open = ref.contains(detail.target);
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<div style="padding: var(--cds-spacing-05)">Content</div>
|
||||
</Popover>
|
||||
|
|
|
|||
|
|
@ -13,18 +13,12 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<ProgressBar
|
||||
labelText="Upload status"
|
||||
value="{value}"
|
||||
max="{max}"
|
||||
helperText="{helperText}"
|
||||
status="{status}"
|
||||
/>
|
||||
<ProgressBar labelText="Upload status" {value} {max} {helperText} {status} />
|
||||
|
||||
<ButtonSet style="margin-top: var(--cds-spacing-08)">
|
||||
<Button
|
||||
disabled="{value > 0}"
|
||||
on:click="{() => {
|
||||
disabled={value > 0}
|
||||
on:click={() => {
|
||||
const interval = setInterval(() => {
|
||||
const delta = Math.random() * 10;
|
||||
|
||||
|
|
@ -35,17 +29,17 @@
|
|||
clearInterval(interval);
|
||||
}
|
||||
}, 30);
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
Start
|
||||
</Button>
|
||||
<Button
|
||||
kind="tertiary"
|
||||
disabled="{value !== max}"
|
||||
on:click="{() => {
|
||||
disabled={value !== max}
|
||||
on:click={() => {
|
||||
value = 0;
|
||||
status = 'active';
|
||||
}}"
|
||||
status = "active";
|
||||
}}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
/>
|
||||
<ProgressStep
|
||||
complete
|
||||
bind:current="{thirdStepCurrent}"
|
||||
bind:current={thirdStepCurrent}
|
||||
label="Step 3"
|
||||
description="The progress indicator will listen for clicks on the steps"
|
||||
/>
|
||||
|
|
@ -34,10 +34,10 @@
|
|||
|
||||
<div style="margin: var(--cds-layout-02) 0">
|
||||
<Button
|
||||
kind="{currentIndex === 2 ? 'secondary' : 'primary'}"
|
||||
on:click="{() => {
|
||||
kind={currentIndex === 2 ? "secondary" : "primary"}
|
||||
on:click={() => {
|
||||
currentIndex = currentIndex === 2 ? 0 : 2;
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
Set currentIndex to
|
||||
{currentIndex === 2 ? 0 : 2}
|
||||
|
|
|
|||
|
|
@ -13,10 +13,10 @@
|
|||
<RadioButtonGroup
|
||||
legendText="Storage tier (disk)"
|
||||
name="plan"
|
||||
bind:selected="{plan}"
|
||||
bind:selected={plan}
|
||||
>
|
||||
{#each plans as value (value)}
|
||||
<RadioButton labelText="{value}" value="{value}" />
|
||||
<RadioButton labelText={value} {value} />
|
||||
{/each}
|
||||
</RadioButtonGroup>
|
||||
|
||||
|
|
@ -25,8 +25,8 @@
|
|||
<Button
|
||||
size="small"
|
||||
kind="secondary"
|
||||
disabled="{plan === value}"
|
||||
on:click="{() => (plan = value)}"
|
||||
disabled={plan === value}
|
||||
on:click={() => (plan = value)}
|
||||
>
|
||||
Select "{value}"
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<TileGroup legend="Service pricing tiers" name="plan" bind:selected>
|
||||
{#each values as value}
|
||||
<RadioTile value="{value}">{value}</RadioTile>
|
||||
<RadioTile {value}>{value}</RadioTile>
|
||||
{/each}
|
||||
</TileGroup>
|
||||
|
||||
|
|
@ -18,8 +18,8 @@
|
|||
|
||||
<Button
|
||||
size="small"
|
||||
disabled="{selected === values[1]}"
|
||||
on:click="{() => (selected = values[1])}"
|
||||
disabled={selected === values[1]}
|
||||
on:click={() => (selected = values[1])}
|
||||
>
|
||||
Set to "{values[1]}"
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@
|
|||
<TileGroup
|
||||
legend="Service pricing tiers"
|
||||
name="plan"
|
||||
on:select="{({ detail }) => (selected = detail)}"
|
||||
on:select={({ detail }) => (selected = detail)}
|
||||
>
|
||||
{#each values as value}
|
||||
<RadioTile value="{value}" checked="{selected === value}">
|
||||
<RadioTile {value} checked={selected === value}>
|
||||
{value}
|
||||
</RadioTile>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -29,4 +29,4 @@
|
|||
];
|
||||
</script>
|
||||
|
||||
<RecursiveList nodes="{nodes}" />
|
||||
<RecursiveList {nodes} />
|
||||
|
|
|
|||
|
|
@ -29,4 +29,4 @@
|
|||
];
|
||||
</script>
|
||||
|
||||
<RecursiveList type="ordered" nodes="{nodes}" />
|
||||
<RecursiveList type="ordered" {nodes} />
|
||||
|
|
|
|||
|
|
@ -29,4 +29,4 @@
|
|||
];
|
||||
</script>
|
||||
|
||||
<RecursiveList type="ordered-native" nodes="{nodes}" />
|
||||
<RecursiveList type="ordered-native" {nodes} />
|
||||
|
|
|
|||
|
|
@ -10,16 +10,16 @@
|
|||
<ButtonSet>
|
||||
<Button
|
||||
size="small"
|
||||
disabled="{value === 'Cloud functions'}"
|
||||
on:click="{() => (value = 'Cloud functions')}"
|
||||
disabled={value === "Cloud functions"}
|
||||
on:click={() => (value = "Cloud functions")}
|
||||
>
|
||||
Set value
|
||||
</Button>
|
||||
<Button
|
||||
kind="ghost"
|
||||
size="small"
|
||||
disabled="{value.length === 0}"
|
||||
on:click="{() => (value = '')}"
|
||||
disabled={value.length === 0}
|
||||
on:click={() => (value = "")}
|
||||
>
|
||||
Clear value
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,6 @@
|
|||
Selected: <strong>{selected}</strong>
|
||||
</div>
|
||||
|
||||
<Button disabled="{selected === 'g90'}" on:click="{() => (selected = 'g90')}">
|
||||
<Button disabled={selected === "g90"} on:click={() => (selected = "g90")}>
|
||||
Set to "g90"
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
</Tabs>
|
||||
|
||||
<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>
|
||||
|
||||
<strong>Selected index:</strong>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
|
||||
<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}
|
||||
<RadioButton labelText="{value}" value="{value}" />
|
||||
<RadioButton labelText={value} {value} />
|
||||
{/each}
|
||||
</RadioButtonGroup>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
|
||||
<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}
|
||||
<RadioButton labelText="{value}" value="{value}" />
|
||||
<RadioButton labelText={value} {value} />
|
||||
{/each}
|
||||
</RadioButtonGroup>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
|
||||
<Theme
|
||||
render="select"
|
||||
select="{{
|
||||
themes: ['white', 'g90', 'g100'],
|
||||
labelText: 'Select a theme',
|
||||
select={{
|
||||
themes: ["white", "g90", "g100"],
|
||||
labelText: "Select a theme",
|
||||
inline: true,
|
||||
}}"
|
||||
}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@
|
|||
|
||||
<Theme
|
||||
render="toggle"
|
||||
toggle="{{
|
||||
themes: ['g10', 'g80'],
|
||||
labelA: 'Enable dark mode',
|
||||
labelB: 'Enable dark mode',
|
||||
toggle={{
|
||||
themes: ["g10", "g80"],
|
||||
labelA: "Enable dark mode",
|
||||
labelB: "Enable dark mode",
|
||||
hideLabel: true,
|
||||
size: 'sm',
|
||||
}}"
|
||||
size: "sm",
|
||||
}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@
|
|||
|
||||
<Theme
|
||||
theme="g90"
|
||||
tokens="{{
|
||||
'interactive-01': '#d02670',
|
||||
'hover-primary': '#ee5396',
|
||||
'active-primary': '#9f1853',
|
||||
}}"
|
||||
tokens={{
|
||||
"interactive-01": "#d02670",
|
||||
"hover-primary": "#ee5396",
|
||||
"active-primary": "#9f1853",
|
||||
}}
|
||||
/>
|
||||
|
||||
<Button>Primary button</Button>
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@
|
|||
</script>
|
||||
|
||||
<Button
|
||||
disabled="{showNotification}"
|
||||
on:click="{() => {
|
||||
disabled={showNotification}
|
||||
on:click={() => {
|
||||
timeout = 3_000; // 3 seconds
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
Show notification
|
||||
</Button>
|
||||
|
|
@ -18,15 +18,15 @@
|
|||
{#if showNotification}
|
||||
<div transition:fade>
|
||||
<ToastNotification
|
||||
timeout="{timeout}"
|
||||
{timeout}
|
||||
kind="success"
|
||||
title="Success"
|
||||
subtitle="This notification will autoclose in {timeout.toLocaleString()} ms."
|
||||
caption="{new Date().toLocaleString()}"
|
||||
on:close="{(e) => {
|
||||
caption={new Date().toLocaleString()}
|
||||
on:close={(e) => {
|
||||
timeout = undefined;
|
||||
console.log(e.detail.timeout); // true if closed via timeout
|
||||
}}"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<Toggle labelText="Push notifications" bind:toggled />
|
||||
|
||||
<div>
|
||||
<Button size="small" on:click="{() => (toggled = !toggled)}">
|
||||
<Button size="small" on:click={() => (toggled = !toggled)}>
|
||||
Toggle
|
||||
{toggled ? "off" : "on"}
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</Tooltip>
|
||||
|
||||
<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"}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -47,12 +47,12 @@
|
|||
|
||||
<TreeView
|
||||
labelText="Cloud Products"
|
||||
nodes="{nodes}"
|
||||
{nodes}
|
||||
bind:activeId
|
||||
bind:selectedIds
|
||||
on:select="{({ detail }) => console.log('select', detail)}"
|
||||
on:toggle="{({ detail }) => console.log('toggle', detail)}"
|
||||
on:focus="{({ detail }) => console.log('focus', detail)}"
|
||||
on:select={({ detail }) => console.log("select", detail)}
|
||||
on:toggle={({ detail }) => console.log("toggle", detail)}
|
||||
on:focus={({ detail }) => console.log("focus", detail)}
|
||||
/>
|
||||
|
||||
<div>Active node id: {activeId}</div>
|
||||
|
|
|
|||
|
|
@ -47,12 +47,12 @@
|
|||
|
||||
<TreeView
|
||||
labelText="Cloud Products"
|
||||
nodes="{nodes}"
|
||||
{nodes}
|
||||
bind:activeId
|
||||
bind:selectedIds
|
||||
on:select="{({ detail }) => console.log('select', detail)}"
|
||||
on:toggle="{({ detail }) => console.log('toggle', detail)}"
|
||||
on:focus="{({ detail }) => console.log('focus', detail)}"
|
||||
on:select={({ detail }) => console.log("select", detail)}
|
||||
on:toggle={({ detail }) => console.log("toggle", detail)}
|
||||
on:focus={({ detail }) => console.log("focus", detail)}
|
||||
/>
|
||||
|
||||
<div>Active node id: {activeId}</div>
|
||||
|
|
|
|||
|
|
@ -46,14 +46,14 @@
|
|||
</script>
|
||||
|
||||
<div>
|
||||
<Button on:click="{treeview?.collapseAll}">Collapse all</Button>
|
||||
<Button on:click={treeview?.collapseAll}>Collapse all</Button>
|
||||
</div>
|
||||
|
||||
<TreeView
|
||||
bind:this="{treeview}"
|
||||
bind:this={treeview}
|
||||
bind:expandedIds
|
||||
labelText="Cloud Products"
|
||||
nodes="{nodes}"
|
||||
{nodes}
|
||||
/>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue