Recipe Action Menu

frontend/components/Domain/Recipe/RecipeActionMenu.vue

@@ -18,7 +18,7 @@
       <RecipeTimelineBadge v-if="loggedIn" class="ml-1" color="info" button-style :slug="recipe.slug" :recipe-name="recipe.name!" />
       <div v-if="loggedIn">
         <v-tooltip v-if="canEdit" location="bottom" color="info">
-          <template #activator="{ props }">
+          <template #activator="{ props: tooltipProps }">
             <v-btn
               icon
               variant="flat"
@@ -26,7 +26,7 @@
               size="small"
               color="info"
               class="ml-1"
-              v-bind="props"
+              v-bind="tooltipProps"
               @click="$emit('edit', true)"
             >
               <v-icon size="x-large">
@@ -86,7 +86,7 @@
   </v-toolbar>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import RecipeContextMenu from "./RecipeContextMenu.vue";
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
 import RecipeTimelineBadge from "./RecipeTimelineBadge.vue";
@@ -97,49 +97,30 @@ const DELETE_EVENT = "delete";
 const CLOSE_EVENT = "close";
 const JSON_EVENT = "json";
 
-export default defineNuxtComponent({
+interface Props {
-  components: { RecipeContextMenu, RecipeFavoriteBadge, RecipeTimelineBadge },
+  recipe: Recipe;
-  props: {
+  slug: string;
-    recipe: {
+  recipeScale?: number;
-      required: true,
+  open: boolean;
-      type: Object as () => Recipe,
+  name: string;
-    },
+  loggedIn?: boolean;
-    slug: {
+  recipeId: string;
-      required: true,
+  canEdit?: boolean;
-      type: String,
+}
-    },
+withDefaults(defineProps<Props>(), {
-    recipeScale: {
+  recipeScale: 1,
-      type: Number,
+  loggedIn: false,
-      default: 1,
+  canEdit: false,
-    },
+});
-    open: {
-      required: true,
-      type: Boolean,
-    },
-    name: {
-      required: true,
-      type: String,
-    },
-    loggedIn: {
-      type: Boolean,
-      default: false,
-    },
-    recipeId: {
-      required: true,
-      type: String,
-    },
-    canEdit: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ["print", "input", "delete", "close", "edit"],
-  setup(_, context) {
-    const deleteDialog = ref(false);
 
-    const i18n = useI18n();
+const emit = defineEmits(["print", "input", "delete", "close", "edit"]);
-    const { $globals } = useNuxtApp();
+
-    const editorButtons = [
+const deleteDialog = ref(false);
+
+const i18n = useI18n();
+const { $globals } = useNuxtApp();
+
+const editorButtons = [
   {
     text: i18n.t("general.delete"),
     icon: $globals.icons.delete,
@@ -164,36 +145,27 @@ export default defineNuxtComponent({
     event: SAVE_EVENT,
     color: "success",
   },
-    ];
+];
 
-    function emitHandler(event: string) {
+function emitHandler(event: string) {
   switch (event) {
     case CLOSE_EVENT:
-          context.emit(CLOSE_EVENT);
+      emit("close");
-          context.emit("input", false);
+      emit("input", false);
       break;
     case DELETE_EVENT:
       deleteDialog.value = true;
       break;
     default:
-          context.emit(event);
+      emit(event as any);
       break;
   }
-    }
+}
 
-    function emitDelete() {
+function emitDelete() {
-      context.emit(DELETE_EVENT);
+  emit("delete");
-      context.emit("input", false);
+  emit("input", false);
-    }
+}
-
-    return {
-      deleteDialog,
-      editorButtons,
-      emitHandler,
-      emitDelete,
-    };
-  },
-});
 </script>
 
 <style scoped>