30 lines
791 B
Svelte
30 lines
791 B
Svelte
<script lang="ts">
|
|
import type { Character } from '$lib/data/character';
|
|
import type { ClassValue } from 'svelte/elements';
|
|
import Pick from './Pick.svelte';
|
|
import CharaIcon from './CharaIcon.svelte';
|
|
|
|
interface Props {
|
|
id: string;
|
|
characters: Character[] | null;
|
|
value: Character | undefined;
|
|
class?: ClassValue | null;
|
|
required?: boolean;
|
|
}
|
|
|
|
let { id, characters, value = $bindable(), class: className, required = false }: Props = $props();
|
|
|
|
const charas = $derived(characters ?? []);
|
|
|
|
const key = (v: Character) => ({ id: v.chara_id, name: v.name });
|
|
</script>
|
|
|
|
<Pick {id} items={charas} {key} bind:value class={className} {required}>
|
|
{#snippet option(c: Character)}
|
|
<span>
|
|
<CharaIcon chara_id={c.chara_id} size={32} />
|
|
{c.name}
|
|
</span>
|
|
{/snippet}
|
|
</Pick>
|