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,96 +100,79 @@ 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({
+interface Props {
-  components: { RecipeCardMobile, RecipeTimelineContextMenu, UserAvatar, SafeMarkdown },
+  event: RecipeTimelineEventOut;
+  recipe?: Recipe;
+  showRecipeCards?: boolean;
+}
 
-  props: {
+const props = withDefaults(defineProps<Props>(), {
-    event: {
+  recipe: undefined,
-      type: Object as () => RecipeTimelineEventOut,
+  showRecipeCards: false,
-      required: true,
+});
-    },
-    recipe: {
-      type: Object as () => Recipe,
-      default: undefined,
-    },
-    showRecipeCards: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ["selected", "update", "delete"],
 
-  setup(props) {
+defineEmits<{
-    const { $vuetify, $globals } = useNuxtApp();
+  selected: [];
-    const { recipeTimelineEventImage } = useStaticRoutes();
+  update: [];
-    const { eventTypeOptions } = useTimelineEventTypes();
+  delete: [];
-    const timelineEvents = ref([] as RecipeTimelineEventOut[]);
+}>();
 
-    const { user: currentUser } = useMealieAuth();
+const { $vuetify, $globals } = useNuxtApp();
+const { recipeTimelineEventImage } = useStaticRoutes();
+const { eventTypeOptions } = useTimelineEventTypes();
 
-    const route = useRoute();
+const { user: currentUser } = useMealieAuth();
-    const groupSlug = computed(() => (route.params.groupSlug as string) || currentUser?.value?.groupSlug || "");
 
-    const useMobileFormat = computed(() => {
+const route = useRoute();
-      return $vuetify.display.smAndDown.value;
+const groupSlug = computed(() => (route.params.groupSlug as string) || currentUser?.value?.groupSlug || "");
-    });
 
-    const attrs = computed(() => {
+const useMobileFormat = computed(() => {
-      if (useMobileFormat.value) {
+  return $vuetify.display.smAndDown.value;
-        return {
+});
-          class: "px-0",
-          small: false,
-          avatar: {
-            size: "30px",
-            class: "pr-0",
-          },
-          image: {
-            maxHeight: "250",
-            class: "my-3",
-          },
-        };
-      }
-      else {
-        return {
-          class: "px-3",
-          small: false,
-          avatar: {
-            size: "42px",
-            class: "",
-          },
-          image: {
-            maxHeight: "300",
-            class: "mb-5",
-          },
-        };
-      }
-    });
-
-    const icon = computed(() => {
-      const option = eventTypeOptions.value.find(option => option.value === props.event.eventType);
-      return option ? option.icon : $globals.icons.informationVariant;
-    });
-
-    const hideImage = ref(false);
-    const eventImageUrl = computed<string>(() => {
-      if (props.event.image !== "has image") {
-        return "";
-      }
-
-      return recipeTimelineEventImage(props.event.recipeId, props.event.id);
-    });
 
+const attrs = computed(() => {
+  if (useMobileFormat.value) {
     return {
-      attrs,
+      class: "px-0",
-      groupSlug,
+      small: false,
-      icon,
+      avatar: {
-      eventImageUrl,
+        size: "30px",
-      hideImage,
+        class: "pr-0",
-      timelineEvents,
+      },
-      useMobileFormat,
+      image: {
-      currentUser,
+        maxHeight: "250",
+        class: "my-3",
+      },
     };
-  },
+  }
+  else {
+    return {
+      class: "px-3",
+      small: false,
+      avatar: {
+        size: "42px",
+        class: "",
+      },
+      image: {
+        maxHeight: "300",
+        class: "mb-5",
+      },
+    };
+  }
+});
+
+const icon = computed(() => {
+  const option = eventTypeOptions.value.find(option => option.value === props.event.eventType);
+  return option ? option.icon : $globals.icons.informationVariant;
+});
+
+const hideImage = ref(false);
+const eventImageUrl = computed<string>(() => {
+  if (props.event.image !== "has image") {
+    return "";
+  }
+
+  return recipeTimelineEventImage(props.event.recipeId, props.event.id);
 });
 </script>