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

Merge pull request #239 from IBM/milestone-0.10

Browse source 
Milestone 0.10
This commit is contained in:
Eric Liu 2020-09-05 09:05:03 -07:00 • committed by GitHub
commit 78cf1b3460
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
188 changed files with 2179 additions and 2067 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.prettierrc Normal file
View file

@ -0,0 +1 @@
{ "svelteStrictMode": true }

3
.travis.yml
View file

@ -1,7 +1,6 @@
language: node_js language: node_js
node_js: 10 node_js: 12
cache: yarn cache: yarn
script: script:
- yarn prepack - yarn prepack
- yarn build - yarn build
- cd docs && yarn && yarn test

2
CONTRIBUTING.md
View file

@ -4,7 +4,7 @@
This project uses Node.js and Yarn. This project uses Node.js and Yarn.
- [Node.js](https://nodejs.org/en/download/package-manager/#macos) (version >=10) - [Node.js](https://nodejs.org/en/download/package-manager/#macos) (version >=12)
- [Yarn](https://yarnpkg.com/en/docs/install#mac-stable) - [Yarn](https://yarnpkg.com/en/docs/install#mac-stable)
## Fork and Clone ## Fork and Clone

6
docs/src/components/CopyableCodeSnippet.svelte
View file

@ -7,7 +7,7 @@
<CodeSnippet <CodeSnippet
{...$$restProps} {...$$restProps}
{code} code="{code}"
on:click={() => { on:click="{() => {
copy(code); copy(code);
}} /> }}" />

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

@ -17,7 +17,7 @@
platformName="Components Svelte" platformName="Components Svelte"
href="." href="."
rel="prefetch" rel="prefetch"
aria-current={segment === undefined ? 'page' : undefined}> aria-current="{segment === undefined ? 'page' : undefined}">
<SkipToContent /> <SkipToContent />
<!-- <HeaderNav> <!-- <HeaderNav>
<HeaderNavItem <HeaderNavItem

70
docs/src/components/Portfolio.svelte
View file

@ -28,17 +28,19 @@
<Carbon.Row> <Carbon.Row>
<Carbon.Column> <Carbon.Column>
<Carbon.ToggleSmall bind:toggled={skeleton} labelText="Skeleton state" /> <Carbon.ToggleSmall bind:toggled="{skeleton}" labelText="Skeleton state" />
</Carbon.Column> </Carbon.Column>
</Carbon.Row> </Carbon.Row>
<div class="component-grid"> <div class="component-grid">
<Carbon.Row class="scope"> <Carbon.Row class="scope">
<Carbon.Column noGutter> <Carbon.Column noGutter>
<TileCard title="Accordion"> <TileCard title="Accordion">
<Carbon.Accordion count={3} {skeleton} open={accordionItemOpen}> <Carbon.Accordion
<Carbon.AccordionItem title="Title 1" bind:open={accordionItemOpen}> count="{3}"
skeleton="{skeleton}"
open="{accordionItemOpen}">
<Carbon.AccordionItem title="Title 1" bind:open="{accordionItemOpen}">
Content 1 Content 1
</Carbon.AccordionItem> </Carbon.AccordionItem>
<Carbon.AccordionItem title="Title 2">Content 2</Carbon.AccordionItem> <Carbon.AccordionItem title="Title 2">Content 2</Carbon.AccordionItem>
@ -48,7 +50,7 @@
</Carbon.Column> </Carbon.Column>
<Carbon.Column noGutter> <Carbon.Column noGutter>
<TileCard title="Breadcrumb"> <TileCard title="Breadcrumb">
<Carbon.Breadcrumb {skeleton}> <Carbon.Breadcrumb skeleton="{skeleton}">
<Carbon.BreadcrumbItem href="/">Breadcrumb 1</Carbon.BreadcrumbItem> <Carbon.BreadcrumbItem href="/">Breadcrumb 1</Carbon.BreadcrumbItem>
<Carbon.BreadcrumbItem href="/">Breadcrumb 2</Carbon.BreadcrumbItem> <Carbon.BreadcrumbItem href="/">Breadcrumb 2</Carbon.BreadcrumbItem>
<Carbon.BreadcrumbItem href="/">Breadcrumb 3</Carbon.BreadcrumbItem> <Carbon.BreadcrumbItem href="/">Breadcrumb 3</Carbon.BreadcrumbItem>
@ -60,27 +62,33 @@
<Carbon.Row class="scope"> <Carbon.Row class="scope">
<Carbon.Column noGutter> <Carbon.Column noGutter>
<TileCard title="Primary button"> <TileCard title="Primary button">
<Carbon.Button {skeleton}>Primary</Carbon.Button> <Carbon.Button skeleton="{skeleton}">Primary</Carbon.Button>
</TileCard> </TileCard>
</Carbon.Column> </Carbon.Column>
<Carbon.Column noGutter> <Carbon.Column noGutter>
<TileCard title="Secondary button"> <TileCard title="Secondary button">
<Carbon.Button kind="secondary" {skeleton}>Secondary</Carbon.Button> <Carbon.Button kind="secondary" skeleton="{skeleton}">
Secondary
</Carbon.Button>
</TileCard> </TileCard>
</Carbon.Column> </Carbon.Column>
<Carbon.Column noGutter> <Carbon.Column noGutter>
<TileCard title="Tertiary button"> <TileCard title="Tertiary button">
<Carbon.Button kind="tertiary" {skeleton}>Tertiary</Carbon.Button> <Carbon.Button kind="tertiary" skeleton="{skeleton}">
Tertiary
</Carbon.Button>
</TileCard> </TileCard>
</Carbon.Column> </Carbon.Column>
<Carbon.Column noGutter> <Carbon.Column noGutter>
<TileCard title="Ghost button"> <TileCard title="Ghost button">
<Carbon.Button kind="ghost" {skeleton}>Ghost</Carbon.Button> <Carbon.Button kind="ghost" skeleton="{skeleton}">Ghost</Carbon.Button>
</TileCard> </TileCard>
</Carbon.Column> </Carbon.Column>
<Carbon.Column noGutter> <Carbon.Column noGutter>
<TileCard title="Danger button"> <TileCard title="Danger button">
<Carbon.Button kind="danger" {skeleton}>Danger</Carbon.Button> <Carbon.Button kind="danger" skeleton="{skeleton}">
Danger
</Carbon.Button>
</TileCard> </TileCard>
</Carbon.Column> </Carbon.Column>
</Carbon.Row> </Carbon.Row>
@ -88,50 +96,52 @@
<Carbon.Row class="scope"> <Carbon.Row class="scope">
<Carbon.Column noGutter> <Carbon.Column noGutter>
<TileCard title="Primary button with icon"> <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> </TileCard>
</Carbon.Column> </Carbon.Column>
<Carbon.Column noGutter> <Carbon.Column noGutter>
<TileCard title="Icon-only buttons"> <TileCard title="Icon-only buttons">
<Carbon.Button <Carbon.Button
icon={Add16} icon="{Add16}"
hasIconOnly hasIconOnly
iconDescription="Primary" iconDescription="Primary"
tooltipPosition="bottom" tooltipPosition="bottom"
tooltipAlignment="center" tooltipAlignment="center"
{skeleton} /> skeleton="{skeleton}" />
<Carbon.Button <Carbon.Button
icon={Add16} icon="{Add16}"
hasIconOnly hasIconOnly
kind="secondary" kind="secondary"
iconDescription="Secondary" iconDescription="Secondary"
tooltipPosition="bottom" tooltipPosition="bottom"
tooltipAlignment="center" tooltipAlignment="center"
{skeleton} /> skeleton="{skeleton}" />
<Carbon.Button <Carbon.Button
icon={Add16} icon="{Add16}"
hasIconOnly hasIconOnly
kind="tertiary" kind="tertiary"
iconDescription="Tertiary" iconDescription="Tertiary"
tooltipPosition="bottom" tooltipPosition="bottom"
tooltipAlignment="center" tooltipAlignment="center"
{skeleton} /> skeleton="{skeleton}" />
<Carbon.Button <Carbon.Button
icon={Add16} icon="{Add16}"
hasIconOnly hasIconOnly
kind="ghost" kind="ghost"
iconDescription="Ghost" iconDescription="Ghost"
tooltipPosition="bottom" tooltipPosition="bottom"
tooltipAlignment="center" tooltipAlignment="center"
{skeleton} /> skeleton="{skeleton}" />
<Carbon.Button <Carbon.Button
icon={Add16} icon="{Add16}"
hasIconOnly hasIconOnly
kind="danger" kind="danger"
iconDescription="Danger" iconDescription="Danger"
tooltipPosition="bottom" tooltipPosition="bottom"
tooltipAlignment="center" tooltipAlignment="center"
{skeleton} /> skeleton="{skeleton}" />
</TileCard> </TileCard>
</Carbon.Column> </Carbon.Column>
</Carbon.Row> </Carbon.Row>
@ -141,9 +151,9 @@
<TileCard title="Checkbox"> <TileCard title="Checkbox">
<fieldset class="bx--fieldset"> <fieldset class="bx--fieldset">
<legend class="bx--label">Checkbox heading</legend> <legend class="bx--label">Checkbox heading</legend>
<Carbon.Checkbox {skeleton} labelText="Checkbox label" /> <Carbon.Checkbox skeleton="{skeleton}" labelText="Checkbox label" />
<Carbon.Checkbox {skeleton} labelText="Checkbox label" /> <Carbon.Checkbox skeleton="{skeleton}" labelText="Checkbox label" />
<Carbon.Checkbox {skeleton} labelText="Checkbox label" /> <Carbon.Checkbox skeleton="{skeleton}" labelText="Checkbox label" />
</fieldset> </fieldset>
</TileCard> </TileCard>
</Carbon.Column> </Carbon.Column>
@ -153,11 +163,11 @@
<legend class="bx--label">Checkbox heading</legend> <legend class="bx--label">Checkbox heading</legend>
<Carbon.Checkbox <Carbon.Checkbox
indeterminate indeterminate
{skeleton} skeleton="{skeleton}"
labelText="Checkbox label" /> labelText="Checkbox label" />
<Carbon.Checkbox <Carbon.Checkbox
indeterminate indeterminate
{skeleton} skeleton="{skeleton}"
labelText="Checkbox label" /> labelText="Checkbox label" />
</fieldset> </fieldset>
</TileCard> </TileCard>
@ -167,21 +177,21 @@
<Carbon.Row class="scope"> <Carbon.Row class="scope">
<Carbon.Column noGutter> <Carbon.Column noGutter>
<TileCard title="Inline Code Snippet"> <TileCard title="Inline Code Snippet">
<Carbon.CodeSnippet type="inline" light {skeleton}> <Carbon.CodeSnippet type="inline" light skeleton="{skeleton}">
{`node -v`} {`node -v`}
</Carbon.CodeSnippet> </Carbon.CodeSnippet>
</TileCard> </TileCard>
</Carbon.Column> </Carbon.Column>
<Carbon.Column noGutter> <Carbon.Column noGutter>
<TileCard title="Single-line Code Snippet"> <TileCard title="Single-line Code Snippet">
<Carbon.CodeSnippet type="single" light {skeleton}> <Carbon.CodeSnippet type="single" light skeleton="{skeleton}">
{`tsc -c tsconfig.json`} {`tsc -c tsconfig.json`}
</Carbon.CodeSnippet> </Carbon.CodeSnippet>
</TileCard> </TileCard>
</Carbon.Column> </Carbon.Column>
<Carbon.Column lg={8} noGutter> <Carbon.Column lg="{8}" noGutter>
<TileCard title="Multi-line Code Snippet"> <TileCard title="Multi-line Code Snippet">
<Carbon.CodeSnippet type="multi" light {skeleton}> <Carbon.CodeSnippet type="multi" light skeleton="{skeleton}">
{`* { {`* {
margin: 0; margin: 0;
padding: 0; padding: 0;

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

@ -21,7 +21,7 @@
} }
</style> </style>
<Select inline labelText="Theme" bind:selected={theme}> <Select inline labelText="Theme" bind:selected="{theme}">
<SelectItem value="white" text="White" /> <SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" /> <SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" /> <SelectItem value="g90" text="Gray 90" />

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

@ -44,7 +44,7 @@
hasIconOnly hasIconOnly
kind="ghost" kind="ghost"
size="small" size="small"
icon={Code16} icon="{Code16}"
iconDescription="Usage" iconDescription="Usage"
tooltipAlignment="center" tooltipAlignment="center"
tooltipPosition="top" /> tooltipPosition="top" />
@ -52,7 +52,7 @@
hasIconOnly hasIconOnly
kind="ghost" kind="ghost"
size="small" size="small"
icon={Code16} icon="{Code16}"
iconDescription="Usage" iconDescription="Usage"
tooltipAlignment="center" tooltipAlignment="center"
tooltipPosition="top" /> tooltipPosition="top" />

16
docs/src/routes/_layout.svelte
View file

@ -58,28 +58,28 @@
</style> </style>
{#if segment !== 'examples'} {#if segment !== 'examples'}
<GlobalHeader {segment} /> <GlobalHeader segment="{segment}" />
<SideNav isOpen> <SideNav isOpen>
<SideNavItems> <SideNavItems>
<SideNavLink <SideNavLink
text="Getting Started" text="Getting Started"
href="getting-started" href="getting-started"
rel="prefetch" rel="prefetch"
isSelected={segment === 'getting-started'} /> isSelected="{segment === 'getting-started'}" />
<SideNavMenu <SideNavMenu
text="Components" text="Components"
expanded={segment === 'components'} expanded="{segment === 'components'}"
isSelected={segment === 'components' && !$tail}> isSelected="{segment === 'components' && !$tail}">
<SideNavMenuItem <SideNavMenuItem
text="Index" text="Index"
href="components" href="components"
rel="prefetch" rel="prefetch"
isSelected={segment === 'components' && $tail && $tail.slug === 'index'} /> isSelected="{segment === 'components' && $tail && $tail.slug === 'index'}" />
<SideNavMenuItem <SideNavMenuItem
text="Button" text="Button"
href="components/button" href="components/button"
rel="prefetch" rel="prefetch"
isSelected={segment === 'components' && $tail && $tail.slug === 'button'} /> isSelected="{segment === 'components' && $tail && $tail.slug === 'button'}" />
</SideNavMenu> </SideNavMenu>
</SideNavItems> </SideNavItems>
</SideNav> </SideNav>
@ -90,11 +90,11 @@
style="display: flex; align-items: center; justify-content: style="display: flex; align-items: center; justify-content:
space-between;"> space-between;">
<Breadcrumb> <Breadcrumb>
<BreadcrumbItem href="." isCurrentPage={!$tail && !segment}> <BreadcrumbItem href="." isCurrentPage="{!$tail && !segment}">
Home Home
</BreadcrumbItem> </BreadcrumbItem>
{#if segment && $tail} {#if segment && $tail}
<BreadcrumbItem href={segment} isCurrentPage={!$tail}> <BreadcrumbItem href="{segment}" isCurrentPage="{!$tail}">
{urlIds[segment]} {urlIds[segment]}
</BreadcrumbItem> </BreadcrumbItem>
{/if} {/if}

22
docs/src/routes/components/[slug].svelte
View file

@ -96,35 +96,35 @@
<Row noGutter> <Row noGutter>
<div class="preview"> <div class="preview">
{#if component} {#if component}
<svelte:component this={component.default} {...defaultProps} /> <svelte:component this="{component.default}" {...defaultProps} />
{/if} {/if}
</div> </div>
</Row> </Row>
<Row> <Row>
<Column md={3} lg={4}> <Column md="{3}" lg="{4}">
{#each Object.keys(props) as key} {#each Object.keys(props) as key}
{#if Array.isArray(props[key].values)} {#if Array.isArray(props[key].values)}
<FormGroup legendText={key}> <FormGroup legendText="{key}">
<RadioButtonGroup <RadioButtonGroup
selected={props[key].default} selected="{props[key].default}"
on:change={({ detail }) => { on:change="{({ detail }) => {
defaultProps = { ...defaultProps, [key]: detail }; defaultProps = { ...defaultProps, [key]: detail };
}}> }}">
{#each props[key].values as value} {#each props[key].values as value}
<RadioButton {value} id={value} labelText={value} /> <RadioButton value="{value}" id="{value}" labelText="{value}" />
{/each} {/each}
</RadioButtonGroup> </RadioButtonGroup>
</FormGroup> </FormGroup>
{/if} {/if}
{/each} {/each}
</Column> </Column>
<Column md={5}> <Column md="{5}">
<CodeSnippet <CodeSnippet
type="multi" type="multi"
code={data.source} code="{data.source}"
on:click={() => { on:click="{() => {
copy(data.source); copy(data.source);
}} /> }}" />
</Column> </Column>
</Row> </Row>

28
docs/src/routes/examples/Button.svelte
View file

@ -8,10 +8,10 @@
<Button <Button
{...$$props} {...$$props}
kind="primary" kind="primary"
on:click={() => console.log('click')} on:click="{() => console.log('click')}"
on:mouseover={() => console.log('mouseover')} on:mouseover="{() => console.log('mouseover')}"
on:mouseenter={() => console.log('mouseenter')} on:mouseenter="{() => console.log('mouseenter')}"
on:mouseleave={() => console.log('mouseleave')}> on:mouseleave="{() => console.log('mouseleave')}">
Primary button Primary button
</Button> </Button>
@ -26,15 +26,15 @@
<div> <div>
<h4>Buttons with Icons</h4> <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>
<div> <div>
@ -43,7 +43,7 @@
{...$$props} {...$$props}
kind="primary" kind="primary"
hasIconOnly hasIconOnly
icon={Add16} icon="{Add16}"
iconDescription="Primary" iconDescription="Primary"
tooltipPosition="bottom" tooltipPosition="bottom"
tooltipAlignment="center" /> tooltipAlignment="center" />
@ -52,7 +52,7 @@
{...$$props} {...$$props}
kind="secondary" kind="secondary"
hasIconOnly hasIconOnly
icon={Add16} icon="{Add16}"
iconDescription="Secondary" iconDescription="Secondary"
tooltipPosition="bottom" tooltipPosition="bottom"
tooltipAlignment="center" /> tooltipAlignment="center" />
@ -61,7 +61,7 @@
{...$$props} {...$$props}
kind="tertiary" kind="tertiary"
hasIconOnly hasIconOnly
icon={Add16} icon="{Add16}"
iconDescription="Tertiary" iconDescription="Tertiary"
tooltipPosition="bottom" tooltipPosition="bottom"
tooltipAlignment="center" /> tooltipAlignment="center" />
@ -70,7 +70,7 @@
{...$$props} {...$$props}
kind="ghost" kind="ghost"
hasIconOnly hasIconOnly
icon={Add16} icon="{Add16}"
iconDescription="Ghost" iconDescription="Ghost"
tooltipPosition="bottom" tooltipPosition="bottom"
tooltipAlignment="center" /> tooltipAlignment="center" />
@ -79,7 +79,7 @@
{...$$props} {...$$props}
kind="danger" kind="danger"
hasIconOnly hasIconOnly
icon={Add16} icon="{Add16}"
iconDescription="Danger" iconDescription="Danger"
tooltipPosition="bottom" tooltipPosition="bottom"
tooltipAlignment="center" /> tooltipAlignment="center" />

5
docs/src/routes/getting-started/index.svelte
View file

@ -27,10 +27,11 @@
<div slot="content" class="content"> <div slot="content" class="content">
<TabContent> <TabContent>
<CopyableCodeSnippet <CopyableCodeSnippet
code={`yarn add -D carbon-components-svelte`} /> code="{`yarn add -D carbon-components-svelte`}" />
</TabContent> </TabContent>
<TabContent> <TabContent>
<CopyableCodeSnippet code={`npm -i -D carbon-components-svelte`} /> <CopyableCodeSnippet
code="{`npm -i -D carbon-components-svelte`}" />
</TabContent> </TabContent>
</div> </div>
</Tabs> </Tabs>

4
examples/rollup-typescript/src/App.svelte
View file

@ -4,9 +4,9 @@
<Button <Button
kind="primary" kind="primary"
on:click={() => { on:click="{() => {
console.log('click'); console.log('click');
}}> }}">
Primary button Primary button
</Button> </Button>

18
package.json
View file

@ -21,23 +21,23 @@
"devDependencies": { "devDependencies": {
"@babel/core": "^7.10.5", "@babel/core": "^7.10.5",
"@babel/preset-env": "^7.10.4", "@babel/preset-env": "^7.10.4",
"@rollup/plugin-commonjs": "^14.0.0", "@rollup/plugin-commonjs": "^15.0.0",
"@rollup/plugin-node-resolve": "^8.4.0", "@rollup/plugin-node-resolve": "^9.0.0",
"@storybook/addon-knobs": "^5.3.19", "@storybook/addon-knobs": "^5.3.19",
"@storybook/addon-storysource": "^5.3.19", "@storybook/addon-storysource": "^5.3.19",
"@storybook/cli": "^5.3.19", "@storybook/cli": "^5.3.19",
"@storybook/svelte": "^5.3.19", "@storybook/svelte": "^5.3.19",
"@tsconfig/svelte": "^1.0.8", "@tsconfig/svelte": "^1.0.10",
"babel-loader": "^8.0.6", "babel-loader": "^8.0.6",
"comment-parser": "^0.7.5", "comment-parser": "^0.7.5",
"prettier": "^2.0.5", "prettier": "^2.1.1",
"prettier-plugin-svelte": "^1.1.0", "prettier-plugin-svelte": "^1.2.1",
"rollup": "^2.22.1", "rollup": "^2.26.10",
"rollup-plugin-svelte": "^5.2.3", "rollup-plugin-svelte": "^6.0.0",
"rollup-plugin-terser": "^6.1.0", "rollup-plugin-terser": "^7.0.2",
"svelte": "^3.24.1", "svelte": "^3.24.1",
"svelte-loader": "^2.13.6", "svelte-loader": "^2.13.6",
"typescript": "^3.9.7" "typescript": "^4.0.2"
}, },
"babel": { "babel": {
"presets": [ "presets": [

10
src/Accordion/Accordion.Skeleton.svelte
View file

@ -16,8 +16,8 @@
</script> </script>
<ul <ul
class:bx--accordion={true} class:bx--accordion="{true}"
class:bx--skeleton={true} class:bx--skeleton="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
@ -25,9 +25,9 @@
on:mouseleave> on:mouseleave>
{#if open} {#if open}
<li <li
class:bx--accordion__item={true} class:bx--accordion__item="{true}"
class:bx--accordion__item--active={true}> class:bx--accordion__item--active="{true}">
<span class:bx--accordion__heading={true}> <span class:bx--accordion__heading="{true}">
<ChevronRight16 class="bx--accordion__arrow" /> <ChevronRight16 class="bx--accordion__arrow" />
<SkeletonText class="bx--accordion__title" /> <SkeletonText class="bx--accordion__title" />
</span> </span>

8
src/Accordion/Accordion.Story.svelte
View file

@ -11,11 +11,11 @@
{#if story === 'skeleton'} {#if story === 'skeleton'}
<div style="width: 500px"> <div style="width: 500px">
<AccordionSkeleton {open} {count} /> <AccordionSkeleton open="{open}" count="{count}" />
</div> </div>
{:else} {:else}
<Accordion {...$$restProps}> <Accordion {...$$restProps}>
<AccordionItem {title} {open}> <AccordionItem title="{title}" open="{open}">
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
@ -41,9 +41,7 @@
</AccordionItem> </AccordionItem>
<AccordionItem> <AccordionItem>
<div slot="title"> <div slot="title">
Section 4 title ( Section 4 title ( <em>the title can be a node</em> )
<em>the title can be a node</em>
)
</div> </div>
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod

5
src/Accordion/Accordion.svelte
View file

@ -23,10 +23,9 @@
on:mouseleave /> on:mouseleave />
{:else} {:else}
<ul <ul
class:bx--accordion={true} class:bx--accordion="{true}"
{...$$restProps} {...$$restProps}
class="bx--accordion--{align} class="bx--accordion--{align} {$$restProps.class}"
{$$restProps.class}"
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter

26
src/Accordion/AccordionItem.svelte
View file

@ -24,34 +24,36 @@
</script> </script>
<li <li
class:bx--accordion__item={true} class:bx--accordion__item="{true}"
class:bx--accordion__item--active={open} class:bx--accordion__item--active="{open}"
class="bx--accordion__item--${animation}" class="bx--accordion__item--${animation}"
{...$$restProps} {...$$restProps}
on:animationend on:animationend
on:animationend={() => { on:animationend="{() => {
animation = undefined; animation = undefined;
}}> }}">
<button <button
type="button" type="button"
class:bx--accordion__heading={true} class:bx--accordion__heading="{true}"
title={iconDescription} title="{iconDescription}"
aria-expanded={open} aria-expanded="{open}"
on:click on:click
on:click={() => { on:click="{() => {
open = !open; open = !open;
animation = open ? 'expanding' : 'collapsing'; animation = open ? 'expanding' : 'collapsing';
}} }}"
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
on:keydown on:keydown
on:keydown={({ key }) => { on:keydown="{({ key }) => {
if (open && key === 'Escape') { if (open && key === 'Escape') {
open = false; open = false;
} }
}}> }}">
<ChevronRight16 class="bx--accordion__arrow" aria-label={iconDescription} /> <ChevronRight16
class="bx--accordion__arrow"
aria-label="{iconDescription}" />
<div class="bx--accordion__title"> <div class="bx--accordion__title">
<slot name="title">{title}</slot> <slot name="title">{title}</slot>
</div> </div>

10
src/Breadcrumb/Breadcrumb.Skeleton.svelte
View file

@ -13,17 +13,17 @@
</script> </script>
<div <div
class:bx--breadcrumb={true} class:bx--breadcrumb="{true}"
class:bx--breadcrumb--no-trailing-slash={noTrailingSlash} class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
class:bx--skeleton={true} class:bx--skeleton="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave>
{#each Array.from({ length: count }, (_, i) => i) as item, i (item)} {#each Array.from({ length: count }, (_, i) => i) as item, i (item)}
<div class:bx--breadcrumb-item={true}> <div class:bx--breadcrumb-item="{true}">
<span class:bx--link={true}>&nbsp;</span> <span class:bx--link="{true}">&nbsp;</span>
</div> </div>
{/each} {/each}
</div> </div>

4
src/Breadcrumb/Breadcrumb.Story.svelte
View file

@ -24,9 +24,9 @@
<BreadcrumbItem href="#" aria-current="page">Breadcrumb 3</BreadcrumbItem> <BreadcrumbItem href="#" aria-current="page">Breadcrumb 3</BreadcrumbItem>
</Breadcrumb> </Breadcrumb>
{:else if story === 'skeleton'} {:else if story === 'skeleton'}
<BreadcrumbSkeleton {noTrailingSlash} {...$$restProps} /> <BreadcrumbSkeleton noTrailingSlash="{noTrailingSlash}" {...$$restProps} />
{:else} {:else}
<Breadcrumb {noTrailingSlash}> <Breadcrumb noTrailingSlash="{noTrailingSlash}">
<BreadcrumbItem let:props> <BreadcrumbItem let:props>
<a {...props} href="/#">Breadcrumb 1</a> <a {...props} href="/#">Breadcrumb 1</a>
</BreadcrumbItem> </BreadcrumbItem>

4
src/Breadcrumb/Breadcrumb.svelte
View file

@ -30,8 +30,8 @@
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave>
<ol <ol
class:bx--breadcrumb={true} class:bx--breadcrumb="{true}"
class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}> class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}">
<slot /> <slot />
</ol> </ol>
</nav> </nav>

8
src/Breadcrumb/BreadcrumbItem.svelte
View file

@ -15,19 +15,19 @@
</script> </script>
<li <li
class:bx--breadcrumb-item={true} class:bx--breadcrumb-item="{true}"
class:bx--breadcrumb-item--current={isCurrentPage && $$restProps['aria-current'] !== 'page'} class:bx--breadcrumb-item--current="{isCurrentPage && $$restProps['aria-current'] !== 'page'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave>
{#if href} {#if href}
<Link {href} aria-current={$$restProps['aria-current']}> <Link href="{href}" aria-current="{$$restProps['aria-current']}">
<slot /> <slot />
</Link> </Link>
{:else} {:else}
<slot <slot
props={{ 'aria-current': $$restProps['aria-current'], class: 'bx--link' }} /> props="{{ 'aria-current': $$restProps['aria-current'], class: 'bx--link' }}" />
{/if} {/if}
</li> </li>

16
src/Button/Button.Skeleton.svelte
View file

@ -14,11 +14,11 @@
{#if href} {#if href}
<a <a
{href} href="{href}"
role="button" role="button"
class:bx--skeleton={true} class:bx--skeleton="{true}"
class:bx--btn={true} class:bx--btn="{true}"
class:bx--btn--sm={small} class:bx--btn--sm="{small}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
@ -28,12 +28,12 @@
</a> </a>
{:else} {:else}
<div <div
class:bx--skeleton={true} class:bx--skeleton="{true}"
class:bx--btn={true} class:bx--btn="{true}"
class:bx--btn--sm={small} class:bx--btn--sm="{small}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave /> on:mouseleave></div>
{/if} {/if}

5
src/Button/Button.Story.svelte
View file

@ -14,6 +14,7 @@
small, small,
tooltipPosition, tooltipPosition,
tooltipAlignment, tooltipAlignment,
stacked,
} = $$props; } = $$props;
const regularProps = { const regularProps = {
@ -35,7 +36,7 @@
tooltipAlignment, tooltipAlignment,
}; };
const setProps = { disabled, small, size, iconDescription }; const setProps = { stacked, disabled, small, size, iconDescription };
</script> </script>
<div> <div>
@ -50,7 +51,7 @@
{:else if story === 'icon-only buttons'} {:else if story === 'icon-only buttons'}
<Button {...iconOnlyProps} /> <Button {...iconOnlyProps} />
{:else if story === 'set of buttons'} {:else if story === 'set of buttons'}
<ButtonSet> <ButtonSet stacked="{setProps.stacked}">
<Button kind="ghost" {...setProps}>Ghost button</Button> <Button kind="ghost" {...setProps}>Ghost button</Button>
<Button kind="secondary" {...setProps}>Secondary button</Button> <Button kind="secondary" {...setProps}>Secondary button</Button>
<Button kind="primary" {...setProps}>Primary button</Button> <Button kind="primary" {...setProps}>Primary button</Button>

3
src/Button/Button.stories.js
View file

@ -24,7 +24,6 @@ export const Default = () => ({
disabled: boolean("Disabled (disabled)", false), disabled: boolean("Disabled (disabled)", false),
size: select("Button size (size)", sizes, "default"), size: select("Button size (size)", sizes, "default"),
iconDescription: text("Icon description (iconDescription)", "Button icon"), iconDescription: text("Icon description (iconDescription)", "Button icon"),
small: boolean("Small (small) - Deprecated in favor of `size`", false),
}, },
}); });
@ -54,7 +53,7 @@ export const SetOfButtons = () => ({
props: { props: {
story: "set of buttons", story: "set of buttons",
disabled: boolean("Disabled (disabled)", false), disabled: boolean("Disabled (disabled)", false),
small: boolean("Small (small)", false), stacked: boolean("Stacked (stacked)", false),
size: select("Button size (size)", sizes, "default"), size: select("Button size (size)", sizes, "default"),
iconDescription: text("Icon description (iconDescription)", "Button icon"), iconDescription: text("Icon description (iconDescription)", "Button icon"),
}, },

24
src/Button/Button.svelte
View file

@ -122,56 +122,56 @@
{#if skeleton} {#if skeleton}
<ButtonSkeleton <ButtonSkeleton
{href} href="{href}"
small={size === 'small'} small="{size === 'small'}"
{...$$restProps} {...$$restProps}
style={hasIconOnly && 'width: 3rem;'} style="{hasIconOnly && 'width: 3rem;'}"
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave /> on:mouseleave />
{:else} {:else}
{#if as} {#if as}
<slot props={buttonProps} /> <slot props="{buttonProps}" />
{:else if href && !disabled} {:else if href && !disabled}
<!-- svelte-ignore a11y-missing-attribute --> <!-- svelte-ignore a11y-missing-attribute -->
<a <a
bind:this={ref} bind:this="{ref}"
{...buttonProps} {...buttonProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave>
{#if hasIconOnly} {#if hasIconOnly}
<span class:bx--assistive-text={true}>{iconDescription}</span> <span class:bx--assistive-text="{true}">{iconDescription}</span>
{/if} {/if}
<slot /> <slot />
{#if icon} {#if icon}
<svelte:component <svelte:component
this={icon} this="{icon}"
aria-hidden="true" aria-hidden="true"
class="bx--btn__icon" class="bx--btn__icon"
aria-label={iconDescription} /> aria-label="{iconDescription}" />
{/if} {/if}
</a> </a>
{:else} {:else}
<button <button
bind:this={ref} bind:this="{ref}"
{...buttonProps} {...buttonProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave>
{#if hasIconOnly} {#if hasIconOnly}
<span class:bx--assistive-text={true}>{iconDescription}</span> <span class:bx--assistive-text="{true}">{iconDescription}</span>
{/if} {/if}
<slot /> <slot />
{#if icon} {#if icon}
<svelte:component <svelte:component
this={icon} this="{icon}"
aria-hidden="true" aria-hidden="true"
class="bx--btn__icon" class="bx--btn__icon"
aria-label={iconDescription} /> aria-label="{iconDescription}" />
{/if} {/if}
</button> </button>
{/if} {/if}

13
src/Button/ButtonSet.svelte
View file

@ -1,3 +1,14 @@
<div class:bx--btn-set={true} {...$$restProps}> <script>
/**
* Set to `true` to stack the buttons vertically
* @type {boolean} [stacked=false]
*/
export let stacked = false;
</script>
<div
class:bx--btn-set="{true}"
class:bx--btn-set--stacked="{stacked}"
{...$$restProps}>
<slot /> <slot />
</div> </div>

10
src/Checkbox/Checkbox.Skeleton.svelte
View file

@ -1,11 +1,13 @@
<div <div
class:bx--form-item={true} class:bx--form-item="{true}"
class:bx--checkbox-wrapper={true} class:bx--checkbox-wrapper="{true}"
class:bx--checkbox-label={true} class:bx--checkbox-label="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave> 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> </div>

4
src/Checkbox/Checkbox.Story.svelte
View file

@ -39,9 +39,9 @@
{...checkboxProps} {...checkboxProps}
id="checkbox-label-1" id="checkbox-label-1"
bind:checked bind:checked
on:check={({ detail }) => { on:check="{({ detail }) => {
console.log('on:check', detail); console.log('on:check', detail);
}} /> }}" />
<Checkbox {...checkboxProps} id="checkbox-label-2" checked /> <Checkbox {...checkboxProps} id="checkbox-label-2" checked />
</fieldset> </fieldset>
{/if} {/if}

30
src/Checkbox/Checkbox.svelte
View file

@ -82,31 +82,31 @@
on:mouseleave /> on:mouseleave />
{:else} {:else}
<div <div
class:bx--form-item={true} class:bx--form-item="{true}"
class:bx--checkbox-wrapper={true} class:bx--checkbox-wrapper="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave>
<input <input
bind:this={ref} bind:this="{ref}"
type="checkbox" type="checkbox"
{checked} checked="{checked}"
{disabled} disabled="{disabled}"
{id} id="{id}"
{indeterminate} indeterminate="{indeterminate}"
{name} name="{name}"
{readonly} readonly="{readonly}"
class:bx--checkbox={true} class:bx--checkbox="{true}"
on:change on:change
on:change={() => { on:change="{() => {
checked = !checked; checked = !checked;
}} /> }}" />
<label for={id} {title} class:bx--checkbox-label={true}> <label for="{id}" title="{title}" class:bx--checkbox-label="{true}">
<span <span
class:bx--checkbox-label-text={true} class:bx--checkbox-label-text="{true}"
class:bx--visually-hidden={hideLabel}> class:bx--visually-hidden="{hideLabel}">
{labelText} {labelText}
</span> </span>
</label> </label>

18
src/CodeSnippet/CodeSnippet.Skeleton.svelte
View file

@ -7,22 +7,18 @@
</script> </script>
<div <div
class:bx--snippet={true} class:bx--snippet="{true}"
class:bx--skeleton={true} class:bx--skeleton="{true}"
class:bx--snippet--single={type === 'single'} class:bx--snippet--single="{type === 'single'}"
class:bx--snippet--multi={type === 'multi'} class:bx--snippet--multi="{type === 'multi'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave>
<div class:bx--snippet-container={true}> <div class:bx--snippet-container="{true}">
{#if type === 'single'} {#if type === 'single'}
<span /> <span></span>
{:else if type === 'multi'} {:else if type === 'multi'}<span></span> <span></span> <span></span>{/if}
<span />
<span />
<span />
{/if}
</div> </div>
</div> </div>

67
src/CodeSnippet/CodeSnippet.svelte
View file

@ -106,7 +106,7 @@
{#if skeleton} {#if skeleton}
<CodeSnippetSkeleton <CodeSnippetSkeleton
{type} type="{type}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
@ -117,65 +117,64 @@
{#if hideCopyButton} {#if hideCopyButton}
<span <span
class="bx--snippet {type && `bx--snippet--${type}`} class="bx--snippet {type && `bx--snippet--${type}`}
{type === 'inline' && 'bx--btn--copy'} {type === 'inline' && 'bx--btn--copy'}
{expanded && 'bx--snippet--expand'} {expanded && 'bx--snippet--expand'}
{light && 'bx--snippet--light'} {light && 'bx--snippet--light'}
{hideCopyButton && 'bx--snippet--no-copy'}" {hideCopyButton && 'bx--snippet--no-copy'}"
{...$$restProps}> {...$$restProps}>
<code {id}> <code id="{id}">
<slot>{code}</slot> <slot>{code}</slot>
</code> </code>
</span> </span>
{:else} {:else}
<Copy <Copy
aria-label={copyLabel} aria-label="{copyLabel}"
aria-describedby={id} aria-describedby="{id}"
{feedback} feedback="{feedback}"
{feedbackTimeout} feedbackTimeout="{feedbackTimeout}"
class="bx--snippet {type && `bx--snippet--${type}`} class="bx--snippet {type && `bx--snippet--${type}`}
{type === 'inline' && 'bx--btn--copy'} {type === 'inline' && 'bx--btn--copy'}
{expanded && 'bx--snippet--expand'} {expanded && 'bx--snippet--expand'}
{light && 'bx--snippet--light'} {light && 'bx--snippet--light'}
{hideCopyButton && 'bx--snippet--no-copy'}" {hideCopyButton && 'bx--snippet--no-copy'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave>
<code {id}> <code id="{id}">
<slot>{code}</slot> <slot>{code}</slot>
</code> </code>
</Copy> </Copy>
{/if} {/if}
{:else} {:else}
<div <div
class:bx--snippet={true} class:bx--snippet="{true}"
class:bx--btn--copy={type === 'inline'} class:bx--btn--copy="{type === 'inline'}"
class:bx--snippet--expand={expanded} class:bx--snippet--expand="{expanded}"
class:bx--snippet--light={light} class:bx--snippet--light="{light}"
class:bx--snippet--no-copy={hideCopyButton} class:bx--snippet--no-copy="{hideCopyButton}"
{...$$restProps} {...$$restProps}
class="{type && `bx--snippet--${type}`} class="{type && `bx--snippet--${type}`} {$$restProps.class}"
{$$restProps.class}"
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave>
<div <div
role={type === 'single' ? 'textbox' : undefined} role="{type === 'single' ? 'textbox' : undefined}"
tabindex={type === 'single' ? '0' : undefined} tabindex="{type === 'single' ? '0' : undefined}"
class:bx--snippet-container={true} class:bx--snippet-container="{true}"
aria-label={$$restProps['aria-label'] || copyLabel || 'code-snippet'}> aria-label="{$$restProps['aria-label'] || copyLabel || 'code-snippet'}">
<code> <code>
<pre bind:this={ref}> <pre bind:this="{ref}">
<slot>{code}</slot> <slot>{code}</slot>
</pre> </pre>
</code> </code>
</div> </div>
{#if !hideCopyButton} {#if !hideCopyButton}
<CopyButton <CopyButton
{feedback} feedback="{feedback}"
{feedbackTimeout} feedbackTimeout="{feedbackTimeout}"
iconDescription={copyButtonDescription} iconDescription="{copyButtonDescription}"
on:click on:click
on:animationend /> on:animationend />
{/if} {/if}
@ -184,13 +183,13 @@
kind="ghost" kind="ghost"
size="small" size="small"
class="bx--snippet-btn--expand" class="bx--snippet-btn--expand"
on:click={() => { on:click="{() => {
expanded = !expanded; expanded = !expanded;
}}> }}">
<span class:bx--snippet-btn--text={true}>{expandText}</span> <span class:bx--snippet-btn--text="{true}">{expandText}</span>
<ChevronDown16 <ChevronDown16
class="bx--icon-chevron--down bx--snippet__icon" class="bx--icon-chevron--down bx--snippet__icon"
aria-label={expandText} /> aria-label="{expandText}" />
</Button> </Button>
{/if} {/if}
</div> </div>

22
src/ComboBox/ComboBox.Story.svelte
View file

@ -31,10 +31,10 @@
</script> </script>
<p> <p>
<code>items</code> <code>items</code> must be an array of objects; mandatory fields are `id` and `text`.
must be an array of objects; mandatory fields are `id` and `text`.
</p> </p>
<pre style="margin-top: 1rem;"> <pre
style="margin-top: 1rem;">
<code>{'items = Array<{ id: string; text: string; }>'}</code> <code>{'items = Array<{ id: string; text: string; }>'}</code>
</pre> </pre>
<div style="margin-top: 2rem;"> <div style="margin-top: 2rem;">
@ -44,9 +44,9 @@
style="margin-top: 1rem;" /> style="margin-top: 1rem;" />
<Button <Button
size="small" size="small"
on:click={() => { on:click="{() => {
selectedIndex = 1; selectedIndex = 1;
}} }}"
style="margin-top: 1rem;"> style="margin-top: 1rem;">
Set item to "Option 2" Set item to "Option 2"
</Button> </Button>
@ -58,12 +58,12 @@
bind:ref bind:ref
bind:value bind:value
bind:selectedIndex bind:selectedIndex
on:select={({ detail }) => { on:select="{({ detail }) => {
console.log('on:select', detail); console.log('on:select', detail);
}} }}"
on:clear={() => { on:clear="{() => {
console.log('on:clear'); console.log('on:clear');
}} }}"
{items} items="{items}"
{shouldFilterItem} /> shouldFilterItem="{shouldFilterItem}" />
</div> </div>

117
src/ComboBox/ComboBox.svelte
View file

@ -172,63 +172,66 @@
</script> </script>
<svelte:body <svelte:body
on:click={({ target }) => { on:click="{({ target }) => {
if (open && ref && !ref.contains(target)) { if (open && ref && !ref.contains(target)) {
open = false; open = false;
} }
}} /> }}" />
<div class:bx--list-box__wrapper={true} {...$$restProps}> <div class:bx--list-box__wrapper="{true}" {...$$restProps}>
{#if titleText} {#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} {titleText}
</label> </label>
{/if} {/if}
{#if helperText} {#if helperText}
<div <div
class:bx--form__helper-text={true} class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled={disabled}> class:bx--form__helper-text--disabled="{disabled}">
{helperText} {helperText}
</div> </div>
{/if} {/if}
<ListBox <ListBox
class="bx--combo-box" class="bx--combo-box"
id={comboId} id="{comboId}"
aria-label={ariaLabel} aria-label="{ariaLabel}"
{disabled} disabled="{disabled}"
{invalid} invalid="{invalid}"
{invalidText} invalidText="{invalidText}"
{open} open="{open}"
{light} light="{light}"
{size}> size="{size}">
<ListBoxField <ListBoxField
role="button" role="button"
aria-expanded={open} aria-expanded="{open}"
on:click={() => { on:click="{() => {
open = true; open = true;
}} }}"
{id} id="{id}"
{name} name="{name}"
{disabled} disabled="{disabled}"
{translateWithId}> translateWithId="{translateWithId}">
<input <input
bind:this={ref} bind:this="{ref}"
tabindex="0" tabindex="0"
autocomplete="off" autocomplete="off"
aria-autocomplete="list" aria-autocomplete="list"
aria-expanded={open} aria-expanded="{open}"
aria-activedescendant={highlightedId} aria-activedescendant="{highlightedId}"
aria-labelledby={comboId} aria-labelledby="{comboId}"
aria-disabled={disabled} aria-disabled="{disabled}"
aria-controls={open ? menuId : undefined} aria-controls="{open ? menuId : undefined}"
aria-owns={open ? menuId : undefined} aria-owns="{open ? menuId : undefined}"
class:bx--text-input={true} class:bx--text-input="{true}"
class:bx--text-input--empty={inputValue === ''} class:bx--text-input--empty="{inputValue === ''}"
on:input={({ target }) => { on:input="{({ target }) => {
inputValue = target.value; inputValue = target.value;
}} }}"
on:keydown on:keydown
on:keydown|stopPropagation={({ key }) => { on:keydown|stopPropagation="{({ key }) => {
if (key === 'Enter') { if (key === 'Enter') {
open = !open; open = !open;
if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) { if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) {
@ -244,56 +247,56 @@
} else if (key === 'Escape') { } else if (key === 'Escape') {
open = false; open = false;
} }
}} }}"
on:focus on:focus
on:blur on:blur
on:blur={({ relatedTarget }) => { on:blur="{({ relatedTarget }) => {
if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') { if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') {
ref.focus(); ref.focus();
} }
}} }}"
{disabled} disabled="{disabled}"
{placeholder} placeholder="{placeholder}"
{id} id="{id}"
value={inputValue} /> value="{inputValue}" />
{#if invalid} {#if invalid}
<WarningFilled16 class="bx--list-box__invalid-icon" /> <WarningFilled16 class="bx--list-box__invalid-icon" />
{/if} {/if}
{#if inputValue} {#if inputValue}
<ListBoxSelection <ListBoxSelection
on:clear on:clear
on:clear={() => { on:clear="{() => {
selectedIndex = -1; selectedIndex = -1;
open = false; open = false;
ref.focus(); ref.focus();
}} }}"
{translateWithId} translateWithId="{translateWithId}"
{disabled} disabled="{disabled}"
{open} /> open="{open}" />
{/if} {/if}
<ListBoxMenuIcon <ListBoxMenuIcon
on:click={() => { on:click="{() => {
open = !open; open = !open;
}} }}"
{translateWithId} translateWithId="{translateWithId}"
{open} /> open="{open}" />
</ListBoxField> </ListBoxField>
{#if open} {#if open}
<ListBoxMenu aria-label={ariaLabel} {id}> <ListBoxMenu aria-label="{ariaLabel}" id="{id}">
{#each filteredItems as item, i (item.id || i)} {#each filteredItems as item, i (item.id || i)}
<ListBoxMenuItem <ListBoxMenuItem
id={item.id} id="{item.id}"
active={selectedIndex === i || selectedId === item.id} active="{selectedIndex === i || selectedId === item.id}"
highlighted={highlightedIndex === i || selectedIndex === i} highlighted="{highlightedIndex === i || selectedIndex === i}"
on:click={() => { on:click="{() => {
selectedIndex = items selectedIndex = items
.map(({ id }) => id) .map(({ id }) => id)
.indexOf(filteredItems[i].id); .indexOf(filteredItems[i].id);
open = false; open = false;
}} }}"
on:mouseenter={() => { on:mouseenter="{() => {
highlightedIndex = i; highlightedIndex = i;
}}> }}">
{itemToString(item)} {itemToString(item)}
</ListBoxMenuItem> </ListBoxMenuItem>
{/each} {/each}

28
src/ComposedModal/ComposedModal.Story.svelte
View file

@ -16,21 +16,21 @@
{#if story === undefined} {#if story === undefined}
<ComposedModal <ComposedModal
{...$$props.composedModal} {...$$props.composedModal}
on:click={(e) => { on:click="{(e) => {
console.log(e.target); console.log(e.target);
}}> }}">
<ModalHeader {...$$props.modalHeader} /> <ModalHeader {...$$props.modalHeader} />
<ModalBody <ModalBody
{...$$props.modalBody} {...$$props.modalBody}
aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}> aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}">
<div> <div>
<PasswordInput bind:type placeholder="Password Input" aria-level="" /> <PasswordInput bind:type placeholder="Password Input" aria-level="" />
<Button <Button
kind="ghost" kind="ghost"
size="field" size="field"
on:click={() => { on:click="{() => {
type = type === 'password' ? 'text' : 'password'; type = type === 'password' ? 'text' : 'password';
}}> }}">
Programmatically toggle password Programmatically toggle password
</Button> </Button>
</div> </div>
@ -58,7 +58,7 @@
</ModalHeader> </ModalHeader>
<ModalBody <ModalBody
{...$$props.modalBody} {...$$props.modalBody}
aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}> aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}">
<p> <p>
Please see ModalWrapper for more examples and demo of the functionality. Please see ModalWrapper for more examples and demo of the functionality.
</p> </p>
@ -74,7 +74,7 @@
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
<Button kind="secondary">Cancel</Button> <Button kind="secondary">Cancel</Button>
<Button kind={$$props.composedModal.danger ? 'danger' : 'primary'}> <Button kind="{$$props.composedModal.danger ? 'danger' : 'primary'}">
Primary Primary
</Button> </Button>
</ModalFooter> </ModalFooter>
@ -85,8 +85,8 @@
<ComposedModal <ComposedModal
{...$$props.composedModal} {...$$props.composedModal}
open open
on:close={() => {}} on:close="{() => {}}"
on:submit={() => {}}> on:submit="{() => {}}">
<ModalHeader <ModalHeader
{...$$props.modalHeader} {...$$props.modalHeader}
title="Passive modal title as the message. Should be direct and 3 lines or title="Passive modal title as the message. Should be direct and 3 lines or
@ -99,20 +99,20 @@
{#if story === 'trigger'} {#if story === 'trigger'}
<div> <div>
<Button <Button
on:click={() => { on:click="{() => {
open = true; open = true;
}}> }}">
Launch composed modal Launch composed modal
</Button> </Button>
</div> </div>
<ComposedModal <ComposedModal
{...$$props.composedModal} {...$$props.composedModal}
{open} open="{open}"
on:close={() => (open = false)}> on:close="{() => (open = false)}">
<ModalHeader {...$$props.modalHeader} /> <ModalHeader {...$$props.modalHeader} />
<ModalBody <ModalBody
{...$$props.modalBody} {...$$props.modalBody}
aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}> aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}">
<p> <p>
Please see ModalWrapper for more examples and demo of the functionality. Please see ModalWrapper for more examples and demo of the functionality.
</p> </p>

27
src/ComposedModal/ComposedModal.svelte
View file

@ -95,36 +95,35 @@
</script> </script>
<div <div
bind:this={ref} bind:this="{ref}"
role="presentation" role="presentation"
tabindex="-1" tabindex="-1"
class:bx--modal={true} class:bx--modal="{true}"
class:is-visible={open} class:is-visible="{open}"
class:bx--modal--danger={danger} class:bx--modal--danger="{danger}"
{...$$restProps} {...$$restProps}
on:click on:click
on:click={() => { on:click="{() => {
if (!didClickInnerModal) open = false; if (!didClickInnerModal) open = false;
didClickInnerModal = false; didClickInnerModal = false;
}} }}"
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
on:transitionend on:transitionend
on:transitionend={({ currentTarget }) => { on:transitionend="{({ currentTarget }) => {
if (didOpen) { if (didOpen) {
focus(currentTarget); focus(currentTarget);
didOpen = false; didOpen = false;
} }
}}> }}">
<div <div
bind:this={innerModal} bind:this="{innerModal}"
class:bx--modal-container={true} class:bx--modal-container="{true}"
class="{size && `bx--modal-container--${size}`} class="{size && `bx--modal-container--${size}`} {containerClass}"
{containerClass}" on:click="{() => {
on:click={() => {
didClickInnerModal = true; didClickInnerModal = true;
}}> }}">
<slot /> <slot />
</div> </div>
</div> </div>

10
src/ComposedModal/ModalBody.svelte
View file

@ -13,13 +13,13 @@
</script> </script>
<div <div
tabindex={hasScrollingContent ? '0' : undefined} tabindex="{hasScrollingContent ? '0' : undefined}"
role={hasScrollingContent ? 'region' : undefined} role="{hasScrollingContent ? 'region' : undefined}"
class:bx--modal-content={true} class:bx--modal-content="{true}"
class:bx--modal-content--with-form={hasForm} class:bx--modal-content--with-form="{hasForm}"
{...$$restProps}> {...$$restProps}>
<slot /> <slot />
</div> </div>
{#if hasScrollingContent} {#if hasScrollingContent}
<div class:bx--modal-content--overflow-indicator={true} /> <div class:bx--modal-content--overflow-indicator="{true}"></div>
{/if} {/if}

12
src/ComposedModal/ModalFooter.svelte
View file

@ -41,18 +41,18 @@
const { closeModal, submit } = getContext("ComposedModal"); const { closeModal, submit } = getContext("ComposedModal");
</script> </script>
<div class:bx--modal-footer={true} {...$$restProps}> <div class:bx--modal-footer="{true}" {...$$restProps}>
{#if secondaryButtonText} {#if secondaryButtonText}
<Button kind="secondary" class={secondaryClass} on:click={closeModal}> <Button kind="secondary" class="{secondaryClass}" on:click="{closeModal}">
{secondaryButtonText} {secondaryButtonText}
</Button> </Button>
{/if} {/if}
{#if primaryButtonText} {#if primaryButtonText}
<Button <Button
kind={danger ? 'danger' : 'primary'} kind="{danger ? 'danger' : 'primary'}"
disabled={primaryButtonDisabled} disabled="{primaryButtonDisabled}"
class={primaryClass} class="{primaryClass}"
on:click={submit}> on:click="{submit}">
{primaryButtonText} {primaryButtonText}
</Button> </Button>
{/if} {/if}

18
src/ComposedModal/ModalHeader.svelte
View file

@ -47,19 +47,19 @@
const { closeModal } = getContext("ComposedModal"); const { closeModal } = getContext("ComposedModal");
</script> </script>
<div class:bx--modal-header={true} {...$$restProps}> <div class:bx--modal-header="{true}" {...$$restProps}>
{#if label} {#if label}
<p <p
class:bx--modal-header__label={true} class:bx--modal-header__label="{true}"
class:bx--type-delta={true} class:bx--type-delta="{true}"
class:labelClass> class:labelClass>
{label} {label}
</p> </p>
{/if} {/if}
{#if title} {#if title}
<p <p
class:bx--modal-header__heading={true} class:bx--modal-header__heading="{true}"
class:bx--type-beta={true} class:bx--type-beta="{true}"
class:titleClass> class:titleClass>
{title} {title}
</p> </p>
@ -67,12 +67,12 @@
<slot /> <slot />
<button <button
type="button" type="button"
title={iconDescription} title="{iconDescription}"
aria-label={iconDescription} aria-label="{iconDescription}"
class:bx--modal-close={true} class:bx--modal-close="{true}"
class:closeClass class:closeClass
on:click on:click
on:click={closeModal}> on:click="{closeModal}">
<Close20 class="bx--modal-close__icon {closeIconClass}" /> <Close20 class="bx--modal-close__icon {closeIconClass}" />
</button> </button>
</div> </div>

16
src/ContentSwitcher/ContentSwitcher.Story.svelte
View file

@ -16,21 +16,21 @@
{#if story === 'selected'} {#if story === 'selected'}
<ContentSwitcher <ContentSwitcher
{light} light="{light}"
on:change={({ detail }) => { on:change="{({ detail }) => {
console.log('on:change', detail); console.log('on:change', detail);
}}> }}">
<Switch {...$$props} text="First section" /> <Switch {...$$props} text="First section" />
<Switch {...$$props} text="Second section" selected /> <Switch {...$$props} text="Second section" selected />
<Switch {...$$props} text="Third section" /> <Switch {...$$props} text="Third section" />
</ContentSwitcher> </ContentSwitcher>
{:else} {:else}
<ContentSwitcher <ContentSwitcher
{light} light="{light}"
bind:selectedIndex bind:selectedIndex
on:change={({ detail }) => { on:change="{({ detail }) => {
console.log('on:change', detail); console.log('on:change', detail);
}}> }}">
<Switch {...$$props} text="First section" /> <Switch {...$$props} text="First section" />
<Switch {...$$props} text="Second section" /> <Switch {...$$props} text="Second section" />
<Switch {...$$props}> <Switch {...$$props}>
@ -42,9 +42,9 @@
</ContentSwitcher> </ContentSwitcher>
<div <div
style="margin-top: 1.5rem" style="margin-top: 1.5rem"
on:click={() => { on:click="{() => {
selectedIndex = 1; selectedIndex = 1;
}}> }}">
Programmatically set to second index Programmatically set to second index
</div> </div>
{/if} {/if}

4
src/ContentSwitcher/ContentSwitcher.svelte
View file

@ -58,8 +58,8 @@
<div <div
role="tablist" role="tablist"
class:bx--content-switcher={true} class:bx--content-switcher="{true}"
class:bx--content-switcher--light={light} class:bx--content-switcher--light="{light}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover

25
src/ContentSwitcher/Switch.svelte
View file

@ -52,32 +52,31 @@
</script> </script>
<button <button
bind:this={ref} bind:this="{ref}"
role="tab" role="tab"
tabindex={selected ? '0' : '-1'} tabindex="{selected ? '0' : '-1'}"
aria-selected={selected} aria-selected="{selected}"
{disabled} disabled="{disabled}"
{id} id="{id}"
class:bx--content-switcher-btn={true} class:bx--content-switcher-btn="{true}"
class:bx--content-switcher--selected={selected} class:bx--content-switcher--selected="{selected}"
{...$$restProps} {...$$restProps}
on:click on:click
on:click|preventDefault={() => { on:click|preventDefault="{() => {
ctx.update(id); ctx.update(id);
}} }}"
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
on:keydown on:keydown
on:keydown={({ key }) => { on:keydown="{({ key }) => {
if (key === 'ArrowRight') { if (key === 'ArrowRight') {
ctx.change(1); ctx.change(1);
} else if (key === 'ArrowLeft') { } else if (key === 'ArrowLeft') {
ctx.change(-1); ctx.change(-1);
} }
}}> }}">
<span class:bx--content-switcher__label="{true}">
<span class:bx--content-switcher__label={true}>
<slot>{text}</slot> <slot>{text}</slot>
</span> </span>
</button> </button>

23
src/Copy/Copy.svelte
View file

@ -30,36 +30,35 @@
</script> </script>
<button <button
bind:this={ref} bind:this="{ref}"
type="button" type="button"
aria-live="polite" aria-live="polite"
class:bx--copy={true} class:bx--copy="{true}"
class:bx--copy-btn--animating={animation} class:bx--copy-btn--animating="{animation}"
aria-label={animation ? feedback : undefined} aria-label="{animation ? feedback : undefined}"
{...$$restProps} {...$$restProps}
class="{$$restProps.class} class="{$$restProps.class} {animation && `bx--copy-btn--${animation}`}"
{animation && `bx--copy-btn--${animation}`}"
on:click on:click
on:click={() => { on:click="{() => {
if (animation === 'fade-in') return; if (animation === 'fade-in') return;
animation = 'fade-in'; animation = 'fade-in';
timeout = setTimeout(() => { timeout = setTimeout(() => {
animation = 'fade-out'; animation = 'fade-out';
}, feedbackTimeout); }, feedbackTimeout);
}} }}"
on:animationend on:animationend
on:animationend={({ animationName }) => { on:animationend="{({ animationName }) => {
if (animationName === 'hide-feedback') { if (animationName === 'hide-feedback') {
animation = undefined; animation = undefined;
} }
}}> }}">
<slot> <slot>
{#if animation}{feedback || $$restProps['aria-label']}{/if} {#if animation}{feedback || $$restProps['aria-label']}{/if}
</slot> </slot>
<span <span
aria-hidden="true" aria-hidden="true"
class:bx--assistive-text={true} class:bx--assistive-text="{true}"
class:bx--copy-btn__feedback={true}> class:bx--copy-btn__feedback="{true}">
{feedback} {feedback}
</span> </span>
</button> </button>

8
src/CopyButton/CopyButton.Story.svelte
View file

@ -4,9 +4,9 @@
<CopyButton <CopyButton
{...$$props} {...$$props}
on:click={() => { on:click="{() => {
console.log('click'); console.log('click');
}} }}"
on:animationend={(e) => { on:animationend="{(e) => {
console.log('animation end', e.animationName); console.log('animation end', e.animationName);
}} /> }}" />

4
src/CopyButton/CopyButton.svelte
View file

@ -11,8 +11,8 @@
<Copy <Copy
class="bx--copy-btn" class="bx--copy-btn"
aria-label={iconDescription} aria-label="{iconDescription}"
title={iconDescription} title="{iconDescription}"
{...$$restProps} {...$$restProps}
on:click on:click
on:animationend> on:animationend>

62
src/DataTable/DataTable.Story.svelte
View file

@ -78,7 +78,7 @@
</script> </script>
{#if story === 'composed'} {#if story === 'composed'}
<DataTable {...$$props} {rows} {headers} let:props> <DataTable {...$$props} rows="{rows}" headers="{headers}" let:props>
<TableContainer <TableContainer
title="DataTable" title="DataTable"
description="With default options" description="With default options"
@ -108,44 +108,44 @@
{:else if story === 'sortable'} {:else if story === 'sortable'}
<DataTable <DataTable
bind:sortable bind:sortable
title={$$props.title} title="{$$props.title}"
description={$$props.description} description="{$$props.description}"
zebra={$$props.zebra} zebra="{$$props.zebra}"
size={$$props.size} size="{$$props.size}"
stickyHeader={$$props.stickyHeader} stickyHeader="{$$props.stickyHeader}"
on:click={({ detail }) => { on:click="{({ detail }) => {
console.log('on:click', detail); console.log('on:click', detail);
}} }}"
on:click:header={({ detail }) => { on:click:header="{({ detail }) => {
console.log('on:click:header', detail); console.log('on:click:header', detail);
}} }}"
on:click:row={({ detail }) => { on:click:row="{({ detail }) => {
console.log('on:click:row', detail); console.log('on:click:row', detail);
}} }}"
on:click:cell={({ detail }) => { on:click:cell="{({ detail }) => {
console.log('on:click:cell', detail); console.log('on:click:cell', detail);
}} }}"
{rows} rows="{rows}"
{headers} /> headers="{headers}" />
{:else} {:else}
<DataTable <DataTable
title={$$props.title} title="{$$props.title}"
description={$$props.description} description="{$$props.description}"
zebra={$$props.zebra} zebra="{$$props.zebra}"
size={$$props.size} size="{$$props.size}"
stickyHeader={$$props.stickyHeader} stickyHeader="{$$props.stickyHeader}"
on:click={({ detail }) => { on:click="{({ detail }) => {
console.log('on:click', detail); console.log('on:click', detail);
}} }}"
on:click:header={({ detail }) => { on:click:header="{({ detail }) => {
console.log('on:click:header', detail); console.log('on:click:header', detail);
}} }}"
on:click:row={({ detail }) => { on:click:row="{({ detail }) => {
console.log('on:click:row', detail); console.log('on:click:row', detail);
}} }}"
on:click:cell={({ detail }) => { on:click:cell="{({ detail }) => {
console.log('on:click:cell', detail); console.log('on:click:cell', detail);
}} }}"
{rows} rows="{rows}"
{headers} /> headers="{headers}" />
{/if} {/if}

22
src/DataTable/DataTable.svelte
View file

@ -115,14 +115,18 @@
}; };
</script> </script>
<slot {props}> <slot props="{props}">
<TableContainer {title} {description} {...$$restProps}> <TableContainer title="{title}" description="{description}" {...$$restProps}>
<Table {zebra} {size} {stickyHeader} {sortable}> <Table
zebra="{zebra}"
size="{size}"
stickyHeader="{stickyHeader}"
sortable="{sortable}">
<TableHead> <TableHead>
<TableRow> <TableRow>
{#each headers as header, i (header.key)} {#each headers as header, i (header.key)}
<TableHeader <TableHeader
on:click={() => { on:click="{() => {
dispatch('click', { header }); dispatch('click', { header });
let active = header.key === $sortHeader.key; let active = header.key === $sortHeader.key;
let currentSortDirection = active ? $sortHeader.sortDirection : 'none'; let currentSortDirection = active ? $sortHeader.sortDirection : 'none';
@ -133,7 +137,7 @@
key: header.key, key: header.key,
sortDirection, sortDirection,
}); });
}}> }}">
{header.value} {header.value}
</TableHeader> </TableHeader>
{/each} {/each}
@ -142,16 +146,16 @@
<TableBody> <TableBody>
{#each sorting ? sortedRows : rows as row, i (row.id)} {#each sorting ? sortedRows : rows as row, i (row.id)}
<TableRow <TableRow
on:click={() => { on:click="{() => {
dispatch('click', { row }); dispatch('click', { row });
dispatch('click:row', row); dispatch('click:row', row);
}}> }}">
{#each row.cells as cell, j (cell.key)} {#each row.cells as cell, j (cell.key)}
<TableCell <TableCell
on:click={() => { on:click="{() => {
dispatch('click', { row, cell }); dispatch('click', { row, cell });
dispatch('click:cell', cell); dispatch('click:cell', cell);
}}> }}">
{cell.value} {cell.value}
</TableCell> </TableCell>
{/each} {/each}

38
src/DataTable/Table.svelte
View file

@ -37,31 +37,31 @@
</script> </script>
{#if stickyHeader} {#if stickyHeader}
<section class:bx--data-table_inner-container={true} {...$$restProps}> <section class:bx--data-table_inner-container="{true}" {...$$restProps}>
<table <table
class:bx--data-table={true} class:bx--data-table="{true}"
class:bx--data-table--compact={size === 'compact'} class:bx--data-table--compact="{size === 'compact'}"
class:bx--data-table--short={size === 'short'} class:bx--data-table--short="{size === 'short'}"
class:bx--data-table--tall={size === 'tall'} class:bx--data-table--tall="{size === 'tall'}"
class:bx--data-table--sort={sortable} class:bx--data-table--sort="{sortable}"
class:bx--data-table--zebra={zebra} class:bx--data-table--zebra="{zebra}"
class:bx--data-table--static={useStaticWidth} class:bx--data-table--static="{useStaticWidth}"
class:bx--data-table--no-border={!shouldShowBorder} class:bx--data-table--no-border="{!shouldShowBorder}"
class:bx--data-table--sticky-header={stickyHeader}> class:bx--data-table--sticky-header="{stickyHeader}">
<slot /> <slot />
</table> </table>
</section> </section>
{:else} {:else}
<table <table
class:bx--data-table={true} class:bx--data-table="{true}"
class:bx--data-table--compact={size === 'compact'} class:bx--data-table--compact="{size === 'compact'}"
class:bx--data-table--short={size === 'short'} class:bx--data-table--short="{size === 'short'}"
class:bx--data-table--tall={size === 'tall'} class:bx--data-table--tall="{size === 'tall'}"
class:bx--data-table--sort={sortable} class:bx--data-table--sort="{sortable}"
class:bx--data-table--zebra={zebra} class:bx--data-table--zebra="{zebra}"
class:bx--data-table--static={useStaticWidth} class:bx--data-table--static="{useStaticWidth}"
class:bx--data-table--no-border={!shouldShowBorder} class:bx--data-table--no-border="{!shouldShowBorder}"
class:bx--data-table--sticky-header={stickyHeader} class:bx--data-table--sticky-header="{stickyHeader}"
{...$$restProps}> {...$$restProps}>
<slot /> <slot />
</table> </table>

10
src/DataTable/TableContainer.svelte
View file

@ -19,13 +19,13 @@
</script> </script>
<div <div
class:bx--data-table-container={true} class:bx--data-table-container="{true}"
class:bx--data-table--max-width={stickyHeader} class:bx--data-table--max-width="{stickyHeader}"
{...$$restProps}> {...$$restProps}>
{#if title} {#if title}
<div class:bx--data-table-header={true}> <div class:bx--data-table-header="{true}">
<h4 class:bx--data-table-header__title={true}>{title}</h4> <h4 class:bx--data-table-header__title="{true}">{title}</h4>
<p class:bx--data-table-header__description={true}>{description}</p> <p class:bx--data-table-header__description="{true}">{description}</p>
</div> </div>
{/if} {/if}
<slot /> <slot />

24
src/DataTable/TableHeader.svelte
View file

@ -32,37 +32,37 @@
{#if $tableSortable} {#if $tableSortable}
<th <th
aria-sort={active ? $sortHeader.sortDirection : 'none'} aria-sort="{active ? $sortHeader.sortDirection : 'none'}"
{scope} scope="{scope}"
{id} id="{id}"
{...$$restProps} {...$$restProps}
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave>
<button <button
class:bx--table-sort={true} class:bx--table-sort="{true}"
class:bx--table-sort--active={active} class:bx--table-sort--active="{active}"
class:bx--table-sort--ascending={active && $sortHeader.sortDirection === 'descending'} class:bx--table-sort--ascending="{active && $sortHeader.sortDirection === 'descending'}"
on:click> on:click>
<span class:bx--table-header-label={true}> <span class:bx--table-header-label="{true}">
<slot /> <slot />
</span> </span>
<ArrowUp20 aria-label={ariaLabel} class="bx--table-sort__icon" /> <ArrowUp20 aria-label="{ariaLabel}" class="bx--table-sort__icon" />
<ArrowsVertical20 <ArrowsVertical20
aria-label={ariaLabel} aria-label="{ariaLabel}"
class="bx--table-sort__icon-unsorted" /> class="bx--table-sort__icon-unsorted" />
</button> </button>
</th> </th>
{:else} {:else}
<th <th
{scope} scope="{scope}"
{id} id="{id}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave>
<span class:bx--table-header-label={true}> <span class:bx--table-header-label="{true}">
<slot /> <slot />
</span> </span>
</th> </th>

2
src/DataTable/TableRow.svelte
View file

@ -9,7 +9,7 @@
</script> </script>
<tr <tr
class:bx--data-table--selected={isSelected} class:bx--data-table--selected="{isSelected}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover

14
src/DataTableSkeleton/DataTableSkeleton.svelte
View file

@ -37,10 +37,10 @@
</script> </script>
<table <table
class:bx--skeleton={true} class:bx--skeleton="{true}"
class:bx--data-table={true} class:bx--data-table="{true}"
class:bx--data-table--zebra={zebra} class:bx--data-table--zebra="{zebra}"
class:bx--data-table--compact={compact} class:bx--data-table--compact="{compact}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
@ -56,15 +56,13 @@
<tbody> <tbody>
<tr> <tr>
{#each cols as col, i (col)} {#each cols as col, i (col)}
<td> <td><span></span></td>
<span />
</td>
{/each} {/each}
</tr> </tr>
{#each Array.from({ length: rows - 1 }, (_, i) => i) as row, i (row)} {#each Array.from({ length: rows - 1 }, (_, i) => i) as row, i (row)}
<tr> <tr>
{#each cols as col, j (col)} {#each cols as col, j (col)}
<td /> <td></td>
{/each} {/each}
</tr> </tr>
{/each} {/each}

20
src/DatePicker/DatePicker.Skeleton.svelte
View file

@ -13,22 +13,24 @@
</script> </script>
<div <div
class:bx--form-item={true} class:bx--form-item="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave>
<div <div
class:bx--date-picker={true} class:bx--date-picker="{true}"
class:bx--skeleton={true} class:bx--skeleton="{true}"
class:bx--date-picker--range={true} class:bx--date-picker--range="{true}"
class:bx--date-picker--short={!range} class:bx--date-picker--short="{!range}"
class:bx--date-picker--simple={!range}> class:bx--date-picker--simple="{!range}">
{#each Array.from({ length: range ? 2 : 1 }, (_, i) => i) as input, i (input)} {#each Array.from({ length: range ? 2 : 1 }, (_, i) => i) as input, i (input)}
<div class:bx--date-picker-container={true}> <div class:bx--date-picker-container="{true}">
<label for={id} class:bx--label={true} /> <label for="{id}" class:bx--label="{true}"></label>
<div class:bx--date-picker__input={true} class:bx--skeleton={true} /> <div
class:bx--date-picker__input="{true}"
class:bx--skeleton="{true}"></div>
</div> </div>
{/each} {/each}
</div> </div>

20
src/DatePicker/DatePicker.Story.svelte
View file

@ -17,22 +17,22 @@
{...$$props.datePicker} {...$$props.datePicker}
bind:value bind:value
datePickerType="single" datePickerType="single"
on:change={({ detail }) => { on:change="{({ detail }) => {
console.log('change', detail); console.log('change', detail);
}}> }}">
<DatePickerInput <DatePickerInput
{...$$props.datePickerInput} {...$$props.datePickerInput}
on:close={() => { on:close="{() => {
console.log('on:close'); console.log('on:close');
}} }}"
on:input={() => { on:input="{() => {
console.log('on:input'); console.log('on:input');
}} /> }}" />
</DatePicker> </DatePicker>
<button <button
on:click|preventDefault={() => { on:click|preventDefault="{() => {
value = '12/12/2020'; value = '12/12/2020';
}} }}"
style="margin-top: 1rem"> style="margin-top: 1rem">
Set date to 12/12/2020 Set date to 12/12/2020
</button> </button>
@ -53,9 +53,9 @@
{...$$props.datePicker} {...$$props.datePicker}
bind:datePickerType bind:datePickerType
bind:value bind:value
on:change={({ detail }) => { on:change="{({ detail }) => {
console.log('on:change', detail); console.log('on:change', detail);
}}> }}">
<DatePickerInput {...$$props.datePickerInput} /> <DatePickerInput {...$$props.datePickerInput} />
</DatePicker> </DatePicker>
{/if} {/if}

18
src/DatePicker/DatePicker.svelte
View file

@ -173,7 +173,7 @@
</script> </script>
<svelte:body <svelte:body
on:click={({ target }) => { on:click="{({ target }) => {
if (!calendar || !calendar.isOpen) { if (!calendar || !calendar.isOpen) {
return; return;
} }
@ -183,23 +183,23 @@
if (!calendar.calendarContainer.contains(target)) { if (!calendar.calendarContainer.contains(target)) {
calendar.close(); calendar.close();
} }
}} /> }}" />
<div <div
class:bx--form-item={true} class:bx--form-item="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave>
<div <div
bind:this={datePickerRef} bind:this="{datePickerRef}"
{id} id="{id}"
class:bx--date-picker={true} class:bx--date-picker="{true}"
class:bx--date-picker--short={short} class:bx--date-picker--short="{short}"
class:bx--date-picker--light={light} class:bx--date-picker--light="{light}"
class="{datePickerType && `bx--date-picker--${datePickerType}`} class="{datePickerType && `bx--date-picker--${datePickerType}`}
{datePickerType === 'range' && $labelTextEmpty && 'bx--date-picker--nolabel'}"> {datePickerType === 'range' && $labelTextEmpty && 'bx--date-picker--nolabel'}">
<slot /> <slot />
</div> </div>
</div> </div>

60
src/DatePicker/DatePickerInput.svelte
View file

@ -100,58 +100,58 @@
</script> </script>
<div <div
class:bx--date-picker-container={true} class:bx--date-picker-container="{true}"
class:bx--date-picker--nolabel={!labelText} class:bx--date-picker--nolabel="{!labelText}"
{...$$restProps}> {...$$restProps}>
{#if labelText} {#if labelText}
<label <label
for={id} for="{id}"
class:bx--label={true} class:bx--label="{true}"
class:bx--visually-hidden={hideLabel} class:bx--visually-hidden="{hideLabel}"
class:bx--label--disabled={disabled}> class:bx--label--disabled="{disabled}">
{labelText} {labelText}
</label> </label>
{/if} {/if}
<div class:bx--date-picker-input__wrapper={true}> <div class:bx--date-picker-input__wrapper="{true}">
<input <input
bind:this={ref} bind:this="{ref}"
data-invalid={invalid || undefined} data-invalid="{invalid || undefined}"
value={!$range ? $inputValue : undefined} value="{!$range ? $inputValue : undefined}"
{id} id="{id}"
{name} name="{name}"
{placeholder} placeholder="{placeholder}"
{type} type="{type}"
{pattern} pattern="{pattern}"
{disabled} disabled="{disabled}"
class:bx--date-picker__input={true} class:bx--date-picker__input="{true}"
class={size && `bx--date-picker__input--${size}`} class="{size && `bx--date-picker__input--${size}`}"
on:input on:input
on:input={({ target }) => { on:input="{({ target }) => {
updateValue({ type: 'input', value: target.value }); updateValue({ type: 'input', value: target.value });
}} }}"
on:change={({ target }) => { on:change="{({ target }) => {
updateValue({ type: 'change', value: target.value }); updateValue({ type: 'change', value: target.value });
}} }}"
on:keydown on:keydown
on:keydown={({ key }) => { on:keydown="{({ key }) => {
if (key === 'ArrowDown') { if (key === 'ArrowDown') {
focusCalendar(); focusCalendar();
} }
}} }}"
on:blur on:blur
on:blur={({ relatedTarget }) => { on:blur="{({ relatedTarget }) => {
blurInput(relatedTarget); blurInput(relatedTarget);
}} /> }}" />
{#if $hasCalendar} {#if $hasCalendar}
<Calendar16 <Calendar16
role="img" role="img"
class="bx--date-picker__icon" class="bx--date-picker__icon"
aria-label={iconDescription} aria-label="{iconDescription}"
title={iconDescription} title="{iconDescription}"
on:click={openCalendar} /> on:click="{openCalendar}" />
{/if} {/if}
</div> </div>
{#if invalid} {#if invalid}
<div class:bx--form-requirement={true}>{invalidText}</div> <div class:bx--form-requirement="{true}">{invalidText}</div>
{/if} {/if}
</div> </div>

14
src/Dropdown/Dropdown.Skeleton.svelte
View file

@ -7,17 +7,17 @@
</script> </script>
<div <div
class:bx--skeleton={true} class:bx--skeleton="{true}"
class:bx--dropdown-v2={true} class:bx--dropdown-v2="{true}"
class:bx--list-box={true} class:bx--list-box="{true}"
class:bx--form-item={true} class:bx--form-item="{true}"
class:bx--list-box--inline={inline} class:bx--list-box--inline="{inline}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave>
<div role="button" class:bx--list-box__field={true}> <div role="button" class:bx--list-box__field="{true}">
<span class:bx--list-box__label={true} /> <span class:bx--list-box__label="{true}"></span>
</div> </div>
</div> </div>

13
src/Dropdown/Dropdown.Story.svelte
View file

@ -22,22 +22,23 @@
</div> </div>
{:else} {:else}
<p> <p>
<code>items</code> <code>items</code> must be an array of objects; mandatory fields are `id` and
must be an array of objects; mandatory fields are `id` and `text`. `text`.
</p> </p>
<pre style="margin-top: 1rem;"> <pre
style="margin-top: 1rem;">
<code>{'items = Array<{ id: string; text: string; }>'}</code> <code>{'items = Array<{ id: string; text: string; }>'}</code>
</pre> </pre>
<div style="margin-top: 2rem; margin-bottom: 2rem;"> <div style="margin-top: 2rem; margin-bottom: 2rem;">
<Button <Button
size="small" size="small"
on:click={() => { on:click="{() => {
selectedIndex = selectedIndex > -1 ? -1 : 1; selectedIndex = selectedIndex > -1 ? -1 : 1;
}}> }}">
{selectedIndex > -1 ? 'Clear selected item' : 'Set item to "Option 2"'} {selectedIndex > -1 ? 'Clear selected item' : 'Set item to "Option 2"'}
</Button> </Button>
</div> </div>
<div style="width: 300px"> <div style="width: 300px">
<Dropdown {...$$props} bind:selectedIndex {items} /> <Dropdown {...$$props} bind:selectedIndex items="{items}" />
</div> </div>
{/if} {/if}

93
src/Dropdown/Dropdown.svelte
View file

@ -145,60 +145,63 @@
</script> </script>
<svelte:body <svelte:body
on:click={({ target }) => { on:click="{({ target }) => {
if (open && ref && !ref.contains(target)) { if (open && ref && !ref.contains(target)) {
open = false; open = false;
} }
}} /> }}" />
<div <div
class:bx--dropdown__wrapper={true} class:bx--dropdown__wrapper="{true}"
class:bx--list-box__wrapper={true} class:bx--list-box__wrapper="{true}"
class:bx--dropdown__wrapper--inline={inline} class:bx--dropdown__wrapper--inline="{inline}"
class:bx--list-box__wrapper--inline={inline} class:bx--list-box__wrapper--inline="{inline}"
class:bx--dropdown__wrapper--inline--invalid={inline && invalid} class:bx--dropdown__wrapper--inline--invalid="{inline && invalid}"
{...$$restProps}> {...$$restProps}>
{#if titleText} {#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} {titleText}
</label> </label>
{/if} {/if}
{#if !inline && helperText} {#if !inline && helperText}
<div <div
class:bx--form__helper-text={true} class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled={disabled}> class:bx--form__helper-text--disabled="{disabled}">
{helperText} {helperText}
</div> </div>
{/if} {/if}
<ListBox <ListBox
{type} type="{type}"
{size} size="{size}"
{id} id="{id}"
{name} name="{name}"
aria-label={$$props['aria-label']} aria-label="{$$props['aria-label']}"
class="bx--dropdown {invalid && 'bx--dropdown--invalid'} class="bx--dropdown {invalid && 'bx--dropdown--invalid'}
{open && 'bx--dropdown--open'} {open && 'bx--dropdown--open'}
{inline && 'bx--dropdown--inline'} {inline && 'bx--dropdown--inline'}
{disabled && 'bx--dropdown--disabled'} {disabled && 'bx--dropdown--disabled'}
{light && 'bx--dropdown--light'}" {light && 'bx--dropdown--light'}"
on:click={({ target }) => { on:click="{({ target }) => {
open = ref.contains(target) ? !open : false; open = ref.contains(target) ? !open : false;
}} }}"
{disabled} disabled="{disabled}"
{open} open="{open}"
{invalid} invalid="{invalid}"
{invalidText} invalidText="{invalidText}"
{light}> light="{light}">
{#if invalid} {#if invalid}
<WarningFilled16 class="bx--list-box__invalid-icon" /> <WarningFilled16 class="bx--list-box__invalid-icon" />
{/if} {/if}
<button <button
bind:this={ref} bind:this="{ref}"
class:bx--list-box__field={true} class:bx--list-box__field="{true}"
tabindex="0" tabindex="0"
role="button" role="button"
aria-expanded={open} aria-expanded="{open}"
on:keydown={({ key }) => { on:keydown="{({ key }) => {
if (key === 'Enter') { if (key === 'Enter') {
open = !open; open = !open;
if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) { if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) {
@ -213,34 +216,34 @@
} else if (key === 'ArrowUp') { } else if (key === 'ArrowUp') {
change(-1); change(-1);
} }
}} }}"
on:blur={({ relatedTarget }) => { on:blur="{({ relatedTarget }) => {
if (relatedTarget) { if (relatedTarget) {
ref.focus(); ref.focus();
} }
}} }}"
{disabled} disabled="{disabled}"
{translateWithId} translateWithId="{translateWithId}"
{id}> id="{id}">
<span class="bx--list-box__label"> <span class="bx--list-box__label">
{#if selectedItem}{itemToString(selectedItem)}{:else}{label}{/if} {#if selectedItem}{itemToString(selectedItem)}{:else}{label}{/if}
</span> </span>
<ListBoxMenuIcon {open} {translateWithId} /> <ListBoxMenuIcon open="{open}" translateWithId="{translateWithId}" />
</button> </button>
{#if open} {#if open}
<ListBoxMenu aria-labelledby={id} {id}> <ListBoxMenu aria-labelledby="{id}" id="{id}">
{#each items as item, i (item.id || i)} {#each items as item, i (item.id || i)}
<ListBoxMenuItem <ListBoxMenuItem
id={item.id} id="{item.id}"
active={selectedIndex === i || selectedId === item.id} active="{selectedIndex === i || selectedId === item.id}"
highlighted={highlightedIndex === i || selectedIndex === i} highlighted="{highlightedIndex === i || selectedIndex === i}"
on:click={() => { on:click="{() => {
selectedId = item.id; selectedId = item.id;
selectedIndex = i; selectedIndex = i;
}} }}"
on:mouseenter={() => { on:mouseenter="{() => {
highlightedIndex = i; highlightedIndex = i;
}}> }}">
{itemToString(item)} {itemToString(item)}
</ListBoxMenuItem> </ListBoxMenuItem>
{/each} {/each}

2
src/FileUploader/FileUploader.Skeleton.svelte
View file

@ -4,7 +4,7 @@
</script> </script>
<div <div
class:bx--form-item={true} class:bx--form-item="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover

26
src/FileUploader/FileUploader.Story.svelte
View file

@ -19,36 +19,36 @@
{:else if story === 'drop container'} {:else if story === 'drop container'}
<FileUploaderDropContainer <FileUploaderDropContainer
{...$$props} {...$$props}
on:add={({ detail }) => { on:add="{({ detail }) => {
console.log(detail); console.log(detail);
}} /> }}" />
{:else if story === 'item'} {:else if story === 'item'}
<FileUploaderItem <FileUploaderItem
{...$$props} {...$$props}
on:delete={({ detail }) => { on:delete="{({ detail }) => {
console.log(detail); console.log(detail);
}} }}"
on:click={() => { on:click="{() => {
console.log('click'); console.log('click');
}} /> }}" />
{:else if story === 'uploader'} {:else if story === 'uploader'}
<div class="bx--file__container"> <div class="bx--file__container">
<FileUploader <FileUploader
bind:this={fileUploader} bind:this="{fileUploader}"
{...$$props} {...$$props}
bind:files bind:files
on:add={({ detail }) => { on:add="{({ detail }) => {
console.log('add', detail); console.log('add', detail);
}} }}"
on:remove={({ detail }) => { on:remove="{({ detail }) => {
console.log('remove', detail); console.log('remove', detail);
}} /> }}" />
<Button <Button
kind="secondary" kind="secondary"
size="small" size="small"
style="margin-top: 1rem" style="margin-top: 1rem"
{disabled} disabled="{disabled}"
on:click={fileUploader.clearFiles}> on:click="{fileUploader.clearFiles}">
Clear File{files.length === 1 ? '' : 's'} Clear File{files.length === 1 ? '' : 's'}
</Button> </Button>
</div> </div>

40
src/FileUploader/FileUploader.svelte
View file

@ -90,43 +90,43 @@
</script> </script>
<div <div
class:bx--form-item={true} class:bx--form-item="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave>
<strong class:bx--file--label={true}>{labelTitle}</strong> <strong class:bx--file--label="{true}">{labelTitle}</strong>
<p class:bx--label-description={true}>{labelDescription}</p> <p class:bx--label-description="{true}">{labelDescription}</p>
<FileUploaderButton <FileUploaderButton
disableLabelChanges disableLabelChanges
labelText={buttonLabel} labelText="{buttonLabel}"
{accept} accept="{accept}"
{name} name="{name}"
{multiple} multiple="{multiple}"
{kind} kind="{kind}"
on:change on:change
on:change={({ target }) => { on:change="{({ target }) => {
files = [...target.files].map(({ name }) => name); files = [...target.files].map(({ name }) => name);
}} /> }}" />
<div class:bx--file-container={true}> <div class:bx--file-container="{true}">
{#each files as name, i (name)} {#each files as name, i (name)}
<span class:bx--file__selected-file={true}> <span class:bx--file__selected-file="{true}">
<p class:bx--file-filename={true}>{name}</p> <p class:bx--file-filename="{true}">{name}</p>
<span class:bx--file__state-container={true}> <span class:bx--file__state-container="{true}">
<Filename <Filename
{iconDescription} iconDescription="{iconDescription}"
{status} status="{status}"
on:keydown on:keydown
on:keydown={({ key }) => { on:keydown="{({ key }) => {
if (key === ' ' || key === 'Enter') { if (key === ' ' || key === 'Enter') {
files = files.filter((_, index) => index !== i); files = files.filter((_, index) => index !== i);
} }
}} }}"
on:click on:click
on:click={() => { on:click="{() => {
files = files.filter((_, index) => index !== i); files = files.filter((_, index) => index !== i);
}} /> }}" />
</span> </span>
</span> </span>
{/each} {/each}

42
src/FileUploader/FileUploaderButton.svelte
View file

@ -67,41 +67,41 @@
</script> </script>
<label <label
aria-disabled={disabled} aria-disabled="{disabled}"
for={id} for="{id}"
tabindex={disabled ? '-1' : tabindex} tabindex="{disabled ? '-1' : tabindex}"
class:bx--btn={true} class:bx--btn="{true}"
class:bx--btn--sm={true} class:bx--btn--sm="{true}"
class:bx--btn--disabled={disabled} class:bx--btn--disabled="{disabled}"
class={kind && `bx--btn--${kind}`} class="{kind && `bx--btn--${kind}`}"
on:keydown on:keydown
on:keydown={({ key }) => { on:keydown="{({ key }) => {
if (key === ' ' || key === 'Enter') { if (key === ' ' || key === 'Enter') {
ref.click(); ref.click();
} }
}}> }}">
<span {role}>{labelText}</span> <span role="{role}">{labelText}</span>
</label> </label>
<input <input
bind:this={ref} bind:this="{ref}"
type="file" type="file"
tabindex="-1" tabindex="-1"
{accept} accept="{accept}"
{disabled} disabled="{disabled}"
{id} id="{id}"
{multiple} multiple="{multiple}"
{name} name="{name}"
class:bx--visually-hidden={true} class:bx--visually-hidden="{true}"
{...$$restProps} {...$$restProps}
on:change|stopPropagation on:change|stopPropagation
on:change|stopPropagation={({ target }) => { on:change|stopPropagation="{({ target }) => {
const files = target.files; const files = target.files;
const length = files.length; const length = files.length;
if (files && !disableLabelChanges) { if (files && !disableLabelChanges) {
labelText = length > 1 ? `${length} files` : files[0].name; labelText = length > 1 ? `${length} files` : files[0].name;
} }
}} }}"
on:click on:click
on:click={({ target }) => { on:click="{({ target }) => {
target.value = null; target.value = null;
}} /> }}" />

54
src/FileUploader/FileUploaderDropContainer.svelte
View file

@ -72,63 +72,63 @@
</script> </script>
<div <div
class:bx--file={true} class:bx--file="{true}"
{...$$restProps} {...$$restProps}
on:dragover on:dragover
on:dragover|preventDefault|stopPropagation={({ dataTransfer }) => { on:dragover|preventDefault|stopPropagation="{({ dataTransfer }) => {
if (!disabled) { if (!disabled) {
over = true; over = true;
dataTransfer.dropEffect = 'copy'; dataTransfer.dropEffect = 'copy';
} }
}} }}"
on:dragleave on:dragleave
on:dragleave|preventDefault|stopPropagation={({ dataTransfer }) => { on:dragleave|preventDefault|stopPropagation="{({ dataTransfer }) => {
if (!disabled) { if (!disabled) {
over = false; over = false;
dataTransfer.dropEffect = 'move'; dataTransfer.dropEffect = 'move';
} }
}} }}"
on:drop on:drop
on:drop|preventDefault|stopPropagation={({ dataTransfer }) => { on:drop|preventDefault|stopPropagation="{({ dataTransfer }) => {
if (!disabled) { if (!disabled) {
over = false; over = false;
dispatch('add', validateFiles(dataTransfer.files)); dispatch('add', validateFiles(dataTransfer.files));
} }
}}> }}">
<label <label
for={id} for="{id}"
{tabindex} tabindex="{tabindex}"
class:bx--file-browse-btn={true} class:bx--file-browse-btn="{true}"
class:bx--file-browse-btn--disabled={disabled} class:bx--file-browse-btn--disabled="{disabled}"
on:keydown on:keydown
on:keydown={({ key }) => { on:keydown="{({ key }) => {
if (key === ' ' || key === 'Enter') { if (key === ' ' || key === 'Enter') {
ref.click(); ref.click();
} }
}}> }}">
<div <div
{role} role="{role}"
class:bx--file__drop-container={true} class:bx--file__drop-container="{true}"
class:bx--file__drop-container--drag-over={over}> class:bx--file__drop-container--drag-over="{over}">
{labelText} {labelText}
<input <input
bind:this={ref} bind:this="{ref}"
type="file" type="file"
tabindex="-1" tabindex="-1"
{id} id="{id}"
{disabled} disabled="{disabled}"
{accept} accept="{accept}"
{name} name="{name}"
{multiple} multiple="{multiple}"
class:bx--file-input={true} class:bx--file-input="{true}"
on:change on:change
on:change={({ target }) => { on:change="{({ target }) => {
dispatch('add', validateFiles(target.files)); dispatch('add', validateFiles(target.files));
}} }}"
on:click on:click
on:click={({ target }) => { on:click="{({ target }) => {
target.value = null; target.value = null;
}} /> }}" />
</div> </div>
</label> </label>
</div> </div>

30
src/FileUploader/FileUploaderItem.svelte
View file

@ -48,33 +48,33 @@
</script> </script>
<span <span
{id} id="{id}"
class:bx--file__selected-file={true} class:bx--file__selected-file="{true}"
class:bx--file__selected-file--invalid={invalid} class:bx--file__selected-file--invalid="{invalid}"
{...$$restProps} {...$$restProps}
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave>
<p class:bx--file-filename={true}>{name}</p> <p class:bx--file-filename="{true}">{name}</p>
<span class:bx--file__state-container={true}> <span class:bx--file__state-container="{true}">
<Filename <Filename
on:keydown={({ key }) => { on:keydown="{({ key }) => {
if (key === ' ' || key === 'Enter') { if (key === ' ' || key === 'Enter') {
dispatch('delete', id); dispatch('delete', id);
} }
}} }}"
on:click={() => { on:click="{() => {
dispatch('delete', id); dispatch('delete', id);
}} }}"
{iconDescription} iconDescription="{iconDescription}"
{status} status="{status}"
{invalid} /> invalid="{invalid}" />
</span> </span>
{#if invalid && errorSubject} {#if invalid && errorSubject}
<div class:bx--form-requirement={true}> <div class:bx--form-requirement="{true}">
<div class:bx--form-requirement__title={true}>{errorSubject}</div> <div class:bx--form-requirement__title="{true}">{errorSubject}</div>
{#if errorBody} {#if errorBody}
<p class:bx--form-requirement__supplement={true}>{errorBody}</p> <p class:bx--form-requirement__supplement="{true}">{errorBody}</p>
{/if} {/if}
</div> </div>
{/if} {/if}

12
src/FileUploader/Filename.svelte
View file

@ -25,10 +25,10 @@
{#if status === 'uploading'} {#if status === 'uploading'}
<Loading <Loading
description={iconDescription} description="{iconDescription}"
{...$$restProps} {...$$restProps}
small small
withOverlay={false} /> withOverlay="{false}" />
{/if} {/if}
{#if status === 'edit'} {#if status === 'edit'}
@ -36,8 +36,8 @@
<WarningFilled16 class="bx--file-invalid" /> <WarningFilled16 class="bx--file-invalid" />
{/if} {/if}
<Close16 <Close16
aria-label={iconDescription} aria-label="{iconDescription}"
title={iconDescription} title="{iconDescription}"
class="bx--file-close" class="bx--file-close"
{...$$restProps} {...$$restProps}
on:click on:click
@ -46,8 +46,8 @@
{#if status === 'complete'} {#if status === 'complete'}
<CheckmarkFilled16 <CheckmarkFilled16
aria-label={iconDescription} aria-label="{iconDescription}"
title={iconDescription} title="{iconDescription}"
class="bx--file-complete" class="bx--file-complete"
{...$$restProps} /> {...$$restProps} />
{/if} {/if}

16
src/Form/Form.Story.svelte
View file

@ -15,9 +15,9 @@
</script> </script>
<Form <Form
on:submit={(event) => { on:submit="{(event) => {
console.log('on:submit', event); console.log('on:submit', event);
}}> }}">
<FormGroup {...$$props}> <FormGroup {...$$props}>
<Checkbox id="checkbox-0" labelText="Checkbox Label" checked /> <Checkbox id="checkbox-0" labelText="Checkbox Label" checked />
<Checkbox id="checkbox-1" labelText="Checkbox Label" /> <Checkbox id="checkbox-1" labelText="Checkbox Label" />
@ -26,10 +26,10 @@
<NumberInput <NumberInput
id="number-input-1" id="number-input-1"
label="Number Input" label="Number Input"
min={0} min="{0}"
max={100} max="{100}"
value={50} value="{50}"
step={10} /> step="{10}" />
<FormGroup legendText="Toggle heading"> <FormGroup legendText="Toggle heading">
<Toggle id="toggle-1" /> <Toggle id="toggle-1" />
<Toggle id="toggle-2" disabled /> <Toggle id="toggle-2" disabled />
@ -93,7 +93,7 @@
id="text-area" id="text-area"
labelText="Text Area label" labelText="Text Area label"
placeholder="Placeholder text" placeholder="Placeholder text"
rows={4} rows="{4}"
cols={50} /> cols="{50}" />
<Button type="submit">Submit</Button> <Button type="submit">Submit</Button>
</Form> </Form>

2
src/Form/Form.svelte
View file

@ -1,5 +1,5 @@
<form <form
class:bx--form={true} class:bx--form="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover

8
src/FormGroup/FormGroup.svelte
View file

@ -25,16 +25,16 @@
</script> </script>
<fieldset <fieldset
data-invalid={invalid || undefined} data-invalid="{invalid || undefined}"
class:bx--fieldset={true} class:bx--fieldset="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave>
<legend class:bx--label={true}>{legendText}</legend> <legend class:bx--label="{true}">{legendText}</legend>
<slot /> <slot />
{#if message} {#if message}
<div class:bx--form__requirement={true}>{messageText}</div> <div class:bx--form__requirement="{true}">{messageText}</div>
{/if} {/if}
</fieldset> </fieldset>

2
src/FormItem/FormItem.svelte
View file

@ -1,5 +1,5 @@
<div <div
class:bx--form-item={true} class:bx--form-item="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover

4
src/FormLabel/FormLabel.svelte
View file

@ -7,8 +7,8 @@
</script> </script>
<label <label
class:bx--label={true} class:bx--label="{true}"
for={id} for="{id}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover

2
src/Grid/Column.svelte
View file

@ -116,7 +116,7 @@
</script> </script>
{#if as} {#if as}
<slot {props} /> <slot props="{props}" />
{:else} {:else}
<div {...props}> <div {...props}>
<slot /> <slot />

16
src/Grid/Grid.Story.svelte
View file

@ -76,22 +76,22 @@
<h6>Responsive Grid</h6> <h6>Responsive Grid</h6>
<Grid> <Grid>
<Row> <Row>
<Column sm={1} md={4} lg={8}> <Column sm="{1}" md="{4}" lg="{8}">
<div class="outside"> <div class="outside">
<div class="inside">sm: 1/4, md: 1/2, lg: 2/3</div> <div class="inside">sm: 1/4, md: 1/2, lg: 2/3</div>
</div> </div>
</Column> </Column>
<Column sm={1} md={2} lg={2}> <Column sm="{1}" md="{2}" lg="{2}">
<div class="outside"> <div class="outside">
<div class="inside">sm: 1/4, md: 1/4, lg: 1/6</div> <div class="inside">sm: 1/4, md: 1/4, lg: 1/6</div>
</div> </div>
</Column> </Column>
<Column sm={1} md={1} lg={1}> <Column sm="{1}" md="{1}" lg="{1}">
<div class="outside"> <div class="outside">
<div class="inside">sm: 1/4, md: 1/8, lg: 1/12</div> <div class="inside">sm: 1/4, md: 1/8, lg: 1/12</div>
</div> </div>
</Column> </Column>
<Column sm={1} md={1} lg={1}> <Column sm="{1}" md="{1}" lg="{1}">
<div class="outside"> <div class="outside">
<div class="inside">sm: 1/4, md: 1/8, lg: 1/12</div> <div class="inside">sm: 1/4, md: 1/8, lg: 1/12</div>
</div> </div>
@ -102,22 +102,22 @@
<h6>Columns with Offset</h6> <h6>Columns with Offset</h6>
<Grid> <Grid>
<Row> <Row>
<Column sm={{ span: 1, offset: 3 }}> <Column sm="{{ span: 1, offset: 3 }}">
<div class="outside"> <div class="outside">
<div class="inside">Small Screen Offset 3</div> <div class="inside">Small Screen Offset 3</div>
</div> </div>
</Column> </Column>
<Column sm={{ span: 2, offset: 2 }}> <Column sm="{{ span: 2, offset: 2 }}">
<div class="outside"> <div class="outside">
<div class="inside">Small Screen Offset 2</div> <div class="inside">Small Screen Offset 2</div>
</div> </div>
</Column> </Column>
<Column sm={{ span: 3, offset: 1 }}> <Column sm="{{ span: 3, offset: 1 }}">
<div class="outside"> <div class="outside">
<div class="inside">Small Screen Offset 1</div> <div class="inside">Small Screen Offset 1</div>
</div> </div>
</Column> </Column>
<Column sm={{ span: 4, offset: 0 }}> <Column sm="{{ span: 4, offset: 0 }}">
<div class="outside"> <div class="outside">
<div class="inside">Small Screen Offset 0</div> <div class="inside">Small Screen Offset 0</div>
</div> </div>

2
src/Grid/Grid.svelte
View file

@ -60,7 +60,7 @@
</script> </script>
{#if as} {#if as}
<slot {props} /> <slot props="{props}" />
{:else} {:else}
<div {...props}> <div {...props}>
<slot /> <slot />

2
src/Grid/Row.svelte
View file

@ -53,7 +53,7 @@
</script> </script>
{#if as} {#if as}
<slot {props} /> <slot props="{props}" />
{:else} {:else}
<div {...props}> <div {...props}>
<slot /> <slot />

4
src/Icon/Icon.Skeleton.svelte
View file

@ -7,10 +7,10 @@
</script> </script>
<div <div
class:bx--icon--skeleton={true} class:bx--icon--skeleton="{true}"
{...$$restProps} {...$$restProps}
style="{$$restProps.style}; width: {size}px; height: {size}px" style="{$$restProps.style}; width: {size}px; height: {size}px"
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave /> on:mouseleave></div>

6
src/Icon/Icon.Story.svelte
View file

@ -13,9 +13,9 @@
{#if story === 'skeleton'} {#if story === 'skeleton'}
<div> <div>
<IconSkeleton size={16} style="margin: 2rem;" /> <IconSkeleton size="{16}" style="margin: 2rem;" />
<IconSkeleton size={32} style="margin: 2rem" /> <IconSkeleton size="{32}" style="margin: 2rem" />
</div> </div>
{:else} {:else}
<Icon {...$$props} render={icons[$$props.icon]} /> <Icon {...$$props} render="{icons[$$props.icon]}" />
{/if} {/if}

4
src/Icon/Icon.svelte
View file

@ -20,7 +20,7 @@
{#if skeleton} {#if skeleton}
<IconSkeleton <IconSkeleton
{size} size="{size}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
@ -28,7 +28,7 @@
on:mouseleave /> on:mouseleave />
{:else} {:else}
<svelte:component <svelte:component
this={render} this="{render}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover

10
src/InlineLoading/InlineLoading.Story.svelte
View file

@ -37,15 +37,15 @@
{#if story === 'ux-example'} {#if story === 'ux-example'}
<div style="display: flex; width: 300px"> <div style="display: flex; width: 300px">
<Button kind="secondary" {disabled}>Cancel</Button> <Button kind="secondary" disabled="{disabled}">Cancel</Button>
{#if disabled} {#if disabled}
<InlineLoading <InlineLoading
style="margin-left: 1rem;" style="margin-left: 1rem;"
description={loadingDescription} description="{loadingDescription}"
status={success ? 'finished' : 'active'} status="{success ? 'finished' : 'active'}"
aria-live={ariaLive} /> aria-live="{ariaLive}" />
{:else} {:else}
<Button on:click={handleSubmit}>Submit</Button> <Button on:click="{handleSubmit}">Submit</Button>
{/if} {/if}
</div> </div>
{:else} {:else}

10
src/InlineLoading/InlineLoading.svelte
View file

@ -54,7 +54,7 @@
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave>
<div class:bx--inline-loading__animation={true}> <div class:bx--inline-loading__animation="{true}">
{#if status === 'error'} {#if status === 'error'}
<Error20 class="bx--inline-loading--error" /> <Error20 class="bx--inline-loading--error" />
{:else if status === 'finished'} {:else if status === 'finished'}
@ -62,12 +62,12 @@
{:else if status === 'inactive' || status === 'active'} {:else if status === 'inactive' || status === 'active'}
<Loading <Loading
small small
description={iconDescription} description="{iconDescription}"
withOverlay={false} withOverlay="{false}"
active={status === 'active'} /> active="{status === 'active'}" />
{/if} {/if}
</div> </div>
{#if description} {#if description}
<div class:bx--inline-loading__text={true}>{description}</div> <div class:bx--inline-loading__text="{true}">{description}</div>
{/if} {/if}
</div> </div>

17
src/Link/Link.svelte
View file

@ -20,10 +20,10 @@
{#if disabled} {#if disabled}
<p <p
bind:this={ref} bind:this="{ref}"
class:bx--link={true} class:bx--link="{true}"
class:bx--link--disabled={disabled} class:bx--link--disabled="{disabled}"
class:bx--link--inline={inline} class:bx--link--inline="{inline}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
@ -34,10 +34,11 @@
{:else} {:else}
<!-- svelte-ignore a11y-missing-attribute --> <!-- svelte-ignore a11y-missing-attribute -->
<a <a
bind:this={ref} bind:this="{ref}"
class:bx--link={true} class:bx--link="{true}"
class:bx--link--disabled={disabled} class:bx--link--disabled="{disabled}"
class:bx--link--inline={inline} class:bx--link--inline="{inline}"
rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover

21
src/ListBox/ListBox.svelte
View file

@ -45,24 +45,23 @@
<div <div
role="listbox" role="listbox"
tabindex="-1" tabindex="-1"
data-invalid={invalid || undefined} data-invalid="{invalid || undefined}"
class:bx--list-box={true} class:bx--list-box="{true}"
class:bx--list-box--inline={type === 'inline'} class:bx--list-box--inline="{type === 'inline'}"
class:bx--list-box--disabled={disabled} class:bx--list-box--disabled="{disabled}"
class:bx--list-box--expanded={open} class:bx--list-box--expanded="{open}"
class:bx--list-box--light={light} class:bx--list-box--light="{light}"
{...$$restProps} {...$$restProps}
class="{size && `bx--list-box--${size}`} class="{size && `bx--list-box--${size}`} {$$restProps.class}"
{$$restProps.class}"
on:keydown on:keydown
on:keydown={(e) => { on:keydown="{(e) => {
if (e.key === 'Escape') { if (e.key === 'Escape') {
e.stopPropagation(); e.stopPropagation();
} }
}} }}"
on:click|preventDefault|stopPropagation> on:click|preventDefault|stopPropagation>
<slot /> <slot />
</div> </div>
{#if invalid} {#if invalid}
<div class:bx--form-requirement={true}>{invalidText}</div> <div class:bx--form-requirement="{true}">{invalidText}</div>
{/if} {/if}

18
src/ListBox/ListBoxField.svelte
View file

@ -63,15 +63,15 @@
</script> </script>
<div <div
bind:this={ref} bind:this="{ref}"
role={ariaExpanded ? 'combobox' : role} role="{ariaExpanded ? 'combobox' : role}"
aria-expanded={ariaExpanded} aria-expanded="{ariaExpanded}"
aria-owns={(ariaExpanded && menuId) || undefined} aria-owns="{(ariaExpanded && menuId) || undefined}"
aria-controls={(ariaExpanded && menuId) || undefined} aria-controls="{(ariaExpanded && menuId) || undefined}"
aria-disabled={disabled} aria-disabled="{disabled}"
aria-label={ariaExpanded ? translateWithId('close') : translateWithId('open')} aria-label="{ariaExpanded ? translateWithId('close') : translateWithId('open')}"
tabindex={disabled ? '-1' : tabindex} tabindex="{disabled ? '-1' : tabindex}"
class:bx--list-box__field={true} class:bx--list-box__field="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover

2
src/ListBox/ListBoxMenu.svelte
View file

@ -9,7 +9,7 @@
<div <div
role="listbox" role="listbox"
id="menu-{id}" id="menu-{id}"
class:bx--list-box__menu={true} class:bx--list-box__menu="{true}"
{...$$restProps}> {...$$restProps}>
<slot /> <slot />
</div> </div>

6
src/ListBox/ListBoxMenuIcon.svelte
View file

@ -33,9 +33,9 @@
</script> </script>
<div <div
class:bx--list-box__menu-icon={true} class:bx--list-box__menu-icon="{true}"
class:bx--list-box__menu-icon--open={open} class:bx--list-box__menu-icon--open="{open}"
{...$$restProps} {...$$restProps}
on:click|preventDefault|stopPropagation> on:click|preventDefault|stopPropagation>
<ChevronDown16 aria-label={description} title={description} /> <ChevronDown16 aria-label="{description}" title="{description}" />
</div> </div>

8
src/ListBox/ListBoxMenuItem.svelte
View file

@ -13,14 +13,14 @@
</script> </script>
<div <div
class:bx--list-box__menu-item={true} class:bx--list-box__menu-item="{true}"
class:bx--list-box__menu-item--active={active} class:bx--list-box__menu-item--active="{active}"
class:bx--list-box__menu-item--highlighted={highlighted} class:bx--list-box__menu-item--highlighted="{highlighted}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave>
<div class:bx--list-box__menu-item__option={true}> <div class:bx--list-box__menu-item__option="{true}">
<slot /> <slot />
</div> </div>
</div> </div>

20
src/ListBox/ListBoxSelection.svelte
View file

@ -57,25 +57,25 @@
</script> </script>
<div <div
bind:this={ref} bind:this="{ref}"
role="button" role="button"
aria-label="Clear Selection" aria-label="Clear Selection"
tabindex={disabled ? '-1' : '0'} tabindex="{disabled ? '-1' : '0'}"
title={description} title="{description}"
class:bx--list-box__selection={true} class:bx--list-box__selection="{true}"
class:bx--tag--filter={selectionCount} class:bx--tag--filter="{selectionCount}"
class:bx--list-box__selection--multi={selectionCount} class:bx--list-box__selection--multi="{selectionCount}"
{...$$restProps} {...$$restProps}
on:click|preventDefault|stopPropagation={(e) => { on:click|preventDefault|stopPropagation="{(e) => {
if (!disabled) { if (!disabled) {
dispatch('clear', e); dispatch('clear', e);
} }
}} }}"
on:keydown|stopPropagation={(e) => { on:keydown|stopPropagation="{(e) => {
if (!disabled && e.key === 'Enter') { if (!disabled && e.key === 'Enter') {
dispatch('clear', e); dispatch('clear', e);
} }
}}> }}">
{#if selectionCount}{selectionCount}{/if} {#if selectionCount}{selectionCount}{/if}
<Close16 /> <Close16 />
</div> </div>

2
src/ListItem/ListItem.svelte
View file

@ -1,5 +1,5 @@
<li <li
class:bx--list__item={true} class:bx--list__item="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover

48
src/Loading/Loading.svelte
View file

@ -34,60 +34,60 @@
{#if withOverlay} {#if withOverlay}
<div <div
class:bx--loading-overlay={true} class:bx--loading-overlay="{true}"
class:bx--loading-overlay--stop={!active} class:bx--loading-overlay--stop="{!active}"
{...$$restProps}> {...$$restProps}>
<div <div
aria-atomic="true" aria-atomic="true"
aria-labelledby={id} aria-labelledby="{id}"
aria-live={active ? 'assertive' : 'off'} aria-live="{active ? 'assertive' : 'off'}"
class:bx--loading={true} class:bx--loading="{true}"
class:bx--loading--small={small} class:bx--loading--small="{small}"
class:bx--loading--stop={!active}> class:bx--loading--stop="{!active}">
<!-- svelte-ignore a11y-label-has-associated-control --> <!-- svelte-ignore a11y-label-has-associated-control -->
<label class:bx--visually-hidden={true} {id}>{description}</label> <label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
<svg class:bx--loading__svg={true} viewBox="-75 -75 150 150"> <svg class:bx--loading__svg="{true}" viewBox="-75 -75 150 150">
<title>{description}</title> <title>{description}</title>
{#if small} {#if small}
<circle <circle
class:bx--loading__background={true} class:bx--loading__background="{true}"
cx="0" cx="0"
cy="0" cy="0"
r={spinnerRadius} /> r="{spinnerRadius}"></circle>
{/if} {/if}
<circle <circle
class:bx--loading__stroke={true} class:bx--loading__stroke="{true}"
cx="0" cx="0"
cy="0" cy="0"
r={spinnerRadius} /> r="{spinnerRadius}"></circle>
</svg> </svg>
</div> </div>
</div> </div>
{:else} {:else}
<div <div
aria-atomic="true" aria-atomic="true"
aria-labelledby={id} aria-labelledby="{id}"
aria-live={active ? 'assertive' : 'off'} aria-live="{active ? 'assertive' : 'off'}"
class:bx--loading={true} class:bx--loading="{true}"
class:bx--loading--small={small} class:bx--loading--small="{small}"
class:bx--loading--stop={!active} class:bx--loading--stop="{!active}"
{...$$restProps}> {...$$restProps}>
<!-- svelte-ignore a11y-label-has-associated-control --> <!-- svelte-ignore a11y-label-has-associated-control -->
<label class:bx--visually-hidden={true} {id}>{description}</label> <label class:bx--visually-hidden="{true}" id="{id}">{description}</label>
<svg class:bx--loading__svg={true} viewBox="-75 -75 150 150"> <svg class:bx--loading__svg="{true}" viewBox="-75 -75 150 150">
<title>{description}</title> <title>{description}</title>
{#if small} {#if small}
<circle <circle
class:bx--loading__background={true} class:bx--loading__background="{true}"
cx="0" cx="0"
cy="0" cy="0"
r={spinnerRadius} /> r="{spinnerRadius}"></circle>
{/if} {/if}
<circle <circle
class:bx--loading__stroke={true} class:bx--loading__stroke="{true}"
cx="0" cx="0"
cy="0" cy="0"
r={spinnerRadius} /> r="{spinnerRadius}"></circle>
</svg> </svg>
</div> </div>
{/if} {/if}

28
src/Modal/Modal.Story.svelte
View file

@ -9,39 +9,39 @@
<div> <div>
<Button <Button
on:click={() => { on:click="{() => {
open = true; open = true;
}}> }}">
Launch modal Launch modal
</Button> </Button>
</div> </div>
<Modal <Modal
{...$$props} {...$$props}
bind:open bind:open
on:click={(e) => { on:click="{(e) => {
console.log(e.target); console.log(e.target);
}} }}"
on:click:button--secondary={() => { on:click:button--secondary="{() => {
console.log('click button secondary'); console.log('click button secondary');
open = false; open = false;
}} }}"
on:open={() => { on:open="{() => {
console.log('open'); console.log('open');
}} }}"
on:close={() => { on:close="{() => {
console.log('close'); console.log('close');
}} }}"
on:submit={() => { on:submit="{() => {
console.log('submit'); console.log('submit');
}}> }}">
<div> <div>
<PasswordInput bind:type placeholder="Password Input" aria-level="" /> <PasswordInput bind:type placeholder="Password Input" aria-level="" />
<Button <Button
kind="ghost" kind="ghost"
size="field" size="field"
on:click={() => { on:click="{() => {
type = type === 'password' ? 'text' : 'password'; type = type === 'password' ? 'text' : 'password';
}}> }}">
Programmatically toggle password Programmatically toggle password
</Button> </Button>
</div> </div>

98
src/Modal/Modal.svelte
View file

@ -146,17 +146,17 @@
</script> </script>
<div <div
bind:this={ref} bind:this="{ref}"
role="presentation" role="presentation"
tabindex="-1" tabindex="-1"
{id} id="{id}"
class:bx--modal={true} class:bx--modal="{true}"
class:bx--modal-tall={!passiveModal} class:bx--modal-tall="{!passiveModal}"
class:is-visible={open} class:is-visible="{open}"
class:bx--modal--danger={danger} class:bx--modal--danger="{danger}"
{...$$restProps} {...$$restProps}
on:keydown on:keydown
on:keydown={({ key }) => { on:keydown="{({ key }) => {
if (open) { if (open) {
if (key === 'Escape') { if (key === 'Escape') {
open = false; open = false;
@ -164,89 +164,93 @@
dispatch('submit'); dispatch('submit');
} }
} }
}} }}"
on:click on:click
on:click={() => { on:click="{() => {
if (!didClickInnerModal) open = false; if (!didClickInnerModal) open = false;
didClickInnerModal = false; didClickInnerModal = false;
}} }}"
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave>
<div <div
bind:this={innerModal} bind:this="{innerModal}"
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
aria-label={ariaLabel} aria-label="{ariaLabel}"
class:bx--modal-container={true} class:bx--modal-container="{true}"
class={size && `bx--modal-container--${size}`} class="{size && `bx--modal-container--${size}`}"
on:click={() => { on:click="{() => {
didClickInnerModal = true; didClickInnerModal = true;
}}> }}">
<div class:bx--modal-header={true}> <div class:bx--modal-header="{true}">
{#if passiveModal} {#if passiveModal}
<button <button
bind:this={buttonRef} bind:this="{buttonRef}"
type="button" type="button"
aria-label={iconDescription} aria-label="{iconDescription}"
title={iconDescription} title="{iconDescription}"
class="bx--modal-close" class="bx--modal-close"
on:click={() => { on:click="{() => {
open = false; open = false;
}}> }}">
<Close20 aria-label={iconDescription} class="bx--modal-close__icon" /> <Close20
aria-label="{iconDescription}"
class="bx--modal-close__icon" />
</button> </button>
{/if} {/if}
{#if modalLabel} {#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> <slot name="label">{modalLabel}</slot>
</h2> </h2>
{/if} {/if}
<h3 id={modalHeadingId} class:bx--modal-header__heading={true}> <h3 id="{modalHeadingId}" class:bx--modal-header__heading="{true}">
<slot name="heading">{modalHeading}</slot> <slot name="heading">{modalHeading}</slot>
</h3> </h3>
{#if !passiveModal} {#if !passiveModal}
<button <button
bind:this={buttonRef} bind:this="{buttonRef}"
type="button" type="button"
aria-label={iconDescription} aria-label="{iconDescription}"
title={iconDescription} title="{iconDescription}"
class:bx--modal-close={true} class:bx--modal-close="{true}"
on:click={() => { on:click="{() => {
open = false; open = false;
}}> }}">
<Close20 aria-label={iconDescription} class="bx--modal-close__icon" /> <Close20
aria-label="{iconDescription}"
class="bx--modal-close__icon" />
</button> </button>
{/if} {/if}
</div> </div>
<div <div
class:bx--modal-content={true} class:bx--modal-content="{true}"
class:bx--modal-content--with-form={hasForm} class:bx--modal-content--with-form="{hasForm}"
class:bx--modal-scroll-content={hasScrollingContent} class:bx--modal-scroll-content="{hasScrollingContent}"
tabindex={hasScrollingContent ? '0' : undefined} tabindex="{hasScrollingContent ? '0' : undefined}"
role={hasScrollingContent ? 'region' : undefined} role="{hasScrollingContent ? 'region' : undefined}"
aria-label={hasScrollingContent ? ariaLabel : undefined} aria-label="{hasScrollingContent ? ariaLabel : undefined}"
aria-labelledby={modalLabel ? modalLabelId : modalHeadingId}> aria-labelledby="{modalLabel ? modalLabelId : modalHeadingId}">
<slot /> <slot />
</div> </div>
{#if hasScrollingContent} {#if hasScrollingContent}
<div class:bx--modal-content--overflow-indicator={true} /> <div class:bx--modal-content--overflow-indicator="{true}"></div>
{/if} {/if}
{#if !passiveModal} {#if !passiveModal}
<div class:bx--modal-footer={true}> <div class:bx--modal-footer="{true}">
<Button <Button
kind="secondary" kind="secondary"
on:click={() => { on:click="{() => {
dispatch('click:button--secondary'); dispatch('click:button--secondary');
}}> }}">
{secondaryButtonText} {secondaryButtonText}
</Button> </Button>
<Button <Button
kind={danger ? 'danger' : 'primary'} kind="{danger ? 'danger' : 'primary'}"
disabled={primaryButtonDisabled} disabled="{primaryButtonDisabled}"
on:click={() => { on:click="{() => {
dispatch('submit'); dispatch('submit');
}}> }}">
{primaryButtonText} {primaryButtonText}
</Button> </Button>
</div> </div>

4
src/MultiSelect/MultiSelect.Story.svelte
View file

@ -20,9 +20,9 @@
<div> <div>
<Button <Button
size="small" size="small"
on:click={() => { on:click="{() => {
selectedIds = selectedIds.length > 0 ? [] : [items[1].id, items[2].id]; selectedIds = selectedIds.length > 0 ? [] : [items[1].id, items[2].id];
}}> }}">
{selectedIds.length > 0 ? 'Clear' : 'Set initial'} selected items {selectedIds.length > 0 ? 'Clear' : 'Set initial'} selected items
</Button> </Button>
</div> </div>

162
src/MultiSelect/MultiSelect.svelte
View file

@ -246,62 +246,65 @@
</script> </script>
<svelte:body <svelte:body
on:click={({ target }) => { on:click="{({ target }) => {
if (open && multiSelectRef && !multiSelectRef.contains(target)) { if (open && multiSelectRef && !multiSelectRef.contains(target)) {
open = false; open = false;
} }
}} /> }}" />
<div <div
bind:this={multiSelectRef} bind:this="{multiSelectRef}"
class:bx--multi-select__wrapper={true} class:bx--multi-select__wrapper="{true}"
class:bx--list-box__wrapper={true} class:bx--list-box__wrapper="{true}"
class:bx--multi-select__wrapper--inline={inline} class:bx--multi-select__wrapper--inline="{inline}"
class:bx--list-box__wrapper--inline={inline} class:bx--list-box__wrapper--inline="{inline}"
class:bx--multi-select__wrapper--inline--invalid={inline && invalid} class:bx--multi-select__wrapper--inline--invalid="{inline && invalid}"
{...$$restProps}> {...$$restProps}>
{#if titleText} {#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} {titleText}
</label> </label>
{/if} {/if}
{#if !inline && helperText} {#if !inline && helperText}
<div <div
class:bx--form__helper-text={true} class:bx--form__helper-text="{true}"
class:bx--form__helper-text--disabled={disabled}> class:bx--form__helper-text--disabled="{disabled}">
{helperText} {helperText}
</div> </div>
{/if} {/if}
<ListBox <ListBox
aria-label={ariaLabel} aria-label="{ariaLabel}"
{id} id="{id}"
{disabled} disabled="{disabled}"
{invalid} invalid="{invalid}"
{invalidText} invalidText="{invalidText}"
{open} open="{open}"
{light} light="{light}"
{size} size="{size}"
class="bx--multi-select {filterable && 'bx--combo-box'} class="bx--multi-select {filterable && 'bx--combo-box'}
{filterable && 'bx--multi-select--filterable'} {filterable && 'bx--multi-select--filterable'}
{invalid && 'bx--multi-select--invalid'} {invalid && 'bx--multi-select--invalid'}
{inline && 'bx--multi-select--inline'} {inline && 'bx--multi-select--inline'}
{checked.length > 0 && 'bx--multi-select--selected'}"> {checked.length > 0 && 'bx--multi-select--selected'}">
{#if invalid} {#if invalid}
<WarningFilled16 class="bx--list-box__invalid-icon" /> <WarningFilled16 class="bx--list-box__invalid-icon" />
{/if} {/if}
<ListBoxField <ListBoxField
role="button" role="button"
tabindex="0" tabindex="0"
aria-expanded={open} aria-expanded="{open}"
on:click={() => { on:click="{() => {
if (filterable) { if (filterable) {
open = true; open = true;
inputRef.focus(); inputRef.focus();
} else { } else {
open = !open; open = !open;
} }
}} }}"
on:keydown={({ key }) => { on:keydown="{({ key }) => {
if (filterable) { if (filterable) {
return; return;
} }
@ -323,46 +326,47 @@
sortedItems[highlightedIndex].checked = !sortedItems[highlightedIndex].checked; sortedItems[highlightedIndex].checked = !sortedItems[highlightedIndex].checked;
} }
} }
}} }}"
on:blur={({ relatedTarget }) => { on:blur="{({ relatedTarget }) => {
if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') { if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') {
fieldRef.focus(); fieldRef.focus();
} }
}} }}"
{id} id="{id}"
{disabled} disabled="{disabled}"
{translateWithId}> translateWithId="{translateWithId}">
{#if checked.length > 0} {#if checked.length > 0}
<ListBoxSelection <ListBoxSelection
selectionCount={checked.length} selectionCount="{checked.length}"
on:clear={() => { on:clear="{() => {
sortedItems = sortedItems.map((item) => ({ sortedItems = sortedItems.map((item) => ({
...item, ...item,
checked: false, checked: false,
})); }));
fieldRef.blur(); fieldRef.blur();
}} }}"
{translateWithId} translateWithId="{translateWithId}"
{disabled} /> disabled="{disabled}" />
{/if} {/if}
{#if filterable} {#if filterable}
<input <input
bind:this={inputRef} bind:this="{inputRef}"
role="combobox" role="combobox"
tabindex="0" tabindex="0"
autocomplete="off" autocomplete="off"
aria-autocomplete="list" aria-autocomplete="list"
aria-expanded={open} aria-expanded="{open}"
aria-activedescendant={highlightedId} aria-activedescendant="{highlightedId}"
aria-disabled={disabled} aria-disabled="{disabled}"
aria-controls={menuId} aria-controls="{menuId}"
class:bx--text-input={true} class:bx--text-input="{true}"
class:bx--text-input--empty={inputValue === ''} class:bx--text-input--empty="{inputValue === ''}"
on:input={({ target }) => { class:bx--text-input--light="{light}"
on:input="{({ target }) => {
inputValue = target.value; inputValue = target.value;
}} }}"
on:keydown on:keydown
on:keydown|stopPropagation={({ key }) => { on:keydown|stopPropagation="{({ key }) => {
if (key === 'Enter') { if (key === 'Enter') {
if (highlightedIndex > -1) { if (highlightedIndex > -1) {
sortedItems[highlightedIndex].checked = !sortedItems[highlightedIndex].checked; sortedItems[highlightedIndex].checked = !sortedItems[highlightedIndex].checked;
@ -374,69 +378,69 @@
} else if (key === 'ArrowUp') { } else if (key === 'ArrowUp') {
change(-1); change(-1);
} }
}} }}"
on:focus on:focus
on:blur on:blur
on:blur={({ relatedTarget }) => { on:blur="{({ relatedTarget }) => {
if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') { if (relatedTarget && relatedTarget.getAttribute('role') !== 'button') {
inputRef.focus(); inputRef.focus();
} }
}} }}"
{disabled} disabled="{disabled}"
{placeholder} placeholder="{placeholder}"
{id} id="{id}"
{name} name="{name}"
value={inputValue} /> value="{inputValue}" />
{#if invalid} {#if invalid}
<WarningFilled16 class="bx--list-box__invalid-icon" /> <WarningFilled16 class="bx--list-box__invalid-icon" />
{/if} {/if}
{#if inputValue} {#if inputValue}
<ListBoxSelection <ListBoxSelection
on:clear={() => { on:clear="{() => {
inputValue = ''; inputValue = '';
open = false; open = false;
}} }}"
{translateWithId} translateWithId="{translateWithId}"
{disabled} disabled="{disabled}"
{open} /> open="{open}" />
{/if} {/if}
<ListBoxMenuIcon <ListBoxMenuIcon
on:click={() => { on:click="{() => {
open = !open; open = !open;
}} }}"
{translateWithId} translateWithId="{translateWithId}"
{open} /> open="{open}" />
{/if} {/if}
{#if !filterable} {#if !filterable}
<span class="bx--list-box__label">{label}</span> <span class="bx--list-box__label">{label}</span>
<ListBoxMenuIcon {open} {translateWithId} /> <ListBoxMenuIcon open="{open}" translateWithId="{translateWithId}" />
{/if} {/if}
</ListBoxField> </ListBoxField>
{#if open} {#if open}
<ListBoxMenu aria-label={ariaLabel} {id}> <ListBoxMenu aria-label="{ariaLabel}" id="{id}">
{#each filterable ? filteredItems : sortedItems as item, i (item.id || i)} {#each filterable ? filteredItems : sortedItems as item, i (item.id || i)}
<ListBoxMenuItem <ListBoxMenuItem
id={item.id} id="{item.id}"
active={item.checked} active="{item.checked}"
highlighted={highlightedIndex === i} highlighted="{highlightedIndex === i}"
on:click={() => { on:click="{() => {
sortedItems = sortedItems.map((_) => sortedItems = sortedItems.map((_) =>
_.id === item.id ? { ..._, checked: !_.checked } : _ _.id === item.id ? { ..._, checked: !_.checked } : _
); );
fieldRef.focus(); fieldRef.focus();
}} }}"
on:mouseenter={() => { on:mouseenter="{() => {
highlightedIndex = i; highlightedIndex = i;
}}> }}">
<Checkbox <Checkbox
readonly readonly
tabindex="-1" tabindex="-1"
id="checkbox-{item.id}" id="checkbox-{item.id}"
title={useTitleInItem ? itemToString(item) : undefined} title="{useTitleInItem ? itemToString(item) : undefined}"
name={itemToString(item)} name="{itemToString(item)}"
labelText={itemToString(item)} labelText="{itemToString(item)}"
checked={item.checked} checked="{item.checked}"
{disabled} /> disabled="{disabled}" />
</ListBoxMenuItem> </ListBoxMenuItem>
{/each} {/each}
</ListBoxMenu> </ListBoxMenu>

32
src/Notification/InlineNotification.svelte
View file

@ -65,7 +65,7 @@
function close() { function close() {
open = false; open = false;
dispatch('close'); dispatch("close");
} }
onMount(() => { onMount(() => {
@ -81,29 +81,35 @@
{#if open} {#if open}
<div <div
{role} role="{role}"
{kind} kind="{kind}"
class:bx--inline-notification={true} class:bx--inline-notification="{true}"
class:bx--inline-notification--low-contrast={lowContrast} class:bx--inline-notification--low-contrast="{lowContrast}"
class:bx--inline-notification--hide-close-button={hideCloseButton} class:bx--inline-notification--hide-close-button="{hideCloseButton}"
class={kind && `bx--inline-notification--${kind}`} class="{kind && `bx--inline-notification--${kind}`}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave>
<div class:bx--inline-notification__details={true}> <div class:bx--inline-notification__details="{true}">
<NotificationIcon {notificationType} {kind} {iconDescription} /> <NotificationIcon
<NotificationTextDetails {title} {subtitle} {notificationType}> notificationType="{notificationType}"
kind="{kind}"
iconDescription="{iconDescription}" />
<NotificationTextDetails
title="{title}"
subtitle="{subtitle}"
notificationType="{notificationType}">
<slot /> <slot />
</NotificationTextDetails> </NotificationTextDetails>
</div> </div>
<slot name="actions" /> <slot name="actions" />
{#if !hideCloseButton} {#if !hideCloseButton}
<NotificationButton <NotificationButton
{iconDescription} iconDescription="{iconDescription}"
{notificationType} notificationType="{notificationType}"
on:click={close} /> on:click="{close}" />
{/if} {/if}
</div> </div>
{/if} {/if}

8
src/Notification/Notification.Story.svelte
View file

@ -9,9 +9,9 @@
{#if story === 'inline'} {#if story === 'inline'}
<InlineNotification <InlineNotification
{...$$props} {...$$props}
on:close={() => { on:close="{() => {
console.log('on:close'); console.log('on:close');
}}> }}">
<div slot="actions"> <div slot="actions">
<NotificationActionButton>{$$props.action}</NotificationActionButton> <NotificationActionButton>{$$props.action}</NotificationActionButton>
</div> </div>
@ -19,8 +19,8 @@
{:else if story === 'toast'} {:else if story === 'toast'}
<ToastNotification <ToastNotification
{...$$props} {...$$props}
on:close={() => { on:close="{() => {
console.log('on:close'); console.log('on:close');
}} }}"
style="min-width: 30rem; margin-bottom: .5rem" /> style="min-width: 30rem; margin-bottom: .5rem" />
{/if} {/if}

14
src/Notification/NotificationButton.svelte
View file

@ -28,18 +28,18 @@
<button <button
type="button" type="button"
aria-label={iconDescription} aria-label="{iconDescription}"
title={iconDescription} title="{iconDescription}"
class:bx--toast-notification__close-button={notificationType === 'toast'} class:bx--toast-notification__close-button="{notificationType === 'toast'}"
class:bx--inline-notification__close-button={notificationType === 'inline'} class:bx--inline-notification__close-button="{notificationType === 'inline'}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave>
<svelte:component <svelte:component
this={renderIcon} this="{renderIcon}"
{title} title="{title}"
class="{notificationType === 'toast' && 'bx--toast-notification__close-icon'} class="{notificationType === 'toast' && 'bx--toast-notification__close-icon'}
{notificationType === 'inline' && 'bx--inline-notification__close-icon'}" /> {notificationType === 'inline' && 'bx--inline-notification__close-icon'}" />
</button> </button>

4
src/Notification/NotificationIcon.svelte
View file

@ -35,6 +35,6 @@
</script> </script>
<svelte:component <svelte:component
this={icons[kind]} this="{icons[kind]}"
title={iconDescription} title="{iconDescription}"
class="bx--{notificationType}-notification__icon" /> class="bx--{notificationType}-notification__icon" />

14
src/Notification/NotificationTextDetails.svelte
View file

@ -25,18 +25,18 @@
</script> </script>
{#if notificationType === 'toast'} {#if notificationType === 'toast'}
<div class:bx--toast-notification__details={true}> <div class:bx--toast-notification__details="{true}">
<h3 class:bx--toast-notification__title={true}>{title}</h3> <h3 class:bx--toast-notification__title="{true}">{title}</h3>
<div class:bx--toast-notification__subtitle={true}>{subtitle}</div> <div class:bx--toast-notification__subtitle="{true}">{subtitle}</div>
<div class:bx--toast-notification__caption={true}>{caption}</div> <div class:bx--toast-notification__caption="{true}">{caption}</div>
<slot /> <slot />
</div> </div>
{/if} {/if}
{#if notificationType === 'inline'} {#if notificationType === 'inline'}
<div class:bx--inline-notification__text-wrapper={true}> <div class:bx--inline-notification__text-wrapper="{true}">
<p class:bx--inline-notification__title={true}>{title}</p> <p class:bx--inline-notification__title="{true}">{title}</p>
<div class:bx--inline-notification__subtitle={true}>{subtitle}</div> <div class:bx--inline-notification__subtitle="{true}">{subtitle}</div>
<slot /> <slot />
</div> </div>
{/if} {/if}

29
src/Notification/ToastNotification.svelte
View file

@ -71,7 +71,7 @@
function close() { function close() {
open = false; open = false;
dispatch('close'); dispatch("close");
} }
onMount(() => { onMount(() => {
@ -87,25 +87,32 @@
{#if open} {#if open}
<div <div
{role} role="{role}"
{kind} kind="{kind}"
class:bx--toast-notification={true} class:bx--toast-notification="{true}"
class:bx--toast-notification--low-contrast={lowContrast} class:bx--toast-notification--low-contrast="{lowContrast}"
class={kind && `bx--toast-notification--${kind}`} class="{kind && `bx--toast-notification--${kind}`}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave>
<NotificationIcon {notificationType} {kind} {iconDescription} /> <NotificationIcon
<NotificationTextDetails {title} {subtitle} {caption} {notificationType}> notificationType="{notificationType}"
kind="{kind}"
iconDescription="{iconDescription}" />
<NotificationTextDetails
title="{title}"
subtitle="{subtitle}"
caption="{caption}"
notificationType="{notificationType}">
<slot /> <slot />
</NotificationTextDetails> </NotificationTextDetails>
{#if !hideCloseButton} {#if !hideCloseButton}
<NotificationButton <NotificationButton
{iconDescription} iconDescription="{iconDescription}"
{notificationType} notificationType="{notificationType}"
on:click={close} /> on:click="{close}" />
{/if} {/if}
</div> </div>
{/if} {/if}

6
src/NumberInput/NumberInput.Skeleton.svelte
View file

@ -7,14 +7,14 @@
</script> </script>
<div <div
class:bx--form-item={true} class:bx--form-item="{true}"
{...$$restProps} {...$$restProps}
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave> on:mouseleave>
{#if !hideLabel} {#if !hideLabel}
<span class:bx--label={true} class:bx--skeleton={true} /> <span class:bx--label="{true}" class:bx--skeleton="{true}"></span>
{/if} {/if}
<div class:bx--number={true} class:bx--skeleton={true} /> <div class:bx--number="{true}" class:bx--skeleton="{true}"></div>
</div> </div>

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