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,38 +122,24 @@
   </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,
+
-    },
+const scale = defineModel<number>({ required: true });
-    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({
-      get: () => props.modelValue,
-      set: (value) => {
-        const newScaleNumber = parseFloat(`${value}`);
-        emit("update:modelValue", isNaN(newScaleNumber) ? 0 : newScaleNumber);
-      },
-    });
-
 function recalculateScale(newYield: number) {
   if (isNaN(newYield) || newYield <= 0) {
     return;
@@ -182,16 +168,4 @@ export default defineNuxtComponent({
 const disableDecrement = computed(() => {
   return yieldQuantity.value <= 1;
 });
-
-    return {
-      menu,
-      canEditScale,
-      scale,
-      recalculateScale,
-      yieldDisplay,
-      yieldQuantity,
-      disableDecrement,
-    };
-  },
-});
 </script>