Recipe Card Image

frontend/components/Domain/Recipe/RecipeCardImage.vue

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