Recipe Card

frontend/components/Domain/Recipe/RecipeCard.vue

@@ -2,11 +2,11 @@
   <!-- Wrap v-hover with a div to provide a proper DOM element for the transition -->
     <div>
       <v-hover
-        v-slot="{ isHovering, props }"
+        v-slot="{ isHovering, props: hoverProps }"
         :open-delay="50"
       >
         <v-card
-          v-bind="props"
+          v-bind="hoverProps"
           :class="{ 'on-hover': isHovering }"
           :style="{ cursor }"
           :elevation="isHovering ? 12 : 2"
@@ -100,7 +100,7 @@
     </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
 import RecipeChips from "./RecipeChips.vue";
 import RecipeContextMenu from "./RecipeContextMenu.vue";
@@ -108,50 +108,31 @@ import RecipeCardImage from "./RecipeCardImage.vue";
 import RecipeRating from "./RecipeRating.vue";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 
-export default defineNuxtComponent({
+interface Props {
-  components: { RecipeFavoriteBadge, RecipeChips, RecipeContextMenu, RecipeRating, RecipeCardImage },
+  name: string;
-  props: {
+  slug: string;
-    name: {
+  description?: string | null;
-      type: String,
+  rating?: number;
-      required: true,
+  ratingColor?: string;
-    },
+  image?: string;
-    slug: {
+  tags?: Array<any>;
-      type: String,
+  recipeId: string;
-      required: true,
+  imageHeight?: number;
-    },
+}
-    description: {
+const props = withDefaults(defineProps<Props>(), {
-      type: String,
+  description: null,
-      default: null,
+  rating: 0,
-    },
+  ratingColor: "secondary",
-    rating: {
+  image: "abc123",
-      type: Number,
+  tags: () => [],
-      required: false,
+  imageHeight: 200,
-      default: 0,
+});
-    },
+
-    ratingColor: {
+defineEmits<{
-      type: String,
+  click: [];
-      default: "secondary",
+  delete: [slug: string];
-    },
+}>();
-    image: {
+
-      type: String,
-      required: false,
-      default: "abc123",
-    },
-    tags: {
-      type: Array,
-      default: () => [],
-    },
-    recipeId: {
-      required: true,
-      type: String,
-    },
-    imageHeight: {
-      type: Number,
-      default: 200,
-    },
-  },
-  emits: ["click", "delete"],
-  setup(props) {
 const $auth = useMealieAuth();
 const { isOwnGroup } = useLoggedInState();
 
@@ -162,15 +143,6 @@ export default defineNuxtComponent({
   return showRecipeContent.value ? `/g/${groupSlug.value}/r/${props.slug}` : "";
 });
 const cursor = computed(() => showRecipeContent.value ? "pointer" : "auto");
-
-    return {
-      isOwnGroup,
-      recipeRoute,
-      showRecipeContent,
-      cursor,
-    };
-  },
-});
 </script>
 
 <style>
@@ -195,6 +167,7 @@ export default defineNuxtComponent({
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 8;
+  line-clamp: 8;
   overflow: hidden;
 }
 </style>