All files / src/button Button.svelte

61.6% Statements 146/237
63.35% Branches 83/131
36.53% Functions 19/52
66.32% Lines 130/196

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      3x 3x 3x 3x             2x         2x   2x     2x 2x     2x 2x 2x     2x 2x 2x             2x       2x               2x
<button
	type="{submit ? 'submit' : 'button'}"
	bind:this="{_this}"
 
	class="button {className}"
	class:button-normal="{!link && !text && !outline}"
	class:button-outline="{outline}"
	class:button-link="{link}"
	class:button-text="{text}"
	class:button-has-text="{$$slots.default}"
	class:round
	class:success
	class:warning
	class:danger
	class:active="{touching}"
	{...props}
 
	on:focus
	on:keydown
	on:mousedown
	on:touchstart="{() => touching = true}"
	on:touchend="{() => touching = false}"
	on:click>
 
	{#if icon}<Icon name="{icon}"/>{/if}
	<slot></slot>
</button>
<script>
impIort { Icon } from '../icon';
import { pluck } from '../util';
 
export let _this = undefined;
I
export let success = false;
export let warning = false;
export let danger = false;
export let submit = false;

export let outline = false;		// button without background, but with border
export let link = false;		// looks like a link, get's colored underline on hover
export let text = false;		// looks like normal text, but like a button on hover
export let icon = undefined;	// name of the icon
export let round = undefined;	// round button
 
let className = '';
export { className as class };
 
let touching = false;
 
$:props = pluck($$props, ['id', 'title', 'disabled', 'form', 'aria-pressed']);
 
 
</script>