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 time card

Browse source
This commit is contained in:
Kuchenpirat 2025-07-30 12:58:49 +00:00
commit 1ac45d79ad
1 changed files with 34 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

87
frontend/components/Domain/Recipe/RecipeTimeCard.vue
View file

@ -1,4 +1,4 @@
<template v-if="showCards"> <template v-if="_showCards">
<div class="text-center"> <div class="text-center">
<!-- Total Time --> <!-- Total Time -->
<div <div
@ -78,65 +78,46 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
export default defineNuxtComponent({ interface Props {
props: { prepTime?: string | null;
prepTime: { totalTime?: string | null;
type: String, performTime?: string | null;
default: null, color?: string;
}, small?: boolean;
totalTime: { }
type: String, const props = withDefaults(defineProps<Props>(), {
default: null, prepTime: null,
}, totalTime: null,
performTime: { performTime: null,
type: String, color: "accent custom-transparent",
default: null, small: false,
}, });
color: {
type: String,
default: "accent custom-transparent",
},
small: {
type: Boolean,
default: false,
},
},
setup(props) {
const i18n = useI18n();
function isEmpty(str: string | null) { const i18n = useI18n();
return !str || str.length === 0;
}
const showCards = computed(() => { function isEmpty(str: string | null) {
return [props.prepTime, props.totalTime, props.performTime].some(x => !isEmpty(x)); return !str || str.length === 0;
}); }
const validateTotalTime = computed(() => { const _showCards = computed(() => {
return !isEmpty(props.totalTime) ? { name: i18n.t("recipe.total-time"), value: props.totalTime } : null; return [props.prepTime, props.totalTime, props.performTime].some(x => !isEmpty(x));
}); });
const validatePrepTime = computed(() => { const validateTotalTime = computed(() => {
return !isEmpty(props.prepTime) ? { name: i18n.t("recipe.prep-time"), value: props.prepTime } : null; return !isEmpty(props.totalTime) ? { name: i18n.t("recipe.total-time"), value: props.totalTime } : null;
}); });
const validatePerformTime = computed(() => { const validatePrepTime = computed(() => {
return !isEmpty(props.performTime) ? { name: i18n.t("recipe.perform-time"), value: props.performTime } : null; return !isEmpty(props.prepTime) ? { name: i18n.t("recipe.prep-time"), value: props.prepTime } : null;
}); });
const fontSize = computed(() => { const validatePerformTime = computed(() => {
return props.small ? { fontSize: "smaller" } : { fontSize: "larger" }; return !isEmpty(props.performTime) ? { name: i18n.t("recipe.perform-time"), value: props.performTime } : null;
}); });
return { const fontSize = computed(() => {
showCards, return props.small ? { fontSize: "smaller" } : { fontSize: "larger" };
validateTotalTime,
validatePrepTime,
validatePerformTime,
fontSize,
};
},
}); });
</script> </script>