feat(components): add ListBox

Closes #88
This commit is contained in:
Eric Liu 2019-12-30 07:45:18 -08:00
commit 76d7dc5319
9 changed files with 190 additions and 0 deletions

View file

@ -0,0 +1,33 @@
<script>
let className = undefined;
export { className as class };
export let size = undefined;
export let type = 'default';
export let disabled = false;
export let invalid = false;
export let invalidText = '';
export let open = false;
export let light = false;
export let style = undefined;
import { cx } from '../../lib';
</script>
<div
role="listbox"
tabindex="-1"
data-invalid={invalid || undefined}
class={cx('--list-box', size && `--list-box--${size}`, type === 'inline' && '--list-box--inline', disabled && '--list-box--disabled', open && '--list-box--expanded', light && '--list-box--light', className)}
on:keydown
on:keydown={event => {
if (event.key === 'Escape') {
event.stopPropagation();
}
}}
on:click|preventDefault|stopPropagation
{style}>
<slot />
</div>
{#if invalid}
<div class={cx('--form-requirement')}>{invalidText}</div>
{/if}