breaking(number-input): type value as null or number

Fixes #1039
This commit is contained in:
Eric Liu 2022-01-26 20:09:24 -08:00
commit 8136e0a74a

View file

@ -1,7 +1,7 @@
<script> <script>
/** /**
* @typedef {"increment" | "decrement"} NumberInputTranslationId * @typedef {"increment" | "decrement"} NumberInputTranslationId
* @event {number} change * @event {null | number} change
*/ */
/** /**
@ -11,10 +11,11 @@
export let size = undefined; export let size = undefined;
/** /**
* Specify the input value * Specify the input value.
* @type {number | string} * Type `null` denotes "no value"
* @type {null | number}
*/ */
export let value = ""; export let value = null;
/** Specify the step increment */ /** Specify the step increment */
export let step = 1; export let step = 1;
@ -131,17 +132,12 @@
let inputValue = value; let inputValue = value;
const normalizeValue = (_value) => {
if (_value === undefined || _value === "") return _value;
return Number(_value);
};
$: dispatch("change", value); $: dispatch("change", value);
$: incrementLabel = translateWithId("increment"); $: incrementLabel = translateWithId("increment");
$: decrementLabel = translateWithId("decrement"); $: decrementLabel = translateWithId("decrement");
$: value = normalizeValue(inputValue); $: value = inputValue ? Number(inputValue) : null;
$: error = $: error =
invalid || (!allowEmpty && value === "") || value > max || value < min; invalid || (!allowEmpty && value == null) || value > max || value < min;
$: errorId = `error-${id}`; $: errorId = `error-${id}`;
$: ariaLabel = $: ariaLabel =
$$props["aria-label"] || $$props["aria-label"] ||
@ -208,7 +204,7 @@
max="{max}" max="{max}"
min="{min}" min="{min}"
step="{step}" step="{step}"
value="{value}" value="{value ?? ''}"
readonly="{readonly}" readonly="{readonly}"
{...$$restProps} {...$$restProps}
on:input on:input
@ -263,7 +259,7 @@
max="{max}" max="{max}"
min="{min}" min="{min}"
step="{step}" step="{step}"
value="{value}" value="{value ?? ''}"
readonly="{readonly}" readonly="{readonly}"
{...$$restProps} {...$$restProps}
on:input on:input