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

Fix binding bug

Browse source
This commit is contained in:
Richard O'flynn 2020-12-01 16:45:44 +00:00
commit de1c2d00eb
6 changed files with 65 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

6
COMPONENT_INDEX.md
View file

@ -2906,8 +2906,8 @@ 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 |
| light | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| selected | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to select the tile |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| title | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the selectable tile |
| value | <code>let</code> | No | <code>string</code> | <code>"value"</code> | Specify the value of the selectable tile |
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
@ -2936,9 +2936,11 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------- | :--------------- | :------- | :------------------ | --------------- | --------------------------- |
| :------------- | :--------------- | :------- | :------------------- | ------------------ | -------------------------------------------------------------- |
| selectedValues | <code>let</code> | Yes | <code>any[]</code> | <code>[]</code> | Specify the selected tile's |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile group |
| legend | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant throughout the group |
### Slots

22
docs/src/COMPONENT_API.json
View file

@ -8534,7 +8534,7 @@
"value": "false",
"isFunction": false,
"constant": false,
"reactive": false
"reactive": true
},
{
"name": "title",
@ -8768,6 +8768,16 @@
"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",
@ -8777,6 +8787,16 @@
"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": "{}" }],

12
docs/src/pages/components/SelectableTile.svx
View file

@ -16,21 +16,21 @@ components: ["SelectableTile", "SelectableTileGroup"]
<SelectableTile title="Option 2" value="2" selected>
Option 2
</SelectableTile>
<SelectableTile title="Option 3" value="3">
Option 3
<SelectableTile light title="Option 3" value="3">
Option 3 (light variant)
</SelectableTile>
</SelectableTileGroup>
### Light variant
<SelectableTileGroup legend="Select the options you require">
<SelectableTile light title="Option 1" value="option1" selected>
<SelectableTileGroup light legend="Select the options you require">
<SelectableTile title="Option 1" value="1" selected>
Option 1
</SelectableTile>
<SelectableTile light title="Option 2" value="2" selected>
<SelectableTile title="Option 2" value="2" selected>
Option 2
</SelectableTile>
<SelectableTile light title="Option 3" value="3">
<SelectableTile title="Option 3" value="3">
Option 3
</SelectableTile>
</SelectableTileGroup>

6
src/Tile/SelectableTile.svelte
View file

@ -32,9 +32,13 @@
import { getContext } from "svelte";
import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
const { update, selectedValues } = getContext("SelectableTileGroup");
const { update, selectedValues, _light } = getContext("SelectableTileGroup");
if (selected) {
update({ value, selected });
}
light = light || _light;
$: selected = $selectedValues.indexOf(value) > -1;
</script>

15
src/Tile/SelectableTileGroup.svelte
View file

@ -5,9 +5,15 @@
*/
export let selectedValues = [];
/** Set to `true` to disable the tile group */
export let disabled = false;
/** Specify the legend text */
export let legend = "";
/** Set to `true` to enable the light variant throughout the group */
export let light = false;
import { createEventDispatcher, setContext } from "svelte";
import { writable } from "svelte/store";
@ -15,6 +21,7 @@
const _selectedValues = writable(selectedValues);
setContext("SelectableTileGroup", {
_light: light,
selectedValues: _selectedValues,
update: ({ selected, value }) =>
_selectedValues.update((_) => {
@ -29,11 +36,15 @@
$: dispatch("select", $_selectedValues);
</script>
<fieldset class:bx--tile-group="{true}" {...$$restProps}>
<fieldset disabled="{disabled}" class:bx--tile-group="{true}" {...$$restProps}>
{#if legend}
<legend class:bx--label="{true}">{legend}</legend>
{/if}
<div>
<div
role="group"
aria-label="{$$props['aria-label'] || 'Selectable tiles'}"
data-selected="{selectedValues}"
>
<slot />
</div>
</fieldset>

12
types/Tile/SelectableTileGroup.d.ts vendored
View file

@ -7,11 +7,23 @@ export interface SelectableTileGroupProps extends svelte.JSX.HTMLAttributes<HTML
*/
selectedValues?: any[];
/**
* Set to `true` to disable the tile group
* @default false
*/
disabled?: boolean;
/**
* Specify the legend text
* @default ""
*/
legend?: string;
/**
* Set to `true` to enable the light variant throughout the group
* @default false
*/
light?: boolean;
}
export default class SelectableTileGroup {