RecipePageInfoEditor use v-model instead of prop and turn into script setup

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

@@ -28,7 +28,7 @@
             data management and mutation system we're using.
           -->
           <div>
-            <RecipePageInfoEditor v-if="isEditMode" :recipe="recipe" :landscape="landscape" />
+            <RecipePageInfoEditor v-if="isEditMode" v-model="recipe" />
           </div>
           <div>
             <RecipePageEditorToolbar v-if="isEditForm" v-model="recipe" />

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

@@ -79,58 +79,43 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { validators } from "~/composables/use-validators";
 import type { NoUndefinedField } from "~/lib/api/types/non-generated";
 import type { Recipe } from "~/lib/api/types/recipe";
 
-export default defineNuxtComponent({
+const recipe = defineModel<NoUndefinedField<Recipe>>({ required: true });
-  props: {
+
-    recipe: {
+const recipeServings = computed<number>({
-      type: Object as () => NoUndefinedField<Recipe>,
+  get() {
-      required: true,
+    return recipe.value.recipeServings;
-    },
   },
-  setup(props) {
+  set(val) {
-    const recipeServings = computed<number>({
+    validateInput(val.toString(), "recipeServings");
-      get() {
-        return props.recipe.recipeServings;
-      },
-      set(val) {
-        validateInput(val.toString(), "recipeServings");
-      },
-    });
-
-    const recipeYieldQuantity = computed<number>({
-      get() {
-        return props.recipe.recipeYieldQuantity;
-      },
-      set(val) {
-        validateInput(val.toString(), "recipeYieldQuantity");
-      },
-    });
-
-    function validateInput(value: string | null, property: "recipeServings" | "recipeYieldQuantity") {
-      if (!value) {
-        props.recipe[property] = 0;
-        return;
-      }
-
-      const number = parseFloat(value.replace(/[^0-9.]/g, ""));
-      if (isNaN(number) || number <= 0) {
-        props.recipe[property] = 0;
-        return;
-      }
-
-      props.recipe[property] = number;
-    }
-
-    return {
-      validators,
-      recipeServings,
-      recipeYieldQuantity,
-      validateInput,
-    };
   },
 });
+
+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>