mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
breaking(number-input): type value as null | number (#1044)
Fixes #1039
This commit is contained in:
metonym
GitHub
parent
3018c2b207
commit
9e915cf90a
5 changed files with 58 additions and 58 deletions
|
|
@ -2560,32 +2560,32 @@ export type NumberInputTranslationId = "increment" | "decrement";
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| value | <code>let</code> | Yes | <code>number | string</code> | <code>""</code> | Specify the input value |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Set the size of the input |
|
||||
| step | <code>let</code> | No | <code>number</code> | <code>1</code> | Specify the step increment |
|
||||
| max | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the maximum value |
|
||||
| min | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the minimum value |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| readonly | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the input to be read-only |
|
||||
| mobile | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the mobile variant |
|
||||
| allowEmpty | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow for an empty value |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
|
||||
| hideSteppers | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the input stepper buttons |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the increment icons |
|
||||
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
||||
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
|
||||
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
|
||||
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
|
||||
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
|
||||
| label | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
||||
| translateWithId | <code>let</code> | No | <code>(id: NumberInputTranslationId) => string</code> | <code>(id) => defaultTranslations[id]</code> | Override the default translation ids |
|
||||
| translationIds | <code>const</code> | No | <code>{ increment: "increment"; decrement: "decrement" }</code> | <code>{ increment: "increment", decrement: "decrement", }</code> | Default translation ids |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------- |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| value | <code>let</code> | Yes | <code>null | number</code> | <code>null</code> | Specify the input value.<br />Use `null` to denote "no value" |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | <code>undefined</code> | Set the size of the input |
|
||||
| step | <code>let</code> | No | <code>number</code> | <code>1</code> | Specify the step increment |
|
||||
| max | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the maximum value |
|
||||
| min | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the minimum value |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| readonly | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the input to be read-only |
|
||||
| mobile | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the mobile variant |
|
||||
| allowEmpty | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow for an empty value |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
|
||||
| hideSteppers | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the input stepper buttons |
|
||||
| iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the increment icons |
|
||||
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
||||
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
|
||||
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
|
||||
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
|
||||
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
|
||||
| label | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
|
||||
| hideLabel | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
|
||||
| translateWithId | <code>let</code> | No | <code>(id: NumberInputTranslationId) => string</code> | <code>(id) => defaultTranslations[id]</code> | Override the default translation ids |
|
||||
| translationIds | <code>const</code> | No | <code>{ increment: "increment"; decrement: "decrement" }</code> | <code>{ increment: "increment", decrement: "decrement", }</code> | Default translation ids |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
|
||||
| name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
@ -2595,16 +2595,16 @@ export type NumberInputTranslationId = "increment" | "decrement";
|
|||
|
||||
### Events
|
||||
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :--------- | :------------------ |
|
||||
| change | dispatched | <code>number</code> |
|
||||
| click | forwarded | -- |
|
||||
| mouseover | forwarded | -- |
|
||||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
| input | forwarded | -- |
|
||||
| focus | forwarded | -- |
|
||||
| blur | forwarded | -- |
|
||||
| Event name | Type | Detail |
|
||||
| :--------- | :--------- | :------------------------------ |
|
||||
| change | dispatched | <code>null | number</code> |
|
||||
| click | forwarded | -- |
|
||||
| mouseover | forwarded | -- |
|
||||
| mouseenter | forwarded | -- |
|
||||
| mouseleave | forwarded | -- |
|
||||
| input | forwarded | -- |
|
||||
| focus | forwarded | -- |
|
||||
| blur | forwarded | -- |
|
||||
|
||||
## `NumberInputSkeleton`
|
||||
|
||||
|
|
|
|||
|
|
@ -6969,9 +6969,9 @@
|
|||
{
|
||||
"name": "value",
|
||||
"kind": "let",
|
||||
"description": "Specify the input value",
|
||||
"type": "number | string",
|
||||
"value": "\"\"",
|
||||
"description": "Specify the input value.\nUse `null` to denote \"no value\"",
|
||||
"type": "null | number",
|
||||
"value": "null",
|
||||
"isFunction": false,
|
||||
"isFunctionDeclaration": false,
|
||||
"constant": false,
|
||||
|
|
@ -7226,7 +7226,7 @@
|
|||
}
|
||||
],
|
||||
"events": [
|
||||
{ "type": "dispatched", "name": "change", "detail": "number" },
|
||||
{ "type": "dispatched", "name": "change", "detail": "null | number" },
|
||||
{ "type": "forwarded", "name": "click", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseover", "element": "div" },
|
||||
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script>
|
||||
/**
|
||||
* @typedef {"increment" | "decrement"} NumberInputTranslationId
|
||||
* @event {number} change
|
||||
* @event {null | number} change
|
||||
*/
|
||||
|
||||
/**
|
||||
|
|
@ -11,10 +11,11 @@
|
|||
export let size = undefined;
|
||||
|
||||
/**
|
||||
* Specify the input value
|
||||
* @type {number | string}
|
||||
* Specify the input value.
|
||||
* Use `null` to denote "no value"
|
||||
* @type {null | number}
|
||||
*/
|
||||
export let value = "";
|
||||
export let value = null;
|
||||
|
||||
/** Specify the step increment */
|
||||
export let step = 1;
|
||||
|
|
@ -131,17 +132,12 @@
|
|||
|
||||
let inputValue = value;
|
||||
|
||||
const normalizeValue = (_value) => {
|
||||
if (_value === undefined || _value === "") return _value;
|
||||
return Number(_value);
|
||||
};
|
||||
|
||||
$: dispatch("change", value);
|
||||
$: incrementLabel = translateWithId("increment");
|
||||
$: decrementLabel = translateWithId("decrement");
|
||||
$: value = normalizeValue(inputValue);
|
||||
$: value = inputValue ? Number(inputValue) : null;
|
||||
$: error =
|
||||
invalid || (!allowEmpty && value === "") || value > max || value < min;
|
||||
invalid || (!allowEmpty && value == null) || value > max || value < min;
|
||||
$: errorId = `error-${id}`;
|
||||
$: ariaLabel =
|
||||
$$props["aria-label"] ||
|
||||
|
|
@ -208,7 +204,7 @@
|
|||
max="{max}"
|
||||
min="{min}"
|
||||
step="{step}"
|
||||
value="{value}"
|
||||
value="{value ?? ''}"
|
||||
readonly="{readonly}"
|
||||
{...$$restProps}
|
||||
on:input
|
||||
|
|
@ -263,7 +259,7 @@
|
|||
max="{max}"
|
||||
min="{min}"
|
||||
step="{step}"
|
||||
value="{value}"
|
||||
value="{value ?? ''}"
|
||||
readonly="{readonly}"
|
||||
{...$$restProps}
|
||||
on:input
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
<script lang="ts">
|
||||
import { NumberInput, NumberInputSkeleton } from "../types";
|
||||
import type { NumberInputProps } from "../types/NumberInput/NumberInput.svelte";
|
||||
|
||||
let value: NumberInputProps["value"] = null;
|
||||
</script>
|
||||
|
||||
<NumberInput
|
||||
label="Clusters"
|
||||
on:change="{(e) => {
|
||||
console.log(e.detail); // number
|
||||
console.log(e.detail); // null | number
|
||||
}}"
|
||||
/>
|
||||
|
||||
|
|
|
|||
9
types/NumberInput/NumberInput.svelte.d.ts
vendored
9
types/NumberInput/NumberInput.svelte.d.ts
vendored
|
|
@ -12,10 +12,11 @@ export interface NumberInputProps
|
|||
size?: "sm" | "xl";
|
||||
|
||||
/**
|
||||
* Specify the input value
|
||||
* @default ""
|
||||
* Specify the input value.
|
||||
* Use `null` to denote "no value"
|
||||
* @default null
|
||||
*/
|
||||
value?: number | string;
|
||||
value?: null | number;
|
||||
|
||||
/**
|
||||
* Specify the step increment
|
||||
|
|
@ -147,7 +148,7 @@ export interface NumberInputProps
|
|||
export default class NumberInput extends SvelteComponentTyped<
|
||||
NumberInputProps,
|
||||
{
|
||||
change: CustomEvent<number>;
|
||||
change: CustomEvent<null | number>;
|
||||
click: WindowEventMap["click"];
|
||||
mouseover: WindowEventMap["mouseover"];
|
||||
mouseenter: WindowEventMap["mouseenter"];
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue