UIEXT-2930: Handle stepSize setting for number inputs

UIEXT-2930 (Add configurable step size to NumberInputWidget)

Author: tcrundall-tng

packages/components/src/components/forms/NumberInput/NumberInput.vue

@@ -42,6 +42,10 @@ export default {
       default: Number.MAX_SAFE_INTEGER,
       type: Number,
     },
+    step: {
+      default: null,
+      type: [Number, null] as PropType<number | null>,
+    },
     /**
      * Validity controlled by the parent component to be flexible.
      */
@@ -87,6 +91,10 @@ export default {
       return this.type === "integer";
     },
     stepSize() {
+      if (this.step !== null) {
+        return this.step;
+      }
+
       return this.isInteger
         ? DEFAULT_STEP_SIZE_INTEGER
         : DEFAULT_STEP_SIZE_DOUBLE;
@@ -204,7 +212,12 @@ export default {
 
       /** Mimic stepping to nearest step with safe value rounding */
       let parsedVal = value + increment;
-      parsedVal = Math.round(parsedVal * 10) / 10; // eslint-disable-line no-magic-numbers
+      let scaleFactor = 1 / Math.abs(increment); // eslint-disable-line no-magic-numbers
+      if (Math.abs(increment) < 1) {
+        // Avoid rounding errors induced by fractional increments
+        scaleFactor = Math.round(scaleFactor);
+      }
+      parsedVal = Math.round(parsedVal * scaleFactor) / scaleFactor;
 
       /**
        * All measures have been taken to ensure a valid value at this point, so if the last

packages/jsonforms/src/uiComponents/NumberControlBase.vue

@@ -15,10 +15,14 @@ const props = defineProps<
 
 const DEFAULT_STEP_SIZE_INTEGER = 1;
 const DEFAULT_STEP_SIZE_DOUBLE = 0.1;
-const stepSize =
-  props.type === "integer"
-    ? DEFAULT_STEP_SIZE_INTEGER
-    : DEFAULT_STEP_SIZE_DOUBLE;
+
+const stepSize = computed(
+  () =>
+    props.control.uischema.options?.stepSize ??
+    (props.type === "integer"
+      ? DEFAULT_STEP_SIZE_INTEGER
+      : DEFAULT_STEP_SIZE_DOUBLE),
+);
 
 type BoundValidationParameters = {
   isExclusive: boolean;
@@ -61,7 +65,7 @@ const onFocusOut = () => {
   if (minParams.value && !respectsMin(minParams.value)(comparisonValue)) {
     const { min, isExclusive } = minParams.value;
     if (isExclusive) {
-      updatedValue = min + stepSize;
+      updatedValue = min + stepSize.value;
     } else {
       updatedValue = min;
     }
@@ -71,7 +75,7 @@ const onFocusOut = () => {
   ) {
     const { max, isExclusive } = maxParams.value;
     if (isExclusive) {
-      updatedValue = max - stepSize;
+      updatedValue = max - stepSize.value;
     } else {
       updatedValue = max;
     }
@@ -91,6 +95,7 @@ const onFocusOut = () => {
     :type="type"
     :min="minParams?.min"
     :max="maxParams?.max"
+    :step="stepSize"
     :is-valid
     compact
     @update:model-value="changeValue"