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,39 +188,29 @@ 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) {
-    const i18n = useI18n();
-    const preferences = useUserPrintPreferences();
-    const { recipeImage } = useStaticRoutes();
-    const { imageKey } = usePageState(props.recipe.slug);
-    const { labels } = useNutritionLabels();
+interface Props {
+  recipe: NoUndefinedField<Recipe>;
+  scale?: number;
+  dense?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  scale: 1,
+  dense: false,
+});
 
-    function sanitizeHTML(rawHtml: string) {
+const i18n = useI18n();
+const preferences = useUserPrintPreferences();
+const { recipeImage } = useStaticRoutes();
+const { imageKey } = usePageState(props.recipe.slug);
+const { labels } = useNutritionLabels();
+
+function sanitizeHTML(rawHtml: string) {
   return DOMPurify.sanitize(rawHtml, {
     USE_PROFILES: { html: true },
     ALLOWED_TAGS: ["strong", "sup"],
   });
-    }
-
-    const servingsDisplay = computed(() => {
+}
+const servingsDisplay = computed(() => {
   const { scaledAmountDisplay } = useScaledAmount(props.recipe.recipeYieldQuantity, props.scale);
   return scaledAmountDisplay || props.recipe.recipeYield
     ? i18n.t("recipe.yields-amount-with-text", {
@@ -228,28 +218,28 @@ export default defineNuxtComponent({
       text: props.recipe.recipeYield,
     }) as string
     : "";
-    });
+});
 
-    const yieldDisplay = computed(() => {
+const yieldDisplay = computed(() => {
   const { scaledAmountDisplay } = useScaledAmount(props.recipe.recipeServings, props.scale);
   return scaledAmountDisplay ? i18n.t("recipe.serves-amount", { amount: scaledAmountDisplay }) as string : "";
-    });
+});
 
-    const recipeYield = computed(() => {
+const recipeYield = computed(() => {
   if (servingsDisplay.value && yieldDisplay.value) {
     return sanitizeHTML(`${yieldDisplay.value}; ${servingsDisplay.value}`);
   }
   else {
     return sanitizeHTML(yieldDisplay.value || servingsDisplay.value);
   }
-    });
+});
 
-    const recipeImageUrl = computed(() => {
+const recipeImageUrl = computed(() => {
   return recipeImage(props.recipe.id, props.recipe.image, imageKey.value);
-    });
+});
 
-    // Group ingredients by section so we can style them independently
-    const ingredientSections = computed<IngredientSection[]>(() => {
+// Group ingredients by section so we can style them independently
+const ingredientSections = computed<IngredientSection[]>(() => {
   if (!props.recipe.recipeIngredient) {
     return [];
   }
@@ -279,10 +269,10 @@ export default defineNuxtComponent({
     sections[sections.length - 1].ingredients.push(ingredient);
     return sections;
   }, [] as IngredientSection[]);
-    });
+});
 
-    // Group instructions by section so we can style them independently
-    const instructionSections = computed<InstructionSection[]>(() => {
+// Group instructions by section so we can style them independently
+const instructionSections = computed<InstructionSection[]>(() => {
   if (!props.recipe.recipeInstructions) {
     return [];
   }
@@ -324,31 +314,15 @@ export default defineNuxtComponent({
     sections[sections.length - 1].instructions.push(step);
     return sections;
   }, [] as InstructionSection[]);
-    });
-
-    const hasNotes = computed(() => {
-      return props.recipe.notes && props.recipe.notes.length > 0;
-    });
-
-    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,
-    };
-  },
 });
+
+const hasNotes = computed(() => {
+  return props.recipe.notes && props.recipe.notes.length > 0;
+});
+
+function parseText(ingredient: RecipeIngredient) {
+  return parseIngredientText(ingredient, props.recipe.settings?.disableAmount || false, props.scale);
+}
 </script>
 
 <style scoped>