github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-08-22 06:23:34 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 17

simplify/combine yield amount and text

Browse source
This commit is contained in:
Michael Genson 2025-07-28 16:12:32 +00:00
commit a074cff779
1 changed files with 16 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

23
frontend/components/Domain/Recipe/RecipeYield.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div <div
v-if="scaledAmount" v-if="yieldDisplay"
class="d-flex align-center" class="d-flex align-center"
> >
<v-row <v-row
@ -18,7 +18,7 @@
<p class="my-0 opacity-80"> <p class="my-0 opacity-80">
<span class="font-weight-bold">{{ $t("recipe.yield") }}</span><br> <span class="font-weight-bold">{{ $t("recipe.yield") }}</span><br>
<!-- eslint-disable-next-line vue/no-v-html --> <!-- eslint-disable-next-line vue/no-v-html -->
<span v-html="scaledAmount" /> {{ text }} <span v-html="yieldDisplay" />
</p> </p>
</v-row> </v-row>
</div> </div>
@ -55,15 +55,24 @@ export default defineNuxtComponent({
}); });
} }
const scaledAmount = computed(() => { const yieldDisplay = computed<string>(() => {
const components: string[] = [];
const { scaledAmountDisplay } = useScaledAmount(props.yieldQuantity, props.scale); const { scaledAmountDisplay } = useScaledAmount(props.yieldQuantity, props.scale);
return scaledAmountDisplay; if (scaledAmountDisplay) {
components.push(scaledAmountDisplay);
}
const text = props.yieldText;
if (text) {
components.push(text);
}
return sanitizeHTML(components.join(" "));
}); });
const text = sanitizeHTML(props.yieldText);
return { return {
scaledAmount, yieldDisplay,
text,
}; };
}, },
}); });