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

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>