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:
Eric Liu 2019-12-20 09:09:55 -08:00
commit 71ddcfccc0
4 changed files with 64 additions and 30 deletions

View file

@ -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>