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

Support fieldset disabled

Browse source
This commit is contained in:
Richard O'flynn 2020-12-01 17:46:49 +00:00
commit 95bfb720ea
5 changed files with 23 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

3
COMPONENT_INDEX.md
View file

@ -2924,11 +2924,12 @@ None.
| Event name | Type | Detail |
| :--------- | :-------- | :----- |
| change | forwarded | -- |
| keydown | forwarded | -- |
| click | forwarded | -- |
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
| keydown | forwarded | -- |
## `SelectableTileGroup`

5
docs/src/COMPONENT_API.json
View file

@ -8609,11 +8609,12 @@
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [
{ "type": "forwarded", "name": "change", "element": "input" },
{ "type": "forwarded", "name": "keydown", "element": "input" },
{ "type": "forwarded", "name": "click", "element": "label" },
{ "type": "forwarded", "name": "mouseover", "element": "label" },
{ "type": "forwarded", "name": "mouseenter", "element": "label" },
{ "type": "forwarded", "name": "mouseleave", "element": "label" },
{ "type": "forwarded", "name": "keydown", "element": "label" }
{ "type": "forwarded", "name": "mouseleave", "element": "label" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "label" }

17
src/Tile/SelectableTile.svelte
View file

@ -53,6 +53,15 @@
value="{value}"
name="{name}"
title="{title}"
on:change
on:change="{() => update({ value, selected: !selected })}"
on:keydown
on:keydown="{(e) => {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
update({ value, selected: !selected });
}
}}"
/>
<label
for="{id}"
@ -63,17 +72,9 @@
class:bx--tile--light="{light}"
{...$$restProps}
on:click
on:click|preventDefault="{() => update({ value, selected: !selected })}"
on:mouseover
on:mouseenter
on:mouseleave
on:keydown
on:keydown="{(e) => {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
update({ value, selected: !selected });
}
}}"
>
<span class:bx--tile__checkmark="{true}">
<CheckmarkFilled16

8
tests/SelectableTile.test.svelte
View file

@ -3,7 +3,13 @@
</script>
<SelectableTileGroup legend="Service pricing tiers">
<SelectableTile value="0" checked>Lite plan</SelectableTile>
<SelectableTile value="0" selected>Lite plan</SelectableTile>
<SelectableTile value="1">Standard plan</SelectableTile>
<SelectableTile light value="2">Plus plan</SelectableTile>
</SelectableTileGroup>
<SelectableTileGroup light legend="Service pricing tiers">
<SelectableTile value="0" selected>Lite plan</SelectableTile>
<SelectableTile value="1">Standard plan</SelectableTile>
<SelectableTile value="2">Plus plan</SelectableTile>
</SelectableTileGroup>

3
types/Tile/SelectableTile.d.ts vendored
View file

@ -62,10 +62,11 @@ export default class SelectableTile {
default: {};
};
$on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void;
$on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
$on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
$on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
$on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
$on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
$on(eventname: string, cb: (event: Event) => void): () => void;
}