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>

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

@@ -2,13 +2,13 @@
   <span id="container">
     <span v-if="initialNodes.length">
       <TreeView
-        :initialNodes="initialNodes"
-        :selectedLeafNodeIds="selectedScriptNodeIds"
-        :latestFilterEvent="latestFilterEvent"
-        @nodeStateChanged="handleNodeChangedEvent($event)"
+        :initial-nodes="initialNodes"
+        :selected-leaf-node-ids="selectedScriptNodeIds"
+        :latest-filter-event="latestFilterEvent"
+        @node-state-changed="handleNodeChangedEvent($event)"
       >
-        <template v-slot:node-content="{ nodeMetadata }">
-          <NodeContent :nodeMetadata="nodeMetadata" />
+        <template #node-content="{ nodeMetadata }">
+          <NodeContent :node-metadata="nodeMetadata" />
         </template>
       </TreeView>
     </span>
@@ -28,16 +28,16 @@ import { TreeNodeStateChangedEmittedEvent } from './TreeView/Bindings/TreeNodeSt
 import { useSelectedScriptNodeIds } from './TreeViewAdapter/UseSelectedScriptNodeIds';
 
 export default defineComponent({
+  components: {
+    TreeView,
+    NodeContent,
+  },
   props: {
     categoryId: {
       type: [Number],
       default: undefined,
     },
   },
-  components: {
-    TreeView,
-    NodeContent,
-  },
   setup(props) {
     const useUserCollectionStateHook = injectKey((keys) => keys.useUserSelectionState);
     const { selectedScriptNodeIds } = useSelectedScriptNodeIds(useUserCollectionStateHook);

src/presentation/components/Scripts/View/Tree/TreeView/Node/HierarchicalTreeNode.vue

@@ -2,10 +2,11 @@
   <div class="wrapper">
     <div
       class="expansible-node"
-      @click="toggleCheck"
       :style="{
         'padding-left': `${currentNode.hierarchy.depthInTree * 24}px`,
-      }">
+      }"
+      @click="toggleCheck"
+    >
       <div
         class="expand-collapse-arrow"
         :class="{
@@ -15,10 +16,10 @@
         @click.stop="toggleExpand"
       />
       <LeafTreeNode
-        :nodeId="nodeId"
-        :treeRoot="treeRoot"
+        :node-id="nodeId"
+        :tree-root="treeRoot"
       >
-        <template v-slot:node-content="slotProps">
+        <template #node-content="slotProps">
           <slot name="node-content" v-bind="slotProps" />
         </template>
       </LeafTreeNode>
@@ -32,11 +33,11 @@
         <HierarchicalTreeNode
           v-for="id in renderedNodeIds"
           :key="id"
-          :nodeId="id"
-          :treeRoot="treeRoot"
-          :renderingStrategy="renderingStrategy"
+          :node-id="id"
+          :tree-root="treeRoot"
+          :rendering-strategy="renderingStrategy"
         >
-          <template v-slot:node-content="slotProps">
+          <template #node-content="slotProps">
             <slot name="node-content" v-bind="slotProps" />
           </template>
         </HierarchicalTreeNode>

src/presentation/components/Scripts/View/Tree/TreeView/Node/LeafTreeNode.vue

@@ -5,11 +5,11 @@
   >
     <div
       class="node focusable"
-      @focus="onNodeFocus"
-      tabindex="-1"
       :class="{
         'keyboard-focus': hasKeyboardFocus,
       }"
+      tabindex="-1"
+      @focus="onNodeFocus"
     >
       <div
         class="checkbox"
@@ -22,7 +22,7 @@
       <div class="content">
         <slot
           name="node-content"
-          :nodeMetadata="currentNode.metadata"
+          :node-metadata="currentNode.metadata"
         />
       </div>
     </div>

src/presentation/components/Scripts/View/Tree/TreeView/TreeRoot/TreeRoot.vue

@@ -5,11 +5,11 @@
     <HierarchicalTreeNode
       v-for="nodeId in renderedNodeIds"
       :key="nodeId"
-      :nodeId="nodeId"
-      :treeRoot="treeRoot"
-      :renderingStrategy="renderingStrategy"
+      :node-id="nodeId"
+      :tree-root="treeRoot"
+      :rendering-strategy="renderingStrategy"
     >
-      <template v-slot:node-content="slotProps">
+      <template #node-content="slotProps">
         <slot v-bind="slotProps" />
       </template>
     </HierarchicalTreeNode>

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

@@ -1,10 +1,10 @@
 <template>
   <div
-    class="tree"
     ref="treeContainerElement"
+    class="tree"
   >
-    <TreeRoot :treeRoot="tree" :renderingStrategy="nodeRenderingScheduler">
-      <template v-slot="slotProps">
+    <TreeRoot :tree-root="tree" :rendering-strategy="nodeRenderingScheduler">
+      <template #default="slotProps">
         <slot name="node-content" v-bind="slotProps" />
       </template>
     </TreeRoot>
@@ -34,11 +34,6 @@ export default defineComponent({
   components: {
     TreeRoot,
   },
-  emits: {
-    /* eslint-disable @typescript-eslint/no-unused-vars */
-    nodeStateChanged: (node: TreeNodeStateChangedEmittedEvent) => true,
-    /* eslint-enable @typescript-eslint/no-unused-vars */
-  },
   props: {
     initialNodes: {
       type: Array as PropType<readonly TreeInputNodeData[]>,
@@ -53,6 +48,11 @@ export default defineComponent({
       default: () => [],
     },
   },
+  emits: {
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    nodeStateChanged: (node: TreeNodeStateChangedEmittedEvent) => true,
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+  },
   setup(props, { emit }) {
     const treeContainerElement = shallowRef<HTMLElement | undefined>();