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/RecipeNutrition.vue

@@ -33,11 +33,14 @@
   </div>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
+import { Nutrition } from "~/types/api-types/recipe";
+
+export default defineComponent({
   props: {
     value: {
-      type: Object,
+      type: Object as () => Nutrition,
       required: true,
     },
     edit: {
@@ -45,59 +48,59 @@ export default {
       default: true,
     },
   },
-  data() {
-    return {
-      labels: {
-        calories: {
-          label: this.$t("recipe.calories"),
-          suffix: this.$t("recipe.calories-suffix"),
-        },
-        fatContent: {
-          label: this.$t("recipe.fat-content"),
-          suffix: this.$t("recipe.grams"),
-        },
-        fiberContent: {
-          label: this.$t("recipe.fiber-content"),
-          suffix: this.$t("recipe.grams"),
-        },
-        proteinContent: {
-          label: this.$t("recipe.protein-content"),
-          suffix: this.$t("recipe.grams"),
-        },
-        sodiumContent: {
-          label: this.$t("recipe.sodium-content"),
-          suffix: this.$t("recipe.milligrams"),
-        },
-        sugarContent: {
-          label: this.$t("recipe.sugar-content"),
-          suffix: this.$t("recipe.grams"),
-        },
-        carbohydrateContent: {
-          label: this.$t("recipe.carbohydrate-content"),
-          suffix: this.$t("recipe.grams"),
-        },
+  setup(props, context) {
+    const { i18n } = useContext();
+    const labels = {
+      calories: {
+        label: i18n.t("recipe.calories"),
+        suffix: i18n.t("recipe.calories-suffix"),
+      },
+      fatContent: {
+        label: i18n.t("recipe.fat-content"),
+        suffix: i18n.t("recipe.grams"),
+      },
+      fiberContent: {
+        label: i18n.t("recipe.fiber-content"),
+        suffix: i18n.t("recipe.grams"),
+      },
+      proteinContent: {
+        label: i18n.t("recipe.protein-content"),
+        suffix: i18n.t("recipe.grams"),
+      },
+      sodiumContent: {
+        label: i18n.t("recipe.sodium-content"),
+        suffix: i18n.t("recipe.milligrams"),
+      },
+      sugarContent: {
+        label: i18n.t("recipe.sugar-content"),
+        suffix: i18n.t("recipe.grams"),
+      },
+      carbohydrateContent: {
+        label: i18n.t("recipe.carbohydrate-content"),
+        suffix: i18n.t("recipe.grams"),
       },
     };
-  },
-  computed: {
-    showViewer() {
-      return !this.edit && this.valueNotNull;
-    },
-    valueNotNull() {
-      for (const property in this.value) {
-        const valueProperty = this.value[property];
+    const valueNotNull = computed(() => {
+      Object.values(props.value).forEach((valueProperty) => {
         if (valueProperty && valueProperty !== "") return true;
-      }
+      });
       return false;
-    },
-  },
+    });
 
-  methods: {
-    updateValue(key, value) {
-      this.$emit("input", { ...this.value, [key]: value });
-    },
+    const showViewer = computed(() => !props.edit && valueNotNull.value);
+
+    function updateValue(key: number | string, event: Event) {
+      context.emit("input", { ...props.value, [key]: event });
+    }
+
+    return {
+      labels,
+      valueNotNull,
+      showViewer,
+      updateValue
+    }
   },
-};
+});
 </script>
 
 <style lang="scss" scoped></style>