mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-21 20:59:20 +00:00
Code Issues Projects Releases Packages Wiki Activity

breaking(checkbox): use group to determine if checked only if type is an array

Browse source 
Potential solution to #967
This commit is contained in:
Eric Liu 2022-01-25 21:10:48 -08:00
commit 0ac66b4857
1 changed files with 11 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/Checkbox/Checkbox.svelte
View file

@ -16,7 +16,7 @@
* Specify the bound group * Specify the bound group
* @type {any[]} * @type {any[]}
*/ */
export let group = []; export let group = undefined;
/** Specify whether the checkbox is indeterminate */ /** Specify whether the checkbox is indeterminate */
export let indeterminate = false; export let indeterminate = false;
@ -59,6 +59,8 @@
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
$: useGroup = Array.isArray(group);
$: checked = useGroup ? group.includes(value) : checked;
$: dispatch("check", checked); $: dispatch("check", checked);
</script> </script>
@ -85,7 +87,7 @@
bind:this="{ref}" bind:this="{ref}"
type="checkbox" type="checkbox"
value="{value}" value="{value}"
checked="{checked || group.includes(value)}" checked="{checked}"
disabled="{disabled}" disabled="{disabled}"
id="{id}" id="{id}"
indeterminate="{indeterminate}" indeterminate="{indeterminate}"
@ -94,10 +96,13 @@
readonly="{readonly}" readonly="{readonly}"
class:bx--checkbox="{true}" class:bx--checkbox="{true}"
on:change="{() => { on:change="{() => {
checked = !checked; if (useGroup) {
group = group.includes(value) group = group.includes(value)
? group.filter((_value) => _value !== value) ? group.filter((_value) => _value !== value)
: [...group, value]; : [...group, value];
} else {
checked = !checked;
}
}}" }}"
on:change on:change
on:blur on:blur