Merge pull request #4 from IBM/develop

refactor(text-area): update bound value on input
This commit is contained in:
Eric Liu 2019-12-15 15:33:21 -08:00 committed by GitHub
commit 5c1237f2e4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 36 deletions

View file

@ -1,17 +1,11 @@
# carbon-components-svelte # carbon-components-svelte
> 🚧🚧🚧 UNDER CONSTRUCTION > 🚧 UNDER CONSTRUCTION
> Svelte implementation of the Carbon Design System > Svelte implementation of the Carbon Design System
> 🚧🚧🚧
## [Storybook](https://ibm.github.io/carbon-components-svelte) ## [Storybook](https://ibm.github.io/carbon-components-svelte)
## Getting Started
[Placeholder]
## Supported Components ## Supported Components
Currently, the following components are supported: Currently, the following components are supported:

View file

@ -1,7 +1,7 @@
import { withKnobs, text, select, boolean } from '@storybook/addon-knobs'; import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
import Component from './RadioButton.Story.svelte'; import Component from './RadioButton.Story.svelte';
export default { title: 'Radio Button', decorators: [withKnobs] }; export default { title: 'RadioButton', decorators: [withKnobs] };
const labelPositions = { const labelPositions = {
'Left (left)': 'left', 'Left (left)': 'left',

View file

@ -4,13 +4,13 @@
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 = undefined; export let labelText = '';
export let placeholder = ''; export let placeholder = '';
export let rows = 4; export let rows = 4;
export let value = undefined; export let value = '';
export let invalid = false; export let invalid = false;
export let invalidText = undefined; export let invalidText = '';
export let helperText = undefined; export let helperText = '';
export let hideLabel = false; export let hideLabel = false;
export let light = false; export let light = false;
export let props = {}; export let props = {};
@ -33,24 +33,6 @@
invalid && '--text-area--invalid', invalid && '--text-area--invalid',
className className
); );
function handleClick(event) {
if (!disabled) {
dispatch('click', event);
}
}
function handleChange(event) {
if (!disabled) {
dispatch('change', event);
}
}
function handleInput(event) {
if (!disabled) {
dispatch('input', event);
}
}
</script> </script>
<div class={cx('--form-item')}> <div class={cx('--form-item')}>
@ -66,12 +48,22 @@
{/if} {/if}
<textarea <textarea
{...props} {...props}
on:click on:click={event => {
on:click={handleClick} if (!disabled) {
on:change dispatch('click', event);
on:change={handleChange} }
on:input }}
on:input={handleInput} on:change={event => {
if (!disabled) {
dispatch('change', event);
}
}}
on:input={event => {
value = event.target.value;
if (!disabled) {
dispatch('input', event);
}
}}
class={_textAreaClass} class={_textAreaClass}
aria-invalid={invalid || undefined} aria-invalid={invalid || undefined}
aria-describedby={invalid ? errorId : undefined} aria-describedby={invalid ? errorId : undefined}