Recipe Yield

frontend/components/Domain/Recipe/RecipeYield.vue

@@ -24,38 +24,31 @@
   </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) {
+interface Props {
+  yieldQuantity?: number;
+  yieldText?: string;
+  scale?: number;
+  color?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  yieldQuantity: 0,
+  yieldText: "",
+  scale: 1,
+  color: "accent custom-transparent",
+});
+
+function sanitizeHTML(rawHtml: string) {
   return DOMPurify.sanitize(rawHtml, {
     USE_PROFILES: { html: true },
     ALLOWED_TAGS: ["strong", "sup"],
   });
-    }
+}
 
-    const yieldDisplay = computed<string>(() => {
+const yieldDisplay = computed<string>(() => {
   const components: string[] = [];
 
   const { scaledAmountDisplay } = useScaledAmount(props.yieldQuantity, props.scale);
@@ -69,11 +62,5 @@ export default defineNuxtComponent({
   }
 
   return sanitizeHTML(components.join(" "));
-    });
-
-    return {
-      yieldDisplay,
-    };
-  },
 });
 </script>