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

Recipe Yield

Browse source
This commit is contained in:
Kuchenpirat 2025-07-30 13:19:38 +00:00
commit 4c79d468d7
1 changed files with 30 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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