mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 19:46:36 +00:00
Merge 7373aa30c5 into a9e63e0038
This commit is contained in:
Richard O'flynn
GitHub
commit
c91229999a
15 changed files with 352 additions and 63 deletions
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"total": 155,
|
||||
"total": 156,
|
||||
"components": [
|
||||
{
|
||||
"moduleName": "SkeletonText",
|
||||
|
|
@ -8563,7 +8563,7 @@
|
|||
"value": "false",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "title",
|
||||
|
|
@ -8638,11 +8638,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" }
|
||||
|
|
@ -8773,6 +8774,56 @@
|
|||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "fieldset" }
|
||||
},
|
||||
{
|
||||
"moduleName": "SelectableTileGroup",
|
||||
"filePath": "/src/Tile/SelectableTileGroup.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "selectedValues",
|
||||
"kind": "let",
|
||||
"description": "Specify the selected tile's",
|
||||
"type": "any[]",
|
||||
"value": "[]",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "disabled",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to disable the tile group",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "legend",
|
||||
"kind": "let",
|
||||
"description": "Specify the legend text",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "light",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to enable the light variant throughout the group",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
|
||||
"events": [{ "type": "dispatched", "name": "select" }],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "fieldset" }
|
||||
},
|
||||
{
|
||||
"moduleName": "TimePicker",
|
||||
"filePath": "/src/TimePicker/TimePicker.svelte",
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ components: ["TileGroup", "RadioTile"]
|
|||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
|
||||
### Default
|
||||
|
||||
<TileGroup legend="Service pricing tiers">
|
||||
|
|
@ -24,13 +25,13 @@ components: ["TileGroup", "RadioTile"]
|
|||
### Light variant
|
||||
|
||||
<TileGroup legend="Service pricing tiers">
|
||||
<RadioTile value="0" checked>
|
||||
<RadioTile light value="0" checked>
|
||||
Lite plan
|
||||
</RadioTile>
|
||||
<RadioTile value="1">
|
||||
<RadioTile light value="1">
|
||||
Standard plan
|
||||
</RadioTile>
|
||||
<RadioTile value="2">
|
||||
<RadioTile light value="2">
|
||||
Plus plan
|
||||
</RadioTile>
|
||||
</TileGroup>
|
||||
</TileGroup>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,36 @@
|
|||
---
|
||||
components: ["SelectableTile"]
|
||||
components: ["SelectableTile", "SelectableTileGroup"]
|
||||
---
|
||||
|
||||
<script>
|
||||
import { SelectableTile } from "carbon-components-svelte";
|
||||
import { SelectableTile, SelectableTileGroup } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
</script>
|
||||
|
||||
### Multi-selectable tiles
|
||||
### Default
|
||||
|
||||
<div role="group" aria-label="selectable tiles">
|
||||
<SelectableTile selected>
|
||||
Multi-select Tile
|
||||
<SelectableTileGroup legend="Select the options you require">
|
||||
<SelectableTile title="Option 1" value="option1" selected>
|
||||
Option 1
|
||||
</SelectableTile>
|
||||
<SelectableTile selected>
|
||||
Multi-select Tile
|
||||
<SelectableTile title="Option 2" value="2" selected>
|
||||
Option 2
|
||||
</SelectableTile>
|
||||
<SelectableTile>
|
||||
Multi-select Tile
|
||||
<SelectableTile light title="Option 3" value="3">
|
||||
Option 3 (light variant)
|
||||
</SelectableTile>
|
||||
</div>
|
||||
</SelectableTileGroup>
|
||||
|
||||
### Light variant
|
||||
|
||||
<div role="group" aria-label="selectable tiles">
|
||||
<SelectableTile light selected>
|
||||
Multi-select Tile
|
||||
<SelectableTileGroup light legend="Select the options you require">
|
||||
<SelectableTile title="Option 1" value="1" selected>
|
||||
Option 1
|
||||
</SelectableTile>
|
||||
<SelectableTile light selected>
|
||||
Multi-select Tile
|
||||
<SelectableTile title="Option 2" value="2" selected>
|
||||
Option 2
|
||||
</SelectableTile>
|
||||
<SelectableTile light>
|
||||
Multi-select Tile
|
||||
<SelectableTile title="Option 3" value="3">
|
||||
Option 3
|
||||
</SelectableTile>
|
||||
</div>
|
||||
</SelectableTileGroup>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,116 @@
|
|||
<script>
|
||||
import {
|
||||
SelectableTileGroup,
|
||||
SelectableTile,
|
||||
Button,
|
||||
} from "carbon-components-svelte";
|
||||
|
||||
let selectedValues = ["1"];
|
||||
let selectedValues2 = [];
|
||||
let selectedValues3 = ["1", "3"];
|
||||
let selectedValues3_control = [
|
||||
{ value: "1", selected: true },
|
||||
{ value: "2", selected: false },
|
||||
{ value: "3", selected: false },
|
||||
];
|
||||
</script>
|
||||
|
||||
<SelectableTileGroup
|
||||
bind:selectedValues
|
||||
legend="Select the options you require"
|
||||
>
|
||||
<SelectableTile title="Option 1" value="1">Option 1</SelectableTile>
|
||||
<SelectableTile title="Option 2" value="2">Option 2</SelectableTile>
|
||||
<SelectableTile title="Option 3" value="3">
|
||||
Option 3 (light variant)
|
||||
</SelectableTile>
|
||||
</SelectableTileGroup>
|
||||
|
||||
<div>
|
||||
{selectedValues.join(', ')}
|
||||
|
||||
<Button
|
||||
on:click="{() => {
|
||||
selectedValues = [];
|
||||
}}"
|
||||
>
|
||||
Reset selectedValues
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<SelectableTileGroup
|
||||
bind:selectedValues="{selectedValues2}"
|
||||
legend="Select the options you require"
|
||||
>
|
||||
<SelectableTile title="Option 1" value="1">Option 1</SelectableTile>
|
||||
<SelectableTile title="Option 2" value="2" selected>Option 2</SelectableTile>
|
||||
<SelectableTile title="Option 3" selected value="3">
|
||||
Option 3 (light variant)
|
||||
</SelectableTile>
|
||||
</SelectableTileGroup>
|
||||
|
||||
<div>
|
||||
{selectedValues2.join(', ')}
|
||||
|
||||
<Button
|
||||
on:click="{() => {
|
||||
selectedValues2 = [];
|
||||
}}"
|
||||
>
|
||||
Reset selectedValues2
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<SelectableTileGroup
|
||||
bind:selectedValues="{selectedValues3}"
|
||||
legend="Select the options you require"
|
||||
>
|
||||
{#each selectedValues3_control as item}
|
||||
<SelectableTile value="{item.value}" selected="{item.selected}">
|
||||
{item.value}
|
||||
</SelectableTile>
|
||||
{/each}
|
||||
</SelectableTileGroup>
|
||||
|
||||
<div>
|
||||
{selectedValues3.join(', ')}
|
||||
|
||||
<Button
|
||||
on:click="{() => {
|
||||
selectedValues3_control = selectedValues3_control.map((item) => {
|
||||
return { ...item, selected: false };
|
||||
});
|
||||
}}"
|
||||
>
|
||||
Reset selectedValues3
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<h2>#key fix</h2>
|
||||
|
||||
<SelectableTileGroup
|
||||
bind:selectedValues="{selectedValues3}"
|
||||
legend="Select the options you require"
|
||||
>
|
||||
{#key selectedValues3_control}
|
||||
{#each selectedValues3_control as item}
|
||||
<SelectableTile value="{item.value}" selected="{item.selected}">
|
||||
{item.value}
|
||||
</SelectableTile>
|
||||
{/each}
|
||||
{/key}
|
||||
</SelectableTileGroup>
|
||||
|
||||
<div>
|
||||
{selectedValues3.join(', ')}
|
||||
|
||||
<Button
|
||||
on:click="{() => {
|
||||
selectedValues3_control = selectedValues3_control.map((item) => {
|
||||
return { ...item, selected: false };
|
||||
});
|
||||
}}"
|
||||
>
|
||||
Reset selectedValues3
|
||||
</Button>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue