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

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

@@ -34,7 +34,7 @@
             <RecipePageEditorToolbar v-if="isEditForm" v-model="recipe" />
           </div>
           <div>
-            <RecipePageIngredientEditor v-if="isEditForm" :recipe="recipe" />
+            <RecipePageIngredientEditor v-if="isEditForm" v-model="recipe" />
           </div>
           <div>
             <RecipePageScale v-model:scale="scale" :recipe="recipe" />

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

@@ -77,56 +77,39 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { VueDraggable } from "vue-draggable-plus";
-import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
 import type { NoUndefinedField } from "~/lib/api/types/non-generated";
 import type { Recipe } from "~/lib/api/types/recipe";
 import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
 import RecipeDialogBulkAdd from "~/components/Domain/Recipe/RecipeDialogBulkAdd.vue";
 import { uuid4 } from "~/composables/use-utils";
 
-export default defineNuxtComponent({
-  components: {
-    VueDraggable,
-    RecipeDialogBulkAdd,
-    RecipeIngredientEditor,
-  },
-  props: {
-    recipe: {
-      type: Object as () => NoUndefinedField<Recipe>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const { user } = usePageUser();
-    const { imageKey } = usePageState(props.recipe.slug);
+const recipe = defineModel<NoUndefinedField<Recipe>>({ required: true });
 const i18n = useI18n();
-    const $auth = useMealieAuth(); // Using useMealieAuth directly
+const $auth = useMealieAuth();
 
 const drag = ref(false);
 
 const route = useRoute();
-    // Note: $auth.user is a ref, so we need to use .value to access its properties
 const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
 
 const hasFoodOrUnit = computed(() => {
-      if (!props.recipe) {
+  if (!recipe.value) {
     return false;
   }
-      if (props.recipe.recipeIngredient) {
-        for (const ingredient of props.recipe.recipeIngredient) {
+  if (recipe.value.recipeIngredient) {
+    for (const ingredient of recipe.value.recipeIngredient) {
       if (ingredient.food || ingredient.unit) {
         return true;
       }
     }
   }
-
   return false;
 });
 
 const parserToolTip = computed(() => {
-      if (props.recipe.settings.disableAmount) {
+  if (recipe.value.settings.disableAmount) {
     return i18n.t("recipe.enable-ingredient-amounts-to-use-this-feature");
   }
   else if (hasFoodOrUnit.value) {
@@ -151,11 +134,11 @@ export default defineNuxtComponent({
 
     if (newIngredients) {
       // @ts-expect-error - prop can be null-type by NoUndefinedField type forces it to be set
-          props.recipe.recipeIngredient.push(...newIngredients);
+      recipe.value.recipeIngredient.push(...newIngredients);
     }
   }
   else {
-        props.recipe.recipeIngredient.push({
+    recipe.value.recipeIngredient.push({
       referenceId: uuid4(),
       title: "",
       note: "",
@@ -170,7 +153,7 @@ export default defineNuxtComponent({
 }
 
 function insertNewIngredient(dest: number) {
-      props.recipe.recipeIngredient.splice(dest, 0, {
+  recipe.value.recipeIngredient.splice(dest, 0, {
     referenceId: uuid4(),
     title: "",
     note: "",
@@ -182,17 +165,4 @@ export default defineNuxtComponent({
     quantity: 1,
   });
 }
-
-    return {
-      user,
-      groupSlug,
-      addIngredient,
-      parserToolTip,
-      hasFoodOrUnit,
-      imageKey,
-      drag,
-      insertNewIngredient,
-    };
-  },
-});
 </script>