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

fix(checkbox): fix two-way binding (#1042)

Browse source 
Fixes #967
This commit is contained in:
metonym 2022-01-26 19:04:32 -08:00 • committed by GitHub
commit 048ebc7b81
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 13 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
COMPONENT_INDEX.md
View file

@ -462,7 +462,7 @@ None.
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------- | | :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| group | <code>let</code> | Yes | <code>any[]</code> | <code>[]</code> | Specify the bound group | | group | <code>let</code> | Yes | <code>any[]</code> | <code>undefined</code> | Specify the bound group |
| checked | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Specify whether the checkbox is checked | | checked | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Specify whether the checkbox is checked |
| value | <code>let</code> | No | <code>any</code> | <code>""</code> | Specify the value of the checkbox | | value | <code>let</code> | No | <code>any</code> | <code>""</code> | Specify the value of the checkbox |
| indeterminate | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Specify whether the checkbox is indeterminate | | indeterminate | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Specify whether the checkbox is indeterminate |

1
docs/src/COMPONENT_API.json
View file

@ -735,7 +735,6 @@
"kind": "let", "kind": "let",
"description": "Specify the bound group", "description": "Specify the bound group",
"type": "any[]", "type": "any[]",
"value": "[]",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,

11
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

2
types/Checkbox/Checkbox.svelte.d.ts vendored
View file

@ -16,7 +16,7 @@ export interface CheckboxProps {
/** /**
* Specify the bound group * Specify the bound group
* @default [] * @default undefined
*/ */
group?: any[]; group?: any[];