print view & container

frontend/components/Domain/Recipe/RecipePrintContainer.vue

@@ -8,24 +8,17 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import RecipePrintView from "~/components/Domain/Recipe/RecipePrintView.vue";
 import type { Recipe } from "~/lib/api/types/recipe";
 
-export default defineNuxtComponent({
-  components: {
-    RecipePrintView,
-  },
-  props: {
-    recipe: {
-      type: Object as () => Recipe,
-      required: true,
-    },
-    scale: {
-      type: Number,
-      default: 1,
-    },
-  },
+interface Props {
+  recipe: Recipe;
+  scale?: number;
+}
+
+withDefaults(defineProps<Props>(), {
+  scale: 1,
 });
 </script>
 

frontend/components/Domain/Recipe/RecipePrintView.vue

@@ -166,7 +166,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import DOMPurify from "dompurify";
 import RecipeTimeCard from "~/components/Domain/Recipe/RecipeTimeCard.vue";
 import { useStaticRoutes } from "~/composables/api";
@@ -188,25 +188,16 @@ type InstructionSection = {
   instructions: RecipeStep[];
 };
 
-export default defineNuxtComponent({
-  components: {
-    RecipeTimeCard,
-  },
-  props: {
-    recipe: {
-      type: Object as () => NoUndefinedField<Recipe>,
-      required: true,
-    },
-    scale: {
-      type: Number,
-      default: 1,
-    },
-    dense: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props) {
+interface Props {
+  recipe: NoUndefinedField<Recipe>;
+  scale?: number;
+  dense?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  scale: 1,
+  dense: false,
+});
+
 const i18n = useI18n();
 const preferences = useUserPrintPreferences();
 const { recipeImage } = useStaticRoutes();
@@ -219,7 +210,6 @@ export default defineNuxtComponent({
     ALLOWED_TAGS: ["strong", "sup"],
   });
 }
-
 const servingsDisplay = computed(() => {
   const { scaledAmountDisplay } = useScaledAmount(props.recipe.recipeYieldQuantity, props.scale);
   return scaledAmountDisplay || props.recipe.recipeYield
@@ -333,22 +323,6 @@ export default defineNuxtComponent({
 function parseText(ingredient: RecipeIngredient) {
   return parseIngredientText(ingredient, props.recipe.settings?.disableAmount || false, props.scale);
 }
-
-    return {
-      labels,
-      hasNotes,
-      imageKey,
-      ImagePosition,
-      parseText,
-      parseIngredientText,
-      preferences,
-      recipeImageUrl,
-      recipeYield,
-      ingredientSections,
-      instructionSections,
-    };
-  },
-});
 </script>
 
 <style scoped>