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/plugins/dark-mode.client.ts

@@ -1,11 +1,10 @@
+import { Plugin } from "@nuxt/types"
 import { useDark } from "@vueuse/core";
 
-export default ({ $vuetify }: any) => {
+const darkModePlugin: Plugin = ({ $vuetify }, _) => {
   const isDark = useDark();
 
-  if (isDark.value) {
-    $vuetify.theme.dark = true;
-  } else {
-    $vuetify.theme.dark = false;
-  }
+  $vuetify.theme.dark = isDark.value;
 };
+
+export default darkModePlugin;

frontend/plugins/globals.ts

@@ -1,7 +1,27 @@
+import { Plugin } from "@nuxt/types"
 import { icons } from "~/utils/icons";
+import { Icon } from "~/utils/icons/icon-type";
 
-// eslint-disable-next-line no-empty-pattern
-export default ({}, inject: any) => {
-  // Inject $hello(msg) in Vue, context and store.
-  inject("globals", { icons });
+interface Globals {
+  icons: Icon;
+}
+
+declare module "vue/types/vue" {
+  interface Vue {
+    $globals: Globals;
+  }
+}
+
+declare module "@nuxt/types" {
+  interface Context {
+    $globals: Globals;
+  }
+}
+
+const globalsPlugin: Plugin = (_, inject) => {
+  inject("globals", {
+    icons
+  });
 };
+
+export default globalsPlugin

frontend/plugins/theme.ts

@@ -1,7 +1,11 @@
-export default ({ $vuetify, $config }: any) => {
-  $vuetify.theme.themes = $config.themes;
+import { Plugin } from "@nuxt/types"
+
+const themePlugin: Plugin = ({ $vuetify, $config }) => {
+  $vuetify.theme.themes = $config.themes as typeof $vuetify.theme.themes
 
   if ($config.useDark) {
     $vuetify.theme.dark = true;
   }
 };
+
+export default themePlugin;

frontend/plugins/toast.client.ts

@@ -1,7 +1,8 @@
+import { Plugin } from "@nuxt/types"
 import { NuxtAxiosInstance } from "@nuxtjs/axios";
 import { alert } from "~/composables/use-toast";
 
-export default function ({ $axios }: { $axios: NuxtAxiosInstance }) {
+const toastPlugin: Plugin = ({ $axios }: { $axios: NuxtAxiosInstance }) => {
   $axios.onResponse((response) => {
     if (response.data.message) {
       alert.info(response.data.message);
@@ -13,3 +14,5 @@ export default function ({ $axios }: { $axios: NuxtAxiosInstance }) {
     }
   });
 }
+
+export default toastPlugin;