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

chore(deps-dev): upgrade prettier-plugin-svelte (#498)

Browse source
This commit is contained in:
Eric Liu 2021-01-27 15:02:02 -08:00 • committed by GitHub
commit 3d002f3246
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
72 changed files with 944 additions and 733 deletions
Download patch file Download diff file Expand all files Collapse all files

3
README.md
View file

@ -155,7 +155,8 @@ Using JavaScript:
$: document.documentElement.setAttribute("theme", theme); $: document.documentElement.setAttribute("theme", theme);
</script> </script>
<button on:click="{() => theme = 'g90'}">Update theme</button> <button on:click="{() => (theme = 'g90')}">Update theme</button>
``` ```
### TypeScript support ### TypeScript support

4
docs/src/App.svelte
View file

@ -3,6 +3,8 @@
import { routes } from "../.routify/routes"; import { routes } from "../.routify/routes";
</script> </script>
<Router routes="{routes}" />
<style lang="scss" global> <style lang="scss" global>
@import "@carbon/themes/scss/themes"; @import "@carbon/themes/scss/themes";
@ -42,5 +44,3 @@
@import "carbon-components/scss/globals/grid/_grid.scss"; @import "carbon-components/scss/globals/grid/_grid.scss";
@import "carbon-components/scss/globals/scss/styles.scss"; @import "carbon-components/scss/globals/scss/styles.scss";
</style> </style>
<Router routes="{routes}" />

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

@ -39,29 +39,6 @@
); );
</script> </script>
<style>
.description {
margin-bottom: var(--cds-spacing-04);
}
.cell {
position: relative;
z-index: 9;
min-height: 1.25rem;
margin-bottom: var(--cds-spacing-02);
}
.overflow {
overflow-x: auto;
}
:global(.my-layout-01-03),
:global(.overflow .bx--structured-list) {
margin-top: var(--cds-layout-01);
margin-bottom: var(--cds-layout-04);
}
</style>
<p style="margin-bottom: var(--cds-layout-02)"> <p style="margin-bottom: var(--cds-layout-02)">
Component source code: Component source code:
<Link inline size="lg" href="{source}" target="_blank"> <Link inline size="lg" href="{source}" target="_blank">
@ -101,12 +78,12 @@
{/if} {/if}
</StructuredListCell> </StructuredListCell>
<StructuredListCell> <StructuredListCell>
{#each prop.type.split(' | ') as type, i (type)} {#each prop.type.split(" | ") as type, i (type)}
<div <div
class="cell" class="cell"
style="z-index: {prop.type.split(' | ').length - i}" style="z-index: {prop.type.split(' | ').length - i}"
> >
{#if type.startsWith('typeof')} {#if type.startsWith("typeof")}
<TooltipDefinition <TooltipDefinition
direction="top" direction="top"
align="start" align="start"
@ -114,7 +91,7 @@
> >
Carbon Svelte icon Carbon Svelte icon
</TooltipDefinition> </TooltipDefinition>
{:else if type.startsWith('HTML')} {:else if type.startsWith("HTML")}
<Link <Link
href="{mdn_api}{type}" href="{mdn_api}{type}"
target="_blank" target="_blank"
@ -125,7 +102,7 @@
</Link> </Link>
{:else if type in typeMap} {:else if type in typeMap}
<code>{typeMap[type]}</code> <code>{typeMap[type]}</code>
{:else if type.startsWith('(')} {:else if type.startsWith("(")}
<code>{type}</code> <code>{type}</code>
{:else} {:else}
<InlineSnippet code="{type}" /> <InlineSnippet code="{type}" />
@ -136,12 +113,12 @@
<StructuredListCell><code>{prop.value}</code></StructuredListCell> <StructuredListCell><code>{prop.value}</code></StructuredListCell>
<StructuredListCell> <StructuredListCell>
{#if prop.description} {#if prop.description}
{#each prop.description.split('\n') as line} {#each prop.description.split("\n") as line}
<div class="description"> <div class="description">
{@html line {@html line
.replace(/\</g, '&lt;') .replace(/\</g, "&lt;")
.replace(/\>/g, '&gt;') .replace(/\>/g, "&gt;")
.replace(/`(.*?)`/g, '<code>$1</code>')}. .replace(/`(.*?)`/g, "<code>$1</code>")}.
</div> </div>
{/each} {/each}
{:else} {:else}
@ -160,7 +137,7 @@
{#if component.slots.length > 0} {#if component.slots.length > 0}
<UnorderedList class="my-layout-01-03"> <UnorderedList class="my-layout-01-03">
{#each component.slots as slot (slot.name)} {#each component.slots as slot (slot.name)}
<ListItem>{slot.default ? 'default' : slot.name}</ListItem> <ListItem>{slot.default ? "default" : slot.name}</ListItem>
{/each} {/each}
</UnorderedList> </UnorderedList>
{:else} {:else}
@ -198,9 +175,32 @@
spreads spreads
<code>$$restProps</code> <code>$$restProps</code>
to the to the
{#if component.rest_props.type === 'Element'} {#if component.rest_props.type === "Element"}
<code>{component.rest_props.name}</code> <code>{component.rest_props.name}</code>
element. element.
{:else}<code>{component.rest_props.name}</code> component.{/if} {:else}<code>{component.rest_props.name}</code> component.{/if}
{:else}This component does not spread <code>restProps</code>{/if} {:else}This component does not spread <code>restProps</code>{/if}
</div> </div>
<style>
.description {
margin-bottom: var(--cds-spacing-04);
}
.cell {
position: relative;
z-index: 9;
min-height: 1.25rem;
margin-bottom: var(--cds-spacing-02);
}
.overflow {
overflow-x: auto;
}
:global(.my-layout-01-03),
:global(.overflow .bx--structured-list) {
margin-top: var(--cds-layout-01);
margin-bottom: var(--cds-layout-04);
}
</style>

12
docs/src/components/Footer.svelte
View file

@ -2,12 +2,6 @@
import { Content, Grid, Row, Column, Link } from "carbon-components-svelte"; import { Content, Grid, Row, Column, Link } from "carbon-components-svelte";
</script> </script>
<style>
footer {
background: var(--cds-ui-01);
}
</style>
<footer class="bx--content"> <footer class="bx--content">
<Grid> <Grid>
<Row> <Row>
@ -26,3 +20,9 @@
</Row> </Row>
</Grid> </Grid>
</footer> </footer>
<style>
footer {
background: var(--cds-ui-01);
}
</style>

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

@ -5,12 +5,6 @@
import copy from "clipboard-copy"; import copy from "clipboard-copy";
</script> </script>
<style>
div {
margin-bottom: var(--cds-spacing-04);
}
</style>
<div> <div>
<CodeSnippet <CodeSnippet
code="{code}" code="{code}"
@ -20,3 +14,9 @@
}}" }}"
/> />
</div> </div>
<style>
div {
margin-bottom: var(--cds-spacing-04);
}
</style>

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

@ -13,6 +13,40 @@
$: themedSrcUrl = $url(`${src}?theme=${$theme}`); $: themedSrcUrl = $url(`${src}?theme=${$theme}`);
</script> </script>
<div class="preview">
{#if framed}
<div class="framed-header">
<div
style="margin-left: var(--cds-spacing-05); color: var(--cds-text-02)"
>
Content loaded in an iframe
</div>
<Button
style="margin-left: auto;"
kind="ghost"
target="_blank"
size="field"
href="{themedSrcUrl}"
icon="{Launch16}"
>
Open in new tab
</Button>
</div>
{/if}
<div class="preview-viewer" class:framed>
{#if framed}
<iframe title="{src.split('/').pop()}" src="{themedSrcUrl}"></iframe>
{:else}
<slot />
{/if}
</div>
<div class="code-override">
<CodeSnippet type="multi" on:click="{() => copy(codeRaw)}">
{@html code}
</CodeSnippet>
</div>
</div>
<style global> <style global>
.preview { .preview {
margin-bottom: var(--cds-layout-04); margin-bottom: var(--cds-layout-04);
@ -130,37 +164,3 @@
height: 100%; height: 100%;
} }
</style> </style>
<div class="preview">
{#if framed}
<div class="framed-header">
<div
style="margin-left: var(--cds-spacing-05); color: var(--cds-text-02)"
>
Content loaded in an iframe
</div>
<Button
style="margin-left: auto;"
kind="ghost"
target="_blank"
size="field"
href="{themedSrcUrl}"
icon="{Launch16}"
>
Open in new tab
</Button>
</div>
{/if}
<div class="preview-viewer" class:framed>
{#if framed}
<iframe title="{src.split('/').pop()}" src="{themedSrcUrl}"></iframe>
{:else}
<slot />
{/if}
</div>
<div class="code-override">
<CodeSnippet type="multi" on:click="{() => copy(codeRaw)}">
{@html code}
</CodeSnippet>
</div>
</div>

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

@ -12,6 +12,33 @@
$: tileComponent = href ? ClickableTile : Tile; $: tileComponent = href ? ClickableTile : Tile;
</script> </script>
<div class="card-wrapper" class:borderRight class:borderBottom>
<AspectRatio>
<svelte:component
this="{tileComponent}"
href="{href}"
{...$$restProps}
style="height: 100%;"
>
<div class="card">
<div>
<h5 class="title">{title}</h5>
{#if subtitle}
<div class="subtitle">{subtitle}</div>
{/if}
</div>
<div class="card-footer">
<svelte:component
this="{LogoGithub32}"
style="fill: var(--cds-icon-01)"
/>
<Launch20 style="fill: var(--cds-icon-01)" />
</div>
</div>
</svelte:component>
</AspectRatio>
</div>
<style> <style>
.card-wrapper { .card-wrapper {
border-right: 1px solid transparent; border-right: 1px solid transparent;
@ -56,30 +83,3 @@
} }
} }
</style> </style>
<div class="card-wrapper" class:borderRight class:borderBottom>
<AspectRatio>
<svelte:component
this="{tileComponent}"
href="{href}"
{...$$restProps}
style="height: 100%;"
>
<div class="card">
<div>
<h5 class="title">{title}</h5>
{#if subtitle}
<div class="subtitle">{subtitle}</div>
{/if}
</div>
<div class="card-footer">
<svelte:component
this="{LogoGithub32}"
style="fill: var(--cds-icon-01)"
/>
<Launch20 style="fill: var(--cds-icon-01)" />
</div>
</div>
</svelte:component>
</AspectRatio>
</div>

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

@ -48,71 +48,6 @@
}`; }`;
</script> </script>
<style global>
.override-tabs a.bx--tabs__nav-link,
.override-tabs a.bx--tabs__nav-link:focus,
.override-tabs a.bx--tabs__nav-link:active {
width: auto !important;
}
#select-theme {
width: auto;
}
.prose > p > .bx--link {
font-size: inherit;
}
.prose .toc {
margin-bottom: var(--cds-layout-01);
}
.table {
position: sticky;
max-height: calc(100vh - 3rem);
top: 3rem;
padding-top: var(--cds-spacing-05);
padding-bottom: var(--cds-spacing-05);
padding-left: var(--cds-spacing-08);
overflow-y: auto;
}
.bar {
display: flex;
justify-content: space-between;
margin-bottom: var(--cds-layout-02);
border-bottom: 1px solid var(--cds-ui-03);
}
[data-components] {
z-index: 2;
position: relative;
display: flex;
}
[data-components] .bx--grid {
width: 100%;
}
.toc h5 {
margin-bottom: var(--cds-spacing-03);
}
.toc.mobile {
display: none;
}
@media (max-width: 1056px) {
.table {
display: none;
}
.toc.mobile {
display: block;
}
}
</style>
<Content data-components> <Content data-components>
<Grid> <Grid>
<Row> <Row>
@ -208,3 +143,68 @@
</div> </div>
</Column> </Column>
</Content> </Content>
<style global>
.override-tabs a.bx--tabs__nav-link,
.override-tabs a.bx--tabs__nav-link:focus,
.override-tabs a.bx--tabs__nav-link:active {
width: auto !important;
}
#select-theme {
width: auto;
}
.prose > p > .bx--link {
font-size: inherit;
}
.prose .toc {
margin-bottom: var(--cds-layout-01);
}
.table {
position: sticky;
max-height: calc(100vh - 3rem);
top: 3rem;
padding-top: var(--cds-spacing-05);
padding-bottom: var(--cds-spacing-05);
padding-left: var(--cds-spacing-08);
overflow-y: auto;
}
.bar {
display: flex;
justify-content: space-between;
margin-bottom: var(--cds-layout-02);
border-bottom: 1px solid var(--cds-ui-03);
}
[data-components] {
z-index: 2;
position: relative;
display: flex;
}
[data-components] .bx--grid {
width: 100%;
}
.toc h5 {
margin-bottom: var(--cds-spacing-03);
}
.toc.mobile {
display: none;
}
@media (max-width: 1056px) {
.table {
display: none;
}
.toc.mobile {
display: block;
}
}
</style>

80
docs/src/layouts/Recipe.svelte
View file

@ -24,6 +24,46 @@
}); });
</script> </script>
<Content data-components>
<Grid>
<Row>
<Column>
<h1>{component}</h1>
<div class="bar">
<Select
id="select-theme"
inline
labelText="Theme"
bind:selected="{$theme}"
>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
</div>
</Column>
</Row>
<Row>
<Column class="prose">
<div class="toc mobile">
<h5>Table of Contents</h5>
<slot name="aside" />
</div>
<slot />
</Column>
</Row>
</Grid>
<Column class="table" xlg="{4}" lg="{5}">
<div class="toc">
<h5>Table of Contents</h5>
<slot name="aside" />
</div>
</Column>
</Content>
<style global> <style global>
#select-theme { #select-theme {
width: auto; width: auto;
@ -82,43 +122,3 @@
} }
} }
</style> </style>
<Content data-components>
<Grid>
<Row>
<Column>
<h1>{component}</h1>
<div class="bar">
<Select
id="select-theme"
inline
labelText="Theme"
bind:selected="{$theme}"
>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
</div>
</Column>
</Row>
<Row>
<Column class="prose">
<div class="toc mobile">
<h5>Table of Contents</h5>
<slot name="aside" />
</div>
<slot />
</Column>
</Row>
</Grid>
<Column class="table" xlg="{4}" lg="{5}">
<div class="toc">
<h5>Table of Contents</h5>
<slot name="aside" />
</div>
</Column>
</Content>

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

@ -34,6 +34,88 @@
}); });
</script> </script>
<!-- routify:options bundle=true -->
<svelte:window bind:innerWidth />
<Theme persist>
<Header
aria-label="Navigation"
href="{$url('/')}"
expandedByDefault="{true}"
bind:isSideNavOpen
>
<div slot="skip-to-content">
<SkipToContent />
</div>
<span slot="platform" class="platform-name">
Carbon Components Svelte
<code>v{process.env.VERSION || ""}</code>
</span>
<HeaderUtilities>
<HeaderActionLink
icon="{LogoGithub20}"
href="https://github.com/IBM/carbon-components-svelte"
target="_blank"
/>
<HeaderAction transition="{false}" bind:isOpen>
<HeaderPanelLinks>
<HeaderPanelDivider>Carbon Svelte portfolio</HeaderPanelDivider>
<HeaderPanelLink href="https://github.com/IBM/carbon-icons-svelte">
Carbon Icons Svelte
</HeaderPanelLink>
<HeaderPanelLink
href="https://github.com/IBM/carbon-pictograms-svelte"
>
Carbon Pictograms Svelte
</HeaderPanelLink>
<HeaderPanelLink
href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte"
>
Carbon Charts Svelte
</HeaderPanelLink>
<HeaderPanelDivider>Resources</HeaderPanelDivider>
<HeaderPanelLink href="https://www.carbondesignsystem.com/">
Carbon Design System
</HeaderPanelLink>
<HeaderPanelLink href="https://www.ibm.com/design/language/">
IBM Design Language
</HeaderPanelLink>
</HeaderPanelLinks>
</HeaderAction>
</HeaderUtilities>
</Header>
<SideNav bind:isOpen="{isSideNavOpen}">
<SideNavItems>
<SideNavMenu
expanded="{$isActive($url('')) || $isActive($url('/components'))}"
text="Components"
>
{#each components.children as child, i (child.path)}
<SideNavMenuItem
text="{child.title}"
href="{$url(child.path)}"
isSelected="{$isActive($url(child.path))}"
/>
{/each}
</SideNavMenu>
<SideNavMenu expanded="{$isActive($url('/recipes'))}" text="Recipes">
{#each recipes.children as child, i (child.path)}
<SideNavMenuItem
text="{child.title}"
href="{$url(child.path)}"
isSelected="{$isActive($url(child.path))}"
/>
{/each}
</SideNavMenu>
</SideNavItems>
</SideNav>
<slot />
<Footer />
</Theme>
<style global> <style global>
.body-short-01 { .body-short-01 {
font-size: var(--cds-body-short-01-font-size); font-size: var(--cds-body-short-01-font-size);
@ -160,85 +242,3 @@
max-height: 120rem; max-height: 120rem;
} }
</style> </style>
<!-- routify:options bundle=true -->
<svelte:window bind:innerWidth />
<Theme persist>
<Header
aria-label="Navigation"
href="{$url('/')}"
expandedByDefault="{true}"
bind:isSideNavOpen
>
<div slot="skip-to-content">
<SkipToContent />
</div>
<span slot="platform" class="platform-name">
Carbon Components Svelte
<code>v{process.env.VERSION || ''}</code>
</span>
<HeaderUtilities>
<HeaderActionLink
icon="{LogoGithub20}"
href="https://github.com/IBM/carbon-components-svelte"
target="_blank"
/>
<HeaderAction transition="{false}" bind:isOpen>
<HeaderPanelLinks>
<HeaderPanelDivider>Carbon Svelte portfolio</HeaderPanelDivider>
<HeaderPanelLink href="https://github.com/IBM/carbon-icons-svelte">
Carbon Icons Svelte
</HeaderPanelLink>
<HeaderPanelLink
href="https://github.com/IBM/carbon-pictograms-svelte"
>
Carbon Pictograms Svelte
</HeaderPanelLink>
<HeaderPanelLink
href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte"
>
Carbon Charts Svelte
</HeaderPanelLink>
<HeaderPanelDivider>Resources</HeaderPanelDivider>
<HeaderPanelLink href="https://www.carbondesignsystem.com/">
Carbon Design System
</HeaderPanelLink>
<HeaderPanelLink href="https://www.ibm.com/design/language/">
IBM Design Language
</HeaderPanelLink>
</HeaderPanelLinks>
</HeaderAction>
</HeaderUtilities>
</Header>
<SideNav bind:isOpen="{isSideNavOpen}">
<SideNavItems>
<SideNavMenu
expanded="{$isActive($url('')) || $isActive($url('/components'))}"
text="Components"
>
{#each components.children as child, i (child.path)}
<SideNavMenuItem
text="{child.title}"
href="{$url(child.path)}"
isSelected="{$isActive($url(child.path))}"
/>
{/each}
</SideNavMenu>
<SideNavMenu expanded="{$isActive($url('/recipes'))}" text="Recipes">
{#each recipes.children as child, i (child.path)}
<SideNavMenuItem
text="{child.title}"
href="{$url(child.path)}"
isSelected="{$isActive($url(child.path))}"
/>
{/each}
</SideNavMenu>
</SideNavItems>
</SideNav>
<slot />
<Footer />
</Theme>

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

@ -29,7 +29,7 @@
open = !open; open = !open;
}}" }}"
> >
{open ? 'Collapse' : 'Expand'} {open ? "Collapse" : "Expand"}
all all
</Button> </Button>

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

@ -6,12 +6,6 @@
const code = Array.from({ length: 20 }, (_, i) => i + 1).join("\n"); const code = Array.from({ length: 20 }, (_, i) => i + 1).join("\n");
</script> </script>
<style>
.hidden {
display: none;
}
</style>
<ToggleSmall <ToggleSmall
style="margin-bottom: var(--cds-spacing-05)" style="margin-bottom: var(--cds-spacing-05)"
labelText="Show code snippets" labelText="Show code snippets"
@ -19,7 +13,8 @@
/> />
{#if toggled} {#if toggled}
<h5>"Show more" will not render</h5><br /> <h5>"Show more" will not render</h5>
<br />
{/if} {/if}
<div class:hidden="{!toggled}"> <div class:hidden="{!toggled}">
<CodeSnippet type="multi" code="{code}" /> <CodeSnippet type="multi" code="{code}" />
@ -27,8 +22,15 @@
{#if toggled} {#if toggled}
<br /><br /> <br /><br />
<h5>"Show more" will render</h5><br /> <h5>"Show more" will render</h5>
<br />
<div class:hidden="{!toggled}"> <div class:hidden="{!toggled}">
<CodeSnippet type="multi" code="{code}" /> <CodeSnippet type="multi" code="{code}" />
</div> </div>
{/if} {/if}
<style>
.hidden {
display: none;
}
</style>

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

@ -10,6 +10,10 @@
<ComboBox <ComboBox
titleText="Contact" titleText="Contact"
placeholder="Select contact method" 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' },
]}"
shouldFilterItem="{shouldFilterItem}" shouldFilterItem="{shouldFilterItem}"
/> />

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

@ -16,12 +16,6 @@
$: secondary = formatSelected(comboBox2_selectedIndex); $: secondary = formatSelected(comboBox2_selectedIndex);
</script> </script>
<style>
div {
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
}
</style>
<ComboBox <ComboBox
bind:selectedIndex="{comboBox1_selectedIndex}" bind:selectedIndex="{comboBox1_selectedIndex}"
titleText="Primary contact" titleText="Primary contact"
@ -39,3 +33,9 @@
/> />
<div>Secondary: {secondary}</div> <div>Secondary: {secondary}</div>
<style>
div {
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
}
</style>

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

@ -4,12 +4,6 @@
let selectedIndex = 1; let selectedIndex = 1;
</script> </script>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>
<ContentSwitcher bind:selectedIndex> <ContentSwitcher bind:selectedIndex>
<Switch text="Latest news" /> <Switch text="Latest news" />
<Switch text="Trending" /> <Switch text="Trending" />
@ -27,3 +21,9 @@
</div> </div>
<div>Selected index: {selectedIndex}</div> <div>Selected index: {selectedIndex}</div>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>

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

@ -24,7 +24,7 @@
<DataTable sortable headers="{headers}" rows="{rows}"> <DataTable sortable headers="{headers}" rows="{rows}">
<span slot="cell" let:cell> <span slot="cell" let:cell>
{#if cell.key === 'overflow'} {#if cell.key === "overflow"}
<OverflowMenu flipped> <OverflowMenu flipped>
<OverflowMenuItem text="Restart" /> <OverflowMenuItem text="Restart" />
<OverflowMenuItem <OverflowMenuItem

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

@ -16,12 +16,6 @@
$: secondary = formatSelected(dropdown2_selectedIndex); $: secondary = formatSelected(dropdown2_selectedIndex);
</script> </script>
<style>
div {
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
}
</style>
<Dropdown <Dropdown
titleText="Primary contact" titleText="Primary contact"
bind:selectedIndex="{dropdown1_selectedIndex}" bind:selectedIndex="{dropdown1_selectedIndex}"
@ -39,3 +33,9 @@
/> />
<div>Secondary: {secondary}</div> <div>Secondary: {secondary}</div>
<style>
div {
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
}
</style>

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

@ -42,7 +42,7 @@
> >
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>

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

@ -19,12 +19,6 @@
$: secondary = formatSelected(multiselect2_selectedIds); $: secondary = formatSelected(multiselect2_selectedIds);
</script> </script>
<style>
div {
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
}
</style>
<MultiSelect <MultiSelect
titleText="Primary contact" titleText="Primary contact"
bind:selectedIds="{multiselect1_selectedIds}" bind:selectedIds="{multiselect1_selectedIds}"
@ -42,3 +36,9 @@
/> />
<div>Secondary: {secondary}</div> <div>Secondary: {secondary}</div>
<style>
div {
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
}
</style>

2
docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte
View file

@ -19,7 +19,7 @@
</FormGroup> </FormGroup>
<ButtonSet> <ButtonSet>
{#each ['free', 'standard', 'pro'] as value} {#each ["free", "standard", "pro"] as value}
<Button <Button
on:click="{() => { on:click="{() => {
plan = value; plan = value;

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

@ -4,12 +4,6 @@
let value = ""; let value = "";
</script> </script>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>
<Search bind:value /> <Search bind:value />
<div> <div>
@ -33,3 +27,9 @@
</div> </div>
<div>Value: {value}</div> <div>Value: {value}</div>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>

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

@ -4,19 +4,19 @@
let toggled = true; let toggled = true;
</script> </script>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>
<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>
</div> </div>
<div>Toggled: {toggled}</div> <div>Toggled: {toggled}</div>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>

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

@ -4,20 +4,20 @@
let open = true; let open = true;
</script> </script>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>
<Tooltip bind:open triggerText="Resource list" align="start"> <Tooltip bind:open triggerText="Resource list" align="start">
<p>Resources are provisioned based on your account's organization.</p> <p>Resources are provisioned based on your account's organization.</p>
</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>
<div>Open: {open}</div> <div>Open: {open}</div>
<style>
div {
margin-top: var(--cds-spacing-05);
}
</style>

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

@ -13,6 +13,8 @@
$: document.documentElement.setAttribute("theme", currentTheme); $: document.documentElement.setAttribute("theme", currentTheme);
</script> </script>
<slot />
<style> <style>
:global(body.framed) { :global(body.framed) {
min-height: 100vh; min-height: 100vh;
@ -20,5 +22,3 @@
padding: var(--cds-spacing-06) var(--cds-spacing-05); padding: var(--cds-spacing-06) var(--cds-spacing-05);
} }
</style> </style>
<slot />

52
examples/sapper/src/components/Nav.svelte
View file

@ -2,6 +2,31 @@
export let segment; export let segment;
</script> </script>
<nav>
<ul>
<li>
<a aria-current="{segment === undefined ? 'page' : undefined}" href="."
>home</a
>
</li>
<li>
<a aria-current="{segment === 'about' ? 'page' : undefined}" href="about"
>about</a
>
</li>
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
the blog data when we hover over the link or tap it on a touchscreen -->
<li>
<a
rel="prefetch"
aria-current="{segment === 'blog' ? 'page' : undefined}"
href="blog">blog</a
>
</li>
</ul>
</nav>
<style> <style>
nav { nav {
border-bottom: 1px solid rgba(255, 62, 0, 0.1); border-bottom: 1px solid rgba(255, 62, 0, 0.1);
@ -47,30 +72,3 @@
display: block; display: block;
} }
</style> </style>
<nav>
<ul>
<li>
<a
aria-current="{segment === undefined ? 'page' : undefined}"
href="."
>home</a>
</li>
<li>
<a
aria-current="{segment === 'about' ? 'page' : undefined}"
href="about"
>about</a>
</li>
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
the blog data when we hover over the link or tap it on a touchscreen -->
<li>
<a
rel="prefetch"
aria-current="{segment === 'blog' ? 'page' : undefined}"
href="blog"
>blog</a>
</li>
</ul>
</nav>

8
examples/svite/src/App.svelte
View file

@ -13,10 +13,6 @@
let theme = "g10"; let theme = "g10";
</script> </script>
<style lang="scss" global>
@import "carbon-components-svelte/css/all";
</style>
<Theme persist bind:theme> <Theme persist bind:theme>
<Header /> <Header />
<Content style="background: none; padding: 1rem"> <Content style="background: none; padding: 1rem">
@ -90,3 +86,7 @@
</Grid> </Grid>
</Content> </Content>
</Theme> </Theme>
<style lang="scss" global>
@import "carbon-components-svelte/css/all";
</style>

4
package.json
View file

@ -33,8 +33,8 @@
"lint-staged": "^10.5.3", "lint-staged": "^10.5.3",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"postcss": "^8.2.4", "postcss": "^8.2.4",
"prettier": "^2.2.0", "prettier": "^2.2.1",
"prettier-plugin-svelte": "^1.4.1", "prettier-plugin-svelte": "^2.1.1",
"rollup": "^2.38.0", "rollup": "^2.38.0",
"rollup-plugin-svelte": "^7.1.0", "rollup-plugin-svelte": "^7.1.0",
"rollup-plugin-terser": "^7.0.2", "rollup-plugin-terser": "^7.0.2",

8
src/Breadcrumb/BreadcrumbItem.svelte
View file

@ -17,7 +17,8 @@
<li <li
class:bx--breadcrumb-item="{true}" class:bx--breadcrumb-item="{true}"
class:bx--breadcrumb-item--current="{isCurrentPage && $$restProps['aria-current'] !== 'page'}" class:bx--breadcrumb-item--current="{isCurrentPage &&
$$restProps['aria-current'] !== 'page'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
@ -30,7 +31,10 @@
</Link> </Link>
{:else} {:else}
<slot <slot
props="{{ 'aria-current': $$restProps['aria-current'], class: 'bx--link' }}" props="{{
'aria-current': $$restProps['aria-current'],
class: 'bx--link',
}}"
/> />
{/if} {/if}
</li> </li>

2
src/Button/ButtonSkeleton.svelte
View file

@ -33,7 +33,7 @@
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
{''} {""}
</a> </a>
{:else} {:else}
<div <div

4
src/Checkbox/CheckboxSkeleton.svelte
View file

@ -8,8 +8,6 @@
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
> >
<span <span class:bx--checkbox-label-text="{true}" class:bx--skeleton="{true}"
class:bx--checkbox-label-text="{true}"
class:bx--skeleton="{true}"
></span> ></span>
</div> </div>

3
src/Checkbox/InlineCheckbox.svelte
View file

@ -34,5 +34,4 @@
for="{id}" for="{id}"
title="{title}" title="{title}"
aria-label="{$$props['aria-label']}" aria-label="{$$props['aria-label']}"
class:bx--checkbox-label="{true}" class:bx--checkbox-label="{true}"></label>
></label>

17
src/CodeSnippet/CodeSnippet.svelte
View file

@ -104,7 +104,7 @@
on:mouseleave on:mouseleave
/> />
{:else} {:else}
{#if type === 'inline'} {#if type === "inline"}
{#if hideCopyButton} {#if hideCopyButton}
<span <span
class:bx--snippet="{true}" class:bx--snippet="{true}"
@ -128,11 +128,16 @@
feedback="{feedback}" feedback="{feedback}"
feedbackTimeout="{feedbackTimeout}" feedbackTimeout="{feedbackTimeout}"
class="bx--snippet {type && `bx--snippet--${type}`} class="bx--snippet {type && `bx--snippet--${type}`}
{type === 'inline' && 'bx--btn--copy'} {type ===
{expanded && 'bx--snippet--expand'} 'inline' && 'bx--btn--copy'}
{light && 'bx--snippet--light'} {expanded &&
{hideCopyButton && 'bx--snippet--no-copy'} 'bx--snippet--expand'}
{wrapText && 'bx--snippet--wraptext'}" {light &&
'bx--snippet--light'}
{hideCopyButton &&
'bx--snippet--no-copy'}
{wrapText &&
'bx--snippet--wraptext'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover

4
src/CodeSnippet/CodeSnippetSkeleton.svelte
View file

@ -18,8 +18,8 @@
on:mouseleave on:mouseleave
> >
<div class:bx--snippet-container="{true}"> <div class:bx--snippet-container="{true}">
{#if type === 'single'} {#if type === "single"}
<span></span> <span></span>
{:else if type === 'multi'}<span></span> <span></span> <span></span>{/if} {:else if type === "multi"}<span></span> <span></span> <span></span>{/if}
</div> </div>
</div> </div>

5
src/ComboBox/ComboBox.svelte
View file

@ -221,7 +221,10 @@
on:blur on:blur
on:blur="{({ relatedTarget }) => { on:blur="{({ relatedTarget }) => {
if (!open || !relatedTarget) return; if (!open || !relatedTarget) return;
if (relatedTarget.getAttribute('role') !== 'button' && relatedTarget.getAttribute('role') !== 'searchbox') { if (
relatedTarget.getAttribute('role') !== 'button' &&
relatedTarget.getAttribute('role') !== 'searchbox'
) {
ref.focus(); ref.focus();
} }
}}" }}"

2
src/Copy/Copy.svelte
View file

@ -45,7 +45,7 @@
}}" }}"
> >
<slot> <slot>
{#if animation}{feedback || $$restProps['aria-label']}{/if} {#if animation}{feedback || $$restProps["aria-label"]}{/if}
</slot> </slot>
<span <span
aria-hidden="true" aria-hidden="true"

36
src/DataTable/DataTable.svelte
View file

@ -252,7 +252,9 @@
on:click="{() => { on:click="{() => {
dispatch('click', { header }); dispatch('click', { header });
let active = header.key === $sortHeader.key; let active = header.key === $sortHeader.key;
let currentSortDirection = active ? $sortHeader.sortDirection : 'none'; let currentSortDirection = active
? $sortHeader.sortDirection
: 'none';
let sortDirection = sortDirectionMap[currentSortDirection]; let sortDirection = sortDirectionMap[currentSortDirection];
dispatch('click:header', { header, sortDirection }); dispatch('click:header', { header, sortDirection });
sortHeader.set({ sortHeader.set({
@ -273,7 +275,13 @@
{#each sorting ? sortedRows : rows as row, i (row.id)} {#each sorting ? sortedRows : rows as row, i (row.id)}
<TableRow <TableRow
id="row-{row.id}" id="row-{row.id}"
class="{selectedRowIds.includes(row.id) ? 'bx--data-table--selected' : ''} {expandedRows[row.id] ? 'bx--expandable-row' : ''} {expandable ? 'bx--parent-row' : ''} {expandable && parentRowId === row.id ? 'bx--expandable-row--hover' : ''}" class="{selectedRowIds.includes(row.id)
? 'bx--data-table--selected'
: ''} {expandedRows[row.id] ? 'bx--expandable-row' : ''} {expandable
? 'bx--parent-row'
: ''} {expandable && parentRowId === row.id
? 'bx--expandable-row--hover'
: ''}"
on:click="{() => { on:click="{() => {
dispatch('click', { row }); dispatch('click', { row });
dispatch('click:row', row); dispatch('click:row', row);
@ -289,16 +297,22 @@
<TableCell <TableCell
class="bx--table-expand" class="bx--table-expand"
headers="expand" headers="expand"
data-previous-value="{expandedRows[row.id] ? 'collapsed' : undefined}" data-previous-value="{expandedRows[row.id]
? 'collapsed'
: undefined}"
> >
<button <button
type="button" type="button"
class:bx--table-expand__button="{true}" class:bx--table-expand__button="{true}"
aria-label="{expandedRows[row.id] ? 'Collapse current row' : 'Expand current row'}" aria-label="{expandedRows[row.id]
? 'Collapse current row'
: 'Expand current row'}"
on:click="{() => { on:click="{() => {
const rowExpanded = !!expandedRows[row.id]; const rowExpanded = !!expandedRows[row.id];
expandedRowIds = rowExpanded ? expandedRowIds.filter((id) => id !== row.id) : [...expandedRowIds, row.id]; expandedRowIds = rowExpanded
? expandedRowIds.filter((id) => id !== row.id)
: [...expandedRowIds, row.id];
dispatch('click:row--expand', { dispatch('click:row--expand', {
row, row,
@ -329,7 +343,9 @@
checked="{selectedRowIds.includes(row.id)}" checked="{selectedRowIds.includes(row.id)}"
on:change="{() => { on:change="{() => {
if (selectedRowIds.includes(row.id)) { if (selectedRowIds.includes(row.id)) {
selectedRowIds = selectedRowIds.filter((id) => id !== row.id); selectedRowIds = selectedRowIds.filter(
(id) => id !== row.id
);
} else { } else {
selectedRowIds = [...selectedRowIds, row.id]; selectedRowIds = [...selectedRowIds, row.id];
} }
@ -342,7 +358,9 @@
{#if headers[j].empty} {#if headers[j].empty}
<td class:bx--table-column-menu="{headers[j].columnMenu}"> <td class:bx--table-column-menu="{headers[j].columnMenu}">
<slot name="cell" row="{row}" cell="{cell}"> <slot name="cell" row="{row}" cell="{cell}">
{headers[j].display ? headers[j].display(cell.value) : cell.value} {headers[j].display
? headers[j].display(cell.value)
: cell.value}
</slot> </slot>
</td> </td>
{:else} {:else}
@ -353,7 +371,9 @@
}}" }}"
> >
<slot name="cell" row="{row}" cell="{cell}"> <slot name="cell" row="{row}" cell="{cell}">
{headers[j].display ? headers[j].display(cell.value) : cell.value} {headers[j].display
? headers[j].display(cell.value)
: cell.value}
</slot> </slot>
</TableCell> </TableCell>
{/if} {/if}

5
src/DataTable/DataTableSkeleton.svelte
View file

@ -58,8 +58,7 @@
<span <span
class:bx--skeleton="{true}" class:bx--skeleton="{true}"
class:bx--btn="{true}" class:bx--btn="{true}"
class:bx--btn--sm="{true}" class:bx--btn--sm="{true}"></span>
></span>
</div> </div>
</section> </section>
{/if} {/if}
@ -78,7 +77,7 @@
<thead> <thead>
<tr> <tr>
{#each cols as col (col)} {#each cols as col (col)}
<th>{values[col] || ''}</th> <th>{values[col] || ""}</th>
{/each} {/each}
</tr> </tr>
</thead> </thead>

3
src/DataTable/TableHeader.svelte
View file

@ -37,7 +37,8 @@
<button <button
class:bx--table-sort="{true}" class:bx--table-sort="{true}"
class:bx--table-sort--active="{active}" class:bx--table-sort--active="{active}"
class:bx--table-sort--ascending="{active && $sortHeader.sortDirection === 'descending'}" class:bx--table-sort--ascending="{active &&
$sortHeader.sortDirection === 'descending'}"
on:click on:click
> >
<div class:bx--table-header-label="{true}"> <div class:bx--table-header-label="{true}">

7
src/DatePicker/DatePicker.svelte
View file

@ -188,8 +188,11 @@
class:bx--date-picker="{true}" class:bx--date-picker="{true}"
class:bx--date-picker--short="{short}" class:bx--date-picker--short="{short}"
class:bx--date-picker--light="{light}" class:bx--date-picker--light="{light}"
class="{datePickerType && `bx--date-picker--${datePickerType}`} class="{datePickerType &&
{datePickerType === 'range' && $labelTextEmpty && 'bx--date-picker--nolabel'}" `bx--date-picker--${datePickerType}`}
{datePickerType === 'range' &&
$labelTextEmpty &&
'bx--date-picker--nolabel'}"
> >
<slot /> <slot />
</div> </div>

16
src/Dropdown/Dropdown.svelte
View file

@ -155,11 +155,17 @@
id="{id}" id="{id}"
name="{name}" name="{name}"
aria-label="{$$props['aria-label']}" aria-label="{$$props['aria-label']}"
class="bx--dropdown {invalid && 'bx--dropdown--invalid'} {!invalid && warn && 'bx--dropdown--warning'} {open && 'bx--dropdown--open'} class="bx--dropdown {invalid && 'bx--dropdown--invalid'} {!invalid &&
{size === 'sm' && 'bx--dropdown--sm'} warn &&
{size === 'xl' && 'bx--dropdown--xl'} 'bx--dropdown--warning'} {open && 'bx--dropdown--open'}
{inline && 'bx--dropdown--inline'} {size ===
{disabled && 'bx--dropdown--disabled'} 'sm' && 'bx--dropdown--sm'}
{size === 'xl' &&
'bx--dropdown--xl'}
{inline &&
'bx--dropdown--inline'}
{disabled &&
'bx--dropdown--disabled'}
{light && 'bx--dropdown--light'}" {light && 'bx--dropdown--light'}"
on:click="{({ target }) => { on:click="{({ target }) => {
open = ref.contains(target) ? !open : false; open = ref.contains(target) ? !open : false;

6
src/FileUploader/Filename.svelte
View file

@ -17,7 +17,7 @@
import { Loading } from "../Loading"; import { Loading } from "../Loading";
</script> </script>
{#if status === 'uploading'} {#if status === "uploading"}
<Loading <Loading
description="{iconDescription}" description="{iconDescription}"
{...$$restProps} {...$$restProps}
@ -26,7 +26,7 @@
/> />
{/if} {/if}
{#if status === 'edit'} {#if status === "edit"}
{#if invalid} {#if invalid}
<WarningFilled16 class="bx--file-invalid" /> <WarningFilled16 class="bx--file-invalid" />
{/if} {/if}
@ -40,7 +40,7 @@
/> />
{/if} {/if}
{#if status === 'complete'} {#if status === "complete"}
<CheckmarkFilled16 <CheckmarkFilled16
aria-label="{iconDescription}" aria-label="{iconDescription}"
title="{iconDescription}" title="{iconDescription}"

6
src/InlineLoading/InlineLoading.svelte
View file

@ -54,11 +54,11 @@
on:mouseleave on:mouseleave
> >
<div class:bx--inline-loading__animation="{true}"> <div class:bx--inline-loading__animation="{true}">
{#if status === 'error'} {#if status === "error"}
<Error20 class="bx--inline-loading--error" /> <Error20 class="bx--inline-loading--error" />
{:else if status === 'finished'} {:else if status === "finished"}
<CheckmarkFilled16 class="bx--inline-loading__checkmark-container" /> <CheckmarkFilled16 class="bx--inline-loading__checkmark-container" />
{:else if status === 'inactive' || status === 'active'} {:else if status === "inactive" || status === "active"}
<Loading <Loading
small small
description="{iconDescription}" description="{iconDescription}"

4
src/ListBox/ListBoxField.svelte
View file

@ -50,7 +50,9 @@
aria-owns="{(ariaExpanded && menuId) || undefined}" aria-owns="{(ariaExpanded && menuId) || undefined}"
aria-controls="{(ariaExpanded && menuId) || undefined}" aria-controls="{(ariaExpanded && menuId) || undefined}"
aria-disabled="{disabled}" aria-disabled="{disabled}"
aria-label="{ariaExpanded ? translateWithId('close') : translateWithId('open')}" aria-label="{ariaExpanded
? translateWithId('close')
: translateWithId('open')}"
tabindex="{disabled ? '-1' : tabindex}" tabindex="{disabled ? '-1' : tabindex}"
class:bx--list-box__field="{true}" class:bx--list-box__field="{true}"
{...$$restProps} {...$$restProps}

12
src/Loading/Loading.svelte
View file

@ -40,15 +40,13 @@
class:bx--loading__background="{true}" class:bx--loading__background="{true}"
cx="50%" cx="50%"
cy="50%" cy="50%"
r="{spinnerRadius}" r="{spinnerRadius}"></circle>
></circle>
{/if} {/if}
<circle <circle
class:bx--loading__stroke="{true}" class:bx--loading__stroke="{true}"
cx="50%" cx="50%"
cy="50%" cy="50%"
r="{spinnerRadius}" r="{spinnerRadius}"></circle>
></circle>
</svg> </svg>
</div> </div>
</div> </div>
@ -71,15 +69,13 @@
class:bx--loading__background="{true}" class:bx--loading__background="{true}"
cx="50%" cx="50%"
cy="50%" cy="50%"
r="{spinnerRadius}" r="{spinnerRadius}"></circle>
></circle>
{/if} {/if}
<circle <circle
class:bx--loading__stroke="{true}" class:bx--loading__stroke="{true}"
cx="50%" cx="50%"
cy="50%" cy="50%"
r="{spinnerRadius}" r="{spinnerRadius}"></circle>
></circle>
</svg> </svg>
</div> </div>
{/if} {/if}

25
src/MultiSelect/MultiSelect.svelte
View file

@ -253,10 +253,14 @@
warn="{warn}" warn="{warn}"
warnText="{warnText}" warnText="{warnText}"
class="bx--multi-select {filterable && 'bx--combo-box'} class="bx--multi-select {filterable && 'bx--combo-box'}
{filterable && 'bx--multi-select--filterable'} {filterable &&
{invalid && 'bx--multi-select--invalid'} 'bx--multi-select--filterable'}
{inline && 'bx--multi-select--inline'} {invalid &&
{checked.length > 0 && 'bx--multi-select--selected'}" 'bx--multi-select--invalid'}
{inline &&
'bx--multi-select--inline'}
{checked.length > 0 &&
'bx--multi-select--selected'}"
> >
{#if invalid} {#if invalid}
<WarningFilled16 class="bx--list-box__invalid-icon" /> <WarningFilled16 class="bx--list-box__invalid-icon" />
@ -298,7 +302,9 @@
change(-1); change(-1);
} else if (key === 'Enter') { } else if (key === 'Enter') {
if (highlightedIndex > -1) { if (highlightedIndex > -1) {
sortedItems[highlightedIndex].checked = !sortedItems[highlightedIndex].checked; sortedItems[highlightedIndex].checked = !sortedItems[
highlightedIndex
].checked;
} }
} }
}}" }}"
@ -347,7 +353,9 @@
on:keydown|stopPropagation="{({ key }) => { on:keydown|stopPropagation="{({ key }) => {
if (key === 'Enter') { if (key === 'Enter') {
if (highlightedIndex > -1) { if (highlightedIndex > -1) {
sortedItems[highlightedIndex].checked = !sortedItems[highlightedIndex].checked; sortedItems[highlightedIndex].checked = !sortedItems[
highlightedIndex
].checked;
} }
} else if (key === 'Tab') { } else if (key === 'Tab') {
open = false; open = false;
@ -360,7 +368,10 @@
on:focus on:focus
on:blur on:blur
on:blur="{({ relatedTarget }) => { on:blur="{({ relatedTarget }) => {
if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') { if (
relatedTarget &&
relatedTarget.getAttribute('role') !== 'button'
) {
inputRef.focus(); inputRef.focus();
} }
}}" }}"

4
src/Notification/NotificationTextDetails.svelte
View file

@ -15,7 +15,7 @@
export let caption = "Caption"; export let caption = "Caption";
</script> </script>
{#if notificationType === 'toast'} {#if notificationType === "toast"}
<div class:bx--toast-notification__details="{true}"> <div class:bx--toast-notification__details="{true}">
<h3 class:bx--toast-notification__title="{true}">{title}</h3> <h3 class:bx--toast-notification__title="{true}">{title}</h3>
<div class:bx--toast-notification__subtitle="{true}">{subtitle}</div> <div class:bx--toast-notification__subtitle="{true}">{subtitle}</div>
@ -24,7 +24,7 @@
</div> </div>
{/if} {/if}
{#if notificationType === 'inline'} {#if notificationType === "inline"}
<div class:bx--inline-notification__text-wrapper="{true}"> <div class:bx--inline-notification__text-wrapper="{true}">
<p class:bx--inline-notification__title="{true}">{title}</p> <p class:bx--inline-notification__title="{true}">{title}</p>
<div class:bx--inline-notification__subtitle="{true}">{subtitle}</div> <div class:bx--inline-notification__subtitle="{true}">{subtitle}</div>

14
src/Pagination/Pagination.svelte
View file

@ -121,7 +121,11 @@
{#if pagesUnknown} {#if pagesUnknown}
{itemText(pageSize * (page - 1) + 1, page * pageSize)} {itemText(pageSize * (page - 1) + 1, page * pageSize)}
{:else} {:else}
{itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems)} {itemRangeText(
Math.min(pageSize * (page - 1) + 1, totalItems),
Math.min(page * pageSize, totalItems),
totalItems
)}
{/if} {/if}
</span> </span>
</div> </div>
@ -153,7 +157,9 @@
icon="{CaretLeft16}" icon="{CaretLeft16}"
iconDescription="{backwardText}" iconDescription="{backwardText}"
disabled="{backButtonDisabled}" disabled="{backButtonDisabled}"
class="bx--pagination__button bx--pagination__button--backward {backButtonDisabled ? 'bx--pagination__button--no-index' : ''}" class="bx--pagination__button bx--pagination__button--backward {backButtonDisabled
? 'bx--pagination__button--no-index'
: ''}"
on:click="{() => { on:click="{() => {
page--; page--;
}}" }}"
@ -166,7 +172,9 @@
icon="{CaretRight16}" icon="{CaretRight16}"
iconDescription="{forwardText}" iconDescription="{forwardText}"
disabled="{forwardButtonDisabled}" disabled="{forwardButtonDisabled}"
class="bx--pagination__button bx--pagination__button--forward {forwardButtonDisabled ? 'bx--pagination__button--no-index' : ''}" class="bx--pagination__button bx--pagination__button--forward {forwardButtonDisabled
? 'bx--pagination__button--no-index'
: ''}"
on:click="{() => { on:click="{() => {
page++; page++;
}}" }}"

6
src/PaginationNav/PaginationNav.svelte
View file

@ -94,7 +94,7 @@
active="{page === 0}" active="{page === 0}"
on:click="{() => (page = 0)}" on:click="{() => (page = 0)}"
> >
{page === 0 ? 'Active, Page' : 'Page'} {page === 0 ? "Active, Page" : "Page"}
</PaginationItem> </PaginationItem>
{/if} {/if}
<PaginationOverflow <PaginationOverflow
@ -108,7 +108,7 @@
active="{page === item}" active="{page === item}"
on:click="{() => (page = item)}" on:click="{() => (page = item)}"
> >
{page === item ? 'Active, Page' : 'Page'} {page === item ? "Active, Page" : "Page"}
</PaginationItem> </PaginationItem>
{/each} {/each}
<PaginationOverflow <PaginationOverflow
@ -124,7 +124,7 @@
active="{page === total - 1}" active="{page === total - 1}"
on:click="{() => (page = total - 1)}" on:click="{() => (page = total - 1)}"
> >
{page === total - 1 ? 'Active, Page' : 'Page'} {page === total - 1 ? "Active, Page" : "Page"}
</PaginationItem> </PaginationItem>
{/if} {/if}
<li class:bx--pagination-nav__list-item="{true}"> <li class:bx--pagination-nav__list-item="{true}">

4
src/RadioButton/RadioButtonSkeleton.svelte
View file

@ -7,8 +7,6 @@
on:mouseleave on:mouseleave
> >
<div class:bx--radio-button="{true}" class:bx--skeleton="{true}"></div> <div class:bx--radio-button="{true}" class:bx--skeleton="{true}"></div>
<span <span class:bx--radio-button__label="{true}" class:bx--skeleton="{true}"
class:bx--radio-button__label="{true}"
class:bx--skeleton="{true}"
></span> ></span>
</div> </div>

10
src/Slider/Slider.svelte
View file

@ -151,9 +151,15 @@
on:mousedown="{startHolding}" on:mousedown="{startHolding}"
on:touchstart="{startHolding}" on:touchstart="{startHolding}"
on:keydown="{({ shiftKey, key }) => { on:keydown="{({ shiftKey, key }) => {
const keys = { ArrowDown: -1, ArrowLeft: -1, ArrowRight: 1, ArrowUp: 1 }; const keys = {
ArrowDown: -1,
ArrowLeft: -1,
ArrowRight: 1,
ArrowUp: 1,
};
if (keys[key]) { if (keys[key]) {
value += step * (shiftKey ? range / step / stepMultiplier : 1) * keys[key]; value +=
step * (shiftKey ? range / step / stepMultiplier : 1) * keys[key];
} }
}}" }}"
> >

3
src/Tag/TagSkeleton.svelte
View file

@ -5,5 +5,4 @@
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave></span>
></span>

3
src/TextArea/TextArea.svelte
View file

@ -94,8 +94,7 @@
value = target.value; value = target.value;
}}" }}"
on:focus on:focus
on:blur on:blur></textarea>
></textarea>
</div> </div>
{#if !invalid && helperText} {#if !invalid && helperText}
<div <div

10
src/TextInput/PasswordInput.svelte
View file

@ -143,20 +143,22 @@
class:bx--btn--disabled="{disabled}" class:bx--btn--disabled="{disabled}"
class:bx--tooltip__trigger="{true}" class:bx--tooltip__trigger="{true}"
class:bx--tooltip--a11y="{true}" class:bx--tooltip--a11y="{true}"
class="{tooltipPosition && `bx--tooltip--${tooltipPosition}`} class="{tooltipPosition &&
{tooltipAlignment && `bx--tooltip--align-${tooltipAlignment}`}" `bx--tooltip--${tooltipPosition}`}
{tooltipAlignment &&
`bx--tooltip--align-${tooltipAlignment}`}"
on:click="{() => { on:click="{() => {
type = type === 'password' ? 'text' : 'password'; type = type === 'password' ? 'text' : 'password';
}}" }}"
> >
{#if !disabled} {#if !disabled}
<span class:bx--assistive-text="{true}"> <span class:bx--assistive-text="{true}">
{#if type === 'text'} {#if type === "text"}
{hidePasswordLabel} {hidePasswordLabel}
{:else}{showPasswordLabel}{/if} {:else}{showPasswordLabel}{/if}
</span> </span>
{/if} {/if}
{#if type === 'text'} {#if type === "text"}
<ViewOff16 class="bx--icon-visibility-off" /> <ViewOff16 class="bx--icon-visibility-off" />
{:else} {:else}
<View16 class="bx--icon-visibility-on" /> <View16 class="bx--icon-visibility-on" />

4
src/Tile/ExpandableTile.svelte
View file

@ -63,7 +63,9 @@
class:bx--tile--is-expanded="{expanded}" class:bx--tile--is-expanded="{expanded}"
class:bx--tile--light="{light}" class:bx--tile--light="{light}"
{...$$restProps} {...$$restProps}
style="{expanded ? $$restProps.style : `${$$restProps.style}; max-height: ${tileMaxHeight + tilePadding}px`}" style="{expanded
? $$restProps.style
: `${$$restProps.style}; max-height: ${tileMaxHeight + tilePadding}px`}"
on:click on:click
on:click="{() => { on:click="{() => {
expanded = !expanded; expanded = !expanded;

7
src/Toggle/Toggle.svelte
View file

@ -70,10 +70,9 @@
<span aria-hidden="true" class:bx--toggle__text--off="{true}"> <span aria-hidden="true" class:bx--toggle__text--off="{true}">
{labelA} {labelA}
</span> </span>
<span <span aria-hidden="true" class:bx--toggle__text--on="{true}"
aria-hidden="true" >{labelB}</span
class:bx--toggle__text--on="{true}" >
>{labelB}</span>
</span> </span>
</label> </label>
</div> </div>

4
src/Toggle/ToggleSkeleton.svelte
View file

@ -28,7 +28,9 @@
class:bx--skeleton="{true}" class:bx--skeleton="{true}"
/> />
<label <label
aria-label="{labelText ? undefined : $$props['aria-label'] || 'Toggle is loading'}" aria-label="{labelText
? undefined
: $$props['aria-label'] || 'Toggle is loading'}"
for="{id}" for="{id}"
class:bx--toggle__label="{true}" class:bx--toggle__label="{true}"
class:bx--skeleton="{true}" class:bx--skeleton="{true}"

7
src/ToggleSmall/ToggleSmall.svelte
View file

@ -78,10 +78,9 @@
<span aria-hidden="true" class:bx--toggle__text--off="{true}"> <span aria-hidden="true" class:bx--toggle__text--off="{true}">
{labelA} {labelA}
</span> </span>
<span <span aria-hidden="true" class:bx--toggle__text--on="{true}"
aria-hidden="true" >{labelB}</span
class:bx--toggle__text--on="{true}" >
>{labelB}</span>
</span> </span>
</label> </label>
</div> </div>

4
src/ToggleSmall/ToggleSmallSkeleton.svelte
View file

@ -28,7 +28,9 @@
class:bx--skeleton="{true}" class:bx--skeleton="{true}"
/> />
<label <label
aria-label="{labelText ? undefined : $$props['aria-label'] || 'Toggle is loading'}" aria-label="{labelText
? undefined
: $$props['aria-label'] || 'Toggle is loading'}"
class:bx--toggle__label="{true}" class:bx--toggle__label="{true}"
class:bx--skeleton="{true}" class:bx--skeleton="{true}"
for="{id}" for="{id}"

37
src/UIShell/GlobalHeader/HeaderAction.svelte
View file

@ -40,22 +40,6 @@
let refPanel = null; let refPanel = null;
</script> </script>
<style>
.action-text {
font-size: 16px;
line-height: 20px;
text-decoration: none;
color: #fff;
width: 100%;
padding: 0 1rem;
}
.action-text > span {
margin-left: 0.75rem;
vertical-align: top;
}
</style>
<svelte:window <svelte:window
on:click="{({ target }) => { on:click="{({ target }) => {
if (isOpen && !ref.contains(target) && !refPanel.contains(target)) { if (isOpen && !ref.contains(target) && !refPanel.contains(target)) {
@ -89,9 +73,28 @@
bind:this="{refPanel}" bind:this="{refPanel}"
class:bx--header-panel="{true}" class:bx--header-panel="{true}"
class:bx--header-panel--expanded="{true}" class:bx--header-panel--expanded="{true}"
transition:slide="{{ ...transition, duration: transition === false ? 0 : transition.duration }}" transition:slide="{{
...transition,
duration: transition === false ? 0 : transition.duration,
}}"
> >
<slot /> <slot />
</div> </div>
{/if} {/if}
</div> </div>
<style>
.action-text {
font-size: 16px;
line-height: 20px;
text-decoration: none;
color: #fff;
width: 100%;
padding: 0 1rem;
}
.action-text > span {
margin-left: 0.75rem;
vertical-align: top;
}
</style>

20
src/UIShell/GlobalHeader/HeaderActionLink.svelte
View file

@ -20,16 +20,6 @@
import Icon from "../../Icon/Icon.svelte"; import Icon from "../../Icon/Icon.svelte";
</script> </script>
<style>
.action-link {
text-align: center;
align-items: center;
vertical-align: middle;
justify-content: center;
padding-top: 10px;
}
</style>
<a <a
bind:this="{ref}" bind:this="{ref}"
class:bx--header__action="{true}" class:bx--header__action="{true}"
@ -41,3 +31,13 @@
> >
<Icon render="{icon}" /> <Icon render="{icon}" />
</a> </a>
<style>
.action-link {
text-align: center;
align-items: center;
vertical-align: middle;
justify-content: center;
padding-top: 10px;
}
</style>

162
src/UIShell/GlobalHeader/HeaderActionSearch.svelte
View file

@ -54,6 +54,87 @@
$: showResults = $searchStore ? true : false; $: showResults = $searchStore ? true : false;
</script> </script>
<svelte:window
on:mouseup="{({ target }) => {
if (target && elTypeSearch) {
if (!elTypeSearch.contains(target)) {
searchIsActive = false;
isSearchFocus = false;
}
}
}}"
/>
<div
bind:this="{elTypeSearch}"
role="search"
class="search-wrapper"
class:search-wrapper-hidden="{!searchIsActive}"
class:search-focus="{isSearchFocus || searchIsActive}"
>
<div
id="right-panel-action-search"
class="search-wrapper-2"
role="combobox"
aria-expanded="{searchIsActive}"
>
<button
tabindex="{searchTabIndex}"
aria-label="Search"
class:bx--header__action="{true}"
class:btn-search="{true}"
class:btn-search-disabled="{searchIsActive}"
on:click="{() => {
isSearchFocus = true;
searchIsActive = true;
dispatch('focusInputSearch');
}}"
type="button"
on:keydown="{({ key }) => {
if (key === 'Enter') {
searchIsActive = !searchIsActive;
}
}}"
>
<Icon title="Search" tabindex="0" render="{Search20}" />
</button>
<input
bind:this="{elInput}"
id="input-search-field"
type="text"
autocomplete="off"
tabindex="{closeTabIndex}"
class="input-search"
class:input-hidden="{!searchIsActive}"
placeholder="Search"
on:focus="{() => dispatch('focusInputSearch')}"
on:focusout="{() => dispatch('focusOutInputSearch')}"
on:input="{dispatchInputs}"
/>
<button
id="right-panel-close-search"
tabindex="{closeTabIndex}"
class:bx--header__action="{true}"
class:btn-clear="{true}"
class:btn-clear-hidden="{!searchIsActive}"
type="button"
aria-label="Clear search"
on:click="{() => {
isSearchFocus = false;
searchIsActive = false;
searchStore.clear();
}}"
on:keydown="{({ key }) => {
if (key === 'Enter') {
searchIsActive = !searchIsActive;
}
}}"
>
<Icon title="Close" tabindex="0" render="{Close20}" />
</button>
</div>
</div>
<style> <style>
.search-wrapper { .search-wrapper {
position: relative; position: relative;
@ -140,84 +221,3 @@
display: none; display: none;
} }
</style> </style>
<svelte:window
on:mouseup="{({ target }) => {
if (target && elTypeSearch) {
if (!elTypeSearch.contains(target)) {
searchIsActive = false;
isSearchFocus = false;
}
}
}}"
/>
<div
bind:this="{elTypeSearch}"
role="search"
class="search-wrapper"
class:search-wrapper-hidden="{!searchIsActive}"
class:search-focus="{isSearchFocus || searchIsActive}"
>
<div
id="right-panel-action-search"
class="search-wrapper-2"
role="combobox"
aria-expanded="{searchIsActive}"
>
<button
tabindex="{searchTabIndex}"
aria-label="Search"
class:bx--header__action="{true}"
class:btn-search="{true}"
class:btn-search-disabled="{searchIsActive}"
on:click="{() => {
isSearchFocus = true;
searchIsActive = true;
dispatch('focusInputSearch');
}}"
type="button"
on:keydown="{({ key }) => {
if (key === 'Enter') {
searchIsActive = !searchIsActive;
}
}}"
>
<Icon title="Search" tabindex="0" render="{Search20}" />
</button>
<input
bind:this="{elInput}"
id="input-search-field"
type="text"
autocomplete="off"
tabindex="{closeTabIndex}"
class="input-search"
class:input-hidden="{!searchIsActive}"
placeholder="Search"
on:focus="{() => dispatch('focusInputSearch')}"
on:focusout="{() => dispatch('focusOutInputSearch')}"
on:input="{dispatchInputs}"
/>
<button
id="right-panel-close-search"
tabindex="{closeTabIndex}"
class:bx--header__action="{true}"
class:btn-clear="{true}"
class:btn-clear-hidden="{!searchIsActive}"
type="button"
aria-label="Clear search"
on:click="{() => {
isSearchFocus = false;
searchIsActive = false;
searchStore.clear();
}}"
on:keydown="{({ key }) => {
if (key === 'Enter') {
searchIsActive = !searchIsActive;
}
}}"
>
<Icon title="Close" tabindex="0" render="{Close20}" />
</button>
</div>
</div>

12
src/UIShell/GlobalHeader/HeaderPanelDivider.svelte
View file

@ -1,3 +1,9 @@
<li class="subject-divider">
<span>
<slot />
</span>
</li>
<style> <style>
.subject-divider { .subject-divider {
color: #525252; color: #525252;
@ -14,9 +20,3 @@
color: #c6c6c6; color: #c6c6c6;
} }
</style> </style>
<li class="subject-divider">
<span>
<slot />
</span>
</li>

206
src/UIShell/HeaderSearch.svelte
View file

@ -53,6 +53,109 @@
: undefined; : undefined;
</script> </script>
<svelte:window
on:mouseup="{({ target }) => {
if (active && !refSearch.contains(target)) active = false;
}}"
/>
<div bind:this="{refSearch}" role="search" class:active>
<label for="search-input" id="search-label">Search</label>
<div role="combobox" aria-expanded="{active}">
<button
type="button"
aria-label="Search"
tabindex="{active ? '-1' : '0'}"
class:bx--header__action="{true}"
class:disabled="{active}"
on:click="{() => {
active = true;
}}"
>
<Search20 title="Search" />
</button>
<input
bind:this="{ref}"
type="text"
autocomplete="off"
placeholder="Search..."
tabindex="{active ? '0' : '-1'}"
class:active
{...$$restProps}
id="search-input"
aria-activedescendant="{selectedId}"
bind:value
on:change
on:input
on:focus
on:blur
on:keydown
on:keydown="{(e) => {
switch (e.key) {
case 'Enter':
selectResult();
break;
case 'ArrowDown':
e.preventDefault();
if (selectedResultIndex === results.length - 1) {
selectedResultIndex = 0;
} else {
selectedResultIndex += 1;
}
break;
case 'ArrowUp':
e.preventDefault();
if (selectedResultIndex === 0) {
selectedResultIndex = results.length - 1;
} else {
selectedResultIndex -= 1;
}
break;
}
}}"
/>
<button
type="button"
aria-label="Clear search"
tabindex="{active ? '0' : '-1'}"
class:bx--header__action="{true}"
class:hidden="{!active}"
on:click="{() => {
reset();
dispatch('clear');
}}"
>
<Close20 title="Close" />
</button>
</div>
{#if active && results.length > 0}
<ul aria-labelledby="search-label" role="menu" id="search-menu">
{#each results as result, i}
<li>
<a
tabindex="-1"
id="search-menuitem-{i}"
role="menuitem"
href="{result.href}"
class:selected="{selectedId === `search-menuitem-${i}`}"
on:click|preventDefault="{async () => {
selectedResultIndex = i;
await tick();
selectResult();
}}"
>
<slot result="{result}" index="{i}">
{result.text}
{#if result.description}<span>– {result.description}</span>{/if}
</slot>
</a>
</li>
{/each}
</ul>
{/if}
</div>
<style> <style>
label { label {
position: absolute; position: absolute;
@ -185,106 +288,3 @@
color: #c6c6c6; color: #c6c6c6;
} }
</style> </style>
<svelte:window
on:mouseup="{({ target }) => {
if (active && !refSearch.contains(target)) active = false;
}}"
/>
<div bind:this="{refSearch}" role="search" class:active>
<label for="search-input" id="search-label">Search</label>
<div role="combobox" aria-expanded="{active}">
<button
type="button"
aria-label="Search"
tabindex="{active ? '-1' : '0'}"
class:bx--header__action="{true}"
class:disabled="{active}"
on:click="{() => {
active = true;
}}"
>
<Search20 title="Search" />
</button>
<input
bind:this="{ref}"
type="text"
autocomplete="off"
placeholder="Search..."
tabindex="{active ? '0' : '-1'}"
class:active
{...$$restProps}
id="search-input"
aria-activedescendant="{selectedId}"
bind:value
on:change
on:input
on:focus
on:blur
on:keydown
on:keydown="{(e) => {
switch (e.key) {
case 'Enter':
selectResult();
break;
case 'ArrowDown':
e.preventDefault();
if (selectedResultIndex === results.length - 1) {
selectedResultIndex = 0;
} else {
selectedResultIndex += 1;
}
break;
case 'ArrowUp':
e.preventDefault();
if (selectedResultIndex === 0) {
selectedResultIndex = results.length - 1;
} else {
selectedResultIndex -= 1;
}
break;
}
}}"
/>
<button
type="button"
aria-label="Clear search"
tabindex="{active ? '0' : '-1'}"
class:bx--header__action="{true}"
class:hidden="{!active}"
on:click="{() => {
reset();
dispatch('clear');
}}"
>
<Close20 title="Close" />
</button>
</div>
{#if active && results.length > 0}
<ul aria-labelledby="search-label" role="menu" id="search-menu">
{#each results as result, i}
<li>
<a
tabindex="-1"
id="search-menuitem-{i}"
role="menuitem"
href="{result.href}"
class:selected="{selectedId === `search-menuitem-${i}`}"
on:click|preventDefault="{async () => {
selectedResultIndex = i;
await tick();
selectResult();
}}"
>
<slot result="{result}" index="{i}">
{result.text}
{#if result.description}<span>– {result.description}</span>{/if}
</slot>
</a>
</li>
{/each}
</ul>
{/if}
</div>

75
tests/DataTable.test.svelte
View file

@ -73,13 +73,13 @@
<DataTable headers="{headers}" rows="{rows}"> <DataTable headers="{headers}" rows="{rows}">
<span slot="cell-header" let:header> <span slot="cell-header" let:header>
{#if header.key === 'port'} {#if header.key === "port"}
{header.value} {header.value}
(network) (network)
{:else}{header.value}{/if} {:else}{header.value}{/if}
</span> </span>
<span slot="cell" let:cell> <span slot="cell" let:cell>
{#if cell.key === 'rule' && cell.value === 'Round robin'} {#if cell.key === "rule" && cell.value === "Round robin"}
<Link <Link
inline inline
href="https://en.wikipedia.org/wiki/Round-robin_DNS" href="https://en.wikipedia.org/wiki/Round-robin_DNS"
@ -156,8 +156,68 @@
sortable sortable
title="Load balancers" title="Load balancers"
description="Your organization's active load balancers." description="Your organization's active load balancers."
headers="{[{ key: 'name', value: 'Name' }, { key: 'protocol', value: 'Protocol' }, { key: 'port', value: 'Port' }, { key: 'cost', value: 'Cost', display: (cost) => cost + ' €' }, { key: 'expireDate', value: 'Expire date', display: (date) => new Date(date).toLocaleString(), sort }]}" headers="{[
rows="{[{ id: 'a', name: 'Load Balancer 3', protocol: 'HTTP', port: 3000, cost: 100, expireDate: '2020-10-21' }, { id: 'b', name: 'Load Balancer 1', protocol: 'HTTP', port: 443, cost: 200, expireDate: '2020-09-10' }, { id: 'c', name: 'Load Balancer 2', protocol: 'HTTP', port: 80, cost: 150, expireDate: '2020-11-24' }, { id: 'd', name: 'Load Balancer 6', protocol: 'HTTP', port: 3000, cost: 250, expireDate: '2020-12-01' }, { id: 'e', name: 'Load Balancer 4', protocol: 'HTTP', port: 443, cost: 550, expireDate: '2021-03-21' }, { id: 'f', name: 'Load Balancer 5', protocol: 'HTTP', port: 80, cost: 400, expireDate: '2020-11-14' }]}" { key: 'name', value: 'Name' },
{ key: 'protocol', value: 'Protocol' },
{ key: 'port', value: 'Port' },
{ key: 'cost', value: 'Cost', display: (cost) => cost + ' €' },
{
key: 'expireDate',
value: 'Expire date',
display: (date) => new Date(date).toLocaleString(),
sort,
},
]}"
rows="{[
{
id: 'a',
name: 'Load Balancer 3',
protocol: 'HTTP',
port: 3000,
cost: 100,
expireDate: '2020-10-21',
},
{
id: 'b',
name: 'Load Balancer 1',
protocol: 'HTTP',
port: 443,
cost: 200,
expireDate: '2020-09-10',
},
{
id: 'c',
name: 'Load Balancer 2',
protocol: 'HTTP',
port: 80,
cost: 150,
expireDate: '2020-11-24',
},
{
id: 'd',
name: 'Load Balancer 6',
protocol: 'HTTP',
port: 3000,
cost: 250,
expireDate: '2020-12-01',
},
{
id: 'e',
name: 'Load Balancer 4',
protocol: 'HTTP',
port: 443,
cost: 550,
expireDate: '2021-03-21',
},
{
id: 'f',
name: 'Load Balancer 5',
protocol: 'HTTP',
port: 80,
cost: 400,
expireDate: '2020-11-14',
},
]}"
/> />
<DataTable expandable headers="{headers}" rows="{rows}"> <DataTable expandable headers="{headers}" rows="{rows}">
@ -184,7 +244,12 @@
/> />
<DataTableSkeleton <DataTableSkeleton
headers="{[{ value: 'Name' }, { value: 'Protocol' }, { value: 'Port' }, { value: 'Rule' }]}" headers="{[
{ value: 'Name' },
{ value: 'Protocol' },
{ value: 'Port' },
{ value: 'Rule' },
]}"
rows="{10}" rows="{10}"
/> />

2
tests/DataTableAppendColumns.test.svelte
View file

@ -20,7 +20,7 @@
<DataTable sortable headers="{headers}" rows="{rows}"> <DataTable sortable headers="{headers}" rows="{rows}">
<span slot="cell" let:cell> <span slot="cell" let:cell>
{#if cell.key === 'overflow'} {#if cell.key === "overflow"}
<OverflowMenu flipped> <OverflowMenu flipped>
<OverflowMenuItem text="Restart" /> <OverflowMenuItem text="Restart" />
<OverflowMenuItem <OverflowMenuItem

42
tests/Dropdown.test.svelte
View file

@ -5,7 +5,11 @@
<Dropdown <Dropdown
titleText="Contact" titleText="Contact"
selectedIndex="{0}" selectedIndex="{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' },
]}"
/> />
<Dropdown <Dropdown
@ -14,42 +18,66 @@
}}" }}"
titleText="Contact" titleText="Contact"
selectedIndex="{0}" selectedIndex="{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' },
]}"
/> />
<Dropdown <Dropdown
light light
titleText="Contact" titleText="Contact"
selectedIndex="{0}" selectedIndex="{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' },
]}"
/> />
<Dropdown <Dropdown
type="inline" type="inline"
titleText="Contact" titleText="Contact"
selectedIndex="{0}" selectedIndex="{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' },
]}"
/> />
<Dropdown <Dropdown
size="xl" size="xl"
titleText="Contact" titleText="Contact"
selectedIndex="{0}" selectedIndex="{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' },
]}"
/> />
<Dropdown <Dropdown
size="sm" size="sm"
titleText="Contact" titleText="Contact"
selectedIndex="{0}" selectedIndex="{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' },
]}"
/> />
<Dropdown <Dropdown
disabled disabled
titleText="Contact" titleText="Contact"
selectedIndex="{0}" selectedIndex="{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' },
]}"
/> />
<DropdownSkeleton /> <DropdownSkeleton />

6
tests/FilterableComboBox.test.svelte
View file

@ -10,6 +10,10 @@
<ComboBox <ComboBox
titleText="Contact" titleText="Contact"
placeholder="Select contact method" 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' },
]}"
shouldFilterItem="{shouldFilterItem}" shouldFilterItem="{shouldFilterItem}"
/> />

18
tests/HiddenCodeSnippet.test.svelte
View file

@ -6,12 +6,6 @@
const code = Array.from({ length: 20 }, (_, i) => i + 1).join("\n"); const code = Array.from({ length: 20 }, (_, i) => i + 1).join("\n");
</script> </script>
<style>
.hidden {
display: none;
}
</style>
<ToggleSmall <ToggleSmall
style="margin-bottom: var(--cds-spacing-05)" style="margin-bottom: var(--cds-spacing-05)"
labelText="Show code snippets" labelText="Show code snippets"
@ -19,7 +13,8 @@
/> />
{#if toggled} {#if toggled}
<h5>"Show more" will not render</h5><br /> <h5>"Show more" will not render</h5>
<br />
{/if} {/if}
<div class:hidden="{!toggled}"> <div class:hidden="{!toggled}">
<CodeSnippet type="multi" code="{code}" /> <CodeSnippet type="multi" code="{code}" />
@ -27,8 +22,15 @@
{#if toggled} {#if toggled}
<br /><br /> <br /><br />
<h5>"Show more" will render</h5><br /> <h5>"Show more" will render</h5>
<br />
<div class:hidden="{!toggled}"> <div class:hidden="{!toggled}">
<CodeSnippet type="multi" code="{code}" /> <CodeSnippet type="multi" code="{code}" />
</div> </div>
{/if} {/if}
<style>
.hidden {
display: none;
}
</style>

2
tests/InlineLoadingUx.test.svelte
View file

@ -44,7 +44,7 @@
> >
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>

54
tests/MultiSelect.test.svelte
View file

@ -5,13 +5,21 @@
<MultiSelect <MultiSelect
titleText="Contact" titleText="Contact"
label="Select contact methods..." 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' },
]}"
/> />
<MultiSelect <MultiSelect
titleText="Contact" titleText="Contact"
label="Select contact methods..." 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' },
]}"
sortItem="{() => {}}" sortItem="{() => {}}"
/> />
@ -19,7 +27,11 @@
selectedIds="{['0', '1']}" selectedIds="{['0', '1']}"
titleText="Contact" titleText="Contact"
label="Select contact methods..." 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' },
]}"
/> />
<MultiSelect <MultiSelect
@ -28,7 +40,11 @@
}}" }}"
titleText="Contact" titleText="Contact"
label="Select contact methods..." 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' },
]}"
sortItem="{() => {}}" sortItem="{() => {}}"
/> />
@ -36,33 +52,53 @@
light light
titleText="Contact" titleText="Contact"
label="Select contact methods..." 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' },
]}"
/> />
<MultiSelect <MultiSelect
type="inline" type="inline"
titleText="Contact" titleText="Contact"
label="Select contact methods..." 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' },
]}"
/> />
<MultiSelect <MultiSelect
size="xl" size="xl"
titleText="Contact" titleText="Contact"
label="Select contact methods..." 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' },
]}"
/> />
<MultiSelect <MultiSelect
size="sm" size="sm"
titleText="Contact" titleText="Contact"
label="Select contact methods..." 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' },
]}"
/> />
<MultiSelect <MultiSelect
filterable filterable
titleText="Contact" titleText="Contact"
placeholder="Filter contact methods..." placeholder="Filter 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' },
]}"
/> />

2
tests/StructuredList.test.svelte
View file

@ -59,7 +59,7 @@
<StructuredListCell head>ColumnA</StructuredListCell> <StructuredListCell head>ColumnA</StructuredListCell>
<StructuredListCell head>ColumnB</StructuredListCell> <StructuredListCell head>ColumnB</StructuredListCell>
<StructuredListCell head>ColumnC</StructuredListCell> <StructuredListCell head>ColumnC</StructuredListCell>
<StructuredListCell head>{''}</StructuredListCell> <StructuredListCell head>{""}</StructuredListCell>
</StructuredListRow> </StructuredListRow>
</StructuredListHead> </StructuredListHead>
<StructuredListBody> <StructuredListBody>

13
yarn.lock
View file

@ -1923,16 +1923,21 @@ prepend-http@^1.0.0:
resolved "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" resolved "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
prettier-plugin-svelte@^1.4.1: prettier-plugin-svelte@^2.1.1:
version "1.4.1" version "2.1.1"
resolved "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-1.4.1.tgz#2f0f7a149190f476dc9b4ba9da8d482bd196f1e2" resolved "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.1.1.tgz#e6613cac4292b5bbda5250680565c131b0da5ced"
integrity sha512-6y0m37Xw01GRf/WIHau+Kp3uXj2JB1agtEmNVKb9opMy34A6OMOYhfneVpNIlrghQSw/jIV+t3e5Ngt4up2CMA== integrity sha512-U0gRsdJtveyusHd86OUPD+lEVd13bHPPF/CZD/csKjz0Y+Cv4WbUy9x8tA5vaHFtf0tsu8Yb1MrfuhN3GH2gig==
prettier@^2.2.0: prettier@^2.2.0:
version "2.2.0" version "2.2.0"
resolved "https://registry.npmjs.org/prettier/-/prettier-2.2.0.tgz#8a03c7777883b29b37fb2c4348c66a78e980418b" resolved "https://registry.npmjs.org/prettier/-/prettier-2.2.0.tgz#8a03c7777883b29b37fb2c4348c66a78e980418b"
integrity sha512-yYerpkvseM4iKD/BXLYUkQV5aKt4tQPqaGW6EsZjzyu0r7sVZZNPJW4Y8MyKmicp6t42XUPcBVA+H6sB3gqndw== integrity sha512-yYerpkvseM4iKD/BXLYUkQV5aKt4tQPqaGW6EsZjzyu0r7sVZZNPJW4Y8MyKmicp6t42XUPcBVA+H6sB3gqndw==
prettier@^2.2.1:
version "2.2.1"
resolved "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
process-nextick-args@~2.0.0: process-nextick-args@~2.0.0:
version "2.0.1" version "2.0.1"
resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2" resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"