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/Tree/NodeContent/Documentation/DocumentableNode.vue

@@ -6,22 +6,26 @@
       </div>
       <ToggleDocumentationButton
         v-if="docs && docs.length > 0"
-        v-on:show="isExpanded = true"
-        v-on:hide="isExpanded = false"
+        @show="isExpanded = true"
+        @hide="isExpanded = false"
       />
     </div>
     <div
       v-if="docs && docs.length > 0 && isExpanded"
       class="docs"
-      v-bind:class="{ 'docs-expanded': isExpanded, 'docs-collapsed': !isExpanded }"
+      :class="{
+        'docs-expanded': isExpanded,
+        'docs-collapsed': !isExpanded,
+      }"
     >
       <DocumentationText
         :docs="docs"
         class="text"
-        v-bind:class="{
+        :class="{
           expanded: isExpanded,
           collapsed: !isExpanded,
-        }" />
+        }"
+      />
     </div>
   </div>
 </template>

src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue

@@ -1,8 +1,9 @@
 <template>
+  <!-- eslint-disable vue/no-v-html -->
   <div
     class="documentation-text"
+    @click.stop
     v-html="renderedText"
-    v-on:click.stop
   />
 </template>
 

src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/ToggleDocumentationButton.vue

@@ -2,9 +2,9 @@
   <a
     class="button"
     target="_blank"
-    v-bind:class="{ 'button-on': isOn }"
-    v-on:click.stop
-    v-on:click="toggle()"
+    :class="{ 'button-on': isOn }"
+    @click.stop
+    @click="toggle()"
   >
     <AppIcon icon="circle-info" />
   </a>

src/presentation/components/Scripts/View/Tree/NodeContent/NodeContent.vue

@@ -1,11 +1,14 @@
 <template>
   <DocumentableNode :docs="nodeMetadata.docs">
     <div id="node">
-      <div class="item text">{{ nodeMetadata.text }}</div>
+      <div class="item text">
+        {{ nodeMetadata.text }}
+      </div>
       <RevertToggle
-        class="item"
         v-if="nodeMetadata.isReversible"
-        :node="nodeMetadata" />
+        class="item"
+        :node="nodeMetadata"
+      />
     </div>
   </DocumentableNode>
 </template>

src/presentation/components/Scripts/View/Tree/NodeContent/RevertToggle.vue

@@ -1,7 +1,7 @@
 <template>
   <ToggleSwitch
     v-model="isReverted"
-    :stopClickPropagation="true"
+    :stop-click-propagation="true"
     :label="'revert'"
   />
 </template>

src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue

@@ -4,9 +4,9 @@
     @click="handleClickPropagation"
   >
     <input
+      v-model="isChecked"
       type="checkbox"
       class="toggle-input"
-      v-model="isChecked"
     >
     <div class="toggle-animation">
       <span class="label-off">{{ label }}</span>