Use composition API for more components, enable more type checking (#914)

* Activate more linting rules from eslint and typescript

* Properly add VForm as type information

* Fix usage of native types

* Fix more linting issues

* Rename vuetify types file, add VTooltip

* Fix some more typing problems

* Use composition API for more components

* Convert RecipeRating

* Convert RecipeNutrition

* Convert more components to composition API

* Fix globals plugin for type checking

* Add missing icon types

* Fix vuetify types in Nuxt context

* Use composition API for RecipeActionMenu

* Convert error.vue to composition API

* Convert RecipeContextMenu to composition API

* Use more composition API and type checking in recipe/create

* Convert AppButtonUpload to composition API

* Fix some type checking in RecipeContextMenu

* Remove unused components BaseAutoForm and BaseColorPicker

* Convert RecipeCategoryTagDialog to composition API

* Convert RecipeCardSection to composition API

* Convert RecipeCategoryTagSelector to composition API

* Properly import vuetify type definitions

* Convert BaseButton to composition API

* Convert AutoForm to composition API

* Remove unused requests API file

* Remove static routes from recipe API

* Fix more type errors

* Convert AppHeader to composition API, fixing some search bar focus problems

* Convert RecipeDialogSearch to composition API

* Update API types from pydantic models, handle undefined values

* Improve more typing problems

* Add types to other plugins

* Properly type the CRUD API access

* Fix typing of static image routes

* Fix more typing stuff

* Fix some more typing problems

* Turn off more rules

frontend/components/global/AppButtonUpload.vue

@@ -10,10 +10,13 @@
   </v-form>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, ref, useContext } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
+
 const UPLOAD_EVENT = "uploaded";
-export default {
+
+export default defineComponent({
   props: {
     small: {
       type: Boolean,
@@ -48,65 +51,70 @@ export default {
       default: "",
     },
   },
-  setup() {
+  setup(props, context) {
+    const file = ref<File | null>(null);
+    const uploader = ref<HTMLInputElement | null>(null);
+    const isSelecting = ref(false);
+
+    const { i18n, $globals } = useContext();
+    const effIcon = props.icon ? props.icon : $globals.icons.upload;
+
+    const defaultText = i18n.t("general.upload");
+
     const api = useUserApi();
+    async function upload() {
+      if (file.value != null) {
+        isSelecting.value = true;
 
-    return { api };
-  },
-  data: () => ({
-    file: null,
-    isSelecting: false,
-  }),
-
-  computed: {
-    effIcon() {
-      return this.icon ? this.icon : this.$globals.icons.upload;
-    },
-    defaultText() {
-      return this.$t("general.upload");
-    },
-  },
-
-  methods: {
-    async upload() {
-      if (this.file != null) {
-        this.isSelecting = true;
-
-        if (!this.post) {
-          this.$emit(UPLOAD_EVENT, this.file);
-          this.isSelecting = false;
+        if (!props.post) {
+          context.emit(UPLOAD_EVENT, file.value);
+          isSelecting.value = false;
           return;
         }
 
         const formData = new FormData();
-        formData.append(this.fileName, this.file);
+        formData.append(props.fileName, file.value);
 
-        const response = await this.api.upload.file(this.url, formData);
+        const response = await api.upload.file(props.url, formData);
 
         if (response) {
-          this.$emit(UPLOAD_EVENT, response);
+          context.emit(UPLOAD_EVENT, response);
         }
-        this.isSelecting = false;
+        isSelecting.value = false;
       }
-    },
-    onButtonClick() {
-      this.isSelecting = true;
+    }
+
+    function onFileChanged(e: Event) {
+      const target = e.target as HTMLInputElement;
+      if (target.files !== null && target.files.length > 0 && file.value !== null) {
+        file.value = target.files[0];
+        upload();
+      }
+    }
+
+    function onButtonClick() {
+      isSelecting.value = true;
       window.addEventListener(
         "focus",
         () => {
-          this.isSelecting = false;
+          isSelecting.value = false;
         },
         { once: true }
       );
+      uploader.value?.click();
+    }
 
-      this.$refs.uploader.click();
-    },
-    onFileChanged(e) {
-      this.file = e.target.files[0];
-      this.upload();
-    },
+    return {
+      file,
+      uploader,
+      isSelecting,
+      effIcon,
+      defaultText,
+      onFileChanged,
+      onButtonClick,
+    };
   },
-};
+});
 </script>
 
 <style></style>