mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
chore(deps-dev): upgrade prettier-plugin-svelte (#498)
This commit is contained in:
Eric Liu
GitHub
parent
3e7511e3f8
commit
3d002f3246
72 changed files with 944 additions and 733 deletions
|
|
@ -34,6 +34,88 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<!-- routify:options bundle=true -->
|
||||
<svelte:window bind:innerWidth />
|
||||
|
||||
<Theme persist>
|
||||
<Header
|
||||
aria-label="Navigation"
|
||||
href="{$url('/')}"
|
||||
expandedByDefault="{true}"
|
||||
bind:isSideNavOpen
|
||||
>
|
||||
<div slot="skip-to-content">
|
||||
<SkipToContent />
|
||||
</div>
|
||||
|
||||
<span slot="platform" class="platform-name">
|
||||
Carbon Components Svelte
|
||||
<code>v{process.env.VERSION || ""}</code>
|
||||
</span>
|
||||
|
||||
<HeaderUtilities>
|
||||
<HeaderActionLink
|
||||
icon="{LogoGithub20}"
|
||||
href="https://github.com/IBM/carbon-components-svelte"
|
||||
target="_blank"
|
||||
/>
|
||||
<HeaderAction transition="{false}" bind:isOpen>
|
||||
<HeaderPanelLinks>
|
||||
<HeaderPanelDivider>Carbon Svelte portfolio</HeaderPanelDivider>
|
||||
<HeaderPanelLink href="https://github.com/IBM/carbon-icons-svelte">
|
||||
Carbon Icons Svelte
|
||||
</HeaderPanelLink>
|
||||
<HeaderPanelLink
|
||||
href="https://github.com/IBM/carbon-pictograms-svelte"
|
||||
>
|
||||
Carbon Pictograms Svelte
|
||||
</HeaderPanelLink>
|
||||
<HeaderPanelLink
|
||||
href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte"
|
||||
>
|
||||
Carbon Charts Svelte
|
||||
</HeaderPanelLink>
|
||||
<HeaderPanelDivider>Resources</HeaderPanelDivider>
|
||||
<HeaderPanelLink href="https://www.carbondesignsystem.com/">
|
||||
Carbon Design System
|
||||
</HeaderPanelLink>
|
||||
<HeaderPanelLink href="https://www.ibm.com/design/language/">
|
||||
IBM Design Language
|
||||
</HeaderPanelLink>
|
||||
</HeaderPanelLinks>
|
||||
</HeaderAction>
|
||||
</HeaderUtilities>
|
||||
</Header>
|
||||
|
||||
<SideNav bind:isOpen="{isSideNavOpen}">
|
||||
<SideNavItems>
|
||||
<SideNavMenu
|
||||
expanded="{$isActive($url('')) || $isActive($url('/components'))}"
|
||||
text="Components"
|
||||
>
|
||||
{#each components.children as child, i (child.path)}
|
||||
<SideNavMenuItem
|
||||
text="{child.title}"
|
||||
href="{$url(child.path)}"
|
||||
isSelected="{$isActive($url(child.path))}"
|
||||
/>
|
||||
{/each}
|
||||
</SideNavMenu>
|
||||
<SideNavMenu expanded="{$isActive($url('/recipes'))}" text="Recipes">
|
||||
{#each recipes.children as child, i (child.path)}
|
||||
<SideNavMenuItem
|
||||
text="{child.title}"
|
||||
href="{$url(child.path)}"
|
||||
isSelected="{$isActive($url(child.path))}"
|
||||
/>
|
||||
{/each}
|
||||
</SideNavMenu>
|
||||
</SideNavItems>
|
||||
</SideNav>
|
||||
<slot />
|
||||
<Footer />
|
||||
</Theme>
|
||||
|
||||
<style global>
|
||||
.body-short-01 {
|
||||
font-size: var(--cds-body-short-01-font-size);
|
||||
|
|
@ -160,85 +242,3 @@
|
|||
max-height: 120rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- routify:options bundle=true -->
|
||||
<svelte:window bind:innerWidth />
|
||||
|
||||
<Theme persist>
|
||||
<Header
|
||||
aria-label="Navigation"
|
||||
href="{$url('/')}"
|
||||
expandedByDefault="{true}"
|
||||
bind:isSideNavOpen
|
||||
>
|
||||
<div slot="skip-to-content">
|
||||
<SkipToContent />
|
||||
</div>
|
||||
|
||||
<span slot="platform" class="platform-name">
|
||||
Carbon Components Svelte
|
||||
<code>v{process.env.VERSION || ''}</code>
|
||||
</span>
|
||||
|
||||
<HeaderUtilities>
|
||||
<HeaderActionLink
|
||||
icon="{LogoGithub20}"
|
||||
href="https://github.com/IBM/carbon-components-svelte"
|
||||
target="_blank"
|
||||
/>
|
||||
<HeaderAction transition="{false}" bind:isOpen>
|
||||
<HeaderPanelLinks>
|
||||
<HeaderPanelDivider>Carbon Svelte portfolio</HeaderPanelDivider>
|
||||
<HeaderPanelLink href="https://github.com/IBM/carbon-icons-svelte">
|
||||
Carbon Icons Svelte
|
||||
</HeaderPanelLink>
|
||||
<HeaderPanelLink
|
||||
href="https://github.com/IBM/carbon-pictograms-svelte"
|
||||
>
|
||||
Carbon Pictograms Svelte
|
||||
</HeaderPanelLink>
|
||||
<HeaderPanelLink
|
||||
href="https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte"
|
||||
>
|
||||
Carbon Charts Svelte
|
||||
</HeaderPanelLink>
|
||||
<HeaderPanelDivider>Resources</HeaderPanelDivider>
|
||||
<HeaderPanelLink href="https://www.carbondesignsystem.com/">
|
||||
Carbon Design System
|
||||
</HeaderPanelLink>
|
||||
<HeaderPanelLink href="https://www.ibm.com/design/language/">
|
||||
IBM Design Language
|
||||
</HeaderPanelLink>
|
||||
</HeaderPanelLinks>
|
||||
</HeaderAction>
|
||||
</HeaderUtilities>
|
||||
</Header>
|
||||
|
||||
<SideNav bind:isOpen="{isSideNavOpen}">
|
||||
<SideNavItems>
|
||||
<SideNavMenu
|
||||
expanded="{$isActive($url('')) || $isActive($url('/components'))}"
|
||||
text="Components"
|
||||
>
|
||||
{#each components.children as child, i (child.path)}
|
||||
<SideNavMenuItem
|
||||
text="{child.title}"
|
||||
href="{$url(child.path)}"
|
||||
isSelected="{$isActive($url(child.path))}"
|
||||
/>
|
||||
{/each}
|
||||
</SideNavMenu>
|
||||
<SideNavMenu expanded="{$isActive($url('/recipes'))}" text="Recipes">
|
||||
{#each recipes.children as child, i (child.path)}
|
||||
<SideNavMenuItem
|
||||
text="{child.title}"
|
||||
href="{$url(child.path)}"
|
||||
isSelected="{$isActive($url(child.path))}"
|
||||
/>
|
||||
{/each}
|
||||
</SideNavMenu>
|
||||
</SideNavItems>
|
||||
</SideNav>
|
||||
<slot />
|
||||
<Footer />
|
||||
</Theme>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
open = !open;
|
||||
}}"
|
||||
>
|
||||
{open ? 'Collapse' : 'Expand'}
|
||||
{open ? "Collapse" : "Expand"}
|
||||
all
|
||||
</Button>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,12 +6,6 @@
|
|||
const code = Array.from({ length: 20 }, (_, i) => i + 1).join("\n");
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ToggleSmall
|
||||
style="margin-bottom: var(--cds-spacing-05)"
|
||||
labelText="Show code snippets"
|
||||
|
|
@ -19,7 +13,8 @@
|
|||
/>
|
||||
|
||||
{#if toggled}
|
||||
<h5>"Show more" will not render</h5><br />
|
||||
<h5>"Show more" will not render</h5>
|
||||
<br />
|
||||
{/if}
|
||||
<div class:hidden="{!toggled}">
|
||||
<CodeSnippet type="multi" code="{code}" />
|
||||
|
|
@ -27,8 +22,15 @@
|
|||
|
||||
{#if toggled}
|
||||
<br /><br />
|
||||
<h5>"Show more" will render</h5><br />
|
||||
<h5>"Show more" will render</h5>
|
||||
<br />
|
||||
<div class:hidden="{!toggled}">
|
||||
<CodeSnippet type="multi" code="{code}" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,10 @@
|
|||
<ComboBox
|
||||
titleText="Contact"
|
||||
placeholder="Select contact method"
|
||||
items="{[{ id: '0', text: 'Slack' }, { id: '1', text: 'Email' }, { id: '2', text: 'Fax' }]}"
|
||||
items="{[
|
||||
{ id: '0', text: 'Slack' },
|
||||
{ id: '1', text: 'Email' },
|
||||
{ id: '2', text: 'Fax' },
|
||||
]}"
|
||||
shouldFilterItem="{shouldFilterItem}"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -16,12 +16,6 @@
|
|||
$: secondary = formatSelected(comboBox2_selectedIndex);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
|
||||
}
|
||||
</style>
|
||||
|
||||
<ComboBox
|
||||
bind:selectedIndex="{comboBox1_selectedIndex}"
|
||||
titleText="Primary contact"
|
||||
|
|
@ -39,3 +33,9 @@
|
|||
/>
|
||||
|
||||
<div>Secondary: {secondary}</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,12 +4,6 @@
|
|||
let selectedIndex = 1;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
||||
<ContentSwitcher bind:selectedIndex>
|
||||
<Switch text="Latest news" />
|
||||
<Switch text="Trending" />
|
||||
|
|
@ -27,3 +21,9 @@
|
|||
</div>
|
||||
|
||||
<div>Selected index: {selectedIndex}</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
|
||||
<DataTable sortable headers="{headers}" rows="{rows}">
|
||||
<span slot="cell" let:cell>
|
||||
{#if cell.key === 'overflow'}
|
||||
{#if cell.key === "overflow"}
|
||||
<OverflowMenu flipped>
|
||||
<OverflowMenuItem text="Restart" />
|
||||
<OverflowMenuItem
|
||||
|
|
|
|||
|
|
@ -16,12 +16,6 @@
|
|||
$: secondary = formatSelected(dropdown2_selectedIndex);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
|
||||
}
|
||||
</style>
|
||||
|
||||
<Dropdown
|
||||
titleText="Primary contact"
|
||||
bind:selectedIndex="{dropdown1_selectedIndex}"
|
||||
|
|
@ -39,3 +33,9 @@
|
|||
/>
|
||||
|
||||
<div>Secondary: {secondary}</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
>
|
||||
Cancel
|
||||
</Button>
|
||||
{#if state !== 'dormant'}
|
||||
{#if state !== "dormant"}
|
||||
<InlineLoading status="{state}" description="{descriptionMap[state]}" />
|
||||
{:else}
|
||||
<Button on:click="{() => (state = 'active')}">Submit</Button>
|
||||
|
|
|
|||
|
|
@ -19,12 +19,6 @@
|
|||
$: secondary = formatSelected(multiselect2_selectedIds);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
|
||||
}
|
||||
</style>
|
||||
|
||||
<MultiSelect
|
||||
titleText="Primary contact"
|
||||
bind:selectedIds="{multiselect1_selectedIds}"
|
||||
|
|
@ -42,3 +36,9 @@
|
|||
/>
|
||||
|
||||
<div>Secondary: {secondary}</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin: var(--cds-layout-01) 0 var(--cds-layout-03);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</FormGroup>
|
||||
|
||||
<ButtonSet>
|
||||
{#each ['free', 'standard', 'pro'] as value}
|
||||
{#each ["free", "standard", "pro"] as value}
|
||||
<Button
|
||||
on:click="{() => {
|
||||
plan = value;
|
||||
|
|
|
|||
|
|
@ -4,12 +4,6 @@
|
|||
let value = "";
|
||||
</script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
||||
<Search bind:value />
|
||||
|
||||
<div>
|
||||
|
|
@ -33,3 +27,9 @@
|
|||
</div>
|
||||
|
||||
<div>Value: {value}</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,19 +4,19 @@
|
|||
let toggled = true;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
||||
<Toggle labelText="Push notifications" bind:toggled />
|
||||
|
||||
<div>
|
||||
<Button size="small" on:click="{() => (toggled = !toggled)}">
|
||||
Toggle
|
||||
{toggled ? 'off' : 'on'}
|
||||
{toggled ? "off" : "on"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div>Toggled: {toggled}</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,20 +4,20 @@
|
|||
let open = true;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
||||
<Tooltip bind:open triggerText="Resource list" align="start">
|
||||
<p>Resources are provisioned based on your account's organization.</p>
|
||||
</Tooltip>
|
||||
|
||||
<div style="margin-top: var(--cds-spacing-12);">
|
||||
<Button size="small" on:click="{() => (open = !open)}">
|
||||
{open ? 'Close tooltip' : 'Open tooltip'}
|
||||
{open ? "Close tooltip" : "Open tooltip"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div>Open: {open}</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
margin-top: var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,8 @@
|
|||
$: document.documentElement.setAttribute("theme", currentTheme);
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
|
||||
<style>
|
||||
:global(body.framed) {
|
||||
min-height: 100vh;
|
||||
|
|
@ -20,5 +22,3 @@
|
|||
padding: var(--cds-spacing-06) var(--cds-spacing-05);
|
||||
}
|
||||
</style>
|
||||
|
||||
<slot />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue