mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

breaking(number-input): type value as null | number (#1044)

Browse source 
Fixes #1039
This commit is contained in:
metonym 2022-01-27 06:57:32 -08:00 • committed by GitHub
commit 9e915cf90a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 58 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

72
COMPONENT_INDEX.md
View file

@ -2560,32 +2560,32 @@ export type NumberInputTranslationId = "increment" | "decrement";
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------- | | :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| value | <code>let</code> | Yes | <code>number &#124; string</code> | <code>""</code> | Specify the input value | | value | <code>let</code> | Yes | <code>null &#124; number</code> | <code>null</code> | Specify the input value.<br />Use `null` to denote "no value" |
| size | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the input | | size | <code>let</code> | No | <code>"sm" &#124; "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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | name | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
### Slots ### Slots
@ -2595,16 +2595,16 @@ export type NumberInputTranslationId = "increment" | "decrement";
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :--------- | :------------------ | | :--------- | :--------- | :------------------------------ |
| change | dispatched | <code>number</code> | | change | dispatched | <code>null &#124; number</code> |
| click | forwarded | -- | | click | forwarded | -- |
| mouseover | forwarded | -- | | mouseover | forwarded | -- |
| mouseenter | forwarded | -- | | mouseenter | forwarded | -- |
| mouseleave | forwarded | -- | | mouseleave | forwarded | -- |
| input | forwarded | -- | | input | forwarded | -- |
| focus | forwarded | -- | | focus | forwarded | -- |
| blur | forwarded | -- | | blur | forwarded | -- |
## `NumberInputSkeleton` ## `NumberInputSkeleton`

8
docs/src/COMPONENT_API.json
View file

@ -6969,9 +6969,9 @@
{ {
"name": "value", "name": "value",
"kind": "let", "kind": "let",
"description": "Specify the input value", "description": "Specify the input value.\nUse `null` to denote \"no value\"",
"type": "number | string", "type": "null | number",
"value": "\"\"", "value": "null",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,
@ -7226,7 +7226,7 @@
} }
], ],
"events": [ "events": [
{ "type": "dispatched", "name": "change", "detail": "number" }, { "type": "dispatched", "name": "change", "detail": "null | number" },
{ "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" },

22
src/NumberInput/NumberInput.svelte
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} * Use `null` to denote "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

5
tests/NumberInput.test.svelte
View file

@ -1,11 +1,14 @@
<script lang="ts"> <script lang="ts">
import { NumberInput, NumberInputSkeleton } from "../types"; import { NumberInput, NumberInputSkeleton } from "../types";
import type { NumberInputProps } from "../types/NumberInput/NumberInput.svelte";
let value: NumberInputProps["value"] = null;
</script> </script>
<NumberInput <NumberInput
label="Clusters" label="Clusters"
on:change="{(e) => { on:change="{(e) => {
console.log(e.detail); // number console.log(e.detail); // null | number
}}" }}"
/> />

9
types/NumberInput/NumberInput.svelte.d.ts vendored
View file

@ -12,10 +12,11 @@ export interface NumberInputProps
size?: "sm" | "xl"; size?: "sm" | "xl";
/** /**
* Specify the input value * Specify the input value.
* @default "" * Use `null` to denote "no value"
* @default null
*/ */
value?: number | string; value?: null | number;
/** /**
* Specify the step increment * Specify the step increment
@ -147,7 +148,7 @@ export interface NumberInputProps
export default class NumberInput extends SvelteComponentTyped< export default class NumberInput extends SvelteComponentTyped<
NumberInputProps, NumberInputProps,
{ {
change: CustomEvent<number>; change: CustomEvent<null | number>;
click: WindowEventMap["click"]; click: WindowEventMap["click"];
mouseover: WindowEventMap["mouseover"]; mouseover: WindowEventMap["mouseover"];
mouseenter: WindowEventMap["mouseenter"]; mouseenter: WindowEventMap["mouseenter"];