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

src/components/common/ColorCustomizationSelector.vue

@@ -5,8 +5,8 @@
     <SelectButton
       v-model="selectedColorOption"
       :options="colorOptionsWithCustom"
-      optionLabel="name"
-      dataKey="value"
+      option-label="name"
+      data-key="value"
       :allow-empty="false"
     >
       <template #option="slotProps">
@@ -18,8 +18,8 @@
             backgroundColor: slotProps.option.value,
             borderRadius: '50%'
           }"
-        ></div>
-        <i v-else class="pi pi-palette text-lg"></i>
+        />
+        <i v-else class="pi pi-palette text-lg" />
       </template>
     </SelectButton>
     <ColorPicker

src/components/common/ComfyImage.vue

@@ -8,22 +8,22 @@
     <img
       v-if="contain"
       :src="src"
-      @error="handleImageError"
       :data-test="src"
       class="comfy-image-blur"
       :style="{ 'background-image': `url(${src})` }"
       :alt="alt"
+      @error="handleImageError"
     />
     <img
       :src="src"
-      @error="handleImageError"
       class="comfy-image-main"
       :class="classProp"
       :alt="alt"
+      @error="handleImageError"
     />
   </span>
   <div v-if="imageBroken" class="broken-image-placeholder">
-    <i class="pi pi-image"></i>
+    <i class="pi pi-image" />
     <span>{{ $t('g.imageFailedToLoad') }}</span>
   </div>
 </template>

src/components/common/CustomFormValue.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="container"></div>
+  <div ref="container" />
 </template>
 
 <script setup lang="ts">

src/components/common/CustomizationDialog.vue

@@ -6,14 +6,14 @@
         <SelectButton
           v-model="selectedIcon"
           :options="iconOptions"
-          optionLabel="name"
-          dataKey="value"
+          option-label="name"
+          data-key="value"
         >
           <template #option="slotProps">
             <i
               :class="['pi', slotProps.option.value, 'mr-2']"
               :style="{ color: finalColor }"
-            ></i>
+            />
           </template>
         </SelectButton>
       </div>
@@ -30,14 +30,14 @@
       <Button
         :label="$t('g.reset')"
         icon="pi pi-refresh"
-        @click="resetCustomization"
         class="p-button-text"
+        @click="resetCustomization"
       />
       <Button
         :label="$t('g.confirm')"
         icon="pi pi-check"
-        @click="confirmCustomization"
         autofocus
+        @click="confirmCustomization"
       />
     </template>
   </Dialog>

src/components/common/DeviceInfo.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="grid grid-cols-2 gap-2">
     <template v-for="col in deviceColumns" :key="col.field">
-      <div class="font-medium">{{ col.header }}</div>
+      <div class="font-medium">
+        {{ col.header }}
+      </div>
       <div>
         {{ formatValue(props.device[col.field], col.field) }}
       </div>

src/components/common/EditableText.vue

@@ -6,19 +6,19 @@
     <!-- Avoid double triggering finishEditing event when keyup.enter is triggered -->
     <InputText
       v-else
+      ref="inputRef"
+      v-model:modelValue="inputValue"
+      v-focus
       type="text"
       size="small"
       fluid
-      v-model:modelValue="inputValue"
-      ref="inputRef"
-      @keyup.enter="blurInputElement"
-      @click.stop
       :pt="{
         root: {
           onBlur: finishEditing
         }
       }"
-      v-focus
+      @keyup.enter="blurInputElement"
+      @click.stop
     />
   </div>
 </template>

src/components/common/ElectronFileDownload.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="flex flex-col">
     <div class="flex flex-row items-center gap-2">
-      <i class="pi pi-check text-green-500" v-if="status === 'completed'" />
+      <i v-if="status === 'completed'" class="pi pi-check text-green-500" />
       <div class="file-info">
         <div class="file-details">
           <span class="file-type" :title="hint">{{ label }}</span>
@@ -14,20 +14,20 @@
 
       <div class="file-action">
         <Button
+          v-if="status === null || status === 'error'"
           class="file-action-button"
           :label="$t('g.download') + ' (' + fileSize + ')'"
           size="small"
           outlined
           :disabled="!!props.error"
-          @click="triggerDownload"
-          v-if="status === null || status === 'error'"
           icon="pi pi-download"
+          @click="triggerDownload"
         />
       </div>
     </div>
     <div
-      class="flex flex-row items-center gap-2"
       v-if="status === 'in_progress' || status === 'paused'"
+      class="flex flex-row items-center gap-2"
     >
       <!-- Temporary fix for issue when % only comes into view only if the progress bar is large enough
            https://comfy-organization.slack.com/archives/C07H3GLKDPF/p1731551013385499
@@ -39,36 +39,36 @@
       />
 
       <Button
-        class="file-action-button"
-        size="small"
-        outlined
-        :disabled="!!props.error"
-        @click="triggerPauseDownload"
         v-if="status === 'in_progress'"
-        icon="pi pi-pause-circle"
         v-tooltip.top="t('electronFileDownload.pause')"
-      />
-
-      <Button
         class="file-action-button"
         size="small"
         outlined
         :disabled="!!props.error"
-        @click="triggerResumeDownload"
+        icon="pi pi-pause-circle"
+        @click="triggerPauseDownload"
+      />
+
+      <Button
         v-if="status === 'paused'"
-        icon="pi pi-play-circle"
         v-tooltip.top="t('electronFileDownload.resume')"
-      />
-
-      <Button
         class="file-action-button"
         size="small"
         outlined
         :disabled="!!props.error"
-        @click="triggerCancelDownload"
+        icon="pi pi-play-circle"
+        @click="triggerResumeDownload"
+      />
+
+      <Button
+        v-tooltip.top="t('electronFileDownload.cancel')"
+        class="file-action-button"
+        size="small"
+        outlined
+        :disabled="!!props.error"
         icon="pi pi-times-circle"
         severity="danger"
-        v-tooltip.top="t('electronFileDownload.cancel')"
+        @click="triggerCancelDownload"
       />
     </div>
   </div>

src/components/common/ExtensionSlot.vue

@@ -1,5 +1,5 @@
 <template>
-  <component v-if="extension.type === 'vue'" :is="extension.component" />
+  <component :is="extension.component" v-if="extension.type === 'vue'" />
   <div
     v-else
     :ref="
@@ -11,7 +11,7 @@
           )
       }
     "
-  ></div>
+  />
 </template>
 
 <script setup lang="ts">

src/components/common/FormImageUpload.vue

@@ -10,7 +10,7 @@
           :src="modelValue"
           class="max-w-full max-h-full object-contain"
         />
-        <i v-else class="pi pi-image text-gray-400 text-xl"></i>
+        <i v-else class="pi pi-image text-gray-400 text-xl" />
       </div>
 
       <div class="flex flex-col gap-2">

src/components/common/FormItem.vue

@@ -3,26 +3,26 @@
   <div class="flex flex-row items-center gap-2">
     <div class="form-label flex flex-grow items-center">
       <span
+        :id="`${props.id}-label`"
         class="text-muted"
         :class="props.labelClass"
-        :id="`${props.id}-label`"
       >
-        <slot name="name-prefix"></slot>
+        <slot name="name-prefix" />
         {{ props.item.name }}
         <i
           v-if="props.item.tooltip"
-          class="pi pi-info-circle bg-transparent"
           v-tooltip="props.item.tooltip"
+          class="pi pi-info-circle bg-transparent"
         />
-        <slot name="name-suffix"></slot>
+        <slot name="name-suffix" />
       </span>
     </div>
     <div class="form-input flex justify-end">
       <component
         :is="markRaw(getFormComponent(props.item))"
         :id="props.id"
-        :aria-labelledby="`${props.id}-label`"
         v-model:modelValue="formValue"
+        :aria-labelledby="`${props.id}-label`"
         v-bind="getFormAttrs(props.item)"
       />
     </div>

src/components/common/InputKnob.vue

@@ -1,26 +1,26 @@
 <template>
   <div class="input-knob flex flex-row items-center gap-2">
     <Knob
-      :modelValue="modelValue"
-      @update:modelValue="updateValue"
-      :valueTemplate="displayValue"
+      :model-value="modelValue"
+      :value-template="displayValue"
       class="knob-part"
       :class="knobClass"
       :min="min"
       :max="max"
       :step="step"
       v-bind="$attrs"
+      @update:model-value="updateValue"
     />
     <InputNumber
-      :modelValue="modelValue"
-      @update:modelValue="updateValue"
+      :model-value="modelValue"
       class="input-part"
       :max-fraction-digits="3"
       :class="inputClass"
       :min="min"
       :max="max"
       :step="step"
-      :allowEmpty="false"
+      :allow-empty="false"
+      @update:model-value="updateValue"
     />
   </div>
 </template>

src/components/common/InputSlider.vue

@@ -1,25 +1,25 @@
 <template>
   <div class="input-slider flex flex-row items-center gap-2">
     <Slider
-      :modelValue="modelValue"
-      @update:modelValue="(value) => updateValue(value as number)"
+      :model-value="modelValue"
       class="slider-part"
       :class="sliderClass"
       :min="min"
       :max="max"
       :step="step"
       v-bind="$attrs"
+      @update:model-value="(value) => updateValue(value as number)"
     />
     <InputNumber
-      :modelValue="modelValue"
-      @update:modelValue="updateValue"
+      :model-value="modelValue"
       class="input-part"
       :max-fraction-digits="3"
       :class="inputClass"
       :min="min"
       :max="max"
       :step="step"
-      :allowEmpty="false"
+      :allow-empty="false"
+      @update:model-value="updateValue"
     />
   </div>
 </template>

src/components/common/NoResultsPlaceholder.vue

@@ -3,14 +3,16 @@
     <Card>
       <template #content>
         <div class="flex flex-col items-center">
-          <i :class="icon" style="font-size: 3rem; margin-bottom: 1rem"></i>
+          <i :class="icon" style="font-size: 3rem; margin-bottom: 1rem" />
           <h3>{{ title }}</h3>
-          <p class="whitespace-pre-line text-center">{{ message }}</p>
+          <p class="whitespace-pre-line text-center">
+            {{ message }}
+          </p>
           <Button
             v-if="buttonLabel"
             :label="buttonLabel"
-            @click="$emit('action')"
             class="p-button-text"
+            @click="$emit('action')"
           />
         </div>
       </template>

src/components/common/RefreshButton.vue

@@ -22,7 +22,7 @@
       class="p-button-icon pi pi-refresh transition-all"
       :class="{ 'opacity-0': active }"
       data-pc-section="icon"
-    ></span>
+    />
     <span class="p-button-label" data-pc-section="label">&nbsp;</span>
     <ProgressSpinner v-show="active" class="absolute w-1/2 h-1/2" />
   </Button>

src/components/common/SearchBox.vue

@@ -11,9 +11,9 @@
       />
       <InputText
         class="search-box-input w-full"
-        @input="handleInput"
-        :modelValue="modelValue"
+        :model-value="modelValue"
         :placeholder="placeholder"
+        @input="handleInput"
       />
       <InputIcon v-if="!modelValue" :class="icon" />
       <Button
@@ -26,8 +26,8 @@
       />
     </IconField>
     <div
-      class="search-filters pt-2 flex flex-wrap gap-2"
       v-if="filters?.length"
+      class="search-filters pt-2 flex flex-wrap gap-2"
     >
       <SearchFilterChip
         v-for="filter in filters"

src/components/common/SystemStatsPanel.vue

@@ -1,10 +1,14 @@
 <template>
   <div class="system-stats">
     <div class="mb-6">
-      <h2 class="text-2xl font-semibold mb-4">{{ $t('g.systemInfo') }}</h2>
+      <h2 class="text-2xl font-semibold mb-4">
+        {{ $t('g.systemInfo') }}
+      </h2>
       <div class="grid grid-cols-2 gap-2">
         <template v-for="col in systemColumns" :key="col.field">
-          <div class="font-medium">{{ col.header }}</div>
+          <div class="font-medium">
+            {{ col.header }}
+          </div>
           <div>{{ formatValue(systemInfo[col.field], col.field) }}</div>
         </template>
       </div>
@@ -13,7 +17,9 @@
     <Divider />
 
     <div>
-      <h2 class="text-2xl font-semibold mb-4">{{ $t('g.devices') }}</h2>
+      <h2 class="text-2xl font-semibold mb-4">
+        {{ $t('g.devices') }}
+      </h2>
       <TabView v-if="props.stats.devices.length > 1">
         <TabPanel
           v-for="device in props.stats.devices"

src/components/common/TreeExplorer.vue

@@ -1,11 +1,11 @@
 <template>
   <Tree
-    class="tree-explorer py-0 px-2 2xl:px-4"
-    :class="props.class"
     v-model:expandedKeys="expandedKeys"
     v-model:selectionKeys="selectionKeys"
+    class="tree-explorer py-0 px-2 2xl:px-4"
+    :class="props.class"
     :value="renderedRoot.children"
-    selectionMode="single"
+    selection-mode="single"
     :pt="{
       nodeLabel: 'tree-explorer-node-label',
       nodeContent: ({ context }) => ({

src/components/common/TreeExplorerTreeNode.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    ref="container"
     :class="[
       'tree-node',
       {
@@ -8,17 +9,16 @@
         'tree-leaf': props.node.leaf
       }
     ]"
-    ref="container"
   >
     <div class="node-content">
       <span class="node-label">
-        <slot name="before-label" :node="props.node"></slot>
+        <slot name="before-label" :node="props.node" />
         <EditableText
-          :modelValue="node.label"
-          :isEditing="isEditing"
+          :model-value="node.label"
+          :is-editing="isEditing"
           @edit="handleRename"
         />
-        <slot name="after-label" :node="props.node"></slot>
+        <slot name="after-label" :node="props.node" />
       </span>
       <Badge
         v-if="showNodeBadgeText"
@@ -30,7 +30,7 @@
     <div
       class="node-actions motion-safe:opacity-0 motion-safe:group-hover/tree-node:opacity-100"
     >
-      <slot name="actions" :node="props.node"></slot>
+      <slot name="actions" :node="props.node" />
     </div>
   </div>
 </template>

src/components/common/VirtualGrid.vue

@@ -3,7 +3,7 @@
     <div :style="{ height: `${(state.start / cols) * itemHeight}px` }" />
     <div :style="gridStyle">
       <div v-for="item in renderedItems" :key="item.key" data-virtual-grid-item>
-        <slot name="item" :item="item"> </slot>
+        <slot name="item" :item="item" />
       </div>
     </div>
     <div