Use custom logic

This commit is contained in:
Gregor Wassmann 2021-12-28 22:57:42 +01:00
commit 1aa22d2522
2 changed files with 12 additions and 2 deletions

View file

@ -656,4 +656,4 @@
"path": "carbon-components-svelte/src/UnorderedList/UnorderedList.svelte" "path": "carbon-components-svelte/src/UnorderedList/UnorderedList.svelte"
} }
} }
} }

View file

@ -57,6 +57,16 @@
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
$: dispatch("check", checked); $: dispatch("check", checked);
$: checked = group.indexOf(value) >= 0;
const updateGroup = () => {
if (checked) {
group = [...group, value];
} else {
group.splice(group.indexOf(value), 1);
group = group;
}
};
</script> </script>
<!-- svelte-ignore a11y-mouse-events-have-key-events --> <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@ -80,7 +90,6 @@
> >
<input <input
bind:this="{ref}" bind:this="{ref}"
bind:group
type="checkbox" type="checkbox"
value="{value}" value="{value}"
checked="{checked}" checked="{checked}"
@ -94,6 +103,7 @@
on:change="{() => { on:change="{() => {
checked = !checked; checked = !checked;
}}" }}"
on:change="{updateGroup}"
on:blur on:blur
/> />
<label for="{id}" title="{title}" class:bx--checkbox-label="{true}"> <label for="{id}" title="{title}" class:bx--checkbox-label="{true}">