Skip to content

Commit 7233ecc

Browse files
hperrinhperrin
committed
feat: migrate components in text field to runes
1 parent 9c936ab commit 7233ecc

33 files changed

+839
-553
lines changed

‎README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -180,10 +180,10 @@ Svelte 5 Runes mode is being migrated to slowly. This is the todo list of compon
180180
- [ ] Select Icon
181181
- [x] Slider
182182
- [x] Switch
183-
- [ ] Text Field
184-
- [ ] Text Field Character Counter
185-
- [ ] Text Field Helper Text
186-
- [ ] Text Field Icon
183+
- [x] Text Field
184+
- [x] Text Field Character Counter
185+
- [x] Text Field Helper Text
186+
- [x] Text Field Icon
187187
- [ ] Layout Grid
188188
- [x] List
189189
- [x] Menu Surface

‎packages/site/src/routes/demo/textfield/_BothIcons.svelte

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,36 @@
1-
<svelte:options runes={false} />
2-
31
<div class="columns margins">
42
<div>
53
<Textfield bind:value={valueA} label="Standard">
6-
<Icon class="material-icons" slot="leadingIcon">event</Icon>
7-
<Icon class="material-icons" slot="trailingIcon">delete</Icon>
4+
{#snippet leadingIcon()}
5+
<Icon class="material-icons">event</Icon>
6+
{/snippet}
7+
{#snippet trailingIcon()}
8+
<Icon class="material-icons">delete</Icon>
9+
{/snippet}
810
</Textfield>
911

1012
<pre class="status">Value: {valueA}</pre>
1113
</div>
1214
<div>
1315
<Textfield variant="filled" bind:value={valueB} label="Filled">
14-
<Icon class="material-icons" slot="leadingIcon">event</Icon>
15-
<Icon class="material-icons" slot="trailingIcon">delete</Icon>
16+
{#snippet leadingIcon()}
17+
<Icon class="material-icons">event</Icon>
18+
{/snippet}
19+
{#snippet trailingIcon()}
20+
<Icon class="material-icons">delete</Icon>
21+
{/snippet}
1622
</Textfield>
1723

1824
<pre class="status">Value: {valueB}</pre>
1925
</div>
2026
<div>
2127
<Textfield variant="outlined" bind:value={valueC} label="Outlined">
22-
<Icon class="material-icons" slot="leadingIcon">event</Icon>
23-
<Icon class="material-icons" slot="trailingIcon">delete</Icon>
28+
{#snippet leadingIcon()}
29+
<Icon class="material-icons">event</Icon>
30+
{/snippet}
31+
{#snippet trailingIcon()}
32+
<Icon class="material-icons">delete</Icon>
33+
{/snippet}
2434
</Textfield>
2535

2636
<pre class="status">Value: {valueC}</pre>
@@ -31,7 +41,7 @@
3141
import Textfield from '@smui/textfield';
3242
import Icon from '@smui/textfield/icon';
3343
34-
let valueA = '';
35-
let valueB = '';
36-
let valueC = '';
44+
let valueA = $state('');
45+
let valueB = $state('');
46+
let valueC = $state('');
3747
</script>

‎packages/site/src/routes/demo/textfield/_CharacterCount.svelte

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
<svelte:options runes={false} />
2-
31
<div class="columns margins">
42
<div>
53
<Textfield bind:value={valueA} label="Standard" input$maxlength={18}>
6-
<CharacterCounter slot="helper">0 / 18</CharacterCounter>
4+
{#snippet helper()}
5+
<CharacterCounter>0 / 18</CharacterCounter>
6+
{/snippet}
77
</Textfield>
88

99
<pre class="status">Value: {valueA}</pre>
@@ -15,7 +15,9 @@
1515
label="Filled"
1616
input$maxlength={18}
1717
>
18-
<CharacterCounter slot="helper">0 / 18</CharacterCounter>
18+
{#snippet helper()}
19+
<CharacterCounter>0 / 18</CharacterCounter>
20+
{/snippet}
1921
</Textfield>
2022

2123
<pre class="status">Value: {valueB}</pre>
@@ -27,7 +29,9 @@
2729
label="Outlined"
2830
input$maxlength={18}
2931
>
30-
<CharacterCounter slot="helper">0 / 18</CharacterCounter>
32+
{#snippet helper()}
33+
<CharacterCounter>0 / 18</CharacterCounter>
34+
{/snippet}
3135
</Textfield>
3236

3337
<pre class="status">Value: {valueC}</pre>
@@ -38,7 +42,7 @@
3842
import Textfield from '@smui/textfield';
3943
import CharacterCounter from '@smui/textfield/character-counter';
4044
41-
let valueA = '';
42-
let valueB = '';
43-
let valueC = '';
45+
let valueA = $state('');
46+
let valueB = $state('');
47+
let valueC = $state('');
4448
</script>

‎packages/site/src/routes/demo/textfield/_ConditionalIcons.svelte

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
<svelte:options runes={false} />
2-
31
<!--
42
Icons are normally discovered through their slot,
53
but Svelte slots cannot be conditional, so you can
@@ -15,16 +13,16 @@
1513
bind:value={valueA}
1614
label="Standard"
1715
>
18-
<svelte:fragment slot="leadingIcon">
16+
{#snippet leadingIcon()}
1917
{#if showLeadingIcons}
2018
<Icon class="material-icons">event</Icon>
2119
{/if}
22-
</svelte:fragment>
23-
<svelte:fragment slot="trailingIcon">
20+
{/snippet}
21+
{#snippet trailingIcon()}
2422
{#if showTrailingIcons}
2523
<Icon class="material-icons">delete</Icon>
2624
{/if}
27-
</svelte:fragment>
25+
{/snippet}
2826
</Textfield>
2927

3028
<pre class="status">Value: {valueA}</pre>
@@ -37,16 +35,16 @@
3735
bind:value={valueB}
3836
label="Filled"
3937
>
40-
<svelte:fragment slot="leadingIcon">
38+
{#snippet leadingIcon()}
4139
{#if showLeadingIcons}
4240
<Icon class="material-icons">event</Icon>
4341
{/if}
44-
</svelte:fragment>
45-
<svelte:fragment slot="trailingIcon">
42+
{/snippet}
43+
{#snippet trailingIcon()}
4644
{#if showTrailingIcons}
4745
<Icon class="material-icons">delete</Icon>
4846
{/if}
49-
</svelte:fragment>
47+
{/snippet}
5048
</Textfield>
5149

5250
<pre class="status">Value: {valueB}</pre>
@@ -59,16 +57,16 @@
5957
bind:value={valueC}
6058
label="Outlined"
6159
>
62-
<svelte:fragment slot="leadingIcon">
60+
{#snippet leadingIcon()}
6361
{#if showLeadingIcons}
6462
<Icon class="material-icons">event</Icon>
6563
{/if}
66-
</svelte:fragment>
67-
<svelte:fragment slot="trailingIcon">
64+
{/snippet}
65+
{#snippet trailingIcon()}
6866
{#if showTrailingIcons}
6967
<Icon class="material-icons">delete</Icon>
7068
{/if}
71-
</svelte:fragment>
69+
{/snippet}
7270
</Textfield>
7371

7472
<pre class="status">Value: {valueC}</pre>
@@ -89,10 +87,10 @@
8987
import Icon from '@smui/textfield/icon';
9088
import Button from '@smui/button';
9189
92-
let valueA = '';
93-
let valueB = '';
94-
let valueC = '';
90+
let valueA = $state('');
91+
let valueB = $state('');
92+
let valueC = $state('');
9593
96-
let showLeadingIcons = true;
97-
let showTrailingIcons = true;
94+
let showLeadingIcons = $state(true);
95+
let showTrailingIcons = $state(true);
9896
</script>

‎packages/site/src/routes/demo/textfield/_DifferentTypes.svelte

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
<svelte:options runes={false} />
2-
31
<div class="columns margins">
42
<div>
53
<Textfield bind:value={valueTypeNumber} label="Number" type="number" />
@@ -34,15 +32,17 @@
3432
<script lang="ts">
3533
import Textfield from '@smui/textfield';
3634
37-
let valueTypeNumber = 0;
38-
let valueTypeNumberStep = 0;
39-
let valueTypeDate = '';
40-
let valueTypeFiles: FileList | null = null;
35+
let valueTypeNumber = $state(0);
36+
let valueTypeNumberStep = $state(0);
37+
let valueTypeDate = $state('');
38+
let valueTypeFiles: FileList | null = $state(null);
4139
4240
// Note: the change and input events fire before the `files` prop is updated.
43-
$: if (valueTypeFiles != null && valueTypeFiles.length) {
44-
alert('Selected ' + valueTypeFiles.length + ' file(s).');
45-
}
41+
$effect(() => {
42+
if (valueTypeFiles != null && valueTypeFiles.length) {
43+
alert('Selected ' + valueTypeFiles.length + ' file(s).');
44+
}
45+
});
4646
</script>
4747

4848
<style>

‎packages/site/src/routes/demo/textfield/_Disabled.svelte

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
1-
<svelte:options runes={false} />
2-
31
<div class="columns margins">
42
<div>
53
<Textfield disabled value="" label="Standard">
6-
<HelperText slot="helper">Helper Text</HelperText>
4+
{#snippet helper()}
5+
<HelperText>Helper Text</HelperText>
6+
{/snippet}
77
</Textfield>
88
</div>
99
<div>
1010
<Textfield variant="filled" disabled value="" label="Filled">
11-
<HelperText slot="helper">Helper Text</HelperText>
11+
{#snippet helper()}
12+
<HelperText>Helper Text</HelperText>
13+
{/snippet}
1214
</Textfield>
1315
</div>
1416
<div>
1517
<Textfield variant="outlined" disabled value="" label="Outlined">
16-
<HelperText slot="helper">Helper Text</HelperText>
18+
{#snippet helper()}
19+
<HelperText>Helper Text</HelperText>
20+
{/snippet}
1721
</Textfield>
1822
</div>
1923
</div>

‎packages/site/src/routes/demo/textfield/_ElementsInLabel.svelte

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
1-
<svelte:options runes={false} />
2-
31
<div class="margins">
42
<Textfield bind:value={valueElementsLabel} type="email">
5-
<svelte:fragment slot="label">
3+
{#snippet label()}
64
<CommonIcon
75
class="material-icons"
86
style="font-size: 1em; line-height: normal; vertical-align: top;"
97
>email</CommonIcon
108
> Email
11-
</svelte:fragment>
9+
{/snippet}
1210
</Textfield>
1311
</div>
1412

1513
<script lang="ts">
1614
import Textfield from '@smui/textfield';
1715
import { Icon as CommonIcon } from '@smui/common';
1816
19-
let valueElementsLabel = '';
17+
let valueElementsLabel = $state('');
2018
</script>

‎packages/site/src/routes/demo/textfield/_Filled.svelte

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,42 @@
1-
<svelte:options runes={false} />
2-
31
<div class="columns margins">
42
<div>
53
<Textfield variant="filled" bind:value={valueA} label="Label">
6-
<HelperText slot="helper">Helper Text</HelperText>
4+
{#snippet helper()}
5+
<HelperText>Helper Text</HelperText>
6+
{/snippet}
77
</Textfield>
88

99
<pre class="status">Value: {valueA}</pre>
1010
</div>
1111
<div>
1212
<Textfield variant="filled" bind:value={valueB} label="Leading Icon">
13-
<Icon class="material-icons" slot="leadingIcon">event</Icon>
14-
<HelperText slot="helper">Helper Text</HelperText>
13+
{#snippet leadingIcon()}
14+
<Icon class="material-icons">event</Icon>
15+
{/snippet}
16+
{#snippet helper()}
17+
<HelperText>Helper Text</HelperText>
18+
{/snippet}
1519
</Textfield>
1620

1721
<pre class="status">Value: {valueB}</pre>
1822
</div>
1923
<div>
2024
<Textfield variant="filled" bind:value={valueC} label="Trailing Icon">
21-
<Icon class="material-icons" slot="trailingIcon">delete</Icon>
22-
<HelperText slot="helper">Helper Text</HelperText>
25+
{#snippet trailingIcon()}
26+
<Icon class="material-icons">delete</Icon>
27+
{/snippet}
28+
{#snippet helper()}
29+
<HelperText>Helper Text</HelperText>
30+
{/snippet}
2331
</Textfield>
2432

2533
<pre class="status">Value: {valueC}</pre>
2634
</div>
2735
<div>
2836
<Textfield invalid variant="filled" bind:value={valueD} label="Invalid">
29-
<HelperText slot="helper">Helper Text</HelperText>
37+
{#snippet helper()}
38+
<HelperText>Helper Text</HelperText>
39+
{/snippet}
3040
</Textfield>
3141

3242
<pre class="status">Value: {valueD}</pre>
@@ -38,8 +48,8 @@
3848
import Icon from '@smui/textfield/icon';
3949
import HelperText from '@smui/textfield/helper-text';
4050
41-
let valueA = '';
42-
let valueB = '';
43-
let valueC = '';
44-
let valueD = '';
51+
let valueA = $state('');
52+
let valueB = $state('');
53+
let valueC = $state('');
54+
let valueD = $state('');
4555
</script>

‎packages/site/src/routes/demo/textfield/_FixedSizeTextarea.svelte

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
<svelte:options runes={false} />
2-
31
<div class="margins">
42
<Textfield
53
textarea
@@ -9,13 +7,15 @@
97
input$cols={24}
108
input$resizable={false}
119
>
12-
<HelperText slot="helper">Helper Text</HelperText>
10+
{#snippet helper()}
11+
<HelperText>Helper Text</HelperText>
12+
{/snippet}
1313
</Textfield>
1414
</div>
1515

1616
<script lang="ts">
1717
import Textfield from '@smui/textfield';
1818
import HelperText from '@smui/textfield/helper-text';
1919
20-
let value = '';
20+
let value = $state('');
2121
</script>

‎packages/site/src/routes/demo/textfield/_FullWidth.svelte

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
<svelte:options runes={false} />
2-
31
<div class="margins">
42
<Textfield
53
style="width: 100%;"
64
helperLine$style="width: 100%;"
75
bind:value
86
label="Label"
97
>
10-
<HelperText slot="helper">Helper Text</HelperText>
8+
{#snippet helper()}
9+
<HelperText>Helper Text</HelperText>
10+
{/snippet}
1111
</Textfield>
1212
</div>
1313

1414
<script lang="ts">
1515
import Textfield from '@smui/textfield';
1616
import HelperText from '@smui/textfield/helper-text';
1717
18-
let value = '';
18+
let value = $state('');
1919
</script>

0 commit comments

Comments
 (0)