From 9e915cf90ac161d135b219ff92f125ac72e5ecfd Mon Sep 17 00:00:00 2001 From: metonym Date: Thu, 27 Jan 2022 06:57:32 -0800 Subject: [PATCH] breaking(number-input): type `value` as `null | number` (#1044) Fixes #1039 --- COMPONENT_INDEX.md | 72 +++++++++++------------ docs/src/COMPONENT_API.json | 8 +-- src/NumberInput/NumberInput.svelte | 22 +++---- tests/NumberInput.test.svelte | 5 +- types/NumberInput/NumberInput.svelte.d.ts | 9 +-- 5 files changed, 58 insertions(+), 58 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index f43b78fa..b146b397 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -2560,32 +2560,32 @@ export type NumberInputTranslationId = "increment" | "decrement"; ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| value | let | Yes | number | string | "" | Specify the input value | -| size | let | No | "sm" | "xl" | undefined | Set the size of the input | -| step | let | No | number | 1 | Specify the step increment | -| max | let | No | number | undefined | Specify the maximum value | -| min | let | No | number | undefined | Specify the minimum value | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| readonly | let | No | boolean | false | Set to `true` for the input to be read-only | -| mobile | let | No | boolean | false | Set to `true` to enable the mobile variant | -| allowEmpty | let | No | boolean | false | Set to `true` to allow for an empty value | -| disabled | let | No | boolean | false | Set to `true` to disable the input | -| hideSteppers | let | No | boolean | false | Set to `true` to hide the input stepper buttons | -| iconDescription | let | No | string | "" | Specify the ARIA label for the increment icons | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| invalidText | let | No | string | "" | Specify the invalid state text | -| warn | let | No | boolean | false | Set to `true` to indicate an warning state | -| warnText | let | No | string | "" | Specify the warning state text | -| helperText | let | No | string | "" | Specify the helper text | -| label | let | No | string | "" | Specify the label text | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | -| translateWithId | let | No | (id: NumberInputTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | -| translationIds | const | No | { increment: "increment"; decrement: "decrement" } | { increment: "increment", decrement: "decrement", } | Default translation ids | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | undefined | Specify a name attribute for the input | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------- | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| value | let | Yes | null | number | null | Specify the input value.
Use `null` to denote "no value" | +| size | let | No | "sm" | "xl" | undefined | Set the size of the input | +| step | let | No | number | 1 | Specify the step increment | +| max | let | No | number | undefined | Specify the maximum value | +| min | let | No | number | undefined | Specify the minimum value | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| readonly | let | No | boolean | false | Set to `true` for the input to be read-only | +| mobile | let | No | boolean | false | Set to `true` to enable the mobile variant | +| allowEmpty | let | No | boolean | false | Set to `true` to allow for an empty value | +| disabled | let | No | boolean | false | Set to `true` to disable the input | +| hideSteppers | let | No | boolean | false | Set to `true` to hide the input stepper buttons | +| iconDescription | let | No | string | "" | Specify the ARIA label for the increment icons | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | let | No | string | "" | Specify the invalid state text | +| warn | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | let | No | string | "" | Specify the warning state text | +| helperText | let | No | string | "" | Specify the helper text | +| label | let | No | string | "" | Specify the label text | +| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | +| translateWithId | let | No | (id: NumberInputTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | +| translationIds | const | No | { increment: "increment"; decrement: "decrement" } | { increment: "increment", decrement: "decrement", } | Default translation ids | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | let | No | string | undefined | Specify a name attribute for the input | ### Slots @@ -2595,16 +2595,16 @@ export type NumberInputTranslationId = "increment" | "decrement"; ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :------------------ | -| change | dispatched | number | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| input | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :------------------------------ | +| change | dispatched | null | number | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| input | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | ## `NumberInputSkeleton` diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 9baede23..78c211f6 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -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" }, diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte index d620cc40..210fb7a6 100644 --- a/src/NumberInput/NumberInput.svelte +++ b/src/NumberInput/NumberInput.svelte @@ -1,7 +1,7 @@ diff --git a/types/NumberInput/NumberInput.svelte.d.ts b/types/NumberInput/NumberInput.svelte.d.ts index 5e63cfda..879b3bb1 100644 --- a/types/NumberInput/NumberInput.svelte.d.ts +++ b/types/NumberInput/NumberInput.svelte.d.ts @@ -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; + change: CustomEvent; click: WindowEventMap["click"]; mouseover: WindowEventMap["mouseover"]; mouseenter: WindowEventMap["mouseenter"];