fix: input-number new parse string

project/pages/test/App.vue

@@ -6,6 +6,9 @@
 		<div :key = "pureValue">Pure values: {{pureValue}}</div>
 		<div :key = "pureAvailabilities">Pure av: {{pureAvailabilities}}</div>
 
+		<input type = "number" step = "10"/>
+
+		<form-field type = "number" name = "age" label = "Age" step = "10"/>
 		<form-field type = "country" name = "country" label = "Country" />
 
 		<form-field type = "tel" name = "phone" label = "Phone" required />

src/utils/parse-number.ts

@@ -3,8 +3,31 @@
  * */
 export function parseNumber(data: unknown, defaultValue: number = 0) {
     if (typeof data !== 'string') return defaultValue;
-
-    const parsedStr = data.replace(/[^\d,.+-]/g,'');
-    if (parsedStr.length === 0) return defaultValue;
-    return Number.parseFloat(parsedStr);
+
+    const parsedResult = new RegExp(/^([-+]?)([^.,+-]*)(.*)/g).exec(data);
+
+    if (parsedResult === null) return 0;
+
+    try {
+        const parsedSting = [
+            parsedResult[1].length ? parsedResult[1] : '+',
+            parsedResult[2].replace(/[^0-9]/g, ''),
+            '.',
+            parsedResult[3].replace(/[^0-9]/g, ''),
+        ].join('')
+
+        // if parsedString is +.
+        if (parsedSting.length === 2) return defaultValue;
+
+        const result = Number.parseFloat(parsedSting)
+        return  Number.isNaN(result) ? 0 : result
+    } catch (e) {
+        return 0
+    }
+
+
+}
+
+function test(str: string) {
+
 }

src/widgets/inputs/input-number/widget-input-number.vue

@@ -14,15 +14,15 @@
 				ref = "refInput"
 				class = "input-number"
 				type = "text"
-				:value = "isFocused ? modelValue : executePretty(modelValue)"
-				@input = "onInput($event.target.value)"
+				:value = "isFocused ? modelValue : useModify(() => props.pretty)(modelValue)"
+				@input = "handleInput($event.target.value)"
 				:disabled = "disabled"
 				:autofocus="autofocus"
 
-				@keyup.up = "onStep(true)"
-				@keyup.down.prevent = "onStep(false)"
-                @focusin = "isFocused = true"
-                @focusout = "isFocused = false"
+				@keydown.up = "onStep(true)"
+				@keydown.down = "onStep(false)"
+				@focusin = "isFocused = true"
+				@focusout = "isFocused = false"
 			>
 			<span v-if = "suffix" class = "input-number-suffix">{{suffix}}</span>
 		</div>
@@ -35,13 +35,14 @@ import {ref, withDefaults} from "vue";
 import {StringModify} from "../../../types";
 import useModify from "../../../local-hooks/use-modify";
 import FieldWrap from "../field-wrap.vue";
+import {parseNumber} from "../../../utils/parse-number";
 interface Props{
-	step?: number,
+	step?: number | string,
 	label?: string,
 	errors: string[],
-	modelValue?: number,
+	modelValue: unknown,
 	disabled: boolean,
-	autofocus: boolean,
+	autofocus?	: boolean,
 	name: string,
 	pretty?: StringModify | StringModify[],
 	suffix?: string,
@@ -52,31 +53,21 @@ const props = withDefaults(defineProps<Props>(), {
 })
 const isFocused = ref(false);
 
-const executePretty = useModify(() => props.pretty);
-
-
 const emits = defineEmits<{
 	(e: 'update:modelValue', value: any): void
 }>()
 const refInput = ref<HTMLInputElement>()
-function onInput(v: string | number) {
-
-	if (typeof v === "number") {
-		emits('update:modelValue', v);
-	}
-	else {
-		v = v.replace(/[^0-9.]/g, '');
-		emits("update:modelValue", Number.parseFloat(v));
-	}
+function handleInput(data: string | number) {
+	const value = (typeof data !== "number") ? parseNumber(data) : data
 
-	if (refInput.value)
-		refInput.value.value = String(v);
+	if (value !== props.modelValue) emits("update:modelValue", value);
+	if (refInput.value) refInput.value.value = String(data).replace(/[^0-9.,+-]|/g, '')
 }
 
 function onStep(v: boolean) {
-	if (typeof props.modelValue !== "number") return void onInput(0);
-
-	onInput(props.modelValue + (Number(props.step) * (v?1:-1)))
+	const multiDir = v ? 1 : -1 // Direction of the step. +1 - Up, -1 -Down
+	const value = typeof props.modelValue !== "number" ? 0 : props.modelValue
+	handleInput(Number(props.step) * multiDir + value )
 }
 
 </script>

src/widgets/inputs/input-number/widget-number-step.vue

@@ -51,7 +51,7 @@ const emits = defineEmits<{
 	padding: 0 0 8px 0;
 }
 
-.step-container:active > .arrow {
+.step-container:active > .vf-arrow {
 	border-color: var(--vf-input-active);
 }
 </style>

tests/units/utils/parse-number.spec.ts

@@ -16,4 +16,10 @@ describe("Parse Number", () => {
     test("Should parse empty string and return default value", () => {
         expect(parseNumber("oprty", 25)).toBe(25)
     })
+    test("Float number", () => {
+        expect(parseNumber("13123.10")).toBe(13123.10)
+    })
+    test("Float number with comma", () =>{
+        expect(parseNumber("123,15")).toBe(123.15);
+    })
 })