mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor(textarea): remove dispatch, forward events

Browse source
This commit is contained in:
Eric Liu 2019-12-29 19:13:35 -08:00
commit 77046a4959
1 changed files with 13 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/components/TextArea/TextArea.svelte
View file

@ -1,12 +1,12 @@
<script> <script>
let className = undefined; let className = undefined;
export { className as class }; export { className as class };
export let rows = 4;
export let cols = 50; export let cols = 50;
export let disabled = false; export let disabled = false;
export let id = Math.random(); export let id = Math.random();
export let labelText = ''; export let labelText = '';
export let placeholder = ''; export let placeholder = '';
export let rows = 4;
export let value = ''; export let value = '';
export let invalid = false; export let invalid = false;
export let invalidText = ''; export let invalidText = '';
@ -15,20 +15,17 @@
export let light = false; export let light = false;
export let style = undefined; export let style = undefined;
import { createEventDispatcher } from 'svelte';
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16'; import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
import { cx } from '../../lib'; import { cx } from '../../lib';
const dispatch = createEventDispatcher();
$: errorId = `error-${id}`; $: errorId = `error-${id}`;
</script> </script>
<div on:mouseover on:mouseenter on:mouseleave class={cx('--form-item')} {style}> <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item')} {style}>
{#if labelText && !hideLabel} {#if labelText && !hideLabel}
<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}
@ -42,32 +39,22 @@
<WarningFilled16 class={cx('--text-area__invalid-icon')} /> <WarningFilled16 class={cx('--text-area__invalid-icon')} />
{/if} {/if}
<textarea <textarea
on:click={event => {
if (!disabled) {
dispatch('click', event);
}
}}
on:change={event => {
if (!disabled) {
dispatch('change', event);
}
}}
on:input={event => {
value = event.target.value;
if (!disabled) {
dispatch('input', event);
}
}}
class={cx('--text-area', light && '--text-area--light', invalid && '--text-area--invalid', className)}
aria-invalid={invalid || undefined} aria-invalid={invalid || undefined}
aria-describedby={invalid ? errorId : undefined} aria-describedby={invalid ? errorId : undefined}
class={cx('--text-area', light && '--text-area--light', invalid && '--text-area--invalid', className)}
on:change
on:input
on:input={({ target }) => {
value = target.value;
}}
on:focus
on:blur
{disabled} {disabled}
{id} {id}
{cols} {cols}
{rows} {rows}
{value} {value}
{placeholder} {placeholder} />
{value} />
</div> </div>
{#if invalid} {#if invalid}
<div class={cx('--form-requirement')} id={errorId}>{invalidText}</div> <div class={cx('--form-requirement')} id={errorId}>{invalidText}</div>