feat(OnyxStepper): implement strip step and precision #1976
Conversation
ChristianBusshoff
commented
Oct 18, 2024
ChristianBusshoff
commented
- added strip step Mode (values that do not fit the step size, a stepMismatch error is shown)
- added precision (always display the given number of decimals places)
- applied the spin button aria pattern
|
| } | ||
| }; | ||
| const handleChange = () => { | ||
| if (inputRef.value) { |
There was a problem hiding this comment.
Avoding intendation is preferable, to keep readability high
| if (inputRef.value) { | |
| if (!inputRef.value) return; |
| /** | ||
| * Current value (with getter and setter) that can be used as "v-model" for the native input. | ||
| */ | ||
| const value = computed({ | ||
| get: () => props.modelValue, | ||
| set: (value) => emit("update:modelValue", value), | ||
| }); | ||
| const displayValue = ref<number | string | undefined>(); | ||
|
|
||
| const updateValue = (newValue: number) => { |
There was a problem hiding this comment.
IMHO we should switch to more reactive approach.
I would propose this simplified approach:
- emitting the parsed number on
@change displayValueshould only be write-bound and be computed based onprops.modelValue
| */ | ||
| step?: number; | ||
| /** | ||
| * Ensures that the value is a multiple of the step size. | ||
| */ | ||
| stripStep?: boolean; | ||
| /** | ||
| * Defines the number of decimal places to display. | ||
| */ | ||
| precision?: number; | ||
|
|
There was a problem hiding this comment.
As discussed:
/**
* Incremental step.
* @deprecated
*/
step?: number; // step-mismatch + step-increment
/**
* The smallest allowed value and rounded precision
*/
precision?: number; // step-mismatch => uses :step="props.precision" for the validation
/**
* The increment number
* @default precision is the default stepSize
*/
stepSize?: number; // step-increment => number which is used for increment/decrement| @change="handleChange" | ||
| /> |
There was a problem hiding this comment.
@keydown.up.prevent="handleClick('stepUp')"
@keydown.down.prevent="handleClick('stepDown')"| @@ -91,7 +121,7 @@ const decrementLabel = computed(() => t.value("stepper.decrement", { stepSize: p | |||
| <input | |||
| v-else | |||
| ref="inputRef" | |||
| v-model.number="value" | |||
| v-model.number="displayValue" | |||
There was a problem hiding this comment.
| v-model.number="displayValue" | |
| :value="displayValue" |
