From 616e04bf17dab759e820376d5b6db22771276bcb Mon Sep 17 00:00:00 2001
From: Kuchenpirat <jojow@gmx.net>
Date: Wed, 30 Jul 2025 12:42:15 +0000
Subject: [PATCH] Scale Button

---
 .../Domain/Recipe/RecipeScaleEditButton.vue   | 110 +++++++-----------
 1 file changed, 42 insertions(+), 68 deletions(-)

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