Refactor to Vue 3 recommended ESLint rules

These updates ensure better adherence to Vue 3 standards and improve
overall code quality and readability.

- Update ESLint configuration from Vue 2.x to Vue 3 rules.
- Switch from "essential" to strictest "recommended" ESLint ruleset.
- Adjust ESLint script to treat warnings as errors by using
  `--max-warnings=0` flag. This enforces stricter code quality controls
  provided by Vue 3 rules.

src/presentation/components/Code/CodeButtons/CodeCopyButton.vue

@@ -1,8 +1,8 @@
 <template>
   <IconButton
     text="Copy"
-    @click="copyCode"
     icon-name="copy"
+    @click="copyCode"
   />
 </template>
 

src/presentation/components/Code/CodeButtons/CodeRunButton.vue

@@ -2,8 +2,8 @@
   <IconButton
     v-if="canRun"
     text="Run"
-    @click="executeCode"
     icon-name="play"
+    @click="executeCode"
   />
 </template>
 

src/presentation/components/Code/CodeButtons/IconButton.vue

@@ -9,7 +9,9 @@
         class="button__icon"
         :icon="iconName"
       />
-      <div class="button__text">{{text}}</div>
+      <div class="button__text">
+        {{ text }}
+      </div>
     </button>
   </div>
 </template>

src/presentation/components/Code/CodeButtons/Save/CodeSaveButton.vue

@@ -2,8 +2,8 @@
   <div>
     <IconButton
       :text="isDesktopVersion ? 'Save' : 'Download'"
-      @click="saveCode"
       :icon-name="isDesktopVersion ? 'floppy-disk' : 'file-arrow-down'"
+      @click="saveCode"
     />
     <ModalDialog v-if="instructions" v-model="areInstructionsVisible">
       <InstructionList :data="instructions" />

src/presentation/components/Code/CodeButtons/Save/Instructions/CodeInstruction.vue

@@ -9,7 +9,7 @@
           class="copy-button"
           @click="copyCode"
         />
-        <template v-slot:tooltip>
+        <template #tooltip>
           Copy
         </template>
       </TooltipWrapper>

src/presentation/components/Code/CodeButtons/Save/Instructions/InfoTooltip.vue

@@ -1,7 +1,7 @@
 <template>
   <TooltipWrapper>
     <AppIcon icon="circle-info" />
-    <template v-slot:tooltip>
+    <template #tooltip>
       <slot />
     </template>
   </TooltipWrapper>

src/presentation/components/Code/CodeButtons/Save/Instructions/InstructionList.vue

@@ -20,19 +20,21 @@
     <p>
       <ol>
         <li
-          v-for='(step, index) in data.steps'
-          v-bind:key="index"
+          v-for="(step, index) in data.steps"
+          :key="index"
           class="step"
         >
           <div class="step__action">
             <span>{{ step.action.instruction }}</span>
-            <div class="details-container" v-if="step.action.details">
+            <div v-if="step.action.details" class="details-container">
+              <!-- eslint-disable vue/no-v-html -->
               <InfoTooltip><div v-html="step.action.details" /></InfoTooltip>
             </div>
           </div>
           <div v-if="step.code" class="step__code">
             <CodeInstruction>{{ step.code.instruction }}</CodeInstruction>
-            <div class="details-container" v-if="step.code.details">
+            <div v-if="step.code.details" class="details-container">
+              <!-- eslint-disable vue/no-v-html -->
               <InfoTooltip><div v-html="step.code.details" /></InfoTooltip>
             </div>
           </div>

src/presentation/components/Code/CodeButtons/TheCodeButtons.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container" v-if="hasCode">
+  <div v-if="hasCode" class="container">
     <CodeRunButton class="code-button" />
     <CodeSaveButton class="code-button" />
     <CodeCopyButton class="code-button" />