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(radio-button-group): add name and required props (#1037)

Browse source 
Fixes #1036
This commit is contained in:
brunnerh 2023-10-01 19:14:53 +02:00 • committed by GitHub
commit 24e2a8874f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 98 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/RadioButton/RadioButton.svelte
View file

@ -26,22 +26,28 @@
/** Set an id for the input element */
export let id = "ccs-" + Math.random().toString(36);
/** Specify a name attribute for the radio button input */
export let name = "";
/**
* Specify a name attribute for the radio button input
* @type {string}
*/
export let name = undefined;
/** Obtain a reference to the input HTML element */
export let ref = null;
import { getContext } from "svelte";
import { writable } from "svelte/store";
import { readable } from "svelte/store";
const ctx = getContext("RadioButtonGroup");
const selectedValue = ctx
? ctx.selectedValue
: writable(checked ? value : undefined);
const { add, update, selectedValue, groupName, groupRequired } = getContext(
"RadioButtonGroup"
) ?? {
groupName: readable(undefined),
groupRequired: readable(undefined),
selectedValue: readable(checked ? value : undefined),
};
if (ctx) {
ctx.add({ id, checked, disabled, value });
if (add) {
add({ id, checked, disabled, value });
}
$: checked = $selectedValue === value;
@ -56,16 +62,16 @@
bind:this="{ref}"
type="radio"
id="{id}"
name="{name}"
name="{$groupName ?? name}"
checked="{checked}"
disabled="{disabled}"
required="{required}"
required="{$groupRequired ?? required}"
value="{value}"
class:bx--radio-button="{true}"
on:change
on:change="{() => {
if (ctx) {
ctx.update(value);
if (update) {
update(value);
}
}}"
/>