fix: clear a number input to no value instead of zero

Author: Romsik788

adminforth/spa/src/afcl/Input.vue

@@ -12,7 +12,7 @@
       ref="input"
       v-bind="$attrs"
       :type="type"
-      @input="$emit('update:modelValue', type === 'number' ? Number(($event.target as HTMLInputElement)?.value) : ($event.target as HTMLInputElement)?.value)"
+      @input="$emit('update:modelValue', type === 'number' ? numberInputValue(($event.target as HTMLInputElement)?.value) : ($event.target as HTMLInputElement)?.value)"
       :value="modelValue"
       aria-describedby="helper-text-explanation"
       class="afcl-input  inline-flex bg-lightInputBackground text-lightInputText dark:text-darkInputText border border-lightInputBorder rounded-0 focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary 
@@ -37,6 +37,7 @@
 
 import { ref } from 'vue';
 import { useCoreStore } from '@/stores/core';
+import { numberInputValue } from './inputValue';
 
 const coreStore = useCoreStore();
 const isIos = coreStore.isIos;

adminforth/spa/src/afcl/inputValue.ts

@@ -0,0 +1,8 @@
+// Number('') is 0, so an emptied field would store a real zero
+export function numberInputValue(raw: string | undefined | null): number | null {
+  if (raw == null || raw.trim() === '') {
+    return null;
+  }
+  const value = Number(raw);
+  return Number.isNaN(value) ? null : value;
+}

tests/jest_tests/input_number_value.test.ts

@@ -0,0 +1,28 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { numberInputValue } from '../../adminforth/spa/src/afcl/inputValue';
+
+describe('afcl Input number value', () => {
+  it.each([[''], ['   ']])('reports an emptied field as no value, not zero (%p)', (raw) => {
+    expect(numberInputValue(raw)).toBeNull();
+  });
+
+  it('reports a value the browser cannot parse as no value', () => {
+    expect(numberInputValue('abc')).toBeNull();
+  });
+
+  it('keeps a real number, including zero the user actually typed', () => {
+    expect(numberInputValue('0')).toBe(0);
+    expect(numberInputValue('42')).toBe(42);
+    expect(numberInputValue('-3.5')).toBe(-3.5);
+  });
+});
+
+it('the component routes its number branch through the helper', async () => {
+  const component = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../../adminforth/spa/src/afcl/Input.vue');
+  const source = await fs.readFile(component, 'utf8');
+
+  expect(source).toMatch(/type === 'number' \? numberInputValue\(/);
+  expect(source).not.toMatch(/type === 'number' \? Number\(/);
+});