[lint] Enable plugin vue recommended rules (#3403)

src/components/graph/GraphCanvas.vue

@@ -22,8 +22,8 @@
   <TitleEditor />
   <GraphCanvasMenu v-if="!betaMenuEnabled && canvasMenuEnabled" />
   <canvas
-    ref="canvasRef"
     id="graph-canvas"
+    ref="canvasRef"
     tabindex="1"
     class="w-full h-full touch-none"
   />

src/components/graph/GraphCanvasMenu.vue

@@ -3,36 +3,36 @@
     class="p-buttongroup-vertical absolute bottom-[10px] right-[10px] z-[1000]"
   >
     <Button
+      v-tooltip.left="t('graphCanvasMenu.zoomIn')"
       severity="secondary"
       icon="pi pi-plus"
-      v-tooltip.left="t('graphCanvasMenu.zoomIn')"
       :aria-label="$t('graphCanvasMenu.zoomIn')"
       @mousedown="repeat('Comfy.Canvas.ZoomIn')"
       @mouseup="stopRepeat"
     />
     <Button
+      v-tooltip.left="t('graphCanvasMenu.zoomOut')"
       severity="secondary"
       icon="pi pi-minus"
-      v-tooltip.left="t('graphCanvasMenu.zoomOut')"
       :aria-label="$t('graphCanvasMenu.zoomOut')"
       @mousedown="repeat('Comfy.Canvas.ZoomOut')"
       @mouseup="stopRepeat"
     />
     <Button
+      v-tooltip.left="t('graphCanvasMenu.fitView')"
       severity="secondary"
       icon="pi pi-expand"
-      v-tooltip.left="t('graphCanvasMenu.fitView')"
       :aria-label="$t('graphCanvasMenu.fitView')"
       @click="() => commandStore.execute('Comfy.Canvas.FitView')"
     />
     <Button
-      severity="secondary"
       v-tooltip.left="
         t(
           'graphCanvasMenu.' +
             (canvasStore.canvas?.read_only ? 'panMode' : 'selectMode')
         ) + ' (Space)'
       "
+      severity="secondary"
       :aria-label="
         t(
           'graphCanvasMenu.' +
@@ -49,12 +49,12 @@
       </template>
     </Button>
     <Button
+      v-tooltip.left="t('graphCanvasMenu.toggleLinkVisibility')"
       severity="secondary"
       :icon="linkHidden ? 'pi pi-eye-slash' : 'pi pi-eye'"
-      v-tooltip.left="t('graphCanvasMenu.toggleLinkVisibility')"
       :aria-label="$t('graphCanvasMenu.toggleLinkVisibility')"
-      @click="() => commandStore.execute('Comfy.Canvas.ToggleLinkVisibility')"
       data-testid="toggle-link-visibility-button"
+      @click="() => commandStore.execute('Comfy.Canvas.ToggleLinkVisibility')"
     />
   </ButtonGroup>
 </template>

src/components/graph/SelectionOverlay.vue

@@ -1,14 +1,14 @@
 <!-- This component is used to bound the selected items on the canvas. -->
 <template>
   <div
+    v-show="visible"
     class="selection-overlay-container pointer-events-none z-40"
     :class="{
       'show-border': showBorder
     }"
     :style="style"
-    v-show="visible"
   >
-    <slot></slot>
+    <slot />
   </div>
 </template>
 

src/components/graph/SelectionToolbox.vue

@@ -9,16 +9,16 @@
     <ColorPickerButton v-show="nodeSelected || groupSelected" />
     <Button
       v-show="nodeSelected"
-      severity="secondary"
-      text
-      @click="
-        () => commandStore.execute('Comfy.Canvas.ToggleSelectedNodes.Bypass')
-      "
-      data-testid="bypass-button"
       v-tooltip.top="{
         value: t('commands.Comfy_Canvas_ToggleSelectedNodes_Bypass.label'),
         showDelay: 1000
       }"
+      severity="secondary"
+      text
+      data-testid="bypass-button"
+      @click="
+        () => commandStore.execute('Comfy.Canvas.ToggleSelectedNodes.Bypass')
+      "
     >
       <template #icon>
         <i-game-icons:detour />
@@ -26,24 +26,24 @@
     </Button>
     <Button
       v-show="nodeSelected || groupSelected"
-      severity="secondary"
-      text
-      icon="pi pi-thumbtack"
-      @click="() => commandStore.execute('Comfy.Canvas.ToggleSelected.Pin')"
       v-tooltip.top="{
         value: t('commands.Comfy_Canvas_ToggleSelectedNodes_Pin.label'),
         showDelay: 1000
       }"
+      severity="secondary"
+      text
+      icon="pi pi-thumbtack"
+      @click="() => commandStore.execute('Comfy.Canvas.ToggleSelected.Pin')"
     />
     <Button
-      severity="danger"
-      text
-      icon="pi pi-trash"
-      @click="() => commandStore.execute('Comfy.Canvas.DeleteSelectedItems')"
       v-tooltip.top="{
         value: t('commands.Comfy_Canvas_DeleteSelectedItems.label'),
         showDelay: 1000
       }"
+      severity="danger"
+      text
+      icon="pi pi-trash"
+      @click="() => commandStore.execute('Comfy.Canvas.DeleteSelectedItems')"
     />
     <Button
       v-show="isRefreshable"
@@ -55,15 +55,15 @@
     <Button
       v-for="command in extensionToolboxCommands"
       :key="command.id"
-      severity="secondary"
-      text
-      :icon="typeof command.icon === 'function' ? command.icon() : command.icon"
-      @click="() => commandStore.execute(command.id)"
       v-tooltip.top="{
         value:
           st(`commands.${normalizeI18nKey(command.id)}.label`, '') || undefined,
         showDelay: 1000
       }"
+      severity="secondary"
+      text
+      :icon="typeof command.icon === 'function' ? command.icon() : command.icon"
+      @click="() => commandStore.execute(command.id)"
     />
   </Panel>
 </template>

src/components/graph/TitleEditor.vue

@@ -5,8 +5,8 @@
     :style="inputStyle"
   >
     <EditableText
-      :isEditing="showInput"
-      :modelValue="editedTitle"
+      :is-editing="showInput"
+      :model-value="editedTitle"
       @edit="onEdit"
     />
   </div>

src/components/graph/selectionToolbox/ColorPickerButton.vue

@@ -17,19 +17,19 @@
       class="color-picker-container absolute -top-10 left-1/2"
     >
       <SelectButton
-        :modelValue="selectedColorOption"
-        @update:modelValue="applyColor"
+        :model-value="selectedColorOption"
         :options="colorOptions"
-        optionLabel="name"
-        dataKey="value"
+        option-label="name"
+        data-key="value"
+        @update:model-value="applyColor"
       >
         <template #option="{ option }">
           <i
+            v-tooltip.top="option.localizedName"
             class="pi pi-circle-fill"
             :style="{
               color: isLightTheme ? option.value.light : option.value.dark
             }"
-            v-tooltip.top="option.localizedName"
             :data-testid="option.name"
           />
         </template>

src/components/graph/widgets/DomWidget.vue

@@ -1,17 +1,17 @@
 <template>
   <div
+    v-show="widgetState.visible"
+    ref="widgetElement"
     class="dom-widget"
     :title="tooltip"
-    ref="widgetElement"
     :style="style"
-    v-show="widgetState.visible"
   >
     <component
-      v-if="isComponentWidget(widget)"
       :is="widget.component"
-      :modelValue="widget.value"
-      @update:modelValue="emit('update:widgetValue', $event)"
+      v-if="isComponentWidget(widget)"
+      :model-value="widget.value"
       :widget="widget"
+      @update:model-value="emit('update:widgetValue', $event)"
     />
   </div>
 </template>

src/components/graph/widgets/MultiSelectWidget.vue

@@ -5,7 +5,7 @@
       :options="options"
       filter
       :placeholder="placeholder"
-      :maxSelectedLabels="3"
+      :max-selected-labels="3"
       :display="display"
       class="w-full"
     />