All files / src/button-toggle ButtonToggle.svelte

55.47% Statements 147/265
48.05% Branches 74/154
40.38% Functions 21/52
60.26% Lines 138/229

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59      1x 1x 1x 1x 1x     9x 9x 9x 9x                                                                                          
<div {disabled} class="button-group button-toggle {className}" class:round bind:this="{el}">
	{#each items as item, idx}
		<label
			{disabled}
			class="button button-normal"
			class:selected="{value === item.value}"
			class:button-has-text="{item.name}"
			on:touchstart="{onmousedown}"
			on:mousedown="{onmousedown}">
				{#if item.icon}
					<Icon name="{item.icon}"/>
				{/if}
				{item.name || ''}
				<input
					{disabled}
					id="{idx === 0 && id ? id : undefined}"
					type="radio"
					name="{name}"
					checked="{item.value === value}"
					value="{item.value}"
					on:change="{e => onchange(e, item)}">
		</label>
	{/each}
</div>
 
<script>
import { createEventDispatcher } from 'svelte';
import { uuid } from '../util';
import { Icon } from '../icon';
 
export let disabled = undefined;
export let round = undefined;	// round button
export let items = '';
export let id = '';
export let name = uuid();
export let value = '';
let className = '';
export { className as class };
 
const dispatch = createEventDispatcher();
let el;

function onmousedown (e) {
	const btn = e.target.querySelector('input');
	if (btn === document.activeElement || btn.checked) return;
	if (btn) {
		e.preventDefault();
		btn.focus();
		btn.click();
	}
}
 
function onchange (e, button) {
	value = button.value;
	dispatch('change', value);
}
 
</script>