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/Shared/Icon/AppIcon.vue

@@ -1,9 +1,11 @@
 <template>
   <div
-    class="inline-icon"
-    v-html="svgContent"
+    class="icon-container"
     @click="onClicked"
-  />
+  >
+    <!-- eslint-disable vue/no-v-html -->
+    <div class="inline-icon" v-html="svgContent" />
+  </div>
 </template>
 
 <script lang="ts">
@@ -41,13 +43,14 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.inline-icon {
+.icon-container {
   display: inline-block;
-  :deep(svg) { // using :deep because when v-html is used the content doesn't go through Vue's template compiler.
-    display: inline-block;
-    height: 1em;
-    overflow: visible;
-    vertical-align: -0.125em;
+  .inline-icon {
+    :deep(svg) { // using :deep because when v-html is used the content doesn't go through Vue's template compiler.
+      height: 1em;
+      overflow: visible;
+      vertical-align: -0.125em;
+    }
   }
 }
 </style>

src/presentation/components/Shared/Modal/ModalContainer.vue

@@ -4,14 +4,14 @@
     class="modal-container"
   >
     <ModalOverlay
-      @transitionedOut="onOverlayTransitionedOut"
-      @click="onBackgroundOverlayClick"
       :show="isOpen"
+      @transitioned-out="onOverlayTransitionedOut"
+      @click="onBackgroundOverlayClick"
     />
     <ModalContent
       class="modal-content"
       :show="isOpen"
-      @transitionedOut="onContentTransitionedOut"
+      @transitioned-out="onContentTransitionedOut"
     >
       <slot />
     </ModalContent>
@@ -34,11 +34,6 @@ export default defineComponent({
     ModalOverlay,
     ModalContent,
   },
-  emits: {
-    /* eslint-disable @typescript-eslint/no-unused-vars */
-    'update:modelValue': (isOpen: boolean) => true,
-    /* eslint-enable @typescript-eslint/no-unused-vars */
-  },
   props: {
     modelValue: {
       type: Boolean,
@@ -49,6 +44,11 @@ export default defineComponent({
       default: true,
     },
   },
+  emits: {
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    'update:modelValue': (isOpen: boolean) => true,
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+  },
   setup(props, { emit }) {
     const isRendered = ref(false);
     const isOpen = ref(false);

src/presentation/components/Shared/Modal/ModalDialog.vue

@@ -26,17 +26,17 @@ export default defineComponent({
     ModalContainer,
     AppIcon,
   },
-  emits: {
-    /* eslint-disable @typescript-eslint/no-unused-vars */
-    'update:modelValue': (isOpen: boolean) => true,
-    /* eslint-enable @typescript-eslint/no-unused-vars */
-  },
   props: {
     modelValue: {
       type: Boolean,
       required: true,
     },
   },
+  emits: {
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    'update:modelValue': (isOpen: boolean) => true,
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+  },
   setup(props, { emit }) {
     const showDialog = computed({
       get: () => props.modelValue,

src/presentation/components/Shared/TooltipWrapper.vue

@@ -5,8 +5,9 @@
       It allows the tooltip content to calculate its position based on the trigger's location.
     -->
     <div
+      ref="triggeringElement"
       class="tooltip__trigger"
-      ref="triggeringElement">
+    >
       <slot />
     </div>
     <div class="tooltip__overlay">