From de1c2d00eb861b556883f72536baf599d5b6d8b4 Mon Sep 17 00:00:00 2001 From: Richard O'flynn Date: Tue, 1 Dec 2020 16:45:44 +0000 Subject: [PATCH] Fix binding bug --- COMPONENT_INDEX.md | 12 ++++++----- docs/src/COMPONENT_API.json | 22 +++++++++++++++++++- docs/src/pages/components/SelectableTile.svx | 12 +++++------ src/Tile/SelectableTile.svelte | 8 +++++-- src/Tile/SelectableTileGroup.svelte | 15 +++++++++++-- types/Tile/SelectableTileGroup.d.ts | 12 +++++++++++ 6 files changed, 65 insertions(+), 16 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 28eeb03c..c4b3313b 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -2906,8 +2906,8 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- | | ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| light | let | Yes | boolean | false | Set to `true` to enable the light variant | | selected | let | Yes | boolean | false | Set to `true` to select the tile | -| light | let | No | boolean | false | Set to `true` to enable the light variant | | title | let | No | string | "title" | Specify the title of the selectable tile | | value | let | No | string | "value" | Specify the value of the selectable tile | | tabindex | let | No | string | "0" | Specify the tabindex | @@ -2935,10 +2935,12 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------- | :--------------- | :------- | :------------------ | --------------- | --------------------------- | -| selectedValues | let | Yes | any[] | [] | Specify the selected tile's | -| legend | let | No | string | "" | Specify the legend text | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------- | :--------------- | :------- | :------------------- | ------------------ | -------------------------------------------------------------- | +| selectedValues | let | Yes | any[] | [] | Specify the selected tile's | +| disabled | let | No | boolean | false | Set to `true` to disable the tile group | +| legend | let | No | string | "" | Specify the legend text | +| light | let | No | boolean | false | Set to `true` to enable the light variant throughout the group | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 64bd802d..64296c8a 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -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": "{}" }], diff --git a/docs/src/pages/components/SelectableTile.svx b/docs/src/pages/components/SelectableTile.svx index 1bea70db..444751a5 100644 --- a/docs/src/pages/components/SelectableTile.svx +++ b/docs/src/pages/components/SelectableTile.svx @@ -16,21 +16,21 @@ components: ["SelectableTile", "SelectableTileGroup"] Option 2 - - Option 3 + + Option 3 (light variant) ### Light variant - - + + Option 1 - + Option 2 - + Option 3 diff --git a/src/Tile/SelectableTile.svelte b/src/Tile/SelectableTile.svelte index 8a734259..4b0ba3ad 100644 --- a/src/Tile/SelectableTile.svelte +++ b/src/Tile/SelectableTile.svelte @@ -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"); - update({ value, selected }); + if (selected) { + update({ value, selected }); + } + + light = light || _light; $: selected = $selectedValues.indexOf(value) > -1; diff --git a/src/Tile/SelectableTileGroup.svelte b/src/Tile/SelectableTileGroup.svelte index e580a8a0..15257388 100644 --- a/src/Tile/SelectableTileGroup.svelte +++ b/src/Tile/SelectableTileGroup.svelte @@ -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); -
+
{#if legend} {legend} {/if} -
+
diff --git a/types/Tile/SelectableTileGroup.d.ts b/types/Tile/SelectableTileGroup.d.ts index 7f6ea0cc..1418c8a0 100644 --- a/types/Tile/SelectableTileGroup.d.ts +++ b/types/Tile/SelectableTileGroup.d.ts @@ -7,11 +7,23 @@ export interface SelectableTileGroupProps extends svelte.JSX.HTMLAttributes