mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 19:01:05 +00:00
feat(tile): complete RadioTile
Closes #34 - Add Tile to list of supported components - Make RadioTile composable as a "child" component
This commit is contained in:
parent
1d66a8b127
commit
71ddcfccc0
4 changed files with 64 additions and 30 deletions
|
@ -1,12 +1,50 @@
|
|||
<script>
|
||||
let className = undefined;
|
||||
export { className as class };
|
||||
export let defaultSelected = { value: undefined };
|
||||
export let disabled = false;
|
||||
export let legend = '';
|
||||
export let style = undefined;
|
||||
|
||||
import { createEventDispatcher, setContext } from 'svelte';
|
||||
import { writable } from 'svelte/store';
|
||||
import { cx } from '../../lib';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
let tiles = [];
|
||||
let selected = writable(defaultSelected);
|
||||
|
||||
setContext('TileGroup', {
|
||||
selected,
|
||||
addTile: tile => {
|
||||
tiles = [...tiles, tile];
|
||||
},
|
||||
updateSelected: tile => {
|
||||
selected.set(tile);
|
||||
}
|
||||
});
|
||||
|
||||
$: {
|
||||
const checkedTiles = tiles.filter(tile => tile.checked);
|
||||
|
||||
if (checkedTiles.length > 1) {
|
||||
console.warn('Multiple RadioTiles cannot be checked.');
|
||||
|
||||
if (defaultSelected.value) {
|
||||
console.warn('Using `defaultSelected`:', defaultSelected);
|
||||
} else {
|
||||
console.warn('Using `RadioTile`:', checkedTiles[0]);
|
||||
selected.set(checkedTiles[0]);
|
||||
}
|
||||
} else if (checkedTiles.length === 1) {
|
||||
selected.set(checkedTiles[0]);
|
||||
tiles = [];
|
||||
}
|
||||
|
||||
defaultSelected = $selected;
|
||||
dispatch('select', $selected);
|
||||
}
|
||||
|
||||
const _class = cx('--tile-group', className);
|
||||
</script>
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue