fix(date-range-field demo): key each segments by index, not seg.part

Soma's segments array uses `'literal'` as the part for every visual
separator (e.g. the `/` between dd / mm / yyyy). Keying the {#each}
by `seg.part` produced duplicate keys → `each_key_duplicate` runtime
error at the second `literal` separator. Switch to positional key
`(i)` — segments don't reorder, so positional is stable and correct.

Snippet template strings updated to match so the visible code in
the Live tab reflects the right pattern.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
active-uix
dev 5 months ago
parent 754754d4a4
commit 18edecba5b

@ -95,14 +95,14 @@
' <DateRangeField.Label>Period</DateRangeField.Label>',
' <DateRangeField.Input type="start">',
' {#snippet children({ segments })}',
' {#each segments as seg}',
' {#each segments as seg, i (i)}',
' <DateField.Segment part={seg.part}>{seg.value}</DateField.Segment>',
' {/each}',
' {/snippet}',
' </DateRangeField.Input>',
' <DateRangeField.Input type="end">',
' {#snippet children({ segments })}',
' {#each segments as seg}',
' {#each segments as seg, i (i)}',
' <DateField.Segment part={seg.part}>{seg.value}</DateField.Segment>',
' {/each}',
' {/snippet}',
@ -137,14 +137,14 @@
' <DateRangeField.Label>Period</DateRangeField.Label>',
' <DateRangeField.Input type="start">',
' {#snippet children({ segments })}',
' {#each segments as seg}',
' {#each segments as seg, i (i)}',
' <DateRangeField.Segment part={seg.part}>{seg.value}</DateRangeField.Segment>',
' {/each}',
' {/snippet}',
' </DateRangeField.Input>',
' <DateRangeField.Input type="end">',
' {#snippet children({ segments })}',
' {#each segments as seg}',
' {#each segments as seg, i (i)}',
' <DateRangeField.Segment part={seg.part}>{seg.value}</DateRangeField.Segment>',
' {/each}',
' {/snippet}',
@ -194,14 +194,14 @@
<DateRangeField.Label>Period</DateRangeField.Label>
<DateRangeField.Input type="start">
{#snippet children({ segments })}
{#each segments as seg (seg.part)}
{#each segments as seg, i (i)}
<DateRangeField.Segment part={seg.part}>{seg.value}</DateRangeField.Segment>
{/each}
{/snippet}
</DateRangeField.Input>
<DateRangeField.Input type="end">
{#snippet children({ segments })}
{#each segments as seg (seg.part)}
{#each segments as seg, i (i)}
<DateRangeField.Segment part={seg.part}>{seg.value}</DateRangeField.Segment>
{/each}
{/snippet}

Loading…
Cancel
Save

Powered by TurnKey Linux.