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/Scripts/Menu/MenuOptionList.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="list">
-    <div v-if="label">{{ label }}:</div>
+    <div v-if="label">
+      {{ label }}:
+    </div>
     <div class="items">
       <slot />
     </div>

src/presentation/components/Scripts/Menu/MenuOptionListItem.vue

@@ -5,12 +5,13 @@
       such as adding content in `::before` block without making it clickable.
     -->
     <span
-      v-bind:class="{
+      v-non-collapsing
+      :class="{
         disabled: !enabled,
         enabled: enabled,
       }"
-      v-non-collapsing
-      @click="onClicked()">{{label}}</span>
+      @click="onClicked()"
+    >{{ label }}</span>
   </span>
 </template>
 

src/presentation/components/Scripts/Menu/Selector/TheSelector.vue

@@ -7,7 +7,7 @@
         :enabled="currentSelection !== SelectionType.None"
         @click="selectType(SelectionType.None)"
       />
-      <template v-slot:tooltip>
+      <template #tooltip>
         Deselect all selected scripts.
         <br />
         💡 Good start to dive deeper into tweaks and select only what you want.
@@ -21,7 +21,7 @@
         :enabled="currentSelection !== SelectionType.Standard"
         @click="selectType(SelectionType.Standard)"
       />
-      <template v-slot:tooltip>
+      <template #tooltip>
         🛡️ Balanced for privacy and functionality.
         <br />
         OS and applications will function normally.
@@ -37,7 +37,7 @@
         :enabled="currentSelection !== SelectionType.Strict"
         @click="selectType(SelectionType.Strict)"
       />
-      <template v-slot:tooltip>
+      <template #tooltip>
         🚫 Stronger privacy, disables risky functions that may leak your data.
         <br />
         ⚠️ Double check to remove scripts where you would trade functionality for privacy
@@ -53,7 +53,7 @@
         :enabled="currentSelection !== SelectionType.All"
         @click="selectType(SelectionType.All)"
       />
-      <template v-slot:tooltip>
+      <template #tooltip>
         🔒 Strongest privacy, disabling any functionality that may leak your data.
         <br />
         🛑 Not designed for daily users, it will break important functionalities.

src/presentation/components/Scripts/Menu/TheOsChanger.vue

@@ -4,8 +4,8 @@
       v-for="os in allOses"
       :key="os.name"
       :enabled="currentOs !== os.os"
-      @click="changeOs(os.os)"
       :label="os.name"
+      @click="changeOs(os.os)"
     />
   </MenuOptionList>
 </template>

src/presentation/components/Scripts/Menu/TheScriptsMenu.vue

@@ -3,9 +3,10 @@
     <TheSelector class="item" />
     <TheOsChanger class="item" />
     <TheViewChanger
+      v-if="!isSearching"
       class="item"
-      v-on:viewChanged="$emit('viewChanged', $event)"
-      v-if="!isSearching" />
+      @view-changed="$emit('viewChanged', $event)"
+    />
   </div>
 </template>
 
@@ -17,6 +18,7 @@ import { IEventSubscription } from '@/infrastructure/Events/IEventSource';
 import TheOsChanger from './TheOsChanger.vue';
 import TheSelector from './Selector/TheSelector.vue';
 import TheViewChanger from './View/TheViewChanger.vue';
+import { ViewType } from './View/ViewType';
 
 export default defineComponent({
   components: {
@@ -24,6 +26,11 @@ export default defineComponent({
     TheOsChanger,
     TheViewChanger,
   },
+  emits: {
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    viewChanged: (viewType: ViewType) => true,
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+  },
   setup() {
     const { onStateChange } = injectKey((keys) => keys.useCollectionState);
     const { events } = injectKey((keys) => keys.useAutoUnsubscribedEvents);

src/presentation/components/Scripts/Menu/View/TheViewChanger.vue

@@ -1,7 +1,8 @@
 <template>
   <MenuOptionList
     label="View"
-    class="part">
+    class="part"
+  >
     <MenuOptionListItem
       v-for="view in viewOptions"
       :key="view.type"