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

NumberInput : Fix error states

Browse source
This commit is contained in:
jqlio18 2022-12-11 22:45:43 -05:00
commit ac1afe4d9b
1 changed files with 11 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/NumberInput/NumberInput.svelte
View file

@ -39,8 +39,8 @@
/** Set to `true` for the input to be read-only */ /** Set to `true` for the input to be read-only */
export let readonly = false; export let readonly = false;
/** Set to `true` to allow for an empty value */ /** Set to `true` for the input to be required */
export let allowEmpty = false; export let required = true;
/** Set to `true` to disable the input */ /** Set to `true` to disable the input */
export let disabled = false; export let disabled = false;
@ -99,6 +99,8 @@
/** Obtain a reference to the input HTML element */ /** Obtain a reference to the input HTML element */
export let ref = null; export let ref = null;
let error = false;
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import Add from "../icons/Add.svelte"; import Add from "../icons/Add.svelte";
import Subtract from "../icons/Subtract.svelte"; import Subtract from "../icons/Subtract.svelte";
@ -127,11 +129,6 @@
$: incrementLabel = translateWithId("increment"); $: incrementLabel = translateWithId("increment");
$: decrementLabel = translateWithId("decrement"); $: decrementLabel = translateWithId("decrement");
$: error =
invalid ||
(!allowEmpty && value == null) ||
value > max ||
(typeof value === "number" && value < min);
$: errorId = `error-${id}`; $: errorId = `error-${id}`;
$: ariaLabel = $: ariaLabel =
$$props["aria-label"] || $$props["aria-label"] ||
@ -143,11 +140,14 @@
function onInput({ target }) { function onInput({ target }) {
value = parse(target.value); value = parse(target.value);
error = !ref.checkValidity() || invalid;
dispatch("input", value); dispatch("input", value);
} }
function onChange({ target }) { function onChange({ target }) {
error = !ref.checkValidity() || invalid;
dispatch("change", parse(target.value)); dispatch("change", parse(target.value));
} }
</script> </script>
@ -202,6 +202,7 @@
step="{step}" step="{step}"
value="{value ?? ''}" value="{value ?? ''}"
readonly="{readonly}" readonly="{readonly}"
required="{required}"
{...$$restProps} {...$$restProps}
on:change="{onChange}" on:change="{onChange}"
on:input="{onInput}" on:input="{onInput}"
@ -211,10 +212,10 @@
on:blur on:blur
on:paste on:paste
/> />
{#if invalid} {#if invalid || error}
<WarningFilled class="bx--number__invalid" /> <WarningFilled class="bx--number__invalid" />
{/if} {/if}
{#if !invalid && warn} {#if !invalid && !error && warn}
<WarningAltFilled <WarningAltFilled
class="bx--number__invalid bx--number__invalid--warning" class="bx--number__invalid bx--number__invalid--warning"
/> />
@ -265,7 +266,7 @@
{helperText} {helperText}
</div> </div>
{/if} {/if}
{#if error} {#if invalid || error}
<div id="{errorId}" class:bx--form-requirement="{true}"> <div id="{errorId}" class:bx--form-requirement="{true}">
{invalidText} {invalidText}
</div> </div>