Mobile Recipe Card

frontend/components/Domain/Recipe/RecipeCardMobile.vue

@@ -126,7 +126,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
 import RecipeContextMenu from "./RecipeContextMenu.vue";
 import RecipeCardImage from "./RecipeCardImage.vue";
@@ -134,82 +134,44 @@ import RecipeRating from "./RecipeRating.vue";
 import RecipeChips from "./RecipeChips.vue";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 
-export default defineNuxtComponent({
+interface Props {
-  components: {
+  name: string;
-    RecipeFavoriteBadge,
+  slug: string;
-    RecipeContextMenu,
+  description: string;
-    RecipeRating,
+  rating?: number;
-    RecipeCardImage,
+  image?: string;
-    RecipeChips,
+  tags?: Array<any>;
-  },
+  recipeId: string;
-  props: {
+  vertical?: boolean;
-    name: {
+  isFlat?: boolean;
-      type: String,
+  height?: number;
-      required: true,
+  disableHighlight?: boolean;
-    },
+}
-    slug: {
+const props = withDefaults(defineProps<Props>(), {
-      type: String,
+  rating: 0,
-      required: true,
+  image: "abc123",
-    },
+  tags: () => [],
-    description: {
+  vertical: false,
-      type: String,
+  isFlat: false,
-      required: true,
+  height: 150,
-    },
+  disableHighlight: false,
-    rating: {
-      type: Number,
-      default: 0,
-    },
-    image: {
-      type: String,
-      required: false,
-      default: "abc123",
-    },
-    tags: {
-      type: Array,
-      default: () => [],
-    },
-    recipeId: {
-      type: String,
-      required: true,
-    },
-    vertical: {
-      type: Boolean,
-      default: false,
-    },
-    isFlat: {
-      type: Boolean,
-      default: false,
-    },
-    height: {
-      type: [Number],
-      default: 150,
-    },
-    disableHighlight: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ["selected", "delete"],
-  setup(props) {
-    const $auth = useMealieAuth();
-    const { isOwnGroup } = useLoggedInState();
-
-    const route = useRoute();
-    const groupSlug = computed(() => route.params.groupSlug || $auth.user.value?.groupSlug || "");
-    const showRecipeContent = computed(() => props.recipeId && props.slug);
-    const recipeRoute = computed<string>(() => {
-      return showRecipeContent.value ? `/g/${groupSlug.value}/r/${props.slug}` : "";
-    });
-    const cursor = computed(() => showRecipeContent.value ? "pointer" : "auto");
-
-    return {
-      isOwnGroup,
-      recipeRoute,
-      showRecipeContent,
-      cursor,
-    };
-  },
 });
+
+defineEmits<{
+  selected: [];
+  delete: [slug: string];
+}>();
+
+const $auth = useMealieAuth();
+const { isOwnGroup } = useLoggedInState();
+
+const route = useRoute();
+const groupSlug = computed(() => route.params.groupSlug || $auth.user.value?.groupSlug || "");
+const showRecipeContent = computed(() => props.recipeId && props.slug);
+const recipeRoute = computed<string>(() => {
+  return showRecipeContent.value ? `/g/${groupSlug.value}/r/${props.slug}` : "";
+});
+const cursor = computed(() => showRecipeContent.value ? "pointer" : "auto");
 </script>
 
 <style scoped>