fix(time-picker-select): change select to selectValue

This commit is contained in:
Eric Liu 2019-12-31 16:18:43 -08:00
commit be094b9096
3 changed files with 29 additions and 29 deletions

View file

@ -1,21 +1,21 @@
<script>
let className = undefined;
export { className as class };
export let value = '';
export let autofocus = false;
export let type = 'text';
export let small = false;
export let placeholder = '';
export let labelText = '';
export let closeButtonLabelText = 'Clear search input';
export let size = small ? 'sm' : 'xl';
export let light = false;
export let id = Math.random();
export let labelText = '';
export let light = false;
export let placeholder = '';
export let size = small ? 'sm' : 'xl';
export let small = false;
export let style = undefined;
export let type = 'text';
export let value = '';
import Search16 from 'carbon-icons-svelte/lib/Search16';
import Close16 from 'carbon-icons-svelte/lib/Close16';
import Close20 from 'carbon-icons-svelte/lib/Close20';
import Search16 from 'carbon-icons-svelte/lib/Search16';
import { cx } from '../../lib';
let inputRef = undefined;
@ -25,7 +25,7 @@
class={cx('--search', size && `--search--${size}`, light && '--search--light', className)}
{style}>
<Search16 class={cx('--search-magnifier')} />
<label for={id} class={cx('--label')}>{labelText}</label>
<label class={cx('--label')} for={id}>{labelText}</label>
<!-- svelte-ignore a11y-autofocus -->
<input
bind:this={inputRef}
@ -43,13 +43,13 @@
{placeholder} />
<button
type="button"
aria-label={closeButtonLabelText}
class={cx('--search-close', value === '' && '--search-close--hidden')}
on:click
on:click={() => {
value = '';
inputRef.focus();
}}
aria-label={closeButtonLabelText}>
}}>
<svelte:component this={size === 'xl' ? Close20 : Close16} />
</button>
</div>

View file

@ -1,19 +1,19 @@
<script>
let className = undefined;
export { className as class };
export let id = Math.random();
export let value = '';
export let labelText = '';
export let disabled = false;
export let hideLabel = false;
export let type = 'text';
export let id = Math.random();
export let invalid = false;
export let invalidText = 'Invalid time format.';
export let labelText = '';
export let light = false;
export let maxlength = 5;
export let pattern = '(1[012]|[1-9]):[0-5][0-9](\\s)?';
export let placeholder = 'hh=mm';
export let maxlength = 5;
export let invalidText = 'Invalid time format.';
export let invalid = false;
export let disabled = false;
export let light = false;
export let style = undefined;
export let type = 'text';
export let value = '';
import { cx } from '../../lib';
</script>

View file

@ -1,25 +1,25 @@
<script>
let className = undefined;
export { className as class };
export let id = Math.random();
export let value = '';
export let labelText = '';
export let disabled = false;
export let hideLabel = true;
export let iconDescription = 'Open list of options';
export let disabled = false;
export let id = Math.random();
export let labelText = '';
export let style = undefined;
export let value = '';
import { setContext } from 'svelte';
import { writable } from 'svelte/store';
import ChevronDownGlyph from 'carbon-icons-svelte/lib/ChevronDownGlyph';
import { cx } from '../../lib';
let selected = writable(value);
let selectedValue = writable(value);
setContext('TimePickerSelect', { selected });
setContext('TimePickerSelect', { selectedValue });
$: selected.set(value);
$: value = $selected;
$: selectedValue.set(value);
$: value = $selectedValue;
</script>
<div
@ -35,7 +35,7 @@
<select
class={cx('--select-input')}
on:change={({ target }) => {
selected.set(target.value);
selectedValue.set(target.value);
}}
{id}
{disabled}