mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-21 12:49:20 +00:00
parent
3018c2b207
commit
8136e0a74a
1 changed files with 9 additions and 13 deletions
|
@ -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
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue