chore: update dev dependencies (#1282)

* update dev dependencies

* upgrade eslint

* resolve several errors

* resolve eslint errors

frontend/components/Domain/Recipe/RecipeAssets.vue

@@ -10,23 +10,27 @@
           <v-list-item-icon class="ma-auto">
             <v-tooltip bottom>
               <template #activator="{ on, attrs }">
-                <v-icon v-bind="attrs" v-on="on" v-text="getIconDefinition(item.icon).icon"></v-icon>
+                <v-icon v-bind="attrs" v-on="on">
+                  {{ getIconDefinition(item.icon).icon }}
+                </v-icon>
               </template>
               <span>{{ getIconDefinition(item.icon).title }}</span>
             </v-tooltip>
           </v-list-item-icon>
           <v-list-item-content>
-            <v-list-item-title class="pl-2" v-text="item.name"></v-list-item-title>
+            <v-list-item-title class="pl-2">
+              {{ item.name }}
+            </v-list-item-title>
           </v-list-item-content>
           <v-list-item-action>
-            <v-btn v-if="!edit" color="primary" icon :href="assetURL(item.fileName)" target="_blank" top>
+            <v-btn v-if="!edit" color="primary" icon :href="assetURL(item.fileName as string)" target="_blank" top>
               <v-icon> {{ $globals.icons.download }} </v-icon>
             </v-btn>
             <div v-else>
               <v-btn color="error" icon top @click="value.splice(i, 1)">
                 <v-icon>{{ $globals.icons.delete }}</v-icon>
               </v-btn>
-              <AppButtonCopy color="" :copy-text="assetEmbed(item.fileName)" />
+              <AppButtonCopy color="" :copy-text="assetEmbed(item.fileName as string)" />
             </div>
           </v-list-item-action>
         </v-list-item>
@@ -36,7 +40,7 @@
       <v-spacer></v-spacer>
       <BaseDialog
         v-model="newAssetDialog"
-        :title="$t('asset.new-asset')"
+        :title="$tc('asset.new-asset')"
         :icon="getIconDefinition(newAsset.icon).icon"
         @submit="addAsset"
       >
@@ -77,6 +81,7 @@
 import { defineComponent, reactive, toRefs, useContext } from "@nuxtjs/composition-api";
 import { useStaticRoutes, useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
+import { RecipeAsset } from "~/types/api-types/recipe";
 
 const BASE_URL = window.location.origin;
 
@@ -91,7 +96,7 @@ export default defineComponent({
       required: true,
     },
     value: {
-      type: Array,
+      type: Array as () => RecipeAsset[],
       required: true,
     },
     edit: {

frontend/components/Domain/Recipe/RecipeCategoryTagToolContextMenu.vue

@@ -29,7 +29,9 @@
       <v-list dense>
         <v-list-item v-for="(item, index) in menuItems" :key="index" @click="contextMenuEventHandler(item.event)">
           <v-list-item-icon>
-            <v-icon :color="item.color" v-text="item.icon"></v-icon>
+            <v-icon :color="item.color">
+              {{ item.icon }}
+            </v-icon>
           </v-list-item-icon>
           <v-list-item-title>{{ item.title }}</v-list-item-title>
         </v-list-item>

frontend/components/Domain/Recipe/RecipeContextMenu.vue

@@ -81,7 +81,7 @@
       <v-list dense>
         <v-list-item v-for="(item, index) in menuItems" :key="index" @click="contextMenuEventHandler(item.event)">
           <v-list-item-icon>
-            <v-icon :color="item.color" v-text="item.icon"></v-icon>
+            <v-icon :color="item.color"> {{ item.icon }} </v-icon>
           </v-list-item-icon>
           <v-list-item-title>{{ item.title }}</v-list-item-title>
         </v-list-item>
@@ -307,7 +307,7 @@ export default defineComponent({
     }
 
     // Note: Print is handled as an event in the parent component
-    const eventHandlers: { [key: string]: () => void } = {
+    const eventHandlers: { [key: string]: () => void | Promise<any> } = {
       delete: () => {
         state.recipeDeleteDialog = true;
       },

frontend/components/Domain/Recipe/RecipeDataTable.vue

@@ -32,7 +32,9 @@
           <img src="https://i.pravatar.cc/300" alt="John" />
         </v-list-item-avatar>
         <v-list-item-content>
-          <v-list-item-title v-text="getMember(item.userId)"></v-list-item-title>
+          <v-list-item-title>
+            {{ getMember(item.userId) }}
+          </v-list-item-title>
         </v-list-item-content>
       </v-list-item>
     </template>
@@ -95,31 +97,30 @@ export default defineComponent({
       context.emit(INPUT_EVENT, value);
     }
 
-    const show = props.showHeaders;
     const headers = computed(() => {
       const hdrs = [];
 
-      if (show.id) {
+      if (props.showHeaders.id) {
         hdrs.push({ text: "Id", value: "id" });
       }
-      if (show.owner) {
+      if (props.showHeaders.owner) {
         hdrs.push({ text: "Owner", value: "userId", align: "center" });
       }
       hdrs.push({ text: "Name", value: "name" });
-      if (show.categories) {
+      if (props.showHeaders.categories) {
         hdrs.push({ text: "Categories", value: "recipeCategory" });
       }
 
-      if (show.tags) {
+      if (props.showHeaders.tags) {
         hdrs.push({ text: "Tags", value: "tags" });
       }
-      if (show.tools) {
+      if (props.showHeaders.tools) {
         hdrs.push({ text: "Tools", value: "tools" });
       }
-      if (show.recipeYield) {
+      if (props.showHeaders.recipeYield) {
         hdrs.push({ text: "Yield", value: "recipeYield" });
       }
-      if (show.dateAdded) {
+      if (props.showHeaders.dateAdded) {
         hdrs.push({ text: "Date Added", value: "dateAdded" });
       }
 

frontend/components/Domain/Recipe/RecipeIngredientEditor.vue

@@ -134,8 +134,6 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { value } = props;
-
     // ==================================================
     // Foods
     const { foods, workingFoodData, actions: foodActions } = useFoods();
@@ -144,7 +142,7 @@ export default defineComponent({
     async function createAssignFood() {
       workingFoodData.name = foodSearch.value;
       await foodActions.createOne();
-      value.food = foods.value?.find((food) => food.name === foodSearch.value);
+      props.value.food = foods.value?.find((food) => food.name === foodSearch.value);
     }
 
     // ==================================================
@@ -155,7 +153,7 @@ export default defineComponent({
     async function createAssignUnit() {
       workingUnitData.name = unitSearch.value;
       await unitActions.createOne();
-      value.unit = units.value?.find((unit) => unit.name === unitSearch.value);
+      props.value.unit = units.value?.find((unit) => unit.name === unitSearch.value);
     }
 
     const state = reactive({
@@ -165,7 +163,7 @@ export default defineComponent({
 
     function toggleTitle() {
       if (state.showTitle) {
-        value.title = "";
+        props.value.title = "";
       }
       state.showTitle = !state.showTitle;
     }
@@ -175,13 +173,21 @@ export default defineComponent({
     }
 
     function handleUnitEnter() {
-      if (value.unit === undefined || value.unit === null || !value.unit.name.includes(unitSearch.value)) {
+      if (
+        props.value.unit === undefined ||
+        props.value.unit === null ||
+        !props.value.unit.name.includes(unitSearch.value)
+      ) {
         createAssignUnit();
       }
     }
 
     function handleFoodEnter() {
-      if (value.food === undefined || value.food === null || !value.food.name.includes(foodSearch.value)) {
+      if (
+        props.value.food === undefined ||
+        props.value.food === null ||
+        !props.value.food.name.includes(foodSearch.value)
+      ) {
         createAssignFood();
       }
     }
@@ -202,7 +208,7 @@ export default defineComponent({
       //   });
       // }
 
-      if (value.originalText) {
+      if (props.value.originalText) {
         options.push({
           text: "See Original Text",
           event: "toggle-original",

frontend/components/Domain/Recipe/RecipeInstructions.vue

@@ -92,7 +92,7 @@
             @click="toggleCollapseSection(index)"
           >
             <v-toolbar-title v-if="!edit" class="headline">
-              <v-app-bar-title v-text="step.title"> </v-app-bar-title>
+              <v-app-bar-title> {{ step.title }} </v-app-bar-title>
             </v-toolbar-title>
             <v-text-field
               v-if="edit"