Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixing two-way binding for inputs fixes #237 #255

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fixing two-way binding for inputs fixes #237 #255

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
36 changes: 18 additions & 18 deletions agnostic-svelte/src/lib/components/Input/Input.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -309,7 +309,7 @@ borders that visually conflict. */
}

</style>

<script>
// Looks like the way to propogate boilerplate events is to
// just declare in template like on:blur on:focus and so on
Expand All @@ -333,14 +333,16 @@ borders that visually conflict. */
export let isUnderlinedWithBackground = false;
export let isUnderlined = false;
export let size = "";

export let value = "";
// Consumer can pass any valid html5 input type. Default is text
export let type = 'text';

$: if (!value) value = "";
$: inputType = type;

function typeAction(node) {
node.type = type;
}

$: labelClasses = [
"label",
isInvalid ? "label-error" : "",
Expand All @@ -349,7 +351,7 @@ borders that visually conflict. */
isLabelHidden ? "screenreader-only" : "",
labelCss ? labelCss : "",
].filter(c => c).join(" ");

$: inputClasses = [
isSkinned ? "input" : "input-base",
isRounded ? "input-rounded" : "",
Expand All @@ -363,15 +365,15 @@ borders that visually conflict. */
css ? css : "",
size ? `input-${size}` : "",
].filter(c => c).join(" ");

$: invalidClasses = () => {
return size ? `field-error-${size}` : "field-error";
};

$: helpClasses = () => {
return size ? `field-help-${size}` : "field-help";
};

$: addonContainerClasses = () => "input-addon-container";
</script>
<div class="w-100">
Expand All @@ -383,37 +385,36 @@ borders that visually conflict. */
on:blur
on:change
bind:value
on:input
on:click
on:focus
{...$$restProps}></textarea>
{:else if hasLeftAddon || hasRightAddon}
<div class={addonContainerClasses()}>
<slot name="addonLeft" />
<input
<input use:typeAction
id={id}
type={inputType}
value={value}
class={inputClasses}
disabled={isDisabled}
on:blur
on:change
on:input={e => value = e.target.value}
bind:value
on:input
on:click
on:focus
{...$$restProps}
/>
<slot name="addonRight" />
</div>
{:else}
<input
<input use:typeAction
id={id}
type={inputType}
value={value}
class={inputClasses}
disabled={isDisabled}
on:blur
on:change
on:input={e => value = e.target.value}
bind:value
on:input
on:click
on:focus
{...$$restProps}
Expand All @@ -425,4 +426,3 @@ borders that visually conflict. */
</span>
{:else if helpText}<span class={helpClasses()}>{helpText}</span>{/if}
</div>