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

fix(number-input): support floating point values (#1555)

Browse source 
Fixes #233, fixes #486, fixes #1554
This commit is contained in:
Jonathan Quintin 2022-12-07 23:06:29 -05:00 • committed by GitHub
commit e6f5766e46
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 35 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -23,6 +23,10 @@ See [#no-value](#no-value) to allow for an empty value.
<NumberInput min="{4}" max="{20}" value="{4}" invalidText="Number must be between 4 and 20." helperText="Clusters provisioned in your region" label="Clusters (4 min, 20 max)" /> <NumberInput min="{4}" max="{20}" value="{4}" invalidText="Number must be between 4 and 20." helperText="Clusters provisioned in your region" label="Clusters (4 min, 20 max)" />
## With step value
<NumberInput value="{1}" helperText="Step of 0.1" step={0.1} label="Clusters" />
## No value ## No value
Set `allowEmpty` to `true` to allow for no value. Set `allowEmpty` to `true` to allow for no value.

17
src/NumberInput/NumberInput.svelte
View file

@ -113,16 +113,13 @@
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
function updateValue(direction) { function updateValue(isIncrementing) {
const nextValue = (value += direction * step); if (isIncrementing) {
ref.stepUp();
if (nextValue < min) {
value = min;
} else if (nextValue > max) {
value = max;
} else { } else {
value = nextValue; ref.stepDown();
} }
value = ref.value;
dispatch("input", value); dispatch("input", value);
dispatch("change", value); dispatch("change", value);
@ -235,7 +232,7 @@
class:bx--number__control-btn="{true}" class:bx--number__control-btn="{true}"
class:down-icon="{true}" class:down-icon="{true}"
on:click="{() => { on:click="{() => {
updateValue(-1); updateValue(false);
}}" }}"
disabled="{disabled}" disabled="{disabled}"
> >
@ -250,7 +247,7 @@
class:bx--number__control-btn="{true}" class:bx--number__control-btn="{true}"
class:up-icon="{true}" class:up-icon="{true}"
on:click="{() => { on:click="{() => {
updateValue(1); updateValue(true);
}}" }}"
disabled="{disabled}" disabled="{disabled}"
> >

24
tests/NumberInput.test.svelte
View file

@ -16,6 +16,30 @@
label="Clusters" label="Clusters"
helperText="Clusters provisioned in your region" helperText="Clusters provisioned in your region"
invalidText="Number must be between 4 and 20." invalidText="Number must be between 4 and 20."
on:input="{(e) => {
console.log({ input: e.detail }); // null | number
}}"
on:change="{(e) => {
console.log({ change: e.detail }); // null | number
}}"
on:keydown
on:keyup
on:paste
/>
<NumberInput
disabled
light
min="{1}"
max="{10}"
value="{4}"
step="{0.1}"
label="Clusters"
helperText="Clusters provisioned in your region"
invalidText="Number must be between 1 and 10."
on:input="{(e) => {
console.log({ input: e.detail }); // null | number
}}"
on:change="{(e) => { on:change="{(e) => {
console.log(e.detail); // null | number console.log(e.detail); // null | number
}}" }}"