Skip to content

Commit 3f3ceef

Browse files
hperrinhperrin
committed
feat: migrate components in tab and tab bar to runes
1 parent ae985f3 commit 3f3ceef

13 files changed

+434
-255
lines changed

‎MIGRATING.md

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ This doc contains information that will help you migrate your code from an older
1313
- The deprecated "MDC" events have been removed. All event names should be migrated to the corresponding "SMUI" event names.
1414
- The "Fixation" theme now uses Tahoma as its large header font.
1515
- Select no longer defaults the value to an empty string, meaning you must either set the value given to it to an empty string or provide a key function that returns an empty string for an undefined value.
16+
- The TabBar now exprects a `tab` snippet instead of using `let:tab`.
1617

1718
## Changes
1819

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -195,8 +195,8 @@ Svelte 5 Runes mode is being migrated to slowly. This is the todo list of compon
195195
- [ ] Snackbar
196196
- [ ] Kitchen
197197
- Tabs
198-
- [ ] Tab
199-
- [ ] Tab Bar
198+
- [x] Tab
199+
- [x] Tab Bar
200200
- [ ] Tooltip
201201
- [ ] Touch Target
202202

‎packages/site/src/routes/demo/tabs/_HrefAnchors.svelte

+12-11
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,28 @@
1-
<svelte:options runes={false} />
2-
31
<div>
4-
<TabBar tabs={['Home', 'Merchandise', 'About Us']} let:tab bind:active>
5-
<Tab
6-
{tab}
7-
href="https://en.wikipedia.org/wiki/{tab.replace(/ /g, '_')}"
8-
target="href-tabs-frame"
9-
>
10-
<Label>{tab}</Label>
11-
</Tab>
2+
<TabBar tabs={['Home', 'Merchandise', 'About Us']} bind:active>
3+
{#snippet tab(tab)}
4+
<Tab
5+
{tab}
6+
href="https://en.wikipedia.org/wiki/{tab.replace(/ /g, '_')}"
7+
target="href-tabs-frame"
8+
>
9+
<Label>{tab}</Label>
10+
</Tab>
11+
{/snippet}
1212
</TabBar>
1313

1414
<iframe
1515
src="https://en.wikipedia.org/wiki/Home"
1616
title="Selected Tab"
1717
name="href-tabs-frame"
1818
style="width: 100%; height: 400px; border: 0;"
19+
role="tabpanel"
1920
></iframe>
2021
</div>
2122

2223
<script lang="ts">
2324
import Tab, { Label } from '@smui/tab';
2425
import TabBar from '@smui/tab-bar';
2526
26-
let active = 'Home';
27+
let active = $state('Home');
2728
</script>

‎packages/site/src/routes/demo/tabs/_IconIndicators.svelte

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
1-
<svelte:options runes={false} />
2-
31
<div class="icon-indicators">
4-
<TabBar tabs={['Home', 'Merchandise', 'About Us']} let:tab bind:active>
5-
<Tab
6-
{tab}
7-
tabIndicator$type="icon"
8-
tabIndicator$content$class="material-icons"
9-
>
10-
<Label>{tab}</Label>
11-
<svelte:fragment slot="tab-indicator">star</svelte:fragment>
12-
</Tab>
2+
<TabBar tabs={['Home', 'Merchandise', 'About Us']} bind:active>
3+
{#snippet tab(tab)}
4+
<Tab
5+
{tab}
6+
tabIndicator$type="icon"
7+
tabIndicator$content$class="material-icons"
8+
>
9+
<Label>{tab}</Label>
10+
{#snippet tabIndicator()}star{/snippet}
11+
</Tab>
12+
{/snippet}
1313
</TabBar>
1414
</div>
1515

1616
<script lang="ts">
1717
import Tab, { Label } from '@smui/tab';
1818
import TabBar from '@smui/tab-bar';
1919
20-
let active = 'Home';
20+
let active = $state('Home');
2121
</script>
2222

2323
<style>

‎packages/site/src/routes/demo/tabs/_Icons.svelte

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
<svelte:options runes={false} />
2-
31
<div>
4-
<TabBar {tabs} let:tab bind:active>
5-
<Tab {tab}>
6-
<Icon class="material-icons">{tab.icon}</Icon>
7-
<Label>{tab.label}</Label>
8-
</Tab>
2+
<TabBar {tabs} key={(tab) => tab.label} bind:active>
3+
{#snippet tab(tab)}
4+
<Tab {tab}>
5+
<Icon class="material-icons">{tab.icon}</Icon>
6+
<Label>{tab.label}</Label>
7+
</Tab>
8+
{/snippet}
99
</TabBar>
1010
</div>
1111

@@ -27,5 +27,5 @@
2727
label: 'Favorites',
2828
},
2929
];
30-
let active = tabs[0];
30+
let active = $state(tabs[0]);
3131
</script>

‎packages/site/src/routes/demo/tabs/_KeyedIconsAboveRestrictedIndicatorsFadeTransition.svelte

+13-14
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
<svelte:options runes={false} />
2-
31
<div>
4-
<TabBar {tabs} let:tab {key} bind:active>
5-
<Tab
6-
{tab}
7-
stacked={true}
8-
indicatorSpanOnlyContent={true}
9-
tabIndicator$transition="fade"
10-
>
11-
<Icon class="material-icons">{tab.icon}</Icon>
12-
<Label>{tab.label}</Label>
13-
</Tab>
2+
<TabBar {tabs} key={(tab) => tab.k} bind:active>
3+
{#snippet tab(tab)}
4+
<Tab
5+
{tab}
6+
stacked={true}
7+
indicatorSpanOnlyContent={true}
8+
tabIndicator$transition="fade"
9+
>
10+
<Icon class="material-icons">{tab.icon}</Icon>
11+
<Label>{tab.label}</Label>
12+
</Tab>
13+
{/snippet}
1414
</TabBar>
1515

1616
<pre class="status">Selected: {active.k}</pre>
@@ -25,7 +25,6 @@
2525
icon: string;
2626
label: string;
2727
};
28-
const key = (tab: TabEntry) => tab.k;
2928
3029
let tabs: TabEntry[] = [
3130
{
@@ -49,5 +48,5 @@
4948
label: 'Code',
5049
},
5150
];
52-
let active = tabs[2];
51+
let active = $state(tabs[2]);
5352
</script>

‎packages/site/src/routes/demo/tabs/_MinWidth.svelte

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
<svelte:options runes={false} />
2-
31
<div>
4-
<TabBar tabs={['Home', 'Merchandise', 'About Us']} let:tab bind:active>
5-
<Tab {tab} minWidth>
6-
<Label>{tab}</Label>
7-
</Tab>
2+
<TabBar tabs={['Home', 'Merchandise', 'About Us']} bind:active>
3+
{#snippet tab(tab)}
4+
<Tab {tab} minWidth>
5+
<Label>{tab}</Label>
6+
</Tab>
7+
{/snippet}
88
</TabBar>
99
</div>
1010

1111
<script lang="ts">
1212
import Tab, { Label } from '@smui/tab';
1313
import TabBar from '@smui/tab-bar';
1414
15-
let active = 'Home';
15+
let active = $state('Home');
1616
</script>

‎packages/site/src/routes/demo/tabs/_ScrollingNoInitialActive.svelte

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
<svelte:options runes={false} />
2-
31
<div>
4-
<TabBar tabs={[...Array(20)].map((_v, i) => i + 1)} let:tab>
5-
<Tab {tab}>
6-
<Label>Tab {tab}</Label>
7-
</Tab>
2+
<TabBar tabs={[...Array(20)].map((_v, i) => i + 1)}>
3+
{#snippet tab(tab)}
4+
<Tab {tab}>
5+
<Label>Tab {tab}</Label>
6+
</Tab>
7+
{/snippet}
88
</TabBar>
99
</div>
1010

‎packages/site/src/routes/demo/tabs/_Simple.svelte

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
1-
<svelte:options runes={false} />
2-
31
<div>
42
<!--
53
Note: tabs must be unique. (They cannot === each other.)
64
-->
7-
<TabBar tabs={['Home', 'Merchandise', 'About Us']} let:tab bind:active>
8-
<!-- Note: the `tab` property is required! -->
9-
<Tab {tab}>
10-
<Label>{tab}</Label>
11-
</Tab>
5+
<TabBar tabs={['Home', 'Merchandise', 'About Us']} bind:active>
6+
{#snippet tab(tab)}
7+
<!-- Note: the `tab` property is required! -->
8+
<Tab {tab}>
9+
<Label>{tab}</Label>
10+
</Tab>
11+
{/snippet}
1212
</TabBar>
1313

1414
{#if active === 'Home'}
15-
<Paper variant="unelevated">
15+
<Paper role="tabpanel" variant="unelevated">
1616
<Content>Welcome to the Home page! I hope you like SMUI!</Content>
1717
</Paper>
1818
{:else if active === 'Merchandise'}
19-
<Paper variant="unelevated">
19+
<Paper role="tabpanel" variant="unelevated">
2020
<Content>
2121
You want merch? We got so much cool merch! We got SMUI toilet paper,
2222
SMUI ironing boards, SMUI gas pedals! Come and get 'em!
2323
</Content>
2424
</Paper>
2525
{:else if active === 'About Us'}
26-
<Paper variant="unelevated">
26+
<Paper role="tabpanel" variant="unelevated">
2727
<Content>
2828
We are a boutique UI library, ready to get you up and running on
2929
whatever your project is. Whether you're building a web UI for an
@@ -47,5 +47,5 @@
4747
import Button from '@smui/button';
4848
import Paper, { Content } from '@smui/paper';
4949
50-
let active = 'Home';
50+
let active = $state('Home');
5151
</script>

0 commit comments

Comments
 (0)