chore: script setup #3 - recipe components (#5849)

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>