File size: 1,026 Bytes
377fc96 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <script lang="ts">
// One onboarding question: options as chips, multi-select where the question allows it.
import type { ProfileAnswers, ProfileQuestion } from './core/api';
export let question: ProfileQuestion;
export let profile: ProfileAnswers;
export let onChange: (key: ProfileQuestion['key'], value: string | string[] | null) => void;
$: current = profile[question.key];
const selected = (value: string) => (Array.isArray(current) ? current.includes(value) : current === value);
function pick(value: string) {
if (!question.multi) {
onChange(question.key, current === value ? null : value);
return;
}
const list = Array.isArray(current) ? [...current] : [];
const i = list.indexOf(value);
if (i >= 0) list.splice(i, 1);
else list.push(value);
onChange(question.key, list);
}
</script>
<div class="chips">
{#each question.options as o}
<button class="chip" class:on={selected(o.value)} on:click={() => pick(o.value)}>{o.label}</button>
{/each}
</div>
|