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

Enhance Checkbox to use bind:group

Browse source
This commit is contained in:
Gregor Wassmann 2021-12-27 23:31:56 +01:00
commit ede294d553
6 changed files with 54 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

3
COMPONENT_INDEX.md
View file

@ -462,8 +462,9 @@ None.
| 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 |
| group | <code>let</code> | Yes | <code>any[]</code> | <code>[]</code> | Specify the bound group |
| checked | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Specify whether the checkbox is checked |
| value | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the value of the checkbox |
| value | <code>let</code> | No | <code>string &#124; 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 |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| readonly | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the checkbox to be read-only |

13
docs/src/COMPONENT_API.json
View file

@ -712,7 +712,7 @@
"name": "value",
"kind": "let",
"description": "Specify the value of the checkbox",
"type": "string",
"type": "string | any",
"value": "\"\"",
"isFunction": false,
"isFunctionDeclaration": false,
@ -730,6 +730,17 @@
"constant": false,
"reactive": true
},
{
"name": "group",
"kind": "let",
"description": "Specify the bound group",
"type": "any[]",
"value": "[]",
"isFunction": false,
"isFunctionDeclaration": false,
"constant": false,
"reactive": true
},
{
"name": "indeterminate",
"kind": "let",

8
docs/src/pages/components/Checkbox.svx
View file

@ -25,4 +25,10 @@
### Skeleton
<Checkbox skeleton />
<Checkbox skeleton />
### Multiple
Bind a selection list to multiple checkboxes.
<FileSource src="/framed/Checkbox/MultipleCheckboxes" />

15
docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte Normal file
View file

@ -0,0 +1,15 @@
<script>
import { Checkbox } from "carbon-components-svelte";
let options = ["Apple", "Banana", "Coconut"];
let selection = options.slice(0, 2);
</script>
{#each options as option}
<Checkbox bind:group="{selection}" labelText="{option}" value="{option}" />
{/each}
<div style="margin: var(--cds-layout-01) 0">
Selected options:
<strong>{selection.join(", ")}</strong>
</div>

12
src/Checkbox/Checkbox.svelte
View file

@ -3,12 +3,21 @@
* @event {boolean} check
*/
/** Specify the value of the checkbox */
/**
* Specify the value of the checkbox
* @type {string | any}
*/
export let value = "";
/** Specify whether the checkbox is checked */
export let checked = false;
/**
* Specify the bound group
* @type {any[]}
*/
export let group = [];
/** Specify whether the checkbox is indeterminate */
export let indeterminate = false;
@ -71,6 +80,7 @@
>
<input
bind:this="{ref}"
bind:group
type="checkbox"
value="{value}"
checked="{checked}"

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

@ -6,7 +6,7 @@ export interface CheckboxProps {
* Specify the value of the checkbox
* @default ""
*/
value?: string;
value?: string | any;
/**
* Specify whether the checkbox is checked
@ -14,6 +14,12 @@ export interface CheckboxProps {
*/
checked?: boolean;
/**
* Specify the bound group
* @default []
*/
group?: any[];
/**
* Specify whether the checkbox is indeterminate
* @default false