Recipe Card Image

frontend/components/Domain/Recipe/RecipeCardImage.vue

@@ -28,66 +28,51 @@
   </div>
 </template>
 
-<script lang="ts">
-import { useStaticRoutes, useUserApi } from "~/composables/api";
+<script setup lang="ts">
+import { useStaticRoutes } from "~/composables/api";
 
-export default defineNuxtComponent({
-  props: {
-    tiny: {
-      type: Boolean,
-      default: null,
-    },
-    small: {
-      type: Boolean,
-      default: null,
-    },
-    large: {
-      type: Boolean,
-      default: null,
-    },
-    iconSize: {
-      type: [Number, String],
-      default: 100,
-    },
-    slug: {
-      type: String,
-      default: null,
-    },
-    recipeId: {
-      type: String,
-      required: true,
-    },
-    imageVersion: {
-      type: String,
-      default: null,
-    },
-    height: {
-      type: [Number, String],
-      default: "100%",
-    },
-  },
-  emits: ["click"],
-  setup(props) {
-    const api = useUserApi();
+interface Props {
+  tiny?: boolean | null;
+  small?: boolean | null;
+  large?: boolean | null;
+  iconSize?: number | string;
+  slug?: string | null;
+  recipeId: string;
+  imageVersion?: string | null;
+  height?: number | string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  tiny: null,
+  small: null,
+  large: null,
+  iconSize: 100,
+  slug: null,
+  imageVersion: null,
+  height: "100%",
+});
 
-    const { recipeImage, recipeSmallImage, recipeTinyImage } = useStaticRoutes();
+defineEmits<{
+  click: [];
+}>();
 
-    const fallBackImage = ref(false);
-    const imageSize = computed(() => {
+const { recipeImage, recipeSmallImage, recipeTinyImage } = useStaticRoutes();
+
+const fallBackImage = ref(false);
+const imageSize = computed(() => {
   if (props.tiny) return "tiny";
   if (props.small) return "small";
   if (props.large) return "large";
   return "large";
-    });
+});
 
-    watch(
+watch(
   () => props.recipeId,
   () => {
     fallBackImage.value = false;
   },
-    );
+);
 
-    function getImage(recipeId: string) {
+function getImage(recipeId: string) {
   switch (imageSize.value) {
     case "tiny":
       return recipeTinyImage(recipeId, props.imageVersion);
@@ -96,16 +81,7 @@ export default defineNuxtComponent({
     case "large":
       return recipeImage(recipeId, props.imageVersion);
   }
-    }
-
-    return {
-      api,
-      fallBackImage,
-      imageSize,
-      getImage,
-    };
-  },
-});
+}
 </script>
 
 <style scoped>