feat: Replace number inputs with new v-number-input compontent (#6767)

frontend/components/Domain/Recipe/RecipeIngredientEditor.vue

@@ -22,12 +22,15 @@
         cols="12"
         class="flex-grow-0 flex-shrink-0"
       >
-        <v-text-field
+        <v-number-input
           v-model="model.quantity"
           variant="solo"
+          :precision="null"
+          :min="0"
           hide-details
+          control-variant="stacked"
+          inset
           density="compact"
-          type="number"
           :placeholder="$t('recipe.quantity')"
           @keypress="quantityFilter"
         >
@@ -38,7 +41,7 @@
               {{ $globals.icons.arrowUpDown }}
             </v-icon>
           </template>
-        </v-text-field>
+        </v-number-input>
       </v-col>
       <v-col
         v-if="!state.isRecipe"

frontend/components/Domain/Recipe/RecipeNutrition.vue

@@ -10,14 +10,17 @@
           v-for="(item, key, index) in modelValue"
           :key="index"
         >
-          <v-text-field
-            density="compact"
+          <v-number-input
             :model-value="modelValue[key]"
             :label="labels[key].label"
             :suffix="labels[key].suffix"
-            type="number"
+            density="compact"
             autocomplete="off"
             variant="underlined"
+            control-variant="stacked"
+            inset
+            :precision="null"
+            :min="0"
             @update:model-value="updateValue(key, $event)"
           />
         </div>

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoEditor.vue

@@ -11,27 +11,27 @@
     <v-container class="ma-0 pa-0">
       <v-row>
         <v-col cols="3">
-          <v-text-field
-            :model-value="recipeServings"
-            type="number"
+          <v-number-input
+            :model-value="recipe.recipeServings"
             :min="0"
-            hide-spin-buttons
+            :precision="null"
             density="compact"
             :label="$t('recipe.servings')"
             variant="underlined"
-            @update:model-value="validateInput($event, 'recipeServings')"
+            control-variant="hidden"
+            @update:model-value="recipe.recipeServings = $event"
           />
         </v-col>
         <v-col cols="3">
-          <v-text-field
-            :model-value="recipeYieldQuantity"
-            type="number"
+          <v-number-input
+            :model-value="recipe.recipeYieldQuantity"
             :min="0"
-            hide-spin-buttons
+            :precision="null"
             density="compact"
             :label="$t('recipe.yield')"
             variant="underlined"
-            @update:model-value="validateInput($event, 'recipeYieldQuantity')"
+            control-variant="hidden"
+            @update:model-value="recipe.recipeYieldQuantity = $event"
           />
         </v-col>
         <v-col cols="6">
@@ -85,37 +85,4 @@ import type { NoUndefinedField } from "~/lib/api/types/non-generated";
 import type { Recipe } from "~/lib/api/types/recipe";
 
 const recipe = defineModel<NoUndefinedField<Recipe>>({ required: true });
-
-const recipeServings = computed<number>({
-  get() {
-    return recipe.value.recipeServings;
-  },
-  set(val) {
-    validateInput(val.toString(), "recipeServings");
-  },
-});
-
-const recipeYieldQuantity = computed<number>({
-  get() {
-    return recipe.value.recipeYieldQuantity;
-  },
-  set(val) {
-    validateInput(val.toString(), "recipeYieldQuantity");
-  },
-});
-
-function validateInput(value: string | null, property: "recipeServings" | "recipeYieldQuantity") {
-  if (!value) {
-    recipe.value[property] = 0;
-    return;
-  }
-
-  const number = parseFloat(value.replace(/[^0-9.]/g, ""));
-  if (isNaN(number) || number <= 0) {
-    recipe.value[property] = 0;
-    return;
-  }
-
-  recipe.value[property] = number;
-}
 </script>

frontend/components/Domain/Recipe/RecipeScaleEditButton.vue

@@ -65,13 +65,13 @@
             </v-card-title>
             <v-card-text class="mt-n5">
               <div class="mt-4 d-flex align-center">
-                <v-text-field
+                <v-number-input
                   :model-value="yieldQuantity"
-                  type="number"
+                  :precision="null"
                   :min="0"
                   variant="underlined"
-                  hide-spin-buttons
-                  @update:model-value="recalculateScale(parseFloat($event) || 0)"
+                  control-variant="hidden"
+                  @update:model-value="recalculateScale($event || 0)"
                 />
                 <v-tooltip
                   location="end"