refactor: replace v-html with v-safe-html

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>

Author: pedrolamas

eslint.config.mjs

@@ -26,8 +26,6 @@ export default defineConfigWithVueTs(
       'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
       camelcase: 'off',
       'no-use-before-define': 'off',
-      'vue/no-v-html': 'off',
-      'vue/no-v-text-v-html-on-component': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/no-empty-object-type': 'off'
     }

src/components/common/AddInstanceDialog.vue

@@ -9,7 +9,7 @@
     @save="addInstance"
   >
     <v-card-text>
-      <span v-html="helpTxt" />
+      <span v-safe-html="helpTxt" />
 
       <v-text-field
         v-model="url"
@@ -50,17 +50,17 @@
 
       <v-alert
         v-if="error"
+        v-safe-html="error"
         dense
         text
         type="error"
         class="mt-3 mb-2"
-        v-html="error"
       />
 
       <p
         v-if="note"
+        v-safe-html="note"
         class="mb-0"
-        v-html="note"
       />
     </v-card-text>
   </app-dialog>

src/components/common/AppWarnings.vue

@@ -14,7 +14,7 @@
         <li
           v-for="(warning, index) in printerWarnings"
           :key="index"
-          v-html="linkExternalUrls(warning)"
+          v-safe-html="linkExternalUrls(warning)"
         />
       </ul>
     </template>
@@ -27,7 +27,7 @@
         <li
           v-for="(warning, index) in klipperWarnings"
           :key="index"
-          v-html="linkExternalUrls(warning.message)"
+          v-safe-html="linkExternalUrls(warning.message)"
         />
       </ul>
     </template>
@@ -40,7 +40,7 @@
         <li
           v-for="(failedComponent, index) in moonrakerFailedComponents"
           :key="index"
-          v-html="linkExternalUrls(failedComponent)"
+          v-safe-html="linkExternalUrls(failedComponent)"
         />
       </ul>
     </template>
@@ -53,16 +53,16 @@
         <li
           v-for="(warning, index) in moonrakerWarnings"
           :key="index"
-          v-html="linkExternalUrls(warning)"
+          v-safe-html="linkExternalUrls(warning)"
         />
       </ul>
     </template>
 
     <div v-if="printerWarnings.length > 0">
-      <span v-html="printerWarningsTxt" />
+      <span v-safe-html="printerWarningsTxt" />
     </div>
     <div v-if="moonrakerFailedComponents.length > 0">
-      <span v-html="moonrakerFailedComponentsTxt" />
+      <span v-safe-html="moonrakerFailedComponentsTxt" />
     </div>
   </v-alert>
 </template>

src/components/common/BedScrewsAdjustDialog.vue

@@ -47,7 +47,7 @@
       </v-row>
       <v-row>
         <v-col class="text-subtitle-1 text-center">
-          <span v-html="$t('app.general.msg.bed_screws_adjust')" />
+          <span v-safe-html="$t('app.general.msg.bed_screws_adjust')" />
         </v-col>
       </v-row>
 

src/components/common/CollapsableCard.vue

@@ -75,7 +75,7 @@
         <template v-if="subTitle || hasSubTitleSlot">
           <v-card-subtitle class="py-2">
             <slot name="sub-title">
-              <span v-html="subTitle" />
+              <span v-safe-html="subTitle" />
             </slot>
           </v-card-subtitle>
 
@@ -96,7 +96,7 @@
         <template v-if="subTitle || hasSubTitleSlot">
           <v-card-subtitle class="py-2">
             <slot name="sub-title">
-              <span v-html="subTitle" />
+              <span v-safe-html="subTitle" />
             </slot>
           </v-card-subtitle>
 

src/components/common/FlashMessage.vue

@@ -8,7 +8,7 @@
     top
     centered
   >
-    <span v-html="text" />
+    <span v-safe-html="text" />
 
     <template #action="{ attrs }">
       <app-btn

src/components/common/KlippyStatusCard.vue

@@ -27,7 +27,7 @@
                 type="error"
                 class="ma-0"
               >
-                <span v-html="$t('app.general.error.printer_powered_off')" />
+                <span v-safe-html="$t('app.general.error.printer_powered_off')" />
               </v-alert>
             </v-col>
             <v-col
@@ -40,7 +40,7 @@
                 type="error"
                 class="ma-0"
               >
-                <span v-html="klippyStateMessage" />
+                <span v-safe-html="klippyStateMessage" />
               </v-alert>
             </v-col>
             <v-col

src/components/common/PeripheralsDialog.vue

@@ -72,7 +72,7 @@
               text
               class="mt-4 mb-0"
             >
-              <span v-html="$t('app.system_info.msg.canbus_warning')" />
+              <span v-safe-html="$t('app.system_info.msg.canbus_warning')" />
             </v-alert>
           </template>
 

src/components/common/RegisterServiceWorker.vue

@@ -8,7 +8,7 @@
       bottom
       right
     >
-      <span v-html="$t('app.general.msg.needs_refresh')" />
+      <span v-safe-html="$t('app.general.msg.needs_refresh')" />
       <template #action="{ attrs }">
         <app-btn
           v-bind="attrs"

src/components/layout/AppBar.vue

@@ -26,8 +26,8 @@
 
       <v-toolbar-title class="printer-title text--secondary">
         <router-link
+          v-safe-html="instanceName"
           :to="{ name: 'home' }"
-          v-html="instanceName"
         />
       </v-toolbar-title>
     </div>