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

Scale Button

Browse source
This commit is contained in:
Kuchenpirat 2025-07-30 12:42:15 +00:00
commit 616e04bf17
1 changed files with 42 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

80
frontend/components/Domain/Recipe/RecipeScaleEditButton.vue
View file

@ -10,7 +10,7 @@
nudge-top="6" nudge-top="6"
:close-on-content-click="false" :close-on-content-click="false"
> >
<template #activator="{ props }"> <template #activator="{ props: activatorProps }">
<v-tooltip <v-tooltip
v-if="canEditScale" v-if="canEditScale"
size="small" size="small"
@ -23,7 +23,7 @@
dark dark
color="secondary-darken-1" color="secondary-darken-1"
size="small" size="small"
v-bind="{ ...props, ...tooltipProps }" v-bind="{ ...activatorProps, ...tooltipProps }"
:style="{ cursor: canEditScale ? '' : 'default' }" :style="{ cursor: canEditScale ? '' : 'default' }"
> >
<v-icon <v-icon
@ -45,7 +45,7 @@
dark dark
color="secondary-darken-1" color="secondary-darken-1"
size="small" size="small"
v-bind="props" v-bind="activatorProps"
:style="{ cursor: canEditScale ? '' : 'default' }" :style="{ cursor: canEditScale ? '' : 'default' }"
> >
<v-icon <v-icon
@ -77,9 +77,9 @@
location="end" location="end"
color="secondary-darken-1" color="secondary-darken-1"
> >
<template #activator="{ props }"> <template #activator="{ props: resetTooltipProps }">
<v-btn <v-btn
v-bind="props" v-bind="resetTooltipProps"
icon icon
flat flat
class="mx-1" class="mx-1"
@ -122,39 +122,25 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { useScaledAmount } from "~/composables/recipes/use-scaled-amount"; import { useScaledAmount } from "~/composables/recipes/use-scaled-amount";
export default defineNuxtComponent({ interface Props {
props: { recipeServings?: number;
modelValue: { editScale?: boolean;
type: Number, }
required: true, const props = withDefaults(defineProps<Props>(), {
}, recipeServings: 0,
recipeServings: { editScale: false,
type: Number, });
default: 0,
},
editScale: {
type: Boolean,
default: false,
},
},
emits: ["update:modelValue"],
setup(props, { emit }) {
const i18n = useI18n();
const menu = ref<boolean>(false);
const canEditScale = computed(() => props.editScale && props.recipeServings > 0);
const scale = computed({ const scale = defineModel<number>({ required: true });
get: () => props.modelValue,
set: (value) => {
const newScaleNumber = parseFloat(`${value}`);
emit("update:modelValue", isNaN(newScaleNumber) ? 0 : newScaleNumber);
},
});
function recalculateScale(newYield: number) { const i18n = useI18n();
const menu = ref<boolean>(false);
const canEditScale = computed(() => props.editScale && props.recipeServings > 0);
function recalculateScale(newYield: number) {
if (isNaN(newYield) || newYield <= 0) { if (isNaN(newYield) || newYield <= 0) {
return; return;
} }
@ -165,33 +151,21 @@ export default defineNuxtComponent({
else { else {
scale.value = newYield / props.recipeServings; scale.value = newYield / props.recipeServings;
} }
} }
const recipeYieldAmount = computed(() => { const recipeYieldAmount = computed(() => {
return useScaledAmount(props.recipeServings, scale.value); return useScaledAmount(props.recipeServings, scale.value);
}); });
const yieldQuantity = computed(() => recipeYieldAmount.value.scaledAmount); const yieldQuantity = computed(() => recipeYieldAmount.value.scaledAmount);
const yieldDisplay = computed(() => { const yieldDisplay = computed(() => {
return yieldQuantity.value return yieldQuantity.value
? i18n.t( ? i18n.t(
"recipe.serves-amount", { amount: recipeYieldAmount.value.scaledAmountDisplay }, "recipe.serves-amount", { amount: recipeYieldAmount.value.scaledAmountDisplay },
) as string ) as string
: ""; : "";
}); });
const disableDecrement = computed(() => { const disableDecrement = computed(() => {
return yieldQuantity.value <= 1; return yieldQuantity.value <= 1;
});
return {
menu,
canEditScale,
scale,
recalculateScale,
yieldDisplay,
yieldQuantity,
disableDecrement,
};
},
}); });
</script> </script>