From 4c79d468d794a3b548be369f2c7f08a861871d3d Mon Sep 17 00:00:00 2001
From: Kuchenpirat <jojow@gmx.net>
Date: Wed, 30 Jul 2025 13:19:38 +0000
Subject: [PATCH] Recipe Yield

---
 .../components/Domain/Recipe/RecipeYield.vue  | 73 ++++++++-----------
 1 file changed, 30 insertions(+), 43 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeYield.vue b/frontend/components/Domain/Recipe/RecipeYield.vue
index acb34dd7e..892b74fbe 100644
--- a/frontend/components/Domain/Recipe/RecipeYield.vue
+++ b/frontend/components/Domain/Recipe/RecipeYield.vue
@@ -24,56 +24,43 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import DOMPurify from "dompurify";
 import { useScaledAmount } from "~/composables/recipes/use-scaled-amount";
 
-export default defineNuxtComponent({
-  props: {
-    yieldQuantity: {
-      type: Number,
-      default: 0,
-    },
-    yieldText: {
-      type: String,
-      default: "",
-    },
-    scale: {
-      type: Number,
-      default: 1,
-    },
-    color: {
-      type: String,
-      default: "accent custom-transparent",
-    },
-  },
-  setup(props) {
-    function sanitizeHTML(rawHtml: string) {
-      return DOMPurify.sanitize(rawHtml, {
-        USE_PROFILES: { html: true },
-        ALLOWED_TAGS: ["strong", "sup"],
-      });
-    }
+interface Props {
+  yieldQuantity?: number;
+  yieldText?: string;
+  scale?: number;
+  color?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  yieldQuantity: 0,
+  yieldText: "",
+  scale: 1,
+  color: "accent custom-transparent",
+});
 
-    const yieldDisplay = computed<string>(() => {
-      const components: string[] = [];
+function sanitizeHTML(rawHtml: string) {
+  return DOMPurify.sanitize(rawHtml, {
+    USE_PROFILES: { html: true },
+    ALLOWED_TAGS: ["strong", "sup"],
+  });
+}
 
-      const { scaledAmountDisplay } = useScaledAmount(props.yieldQuantity, props.scale);
-      if (scaledAmountDisplay) {
-        components.push(scaledAmountDisplay);
-      }
+const yieldDisplay = computed<string>(() => {
+  const components: string[] = [];
 
-      const text = props.yieldText;
-      if (text) {
-        components.push(text);
-      }
+  const { scaledAmountDisplay } = useScaledAmount(props.yieldQuantity, props.scale);
+  if (scaledAmountDisplay) {
+    components.push(scaledAmountDisplay);
+  }
 
-      return sanitizeHTML(components.join(" "));
-    });
+  const text = props.yieldText;
+  if (text) {
+    components.push(text);
+  }
 
-    return {
-      yieldDisplay,
-    };
-  },
+  return sanitizeHTML(components.join(" "));
 });
 </script>