mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor(textinput): forward events

Browse source
This commit is contained in:
Eric Liu 2019-12-29 19:17:30 -08:00
commit 29c7c471c3
2 changed files with 32 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/TextInput/PasswordInput.svelte
View file

@ -26,11 +26,17 @@
$: errorId = `error-${id}`; $: errorId = `error-${id}`;
</script> </script>
<div class={cx('--form-item', '--text-input-wrapper', '--password-input-wrapper')} {style}> <div
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--form-item', '--text-input-wrapper', '--password-input-wrapper', className)}
{style}>
{#if labelText} {#if labelText}
<label <label
for={id} class={cx('--label', hideLabel && '--visually-hidden', disabled && '--label--disabled')}
class={cx('--label', hideLabel && '--visually-hidden', disabled && '--label--disabled')}> for={id}>
{labelText} {labelText}
</label> </label>
{/if} {/if}
@ -44,16 +50,17 @@
<WarningFilled16 class={cx('--text-input__invalid-icon')} /> <WarningFilled16 class={cx('--text-input__invalid-icon')} />
{/if} {/if}
<input <input
class={cx('--text-input', '--password-input', light && '--text-input--light', invalid && '--text-input--invalid', className)}
on:click
on:change
on:input
on:input={event => {
value = event.target.value;
}}
data-invalid={invalid || undefined} data-invalid={invalid || undefined}
aria-invalid={invalid || undefined} aria-invalid={invalid || undefined}
aria-describedby={invalid ? errorId : undefined} aria-describedby={invalid ? errorId : undefined}
class={cx('--text-input', '--password-input', light && '--text-input--light', invalid && '--text-input--invalid')}
on:change
on:input
on:input={({ target }) => {
value = target.value;
}}
on:focus
on:blur
{id} {id}
{placeholder} {placeholder}
{type} {type}

23
src/components/TextInput/TextInput.svelte
View file

@ -20,7 +20,13 @@
$: errorId = `error-${id}`; $: errorId = `error-${id}`;
</script> </script>
<div class={cx('--form-item', '--text-input-wrapper')} {style}> <div
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--form-item', '--text-input-wrapper', className)}
{style}>
{#if labelText} {#if labelText}
<label <label
for={id} for={id}
@ -38,16 +44,17 @@
<WarningFilled16 class={cx('--text-input__invalid-icon')} /> <WarningFilled16 class={cx('--text-input__invalid-icon')} />
{/if} {/if}
<input <input
class={cx('--text-input', light && '--text-input--light', invalid && '--text-input--invalid', className)}
on:click
on:change
on:input
on:input={event => {
value = event.target.value;
}}
data-invalid={invalid || undefined} data-invalid={invalid || undefined}
aria-invalid={invalid || undefined} aria-invalid={invalid || undefined}
aria-describedby={invalid ? errorId : undefined} aria-describedby={invalid ? errorId : undefined}
class={cx('--text-input', light && '--text-input--light', invalid && '--text-input--invalid')}
on:change
on:input
on:input={({ target }) => {
value = target.value;
}}
on:focus
on:blur
{id} {id}
{placeholder} {placeholder}
{type} {type}