From 193b8236887f7e2b87a68bd600e60fcddb6045d1 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 22 Dec 2025 18:45:52 -0600
Subject: [PATCH] feat: Replace number inputs with new v-number-input
 compontent (#6767)

---
 .../components/Domain/QueryFilterBuilder.vue  |  6 +-
 .../Domain/Recipe/RecipeIngredientEditor.vue  |  9 ++-
 .../Domain/Recipe/RecipeNutrition.vue         |  9 ++-
 .../RecipePageParts/RecipePageInfoEditor.vue  | 53 +++-------------
 .../Domain/Recipe/RecipeScaleEditButton.vue   |  8 +--
 .../ShoppingList/ShoppingListItemEditor.vue   | 30 ++++++++-
 frontend/components/global/InputQuantity.vue  | 61 -------------------
 frontend/package.json                         |  2 +-
 .../g/[groupSlug]/recipes/finder/index.vue    | 16 +++--
 frontend/pages/household/mealplan/planner.vue |  6 +-
 frontend/types/components.d.ts                |  2 -
 frontend/yarn.lock                            | 12 ++--
 12 files changed, 80 insertions(+), 134 deletions(-)
 delete mode 100644 frontend/components/global/InputQuantity.vue

diff --git a/frontend/components/Domain/QueryFilterBuilder.vue b/frontend/components/Domain/QueryFilterBuilder.vue
index 8bdb2b948..85b00ad25 100644
--- a/frontend/components/Domain/QueryFilterBuilder.vue
+++ b/frontend/components/Domain/QueryFilterBuilder.vue
@@ -144,11 +144,13 @@
               variant="underlined"
               @update:model-value="setFieldValue(field, index, $event)"
             />
-            <v-text-field
+            <v-number-input
               v-else-if="field.type === 'number'"
               :model-value="field.value"
-              type="number"
               variant="underlined"
+              control-variant="stacked"
+              inset
+              :precision="null"
               @update:model-value="setFieldValue(field, index, $event)"
             />
             <v-checkbox
diff --git a/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue b/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue
index e95837b40..e4af104c2 100644
--- a/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue
+++ b/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"
diff --git a/frontend/components/Domain/Recipe/RecipeNutrition.vue b/frontend/components/Domain/Recipe/RecipeNutrition.vue
index e6710973f..986c11e13 100644
--- a/frontend/components/Domain/Recipe/RecipeNutrition.vue
+++ b/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>
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoEditor.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoEditor.vue
index 31a4cda0a..c502180e7 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoEditor.vue
+++ b/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>
diff --git a/frontend/components/Domain/Recipe/RecipeScaleEditButton.vue b/frontend/components/Domain/Recipe/RecipeScaleEditButton.vue
index 3f237c2f6..1ec117815 100644
--- a/frontend/components/Domain/Recipe/RecipeScaleEditButton.vue
+++ b/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"
diff --git a/frontend/components/Domain/ShoppingList/ShoppingListItemEditor.vue b/frontend/components/Domain/ShoppingList/ShoppingListItemEditor.vue
index d92acc54b..fce1d0f8f 100644
--- a/frontend/components/Domain/ShoppingList/ShoppingListItemEditor.vue
+++ b/frontend/components/Domain/ShoppingList/ShoppingListItemEditor.vue
@@ -4,7 +4,19 @@
       <v-card-text class="pb-3 pt-1">
         <div class="d-md-flex align-center mb-2" style="gap: 20px">
           <div>
-            <InputQuantity v-model="listItem.quantity" />
+            <v-number-input
+              v-model="listItem.quantity"
+              hide-details
+              :label="$t('form.quantity-label-abbreviated')"
+              :min="0"
+              :precision="null"
+              variant="plain"
+              control-variant="stacked"
+              inset
+              density="compact"
+              class="centered-number-input"
+              style="width: 100px;"
+            />
           </div>
           <InputLabelType
             v-model="listItem.unit"
@@ -158,6 +170,15 @@ export default defineNuxtComponent({
       },
     });
 
+    watch(
+      () => props.modelValue.quantity,
+      () => {
+        if (!props.modelValue.quantity) {
+          listItem.value.quantity = 0;
+        }
+      },
+    );
+
     watch(
       () => props.modelValue.food,
       (newFood) => {
@@ -221,3 +242,10 @@ export default defineNuxtComponent({
   },
 });
 </script>
+
+<style scoped>
+.centered-number-input :deep(.v-field) {
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/frontend/components/global/InputQuantity.vue b/frontend/components/global/InputQuantity.vue
deleted file mode 100644
index ab7e6cd45..000000000
--- a/frontend/components/global/InputQuantity.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <div
-    class="d-flex align-center"
-    style="max-width: 60px"
-  >
-    <v-text-field
-      v-model.number="quantity"
-      hide-details
-      :label="$t('form.quantity-label-abbreviated')"
-      :min="min"
-      :max="max"
-      type="number"
-      variant="plain"
-      density="compact"
-      style="width: 60px;"
-    />
-  </div>
-</template>
-
-<script lang="ts">
-export default defineNuxtComponent({
-  name: "VInputNumber",
-  props: {
-    min: {
-      type: Number,
-      default: 0,
-    },
-    max: {
-      type: Number,
-      default: 9999,
-    },
-    rules: {
-      type: Array,
-      default: () => [],
-    },
-    step: {
-      type: Number,
-      default: 1,
-    },
-    modelValue: {
-      type: Number,
-      default: 0,
-    },
-  },
-  emits: ["update:modelValue"],
-  setup(props, context) {
-    const quantity = computed({
-      get: () => {
-        return Number(props.modelValue);
-      },
-      set: (val) => {
-        context.emit("update:modelValue", val);
-      },
-    });
-
-    return {
-      quantity,
-    };
-  },
-});
-</script>
diff --git a/frontend/package.json b/frontend/package.json
index cf3760b16..671b8b11d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -34,7 +34,7 @@
     "vue-advanced-cropper": "^2.8.9",
     "vue-draggable-plus": "^0.6.0",
     "vuetify": "^3.9.7",
-    "vuetify-nuxt-module": "^0.18.8"
+    "vuetify-nuxt-module": "^0.18.9"
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.2.0",
diff --git a/frontend/pages/g/[groupSlug]/recipes/finder/index.vue b/frontend/pages/g/[groupSlug]/recipes/finder/index.vue
index 2e208d008..39df6cccd 100644
--- a/frontend/pages/g/[groupSlug]/recipes/finder/index.vue
+++ b/frontend/pages/g/[groupSlug]/recipes/finder/index.vue
@@ -134,18 +134,22 @@
                   <v-card>
                     <v-card-text>
                       <div>
-                        <v-text-field
+                        <v-number-input
                           v-model="settings.maxMissingFoods"
-                          type="number"
+                          :precision="null"
+                          :min="0"
+                          control-variant="stacked"
+                          inset
                           hide-details
-                          hide-spin-buttons
                           :label="$t('recipe-finder.max-missing-ingredients')"
                         />
-                        <v-text-field
+                        <v-number-input
                           v-model="settings.maxMissingTools"
-                          type="number"
+                          :precision="null"
+                          :min="0"
+                          control-variant="stacked"
+                          inset
                           hide-details
-                          hide-spin-buttons
                           :label="$t('recipe-finder.max-missing-tools')"
                           class="mt-4"
                         />
diff --git a/frontend/pages/household/mealplan/planner.vue b/frontend/pages/household/mealplan/planner.vue
index ddf675bac..58d91bbc1 100644
--- a/frontend/pages/household/mealplan/planner.vue
+++ b/frontend/pages/household/mealplan/planner.vue
@@ -30,9 +30,11 @@
         />
 
         <v-card-text>
-          <v-text-field
+          <v-number-input
             v-model="numberOfDays"
-            type="number"
+            :min="1"
+            control-variant="stacked"
+            inset
             :label="$t('meal-plan.numberOfDays-label')"
             :hint="$t('meal-plan.numberOfDays-hint')"
             persistent-hint
diff --git a/frontend/types/components.d.ts b/frontend/types/components.d.ts
index 6ebc0529c..fd43c02d1 100644
--- a/frontend/types/components.d.ts
+++ b/frontend/types/components.d.ts
@@ -27,7 +27,6 @@ import type HelpIcon from "@/components/global/HelpIcon.vue";
 import type ImageCropper from "@/components/global/ImageCropper.vue";
 import type InputColor from "@/components/global/InputColor.vue";
 import type InputLabelType from "@/components/global/InputLabelType.vue";
-import type InputQuantity from "@/components/global/InputQuantity.vue";
 import type LanguageDialog from "@/components/global/LanguageDialog.vue";
 import type MarkdownEditor from "@/components/global/MarkdownEditor.vue";
 import type RecipeJsonEditor from "@/components/global/RecipeJsonEditor.vue";
@@ -69,7 +68,6 @@ declare module "vue" {
     ImageCropper: typeof ImageCropper;
     InputColor: typeof InputColor;
     InputLabelType: typeof InputLabelType;
-    InputQuantity: typeof InputQuantity;
     LanguageDialog: typeof LanguageDialog;
     MarkdownEditor: typeof MarkdownEditor;
     RecipeJsonEditor: typeof RecipeJsonEditor;
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index ca2366214..5ba736008 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -11082,7 +11082,7 @@ vite-plugin-vue-tracer@^1.0.1:
     pathe "^2.0.3"
     source-map-js "^1.2.1"
 
-vite-plugin-vuetify@^2.1.0:
+vite-plugin-vuetify@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/vite-plugin-vuetify/-/vite-plugin-vuetify-2.1.2.tgz#8e28dcb5b20f4635d350010547654cf2b4dad373"
   integrity sha512-I/wd6QS+DO6lHmuGoi1UTyvvBTQ2KDzQZ9oowJQEJ6OcjWfJnscYXx2ptm6S7fJSASuZT8jGRBL3LV4oS3LpaA==
@@ -11224,10 +11224,10 @@ vue@^3.4, vue@^3.5.13, vue@^3.5.22:
     "@vue/server-renderer" "3.5.22"
     "@vue/shared" "3.5.22"
 
-vuetify-nuxt-module@^0.18.8:
-  version "0.18.8"
-  resolved "https://registry.yarnpkg.com/vuetify-nuxt-module/-/vuetify-nuxt-module-0.18.8.tgz#04b7b04606cbf22cb9b8317309db6166a8058654"
-  integrity sha512-57J0MgmRTyEX4ZIIXZUyY+UodDi+hoJ9/UnUZQoBbpTc/9WAZyRonaJedIcHLnTBKyIxxWdvtWHkJdosngX3NQ==
+vuetify-nuxt-module@^0.18.9:
+  version "0.18.9"
+  resolved "https://registry.yarnpkg.com/vuetify-nuxt-module/-/vuetify-nuxt-module-0.18.9.tgz#154b8f8e689da4fac3bcb2372ef0e745b8e0b536"
+  integrity sha512-jr+Hujsw5U465LKJD1/SQgqJIXuJNbXM0HOp9vPmtPFPlGFwZ4kb1YfUPNmuCEDaSIY6rkb7+W+FEJvt9PQELQ==
   dependencies:
     "@nuxt/kit" "^3.12.4"
     defu "^6.1.4"
@@ -11238,7 +11238,7 @@ vuetify-nuxt-module@^0.18.8:
     ufo "^1.5.4"
     unconfig "^0.5.5"
     upath "^2.0.1"
-    vite-plugin-vuetify "^2.1.0"
+    vite-plugin-vuetify "^2.1.2"
     vuetify "^3.7.0"
 
 vuetify@^3.7.0: