mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 10:51:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

chore: v11 NumberInput

Browse source 
For better compatibility with existing codebases size `xl` is still supported.
This commit is contained in:
Gregor Wassmann 2023-03-28 19:30:16 +02:00 • committed by Enrico Sacchetti
commit 9f32d57353
No known key found for this signature in database
GPG key ID: 3374B89ECA60D796
5 changed files with 8 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

2
COMPONENT_INDEX.md
View file

@ -2488,7 +2488,7 @@ export type NumberInputTranslationId = "increment" | "decrement";
| :-------------- | :------- | :----------------- | :------- | --------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------- | | :-------------- | :------- | :----------------- | :------- | --------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| value | No | <code>let</code> | Yes | <code>null &#124; number</code> | <code>null</code> | Specify the input value.<br />Use `null` to denote "no value" | | value | No | <code>let</code> | Yes | <code>null &#124; number</code> | <code>null</code> | Specify the input value.<br />Use `null` to denote "no value" |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Set the size of the input | | size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Set the size of the input |
| step | No | <code>let</code> | No | <code>number</code> | <code>1</code> | Specify the step increment | | step | No | <code>let</code> | No | <code>number</code> | <code>1</code> | Specify the step increment |
| max | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the maximum value | | max | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the maximum value |
| min | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the minimum value | | min | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the minimum value |

2
docs/src/COMPONENT_API.json
View file

@ -7580,7 +7580,7 @@
"name": "size", "name": "size",
"kind": "let", "kind": "let",
"description": "Set the size of the input", "description": "Set the size of the input",
"type": "\"sm\" | \"xl\"", "type": "\"sm\" | \"lg\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,

4
docs/src/pages/components/NumberInput.svx
View file

@ -51,9 +51,9 @@ Set `value` to `null` to denote "no value."
<NumberInput readonly label="Clusters" value={0} /> <NumberInput readonly label="Clusters" value={0} />
## Extra-large size ## Large size
<NumberInput size="xl" label="Clusters" value={0} /> <NumberInput size="lg" label="Clusters" value={0} />
## Small size ## Small size

8
src/NumberInput/NumberInput.svelte
View file

@ -7,7 +7,7 @@
/** /**
* Set the size of the input * Set the size of the input
* @type {"sm" | "xl"} * @type {"sm" | "lg"}
*/ */
export let size = undefined; export let size = undefined;
@ -171,7 +171,7 @@
class:bx--number--nolabel="{hideLabel}" class:bx--number--nolabel="{hideLabel}"
class:bx--number--nosteppers="{hideSteppers}" class:bx--number--nosteppers="{hideSteppers}"
class:bx--number--sm="{size === 'sm'}" class:bx--number--sm="{size === 'sm'}"
class:bx--number--xl="{size === 'xl'}" class:bx--number--lg="{size === 'lg' || size === 'xl'}"
> >
{#if $$slots.label || label} {#if $$slots.label || label}
<label <label
@ -212,9 +212,7 @@
on:blur on:blur
on:paste on:paste
/> />
{#if readonly} {#if !readonly}
<EditOff class="bx--text-input__readonly-icon" />
{:else}
{#if invalid} {#if invalid}
<WarningFilled class="bx--number__invalid" /> <WarningFilled class="bx--number__invalid" />
{/if} {/if}

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

@ -10,7 +10,7 @@ export interface NumberInputProps extends RestProps {
* Set the size of the input * Set the size of the input
* @default undefined * @default undefined
*/ */
size?: "sm" | "xl"; size?: "sm" | "lg";
/** /**
* Specify the input value. * Specify the input value.