mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
chore(deps-dev): upgrade prettier-plugin-svelte (#498)
This commit is contained in:
Eric Liu
GitHub
parent
3e7511e3f8
commit
3d002f3246
72 changed files with 944 additions and 733 deletions
|
|
@ -155,7 +155,8 @@ Using JavaScript:
|
|||
$: document.documentElement.setAttribute("theme", theme);
|
||||
</script>
|
||||
|
||||
<button on:click="{() => theme = 'g90'}">Update theme</button>
|
||||
<button on:click="{() => (theme = 'g90')}">Update theme</button>
|
||||
|
||||
```
|
||||
|
||||
### TypeScript support
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
import { routes } from "../.routify/routes";
|
||||
</script>
|
||||
|
||||
<Router routes="{routes}" />
|
||||
|
||||
<style lang="scss" global>
|
||||
@import "@carbon/themes/scss/themes";
|
||||
|
||||
|
|
@ -42,5 +44,3 @@
|
|||
@import "carbon-components/scss/globals/grid/_grid.scss";
|
||||
@import "carbon-components/scss/globals/scss/styles.scss";
|
||||
</style>
|
||||
|
||||
<Router routes="{routes}" />
|
||||
|
|
|
|||
|
|
@ -39,29 +39,6 @@
|
|||
);
|
||||
</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)">
|
||||
Component source code:
|
||||
<Link inline size="lg" href="{source}" target="_blank">
|
||||
|
|
@ -101,12 +78,12 @@
|
|||
{/if}
|
||||
</StructuredListCell>
|
||||
<StructuredListCell>
|
||||
{#each prop.type.split(' | ') as type, i (type)}
|
||||
{#each prop.type.split(" | ") as type, i (type)}
|
||||
<div
|
||||
class="cell"
|
||||
style="z-index: {prop.type.split(' | ').length - i}"
|
||||
>
|
||||
{#if type.startsWith('typeof')}
|
||||
{#if type.startsWith("typeof")}
|
||||
<TooltipDefinition
|
||||
direction="top"
|
||||
align="start"
|
||||
|
|
@ -114,7 +91,7 @@
|
|||
>
|
||||
Carbon Svelte icon
|
||||
</TooltipDefinition>
|
||||
{:else if type.startsWith('HTML')}
|
||||
{:else if type.startsWith("HTML")}
|
||||
<Link
|
||||
href="{mdn_api}{type}"
|
||||
target="_blank"
|
||||
|
|
@ -125,7 +102,7 @@
|
|||
</Link>
|
||||
{:else if type in typeMap}
|
||||
<code>{typeMap[type]}</code>
|
||||
{:else if type.startsWith('(')}
|
||||
{:else if type.startsWith("(")}
|
||||
<code>{type}</code>
|
||||
{:else}
|
||||
<InlineSnippet code="{type}" />
|
||||
|
|
@ -136,12 +113,12 @@
|
|||
<StructuredListCell><code>{prop.value}</code></StructuredListCell>
|
||||
<StructuredListCell>
|
||||
{#if prop.description}
|
||||
{#each prop.description.split('\n') as line}
|
||||
{#each prop.description.split("\n") as line}
|
||||
<div class="description">
|
||||
{@html line
|
||||
.replace(/\</g, '<')
|
||||
.replace(/\>/g, '>')
|
||||
.replace(/`(.*?)`/g, '<code>$1</code>')}.
|
||||
.replace(/\</g, "<")
|
||||
.replace(/\>/g, ">")
|
||||
.replace(/`(.*?)`/g, "<code>$1</code>")}.
|
||||
</div>
|
||||
{/each}
|
||||
{:else}
|
||||
|
|
@ -160,7 +137,7 @@
|
|||
{#if component.slots.length > 0}
|
||||
<UnorderedList class="my-layout-01-03">
|
||||
{#each component.slots as slot (slot.name)}
|
||||
<ListItem>{slot.default ? 'default' : slot.name}</ListItem>
|
||||
<ListItem>{slot.default ? "default" : slot.name}</ListItem>
|
||||
{/each}
|
||||
</UnorderedList>
|
||||
{:else}
|
||||
|
|
@ -198,9 +175,32 @@
|
|||
spreads
|
||||
<code>$$restProps</code>
|
||||
to the
|
||||
{#if component.rest_props.type === 'Element'}
|
||||
{#if component.rest_props.type === "Element"}
|
||||
<code>{component.rest_props.name}</code>
|
||||
element.
|
||||
{:else}<code>{component.rest_props.name}</code> component.{/if}
|
||||
{:else}This component does not spread <code>restProps</code>{/if}
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -2,12 +2,6 @@
|
|||
import { Content, Grid, Row, Column, Link } from "carbon-components-svelte";
|
||||
</script>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
background: var(--cds-ui-01);
|
||||
}
|
||||
</style>
|
||||
|
||||
<footer class="bx--content">
|
||||
<Grid>
|
||||
<Row>
|
||||
|
|
@ -26,3 +20,9 @@
|
|||
</Row>
|
||||
</Grid>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
background: var(--cds-ui-01);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,12 +5,6 @@
|
|||
import copy from "clipboard-copy";
|
||||
</script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin-bottom: var(--cds-spacing-04);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<CodeSnippet
|
||||
code="{code}"
|
||||
|
|
@ -20,3 +14,9 @@
|
|||
}}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin-bottom: var(--cds-spacing-04);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,40 @@
|
|||
$: themedSrcUrl = $url(`${src}?theme=${$theme}`);
|
||||
</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>
|
||||
.preview {
|
||||
margin-bottom: var(--cds-layout-04);
|
||||
|
|
@ -130,37 +164,3 @@
|
|||
height: 100%;
|
||||
}
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,33 @@
|
|||
$: tileComponent = href ? ClickableTile : Tile;
|
||||
</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>
|
||||
.card-wrapper {
|
||||
border-right: 1px solid transparent;
|
||||
|
|
@ -56,30 +83,3 @@
|
|||
}
|
||||
}
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -48,71 +48,6 @@
|
|||
}`;
|
||||
</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>
|
||||
<Grid>
|
||||
<Row>
|
||||
|
|
@ -208,3 +143,68 @@
|
|||
</div>
|
||||
</Column>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -24,6 +24,46 @@
|
|||
});
|
||||
</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>
|
||||
#select-theme {
|
||||
width: auto;
|
||||
|
|
@ -82,43 +122,3 @@
|
|||
}
|
||||
}
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -34,6 +34,88 @@
|
|||
});
|
||||
</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>
|
||||
.body-short-01 {
|
||||
font-size: var(--cds-body-short-01-font-size);
|
||||
|
|
@ -160,85 +242,3 @@
|
|||
max-height: 120rem;
|
||||
}
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
open = !open;
|
||||
}}"
|
||||
>
|
||||
{open ? 'Collapse' : 'Expand'}
|
||||
{open ? "Collapse" : "Expand"}
|
||||
all
|
||||
</Button>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,12 +6,6 @@
|
|||
const code = Array.from({ length: 20 }, (_, i) => i + 1).join("\n");
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ToggleSmall
|
||||
style="margin-bottom: var(--cds-spacing-05)"
|
||||
labelText="Show code snippets"
|
||||
|
|
@ -19,7 +13,8 @@
|
|||
/>
|
||||
|
||||
{#if toggled}
|
||||
<h5>"Show more" will not render</h5><br />
|
||||
<h5>"Show more" will not render</h5>
|
||||
<br />
|
||||
{/if}
|
||||
<div class:hidden="{!toggled}">
|
||||
<CodeSnippet type="multi" code="{code}" />
|
||||
|
|
@ -27,8 +22,15 @@
|
|||
|
||||
{#if toggled}
|
||||
<br /><br />
|
||||
<h5>"Show more" will render</h5><br />
|
||||
<h5>"Show more" will render</h5>
|
||||
<br />
|
||||
<div class:hidden="{!toggled}">
|
||||
<CodeSnippet type="multi" code="{code}" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,10 @@
|
|||
<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' },
|
||||
]}"
|
||||
shouldFilterItem="{shouldFilterItem}"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -16,12 +16,6 @@
|
|||
$: secondary = formatSelected(comboBox2_selectedIndex);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
|
||||
}
|
||||
</style>
|
||||
|
||||
<ComboBox
|
||||
bind:selectedIndex="{comboBox1_selectedIndex}"
|
||||
titleText="Primary contact"
|
||||
|
|
@ -39,3 +33,9 @@
|
|||
/>
|
||||
|
||||
<div>Secondary: {secondary}</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,12 +4,6 @@
|
|||
let selectedIndex = 1;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
||||
<ContentSwitcher bind:selectedIndex>
|
||||
<Switch text="Latest news" />
|
||||
<Switch text="Trending" />
|
||||
|
|
@ -27,3 +21,9 @@
|
|||
</div>
|
||||
|
||||
<div>Selected index: {selectedIndex}</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
|
||||
<DataTable sortable headers="{headers}" rows="{rows}">
|
||||
<span slot="cell" let:cell>
|
||||
{#if cell.key === 'overflow'}
|
||||
{#if cell.key === "overflow"}
|
||||
<OverflowMenu flipped>
|
||||
<OverflowMenuItem text="Restart" />
|
||||
<OverflowMenuItem
|
||||
|
|
|
|||
|
|
@ -16,12 +16,6 @@
|
|||
$: secondary = formatSelected(dropdown2_selectedIndex);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
|
||||
}
|
||||
</style>
|
||||
|
||||
<Dropdown
|
||||
titleText="Primary contact"
|
||||
bind:selectedIndex="{dropdown1_selectedIndex}"
|
||||
|
|
@ -39,3 +33,9 @@
|
|||
/>
|
||||
|
||||
<div>Secondary: {secondary}</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
>
|
||||
Cancel
|
||||
</Button>
|
||||
{#if state !== 'dormant'}
|
||||
{#if state !== "dormant"}
|
||||
<InlineLoading status="{state}" description="{descriptionMap[state]}" />
|
||||
{:else}
|
||||
<Button on:click="{() => (state = 'active')}">Submit</Button>
|
||||
|
|
|
|||
|
|
@ -19,12 +19,6 @@
|
|||
$: secondary = formatSelected(multiselect2_selectedIds);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
|
||||
}
|
||||
</style>
|
||||
|
||||
<MultiSelect
|
||||
titleText="Primary contact"
|
||||
bind:selectedIds="{multiselect1_selectedIds}"
|
||||
|
|
@ -42,3 +36,9 @@
|
|||
/>
|
||||
|
||||
<div>Secondary: {secondary}</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</FormGroup>
|
||||
|
||||
<ButtonSet>
|
||||
{#each ['free', 'standard', 'pro'] as value}
|
||||
{#each ["free", "standard", "pro"] as value}
|
||||
<Button
|
||||
on:click="{() => {
|
||||
plan = value;
|
||||
|
|
|
|||
|
|
@ -4,12 +4,6 @@
|
|||
let value = "";
|
||||
</script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
||||
<Search bind:value />
|
||||
|
||||
<div>
|
||||
|
|
@ -33,3 +27,9 @@
|
|||
</div>
|
||||
|
||||
<div>Value: {value}</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,19 +4,19 @@
|
|||
let toggled = true;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
||||
<Toggle labelText="Push notifications" bind:toggled />
|
||||
|
||||
<div>
|
||||
<Button size="small" on:click="{() => (toggled = !toggled)}">
|
||||
Toggle
|
||||
{toggled ? 'off' : 'on'}
|
||||
{toggled ? "off" : "on"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div>Toggled: {toggled}</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,20 +4,20 @@
|
|||
let open = true;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
||||
<Tooltip bind:open triggerText="Resource list" align="start">
|
||||
<p>Resources are provisioned based on your account's organization.</p>
|
||||
</Tooltip>
|
||||
|
||||
<div style="margin-top: var(--cds-spacing-12);">
|
||||
<Button size="small" on:click="{() => (open = !open)}">
|
||||
{open ? 'Close tooltip' : 'Open tooltip'}
|
||||
{open ? "Close tooltip" : "Open tooltip"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div>Open: {open}</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,8 @@
|
|||
$: document.documentElement.setAttribute("theme", currentTheme);
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
|
||||
<style>
|
||||
:global(body.framed) {
|
||||
min-height: 100vh;
|
||||
|
|
@ -20,5 +22,3 @@
|
|||
padding: var(--cds-spacing-06) var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -2,6 +2,31 @@
|
|||
export let segment;
|
||||
</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>
|
||||
nav {
|
||||
border-bottom: 1px solid rgba(255, 62, 0, 0.1);
|
||||
|
|
@ -47,30 +72,3 @@
|
|||
display: block;
|
||||
}
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -13,10 +13,6 @@
|
|||
let theme = "g10";
|
||||
</script>
|
||||
|
||||
<style lang="scss" global>
|
||||
@import "carbon-components-svelte/css/all";
|
||||
</style>
|
||||
|
||||
<Theme persist bind:theme>
|
||||
<Header />
|
||||
<Content style="background: none; padding: 1rem">
|
||||
|
|
@ -90,3 +86,7 @@
|
|||
</Grid>
|
||||
</Content>
|
||||
</Theme>
|
||||
|
||||
<style lang="scss" global>
|
||||
@import "carbon-components-svelte/css/all";
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -33,8 +33,8 @@
|
|||
"lint-staged": "^10.5.3",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.2.4",
|
||||
"prettier": "^2.2.0",
|
||||
"prettier-plugin-svelte": "^1.4.1",
|
||||
"prettier": "^2.2.1",
|
||||
"prettier-plugin-svelte": "^2.1.1",
|
||||
"rollup": "^2.38.0",
|
||||
"rollup-plugin-svelte": "^7.1.0",
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
|
|
|
|||
|
|
@ -17,7 +17,8 @@
|
|||
|
||||
<li
|
||||
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}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
@ -30,7 +31,10 @@
|
|||
</Link>
|
||||
{:else}
|
||||
<slot
|
||||
props="{{ 'aria-current': $$restProps['aria-current'], class: 'bx--link' }}"
|
||||
props="{{
|
||||
'aria-current': $$restProps['aria-current'],
|
||||
class: 'bx--link',
|
||||
}}"
|
||||
/>
|
||||
{/if}
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
{''}
|
||||
{""}
|
||||
</a>
|
||||
{:else}
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -8,8 +8,6 @@
|
|||
on:mouseenter
|
||||
on:mouseleave
|
||||
>
|
||||
<span
|
||||
class:bx--checkbox-label-text="{true}"
|
||||
class:bx--skeleton="{true}"
|
||||
<span class:bx--checkbox-label-text="{true}" class:bx--skeleton="{true}"
|
||||
></span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -34,5 +34,4 @@
|
|||
for="{id}"
|
||||
title="{title}"
|
||||
aria-label="{$$props['aria-label']}"
|
||||
class:bx--checkbox-label="{true}"
|
||||
></label>
|
||||
class:bx--checkbox-label="{true}"></label>
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@
|
|||
on:mouseleave
|
||||
/>
|
||||
{:else}
|
||||
{#if type === 'inline'}
|
||||
{#if type === "inline"}
|
||||
{#if hideCopyButton}
|
||||
<span
|
||||
class:bx--snippet="{true}"
|
||||
|
|
@ -128,11 +128,16 @@
|
|||
feedback="{feedback}"
|
||||
feedbackTimeout="{feedbackTimeout}"
|
||||
class="bx--snippet {type && `bx--snippet--${type}`}
|
||||
{type === 'inline' && 'bx--btn--copy'}
|
||||
{expanded && 'bx--snippet--expand'}
|
||||
{light && 'bx--snippet--light'}
|
||||
{hideCopyButton && 'bx--snippet--no-copy'}
|
||||
{wrapText && 'bx--snippet--wraptext'}"
|
||||
{type ===
|
||||
'inline' && 'bx--btn--copy'}
|
||||
{expanded &&
|
||||
'bx--snippet--expand'}
|
||||
{light &&
|
||||
'bx--snippet--light'}
|
||||
{hideCopyButton &&
|
||||
'bx--snippet--no-copy'}
|
||||
{wrapText &&
|
||||
'bx--snippet--wraptext'}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@
|
|||
on:mouseleave
|
||||
>
|
||||
<div class:bx--snippet-container="{true}">
|
||||
{#if type === 'single'}
|
||||
{#if type === "single"}
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -221,7 +221,10 @@
|
|||
on:blur
|
||||
on:blur="{({ relatedTarget }) => {
|
||||
if (!open || !relatedTarget) return;
|
||||
if (relatedTarget.getAttribute('role') !== 'button' && relatedTarget.getAttribute('role') !== 'searchbox') {
|
||||
if (
|
||||
relatedTarget.getAttribute('role') !== 'button' &&
|
||||
relatedTarget.getAttribute('role') !== 'searchbox'
|
||||
) {
|
||||
ref.focus();
|
||||
}
|
||||
}}"
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
}}"
|
||||
>
|
||||
<slot>
|
||||
{#if animation}{feedback || $$restProps['aria-label']}{/if}
|
||||
{#if animation}{feedback || $$restProps["aria-label"]}{/if}
|
||||
</slot>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
|
|
|
|||
|
|
@ -252,7 +252,9 @@
|
|||
on:click="{() => {
|
||||
dispatch('click', { header });
|
||||
let active = header.key === $sortHeader.key;
|
||||
let currentSortDirection = active ? $sortHeader.sortDirection : 'none';
|
||||
let currentSortDirection = active
|
||||
? $sortHeader.sortDirection
|
||||
: 'none';
|
||||
let sortDirection = sortDirectionMap[currentSortDirection];
|
||||
dispatch('click:header', { header, sortDirection });
|
||||
sortHeader.set({
|
||||
|
|
@ -273,7 +275,13 @@
|
|||
{#each sorting ? sortedRows : rows as row, i (row.id)}
|
||||
<TableRow
|
||||
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="{() => {
|
||||
dispatch('click', { row });
|
||||
dispatch('click:row', row);
|
||||
|
|
@ -289,16 +297,22 @@
|
|||
<TableCell
|
||||
class="bx--table-expand"
|
||||
headers="expand"
|
||||
data-previous-value="{expandedRows[row.id] ? 'collapsed' : undefined}"
|
||||
data-previous-value="{expandedRows[row.id]
|
||||
? 'collapsed'
|
||||
: undefined}"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
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="{() => {
|
||||
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', {
|
||||
row,
|
||||
|
|
@ -329,7 +343,9 @@
|
|||
checked="{selectedRowIds.includes(row.id)}"
|
||||
on:change="{() => {
|
||||
if (selectedRowIds.includes(row.id)) {
|
||||
selectedRowIds = selectedRowIds.filter((id) => id !== row.id);
|
||||
selectedRowIds = selectedRowIds.filter(
|
||||
(id) => id !== row.id
|
||||
);
|
||||
} else {
|
||||
selectedRowIds = [...selectedRowIds, row.id];
|
||||
}
|
||||
|
|
@ -342,7 +358,9 @@
|
|||
{#if headers[j].empty}
|
||||
<td class:bx--table-column-menu="{headers[j].columnMenu}">
|
||||
<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>
|
||||
</td>
|
||||
{:else}
|
||||
|
|
@ -353,7 +371,9 @@
|
|||
}}"
|
||||
>
|
||||
<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>
|
||||
</TableCell>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -58,8 +58,7 @@
|
|||
<span
|
||||
class:bx--skeleton="{true}"
|
||||
class:bx--btn="{true}"
|
||||
class:bx--btn--sm="{true}"
|
||||
></span>
|
||||
class:bx--btn--sm="{true}"></span>
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
|
@ -78,7 +77,7 @@
|
|||
<thead>
|
||||
<tr>
|
||||
{#each cols as col (col)}
|
||||
<th>{values[col] || ''}</th>
|
||||
<th>{values[col] || ""}</th>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,8 @@
|
|||
<button
|
||||
class:bx--table-sort="{true}"
|
||||
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
|
||||
>
|
||||
<div class:bx--table-header-label="{true}">
|
||||
|
|
|
|||
|
|
@ -188,8 +188,11 @@
|
|||
class:bx--date-picker="{true}"
|
||||
class:bx--date-picker--short="{short}"
|
||||
class:bx--date-picker--light="{light}"
|
||||
class="{datePickerType && `bx--date-picker--${datePickerType}`}
|
||||
{datePickerType === 'range' && $labelTextEmpty && 'bx--date-picker--nolabel'}"
|
||||
class="{datePickerType &&
|
||||
`bx--date-picker--${datePickerType}`}
|
||||
{datePickerType === 'range' &&
|
||||
$labelTextEmpty &&
|
||||
'bx--date-picker--nolabel'}"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -155,11 +155,17 @@
|
|||
id="{id}"
|
||||
name="{name}"
|
||||
aria-label="{$$props['aria-label']}"
|
||||
class="bx--dropdown {invalid && 'bx--dropdown--invalid'} {!invalid && warn && 'bx--dropdown--warning'} {open && 'bx--dropdown--open'}
|
||||
{size === 'sm' && 'bx--dropdown--sm'}
|
||||
{size === 'xl' && 'bx--dropdown--xl'}
|
||||
{inline && 'bx--dropdown--inline'}
|
||||
{disabled && 'bx--dropdown--disabled'}
|
||||
class="bx--dropdown {invalid && 'bx--dropdown--invalid'} {!invalid &&
|
||||
warn &&
|
||||
'bx--dropdown--warning'} {open && 'bx--dropdown--open'}
|
||||
{size ===
|
||||
'sm' && 'bx--dropdown--sm'}
|
||||
{size === 'xl' &&
|
||||
'bx--dropdown--xl'}
|
||||
{inline &&
|
||||
'bx--dropdown--inline'}
|
||||
{disabled &&
|
||||
'bx--dropdown--disabled'}
|
||||
{light && 'bx--dropdown--light'}"
|
||||
on:click="{({ target }) => {
|
||||
open = ref.contains(target) ? !open : false;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
import { Loading } from "../Loading";
|
||||
</script>
|
||||
|
||||
{#if status === 'uploading'}
|
||||
{#if status === "uploading"}
|
||||
<Loading
|
||||
description="{iconDescription}"
|
||||
{...$$restProps}
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
/>
|
||||
{/if}
|
||||
|
||||
{#if status === 'edit'}
|
||||
{#if status === "edit"}
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--file-invalid" />
|
||||
{/if}
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
/>
|
||||
{/if}
|
||||
|
||||
{#if status === 'complete'}
|
||||
{#if status === "complete"}
|
||||
<CheckmarkFilled16
|
||||
aria-label="{iconDescription}"
|
||||
title="{iconDescription}"
|
||||
|
|
|
|||
|
|
@ -54,11 +54,11 @@
|
|||
on:mouseleave
|
||||
>
|
||||
<div class:bx--inline-loading__animation="{true}">
|
||||
{#if status === 'error'}
|
||||
{#if status === "error"}
|
||||
<Error20 class="bx--inline-loading--error" />
|
||||
{:else if status === 'finished'}
|
||||
{:else if status === "finished"}
|
||||
<CheckmarkFilled16 class="bx--inline-loading__checkmark-container" />
|
||||
{:else if status === 'inactive' || status === 'active'}
|
||||
{:else if status === "inactive" || status === "active"}
|
||||
<Loading
|
||||
small
|
||||
description="{iconDescription}"
|
||||
|
|
|
|||
|
|
@ -50,7 +50,9 @@
|
|||
aria-owns="{(ariaExpanded && menuId) || undefined}"
|
||||
aria-controls="{(ariaExpanded && menuId) || undefined}"
|
||||
aria-disabled="{disabled}"
|
||||
aria-label="{ariaExpanded ? translateWithId('close') : translateWithId('open')}"
|
||||
aria-label="{ariaExpanded
|
||||
? translateWithId('close')
|
||||
: translateWithId('open')}"
|
||||
tabindex="{disabled ? '-1' : tabindex}"
|
||||
class:bx--list-box__field="{true}"
|
||||
{...$$restProps}
|
||||
|
|
|
|||
|
|
@ -40,15 +40,13 @@
|
|||
class:bx--loading__background="{true}"
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
r="{spinnerRadius}"
|
||||
></circle>
|
||||
r="{spinnerRadius}"></circle>
|
||||
{/if}
|
||||
<circle
|
||||
class:bx--loading__stroke="{true}"
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
r="{spinnerRadius}"
|
||||
></circle>
|
||||
r="{spinnerRadius}"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -71,15 +69,13 @@
|
|||
class:bx--loading__background="{true}"
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
r="{spinnerRadius}"
|
||||
></circle>
|
||||
r="{spinnerRadius}"></circle>
|
||||
{/if}
|
||||
<circle
|
||||
class:bx--loading__stroke="{true}"
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
r="{spinnerRadius}"
|
||||
></circle>
|
||||
r="{spinnerRadius}"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -253,10 +253,14 @@
|
|||
warn="{warn}"
|
||||
warnText="{warnText}"
|
||||
class="bx--multi-select {filterable && 'bx--combo-box'}
|
||||
{filterable && 'bx--multi-select--filterable'}
|
||||
{invalid && 'bx--multi-select--invalid'}
|
||||
{inline && 'bx--multi-select--inline'}
|
||||
{checked.length > 0 && 'bx--multi-select--selected'}"
|
||||
{filterable &&
|
||||
'bx--multi-select--filterable'}
|
||||
{invalid &&
|
||||
'bx--multi-select--invalid'}
|
||||
{inline &&
|
||||
'bx--multi-select--inline'}
|
||||
{checked.length > 0 &&
|
||||
'bx--multi-select--selected'}"
|
||||
>
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--list-box__invalid-icon" />
|
||||
|
|
@ -298,7 +302,9 @@
|
|||
change(-1);
|
||||
} else if (key === 'Enter') {
|
||||
if (highlightedIndex > -1) {
|
||||
sortedItems[highlightedIndex].checked = !sortedItems[highlightedIndex].checked;
|
||||
sortedItems[highlightedIndex].checked = !sortedItems[
|
||||
highlightedIndex
|
||||
].checked;
|
||||
}
|
||||
}
|
||||
}}"
|
||||
|
|
@ -347,7 +353,9 @@
|
|||
on:keydown|stopPropagation="{({ key }) => {
|
||||
if (key === 'Enter') {
|
||||
if (highlightedIndex > -1) {
|
||||
sortedItems[highlightedIndex].checked = !sortedItems[highlightedIndex].checked;
|
||||
sortedItems[highlightedIndex].checked = !sortedItems[
|
||||
highlightedIndex
|
||||
].checked;
|
||||
}
|
||||
} else if (key === 'Tab') {
|
||||
open = false;
|
||||
|
|
@ -360,7 +368,10 @@
|
|||
on:focus
|
||||
on:blur
|
||||
on:blur="{({ relatedTarget }) => {
|
||||
if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') {
|
||||
if (
|
||||
relatedTarget &&
|
||||
relatedTarget.getAttribute('role') !== 'button'
|
||||
) {
|
||||
inputRef.focus();
|
||||
}
|
||||
}}"
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
export let caption = "Caption";
|
||||
</script>
|
||||
|
||||
{#if notificationType === 'toast'}
|
||||
{#if notificationType === "toast"}
|
||||
<div class:bx--toast-notification__details="{true}">
|
||||
<h3 class:bx--toast-notification__title="{true}">{title}</h3>
|
||||
<div class:bx--toast-notification__subtitle="{true}">{subtitle}</div>
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
</div>
|
||||
{/if}
|
||||
|
||||
{#if notificationType === 'inline'}
|
||||
{#if notificationType === "inline"}
|
||||
<div class:bx--inline-notification__text-wrapper="{true}">
|
||||
<p class:bx--inline-notification__title="{true}">{title}</p>
|
||||
<div class:bx--inline-notification__subtitle="{true}">{subtitle}</div>
|
||||
|
|
|
|||
|
|
@ -121,7 +121,11 @@
|
|||
{#if pagesUnknown}
|
||||
{itemText(pageSize * (page - 1) + 1, page * pageSize)}
|
||||
{: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}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -153,7 +157,9 @@
|
|||
icon="{CaretLeft16}"
|
||||
iconDescription="{backwardText}"
|
||||
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="{() => {
|
||||
page--;
|
||||
}}"
|
||||
|
|
@ -166,7 +172,9 @@
|
|||
icon="{CaretRight16}"
|
||||
iconDescription="{forwardText}"
|
||||
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="{() => {
|
||||
page++;
|
||||
}}"
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@
|
|||
active="{page === 0}"
|
||||
on:click="{() => (page = 0)}"
|
||||
>
|
||||
{page === 0 ? 'Active, Page' : 'Page'}
|
||||
{page === 0 ? "Active, Page" : "Page"}
|
||||
</PaginationItem>
|
||||
{/if}
|
||||
<PaginationOverflow
|
||||
|
|
@ -108,7 +108,7 @@
|
|||
active="{page === item}"
|
||||
on:click="{() => (page = item)}"
|
||||
>
|
||||
{page === item ? 'Active, Page' : 'Page'}
|
||||
{page === item ? "Active, Page" : "Page"}
|
||||
</PaginationItem>
|
||||
{/each}
|
||||
<PaginationOverflow
|
||||
|
|
@ -124,7 +124,7 @@
|
|||
active="{page === total - 1}"
|
||||
on:click="{() => (page = total - 1)}"
|
||||
>
|
||||
{page === total - 1 ? 'Active, Page' : 'Page'}
|
||||
{page === total - 1 ? "Active, Page" : "Page"}
|
||||
</PaginationItem>
|
||||
{/if}
|
||||
<li class:bx--pagination-nav__list-item="{true}">
|
||||
|
|
|
|||
|
|
@ -7,8 +7,6 @@
|
|||
on:mouseleave
|
||||
>
|
||||
<div class:bx--radio-button="{true}" class:bx--skeleton="{true}"></div>
|
||||
<span
|
||||
class:bx--radio-button__label="{true}"
|
||||
class:bx--skeleton="{true}"
|
||||
<span class:bx--radio-button__label="{true}" class:bx--skeleton="{true}"
|
||||
></span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -151,9 +151,15 @@
|
|||
on:mousedown="{startHolding}"
|
||||
on:touchstart="{startHolding}"
|
||||
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]) {
|
||||
value += step * (shiftKey ? range / step / stepMultiplier : 1) * keys[key];
|
||||
value +=
|
||||
step * (shiftKey ? range / step / stepMultiplier : 1) * keys[key];
|
||||
}
|
||||
}}"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -5,5 +5,4 @@
|
|||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
></span>
|
||||
on:mouseleave></span>
|
||||
|
|
|
|||
|
|
@ -94,8 +94,7 @@
|
|||
value = target.value;
|
||||
}}"
|
||||
on:focus
|
||||
on:blur
|
||||
></textarea>
|
||||
on:blur></textarea>
|
||||
</div>
|
||||
{#if !invalid && helperText}
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -143,20 +143,22 @@
|
|||
class:bx--btn--disabled="{disabled}"
|
||||
class:bx--tooltip__trigger="{true}"
|
||||
class:bx--tooltip--a11y="{true}"
|
||||
class="{tooltipPosition && `bx--tooltip--${tooltipPosition}`}
|
||||
{tooltipAlignment && `bx--tooltip--align-${tooltipAlignment}`}"
|
||||
class="{tooltipPosition &&
|
||||
`bx--tooltip--${tooltipPosition}`}
|
||||
{tooltipAlignment &&
|
||||
`bx--tooltip--align-${tooltipAlignment}`}"
|
||||
on:click="{() => {
|
||||
type = type === 'password' ? 'text' : 'password';
|
||||
}}"
|
||||
>
|
||||
{#if !disabled}
|
||||
<span class:bx--assistive-text="{true}">
|
||||
{#if type === 'text'}
|
||||
{#if type === "text"}
|
||||
{hidePasswordLabel}
|
||||
{:else}{showPasswordLabel}{/if}
|
||||
</span>
|
||||
{/if}
|
||||
{#if type === 'text'}
|
||||
{#if type === "text"}
|
||||
<ViewOff16 class="bx--icon-visibility-off" />
|
||||
{:else}
|
||||
<View16 class="bx--icon-visibility-on" />
|
||||
|
|
|
|||
|
|
@ -63,7 +63,9 @@
|
|||
class:bx--tile--is-expanded="{expanded}"
|
||||
class:bx--tile--light="{light}"
|
||||
{...$$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="{() => {
|
||||
expanded = !expanded;
|
||||
|
|
|
|||
|
|
@ -70,10 +70,9 @@
|
|||
<span aria-hidden="true" class:bx--toggle__text--off="{true}">
|
||||
{labelA}
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class:bx--toggle__text--on="{true}"
|
||||
>{labelB}</span>
|
||||
<span aria-hidden="true" class:bx--toggle__text--on="{true}"
|
||||
>{labelB}</span
|
||||
>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,9 @@
|
|||
class:bx--skeleton="{true}"
|
||||
/>
|
||||
<label
|
||||
aria-label="{labelText ? undefined : $$props['aria-label'] || 'Toggle is loading'}"
|
||||
aria-label="{labelText
|
||||
? undefined
|
||||
: $$props['aria-label'] || 'Toggle is loading'}"
|
||||
for="{id}"
|
||||
class:bx--toggle__label="{true}"
|
||||
class:bx--skeleton="{true}"
|
||||
|
|
|
|||
|
|
@ -78,10 +78,9 @@
|
|||
<span aria-hidden="true" class:bx--toggle__text--off="{true}">
|
||||
{labelA}
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class:bx--toggle__text--on="{true}"
|
||||
>{labelB}</span>
|
||||
<span aria-hidden="true" class:bx--toggle__text--on="{true}"
|
||||
>{labelB}</span
|
||||
>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,9 @@
|
|||
class:bx--skeleton="{true}"
|
||||
/>
|
||||
<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--skeleton="{true}"
|
||||
for="{id}"
|
||||
|
|
|
|||
|
|
@ -40,22 +40,6 @@
|
|||
let refPanel = null;
|
||||
</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
|
||||
on:click="{({ target }) => {
|
||||
if (isOpen && !ref.contains(target) && !refPanel.contains(target)) {
|
||||
|
|
@ -89,9 +73,28 @@
|
|||
bind:this="{refPanel}"
|
||||
class:bx--header-panel="{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 />
|
||||
</div>
|
||||
{/if}
|
||||
</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,16 +20,6 @@
|
|||
import Icon from "../../Icon/Icon.svelte";
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.action-link {
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<a
|
||||
bind:this="{ref}"
|
||||
class:bx--header__action="{true}"
|
||||
|
|
@ -41,3 +31,13 @@
|
|||
>
|
||||
<Icon render="{icon}" />
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.action-link {
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -54,6 +54,87 @@
|
|||
$: showResults = $searchStore ? true : false;
|
||||
</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>
|
||||
.search-wrapper {
|
||||
position: relative;
|
||||
|
|
@ -140,84 +221,3 @@
|
|||
display: none;
|
||||
}
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,9 @@
|
|||
<li class="subject-divider">
|
||||
<span>
|
||||
<slot />
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<style>
|
||||
.subject-divider {
|
||||
color: #525252;
|
||||
|
|
@ -14,9 +20,3 @@
|
|||
color: #c6c6c6;
|
||||
}
|
||||
</style>
|
||||
|
||||
<li class="subject-divider">
|
||||
<span>
|
||||
<slot />
|
||||
</span>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -53,6 +53,109 @@
|
|||
: undefined;
|
||||
</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>
|
||||
label {
|
||||
position: absolute;
|
||||
|
|
@ -185,106 +288,3 @@
|
|||
color: #c6c6c6;
|
||||
}
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -73,13 +73,13 @@
|
|||
|
||||
<DataTable headers="{headers}" rows="{rows}">
|
||||
<span slot="cell-header" let:header>
|
||||
{#if header.key === 'port'}
|
||||
{#if header.key === "port"}
|
||||
{header.value}
|
||||
(network)
|
||||
{:else}{header.value}{/if}
|
||||
</span>
|
||||
<span slot="cell" let:cell>
|
||||
{#if cell.key === 'rule' && cell.value === 'Round robin'}
|
||||
{#if cell.key === "rule" && cell.value === "Round robin"}
|
||||
<Link
|
||||
inline
|
||||
href="https://en.wikipedia.org/wiki/Round-robin_DNS"
|
||||
|
|
@ -156,8 +156,68 @@
|
|||
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: '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' }]}"
|
||||
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,
|
||||
},
|
||||
]}"
|
||||
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}">
|
||||
|
|
@ -184,7 +244,12 @@
|
|||
/>
|
||||
|
||||
<DataTableSkeleton
|
||||
headers="{[{ value: 'Name' }, { value: 'Protocol' }, { value: 'Port' }, { value: 'Rule' }]}"
|
||||
headers="{[
|
||||
{ value: 'Name' },
|
||||
{ value: 'Protocol' },
|
||||
{ value: 'Port' },
|
||||
{ value: 'Rule' },
|
||||
]}"
|
||||
rows="{10}"
|
||||
/>
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
<DataTable sortable headers="{headers}" rows="{rows}">
|
||||
<span slot="cell" let:cell>
|
||||
{#if cell.key === 'overflow'}
|
||||
{#if cell.key === "overflow"}
|
||||
<OverflowMenu flipped>
|
||||
<OverflowMenuItem text="Restart" />
|
||||
<OverflowMenuItem
|
||||
|
|
|
|||
|
|
@ -5,7 +5,11 @@
|
|||
<Dropdown
|
||||
titleText="Contact"
|
||||
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
|
||||
|
|
@ -14,42 +18,66 @@
|
|||
}}"
|
||||
titleText="Contact"
|
||||
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
|
||||
light
|
||||
titleText="Contact"
|
||||
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
|
||||
type="inline"
|
||||
titleText="Contact"
|
||||
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
|
||||
size="xl"
|
||||
titleText="Contact"
|
||||
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
|
||||
size="sm"
|
||||
titleText="Contact"
|
||||
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
|
||||
disabled
|
||||
titleText="Contact"
|
||||
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 />
|
||||
|
|
|
|||
|
|
@ -10,6 +10,10 @@
|
|||
<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' },
|
||||
]}"
|
||||
shouldFilterItem="{shouldFilterItem}"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -6,12 +6,6 @@
|
|||
const code = Array.from({ length: 20 }, (_, i) => i + 1).join("\n");
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ToggleSmall
|
||||
style="margin-bottom: var(--cds-spacing-05)"
|
||||
labelText="Show code snippets"
|
||||
|
|
@ -19,7 +13,8 @@
|
|||
/>
|
||||
|
||||
{#if toggled}
|
||||
<h5>"Show more" will not render</h5><br />
|
||||
<h5>"Show more" will not render</h5>
|
||||
<br />
|
||||
{/if}
|
||||
<div class:hidden="{!toggled}">
|
||||
<CodeSnippet type="multi" code="{code}" />
|
||||
|
|
@ -27,8 +22,15 @@
|
|||
|
||||
{#if toggled}
|
||||
<br /><br />
|
||||
<h5>"Show more" will render</h5><br />
|
||||
<h5>"Show more" will render</h5>
|
||||
<br />
|
||||
<div class:hidden="{!toggled}">
|
||||
<CodeSnippet type="multi" code="{code}" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
>
|
||||
Cancel
|
||||
</Button>
|
||||
{#if state !== 'dormant'}
|
||||
{#if state !== "dormant"}
|
||||
<InlineLoading status="{state}" description="{descriptionMap[state]}" />
|
||||
{:else}
|
||||
<Button on:click="{() => (state = 'active')}">Submit</Button>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,21 @@
|
|||
<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' },
|
||||
]}"
|
||||
/>
|
||||
|
||||
<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' },
|
||||
]}"
|
||||
sortItem="{() => {}}"
|
||||
/>
|
||||
|
||||
|
|
@ -19,7 +27,11 @@
|
|||
selectedIds="{['0', '1']}"
|
||||
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' },
|
||||
]}"
|
||||
/>
|
||||
|
||||
<MultiSelect
|
||||
|
|
@ -28,7 +40,11 @@
|
|||
}}"
|
||||
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' },
|
||||
]}"
|
||||
sortItem="{() => {}}"
|
||||
/>
|
||||
|
||||
|
|
@ -36,33 +52,53 @@
|
|||
light
|
||||
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' },
|
||||
]}"
|
||||
/>
|
||||
|
||||
<MultiSelect
|
||||
type="inline"
|
||||
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' },
|
||||
]}"
|
||||
/>
|
||||
|
||||
<MultiSelect
|
||||
size="xl"
|
||||
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' },
|
||||
]}"
|
||||
/>
|
||||
|
||||
<MultiSelect
|
||||
size="sm"
|
||||
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' },
|
||||
]}"
|
||||
/>
|
||||
|
||||
<MultiSelect
|
||||
filterable
|
||||
titleText="Contact"
|
||||
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' },
|
||||
]}"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@
|
|||
<StructuredListCell head>ColumnA</StructuredListCell>
|
||||
<StructuredListCell head>ColumnB</StructuredListCell>
|
||||
<StructuredListCell head>ColumnC</StructuredListCell>
|
||||
<StructuredListCell head>{''}</StructuredListCell>
|
||||
<StructuredListCell head>{""}</StructuredListCell>
|
||||
</StructuredListRow>
|
||||
</StructuredListHead>
|
||||
<StructuredListBody>
|
||||
|
|
|
|||
13
yarn.lock
13
yarn.lock
|
|
@ -1923,16 +1923,21 @@ prepend-http@^1.0.0:
|
|||
resolved "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
|
||||
integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
|
||||
|
||||
prettier-plugin-svelte@^1.4.1:
|
||||
version "1.4.1"
|
||||
resolved "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-1.4.1.tgz#2f0f7a149190f476dc9b4ba9da8d482bd196f1e2"
|
||||
integrity sha512-6y0m37Xw01GRf/WIHau+Kp3uXj2JB1agtEmNVKb9opMy34A6OMOYhfneVpNIlrghQSw/jIV+t3e5Ngt4up2CMA==
|
||||
prettier-plugin-svelte@^2.1.1:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.1.1.tgz#e6613cac4292b5bbda5250680565c131b0da5ced"
|
||||
integrity sha512-U0gRsdJtveyusHd86OUPD+lEVd13bHPPF/CZD/csKjz0Y+Cv4WbUy9x8tA5vaHFtf0tsu8Yb1MrfuhN3GH2gig==
|
||||
|
||||
prettier@^2.2.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.npmjs.org/prettier/-/prettier-2.2.0.tgz#8a03c7777883b29b37fb2c4348c66a78e980418b"
|
||||
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:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue