chore: Get Rid of Warnings (#2599)

* ignore unsafe html warnings

* remove unused import

* re-order attrs

* removed unused vars/imports

* removed unused import

* refactored v-html

* removed more unused things

frontend/components/Domain/Recipe/RecipeIngredientHtml.vue

@@ -1,9 +1,11 @@
 <template>
-  <div v-html="markup"></div>
+  <!-- eslint-disable-next-line vue/no-v-html -->
+  <div v-html="safeMarkup"></div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api";
+import { computed, defineComponent } from "@nuxtjs/composition-api";
+import { sanitizeIngredientHTML } from "~/composables/recipes/use-recipe-ingredients";
 export default defineComponent({
   props: {
     markup: {
@@ -11,5 +13,11 @@ export default defineComponent({
       required: true,
     },
   },
+  setup(props) {
+    const safeMarkup = computed(() => sanitizeIngredientHTML(props.markup));
+    return {
+      safeMarkup,
+    }
+  }
 });
 </script>

frontend/components/Domain/Recipe/RecipeIngredientListItem.vue

@@ -10,7 +10,7 @@
   </div>
 </template>
 <script lang="ts">
-import { computed, defineComponent, toRefs } from "@nuxtjs/composition-api";
+import { computed, defineComponent } from "@nuxtjs/composition-api";
 import { RecipeIngredient } from "~/lib/api/types/group";
 import { useParsedIngredientText } from "~/composables/recipes";
 

frontend/components/Domain/Recipe/RecipeList.vue

@@ -10,7 +10,10 @@
             {{ recipe.name }}
           </v-list-item-title>
           <v-list-item-subtitle v-if="showDescription">{{ recipe.description }}</v-list-item-subtitle>
-          <v-list-item-subtitle v-if="listItem && listItemDescriptions[index]" :style="attrs.style.text.subTitle" v-html="listItemDescriptions[index]"/>
+          <v-list-item-subtitle v-if="listItem && listItemDescriptions[index]" :style="attrs.style.text.subTitle">
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <div v-html="listItemDescriptions[index]"></div>
+          </v-list-item-subtitle>
         </v-list-item-content>
         <slot :name="'actions-' + recipe.id" :v-bind="{ item: recipe }"> </slot>
       </v-list-item>

frontend/components/Domain/Recipe/RecipePage/RecipePage.vue

@@ -87,7 +87,6 @@ import {
   useRouter,
   computed,
   ref,
-  useMeta,
   onMounted,
   onUnmounted,
 } from "@nuxtjs/composition-api";

frontend/components/Domain/Recipe/RecipeTimelineItem.vue

@@ -14,8 +14,8 @@
     <v-card
       hover
       :to="$listeners.selected || !recipe ? undefined : `/recipe/${recipe.slug}`"
-      @click="$emit('selected')"
       class="elevation-12"
+      @click="$emit('selected')"
     >
       <v-card-title class="background">
         <v-row>

frontend/components/Domain/ShoppingList/ShoppingListItem.vue

@@ -35,7 +35,7 @@
                 content-class="text-caption"
               >
                 <template #activator="{ on: onBtn, attrs: attrsBtn }">
-                  <v-btn small class="ml-2" icon @click="displayRecipeRefs = !displayRecipeRefs" v-bind="attrsBtn" v-on="onBtn">
+                  <v-btn small class="ml-2" icon v-bind="attrsBtn" v-on="onBtn" @click="displayRecipeRefs = !displayRecipeRefs">
                     <v-icon>
                       {{ $globals.icons.potSteam }}
                     </v-icon>

frontend/components/global/ImageCropper.vue

@@ -53,9 +53,9 @@ export default defineComponent({
             default: undefined,
         }
     },
-    setup(props, context) {
+    setup(_, context) {
         const cropper = ref<Cropper>();
-        const { $globals, $vuetify } = useContext();
+        const { $globals } = useContext();
 
         interface Control {
             color: string;

frontend/composables/recipes/use-recipe-ingredients.ts

@@ -3,7 +3,7 @@ import { useFraction } from "./use-fraction";
 import { RecipeIngredient } from "~/lib/api/types/recipe";
 const { frac } = useFraction();
 
-function sanitizeIngredientHTML(rawHtml: string) {
+export function sanitizeIngredientHTML(rawHtml: string) {
   return DOMPurify.sanitize(rawHtml, {
     USE_PROFILES: { html: true },
     ALLOWED_TAGS: ["b", "q", "i", "strong", "sup"],

frontend/pages/group/mealplan/planner/edit.vue

@@ -210,14 +210,12 @@ import { defineComponent, computed, reactive, ref, watch, onMounted } from "@nux
 import { format } from "date-fns";
 import { SortableEvent } from "sortablejs";
 import draggable from "vuedraggable";
-import { watchDebounced } from "@vueuse/core";
 import { MealsByDate } from "./types";
 import { useMealplans, usePlanTypeOptions, getEntryTypeText } from "~/composables/use-group-mealplan";
 import RecipeCardImage from "~/components/Domain/Recipe/RecipeCardImage.vue";
 import { PlanEntryType } from "~/lib/api/types/meal-plan";
 import { useUserApi } from "~/composables/api";
 import { useGroupSelf } from "~/composables/use-groups";
-import { RecipeSummary } from "~/lib/api/types/recipe";
 import { useRecipeSearch } from "~/composables/recipes/use-recipe-search";
 
 export default defineComponent({
@@ -333,7 +331,7 @@ export default defineComponent({
 
     const search = useRecipeSearch(api);
     const planTypeOptions = usePlanTypeOptions();
-    
+
     onMounted(async () => {
       await search.trigger();
     });

frontend/pages/recipe/create/new.vue

@@ -17,7 +17,7 @@
           :rules="[validators.required]"
           :hint="$t('recipe.new-recipe-names-must-be-unique')"
           persistent-hint
-          v-on:keyup.enter="createByName(newRecipeName)"
+          @keyup.enter="createByName(newRecipeName)"
         ></v-text-field>
       </v-form>
     </v-card-text>

frontend/pages/shared/recipes/_id.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, useAsync, useMeta, useRoute, useRouter } from "@nuxtjs/composition-api";
+import { defineComponent, useAsync, useMeta, useRoute, useRouter } from "@nuxtjs/composition-api";
 import RecipePage from "~/components/Domain/Recipe/RecipePage/RecipePage.vue";
 import { usePublicApi } from "~/composables/api/api-client";
 

frontend/types/application-types.ts

@@ -1,5 +1,3 @@
-import { TranslateResult } from "vue-i18n/types";
-
 export interface SideBarLink {
   icon: string;
   to?: string;