mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 09:51:36 +00:00
chore(prettier): use svelteStrictMode
This commit is contained in:
Eric Liu
parent
322b238cf0
commit
42b8159b1c
182 changed files with 2020 additions and 1912 deletions
1
.prettierrc
Normal file
1
.prettierrc
Normal file
|
|
@ -0,0 +1 @@
|
|||
{ "svelteStrictMode": true }
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
<CodeSnippet
|
||||
{...$$restProps}
|
||||
{code}
|
||||
on:click={() => {
|
||||
code="{code}"
|
||||
on:click="{() => {
|
||||
copy(code);
|
||||
}} />
|
||||
}}" />
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
platformName="Components Svelte"
|
||||
href="."
|
||||
rel="prefetch"
|
||||
aria-current={segment === undefined ? 'page' : undefined}>
|
||||
aria-current="{segment === undefined ? 'page' : undefined}">
|
||||
<SkipToContent />
|
||||
<!-- <HeaderNav>
|
||||
<HeaderNavItem
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
<Carbon.Row>
|
||||
<Carbon.Column>
|
||||
<Carbon.ToggleSmall bind:toggled={skeleton} labelText="Skeleton state" />
|
||||
<Carbon.ToggleSmall bind:toggled="{skeleton}" labelText="Skeleton state" />
|
||||
</Carbon.Column>
|
||||
</Carbon.Row>
|
||||
|
||||
|
|
@ -36,8 +36,11 @@
|
|||
<Carbon.Row class="scope">
|
||||
<Carbon.Column noGutter>
|
||||
<TileCard title="Accordion">
|
||||
<Carbon.Accordion count={3} {skeleton} open={accordionItemOpen}>
|
||||
<Carbon.AccordionItem title="Title 1" bind:open={accordionItemOpen}>
|
||||
<Carbon.Accordion
|
||||
count="{3}"
|
||||
skeleton="{skeleton}"
|
||||
open="{accordionItemOpen}">
|
||||
<Carbon.AccordionItem title="Title 1" bind:open="{accordionItemOpen}">
|
||||
Content 1
|
||||
</Carbon.AccordionItem>
|
||||
<Carbon.AccordionItem title="Title 2">Content 2</Carbon.AccordionItem>
|
||||
|
|
@ -47,7 +50,7 @@
|
|||
</Carbon.Column>
|
||||
<Carbon.Column noGutter>
|
||||
<TileCard title="Breadcrumb">
|
||||
<Carbon.Breadcrumb {skeleton}>
|
||||
<Carbon.Breadcrumb skeleton="{skeleton}">
|
||||
<Carbon.BreadcrumbItem href="/">Breadcrumb 1</Carbon.BreadcrumbItem>
|
||||
<Carbon.BreadcrumbItem href="/">Breadcrumb 2</Carbon.BreadcrumbItem>
|
||||
<Carbon.BreadcrumbItem href="/">Breadcrumb 3</Carbon.BreadcrumbItem>
|
||||
|
|
@ -59,27 +62,33 @@
|
|||
<Carbon.Row class="scope">
|
||||
<Carbon.Column noGutter>
|
||||
<TileCard title="Primary button">
|
||||
<Carbon.Button {skeleton}>Primary</Carbon.Button>
|
||||
<Carbon.Button skeleton="{skeleton}">Primary</Carbon.Button>
|
||||
</TileCard>
|
||||
</Carbon.Column>
|
||||
<Carbon.Column noGutter>
|
||||
<TileCard title="Secondary button">
|
||||
<Carbon.Button kind="secondary" {skeleton}>Secondary</Carbon.Button>
|
||||
<Carbon.Button kind="secondary" skeleton="{skeleton}">
|
||||
Secondary
|
||||
</Carbon.Button>
|
||||
</TileCard>
|
||||
</Carbon.Column>
|
||||
<Carbon.Column noGutter>
|
||||
<TileCard title="Tertiary button">
|
||||
<Carbon.Button kind="tertiary" {skeleton}>Tertiary</Carbon.Button>
|
||||
<Carbon.Button kind="tertiary" skeleton="{skeleton}">
|
||||
Tertiary
|
||||
</Carbon.Button>
|
||||
</TileCard>
|
||||
</Carbon.Column>
|
||||
<Carbon.Column noGutter>
|
||||
<TileCard title="Ghost button">
|
||||
<Carbon.Button kind="ghost" {skeleton}>Ghost</Carbon.Button>
|
||||
<Carbon.Button kind="ghost" skeleton="{skeleton}">Ghost</Carbon.Button>
|
||||
</TileCard>
|
||||
</Carbon.Column>
|
||||
<Carbon.Column noGutter>
|
||||
<TileCard title="Danger button">
|
||||
<Carbon.Button kind="danger" {skeleton}>Danger</Carbon.Button>
|
||||
<Carbon.Button kind="danger" skeleton="{skeleton}">
|
||||
Danger
|
||||
</Carbon.Button>
|
||||
</TileCard>
|
||||
</Carbon.Column>
|
||||
</Carbon.Row>
|
||||
|
|
@ -87,50 +96,52 @@
|
|||
<Carbon.Row class="scope">
|
||||
<Carbon.Column noGutter>
|
||||
<TileCard title="Primary button with icon">
|
||||
<Carbon.Button icon={Add16} {skeleton}>With icon</Carbon.Button>
|
||||
<Carbon.Button icon="{Add16}" skeleton="{skeleton}">
|
||||
With icon
|
||||
</Carbon.Button>
|
||||
</TileCard>
|
||||
</Carbon.Column>
|
||||
<Carbon.Column noGutter>
|
||||
<TileCard title="Icon-only buttons">
|
||||
<Carbon.Button
|
||||
icon={Add16}
|
||||
icon="{Add16}"
|
||||
hasIconOnly
|
||||
iconDescription="Primary"
|
||||
tooltipPosition="bottom"
|
||||
tooltipAlignment="center"
|
||||
{skeleton} />
|
||||
skeleton="{skeleton}" />
|
||||
<Carbon.Button
|
||||
icon={Add16}
|
||||
icon="{Add16}"
|
||||
hasIconOnly
|
||||
kind="secondary"
|
||||
iconDescription="Secondary"
|
||||
tooltipPosition="bottom"
|
||||
tooltipAlignment="center"
|
||||
{skeleton} />
|
||||
skeleton="{skeleton}" />
|
||||
<Carbon.Button
|
||||
icon={Add16}
|
||||
icon="{Add16}"
|
||||
hasIconOnly
|
||||
kind="tertiary"
|
||||
iconDescription="Tertiary"
|
||||
tooltipPosition="bottom"
|
||||
tooltipAlignment="center"
|
||||
{skeleton} />
|
||||
skeleton="{skeleton}" />
|
||||
<Carbon.Button
|
||||
icon={Add16}
|
||||
icon="{Add16}"
|
||||
hasIconOnly
|
||||
kind="ghost"
|
||||
iconDescription="Ghost"
|
||||
tooltipPosition="bottom"
|
||||
tooltipAlignment="center"
|
||||
{skeleton} />
|
||||
skeleton="{skeleton}" />
|
||||
<Carbon.Button
|
||||
icon={Add16}
|
||||
icon="{Add16}"
|
||||
hasIconOnly
|
||||
kind="danger"
|
||||
iconDescription="Danger"
|
||||
tooltipPosition="bottom"
|
||||
tooltipAlignment="center"
|
||||
{skeleton} />
|
||||
skeleton="{skeleton}" />
|
||||
</TileCard>
|
||||
</Carbon.Column>
|
||||
</Carbon.Row>
|
||||
|
|
@ -140,9 +151,9 @@
|
|||
<TileCard title="Checkbox">
|
||||
<fieldset class="bx--fieldset">
|
||||
<legend class="bx--label">Checkbox heading</legend>
|
||||
<Carbon.Checkbox {skeleton} labelText="Checkbox label" />
|
||||
<Carbon.Checkbox {skeleton} labelText="Checkbox label" />
|
||||
<Carbon.Checkbox {skeleton} labelText="Checkbox label" />
|
||||
<Carbon.Checkbox skeleton="{skeleton}" labelText="Checkbox label" />
|
||||
<Carbon.Checkbox skeleton="{skeleton}" labelText="Checkbox label" />
|
||||
<Carbon.Checkbox skeleton="{skeleton}" labelText="Checkbox label" />
|
||||
</fieldset>
|
||||
</TileCard>
|
||||
</Carbon.Column>
|
||||
|
|
@ -152,11 +163,11 @@
|
|||
<legend class="bx--label">Checkbox heading</legend>
|
||||
<Carbon.Checkbox
|
||||
indeterminate
|
||||
{skeleton}
|
||||
skeleton="{skeleton}"
|
||||
labelText="Checkbox label" />
|
||||
<Carbon.Checkbox
|
||||
indeterminate
|
||||
{skeleton}
|
||||
skeleton="{skeleton}"
|
||||
labelText="Checkbox label" />
|
||||
</fieldset>
|
||||
</TileCard>
|
||||
|
|
@ -166,21 +177,21 @@
|
|||
<Carbon.Row class="scope">
|
||||
<Carbon.Column noGutter>
|
||||
<TileCard title="Inline Code Snippet">
|
||||
<Carbon.CodeSnippet type="inline" light {skeleton}>
|
||||
<Carbon.CodeSnippet type="inline" light skeleton="{skeleton}">
|
||||
{`node -v`}
|
||||
</Carbon.CodeSnippet>
|
||||
</TileCard>
|
||||
</Carbon.Column>
|
||||
<Carbon.Column noGutter>
|
||||
<TileCard title="Single-line Code Snippet">
|
||||
<Carbon.CodeSnippet type="single" light {skeleton}>
|
||||
<Carbon.CodeSnippet type="single" light skeleton="{skeleton}">
|
||||
{`tsc -c tsconfig.json`}
|
||||
</Carbon.CodeSnippet>
|
||||
</TileCard>
|
||||
</Carbon.Column>
|
||||
<Carbon.Column lg={8} noGutter>
|
||||
<Carbon.Column lg="{8}" noGutter>
|
||||
<TileCard title="Multi-line Code Snippet">
|
||||
<Carbon.CodeSnippet type="multi" light {skeleton}>
|
||||
<Carbon.CodeSnippet type="multi" light skeleton="{skeleton}">
|
||||
{`* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<Select inline labelText="Theme" bind:selected={theme}>
|
||||
<Select inline labelText="Theme" bind:selected="{theme}">
|
||||
<SelectItem value="white" text="White" />
|
||||
<SelectItem value="g10" text="Gray 10" />
|
||||
<SelectItem value="g90" text="Gray 90" />
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
hasIconOnly
|
||||
kind="ghost"
|
||||
size="small"
|
||||
icon={Code16}
|
||||
icon="{Code16}"
|
||||
iconDescription="Usage"
|
||||
tooltipAlignment="center"
|
||||
tooltipPosition="top" />
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
hasIconOnly
|
||||
kind="ghost"
|
||||
size="small"
|
||||
icon={Code16}
|
||||
icon="{Code16}"
|
||||
iconDescription="Usage"
|
||||
tooltipAlignment="center"
|
||||
tooltipPosition="top" />
|
||||
|
|
|
|||
|
|
@ -58,28 +58,28 @@
|
|||
</style>
|
||||
|
||||
{#if segment !== 'examples'}
|
||||
<GlobalHeader {segment} />
|
||||
<GlobalHeader segment="{segment}" />
|
||||
<SideNav isOpen>
|
||||
<SideNavItems>
|
||||
<SideNavLink
|
||||
text="Getting Started"
|
||||
href="getting-started"
|
||||
rel="prefetch"
|
||||
isSelected={segment === 'getting-started'} />
|
||||
isSelected="{segment === 'getting-started'}" />
|
||||
<SideNavMenu
|
||||
text="Components"
|
||||
expanded={segment === 'components'}
|
||||
isSelected={segment === 'components' && !$tail}>
|
||||
expanded="{segment === 'components'}"
|
||||
isSelected="{segment === 'components' && !$tail}">
|
||||
<SideNavMenuItem
|
||||
text="Index"
|
||||
href="components"
|
||||
rel="prefetch"
|
||||
isSelected={segment === 'components' && $tail && $tail.slug === 'index'} />
|
||||
isSelected="{segment === 'components' && $tail && $tail.slug === 'index'}" />
|
||||
<SideNavMenuItem
|
||||
text="Button"
|
||||
href="components/button"
|
||||
rel="prefetch"
|
||||
isSelected={segment === 'components' && $tail && $tail.slug === 'button'} />
|
||||
isSelected="{segment === 'components' && $tail && $tail.slug === 'button'}" />
|
||||
</SideNavMenu>
|
||||
</SideNavItems>
|
||||
</SideNav>
|
||||
|
|
@ -90,11 +90,11 @@
|
|||
style="display: flex; align-items: center; justify-content:
|
||||
space-between;">
|
||||
<Breadcrumb>
|
||||
<BreadcrumbItem href="." isCurrentPage={!$tail && !segment}>
|
||||
<BreadcrumbItem href="." isCurrentPage="{!$tail && !segment}">
|
||||
Home
|
||||
</BreadcrumbItem>
|
||||
{#if segment && $tail}
|
||||
<BreadcrumbItem href={segment} isCurrentPage={!$tail}>
|
||||
<BreadcrumbItem href="{segment}" isCurrentPage="{!$tail}">
|
||||
{urlIds[segment]}
|
||||
</BreadcrumbItem>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -96,35 +96,35 @@
|
|||
<Row noGutter>
|
||||
<div class="preview">
|
||||
{#if component}
|
||||
<svelte:component this={component.default} {...defaultProps} />
|
||||
<svelte:component this="{component.default}" {...defaultProps} />
|
||||
{/if}
|
||||
</div>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Column md={3} lg={4}>
|
||||
<Column md="{3}" lg="{4}">
|
||||
{#each Object.keys(props) as key}
|
||||
{#if Array.isArray(props[key].values)}
|
||||
<FormGroup legendText={key}>
|
||||
<FormGroup legendText="{key}">
|
||||
<RadioButtonGroup
|
||||
selected={props[key].default}
|
||||
on:change={({ detail }) => {
|
||||
selected="{props[key].default}"
|
||||
on:change="{({ detail }) => {
|
||||
defaultProps = { ...defaultProps, [key]: detail };
|
||||
}}>
|
||||
}}">
|
||||
{#each props[key].values as value}
|
||||
<RadioButton {value} id={value} labelText={value} />
|
||||
<RadioButton value="{value}" id="{value}" labelText="{value}" />
|
||||
{/each}
|
||||
</RadioButtonGroup>
|
||||
</FormGroup>
|
||||
{/if}
|
||||
{/each}
|
||||
</Column>
|
||||
<Column md={5}>
|
||||
<Column md="{5}">
|
||||
<CodeSnippet
|
||||
type="multi"
|
||||
code={data.source}
|
||||
on:click={() => {
|
||||
code="{data.source}"
|
||||
on:click="{() => {
|
||||
copy(data.source);
|
||||
}} />
|
||||
}}" />
|
||||
</Column>
|
||||
</Row>
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@
|
|||
<Button
|
||||
{...$$props}
|
||||
kind="primary"
|
||||
on:click={() => console.log('click')}
|
||||
on:mouseover={() => console.log('mouseover')}
|
||||
on:mouseenter={() => console.log('mouseenter')}
|
||||
on:mouseleave={() => console.log('mouseleave')}>
|
||||
on:click="{() => console.log('click')}"
|
||||
on:mouseover="{() => console.log('mouseover')}"
|
||||
on:mouseenter="{() => console.log('mouseenter')}"
|
||||
on:mouseleave="{() => console.log('mouseleave')}">
|
||||
Primary button
|
||||
</Button>
|
||||
|
||||
|
|
@ -26,15 +26,15 @@
|
|||
|
||||
<div>
|
||||
<h4>Buttons with Icons</h4>
|
||||
<Button {...$$props} kind="primary" icon={Add16}>Primary</Button>
|
||||
<Button {...$$props} kind="primary" icon="{Add16}">Primary</Button>
|
||||
|
||||
<Button {...$$props} kind="secondary" icon={Add16}>Secondary</Button>
|
||||
<Button {...$$props} kind="secondary" icon="{Add16}">Secondary</Button>
|
||||
|
||||
<Button {...$$props} kind="tertiary" icon={Add16}>Tertiary</Button>
|
||||
<Button {...$$props} kind="tertiary" icon="{Add16}">Tertiary</Button>
|
||||
|
||||
<Button {...$$props} kind="ghost" icon={Add16}>Ghost</Button>
|
||||
<Button {...$$props} kind="ghost" icon="{Add16}">Ghost</Button>
|
||||
|
||||
<Button {...$$props} kind="danger" icon={Add16}>Danger</Button>
|
||||
<Button {...$$props} kind="danger" icon="{Add16}">Danger</Button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
{...$$props}
|
||||
kind="primary"
|
||||
hasIconOnly
|
||||
icon={Add16}
|
||||
icon="{Add16}"
|
||||
iconDescription="Primary"
|
||||
tooltipPosition="bottom"
|
||||
tooltipAlignment="center" />
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
{...$$props}
|
||||
kind="secondary"
|
||||
hasIconOnly
|
||||
icon={Add16}
|
||||
icon="{Add16}"
|
||||
iconDescription="Secondary"
|
||||
tooltipPosition="bottom"
|
||||
tooltipAlignment="center" />
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
{...$$props}
|
||||
kind="tertiary"
|
||||
hasIconOnly
|
||||
icon={Add16}
|
||||
icon="{Add16}"
|
||||
iconDescription="Tertiary"
|
||||
tooltipPosition="bottom"
|
||||
tooltipAlignment="center" />
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
{...$$props}
|
||||
kind="ghost"
|
||||
hasIconOnly
|
||||
icon={Add16}
|
||||
icon="{Add16}"
|
||||
iconDescription="Ghost"
|
||||
tooltipPosition="bottom"
|
||||
tooltipAlignment="center" />
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
{...$$props}
|
||||
kind="danger"
|
||||
hasIconOnly
|
||||
icon={Add16}
|
||||
icon="{Add16}"
|
||||
iconDescription="Danger"
|
||||
tooltipPosition="bottom"
|
||||
tooltipAlignment="center" />
|
||||
|
|
|
|||
|
|
@ -27,10 +27,11 @@
|
|||
<div slot="content" class="content">
|
||||
<TabContent>
|
||||
<CopyableCodeSnippet
|
||||
code={`yarn add -D carbon-components-svelte`} />
|
||||
code="{`yarn add -D carbon-components-svelte`}" />
|
||||
</TabContent>
|
||||
<TabContent>
|
||||
<CopyableCodeSnippet code={`npm -i -D carbon-components-svelte`} />
|
||||
<CopyableCodeSnippet
|
||||
code="{`npm -i -D carbon-components-svelte`}" />
|
||||
</TabContent>
|
||||
</div>
|
||||
</Tabs>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
|
||||
<Button
|
||||
kind="primary"
|
||||
on:click={() => {
|
||||
on:click="{() => {
|
||||
console.log('click');
|
||||
}}>
|
||||
}}">
|
||||
Primary button
|
||||
</Button>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@
|
|||
</script>
|
||||
|
||||
<ul
|
||||
class:bx--accordion={true}
|
||||
class:bx--skeleton={true}
|
||||
class:bx--accordion="{true}"
|
||||
class:bx--skeleton="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
@ -25,9 +25,9 @@
|
|||
on:mouseleave>
|
||||
{#if open}
|
||||
<li
|
||||
class:bx--accordion__item={true}
|
||||
class:bx--accordion__item--active={true}>
|
||||
<span class:bx--accordion__heading={true}>
|
||||
class:bx--accordion__item="{true}"
|
||||
class:bx--accordion__item--active="{true}">
|
||||
<span class:bx--accordion__heading="{true}">
|
||||
<ChevronRight16 class="bx--accordion__arrow" />
|
||||
<SkeletonText class="bx--accordion__title" />
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -11,11 +11,11 @@
|
|||
|
||||
{#if story === 'skeleton'}
|
||||
<div style="width: 500px">
|
||||
<AccordionSkeleton {open} {count} />
|
||||
<AccordionSkeleton open="{open}" count="{count}" />
|
||||
</div>
|
||||
{:else}
|
||||
<Accordion {...$$restProps}>
|
||||
<AccordionItem {title} {open}>
|
||||
<AccordionItem title="{title}" open="{open}">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
on:mouseleave />
|
||||
{:else}
|
||||
<ul
|
||||
class:bx--accordion={true}
|
||||
class:bx--accordion="{true}"
|
||||
{...$$restProps}
|
||||
class="bx--accordion--{align} {$$restProps.class}"
|
||||
on:click
|
||||
|
|
|
|||
|
|
@ -24,34 +24,36 @@
|
|||
</script>
|
||||
|
||||
<li
|
||||
class:bx--accordion__item={true}
|
||||
class:bx--accordion__item--active={open}
|
||||
class:bx--accordion__item="{true}"
|
||||
class:bx--accordion__item--active="{open}"
|
||||
class="bx--accordion__item--${animation}"
|
||||
{...$$restProps}
|
||||
on:animationend
|
||||
on:animationend={() => {
|
||||
on:animationend="{() => {
|
||||
animation = undefined;
|
||||
}}>
|
||||
}}">
|
||||
<button
|
||||
type="button"
|
||||
class:bx--accordion__heading={true}
|
||||
title={iconDescription}
|
||||
aria-expanded={open}
|
||||
class:bx--accordion__heading="{true}"
|
||||
title="{iconDescription}"
|
||||
aria-expanded="{open}"
|
||||
on:click
|
||||
on:click={() => {
|
||||
on:click="{() => {
|
||||
open = !open;
|
||||
animation = open ? 'expanding' : 'collapsing';
|
||||
}}
|
||||
}}"
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keydown
|
||||
on:keydown={({ key }) => {
|
||||
on:keydown="{({ key }) => {
|
||||
if (open && key === 'Escape') {
|
||||
open = false;
|
||||
}
|
||||
}}>
|
||||
<ChevronRight16 class="bx--accordion__arrow" aria-label={iconDescription} />
|
||||
}}">
|
||||
<ChevronRight16
|
||||
class="bx--accordion__arrow"
|
||||
aria-label="{iconDescription}" />
|
||||
<div class="bx--accordion__title">
|
||||
<slot name="title">{title}</slot>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,17 +13,17 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class:bx--breadcrumb={true}
|
||||
class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}
|
||||
class:bx--skeleton={true}
|
||||
class:bx--breadcrumb="{true}"
|
||||
class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
|
||||
class:bx--skeleton="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
{#each Array.from({ length: count }, (_, i) => i) as item, i (item)}
|
||||
<div class:bx--breadcrumb-item={true}>
|
||||
<span class:bx--link={true}> </span>
|
||||
<div class:bx--breadcrumb-item="{true}">
|
||||
<span class:bx--link="{true}"> </span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -24,9 +24,9 @@
|
|||
<BreadcrumbItem href="#" aria-current="page">Breadcrumb 3</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
{:else if story === 'skeleton'}
|
||||
<BreadcrumbSkeleton {noTrailingSlash} {...$$restProps} />
|
||||
<BreadcrumbSkeleton noTrailingSlash="{noTrailingSlash}" {...$$restProps} />
|
||||
{:else}
|
||||
<Breadcrumb {noTrailingSlash}>
|
||||
<Breadcrumb noTrailingSlash="{noTrailingSlash}">
|
||||
<BreadcrumbItem let:props>
|
||||
<a {...props} href="/#">Breadcrumb 1</a>
|
||||
</BreadcrumbItem>
|
||||
|
|
|
|||
|
|
@ -30,8 +30,8 @@
|
|||
on:mouseenter
|
||||
on:mouseleave>
|
||||
<ol
|
||||
class:bx--breadcrumb={true}
|
||||
class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}>
|
||||
class:bx--breadcrumb="{true}"
|
||||
class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}">
|
||||
<slot />
|
||||
</ol>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -15,19 +15,19 @@
|
|||
</script>
|
||||
|
||||
<li
|
||||
class:bx--breadcrumb-item={true}
|
||||
class:bx--breadcrumb-item--current={isCurrentPage && $$restProps['aria-current'] !== 'page'}
|
||||
class:bx--breadcrumb-item="{true}"
|
||||
class:bx--breadcrumb-item--current="{isCurrentPage && $$restProps['aria-current'] !== 'page'}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
{#if href}
|
||||
<Link {href} aria-current={$$restProps['aria-current']}>
|
||||
<Link href="{href}" aria-current="{$$restProps['aria-current']}">
|
||||
<slot />
|
||||
</Link>
|
||||
{:else}
|
||||
<slot
|
||||
props={{ 'aria-current': $$restProps['aria-current'], class: 'bx--link' }} />
|
||||
props="{{ 'aria-current': $$restProps['aria-current'], class: 'bx--link' }}" />
|
||||
{/if}
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -14,11 +14,11 @@
|
|||
|
||||
{#if href}
|
||||
<a
|
||||
{href}
|
||||
href="{href}"
|
||||
role="button"
|
||||
class:bx--skeleton={true}
|
||||
class:bx--btn={true}
|
||||
class:bx--btn--sm={small}
|
||||
class:bx--skeleton="{true}"
|
||||
class:bx--btn="{true}"
|
||||
class:bx--btn--sm="{small}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
@ -28,12 +28,12 @@
|
|||
</a>
|
||||
{:else}
|
||||
<div
|
||||
class:bx--skeleton={true}
|
||||
class:bx--btn={true}
|
||||
class:bx--btn--sm={small}
|
||||
class:bx--skeleton="{true}"
|
||||
class:bx--btn="{true}"
|
||||
class:bx--btn--sm="{small}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave />
|
||||
on:mouseleave></div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -122,56 +122,56 @@
|
|||
|
||||
{#if skeleton}
|
||||
<ButtonSkeleton
|
||||
{href}
|
||||
small={size === 'small'}
|
||||
href="{href}"
|
||||
small="{size === 'small'}"
|
||||
{...$$restProps}
|
||||
style={hasIconOnly && 'width: 3rem;'}
|
||||
style="{hasIconOnly && 'width: 3rem;'}"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave />
|
||||
{:else}
|
||||
{#if as}
|
||||
<slot props={buttonProps} />
|
||||
<slot props="{buttonProps}" />
|
||||
{:else if href && !disabled}
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<a
|
||||
bind:this={ref}
|
||||
bind:this="{ref}"
|
||||
{...buttonProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
{#if hasIconOnly}
|
||||
<span class:bx--assistive-text={true}>{iconDescription}</span>
|
||||
<span class:bx--assistive-text="{true}">{iconDescription}</span>
|
||||
{/if}
|
||||
<slot />
|
||||
{#if icon}
|
||||
<svelte:component
|
||||
this={icon}
|
||||
this="{icon}"
|
||||
aria-hidden="true"
|
||||
class="bx--btn__icon"
|
||||
aria-label={iconDescription} />
|
||||
aria-label="{iconDescription}" />
|
||||
{/if}
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
bind:this={ref}
|
||||
bind:this="{ref}"
|
||||
{...buttonProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
{#if hasIconOnly}
|
||||
<span class:bx--assistive-text={true}>{iconDescription}</span>
|
||||
<span class:bx--assistive-text="{true}">{iconDescription}</span>
|
||||
{/if}
|
||||
<slot />
|
||||
{#if icon}
|
||||
<svelte:component
|
||||
this={icon}
|
||||
this="{icon}"
|
||||
aria-hidden="true"
|
||||
class="bx--btn__icon"
|
||||
aria-label={iconDescription} />
|
||||
aria-label="{iconDescription}" />
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<div class:bx--btn-set={true} {...$$restProps}>
|
||||
<div class:bx--btn-set="{true}" {...$$restProps}>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
<div
|
||||
class:bx--form-item={true}
|
||||
class:bx--checkbox-wrapper={true}
|
||||
class:bx--checkbox-label={true}
|
||||
class:bx--form-item="{true}"
|
||||
class:bx--checkbox-wrapper="{true}"
|
||||
class:bx--checkbox-label="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -39,9 +39,9 @@
|
|||
{...checkboxProps}
|
||||
id="checkbox-label-1"
|
||||
bind:checked
|
||||
on:check={({ detail }) => {
|
||||
on:check="{({ detail }) => {
|
||||
console.log('on:check', detail);
|
||||
}} />
|
||||
}}" />
|
||||
<Checkbox {...checkboxProps} id="checkbox-label-2" checked />
|
||||
</fieldset>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -82,31 +82,31 @@
|
|||
on:mouseleave />
|
||||
{:else}
|
||||
<div
|
||||
class:bx--form-item={true}
|
||||
class:bx--checkbox-wrapper={true}
|
||||
class:bx--form-item="{true}"
|
||||
class:bx--checkbox-wrapper="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
<input
|
||||
bind:this={ref}
|
||||
bind:this="{ref}"
|
||||
type="checkbox"
|
||||
{checked}
|
||||
{disabled}
|
||||
{id}
|
||||
{indeterminate}
|
||||
{name}
|
||||
{readonly}
|
||||
class:bx--checkbox={true}
|
||||
checked="{checked}"
|
||||
disabled="{disabled}"
|
||||
id="{id}"
|
||||
indeterminate="{indeterminate}"
|
||||
name="{name}"
|
||||
readonly="{readonly}"
|
||||
class:bx--checkbox="{true}"
|
||||
on:change
|
||||
on:change={() => {
|
||||
on:change="{() => {
|
||||
checked = !checked;
|
||||
}} />
|
||||
<label for={id} {title} class:bx--checkbox-label={true}>
|
||||
}}" />
|
||||
<label for="{id}" title="{title}" class:bx--checkbox-label="{true}">
|
||||
<span
|
||||
class:bx--checkbox-label-text={true}
|
||||
class:bx--visually-hidden={hideLabel}>
|
||||
class:bx--checkbox-label-text="{true}"
|
||||
class:bx--visually-hidden="{hideLabel}">
|
||||
{labelText}
|
||||
</span>
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -7,18 +7,18 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class:bx--snippet={true}
|
||||
class:bx--skeleton={true}
|
||||
class:bx--snippet--single={type === 'single'}
|
||||
class:bx--snippet--multi={type === 'multi'}
|
||||
class:bx--snippet="{true}"
|
||||
class:bx--skeleton="{true}"
|
||||
class:bx--snippet--single="{type === 'single'}"
|
||||
class:bx--snippet--multi="{type === 'multi'}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
<div class:bx--snippet-container={true}>
|
||||
<div class:bx--snippet-container="{true}">
|
||||
{#if type === 'single'}
|
||||
<span />
|
||||
{:else if type === 'multi'}<span /> <span /> <span />{/if}
|
||||
<span></span>
|
||||
{:else if type === 'multi'}<span></span> <span></span> <span></span>{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@
|
|||
|
||||
{#if skeleton}
|
||||
<CodeSnippetSkeleton
|
||||
{type}
|
||||
type="{type}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
@ -122,16 +122,16 @@
|
|||
{light && 'bx--snippet--light'}
|
||||
{hideCopyButton && 'bx--snippet--no-copy'}"
|
||||
{...$$restProps}>
|
||||
<code {id}>
|
||||
<code id="{id}">
|
||||
<slot>{code}</slot>
|
||||
</code>
|
||||
</span>
|
||||
{:else}
|
||||
<Copy
|
||||
aria-label={copyLabel}
|
||||
aria-describedby={id}
|
||||
{feedback}
|
||||
{feedbackTimeout}
|
||||
aria-label="{copyLabel}"
|
||||
aria-describedby="{id}"
|
||||
feedback="{feedback}"
|
||||
feedbackTimeout="{feedbackTimeout}"
|
||||
class="bx--snippet {type && `bx--snippet--${type}`}
|
||||
{type === 'inline' && 'bx--btn--copy'}
|
||||
{expanded && 'bx--snippet--expand'}
|
||||
|
|
@ -142,39 +142,39 @@
|
|||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
<code {id}>
|
||||
<code id="{id}">
|
||||
<slot>{code}</slot>
|
||||
</code>
|
||||
</Copy>
|
||||
{/if}
|
||||
{:else}
|
||||
<div
|
||||
class:bx--snippet={true}
|
||||
class:bx--btn--copy={type === 'inline'}
|
||||
class:bx--snippet--expand={expanded}
|
||||
class:bx--snippet--light={light}
|
||||
class:bx--snippet--no-copy={hideCopyButton}
|
||||
class:bx--snippet="{true}"
|
||||
class:bx--btn--copy="{type === 'inline'}"
|
||||
class:bx--snippet--expand="{expanded}"
|
||||
class:bx--snippet--light="{light}"
|
||||
class:bx--snippet--no-copy="{hideCopyButton}"
|
||||
{...$$restProps}
|
||||
class="{type && `bx--snippet--${type}`} {$$restProps.class}"
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
<div
|
||||
role={type === 'single' ? 'textbox' : undefined}
|
||||
tabindex={type === 'single' ? '0' : undefined}
|
||||
class:bx--snippet-container={true}
|
||||
aria-label={$$restProps['aria-label'] || copyLabel || 'code-snippet'}>
|
||||
role="{type === 'single' ? 'textbox' : undefined}"
|
||||
tabindex="{type === 'single' ? '0' : undefined}"
|
||||
class:bx--snippet-container="{true}"
|
||||
aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}">
|
||||
<code>
|
||||
<pre bind:this={ref}>
|
||||
<pre bind:this="{ref}">
|
||||
<slot>{code}</slot>
|
||||
</pre>
|
||||
</code>
|
||||
</div>
|
||||
{#if !hideCopyButton}
|
||||
<CopyButton
|
||||
{feedback}
|
||||
{feedbackTimeout}
|
||||
iconDescription={copyButtonDescription}
|
||||
feedback="{feedback}"
|
||||
feedbackTimeout="{feedbackTimeout}"
|
||||
iconDescription="{copyButtonDescription}"
|
||||
on:click
|
||||
on:animationend />
|
||||
{/if}
|
||||
|
|
@ -183,13 +183,13 @@
|
|||
kind="ghost"
|
||||
size="small"
|
||||
class="bx--snippet-btn--expand"
|
||||
on:click={() => {
|
||||
on:click="{() => {
|
||||
expanded = !expanded;
|
||||
}}>
|
||||
<span class:bx--snippet-btn--text={true}>{expandText}</span>
|
||||
}}">
|
||||
<span class:bx--snippet-btn--text="{true}">{expandText}</span>
|
||||
<ChevronDown16
|
||||
class="bx--icon-chevron--down bx--snippet__icon"
|
||||
aria-label={expandText} />
|
||||
aria-label="{expandText}" />
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -44,9 +44,9 @@
|
|||
style="margin-top: 1rem;" />
|
||||
<Button
|
||||
size="small"
|
||||
on:click={() => {
|
||||
on:click="{() => {
|
||||
selectedIndex = 1;
|
||||
}}
|
||||
}}"
|
||||
style="margin-top: 1rem;">
|
||||
Set item to "Option 2"
|
||||
</Button>
|
||||
|
|
@ -58,12 +58,12 @@
|
|||
bind:ref
|
||||
bind:value
|
||||
bind:selectedIndex
|
||||
on:select={({ detail }) => {
|
||||
on:select="{({ detail }) => {
|
||||
console.log('on:select', detail);
|
||||
}}
|
||||
on:clear={() => {
|
||||
}}"
|
||||
on:clear="{() => {
|
||||
console.log('on:clear');
|
||||
}}
|
||||
{items}
|
||||
{shouldFilterItem} />
|
||||
}}"
|
||||
items="{items}"
|
||||
shouldFilterItem="{shouldFilterItem}" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -172,63 +172,66 @@
|
|||
</script>
|
||||
|
||||
<svelte:body
|
||||
on:click={({ target }) => {
|
||||
on:click="{({ target }) => {
|
||||
if (open && ref && !ref.contains(target)) {
|
||||
open = false;
|
||||
}
|
||||
}} />
|
||||
}}" />
|
||||
|
||||
<div class:bx--list-box__wrapper={true} {...$$restProps}>
|
||||
<div class:bx--list-box__wrapper="{true}" {...$$restProps}>
|
||||
{#if titleText}
|
||||
<label for={id} class:bx--label={true} class:bx--label--disabled={disabled}>
|
||||
<label
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--label--disabled="{disabled}">
|
||||
{titleText}
|
||||
</label>
|
||||
{/if}
|
||||
{#if helperText}
|
||||
<div
|
||||
class:bx--form__helper-text={true}
|
||||
class:bx--form__helper-text--disabled={disabled}>
|
||||
class:bx--form__helper-text="{true}"
|
||||
class:bx--form__helper-text--disabled="{disabled}">
|
||||
{helperText}
|
||||
</div>
|
||||
{/if}
|
||||
<ListBox
|
||||
class="bx--combo-box"
|
||||
id={comboId}
|
||||
aria-label={ariaLabel}
|
||||
{disabled}
|
||||
{invalid}
|
||||
{invalidText}
|
||||
{open}
|
||||
{light}
|
||||
{size}>
|
||||
id="{comboId}"
|
||||
aria-label="{ariaLabel}"
|
||||
disabled="{disabled}"
|
||||
invalid="{invalid}"
|
||||
invalidText="{invalidText}"
|
||||
open="{open}"
|
||||
light="{light}"
|
||||
size="{size}">
|
||||
<ListBoxField
|
||||
role="button"
|
||||
aria-expanded={open}
|
||||
on:click={() => {
|
||||
aria-expanded="{open}"
|
||||
on:click="{() => {
|
||||
open = true;
|
||||
}}
|
||||
{id}
|
||||
{name}
|
||||
{disabled}
|
||||
{translateWithId}>
|
||||
}}"
|
||||
id="{id}"
|
||||
name="{name}"
|
||||
disabled="{disabled}"
|
||||
translateWithId="{translateWithId}">
|
||||
<input
|
||||
bind:this={ref}
|
||||
bind:this="{ref}"
|
||||
tabindex="0"
|
||||
autocomplete="off"
|
||||
aria-autocomplete="list"
|
||||
aria-expanded={open}
|
||||
aria-activedescendant={highlightedId}
|
||||
aria-labelledby={comboId}
|
||||
aria-disabled={disabled}
|
||||
aria-controls={open ? menuId : undefined}
|
||||
aria-owns={open ? menuId : undefined}
|
||||
class:bx--text-input={true}
|
||||
class:bx--text-input--empty={inputValue === ''}
|
||||
on:input={({ target }) => {
|
||||
aria-expanded="{open}"
|
||||
aria-activedescendant="{highlightedId}"
|
||||
aria-labelledby="{comboId}"
|
||||
aria-disabled="{disabled}"
|
||||
aria-controls="{open ? menuId : undefined}"
|
||||
aria-owns="{open ? menuId : undefined}"
|
||||
class:bx--text-input="{true}"
|
||||
class:bx--text-input--empty="{inputValue === ''}"
|
||||
on:input="{({ target }) => {
|
||||
inputValue = target.value;
|
||||
}}
|
||||
}}"
|
||||
on:keydown
|
||||
on:keydown|stopPropagation={({ key }) => {
|
||||
on:keydown|stopPropagation="{({ key }) => {
|
||||
if (key === 'Enter') {
|
||||
open = !open;
|
||||
if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) {
|
||||
|
|
@ -244,56 +247,56 @@
|
|||
} else if (key === 'Escape') {
|
||||
open = false;
|
||||
}
|
||||
}}
|
||||
}}"
|
||||
on:focus
|
||||
on:blur
|
||||
on:blur={({ relatedTarget }) => {
|
||||
on:blur="{({ relatedTarget }) => {
|
||||
if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') {
|
||||
ref.focus();
|
||||
}
|
||||
}}
|
||||
{disabled}
|
||||
{placeholder}
|
||||
{id}
|
||||
value={inputValue} />
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
placeholder="{placeholder}"
|
||||
id="{id}"
|
||||
value="{inputValue}" />
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--list-box__invalid-icon" />
|
||||
{/if}
|
||||
{#if inputValue}
|
||||
<ListBoxSelection
|
||||
on:clear
|
||||
on:clear={() => {
|
||||
on:clear="{() => {
|
||||
selectedIndex = -1;
|
||||
open = false;
|
||||
ref.focus();
|
||||
}}
|
||||
{translateWithId}
|
||||
{disabled}
|
||||
{open} />
|
||||
}}"
|
||||
translateWithId="{translateWithId}"
|
||||
disabled="{disabled}"
|
||||
open="{open}" />
|
||||
{/if}
|
||||
<ListBoxMenuIcon
|
||||
on:click={() => {
|
||||
on:click="{() => {
|
||||
open = !open;
|
||||
}}
|
||||
{translateWithId}
|
||||
{open} />
|
||||
}}"
|
||||
translateWithId="{translateWithId}"
|
||||
open="{open}" />
|
||||
</ListBoxField>
|
||||
{#if open}
|
||||
<ListBoxMenu aria-label={ariaLabel} {id}>
|
||||
<ListBoxMenu aria-label="{ariaLabel}" id="{id}">
|
||||
{#each filteredItems as item, i (item.id || i)}
|
||||
<ListBoxMenuItem
|
||||
id={item.id}
|
||||
active={selectedIndex === i || selectedId === item.id}
|
||||
highlighted={highlightedIndex === i || selectedIndex === i}
|
||||
on:click={() => {
|
||||
id="{item.id}"
|
||||
active="{selectedIndex === i || selectedId === item.id}"
|
||||
highlighted="{highlightedIndex === i || selectedIndex === i}"
|
||||
on:click="{() => {
|
||||
selectedIndex = items
|
||||
.map(({ id }) => id)
|
||||
.indexOf(filteredItems[i].id);
|
||||
open = false;
|
||||
}}
|
||||
on:mouseenter={() => {
|
||||
}}"
|
||||
on:mouseenter="{() => {
|
||||
highlightedIndex = i;
|
||||
}}>
|
||||
}}">
|
||||
{itemToString(item)}
|
||||
</ListBoxMenuItem>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -16,21 +16,21 @@
|
|||
{#if story === undefined}
|
||||
<ComposedModal
|
||||
{...$$props.composedModal}
|
||||
on:click={(e) => {
|
||||
on:click="{(e) => {
|
||||
console.log(e.target);
|
||||
}}>
|
||||
}}">
|
||||
<ModalHeader {...$$props.modalHeader} />
|
||||
<ModalBody
|
||||
{...$$props.modalBody}
|
||||
aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
|
||||
aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}">
|
||||
<div>
|
||||
<PasswordInput bind:type placeholder="Password Input" aria-level="" />
|
||||
<Button
|
||||
kind="ghost"
|
||||
size="field"
|
||||
on:click={() => {
|
||||
on:click="{() => {
|
||||
type = type === 'password' ? 'text' : 'password';
|
||||
}}>
|
||||
}}">
|
||||
Programmatically toggle password
|
||||
</Button>
|
||||
</div>
|
||||
|
|
@ -58,7 +58,7 @@
|
|||
</ModalHeader>
|
||||
<ModalBody
|
||||
{...$$props.modalBody}
|
||||
aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
|
||||
aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}">
|
||||
<p>
|
||||
Please see ModalWrapper for more examples and demo of the functionality.
|
||||
</p>
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button kind="secondary">Cancel</Button>
|
||||
<Button kind={$$props.composedModal.danger ? 'danger' : 'primary'}>
|
||||
<Button kind="{$$props.composedModal.danger ? 'danger' : 'primary'}">
|
||||
Primary
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
|
|
@ -85,8 +85,8 @@
|
|||
<ComposedModal
|
||||
{...$$props.composedModal}
|
||||
open
|
||||
on:close={() => {}}
|
||||
on:submit={() => {}}>
|
||||
on:close="{() => {}}"
|
||||
on:submit="{() => {}}">
|
||||
<ModalHeader
|
||||
{...$$props.modalHeader}
|
||||
title="Passive modal title as the message. Should be direct and 3 lines or
|
||||
|
|
@ -99,20 +99,20 @@
|
|||
{#if story === 'trigger'}
|
||||
<div>
|
||||
<Button
|
||||
on:click={() => {
|
||||
on:click="{() => {
|
||||
open = true;
|
||||
}}>
|
||||
}}">
|
||||
Launch composed modal
|
||||
</Button>
|
||||
</div>
|
||||
<ComposedModal
|
||||
{...$$props.composedModal}
|
||||
{open}
|
||||
on:close={() => (open = false)}>
|
||||
open="{open}"
|
||||
on:close="{() => (open = false)}">
|
||||
<ModalHeader {...$$props.modalHeader} />
|
||||
<ModalBody
|
||||
{...$$props.modalBody}
|
||||
aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
|
||||
aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}">
|
||||
<p>
|
||||
Please see ModalWrapper for more examples and demo of the functionality.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -95,35 +95,35 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
bind:this="{ref}"
|
||||
role="presentation"
|
||||
tabindex="-1"
|
||||
class:bx--modal={true}
|
||||
class:is-visible={open}
|
||||
class:bx--modal--danger={danger}
|
||||
class:bx--modal="{true}"
|
||||
class:is-visible="{open}"
|
||||
class:bx--modal--danger="{danger}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:click={() => {
|
||||
on:click="{() => {
|
||||
if (!didClickInnerModal) open = false;
|
||||
didClickInnerModal = false;
|
||||
}}
|
||||
}}"
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:transitionend
|
||||
on:transitionend={({ currentTarget }) => {
|
||||
on:transitionend="{({ currentTarget }) => {
|
||||
if (didOpen) {
|
||||
focus(currentTarget);
|
||||
didOpen = false;
|
||||
}
|
||||
}}>
|
||||
}}">
|
||||
<div
|
||||
bind:this={innerModal}
|
||||
class:bx--modal-container={true}
|
||||
bind:this="{innerModal}"
|
||||
class:bx--modal-container="{true}"
|
||||
class="{size && `bx--modal-container--${size}`} {containerClass}"
|
||||
on:click={() => {
|
||||
on:click="{() => {
|
||||
didClickInnerModal = true;
|
||||
}}>
|
||||
}}">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,13 +13,13 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
tabindex={hasScrollingContent ? '0' : undefined}
|
||||
role={hasScrollingContent ? 'region' : undefined}
|
||||
class:bx--modal-content={true}
|
||||
class:bx--modal-content--with-form={hasForm}
|
||||
tabindex="{hasScrollingContent ? '0' : undefined}"
|
||||
role="{hasScrollingContent ? 'region' : undefined}"
|
||||
class:bx--modal-content="{true}"
|
||||
class:bx--modal-content--with-form="{hasForm}"
|
||||
{...$$restProps}>
|
||||
<slot />
|
||||
</div>
|
||||
{#if hasScrollingContent}
|
||||
<div class:bx--modal-content--overflow-indicator={true} />
|
||||
<div class:bx--modal-content--overflow-indicator="{true}"></div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -41,18 +41,18 @@
|
|||
const { closeModal, submit } = getContext("ComposedModal");
|
||||
</script>
|
||||
|
||||
<div class:bx--modal-footer={true} {...$$restProps}>
|
||||
<div class:bx--modal-footer="{true}" {...$$restProps}>
|
||||
{#if secondaryButtonText}
|
||||
<Button kind="secondary" class={secondaryClass} on:click={closeModal}>
|
||||
<Button kind="secondary" class="{secondaryClass}" on:click="{closeModal}">
|
||||
{secondaryButtonText}
|
||||
</Button>
|
||||
{/if}
|
||||
{#if primaryButtonText}
|
||||
<Button
|
||||
kind={danger ? 'danger' : 'primary'}
|
||||
disabled={primaryButtonDisabled}
|
||||
class={primaryClass}
|
||||
on:click={submit}>
|
||||
kind="{danger ? 'danger' : 'primary'}"
|
||||
disabled="{primaryButtonDisabled}"
|
||||
class="{primaryClass}"
|
||||
on:click="{submit}">
|
||||
{primaryButtonText}
|
||||
</Button>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -47,19 +47,19 @@
|
|||
const { closeModal } = getContext("ComposedModal");
|
||||
</script>
|
||||
|
||||
<div class:bx--modal-header={true} {...$$restProps}>
|
||||
<div class:bx--modal-header="{true}" {...$$restProps}>
|
||||
{#if label}
|
||||
<p
|
||||
class:bx--modal-header__label={true}
|
||||
class:bx--type-delta={true}
|
||||
class:bx--modal-header__label="{true}"
|
||||
class:bx--type-delta="{true}"
|
||||
class:labelClass>
|
||||
{label}
|
||||
</p>
|
||||
{/if}
|
||||
{#if title}
|
||||
<p
|
||||
class:bx--modal-header__heading={true}
|
||||
class:bx--type-beta={true}
|
||||
class:bx--modal-header__heading="{true}"
|
||||
class:bx--type-beta="{true}"
|
||||
class:titleClass>
|
||||
{title}
|
||||
</p>
|
||||
|
|
@ -67,12 +67,12 @@
|
|||
<slot />
|
||||
<button
|
||||
type="button"
|
||||
title={iconDescription}
|
||||
aria-label={iconDescription}
|
||||
class:bx--modal-close={true}
|
||||
title="{iconDescription}"
|
||||
aria-label="{iconDescription}"
|
||||
class:bx--modal-close="{true}"
|
||||
class:closeClass
|
||||
on:click
|
||||
on:click={closeModal}>
|
||||
on:click="{closeModal}">
|
||||
<Close20 class="bx--modal-close__icon {closeIconClass}" />
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,21 +16,21 @@
|
|||
|
||||
{#if story === 'selected'}
|
||||
<ContentSwitcher
|
||||
{light}
|
||||
on:change={({ detail }) => {
|
||||
light="{light}"
|
||||
on:change="{({ detail }) => {
|
||||
console.log('on:change', detail);
|
||||
}}>
|
||||
}}">
|
||||
<Switch {...$$props} text="First section" />
|
||||
<Switch {...$$props} text="Second section" selected />
|
||||
<Switch {...$$props} text="Third section" />
|
||||
</ContentSwitcher>
|
||||
{:else}
|
||||
<ContentSwitcher
|
||||
{light}
|
||||
light="{light}"
|
||||
bind:selectedIndex
|
||||
on:change={({ detail }) => {
|
||||
on:change="{({ detail }) => {
|
||||
console.log('on:change', detail);
|
||||
}}>
|
||||
}}">
|
||||
<Switch {...$$props} text="First section" />
|
||||
<Switch {...$$props} text="Second section" />
|
||||
<Switch {...$$props}>
|
||||
|
|
@ -42,9 +42,9 @@
|
|||
</ContentSwitcher>
|
||||
<div
|
||||
style="margin-top: 1.5rem"
|
||||
on:click={() => {
|
||||
on:click="{() => {
|
||||
selectedIndex = 1;
|
||||
}}>
|
||||
}}">
|
||||
Programmatically set to second index
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -58,8 +58,8 @@
|
|||
|
||||
<div
|
||||
role="tablist"
|
||||
class:bx--content-switcher={true}
|
||||
class:bx--content-switcher--light={light}
|
||||
class:bx--content-switcher="{true}"
|
||||
class:bx--content-switcher--light="{light}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
|
|||
|
|
@ -52,31 +52,31 @@
|
|||
</script>
|
||||
|
||||
<button
|
||||
bind:this={ref}
|
||||
bind:this="{ref}"
|
||||
role="tab"
|
||||
tabindex={selected ? '0' : '-1'}
|
||||
aria-selected={selected}
|
||||
{disabled}
|
||||
{id}
|
||||
class:bx--content-switcher-btn={true}
|
||||
class:bx--content-switcher--selected={selected}
|
||||
tabindex="{selected ? '0' : '-1'}"
|
||||
aria-selected="{selected}"
|
||||
disabled="{disabled}"
|
||||
id="{id}"
|
||||
class:bx--content-switcher-btn="{true}"
|
||||
class:bx--content-switcher--selected="{selected}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:click|preventDefault={() => {
|
||||
on:click|preventDefault="{() => {
|
||||
ctx.update(id);
|
||||
}}
|
||||
}}"
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keydown
|
||||
on:keydown={({ key }) => {
|
||||
on:keydown="{({ key }) => {
|
||||
if (key === 'ArrowRight') {
|
||||
ctx.change(1);
|
||||
} else if (key === 'ArrowLeft') {
|
||||
ctx.change(-1);
|
||||
}
|
||||
}}>
|
||||
<span class:bx--content-switcher__label={true}>
|
||||
}}">
|
||||
<span class:bx--content-switcher__label="{true}">
|
||||
<slot>{text}</slot>
|
||||
</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -30,35 +30,35 @@
|
|||
</script>
|
||||
|
||||
<button
|
||||
bind:this={ref}
|
||||
bind:this="{ref}"
|
||||
type="button"
|
||||
aria-live="polite"
|
||||
class:bx--copy={true}
|
||||
class:bx--copy-btn--animating={animation}
|
||||
aria-label={animation ? feedback : undefined}
|
||||
class:bx--copy="{true}"
|
||||
class:bx--copy-btn--animating="{animation}"
|
||||
aria-label="{animation ? feedback : undefined}"
|
||||
{...$$restProps}
|
||||
class="{$$restProps.class} {animation && `bx--copy-btn--${animation}`}"
|
||||
on:click
|
||||
on:click={() => {
|
||||
on:click="{() => {
|
||||
if (animation === 'fade-in') return;
|
||||
animation = 'fade-in';
|
||||
timeout = setTimeout(() => {
|
||||
animation = 'fade-out';
|
||||
}, feedbackTimeout);
|
||||
}}
|
||||
}}"
|
||||
on:animationend
|
||||
on:animationend={({ animationName }) => {
|
||||
on:animationend="{({ animationName }) => {
|
||||
if (animationName === 'hide-feedback') {
|
||||
animation = undefined;
|
||||
}
|
||||
}}>
|
||||
}}">
|
||||
<slot>
|
||||
{#if animation}{feedback || $$restProps['aria-label']}{/if}
|
||||
</slot>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class:bx--assistive-text={true}
|
||||
class:bx--copy-btn__feedback={true}>
|
||||
class:bx--assistive-text="{true}"
|
||||
class:bx--copy-btn__feedback="{true}">
|
||||
{feedback}
|
||||
</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
|
||||
<CopyButton
|
||||
{...$$props}
|
||||
on:click={() => {
|
||||
on:click="{() => {
|
||||
console.log('click');
|
||||
}}
|
||||
on:animationend={(e) => {
|
||||
}}"
|
||||
on:animationend="{(e) => {
|
||||
console.log('animation end', e.animationName);
|
||||
}} />
|
||||
}}" />
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@
|
|||
|
||||
<Copy
|
||||
class="bx--copy-btn"
|
||||
aria-label={iconDescription}
|
||||
title={iconDescription}
|
||||
aria-label="{iconDescription}"
|
||||
title="{iconDescription}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:animationend>
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@
|
|||
</script>
|
||||
|
||||
{#if story === 'composed'}
|
||||
<DataTable {...$$props} {rows} {headers} let:props>
|
||||
<DataTable {...$$props} rows="{rows}" headers="{headers}" let:props>
|
||||
<TableContainer
|
||||
title="DataTable"
|
||||
description="With default options"
|
||||
|
|
@ -108,44 +108,44 @@
|
|||
{:else if story === 'sortable'}
|
||||
<DataTable
|
||||
bind:sortable
|
||||
title={$$props.title}
|
||||
description={$$props.description}
|
||||
zebra={$$props.zebra}
|
||||
size={$$props.size}
|
||||
stickyHeader={$$props.stickyHeader}
|
||||
on:click={({ detail }) => {
|
||||
title="{$$props.title}"
|
||||
description="{$$props.description}"
|
||||
zebra="{$$props.zebra}"
|
||||
size="{$$props.size}"
|
||||
stickyHeader="{$$props.stickyHeader}"
|
||||
on:click="{({ detail }) => {
|
||||
console.log('on:click', detail);
|
||||
}}
|
||||
on:click:header={({ detail }) => {
|
||||
}}"
|
||||
on:click:header="{({ detail }) => {
|
||||
console.log('on:click:header', detail);
|
||||
}}
|
||||
on:click:row={({ detail }) => {
|
||||
}}"
|
||||
on:click:row="{({ detail }) => {
|
||||
console.log('on:click:row', detail);
|
||||
}}
|
||||
on:click:cell={({ detail }) => {
|
||||
}}"
|
||||
on:click:cell="{({ detail }) => {
|
||||
console.log('on:click:cell', detail);
|
||||
}}
|
||||
{rows}
|
||||
{headers} />
|
||||
}}"
|
||||
rows="{rows}"
|
||||
headers="{headers}" />
|
||||
{:else}
|
||||
<DataTable
|
||||
title={$$props.title}
|
||||
description={$$props.description}
|
||||
zebra={$$props.zebra}
|
||||
size={$$props.size}
|
||||
stickyHeader={$$props.stickyHeader}
|
||||
on:click={({ detail }) => {
|
||||
title="{$$props.title}"
|
||||
description="{$$props.description}"
|
||||
zebra="{$$props.zebra}"
|
||||
size="{$$props.size}"
|
||||
stickyHeader="{$$props.stickyHeader}"
|
||||
on:click="{({ detail }) => {
|
||||
console.log('on:click', detail);
|
||||
}}
|
||||
on:click:header={({ detail }) => {
|
||||
}}"
|
||||
on:click:header="{({ detail }) => {
|
||||
console.log('on:click:header', detail);
|
||||
}}
|
||||
on:click:row={({ detail }) => {
|
||||
}}"
|
||||
on:click:row="{({ detail }) => {
|
||||
console.log('on:click:row', detail);
|
||||
}}
|
||||
on:click:cell={({ detail }) => {
|
||||
}}"
|
||||
on:click:cell="{({ detail }) => {
|
||||
console.log('on:click:cell', detail);
|
||||
}}
|
||||
{rows}
|
||||
{headers} />
|
||||
}}"
|
||||
rows="{rows}"
|
||||
headers="{headers}" />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -115,14 +115,18 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<slot {props}>
|
||||
<TableContainer {title} {description} {...$$restProps}>
|
||||
<Table {zebra} {size} {stickyHeader} {sortable}>
|
||||
<slot props="{props}">
|
||||
<TableContainer title="{title}" description="{description}" {...$$restProps}>
|
||||
<Table
|
||||
zebra="{zebra}"
|
||||
size="{size}"
|
||||
stickyHeader="{stickyHeader}"
|
||||
sortable="{sortable}">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
{#each headers as header, i (header.key)}
|
||||
<TableHeader
|
||||
on:click={() => {
|
||||
on:click="{() => {
|
||||
dispatch('click', { header });
|
||||
let active = header.key === $sortHeader.key;
|
||||
let currentSortDirection = active ? $sortHeader.sortDirection : 'none';
|
||||
|
|
@ -133,7 +137,7 @@
|
|||
key: header.key,
|
||||
sortDirection,
|
||||
});
|
||||
}}>
|
||||
}}">
|
||||
{header.value}
|
||||
</TableHeader>
|
||||
{/each}
|
||||
|
|
@ -142,16 +146,16 @@
|
|||
<TableBody>
|
||||
{#each sorting ? sortedRows : rows as row, i (row.id)}
|
||||
<TableRow
|
||||
on:click={() => {
|
||||
on:click="{() => {
|
||||
dispatch('click', { row });
|
||||
dispatch('click:row', row);
|
||||
}}>
|
||||
}}">
|
||||
{#each row.cells as cell, j (cell.key)}
|
||||
<TableCell
|
||||
on:click={() => {
|
||||
on:click="{() => {
|
||||
dispatch('click', { row, cell });
|
||||
dispatch('click:cell', cell);
|
||||
}}>
|
||||
}}">
|
||||
{cell.value}
|
||||
</TableCell>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -37,31 +37,31 @@
|
|||
</script>
|
||||
|
||||
{#if stickyHeader}
|
||||
<section class:bx--data-table_inner-container={true} {...$$restProps}>
|
||||
<section class:bx--data-table_inner-container="{true}" {...$$restProps}>
|
||||
<table
|
||||
class:bx--data-table={true}
|
||||
class:bx--data-table--compact={size === 'compact'}
|
||||
class:bx--data-table--short={size === 'short'}
|
||||
class:bx--data-table--tall={size === 'tall'}
|
||||
class:bx--data-table--sort={sortable}
|
||||
class:bx--data-table--zebra={zebra}
|
||||
class:bx--data-table--static={useStaticWidth}
|
||||
class:bx--data-table--no-border={!shouldShowBorder}
|
||||
class:bx--data-table--sticky-header={stickyHeader}>
|
||||
class:bx--data-table="{true}"
|
||||
class:bx--data-table--compact="{size === 'compact'}"
|
||||
class:bx--data-table--short="{size === 'short'}"
|
||||
class:bx--data-table--tall="{size === 'tall'}"
|
||||
class:bx--data-table--sort="{sortable}"
|
||||
class:bx--data-table--zebra="{zebra}"
|
||||
class:bx--data-table--static="{useStaticWidth}"
|
||||
class:bx--data-table--no-border="{!shouldShowBorder}"
|
||||
class:bx--data-table--sticky-header="{stickyHeader}">
|
||||
<slot />
|
||||
</table>
|
||||
</section>
|
||||
{:else}
|
||||
<table
|
||||
class:bx--data-table={true}
|
||||
class:bx--data-table--compact={size === 'compact'}
|
||||
class:bx--data-table--short={size === 'short'}
|
||||
class:bx--data-table--tall={size === 'tall'}
|
||||
class:bx--data-table--sort={sortable}
|
||||
class:bx--data-table--zebra={zebra}
|
||||
class:bx--data-table--static={useStaticWidth}
|
||||
class:bx--data-table--no-border={!shouldShowBorder}
|
||||
class:bx--data-table--sticky-header={stickyHeader}
|
||||
class:bx--data-table="{true}"
|
||||
class:bx--data-table--compact="{size === 'compact'}"
|
||||
class:bx--data-table--short="{size === 'short'}"
|
||||
class:bx--data-table--tall="{size === 'tall'}"
|
||||
class:bx--data-table--sort="{sortable}"
|
||||
class:bx--data-table--zebra="{zebra}"
|
||||
class:bx--data-table--static="{useStaticWidth}"
|
||||
class:bx--data-table--no-border="{!shouldShowBorder}"
|
||||
class:bx--data-table--sticky-header="{stickyHeader}"
|
||||
{...$$restProps}>
|
||||
<slot />
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -19,13 +19,13 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class:bx--data-table-container={true}
|
||||
class:bx--data-table--max-width={stickyHeader}
|
||||
class:bx--data-table-container="{true}"
|
||||
class:bx--data-table--max-width="{stickyHeader}"
|
||||
{...$$restProps}>
|
||||
{#if title}
|
||||
<div class:bx--data-table-header={true}>
|
||||
<h4 class:bx--data-table-header__title={true}>{title}</h4>
|
||||
<p class:bx--data-table-header__description={true}>{description}</p>
|
||||
<div class:bx--data-table-header="{true}">
|
||||
<h4 class:bx--data-table-header__title="{true}">{title}</h4>
|
||||
<p class:bx--data-table-header__description="{true}">{description}</p>
|
||||
</div>
|
||||
{/if}
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -32,37 +32,37 @@
|
|||
|
||||
{#if $tableSortable}
|
||||
<th
|
||||
aria-sort={active ? $sortHeader.sortDirection : 'none'}
|
||||
{scope}
|
||||
{id}
|
||||
aria-sort="{active ? $sortHeader.sortDirection : 'none'}"
|
||||
scope="{scope}"
|
||||
id="{id}"
|
||||
{...$$restProps}
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
<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="{true}"
|
||||
class:bx--table-sort--active="{active}"
|
||||
class:bx--table-sort--ascending="{active && $sortHeader.sortDirection === 'descending'}"
|
||||
on:click>
|
||||
<span class:bx--table-header-label={true}>
|
||||
<span class:bx--table-header-label="{true}">
|
||||
<slot />
|
||||
</span>
|
||||
<ArrowUp20 aria-label={ariaLabel} class="bx--table-sort__icon" />
|
||||
<ArrowUp20 aria-label="{ariaLabel}" class="bx--table-sort__icon" />
|
||||
<ArrowsVertical20
|
||||
aria-label={ariaLabel}
|
||||
aria-label="{ariaLabel}"
|
||||
class="bx--table-sort__icon-unsorted" />
|
||||
</button>
|
||||
</th>
|
||||
{:else}
|
||||
<th
|
||||
{scope}
|
||||
{id}
|
||||
scope="{scope}"
|
||||
id="{id}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
<span class:bx--table-header-label={true}>
|
||||
<span class:bx--table-header-label="{true}">
|
||||
<slot />
|
||||
</span>
|
||||
</th>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</script>
|
||||
|
||||
<tr
|
||||
class:bx--data-table--selected={isSelected}
|
||||
class:bx--data-table--selected="{isSelected}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
|
|||
|
|
@ -37,10 +37,10 @@
|
|||
</script>
|
||||
|
||||
<table
|
||||
class:bx--skeleton={true}
|
||||
class:bx--data-table={true}
|
||||
class:bx--data-table--zebra={zebra}
|
||||
class:bx--data-table--compact={compact}
|
||||
class:bx--skeleton="{true}"
|
||||
class:bx--data-table="{true}"
|
||||
class:bx--data-table--zebra="{zebra}"
|
||||
class:bx--data-table--compact="{compact}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
@ -56,13 +56,13 @@
|
|||
<tbody>
|
||||
<tr>
|
||||
{#each cols as col, i (col)}
|
||||
<td><span /></td>
|
||||
<td><span></span></td>
|
||||
{/each}
|
||||
</tr>
|
||||
{#each Array.from({ length: rows - 1 }, (_, i) => i) as row, i (row)}
|
||||
<tr>
|
||||
{#each cols as col, j (col)}
|
||||
<td />
|
||||
<td></td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -13,22 +13,24 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class:bx--form-item={true}
|
||||
class:bx--form-item="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
<div
|
||||
class:bx--date-picker={true}
|
||||
class:bx--skeleton={true}
|
||||
class:bx--date-picker--range={true}
|
||||
class:bx--date-picker--short={!range}
|
||||
class:bx--date-picker--simple={!range}>
|
||||
class:bx--date-picker="{true}"
|
||||
class:bx--skeleton="{true}"
|
||||
class:bx--date-picker--range="{true}"
|
||||
class:bx--date-picker--short="{!range}"
|
||||
class:bx--date-picker--simple="{!range}">
|
||||
{#each Array.from({ length: range ? 2 : 1 }, (_, i) => i) as input, i (input)}
|
||||
<div class:bx--date-picker-container={true}>
|
||||
<label for={id} class:bx--label={true} />
|
||||
<div class:bx--date-picker__input={true} class:bx--skeleton={true} />
|
||||
<div class:bx--date-picker-container="{true}">
|
||||
<label for="{id}" class:bx--label="{true}"></label>
|
||||
<div
|
||||
class:bx--date-picker__input="{true}"
|
||||
class:bx--skeleton="{true}"></div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,22 +17,22 @@
|
|||
{...$$props.datePicker}
|
||||
bind:value
|
||||
datePickerType="single"
|
||||
on:change={({ detail }) => {
|
||||
on:change="{({ detail }) => {
|
||||
console.log('change', detail);
|
||||
}}>
|
||||
}}">
|
||||
<DatePickerInput
|
||||
{...$$props.datePickerInput}
|
||||
on:close={() => {
|
||||
on:close="{() => {
|
||||
console.log('on:close');
|
||||
}}
|
||||
on:input={() => {
|
||||
}}"
|
||||
on:input="{() => {
|
||||
console.log('on:input');
|
||||
}} />
|
||||
}}" />
|
||||
</DatePicker>
|
||||
<button
|
||||
on:click|preventDefault={() => {
|
||||
on:click|preventDefault="{() => {
|
||||
value = '12/12/2020';
|
||||
}}
|
||||
}}"
|
||||
style="margin-top: 1rem">
|
||||
Set date to 12/12/2020
|
||||
</button>
|
||||
|
|
@ -53,9 +53,9 @@
|
|||
{...$$props.datePicker}
|
||||
bind:datePickerType
|
||||
bind:value
|
||||
on:change={({ detail }) => {
|
||||
on:change="{({ detail }) => {
|
||||
console.log('on:change', detail);
|
||||
}}>
|
||||
}}">
|
||||
<DatePickerInput {...$$props.datePickerInput} />
|
||||
</DatePicker>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -173,7 +173,7 @@
|
|||
</script>
|
||||
|
||||
<svelte:body
|
||||
on:click={({ target }) => {
|
||||
on:click="{({ target }) => {
|
||||
if (!calendar || !calendar.isOpen) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -183,21 +183,21 @@
|
|||
if (!calendar.calendarContainer.contains(target)) {
|
||||
calendar.close();
|
||||
}
|
||||
}} />
|
||||
}}" />
|
||||
|
||||
<div
|
||||
class:bx--form-item={true}
|
||||
class:bx--form-item="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
<div
|
||||
bind:this={datePickerRef}
|
||||
{id}
|
||||
class:bx--date-picker={true}
|
||||
class:bx--date-picker--short={short}
|
||||
class:bx--date-picker--light={light}
|
||||
bind:this="{datePickerRef}"
|
||||
id="{id}"
|
||||
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'}">
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -100,58 +100,58 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class:bx--date-picker-container={true}
|
||||
class:bx--date-picker--nolabel={!labelText}
|
||||
class:bx--date-picker-container="{true}"
|
||||
class:bx--date-picker--nolabel="{!labelText}"
|
||||
{...$$restProps}>
|
||||
{#if labelText}
|
||||
<label
|
||||
for={id}
|
||||
class:bx--label={true}
|
||||
class:bx--visually-hidden={hideLabel}
|
||||
class:bx--label--disabled={disabled}>
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--visually-hidden="{hideLabel}"
|
||||
class:bx--label--disabled="{disabled}">
|
||||
{labelText}
|
||||
</label>
|
||||
{/if}
|
||||
<div class:bx--date-picker-input__wrapper={true}>
|
||||
<div class:bx--date-picker-input__wrapper="{true}">
|
||||
<input
|
||||
bind:this={ref}
|
||||
data-invalid={invalid || undefined}
|
||||
value={!$range ? $inputValue : undefined}
|
||||
{id}
|
||||
{name}
|
||||
{placeholder}
|
||||
{type}
|
||||
{pattern}
|
||||
{disabled}
|
||||
class:bx--date-picker__input={true}
|
||||
class={size && `bx--date-picker__input--${size}`}
|
||||
bind:this="{ref}"
|
||||
data-invalid="{invalid || undefined}"
|
||||
value="{!$range ? $inputValue : undefined}"
|
||||
id="{id}"
|
||||
name="{name}"
|
||||
placeholder="{placeholder}"
|
||||
type="{type}"
|
||||
pattern="{pattern}"
|
||||
disabled="{disabled}"
|
||||
class:bx--date-picker__input="{true}"
|
||||
class="{size && `bx--date-picker__input--${size}`}"
|
||||
on:input
|
||||
on:input={({ target }) => {
|
||||
on:input="{({ target }) => {
|
||||
updateValue({ type: 'input', value: target.value });
|
||||
}}
|
||||
on:change={({ target }) => {
|
||||
}}"
|
||||
on:change="{({ target }) => {
|
||||
updateValue({ type: 'change', value: target.value });
|
||||
}}
|
||||
}}"
|
||||
on:keydown
|
||||
on:keydown={({ key }) => {
|
||||
on:keydown="{({ key }) => {
|
||||
if (key === 'ArrowDown') {
|
||||
focusCalendar();
|
||||
}
|
||||
}}
|
||||
}}"
|
||||
on:blur
|
||||
on:blur={({ relatedTarget }) => {
|
||||
on:blur="{({ relatedTarget }) => {
|
||||
blurInput(relatedTarget);
|
||||
}} />
|
||||
}}" />
|
||||
{#if $hasCalendar}
|
||||
<Calendar16
|
||||
role="img"
|
||||
class="bx--date-picker__icon"
|
||||
aria-label={iconDescription}
|
||||
title={iconDescription}
|
||||
on:click={openCalendar} />
|
||||
aria-label="{iconDescription}"
|
||||
title="{iconDescription}"
|
||||
on:click="{openCalendar}" />
|
||||
{/if}
|
||||
</div>
|
||||
{#if invalid}
|
||||
<div class:bx--form-requirement={true}>{invalidText}</div>
|
||||
<div class:bx--form-requirement="{true}">{invalidText}</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,17 +7,17 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class:bx--skeleton={true}
|
||||
class:bx--dropdown-v2={true}
|
||||
class:bx--list-box={true}
|
||||
class:bx--form-item={true}
|
||||
class:bx--list-box--inline={inline}
|
||||
class:bx--skeleton="{true}"
|
||||
class:bx--dropdown-v2="{true}"
|
||||
class:bx--list-box="{true}"
|
||||
class:bx--form-item="{true}"
|
||||
class:bx--list-box--inline="{inline}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
<div role="button" class:bx--list-box__field={true}>
|
||||
<span class:bx--list-box__label={true} />
|
||||
<div role="button" class:bx--list-box__field="{true}">
|
||||
<span class:bx--list-box__label="{true}"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -32,13 +32,13 @@
|
|||
<div style="margin-top: 2rem; margin-bottom: 2rem;">
|
||||
<Button
|
||||
size="small"
|
||||
on:click={() => {
|
||||
on:click="{() => {
|
||||
selectedIndex = selectedIndex > -1 ? -1 : 1;
|
||||
}}>
|
||||
}}">
|
||||
{selectedIndex > -1 ? 'Clear selected item' : 'Set item to "Option 2"'}
|
||||
</Button>
|
||||
</div>
|
||||
<div style="width: 300px">
|
||||
<Dropdown {...$$props} bind:selectedIndex {items} />
|
||||
<Dropdown {...$$props} bind:selectedIndex items="{items}" />
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -145,60 +145,63 @@
|
|||
</script>
|
||||
|
||||
<svelte:body
|
||||
on:click={({ target }) => {
|
||||
on:click="{({ target }) => {
|
||||
if (open && ref && !ref.contains(target)) {
|
||||
open = false;
|
||||
}
|
||||
}} />
|
||||
}}" />
|
||||
|
||||
<div
|
||||
class:bx--dropdown__wrapper={true}
|
||||
class:bx--list-box__wrapper={true}
|
||||
class:bx--dropdown__wrapper--inline={inline}
|
||||
class:bx--list-box__wrapper--inline={inline}
|
||||
class:bx--dropdown__wrapper--inline--invalid={inline && invalid}
|
||||
class:bx--dropdown__wrapper="{true}"
|
||||
class:bx--list-box__wrapper="{true}"
|
||||
class:bx--dropdown__wrapper--inline="{inline}"
|
||||
class:bx--list-box__wrapper--inline="{inline}"
|
||||
class:bx--dropdown__wrapper--inline--invalid="{inline && invalid}"
|
||||
{...$$restProps}>
|
||||
{#if titleText}
|
||||
<label for={id} class:bx--label={true} class:bx--label--disabled={disabled}>
|
||||
<label
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--label--disabled="{disabled}">
|
||||
{titleText}
|
||||
</label>
|
||||
{/if}
|
||||
{#if !inline && helperText}
|
||||
<div
|
||||
class:bx--form__helper-text={true}
|
||||
class:bx--form__helper-text--disabled={disabled}>
|
||||
class:bx--form__helper-text="{true}"
|
||||
class:bx--form__helper-text--disabled="{disabled}">
|
||||
{helperText}
|
||||
</div>
|
||||
{/if}
|
||||
<ListBox
|
||||
{type}
|
||||
{size}
|
||||
{id}
|
||||
{name}
|
||||
aria-label={$$props['aria-label']}
|
||||
type="{type}"
|
||||
size="{size}"
|
||||
id="{id}"
|
||||
name="{name}"
|
||||
aria-label="{$$props['aria-label']}"
|
||||
class="bx--dropdown {invalid && 'bx--dropdown--invalid'}
|
||||
{open && 'bx--dropdown--open'}
|
||||
{inline && 'bx--dropdown--inline'}
|
||||
{disabled && 'bx--dropdown--disabled'}
|
||||
{light && 'bx--dropdown--light'}"
|
||||
on:click={({ target }) => {
|
||||
on:click="{({ target }) => {
|
||||
open = ref.contains(target) ? !open : false;
|
||||
}}
|
||||
{disabled}
|
||||
{open}
|
||||
{invalid}
|
||||
{invalidText}
|
||||
{light}>
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
open="{open}"
|
||||
invalid="{invalid}"
|
||||
invalidText="{invalidText}"
|
||||
light="{light}">
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--list-box__invalid-icon" />
|
||||
{/if}
|
||||
<button
|
||||
bind:this={ref}
|
||||
class:bx--list-box__field={true}
|
||||
bind:this="{ref}"
|
||||
class:bx--list-box__field="{true}"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
aria-expanded={open}
|
||||
on:keydown={({ key }) => {
|
||||
aria-expanded="{open}"
|
||||
on:keydown="{({ key }) => {
|
||||
if (key === 'Enter') {
|
||||
open = !open;
|
||||
if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) {
|
||||
|
|
@ -213,34 +216,34 @@
|
|||
} else if (key === 'ArrowUp') {
|
||||
change(-1);
|
||||
}
|
||||
}}
|
||||
on:blur={({ relatedTarget }) => {
|
||||
}}"
|
||||
on:blur="{({ relatedTarget }) => {
|
||||
if (relatedTarget) {
|
||||
ref.focus();
|
||||
}
|
||||
}}
|
||||
{disabled}
|
||||
{translateWithId}
|
||||
{id}>
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
translateWithId="{translateWithId}"
|
||||
id="{id}">
|
||||
<span class="bx--list-box__label">
|
||||
{#if selectedItem}{itemToString(selectedItem)}{:else}{label}{/if}
|
||||
</span>
|
||||
<ListBoxMenuIcon {open} {translateWithId} />
|
||||
<ListBoxMenuIcon open="{open}" translateWithId="{translateWithId}" />
|
||||
</button>
|
||||
{#if open}
|
||||
<ListBoxMenu aria-labelledby={id} {id}>
|
||||
<ListBoxMenu aria-labelledby="{id}" id="{id}">
|
||||
{#each items as item, i (item.id || i)}
|
||||
<ListBoxMenuItem
|
||||
id={item.id}
|
||||
active={selectedIndex === i || selectedId === item.id}
|
||||
highlighted={highlightedIndex === i || selectedIndex === i}
|
||||
on:click={() => {
|
||||
id="{item.id}"
|
||||
active="{selectedIndex === i || selectedId === item.id}"
|
||||
highlighted="{highlightedIndex === i || selectedIndex === i}"
|
||||
on:click="{() => {
|
||||
selectedId = item.id;
|
||||
selectedIndex = i;
|
||||
}}
|
||||
on:mouseenter={() => {
|
||||
}}"
|
||||
on:mouseenter="{() => {
|
||||
highlightedIndex = i;
|
||||
}}>
|
||||
}}">
|
||||
{itemToString(item)}
|
||||
</ListBoxMenuItem>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class:bx--form-item={true}
|
||||
class:bx--form-item="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
|
|||
|
|
@ -19,36 +19,36 @@
|
|||
{:else if story === 'drop container'}
|
||||
<FileUploaderDropContainer
|
||||
{...$$props}
|
||||
on:add={({ detail }) => {
|
||||
on:add="{({ detail }) => {
|
||||
console.log(detail);
|
||||
}} />
|
||||
}}" />
|
||||
{:else if story === 'item'}
|
||||
<FileUploaderItem
|
||||
{...$$props}
|
||||
on:delete={({ detail }) => {
|
||||
on:delete="{({ detail }) => {
|
||||
console.log(detail);
|
||||
}}
|
||||
on:click={() => {
|
||||
}}"
|
||||
on:click="{() => {
|
||||
console.log('click');
|
||||
}} />
|
||||
}}" />
|
||||
{:else if story === 'uploader'}
|
||||
<div class="bx--file__container">
|
||||
<FileUploader
|
||||
bind:this={fileUploader}
|
||||
bind:this="{fileUploader}"
|
||||
{...$$props}
|
||||
bind:files
|
||||
on:add={({ detail }) => {
|
||||
on:add="{({ detail }) => {
|
||||
console.log('add', detail);
|
||||
}}
|
||||
on:remove={({ detail }) => {
|
||||
}}"
|
||||
on:remove="{({ detail }) => {
|
||||
console.log('remove', detail);
|
||||
}} />
|
||||
}}" />
|
||||
<Button
|
||||
kind="secondary"
|
||||
size="small"
|
||||
style="margin-top: 1rem"
|
||||
{disabled}
|
||||
on:click={fileUploader.clearFiles}>
|
||||
disabled="{disabled}"
|
||||
on:click="{fileUploader.clearFiles}">
|
||||
Clear File{files.length === 1 ? '' : 's'}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -90,43 +90,43 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class:bx--form-item={true}
|
||||
class:bx--form-item="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
<strong class:bx--file--label={true}>{labelTitle}</strong>
|
||||
<p class:bx--label-description={true}>{labelDescription}</p>
|
||||
<strong class:bx--file--label="{true}">{labelTitle}</strong>
|
||||
<p class:bx--label-description="{true}">{labelDescription}</p>
|
||||
<FileUploaderButton
|
||||
disableLabelChanges
|
||||
labelText={buttonLabel}
|
||||
{accept}
|
||||
{name}
|
||||
{multiple}
|
||||
{kind}
|
||||
labelText="{buttonLabel}"
|
||||
accept="{accept}"
|
||||
name="{name}"
|
||||
multiple="{multiple}"
|
||||
kind="{kind}"
|
||||
on:change
|
||||
on:change={({ target }) => {
|
||||
on:change="{({ target }) => {
|
||||
files = [...target.files].map(({ name }) => name);
|
||||
}} />
|
||||
<div class:bx--file-container={true}>
|
||||
}}" />
|
||||
<div class:bx--file-container="{true}">
|
||||
{#each files as name, i (name)}
|
||||
<span class:bx--file__selected-file={true}>
|
||||
<p class:bx--file-filename={true}>{name}</p>
|
||||
<span class:bx--file__state-container={true}>
|
||||
<span class:bx--file__selected-file="{true}">
|
||||
<p class:bx--file-filename="{true}">{name}</p>
|
||||
<span class:bx--file__state-container="{true}">
|
||||
<Filename
|
||||
{iconDescription}
|
||||
{status}
|
||||
iconDescription="{iconDescription}"
|
||||
status="{status}"
|
||||
on:keydown
|
||||
on:keydown={({ key }) => {
|
||||
on:keydown="{({ key }) => {
|
||||
if (key === ' ' || key === 'Enter') {
|
||||
files = files.filter((_, index) => index !== i);
|
||||
}
|
||||
}}
|
||||
}}"
|
||||
on:click
|
||||
on:click={() => {
|
||||
on:click="{() => {
|
||||
files = files.filter((_, index) => index !== i);
|
||||
}} />
|
||||
}}" />
|
||||
</span>
|
||||
</span>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -67,41 +67,41 @@
|
|||
</script>
|
||||
|
||||
<label
|
||||
aria-disabled={disabled}
|
||||
for={id}
|
||||
tabindex={disabled ? '-1' : tabindex}
|
||||
class:bx--btn={true}
|
||||
class:bx--btn--sm={true}
|
||||
class:bx--btn--disabled={disabled}
|
||||
class={kind && `bx--btn--${kind}`}
|
||||
aria-disabled="{disabled}"
|
||||
for="{id}"
|
||||
tabindex="{disabled ? '-1' : tabindex}"
|
||||
class:bx--btn="{true}"
|
||||
class:bx--btn--sm="{true}"
|
||||
class:bx--btn--disabled="{disabled}"
|
||||
class="{kind && `bx--btn--${kind}`}"
|
||||
on:keydown
|
||||
on:keydown={({ key }) => {
|
||||
on:keydown="{({ key }) => {
|
||||
if (key === ' ' || key === 'Enter') {
|
||||
ref.click();
|
||||
}
|
||||
}}>
|
||||
<span {role}>{labelText}</span>
|
||||
}}">
|
||||
<span role="{role}">{labelText}</span>
|
||||
</label>
|
||||
<input
|
||||
bind:this={ref}
|
||||
bind:this="{ref}"
|
||||
type="file"
|
||||
tabindex="-1"
|
||||
{accept}
|
||||
{disabled}
|
||||
{id}
|
||||
{multiple}
|
||||
{name}
|
||||
class:bx--visually-hidden={true}
|
||||
accept="{accept}"
|
||||
disabled="{disabled}"
|
||||
id="{id}"
|
||||
multiple="{multiple}"
|
||||
name="{name}"
|
||||
class:bx--visually-hidden="{true}"
|
||||
{...$$restProps}
|
||||
on:change|stopPropagation
|
||||
on:change|stopPropagation={({ target }) => {
|
||||
on:change|stopPropagation="{({ target }) => {
|
||||
const files = target.files;
|
||||
const length = files.length;
|
||||
if (files && !disableLabelChanges) {
|
||||
labelText = length > 1 ? `${length} files` : files[0].name;
|
||||
}
|
||||
}}
|
||||
}}"
|
||||
on:click
|
||||
on:click={({ target }) => {
|
||||
on:click="{({ target }) => {
|
||||
target.value = null;
|
||||
}} />
|
||||
}}" />
|
||||
|
|
|
|||
|
|
@ -72,63 +72,63 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class:bx--file={true}
|
||||
class:bx--file="{true}"
|
||||
{...$$restProps}
|
||||
on:dragover
|
||||
on:dragover|preventDefault|stopPropagation={({ dataTransfer }) => {
|
||||
on:dragover|preventDefault|stopPropagation="{({ dataTransfer }) => {
|
||||
if (!disabled) {
|
||||
over = true;
|
||||
dataTransfer.dropEffect = 'copy';
|
||||
}
|
||||
}}
|
||||
}}"
|
||||
on:dragleave
|
||||
on:dragleave|preventDefault|stopPropagation={({ dataTransfer }) => {
|
||||
on:dragleave|preventDefault|stopPropagation="{({ dataTransfer }) => {
|
||||
if (!disabled) {
|
||||
over = false;
|
||||
dataTransfer.dropEffect = 'move';
|
||||
}
|
||||
}}
|
||||
}}"
|
||||
on:drop
|
||||
on:drop|preventDefault|stopPropagation={({ dataTransfer }) => {
|
||||
on:drop|preventDefault|stopPropagation="{({ dataTransfer }) => {
|
||||
if (!disabled) {
|
||||
over = false;
|
||||
dispatch('add', validateFiles(dataTransfer.files));
|
||||
}
|
||||
}}>
|
||||
}}">
|
||||
<label
|
||||
for={id}
|
||||
{tabindex}
|
||||
class:bx--file-browse-btn={true}
|
||||
class:bx--file-browse-btn--disabled={disabled}
|
||||
for="{id}"
|
||||
tabindex="{tabindex}"
|
||||
class:bx--file-browse-btn="{true}"
|
||||
class:bx--file-browse-btn--disabled="{disabled}"
|
||||
on:keydown
|
||||
on:keydown={({ key }) => {
|
||||
on:keydown="{({ key }) => {
|
||||
if (key === ' ' || key === 'Enter') {
|
||||
ref.click();
|
||||
}
|
||||
}}>
|
||||
}}">
|
||||
<div
|
||||
{role}
|
||||
class:bx--file__drop-container={true}
|
||||
class:bx--file__drop-container--drag-over={over}>
|
||||
role="{role}"
|
||||
class:bx--file__drop-container="{true}"
|
||||
class:bx--file__drop-container--drag-over="{over}">
|
||||
{labelText}
|
||||
<input
|
||||
bind:this={ref}
|
||||
bind:this="{ref}"
|
||||
type="file"
|
||||
tabindex="-1"
|
||||
{id}
|
||||
{disabled}
|
||||
{accept}
|
||||
{name}
|
||||
{multiple}
|
||||
class:bx--file-input={true}
|
||||
id="{id}"
|
||||
disabled="{disabled}"
|
||||
accept="{accept}"
|
||||
name="{name}"
|
||||
multiple="{multiple}"
|
||||
class:bx--file-input="{true}"
|
||||
on:change
|
||||
on:change={({ target }) => {
|
||||
on:change="{({ target }) => {
|
||||
dispatch('add', validateFiles(target.files));
|
||||
}}
|
||||
}}"
|
||||
on:click
|
||||
on:click={({ target }) => {
|
||||
on:click="{({ target }) => {
|
||||
target.value = null;
|
||||
}} />
|
||||
}}" />
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -48,33 +48,33 @@
|
|||
</script>
|
||||
|
||||
<span
|
||||
{id}
|
||||
class:bx--file__selected-file={true}
|
||||
class:bx--file__selected-file--invalid={invalid}
|
||||
id="{id}"
|
||||
class:bx--file__selected-file="{true}"
|
||||
class:bx--file__selected-file--invalid="{invalid}"
|
||||
{...$$restProps}
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
<p class:bx--file-filename={true}>{name}</p>
|
||||
<span class:bx--file__state-container={true}>
|
||||
<p class:bx--file-filename="{true}">{name}</p>
|
||||
<span class:bx--file__state-container="{true}">
|
||||
<Filename
|
||||
on:keydown={({ key }) => {
|
||||
on:keydown="{({ key }) => {
|
||||
if (key === ' ' || key === 'Enter') {
|
||||
dispatch('delete', id);
|
||||
}
|
||||
}}
|
||||
on:click={() => {
|
||||
}}"
|
||||
on:click="{() => {
|
||||
dispatch('delete', id);
|
||||
}}
|
||||
{iconDescription}
|
||||
{status}
|
||||
{invalid} />
|
||||
}}"
|
||||
iconDescription="{iconDescription}"
|
||||
status="{status}"
|
||||
invalid="{invalid}" />
|
||||
</span>
|
||||
{#if invalid && errorSubject}
|
||||
<div class:bx--form-requirement={true}>
|
||||
<div class:bx--form-requirement__title={true}>{errorSubject}</div>
|
||||
<div class:bx--form-requirement="{true}">
|
||||
<div class:bx--form-requirement__title="{true}">{errorSubject}</div>
|
||||
{#if errorBody}
|
||||
<p class:bx--form-requirement__supplement={true}>{errorBody}</p>
|
||||
<p class:bx--form-requirement__supplement="{true}">{errorBody}</p>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -25,10 +25,10 @@
|
|||
|
||||
{#if status === 'uploading'}
|
||||
<Loading
|
||||
description={iconDescription}
|
||||
description="{iconDescription}"
|
||||
{...$$restProps}
|
||||
small
|
||||
withOverlay={false} />
|
||||
withOverlay="{false}" />
|
||||
{/if}
|
||||
|
||||
{#if status === 'edit'}
|
||||
|
|
@ -36,8 +36,8 @@
|
|||
<WarningFilled16 class="bx--file-invalid" />
|
||||
{/if}
|
||||
<Close16
|
||||
aria-label={iconDescription}
|
||||
title={iconDescription}
|
||||
aria-label="{iconDescription}"
|
||||
title="{iconDescription}"
|
||||
class="bx--file-close"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
|
|
@ -46,8 +46,8 @@
|
|||
|
||||
{#if status === 'complete'}
|
||||
<CheckmarkFilled16
|
||||
aria-label={iconDescription}
|
||||
title={iconDescription}
|
||||
aria-label="{iconDescription}"
|
||||
title="{iconDescription}"
|
||||
class="bx--file-complete"
|
||||
{...$$restProps} />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@
|
|||
</script>
|
||||
|
||||
<Form
|
||||
on:submit={(event) => {
|
||||
on:submit="{(event) => {
|
||||
console.log('on:submit', event);
|
||||
}}>
|
||||
}}">
|
||||
<FormGroup {...$$props}>
|
||||
<Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
|
||||
<Checkbox id="checkbox-1" labelText="Checkbox Label" />
|
||||
|
|
@ -26,10 +26,10 @@
|
|||
<NumberInput
|
||||
id="number-input-1"
|
||||
label="Number Input"
|
||||
min={0}
|
||||
max={100}
|
||||
value={50}
|
||||
step={10} />
|
||||
min="{0}"
|
||||
max="{100}"
|
||||
value="{50}"
|
||||
step="{10}" />
|
||||
<FormGroup legendText="Toggle heading">
|
||||
<Toggle id="toggle-1" />
|
||||
<Toggle id="toggle-2" disabled />
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
id="text-area"
|
||||
labelText="Text Area label"
|
||||
placeholder="Placeholder text"
|
||||
rows={4}
|
||||
cols={50} />
|
||||
rows="{4}"
|
||||
cols="{50}" />
|
||||
<Button type="submit">Submit</Button>
|
||||
</Form>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<form
|
||||
class:bx--form={true}
|
||||
class:bx--form="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
|
|||
|
|
@ -25,16 +25,16 @@
|
|||
</script>
|
||||
|
||||
<fieldset
|
||||
data-invalid={invalid || undefined}
|
||||
class:bx--fieldset={true}
|
||||
data-invalid="{invalid || undefined}"
|
||||
class:bx--fieldset="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
<legend class:bx--label={true}>{legendText}</legend>
|
||||
<legend class:bx--label="{true}">{legendText}</legend>
|
||||
<slot />
|
||||
{#if message}
|
||||
<div class:bx--form__requirement={true}>{messageText}</div>
|
||||
<div class:bx--form__requirement="{true}">{messageText}</div>
|
||||
{/if}
|
||||
</fieldset>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div
|
||||
class:bx--form-item={true}
|
||||
class:bx--form-item="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
</script>
|
||||
|
||||
<label
|
||||
class:bx--label={true}
|
||||
for={id}
|
||||
class:bx--label="{true}"
|
||||
for="{id}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@
|
|||
</script>
|
||||
|
||||
{#if as}
|
||||
<slot {props} />
|
||||
<slot props="{props}" />
|
||||
{:else}
|
||||
<div {...props}>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -76,22 +76,22 @@
|
|||
<h6>Responsive Grid</h6>
|
||||
<Grid>
|
||||
<Row>
|
||||
<Column sm={1} md={4} lg={8}>
|
||||
<Column sm="{1}" md="{4}" lg="{8}">
|
||||
<div class="outside">
|
||||
<div class="inside">sm: 1/4, md: 1/2, lg: 2/3</div>
|
||||
</div>
|
||||
</Column>
|
||||
<Column sm={1} md={2} lg={2}>
|
||||
<Column sm="{1}" md="{2}" lg="{2}">
|
||||
<div class="outside">
|
||||
<div class="inside">sm: 1/4, md: 1/4, lg: 1/6</div>
|
||||
</div>
|
||||
</Column>
|
||||
<Column sm={1} md={1} lg={1}>
|
||||
<Column sm="{1}" md="{1}" lg="{1}">
|
||||
<div class="outside">
|
||||
<div class="inside">sm: 1/4, md: 1/8, lg: 1/12</div>
|
||||
</div>
|
||||
</Column>
|
||||
<Column sm={1} md={1} lg={1}>
|
||||
<Column sm="{1}" md="{1}" lg="{1}">
|
||||
<div class="outside">
|
||||
<div class="inside">sm: 1/4, md: 1/8, lg: 1/12</div>
|
||||
</div>
|
||||
|
|
@ -102,22 +102,22 @@
|
|||
<h6>Columns with Offset</h6>
|
||||
<Grid>
|
||||
<Row>
|
||||
<Column sm={{ span: 1, offset: 3 }}>
|
||||
<Column sm="{{ span: 1, offset: 3 }}">
|
||||
<div class="outside">
|
||||
<div class="inside">Small Screen Offset 3</div>
|
||||
</div>
|
||||
</Column>
|
||||
<Column sm={{ span: 2, offset: 2 }}>
|
||||
<Column sm="{{ span: 2, offset: 2 }}">
|
||||
<div class="outside">
|
||||
<div class="inside">Small Screen Offset 2</div>
|
||||
</div>
|
||||
</Column>
|
||||
<Column sm={{ span: 3, offset: 1 }}>
|
||||
<Column sm="{{ span: 3, offset: 1 }}">
|
||||
<div class="outside">
|
||||
<div class="inside">Small Screen Offset 1</div>
|
||||
</div>
|
||||
</Column>
|
||||
<Column sm={{ span: 4, offset: 0 }}>
|
||||
<Column sm="{{ span: 4, offset: 0 }}">
|
||||
<div class="outside">
|
||||
<div class="inside">Small Screen Offset 0</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@
|
|||
</script>
|
||||
|
||||
{#if as}
|
||||
<slot {props} />
|
||||
<slot props="{props}" />
|
||||
{:else}
|
||||
<div {...props}>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
</script>
|
||||
|
||||
{#if as}
|
||||
<slot {props} />
|
||||
<slot props="{props}" />
|
||||
{:else}
|
||||
<div {...props}>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class:bx--icon--skeleton={true}
|
||||
class:bx--icon--skeleton="{true}"
|
||||
{...$$restProps}
|
||||
style="{$$restProps.style}; width: {size}px; height: {size}px"
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave />
|
||||
on:mouseleave></div>
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@
|
|||
|
||||
{#if story === 'skeleton'}
|
||||
<div>
|
||||
<IconSkeleton size={16} style="margin: 2rem;" />
|
||||
<IconSkeleton size={32} style="margin: 2rem" />
|
||||
<IconSkeleton size="{16}" style="margin: 2rem;" />
|
||||
<IconSkeleton size="{32}" style="margin: 2rem" />
|
||||
</div>
|
||||
{:else}
|
||||
<Icon {...$$props} render={icons[$$props.icon]} />
|
||||
<Icon {...$$props} render="{icons[$$props.icon]}" />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
{#if skeleton}
|
||||
<IconSkeleton
|
||||
{size}
|
||||
size="{size}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
on:mouseleave />
|
||||
{:else}
|
||||
<svelte:component
|
||||
this={render}
|
||||
this="{render}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
|
|||
|
|
@ -37,15 +37,15 @@
|
|||
|
||||
{#if story === 'ux-example'}
|
||||
<div style="display: flex; width: 300px">
|
||||
<Button kind="secondary" {disabled}>Cancel</Button>
|
||||
<Button kind="secondary" disabled="{disabled}">Cancel</Button>
|
||||
{#if disabled}
|
||||
<InlineLoading
|
||||
style="margin-left: 1rem;"
|
||||
description={loadingDescription}
|
||||
status={success ? 'finished' : 'active'}
|
||||
aria-live={ariaLive} />
|
||||
description="{loadingDescription}"
|
||||
status="{success ? 'finished' : 'active'}"
|
||||
aria-live="{ariaLive}" />
|
||||
{:else}
|
||||
<Button on:click={handleSubmit}>Submit</Button>
|
||||
<Button on:click="{handleSubmit}">Submit</Button>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
<div class:bx--inline-loading__animation={true}>
|
||||
<div class:bx--inline-loading__animation="{true}">
|
||||
{#if status === 'error'}
|
||||
<Error20 class="bx--inline-loading--error" />
|
||||
{:else if status === 'finished'}
|
||||
|
|
@ -62,12 +62,12 @@
|
|||
{:else if status === 'inactive' || status === 'active'}
|
||||
<Loading
|
||||
small
|
||||
description={iconDescription}
|
||||
withOverlay={false}
|
||||
active={status === 'active'} />
|
||||
description="{iconDescription}"
|
||||
withOverlay="{false}"
|
||||
active="{status === 'active'}" />
|
||||
{/if}
|
||||
</div>
|
||||
{#if description}
|
||||
<div class:bx--inline-loading__text={true}>{description}</div>
|
||||
<div class:bx--inline-loading__text="{true}">{description}</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,10 +20,10 @@
|
|||
|
||||
{#if disabled}
|
||||
<p
|
||||
bind:this={ref}
|
||||
class:bx--link={true}
|
||||
class:bx--link--disabled={disabled}
|
||||
class:bx--link--inline={inline}
|
||||
bind:this="{ref}"
|
||||
class:bx--link="{true}"
|
||||
class:bx--link--disabled="{disabled}"
|
||||
class:bx--link--inline="{inline}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
@ -34,10 +34,10 @@
|
|||
{:else}
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<a
|
||||
bind:this={ref}
|
||||
class:bx--link={true}
|
||||
class:bx--link--disabled={disabled}
|
||||
class:bx--link--inline={inline}
|
||||
bind:this="{ref}"
|
||||
class:bx--link="{true}"
|
||||
class:bx--link--disabled="{disabled}"
|
||||
class:bx--link--inline="{inline}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
|
|||
|
|
@ -45,23 +45,23 @@
|
|||
<div
|
||||
role="listbox"
|
||||
tabindex="-1"
|
||||
data-invalid={invalid || undefined}
|
||||
class:bx--list-box={true}
|
||||
class:bx--list-box--inline={type === 'inline'}
|
||||
class:bx--list-box--disabled={disabled}
|
||||
class:bx--list-box--expanded={open}
|
||||
class:bx--list-box--light={light}
|
||||
data-invalid="{invalid || undefined}"
|
||||
class:bx--list-box="{true}"
|
||||
class:bx--list-box--inline="{type === 'inline'}"
|
||||
class:bx--list-box--disabled="{disabled}"
|
||||
class:bx--list-box--expanded="{open}"
|
||||
class:bx--list-box--light="{light}"
|
||||
{...$$restProps}
|
||||
class="{size && `bx--list-box--${size}`} {$$restProps.class}"
|
||||
on:keydown
|
||||
on:keydown={(e) => {
|
||||
on:keydown="{(e) => {
|
||||
if (e.key === 'Escape') {
|
||||
e.stopPropagation();
|
||||
}
|
||||
}}
|
||||
}}"
|
||||
on:click|preventDefault|stopPropagation>
|
||||
<slot />
|
||||
</div>
|
||||
{#if invalid}
|
||||
<div class:bx--form-requirement={true}>{invalidText}</div>
|
||||
<div class:bx--form-requirement="{true}">{invalidText}</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -63,15 +63,15 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
role={ariaExpanded ? 'combobox' : role}
|
||||
aria-expanded={ariaExpanded}
|
||||
aria-owns={(ariaExpanded && menuId) || undefined}
|
||||
aria-controls={(ariaExpanded && menuId) || undefined}
|
||||
aria-disabled={disabled}
|
||||
aria-label={ariaExpanded ? translateWithId('close') : translateWithId('open')}
|
||||
tabindex={disabled ? '-1' : tabindex}
|
||||
class:bx--list-box__field={true}
|
||||
bind:this="{ref}"
|
||||
role="{ariaExpanded ? 'combobox' : role}"
|
||||
aria-expanded="{ariaExpanded}"
|
||||
aria-owns="{(ariaExpanded && menuId) || undefined}"
|
||||
aria-controls="{(ariaExpanded && menuId) || undefined}"
|
||||
aria-disabled="{disabled}"
|
||||
aria-label="{ariaExpanded ? translateWithId('close') : translateWithId('open')}"
|
||||
tabindex="{disabled ? '-1' : tabindex}"
|
||||
class:bx--list-box__field="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<div
|
||||
role="listbox"
|
||||
id="menu-{id}"
|
||||
class:bx--list-box__menu={true}
|
||||
class:bx--list-box__menu="{true}"
|
||||
{...$$restProps}>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -33,9 +33,9 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class:bx--list-box__menu-icon={true}
|
||||
class:bx--list-box__menu-icon--open={open}
|
||||
class:bx--list-box__menu-icon="{true}"
|
||||
class:bx--list-box__menu-icon--open="{open}"
|
||||
{...$$restProps}
|
||||
on:click|preventDefault|stopPropagation>
|
||||
<ChevronDown16 aria-label={description} title={description} />
|
||||
<ChevronDown16 aria-label="{description}" title="{description}" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,14 +13,14 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class:bx--list-box__menu-item={true}
|
||||
class:bx--list-box__menu-item--active={active}
|
||||
class:bx--list-box__menu-item--highlighted={highlighted}
|
||||
class:bx--list-box__menu-item="{true}"
|
||||
class:bx--list-box__menu-item--active="{active}"
|
||||
class:bx--list-box__menu-item--highlighted="{highlighted}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
<div class:bx--list-box__menu-item__option={true}>
|
||||
<div class:bx--list-box__menu-item__option="{true}">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -57,25 +57,25 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
bind:this="{ref}"
|
||||
role="button"
|
||||
aria-label="Clear Selection"
|
||||
tabindex={disabled ? '-1' : '0'}
|
||||
title={description}
|
||||
class:bx--list-box__selection={true}
|
||||
class:bx--tag--filter={selectionCount}
|
||||
class:bx--list-box__selection--multi={selectionCount}
|
||||
tabindex="{disabled ? '-1' : '0'}"
|
||||
title="{description}"
|
||||
class:bx--list-box__selection="{true}"
|
||||
class:bx--tag--filter="{selectionCount}"
|
||||
class:bx--list-box__selection--multi="{selectionCount}"
|
||||
{...$$restProps}
|
||||
on:click|preventDefault|stopPropagation={(e) => {
|
||||
on:click|preventDefault|stopPropagation="{(e) => {
|
||||
if (!disabled) {
|
||||
dispatch('clear', e);
|
||||
}
|
||||
}}
|
||||
on:keydown|stopPropagation={(e) => {
|
||||
}}"
|
||||
on:keydown|stopPropagation="{(e) => {
|
||||
if (!disabled && e.key === 'Enter') {
|
||||
dispatch('clear', e);
|
||||
}
|
||||
}}>
|
||||
}}">
|
||||
{#if selectionCount}{selectionCount}{/if}
|
||||
<Close16 />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<li
|
||||
class:bx--list__item={true}
|
||||
class:bx--list__item="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
|
|||
|
|
@ -34,60 +34,60 @@
|
|||
|
||||
{#if withOverlay}
|
||||
<div
|
||||
class:bx--loading-overlay={true}
|
||||
class:bx--loading-overlay--stop={!active}
|
||||
class:bx--loading-overlay="{true}"
|
||||
class:bx--loading-overlay--stop="{!active}"
|
||||
{...$$restProps}>
|
||||
<div
|
||||
aria-atomic="true"
|
||||
aria-labelledby={id}
|
||||
aria-live={active ? 'assertive' : 'off'}
|
||||
class:bx--loading={true}
|
||||
class:bx--loading--small={small}
|
||||
class:bx--loading--stop={!active}>
|
||||
aria-labelledby="{id}"
|
||||
aria-live="{active ? 'assertive' : 'off'}"
|
||||
class:bx--loading="{true}"
|
||||
class:bx--loading--small="{small}"
|
||||
class:bx--loading--stop="{!active}">
|
||||
<!-- svelte-ignore a11y-label-has-associated-control -->
|
||||
<label class:bx--visually-hidden={true} {id}>{description}</label>
|
||||
<svg class:bx--loading__svg={true} viewBox="-75 -75 150 150">
|
||||
<label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
|
||||
<svg class:bx--loading__svg="{true}" viewBox="-75 -75 150 150">
|
||||
<title>{description}</title>
|
||||
{#if small}
|
||||
<circle
|
||||
class:bx--loading__background={true}
|
||||
class:bx--loading__background="{true}"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r={spinnerRadius} />
|
||||
r="{spinnerRadius}"></circle>
|
||||
{/if}
|
||||
<circle
|
||||
class:bx--loading__stroke={true}
|
||||
class:bx--loading__stroke="{true}"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r={spinnerRadius} />
|
||||
r="{spinnerRadius}"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
aria-atomic="true"
|
||||
aria-labelledby={id}
|
||||
aria-live={active ? 'assertive' : 'off'}
|
||||
class:bx--loading={true}
|
||||
class:bx--loading--small={small}
|
||||
class:bx--loading--stop={!active}
|
||||
aria-labelledby="{id}"
|
||||
aria-live="{active ? 'assertive' : 'off'}"
|
||||
class:bx--loading="{true}"
|
||||
class:bx--loading--small="{small}"
|
||||
class:bx--loading--stop="{!active}"
|
||||
{...$$restProps}>
|
||||
<!-- svelte-ignore a11y-label-has-associated-control -->
|
||||
<label class:bx--visually-hidden={true} {id}>{description}</label>
|
||||
<svg class:bx--loading__svg={true} viewBox="-75 -75 150 150">
|
||||
<label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
|
||||
<svg class:bx--loading__svg="{true}" viewBox="-75 -75 150 150">
|
||||
<title>{description}</title>
|
||||
{#if small}
|
||||
<circle
|
||||
class:bx--loading__background={true}
|
||||
class:bx--loading__background="{true}"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r={spinnerRadius} />
|
||||
r="{spinnerRadius}"></circle>
|
||||
{/if}
|
||||
<circle
|
||||
class:bx--loading__stroke={true}
|
||||
class:bx--loading__stroke="{true}"
|
||||
cx="0"
|
||||
cy="0"
|
||||
r={spinnerRadius} />
|
||||
r="{spinnerRadius}"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -9,39 +9,39 @@
|
|||
|
||||
<div>
|
||||
<Button
|
||||
on:click={() => {
|
||||
on:click="{() => {
|
||||
open = true;
|
||||
}}>
|
||||
}}">
|
||||
Launch modal
|
||||
</Button>
|
||||
</div>
|
||||
<Modal
|
||||
{...$$props}
|
||||
bind:open
|
||||
on:click={(e) => {
|
||||
on:click="{(e) => {
|
||||
console.log(e.target);
|
||||
}}
|
||||
on:click:button--secondary={() => {
|
||||
}}"
|
||||
on:click:button--secondary="{() => {
|
||||
console.log('click button secondary');
|
||||
open = false;
|
||||
}}
|
||||
on:open={() => {
|
||||
}}"
|
||||
on:open="{() => {
|
||||
console.log('open');
|
||||
}}
|
||||
on:close={() => {
|
||||
}}"
|
||||
on:close="{() => {
|
||||
console.log('close');
|
||||
}}
|
||||
on:submit={() => {
|
||||
}}"
|
||||
on:submit="{() => {
|
||||
console.log('submit');
|
||||
}}>
|
||||
}}">
|
||||
<div>
|
||||
<PasswordInput bind:type placeholder="Password Input" aria-level="" />
|
||||
<Button
|
||||
kind="ghost"
|
||||
size="field"
|
||||
on:click={() => {
|
||||
on:click="{() => {
|
||||
type = type === 'password' ? 'text' : 'password';
|
||||
}}>
|
||||
}}">
|
||||
Programmatically toggle password
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -146,17 +146,17 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
bind:this="{ref}"
|
||||
role="presentation"
|
||||
tabindex="-1"
|
||||
{id}
|
||||
class:bx--modal={true}
|
||||
class:bx--modal-tall={!passiveModal}
|
||||
class:is-visible={open}
|
||||
class:bx--modal--danger={danger}
|
||||
id="{id}"
|
||||
class:bx--modal="{true}"
|
||||
class:bx--modal-tall="{!passiveModal}"
|
||||
class:is-visible="{open}"
|
||||
class:bx--modal--danger="{danger}"
|
||||
{...$$restProps}
|
||||
on:keydown
|
||||
on:keydown={({ key }) => {
|
||||
on:keydown="{({ key }) => {
|
||||
if (open) {
|
||||
if (key === 'Escape') {
|
||||
open = false;
|
||||
|
|
@ -164,89 +164,93 @@
|
|||
dispatch('submit');
|
||||
}
|
||||
}
|
||||
}}
|
||||
}}"
|
||||
on:click
|
||||
on:click={() => {
|
||||
on:click="{() => {
|
||||
if (!didClickInnerModal) open = false;
|
||||
didClickInnerModal = false;
|
||||
}}
|
||||
}}"
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
<div
|
||||
bind:this={innerModal}
|
||||
bind:this="{innerModal}"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={ariaLabel}
|
||||
class:bx--modal-container={true}
|
||||
class={size && `bx--modal-container--${size}`}
|
||||
on:click={() => {
|
||||
aria-label="{ariaLabel}"
|
||||
class:bx--modal-container="{true}"
|
||||
class="{size && `bx--modal-container--${size}`}"
|
||||
on:click="{() => {
|
||||
didClickInnerModal = true;
|
||||
}}>
|
||||
<div class:bx--modal-header={true}>
|
||||
}}">
|
||||
<div class:bx--modal-header="{true}">
|
||||
{#if passiveModal}
|
||||
<button
|
||||
bind:this={buttonRef}
|
||||
bind:this="{buttonRef}"
|
||||
type="button"
|
||||
aria-label={iconDescription}
|
||||
title={iconDescription}
|
||||
aria-label="{iconDescription}"
|
||||
title="{iconDescription}"
|
||||
class="bx--modal-close"
|
||||
on:click={() => {
|
||||
on:click="{() => {
|
||||
open = false;
|
||||
}}>
|
||||
<Close20 aria-label={iconDescription} class="bx--modal-close__icon" />
|
||||
}}">
|
||||
<Close20
|
||||
aria-label="{iconDescription}"
|
||||
class="bx--modal-close__icon" />
|
||||
</button>
|
||||
{/if}
|
||||
{#if modalLabel}
|
||||
<h2 id={modalLabelId} class:bx--modal-header__label={true}>
|
||||
<h2 id="{modalLabelId}" class:bx--modal-header__label="{true}">
|
||||
<slot name="label">{modalLabel}</slot>
|
||||
</h2>
|
||||
{/if}
|
||||
<h3 id={modalHeadingId} class:bx--modal-header__heading={true}>
|
||||
<h3 id="{modalHeadingId}" class:bx--modal-header__heading="{true}">
|
||||
<slot name="heading">{modalHeading}</slot>
|
||||
</h3>
|
||||
{#if !passiveModal}
|
||||
<button
|
||||
bind:this={buttonRef}
|
||||
bind:this="{buttonRef}"
|
||||
type="button"
|
||||
aria-label={iconDescription}
|
||||
title={iconDescription}
|
||||
class:bx--modal-close={true}
|
||||
on:click={() => {
|
||||
aria-label="{iconDescription}"
|
||||
title="{iconDescription}"
|
||||
class:bx--modal-close="{true}"
|
||||
on:click="{() => {
|
||||
open = false;
|
||||
}}>
|
||||
<Close20 aria-label={iconDescription} class="bx--modal-close__icon" />
|
||||
}}">
|
||||
<Close20
|
||||
aria-label="{iconDescription}"
|
||||
class="bx--modal-close__icon" />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
<div
|
||||
class:bx--modal-content={true}
|
||||
class:bx--modal-content--with-form={hasForm}
|
||||
class:bx--modal-scroll-content={hasScrollingContent}
|
||||
tabindex={hasScrollingContent ? '0' : undefined}
|
||||
role={hasScrollingContent ? 'region' : undefined}
|
||||
aria-label={hasScrollingContent ? ariaLabel : undefined}
|
||||
aria-labelledby={modalLabel ? modalLabelId : modalHeadingId}>
|
||||
class:bx--modal-content="{true}"
|
||||
class:bx--modal-content--with-form="{hasForm}"
|
||||
class:bx--modal-scroll-content="{hasScrollingContent}"
|
||||
tabindex="{hasScrollingContent ? '0' : undefined}"
|
||||
role="{hasScrollingContent ? 'region' : undefined}"
|
||||
aria-label="{hasScrollingContent ? ariaLabel : undefined}"
|
||||
aria-labelledby="{modalLabel ? modalLabelId : modalHeadingId}">
|
||||
<slot />
|
||||
</div>
|
||||
{#if hasScrollingContent}
|
||||
<div class:bx--modal-content--overflow-indicator={true} />
|
||||
<div class:bx--modal-content--overflow-indicator="{true}"></div>
|
||||
{/if}
|
||||
{#if !passiveModal}
|
||||
<div class:bx--modal-footer={true}>
|
||||
<div class:bx--modal-footer="{true}">
|
||||
<Button
|
||||
kind="secondary"
|
||||
on:click={() => {
|
||||
on:click="{() => {
|
||||
dispatch('click:button--secondary');
|
||||
}}>
|
||||
}}">
|
||||
{secondaryButtonText}
|
||||
</Button>
|
||||
<Button
|
||||
kind={danger ? 'danger' : 'primary'}
|
||||
disabled={primaryButtonDisabled}
|
||||
on:click={() => {
|
||||
kind="{danger ? 'danger' : 'primary'}"
|
||||
disabled="{primaryButtonDisabled}"
|
||||
on:click="{() => {
|
||||
dispatch('submit');
|
||||
}}>
|
||||
}}">
|
||||
{primaryButtonText}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,9 +20,9 @@
|
|||
<div>
|
||||
<Button
|
||||
size="small"
|
||||
on:click={() => {
|
||||
on:click="{() => {
|
||||
selectedIds = selectedIds.length > 0 ? [] : [items[1].id, items[2].id];
|
||||
}}>
|
||||
}}">
|
||||
{selectedIds.length > 0 ? 'Clear' : 'Set initial'} selected items
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -246,41 +246,44 @@
|
|||
</script>
|
||||
|
||||
<svelte:body
|
||||
on:click={({ target }) => {
|
||||
on:click="{({ target }) => {
|
||||
if (open && multiSelectRef && !multiSelectRef.contains(target)) {
|
||||
open = false;
|
||||
}
|
||||
}} />
|
||||
}}" />
|
||||
|
||||
<div
|
||||
bind:this={multiSelectRef}
|
||||
class:bx--multi-select__wrapper={true}
|
||||
class:bx--list-box__wrapper={true}
|
||||
class:bx--multi-select__wrapper--inline={inline}
|
||||
class:bx--list-box__wrapper--inline={inline}
|
||||
class:bx--multi-select__wrapper--inline--invalid={inline && invalid}
|
||||
bind:this="{multiSelectRef}"
|
||||
class:bx--multi-select__wrapper="{true}"
|
||||
class:bx--list-box__wrapper="{true}"
|
||||
class:bx--multi-select__wrapper--inline="{inline}"
|
||||
class:bx--list-box__wrapper--inline="{inline}"
|
||||
class:bx--multi-select__wrapper--inline--invalid="{inline && invalid}"
|
||||
{...$$restProps}>
|
||||
{#if titleText}
|
||||
<label for={id} class:bx--label={true} class:bx--label--disabled={disabled}>
|
||||
<label
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--label--disabled="{disabled}">
|
||||
{titleText}
|
||||
</label>
|
||||
{/if}
|
||||
{#if !inline && helperText}
|
||||
<div
|
||||
class:bx--form__helper-text={true}
|
||||
class:bx--form__helper-text--disabled={disabled}>
|
||||
class:bx--form__helper-text="{true}"
|
||||
class:bx--form__helper-text--disabled="{disabled}">
|
||||
{helperText}
|
||||
</div>
|
||||
{/if}
|
||||
<ListBox
|
||||
aria-label={ariaLabel}
|
||||
{id}
|
||||
{disabled}
|
||||
{invalid}
|
||||
{invalidText}
|
||||
{open}
|
||||
{light}
|
||||
{size}
|
||||
aria-label="{ariaLabel}"
|
||||
id="{id}"
|
||||
disabled="{disabled}"
|
||||
invalid="{invalid}"
|
||||
invalidText="{invalidText}"
|
||||
open="{open}"
|
||||
light="{light}"
|
||||
size="{size}"
|
||||
class="bx--multi-select {filterable && 'bx--combo-box'}
|
||||
{filterable && 'bx--multi-select--filterable'}
|
||||
{invalid && 'bx--multi-select--invalid'}
|
||||
|
|
@ -292,16 +295,16 @@
|
|||
<ListBoxField
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-expanded={open}
|
||||
on:click={() => {
|
||||
aria-expanded="{open}"
|
||||
on:click="{() => {
|
||||
if (filterable) {
|
||||
open = true;
|
||||
inputRef.focus();
|
||||
} else {
|
||||
open = !open;
|
||||
}
|
||||
}}
|
||||
on:keydown={({ key }) => {
|
||||
}}"
|
||||
on:keydown="{({ key }) => {
|
||||
if (filterable) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -323,46 +326,46 @@
|
|||
sortedItems[highlightedIndex].checked = !sortedItems[highlightedIndex].checked;
|
||||
}
|
||||
}
|
||||
}}
|
||||
on:blur={({ relatedTarget }) => {
|
||||
}}"
|
||||
on:blur="{({ relatedTarget }) => {
|
||||
if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') {
|
||||
fieldRef.focus();
|
||||
}
|
||||
}}
|
||||
{id}
|
||||
{disabled}
|
||||
{translateWithId}>
|
||||
}}"
|
||||
id="{id}"
|
||||
disabled="{disabled}"
|
||||
translateWithId="{translateWithId}">
|
||||
{#if checked.length > 0}
|
||||
<ListBoxSelection
|
||||
selectionCount={checked.length}
|
||||
on:clear={() => {
|
||||
selectionCount="{checked.length}"
|
||||
on:clear="{() => {
|
||||
sortedItems = sortedItems.map((item) => ({
|
||||
...item,
|
||||
checked: false,
|
||||
}));
|
||||
fieldRef.blur();
|
||||
}}
|
||||
{translateWithId}
|
||||
{disabled} />
|
||||
}}"
|
||||
translateWithId="{translateWithId}"
|
||||
disabled="{disabled}" />
|
||||
{/if}
|
||||
{#if filterable}
|
||||
<input
|
||||
bind:this={inputRef}
|
||||
bind:this="{inputRef}"
|
||||
role="combobox"
|
||||
tabindex="0"
|
||||
autocomplete="off"
|
||||
aria-autocomplete="list"
|
||||
aria-expanded={open}
|
||||
aria-activedescendant={highlightedId}
|
||||
aria-disabled={disabled}
|
||||
aria-controls={menuId}
|
||||
class:bx--text-input={true}
|
||||
class:bx--text-input--empty={inputValue === ''}
|
||||
on:input={({ target }) => {
|
||||
aria-expanded="{open}"
|
||||
aria-activedescendant="{highlightedId}"
|
||||
aria-disabled="{disabled}"
|
||||
aria-controls="{menuId}"
|
||||
class:bx--text-input="{true}"
|
||||
class:bx--text-input--empty="{inputValue === ''}"
|
||||
on:input="{({ target }) => {
|
||||
inputValue = target.value;
|
||||
}}
|
||||
}}"
|
||||
on:keydown
|
||||
on:keydown|stopPropagation={({ key }) => {
|
||||
on:keydown|stopPropagation="{({ key }) => {
|
||||
if (key === 'Enter') {
|
||||
if (highlightedIndex > -1) {
|
||||
sortedItems[highlightedIndex].checked = !sortedItems[highlightedIndex].checked;
|
||||
|
|
@ -374,69 +377,69 @@
|
|||
} else if (key === 'ArrowUp') {
|
||||
change(-1);
|
||||
}
|
||||
}}
|
||||
}}"
|
||||
on:focus
|
||||
on:blur
|
||||
on:blur={({ relatedTarget }) => {
|
||||
on:blur="{({ relatedTarget }) => {
|
||||
if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') {
|
||||
inputRef.focus();
|
||||
}
|
||||
}}
|
||||
{disabled}
|
||||
{placeholder}
|
||||
{id}
|
||||
{name}
|
||||
value={inputValue} />
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
placeholder="{placeholder}"
|
||||
id="{id}"
|
||||
name="{name}"
|
||||
value="{inputValue}" />
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--list-box__invalid-icon" />
|
||||
{/if}
|
||||
{#if inputValue}
|
||||
<ListBoxSelection
|
||||
on:clear={() => {
|
||||
on:clear="{() => {
|
||||
inputValue = '';
|
||||
open = false;
|
||||
}}
|
||||
{translateWithId}
|
||||
{disabled}
|
||||
{open} />
|
||||
}}"
|
||||
translateWithId="{translateWithId}"
|
||||
disabled="{disabled}"
|
||||
open="{open}" />
|
||||
{/if}
|
||||
<ListBoxMenuIcon
|
||||
on:click={() => {
|
||||
on:click="{() => {
|
||||
open = !open;
|
||||
}}
|
||||
{translateWithId}
|
||||
{open} />
|
||||
}}"
|
||||
translateWithId="{translateWithId}"
|
||||
open="{open}" />
|
||||
{/if}
|
||||
{#if !filterable}
|
||||
<span class="bx--list-box__label">{label}</span>
|
||||
<ListBoxMenuIcon {open} {translateWithId} />
|
||||
<ListBoxMenuIcon open="{open}" translateWithId="{translateWithId}" />
|
||||
{/if}
|
||||
</ListBoxField>
|
||||
{#if open}
|
||||
<ListBoxMenu aria-label={ariaLabel} {id}>
|
||||
<ListBoxMenu aria-label="{ariaLabel}" id="{id}">
|
||||
{#each filterable ? filteredItems : sortedItems as item, i (item.id || i)}
|
||||
<ListBoxMenuItem
|
||||
id={item.id}
|
||||
active={item.checked}
|
||||
highlighted={highlightedIndex === i}
|
||||
on:click={() => {
|
||||
id="{item.id}"
|
||||
active="{item.checked}"
|
||||
highlighted="{highlightedIndex === i}"
|
||||
on:click="{() => {
|
||||
sortedItems = sortedItems.map((_) =>
|
||||
_.id === item.id ? { ..._, checked: !_.checked } : _
|
||||
);
|
||||
fieldRef.focus();
|
||||
}}
|
||||
on:mouseenter={() => {
|
||||
}}"
|
||||
on:mouseenter="{() => {
|
||||
highlightedIndex = i;
|
||||
}}>
|
||||
}}">
|
||||
<Checkbox
|
||||
readonly
|
||||
tabindex="-1"
|
||||
id="checkbox-{item.id}"
|
||||
title={useTitleInItem ? itemToString(item) : undefined}
|
||||
name={itemToString(item)}
|
||||
labelText={itemToString(item)}
|
||||
checked={item.checked}
|
||||
{disabled} />
|
||||
title="{useTitleInItem ? itemToString(item) : undefined}"
|
||||
name="{itemToString(item)}"
|
||||
labelText="{itemToString(item)}"
|
||||
checked="{item.checked}"
|
||||
disabled="{disabled}" />
|
||||
</ListBoxMenuItem>
|
||||
{/each}
|
||||
</ListBoxMenu>
|
||||
|
|
|
|||
|
|
@ -81,29 +81,35 @@
|
|||
|
||||
{#if open}
|
||||
<div
|
||||
{role}
|
||||
{kind}
|
||||
class:bx--inline-notification={true}
|
||||
class:bx--inline-notification--low-contrast={lowContrast}
|
||||
class:bx--inline-notification--hide-close-button={hideCloseButton}
|
||||
class={kind && `bx--inline-notification--${kind}`}
|
||||
role="{role}"
|
||||
kind="{kind}"
|
||||
class:bx--inline-notification="{true}"
|
||||
class:bx--inline-notification--low-contrast="{lowContrast}"
|
||||
class:bx--inline-notification--hide-close-button="{hideCloseButton}"
|
||||
class="{kind && `bx--inline-notification--${kind}`}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
<div class:bx--inline-notification__details={true}>
|
||||
<NotificationIcon {notificationType} {kind} {iconDescription} />
|
||||
<NotificationTextDetails {title} {subtitle} {notificationType}>
|
||||
<div class:bx--inline-notification__details="{true}">
|
||||
<NotificationIcon
|
||||
notificationType="{notificationType}"
|
||||
kind="{kind}"
|
||||
iconDescription="{iconDescription}" />
|
||||
<NotificationTextDetails
|
||||
title="{title}"
|
||||
subtitle="{subtitle}"
|
||||
notificationType="{notificationType}">
|
||||
<slot />
|
||||
</NotificationTextDetails>
|
||||
</div>
|
||||
<slot name="actions" />
|
||||
{#if !hideCloseButton}
|
||||
<NotificationButton
|
||||
{iconDescription}
|
||||
{notificationType}
|
||||
on:click={close} />
|
||||
iconDescription="{iconDescription}"
|
||||
notificationType="{notificationType}"
|
||||
on:click="{close}" />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@
|
|||
{#if story === 'inline'}
|
||||
<InlineNotification
|
||||
{...$$props}
|
||||
on:close={() => {
|
||||
on:close="{() => {
|
||||
console.log('on:close');
|
||||
}}>
|
||||
}}">
|
||||
<div slot="actions">
|
||||
<NotificationActionButton>{$$props.action}</NotificationActionButton>
|
||||
</div>
|
||||
|
|
@ -19,8 +19,8 @@
|
|||
{:else if story === 'toast'}
|
||||
<ToastNotification
|
||||
{...$$props}
|
||||
on:close={() => {
|
||||
on:close="{() => {
|
||||
console.log('on:close');
|
||||
}}
|
||||
}}"
|
||||
style="min-width: 30rem; margin-bottom: .5rem" />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -28,18 +28,18 @@
|
|||
|
||||
<button
|
||||
type="button"
|
||||
aria-label={iconDescription}
|
||||
title={iconDescription}
|
||||
class:bx--toast-notification__close-button={notificationType === 'toast'}
|
||||
class:bx--inline-notification__close-button={notificationType === 'inline'}
|
||||
aria-label="{iconDescription}"
|
||||
title="{iconDescription}"
|
||||
class:bx--toast-notification__close-button="{notificationType === 'toast'}"
|
||||
class:bx--inline-notification__close-button="{notificationType === 'inline'}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
<svelte:component
|
||||
this={renderIcon}
|
||||
{title}
|
||||
this="{renderIcon}"
|
||||
title="{title}"
|
||||
class="{notificationType === 'toast' && 'bx--toast-notification__close-icon'}
|
||||
{notificationType === 'inline' && 'bx--inline-notification__close-icon'}" />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -35,6 +35,6 @@
|
|||
</script>
|
||||
|
||||
<svelte:component
|
||||
this={icons[kind]}
|
||||
title={iconDescription}
|
||||
this="{icons[kind]}"
|
||||
title="{iconDescription}"
|
||||
class="bx--{notificationType}-notification__icon" />
|
||||
|
|
|
|||
|
|
@ -25,18 +25,18 @@
|
|||
</script>
|
||||
|
||||
{#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>
|
||||
<div class:bx--toast-notification__caption={true}>{caption}</div>
|
||||
<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>
|
||||
<div class:bx--toast-notification__caption="{true}">{caption}</div>
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#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>
|
||||
<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>
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -87,25 +87,32 @@
|
|||
|
||||
{#if open}
|
||||
<div
|
||||
{role}
|
||||
{kind}
|
||||
class:bx--toast-notification={true}
|
||||
class:bx--toast-notification--low-contrast={lowContrast}
|
||||
class={kind && `bx--toast-notification--${kind}`}
|
||||
role="{role}"
|
||||
kind="{kind}"
|
||||
class:bx--toast-notification="{true}"
|
||||
class:bx--toast-notification--low-contrast="{lowContrast}"
|
||||
class="{kind && `bx--toast-notification--${kind}`}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
<NotificationIcon {notificationType} {kind} {iconDescription} />
|
||||
<NotificationTextDetails {title} {subtitle} {caption} {notificationType}>
|
||||
<NotificationIcon
|
||||
notificationType="{notificationType}"
|
||||
kind="{kind}"
|
||||
iconDescription="{iconDescription}" />
|
||||
<NotificationTextDetails
|
||||
title="{title}"
|
||||
subtitle="{subtitle}"
|
||||
caption="{caption}"
|
||||
notificationType="{notificationType}">
|
||||
<slot />
|
||||
</NotificationTextDetails>
|
||||
{#if !hideCloseButton}
|
||||
<NotificationButton
|
||||
{iconDescription}
|
||||
{notificationType}
|
||||
on:click={close} />
|
||||
iconDescription="{iconDescription}"
|
||||
notificationType="{notificationType}"
|
||||
on:click="{close}" />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -7,12 +7,14 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class:bx--form-item={true}
|
||||
class:bx--form-item="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
{#if !hideLabel}<span class:bx--label={true} class:bx--skeleton={true} />{/if}
|
||||
<div class:bx--number={true} class:bx--skeleton={true} />
|
||||
{#if !hideLabel}
|
||||
<span class:bx--label="{true}" class:bx--skeleton="{true}"></span>
|
||||
{/if}
|
||||
<div class:bx--number="{true}" class:bx--skeleton="{true}"></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
id="number-input-id"
|
||||
name="number-input-id"
|
||||
bind:value
|
||||
on:change={({ detail }) => {
|
||||
on:change="{({ detail }) => {
|
||||
console.log('on:change', detail);
|
||||
}} />
|
||||
}}" />
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -173,149 +173,151 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class:bx--form-item={true}
|
||||
class:bx--form-item="{true}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave>
|
||||
<div
|
||||
data-invalid={error || undefined}
|
||||
class:bx--number={true}
|
||||
class:bx--number--helpertext={true}
|
||||
class:bx--number--readonly={readonly}
|
||||
class:bx--number--light={light}
|
||||
class:bx--number--nolabel={hideLabel}
|
||||
class:bx--number--mobile={mobile}
|
||||
class={size && `bx--number--${size}`}>
|
||||
data-invalid="{error || undefined}"
|
||||
class:bx--number="{true}"
|
||||
class:bx--number--helpertext="{true}"
|
||||
class:bx--number--readonly="{readonly}"
|
||||
class:bx--number--light="{light}"
|
||||
class:bx--number--nolabel="{hideLabel}"
|
||||
class:bx--number--mobile="{mobile}"
|
||||
class="{size && `bx--number--${size}`}">
|
||||
{#if mobile}
|
||||
{#if label}
|
||||
<label
|
||||
for={id}
|
||||
class:bx--label={true}
|
||||
class:bx--visually-hidden={hideLabel}>
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--visually-hidden="{hideLabel}">
|
||||
<slot name="label">{label}</slot>
|
||||
</label>
|
||||
{/if}
|
||||
{#if helperText}
|
||||
<div class:bx--form__helper-text={true}>{helperText}</div>
|
||||
<div class:bx--form__helper-text="{true}">{helperText}</div>
|
||||
{/if}
|
||||
<div class:bx--number__input-wrapper={true}>
|
||||
<div class:bx--number__input-wrapper="{true}">
|
||||
<button
|
||||
type="button"
|
||||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
title={decrementLabel}
|
||||
aria-label={decrementLabel || iconDescription}
|
||||
class:bx--number__control-btn={true}
|
||||
class:down-icon={true}
|
||||
on:click={() => {
|
||||
title="{decrementLabel}"
|
||||
aria-label="{decrementLabel || iconDescription}"
|
||||
class:bx--number__control-btn="{true}"
|
||||
class:down-icon="{true}"
|
||||
on:click="{() => {
|
||||
updateValue(-1);
|
||||
}}
|
||||
{disabled}>
|
||||
}}"
|
||||
disabled="{disabled}">
|
||||
<CaretDownGlyph class="down-icon" />
|
||||
</button>
|
||||
<input
|
||||
bind:this={ref}
|
||||
bind:this="{ref}"
|
||||
type="number"
|
||||
pattern="[0-9]*"
|
||||
aria-label={label ? undefined : ariaLabel}
|
||||
aria-label="{label ? undefined : ariaLabel}"
|
||||
on:input
|
||||
on:input={({ target }) => {
|
||||
on:input="{({ target }) => {
|
||||
value = target.value;
|
||||
}}
|
||||
{disabled}
|
||||
{id}
|
||||
{name}
|
||||
{max}
|
||||
{min}
|
||||
{step}
|
||||
{value}
|
||||
{readonly} />
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
id="{id}"
|
||||
name="{name}"
|
||||
max="{max}"
|
||||
min="{min}"
|
||||
step="{step}"
|
||||
value="{value}"
|
||||
readonly="{readonly}" />
|
||||
<button
|
||||
type="button"
|
||||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
title={incrementLabel}
|
||||
aria-label={incrementLabel || iconDescription}
|
||||
class:bx--number__control-btn={true}
|
||||
class:up-icon={true}
|
||||
on:click={() => {
|
||||
title="{incrementLabel}"
|
||||
aria-label="{incrementLabel || iconDescription}"
|
||||
class:bx--number__control-btn="{true}"
|
||||
class:up-icon="{true}"
|
||||
on:click="{() => {
|
||||
updateValue(1);
|
||||
}}
|
||||
{disabled}>
|
||||
}}"
|
||||
disabled="{disabled}">
|
||||
<CaretUpGlyph class="up-icon" />
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
{#if label}
|
||||
<label
|
||||
for={id}
|
||||
class:bx--label={true}
|
||||
class:bx--visually-hidden={hideLabel}>
|
||||
for="{id}"
|
||||
class:bx--label="{true}"
|
||||
class:bx--visually-hidden="{hideLabel}">
|
||||
<slot name="label">{label}</slot>
|
||||
</label>
|
||||
{/if}
|
||||
{#if helperText}
|
||||
<div class:bx--form__helper-text={true}>{helperText}</div>
|
||||
<div class:bx--form__helper-text="{true}">{helperText}</div>
|
||||
{/if}
|
||||
<div class:bx--number__input-wrapper={true}>
|
||||
<div class:bx--number__input-wrapper="{true}">
|
||||
<input
|
||||
bind:this={ref}
|
||||
bind:this="{ref}"
|
||||
type="number"
|
||||
pattern="[0-9]*"
|
||||
aria-describedby={errorId}
|
||||
data-invalid={invalid || undefined}
|
||||
aria-invalid={invalid || undefined}
|
||||
aria-label={label ? undefined : ariaLabel}
|
||||
aria-describedby="{errorId}"
|
||||
data-invalid="{invalid || undefined}"
|
||||
aria-invalid="{invalid || undefined}"
|
||||
aria-label="{label ? undefined : ariaLabel}"
|
||||
on:input
|
||||
on:input={({ target }) => {
|
||||
on:input="{({ target }) => {
|
||||
value = target.value;
|
||||
}}
|
||||
{disabled}
|
||||
{id}
|
||||
{max}
|
||||
{min}
|
||||
{step}
|
||||
{value}
|
||||
{readonly} />
|
||||
}}"
|
||||
disabled="{disabled}"
|
||||
id="{id}"
|
||||
max="{max}"
|
||||
min="{min}"
|
||||
step="{step}"
|
||||
value="{value}"
|
||||
readonly="{readonly}" />
|
||||
{#if invalid}
|
||||
<WarningFilled16 class="bx--number__invalid" />
|
||||
{/if}
|
||||
<div class:bx--number__controls={true}>
|
||||
<div class:bx--number__controls="{true}">
|
||||
<button
|
||||
type="button"
|
||||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
title={incrementLabel || iconDescription}
|
||||
aria-label={incrementLabel || iconDescription}
|
||||
class:bx--number__control-btn={true}
|
||||
class:up-icon={true}
|
||||
on:click={() => {
|
||||
title="{incrementLabel || iconDescription}"
|
||||
aria-label="{incrementLabel || iconDescription}"
|
||||
class:bx--number__control-btn="{true}"
|
||||
class:up-icon="{true}"
|
||||
on:click="{() => {
|
||||
updateValue(1);
|
||||
}}
|
||||
{disabled}>
|
||||
}}"
|
||||
disabled="{disabled}">
|
||||
<CaretUpGlyph class="up-icon" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
title={decrementLabel || iconDescription}
|
||||
aria-label={decrementLabel || iconDescription}
|
||||
class:bx--number__control-btn={true}
|
||||
class:down-icon={true}
|
||||
on:click={() => {
|
||||
title="{decrementLabel || iconDescription}"
|
||||
aria-label="{decrementLabel || iconDescription}"
|
||||
class:bx--number__control-btn="{true}"
|
||||
class:down-icon="{true}"
|
||||
on:click="{() => {
|
||||
updateValue(-1);
|
||||
}}
|
||||
{disabled}>
|
||||
}}"
|
||||
disabled="{disabled}">
|
||||
<CaretDownGlyph class="down-icon" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{#if error}
|
||||
<div id={errorId} class:bx--form-requirement={true}>{invalidText}</div>
|
||||
<div id="{errorId}" class:bx--form-requirement="{true}">
|
||||
{invalidText}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@
|
|||
</script>
|
||||
|
||||
<ol
|
||||
class:bx--list--ordered={true}
|
||||
class:bx--list--nested={nested}
|
||||
class:bx--list--ordered="{true}"
|
||||
class:bx--list--nested="{nested}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:mouseover
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@
|
|||
{#if story === 'links'}
|
||||
<OverflowMenu
|
||||
{...$$props.menu}
|
||||
on:close={({ detail }) => {
|
||||
on:close="{({ detail }) => {
|
||||
console.log('close', detail);
|
||||
}}>
|
||||
}}">
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
href="https://ibm.com"
|
||||
|
|
@ -43,9 +43,9 @@
|
|||
{:else if story === 'trigger'}
|
||||
<OverflowMenu
|
||||
{...$$props.menu}
|
||||
on:close={({ detail }) => {
|
||||
on:close="{({ detail }) => {
|
||||
console.log('close', detail);
|
||||
}}
|
||||
}}"
|
||||
style="width: auto">
|
||||
<div slot="menu" style="padding: 0 1rem">Menu</div>
|
||||
<OverflowMenuItem
|
||||
|
|
@ -64,9 +64,9 @@
|
|||
{:else}
|
||||
<OverflowMenu
|
||||
{...$$props.menu}
|
||||
on:close={({ detail }) => {
|
||||
on:close="{({ detail }) => {
|
||||
console.log('close', detail);
|
||||
}}>
|
||||
}}">
|
||||
<OverflowMenuItem
|
||||
{...$$props.menuItem}
|
||||
text="Option 1"
|
||||
|
|
|
|||
|
|
@ -151,35 +151,35 @@
|
|||
</svelte:head>
|
||||
|
||||
<svelte:body
|
||||
on:click={({ target }) => {
|
||||
on:click="{({ target }) => {
|
||||
if (buttonRef && buttonRef.contains(target)) return;
|
||||
if (menuRef && !menuRef.contains(target)) {
|
||||
open = false;
|
||||
}
|
||||
}} />
|
||||
}}" />
|
||||
|
||||
<button
|
||||
bind:this={buttonRef}
|
||||
bind:this="{buttonRef}"
|
||||
tabindex="0"
|
||||
aria-haspopup
|
||||
aria-expanded={open}
|
||||
aria-label={ariaLabel}
|
||||
{id}
|
||||
class:bx--overflow-menu={true}
|
||||
class:bx--overflow-menu--open={open}
|
||||
class:bx--overflow-menu--light={light}
|
||||
aria-expanded="{open}"
|
||||
aria-label="{ariaLabel}"
|
||||
id="{id}"
|
||||
class:bx--overflow-menu="{true}"
|
||||
class:bx--overflow-menu--open="{open}"
|
||||
class:bx--overflow-menu--light="{light}"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:click={({ target }) => {
|
||||
on:click="{({ target }) => {
|
||||
if (!(menuRef && menuRef.contains(target))) {
|
||||
open = !open;
|
||||
}
|
||||
}}
|
||||
}}"
|
||||
on:mouseover
|
||||
on:mouseenter
|
||||
on:mouseleave
|
||||
on:keydown
|
||||
on:keydown={(e) => {
|
||||
on:keydown="{(e) => {
|
||||
if (open) {
|
||||
if (['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp'].includes(e.key)) {
|
||||
e.preventDefault();
|
||||
|
|
@ -188,25 +188,25 @@
|
|||
open = false;
|
||||
}
|
||||
}
|
||||
}}>
|
||||
}}">
|
||||
<slot name="menu">
|
||||
<svelte:component
|
||||
this={icon}
|
||||
aria-label={iconDescription}
|
||||
title={iconDescription}
|
||||
this="{icon}"
|
||||
aria-label="{iconDescription}"
|
||||
title="{iconDescription}"
|
||||
class="bx--overflow-menu__icon {iconClass}" />
|
||||
</slot>
|
||||
{#if open}
|
||||
<ul
|
||||
bind:this={menuRef}
|
||||
bind:this="{menuRef}"
|
||||
role="menu"
|
||||
tabindex="-1"
|
||||
aria-label={ariaLabel}
|
||||
data-floating-menu-direction={direction}
|
||||
class:bx--overflow-menu-options={true}
|
||||
class:bx--overflow-menu--flip={flipped}
|
||||
class:bx--overflow-menu-options--open={open}
|
||||
class:bx--overflow-menu-options--light={light}
|
||||
aria-label="{ariaLabel}"
|
||||
data-floating-menu-direction="{direction}"
|
||||
class:bx--overflow-menu-options="{true}"
|
||||
class:bx--overflow-menu--flip="{flipped}"
|
||||
class:bx--overflow-menu-options--open="{open}"
|
||||
class:bx--overflow-menu-options--light="{light}"
|
||||
class:menuOptionsClass>
|
||||
<slot />
|
||||
</ul>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue