Fav Badge

frontend/components/Domain/Recipe/RecipeFavoriteBadge.vue

@@ -4,7 +4,7 @@
     nudge-right="50"
     :color="buttonStyle ? 'info' : 'secondary'"
   >
-    <template #activator="{ props }">
+    <template #activator="{ props: tooltipProps }">
       <v-btn
         v-if="isFavorite || showAlways"
         icon
@@ -13,7 +13,7 @@
         size="small"
         :color="buttonStyle ? 'info' : 'secondary'"
         :fab="buttonStyle"
-        v-bind="{ ...props, ...$attrs }"
+        v-bind="{ ...tooltipProps, ...$attrs }"
         @click.prevent="toggleFavorite"
       >
         <v-icon
@@ -28,26 +28,21 @@
   </v-tooltip>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useUserSelfRatings } from "~/composables/use-users";
 import { useUserApi } from "~/composables/api";
 
-export default defineNuxtComponent({
-  props: {
-    recipeId: {
-      type: String,
-      default: "",
-    },
-    showAlways: {
-      type: Boolean,
-      default: false,
-    },
-    buttonStyle: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props) {
+interface Props {
+  recipeId?: string;
+  showAlways?: boolean;
+  buttonStyle?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  recipeId: "",
+  showAlways: false,
+  buttonStyle: false,
+});
+
 const api = useUserApi();
 const $auth = useMealieAuth();
 const { userRatings, refreshUserRatings } = useUserSelfRatings();
@@ -67,8 +62,4 @@ export default defineNuxtComponent({
   }
   await refreshUserRatings();
 }
-
-    return { isFavorite, toggleFavorite };
-  },
-});
 </script>