mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
fix(time-picker-select): change select to selectValue
This commit is contained in:
parent
0ea98b1447
commit
be094b9096
3 changed files with 29 additions and 29 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue