Image Upload Button

frontend/components/Domain/Recipe/RecipeImageUploadBtn.vue

@@ -7,11 +7,11 @@
       nudge-top="6"
       :close-on-content-click="false"
     >
-      <template #activator="{ props }">
+      <template #activator="{ props: activatorProps }">
         <v-btn
           color="accent"
           dark
-          v-bind="props"
+          v-bind="activatorProps"
         >
           <v-icon start>
             {{ $globals.icons.fileImage }}
@@ -61,52 +61,42 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useUserApi } from "~/composables/api";
 
 const REFRESH_EVENT = "refresh";
 const UPLOAD_EVENT = "upload";
 
-export default defineNuxtComponent({
+const props = defineProps<{ slug: string }>();
-  props: {
-    slug: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props, context) {
-    const state = reactive({
-      url: "",
-      loading: false,
-      menu: false,
-    });
 
-    function uploadImage(fileObject: File) {
+const emit = defineEmits<{
-      context.emit(UPLOAD_EVENT, fileObject);
+  refresh: [];
-      state.menu = false;
+  upload: [fileObject: File];
+}>();
+
+const url = ref("");
+const loading = ref(false);
+const menu = ref(false);
+
+function uploadImage(fileObject: File) {
+  emit(UPLOAD_EVENT, fileObject);
+  menu.value = false;
+}
+
+const api = useUserApi();
+async function getImageFromURL() {
+  loading.value = true;
+  if (await api.recipes.updateImagebyURL(props.slug, url.value)) {
+    emit(REFRESH_EVENT);
   }
+  loading.value = false;
+  menu.value = false;
+}
 
-    const api = useUserApi();
+const i18n = useI18n();
-    async function getImageFromURL() {
+const messages = computed(() =>
-      state.loading = true;
+  props.slug ? [""] : [i18n.t("recipe.save-recipe-before-use")],
-      if (await api.recipes.updateImagebyURL(props.slug, state.url)) {
+);
-        context.emit(REFRESH_EVENT);
-      }
-      state.loading = false;
-      state.menu = false;
-    }
-
-    const i18n = useI18n();
-    const messages = props.slug ? [""] : [i18n.t("recipe.save-recipe-before-use")];
-
-    return {
-      ...toRefs(state),
-      uploadImage,
-      getImageFromURL,
-      messages,
-    };
-  },
-});
 </script>
 
 <style lang="scss" scoped></style>