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

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

@@ -149,7 +149,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { invoke, until } from "@vueuse/core";
 import RecipeIngredients from "../RecipeIngredients.vue";
 import RecipePageEditorToolbar from "./RecipePageParts/RecipePageEditorToolbar.vue";
@@ -186,121 +186,99 @@ const EDITOR_OPTIONS = {
   mainMenuBar: false,
 };
 
-export default defineNuxtComponent({
-  components: {
-    RecipePageHeader,
-    RecipePrintContainer,
-    RecipePageComments,
-    RecipePageInfoEditor,
-    RecipePageEditorToolbar,
-    RecipePageIngredientEditor,
-    RecipePageOrganizers,
-    RecipePageScale,
-    RecipePageIngredientToolsView,
-    RecipeDialogBulkAdd,
-    RecipeNotes,
-    RecipePageInstructions,
-    RecipePageFooter,
-    RecipeIngredients,
-  },
-  props: {
-    recipe: {
-      type: Object as () => NoUndefinedField<Recipe>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const { $vuetify } = useNuxtApp();
-    const i18n = useI18n();
-    const $auth = useMealieAuth();
-    const route = useRoute();
+const recipe = defineModel<NoUndefinedField<Recipe>>({ required: true });
 
-    const groupSlug = computed(() => (route.params.groupSlug as string) || $auth.user?.value?.groupSlug || "");
-    const { isOwnGroup } = useLoggedInState();
+const { $vuetify } = useNuxtApp();
+const i18n = useI18n();
+const $auth = useMealieAuth();
+const route = useRoute();
 
-    const router = useRouter();
-    const api = useUserApi();
-    const { pageMode, editMode, setMode, isEditForm, isEditJSON, isCookMode, isEditMode, toggleCookMode }
-      = usePageState(props.recipe.slug);
-    const { deactivateNavigationWarning } = useNavigationWarning();
-    const notLinkedIngredients = computed(() => {
-      return props.recipe.recipeIngredient.filter((ingredient) => {
-        return !props.recipe.recipeInstructions.some(step =>
+const groupSlug = computed(() => (route.params.groupSlug as string) || $auth.user?.value?.groupSlug || "");
+const { isOwnGroup } = useLoggedInState();
+
+const router = useRouter();
+const api = useUserApi();
+const { pageMode, editMode, setMode, isEditForm, isEditJSON, isCookMode, isEditMode, toggleCookMode }
+  = usePageState(recipe.value.slug);
+const { deactivateNavigationWarning } = useNavigationWarning();
+const notLinkedIngredients = computed(() => {
+  return recipe.value.recipeIngredient.filter((ingredient) => {
+    return !recipe.value.recipeInstructions.some(step =>
       step.ingredientReferences?.map(ref => ref.referenceId).includes(ingredient.referenceId),
     );
   });
-    });
+});
 
-    /** =============================================================
+/** =============================================================
  * Recipe Snapshot on Mount
  * this is used to determine if the recipe has been changed since the last save
  * and prompts the user to save if they have unsaved changes.
  */
-    const originalRecipe = ref<Recipe | null>(null);
+const originalRecipe = ref<Recipe | null>(null);
 
-    invoke(async () => {
-      await until(props.recipe).not.toBeNull();
-      originalRecipe.value = deepCopy(props.recipe);
-    });
+invoke(async () => {
+  await until(recipe.value).not.toBeNull();
+  originalRecipe.value = deepCopy(recipe.value);
+});
 
-    onUnmounted(async () => {
-      const isSame = JSON.stringify(props.recipe) === JSON.stringify(originalRecipe.value);
-      if (isEditMode.value && !isSame && props.recipe?.slug !== undefined) {
+onUnmounted(async () => {
+  const isSame = JSON.stringify(recipe.value) === JSON.stringify(originalRecipe.value);
+  if (isEditMode.value && !isSame && recipe.value?.slug !== undefined) {
     const save = window.confirm(i18n.t("general.unsaved-changes"));
 
     if (save) {
-          await api.recipes.updateOne(props.recipe.slug, props.recipe);
+      await api.recipes.updateOne(recipe.value.slug, recipe.value);
     }
   }
   deactivateNavigationWarning();
   toggleCookMode();
 
-      clearPageState(props.recipe.slug || "");
+  clearPageState(recipe.value.slug || "");
   console.debug("reset RecipePage state during unmount");
-    });
-    const hasLinkedIngredients = computed(() => {
-      return props.recipe.recipeInstructions.some(
+});
+const hasLinkedIngredients = computed(() => {
+  return recipe.value.recipeInstructions.some(
     step => step.ingredientReferences && step.ingredientReferences.length > 0,
   );
-    });
-    /** =============================================================
+});
+/** =============================================================
  * Set State onMounted
  */
 
-    type BooleanString = "true" | "false" | "";
+type BooleanString = "true" | "false" | "";
 
-    const edit = useRouteQuery<BooleanString>("edit", "");
+const edit = useRouteQuery<BooleanString>("edit", "");
 
-    onMounted(() => {
+onMounted(() => {
   if (edit.value === "true") {
     setMode(PageMode.EDIT);
   }
-    });
+});
 
-    /** =============================================================
+/** =============================================================
  * Recipe Save Delete
  */
 
-    async function saveRecipe() {
-      const { data } = await api.recipes.updateOne(props.recipe.slug, props.recipe);
+async function saveRecipe() {
+  const { data } = await api.recipes.updateOne(recipe.value.slug, recipe.value);
   setMode(PageMode.VIEW);
   if (data?.slug) {
     router.push(`/g/${groupSlug.value}/r/` + data.slug);
   }
-    }
+}
 
-    async function deleteRecipe() {
-      const { data } = await api.recipes.deleteOne(props.recipe.slug);
+async function deleteRecipe() {
+  const { data } = await api.recipes.deleteOne(recipe.value.slug);
   if (data?.slug) {
     router.push(`/g/${groupSlug.value}`);
   }
-    }
+}
 
-    /** =============================================================
+/** =============================================================
  * View Preferences
  */
-    const landscape = computed(() => {
-      const preferLandscape = props.recipe.settings.landscapeView;
+const landscape = computed(() => {
+  const preferLandscape = recipe.value.settings.landscapeView;
   const smallScreen = !$vuetify.display.smAndUp.value;
 
   if (preferLandscape) {
@@ -311,15 +289,15 @@ export default defineNuxtComponent({
   }
 
   return false;
-    });
+});
 
-    /** =============================================================
+/** =============================================================
  * Bulk Step Editor
  * TODO: Move to RecipePageInstructions component
  */
 
-    function addStep(steps: Array<string> | null = null) {
-      if (!props.recipe.recipeInstructions) {
+function addStep(steps: Array<string> | null = null) {
+  if (!recipe.value.recipeInstructions) {
     return;
   }
 
@@ -328,10 +306,10 @@ export default defineNuxtComponent({
       return { id: uuid4(), text: step, title: "", ingredientReferences: [] };
     });
 
-        props.recipe.recipeInstructions.push(...cleanedSteps);
+    recipe.value.recipeInstructions.push(...cleanedSteps);
   }
   else {
-        props.recipe.recipeInstructions.push({
+    recipe.value.recipeInstructions.push({
       id: uuid4(),
       text: "",
       title: "",
@@ -339,50 +317,28 @@ export default defineNuxtComponent({
       ingredientReferences: [],
     });
   }
-    }
+}
 
-    /** =============================================================
+/** =============================================================
  * Meta Tags
  */
-    const { user } = usePageUser();
+const { user } = usePageUser();
 
-    /** =============================================================
+/** =============================================================
  * RecipeChip Clicked
  */
 
-    function chipClicked(item: RecipeTag | RecipeCategory | RecipeTool, itemType: string) {
+function chipClicked(item: RecipeTag | RecipeCategory | RecipeTool, itemType: string) {
   if (!item.id) {
     return;
   }
   router.push(`/g/${groupSlug.value}?${itemType}=${item.id}`);
-    }
+}
 
-    return {
-      user,
-      isOwnGroup,
-      api,
-      scale: ref(1),
-      EDITOR_OPTIONS,
-      landscape,
+const scale = ref(1);
 
-      pageMode,
-      editMode,
-      PageMode,
-      EditorMode,
-      isEditMode,
-      isEditForm,
-      isEditJSON,
-      isCookMode,
-      toggleCookMode,
-      saveRecipe,
-      deleteRecipe,
-      addStep,
-      hasLinkedIngredients,
-      notLinkedIngredients,
-      chipClicked,
-    };
-  },
-});
+// expose to template
+// (all variables used in template are top-level in <script setup>)
 </script>
 
 <style lang="css">

frontend/pages/g/[groupSlug]/r/[slug]/index.vue

@@ -2,7 +2,7 @@
   <div>
     <RecipePage
       v-if="recipe"
-      :recipe="recipe"
+      v-model="recipe"
     />
   </div>
 </template>

frontend/pages/g/[groupSlug]/shared/r/[id].vue

@@ -3,7 +3,7 @@
     <client-only>
       <RecipePage
         v-if="recipe"
-        :recipe="recipe"
+        v-model="recipe"
       />
     </client-only>
   </div>