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

chore: lift components folder

Browse source
This commit is contained in:
Eric Liu 2020-07-19 09:06:08 -07:00
commit 2200b29b92
301 changed files with 57 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,76 +0,0 @@
<script>
export let type = "";
export let value = "";
export let placeholder = "";
export let light = false;
export let disabled = false;
export let id = "ccs-" + Math.random().toString(36);
export let name = undefined;
export let helperText = "";
export let labelText = "";
export let hideLabel = false;
export let invalid = false;
export let invalidText = "";
export let ref = null;
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
$: errorId = `error-${id}`;
</script>
<div
class:bx--form-item={true}
class:bx--text-input-wrapper={true}
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
{#if labelText}
<label
for={id}
class:bx--label={true}
class:bx--visually-hidden={hideLabel}
class:bx--label--disabled={disabled}>
{labelText}
</label>
{/if}
{#if helperText}
<div
class:bx--form__helper-text={true}
class:bx--form__helper-text--disabled={disabled}>
{helperText}
</div>
{/if}
<div
data-invalid={invalid || undefined}
class:bx--text-input__field-wrapper={true}>
{#if invalid}
<WarningFilled16 class="bx--text-input__invalid-icon" />
{/if}
<input
bind:this={ref}
data-invalid={invalid || undefined}
aria-invalid={invalid || undefined}
aria-describedby={invalid ? errorId : undefined}
{disabled}
{id}
{name}
{placeholder}
{type}
{value}
class:bx--text-input={true}
class:bx--text-input--light={light}
class:bx--text-input--invalid={invalid}
on:change
on:input
on:input={({ target }) => {
value = target.value;
}}
on:focus
on:blur />
</div>
{#if invalid}
<div class:bx--form-requirement={true} id={errorId}>{invalidText}</div>
{/if}
</div>