Timeline Item

frontend/components/Domain/Recipe/RecipeTimelineItem.vue

@@ -91,7 +91,7 @@
   </v-timeline-item>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import RecipeCardMobile from "./RecipeCardMobile.vue";
 import RecipeTimelineContextMenu from "./RecipeTimelineContextMenu.vue";
 import { useStaticRoutes } from "~/composables/api";
@@ -100,30 +100,26 @@ import type { Recipe, RecipeTimelineEventOut } from "~/lib/api/types/recipe";
 import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
 import SafeMarkdown from "~/components/global/SafeMarkdown.vue";
 
-export default defineNuxtComponent({
-  components: { RecipeCardMobile, RecipeTimelineContextMenu, UserAvatar, SafeMarkdown },
+interface Props {
+  event: RecipeTimelineEventOut;
+  recipe?: Recipe;
+  showRecipeCards?: boolean;
+}
 
-  props: {
-    event: {
-      type: Object as () => RecipeTimelineEventOut,
-      required: true,
-    },
-    recipe: {
-      type: Object as () => Recipe,
-      default: undefined,
-    },
-    showRecipeCards: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ["selected", "update", "delete"],
+const props = withDefaults(defineProps<Props>(), {
+  recipe: undefined,
+  showRecipeCards: false,
+});
+
+defineEmits<{
+  selected: [];
+  update: [];
+  delete: [];
+}>();
 
-  setup(props) {
 const { $vuetify, $globals } = useNuxtApp();
 const { recipeTimelineEventImage } = useStaticRoutes();
 const { eventTypeOptions } = useTimelineEventTypes();
-    const timelineEvents = ref([] as RecipeTimelineEventOut[]);
 
 const { user: currentUser } = useMealieAuth();
 
@@ -178,19 +174,6 @@ export default defineNuxtComponent({
 
   return recipeTimelineEventImage(props.event.recipeId, props.event.id);
 });
-
-    return {
-      attrs,
-      groupSlug,
-      icon,
-      eventImageUrl,
-      hideImage,
-      timelineEvents,
-      useMobileFormat,
-      currentUser,
-    };
-  },
-});
 </script>
 
 <style>