Scale Button

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({
+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();
-      if (isNaN(newYield) || newYield <= 0) {
+const menu = ref<boolean>(false);
-        return;
+const canEditScale = computed(() => props.editScale && props.recipeServings > 0);
-      }
 
-      if (props.recipeServings <= 0) {
+function recalculateScale(newYield: number) {
-        scale.value = 1;
+  if (isNaN(newYield) || newYield <= 0) {
-      }
+    return;
-      else {
+  }
-        scale.value = newYield / props.recipeServings;
-      }
-    }
 
-    const recipeYieldAmount = computed(() => {
+  if (props.recipeServings <= 0) {
-      return useScaledAmount(props.recipeServings, scale.value);
+    scale.value = 1;
-    });
+  }
-    const yieldQuantity = computed(() => recipeYieldAmount.value.scaledAmount);
+  else {
-    const yieldDisplay = computed(() => {
+    scale.value = newYield / props.recipeServings;
-      return yieldQuantity.value
+  }
-        ? i18n.t(
+}
-          "recipe.serves-amount", { amount: recipeYieldAmount.value.scaledAmountDisplay },
-        ) as string
-        : "";
-    });
 
-    const disableDecrement = computed(() => {
+const recipeYieldAmount = computed(() => {
-      return yieldQuantity.value <= 1;
+  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 {
+const disableDecrement = computed(() => {
-      menu,
+  return yieldQuantity.value <= 1;
-      canEditScale,
-      scale,
-      recalculateScale,
-      yieldDisplay,
-      yieldQuantity,
-      disableDecrement,
-    };
-  },
 });
 </script>