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/Domain/Recipe/RecipeActionMenu.vue

@@ -92,7 +92,8 @@
   </v-toolbar>
 </template>
 
-<script>
+<script lang="ts">
+import {defineComponent, ref, useContext} from "@nuxtjs/composition-api";
 import RecipeContextMenu from "./RecipeContextMenu.vue";
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
 
@@ -101,7 +102,7 @@ const DELETE_EVENT = "delete";
 const CLOSE_EVENT = "close";
 const JSON_EVENT = "json";
 
-export default {
+export default defineComponent({
   components: { RecipeContextMenu, RecipeFavoriteBadge },
   props: {
     slug: {
@@ -129,69 +130,70 @@ export default {
       default: false,
     },
   },
-  data() {
-    return {
-      deleteDialog: false,
-      edit: false,
-    };
-  },
+  setup(_, context) {
+    const deleteDialog = ref(false);
 
-  computed: {
-    editorButtons() {
-      return [
-        {
-          text: this.$t("general.delete"),
-          icon: this.$globals.icons.delete,
-          event: DELETE_EVENT,
-          color: "error",
-        },
-        {
-          text: this.$t("general.json"),
-          icon: this.$globals.icons.codeBraces,
-          event: JSON_EVENT,
-          color: "accent",
-        },
-        {
-          text: this.$t("general.close"),
-          icon: this.$globals.icons.close,
-          event: CLOSE_EVENT,
-          color: "",
-        },
-        {
-          text: this.$t("general.save"),
-          icon: this.$globals.icons.save,
-          event: SAVE_EVENT,
-          color: "success",
-        },
-      ];
-    },
-  },
-  methods: {
-    emitHandler(event) {
+    const { i18n, $globals } = useContext();
+    const editorButtons = [
+      {
+        text: i18n.t("general.delete"),
+        icon: $globals.icons.delete,
+        event: DELETE_EVENT,
+        color: "error",
+      },
+      {
+        text: i18n.t("general.json"),
+        icon: $globals.icons.codeBraces,
+        event: JSON_EVENT,
+        color: "accent",
+      },
+      {
+        text: i18n.t("general.close"),
+        icon: $globals.icons.close,
+        event: CLOSE_EVENT,
+        color: "",
+      },
+      {
+        text: i18n.t("general.save"),
+        icon: $globals.icons.save,
+        event: SAVE_EVENT,
+        color: "success",
+      },
+    ];
+
+    function emitHandler(event: string) {
       switch (event) {
         case CLOSE_EVENT:
-          this.$emit(CLOSE_EVENT);
-          this.$emit("input", false);
+          context.emit(CLOSE_EVENT);
+          context.emit("input", false);
           break;
         case SAVE_EVENT:
-          this.$emit(SAVE_EVENT);
+          context.emit(SAVE_EVENT);
           break;
         case JSON_EVENT:
-          this.$emit(JSON_EVENT);
+          context.emit(JSON_EVENT);
           break;
         case DELETE_EVENT:
-          this.deleteDialog = true;
+          deleteDialog.value = true;
           break;
         default:
           break;
       }
-    },
-    emitDelete() {
-      this.$emit(DELETE_EVENT);
-      this.$emit("input", false);
-    },
+    }
+
+    function emitDelete() {
+      context.emit(DELETE_EVENT);
+      context.emit("input", false);
+    }
+
+    return {
+      deleteDialog,
+      editorButtons,
+      emitHandler,
+      emitDelete,
+    }
   },
-};
+});
 </script>
 
 <style scoped>