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/View/Cards/CardList.vue

@@ -1,5 +1,7 @@
 <template>
-  <SizeObserver v-on:widthChanged="width = $event">
+  <SizeObserver
+    @width-changed="width = $event"
+  >
     <transition name="fade-transition">
       <div v-if="width">
         <!-- <div id="responsivity-debug">
@@ -14,21 +16,23 @@
           class="cards"
         >
           <CardListItem
+            v-for="categoryId of categoryIds"
+            :key="categoryId"
             class="card"
-            v-bind:class="{
+            :class="{
               'small-screen': width <= 500,
               'medium-screen': width > 500 && width < 750,
               'big-screen': width >= 750,
             }"
-            v-for="categoryId of categoryIds"
             :data-category="categoryId"
-            v-bind:key="categoryId"
-            :categoryId="categoryId"
-            :activeCategoryId="activeCategoryId"
-            v-on:cardExpansionChanged="onSelected(categoryId, $event)"
+            :category-id="categoryId"
+            :active-category-id="activeCategoryId"
+            @card-expansion-changed="onSelected(categoryId, $event)"
           />
         </div>
-        <div v-else class="error">Something went bad 😢</div>
+        <div v-else class="error">
+          Something went bad 😢
+        </div>
       </div>
     </transition>
   </SizeObserver>

src/presentation/components/Scripts/View/Cards/CardListItem.vue

@@ -1,19 +1,21 @@
 <template>
   <div
+    ref="cardElement"
     class="card"
-    v-on:click="isExpanded = !isExpanded"
-    v-bind:class="{
+    :class="{
       'is-collapsed': !isExpanded,
       'is-inactive': activeCategoryId && activeCategoryId != categoryId,
       'is-expanded': isExpanded,
     }"
-    ref="cardElement">
+    @click="isExpanded = !isExpanded"
+  >
     <div class="card__inner">
       <!-- Title -->
       <span
+        v-if="cardTitle.length > 0"
         class="card__inner__title"
-        v-if="cardTitle && cardTitle.length > 0">
-        <span>{{cardTitle}}</span>
+      >
+        <span>{{ cardTitle }}</span>
       </span>
       <span v-else>Oh no 😢</span>
       <!-- Expand icon -->
@@ -24,17 +26,17 @@
       <!-- Indeterminate and full states -->
       <CardSelectionIndicator
         class="card__inner__selection_indicator"
-        :categoryId="categoryId"
+        :category-id="categoryId"
       />
     </div>
-    <div class="card__expander" v-on:click.stop>
+    <div class="card__expander" @click.stop>
       <div class="card__expander__content">
-        <ScriptsTree :categoryId="categoryId" />
+        <ScriptsTree :category-id="categoryId" />
       </div>
       <div class="card__expander__close-button">
         <AppIcon
           icon="xmark"
-          v-on:click="collapse()"
+          @click="collapse()"
         />
       </div>
     </div>

src/presentation/components/Scripts/View/Cards/CardSelectionIndicator.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
     <AppIcon
-      icon="battery-half"
       v-if="isAnyChildSelected && !areAllChildrenSelected"
+      icon="battery-half"
     />
     <AppIcon
-      icon="battery-full"
       v-if="areAllChildrenSelected"
+      icon="battery-full"
     />
   </div>
 </template>