Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778<script lang="ts"> import Field from "$lib/components/ui/Field.svelte"; import Input from "$lib/components/ui/Input.svelte"; import Radio from "$lib/components/ui/Radio.svelte";
interface Props { name: string; description: string; knots: string[]; knot: string; onName: (v: string) => void; onDescription: (v: string) => void; onKnot: (v: string) => void; disabled?: boolean; }
let { name, description, knots, knot, onName, onDescription, onKnot, disabled = false }: Props = $props();
// mirror knot through local state for Radio bind:group let selectedKnot = $state<string>(); $effect(() => { selectedKnot = knot; }); $effect(() => { if (selectedKnot !== undefined && selectedKnot !== knot) onKnot(selectedKnot); });
const groupId = $props.id();</script>
<div class="flex flex-col gap-4" class:pointer-events-none={disabled} class:opacity-50={disabled} aria-disabled={disabled}> <Field label="Name"> {#snippet children({ id })} <Input {id} value={name} maxlength={100} {disabled} oninput={(event) => onName(event.currentTarget.value)} /> {/snippet} </Field> <Field label="Description"> {#snippet children({ id })} <Input {id} value={description} maxlength={140} {disabled} oninput={(event) => onDescription(event.currentTarget.value)} /> {/snippet} </Field> <Field label="Select a knot to migrate into"> <div class="flex flex-col gap-2 typography-paragraph-small"> {#each knots as option (option)} <Radio bind:group={selectedKnot} value={option} name={groupId} {disabled} >{option}</Radio > {/each} </div> </Field></div>