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

src/components/dialog/content/setting/AboutPanel.vue

@@ -1,6 +1,8 @@
 <template>
   <PanelTemplate value="About" class="about-container">
-    <h2 class="text-2xl font-bold mb-2">{{ $t('g.about') }}</h2>
+    <h2 class="text-2xl font-bold mb-2">
+      {{ $t('g.about') }}
+    </h2>
     <div class="space-y-2">
       <a
         v-for="badge in aboutPanelStore.badges"
@@ -13,7 +15,7 @@
       >
         <Tag class="mr-2">
           <template #icon>
-            <i :class="[badge.icon, 'mr-2 text-xl']"></i>
+            <i :class="[badge.icon, 'mr-2 text-xl']" />
           </template>
           {{ badge.label }}
         </Tag>

src/components/dialog/content/setting/ColorPaletteMessage.vue

@@ -6,11 +6,11 @@
       </div>
       <div class="actions">
         <Select
-          class="w-44"
           v-model="activePaletteId"
+          class="w-44"
           :options="palettes"
-          optionLabel="name"
-          optionValue="id"
+          option-label="name"
+          option-value="id"
         />
         <Button
           icon="pi pi-file-export"
@@ -29,8 +29,8 @@
           severity="danger"
           text
           :title="$t('g.delete')"
-          @click="colorPaletteService.deleteCustomColorPalette(activePaletteId)"
           :disabled="!colorPaletteStore.isCustomPalette(activePaletteId)"
+          @click="colorPaletteService.deleteCustomColorPalette(activePaletteId)"
         />
       </div>
     </div>

src/components/dialog/content/setting/CurrentUserMessage.vue

@@ -10,7 +10,7 @@
       <div>
         {{ $t('g.currentUser') }}: {{ userStore.currentUser?.username }}
       </div>
-      <Button icon="pi pi-sign-out" @click="logout" text />
+      <Button icon="pi pi-sign-out" text @click="logout" />
     </div>
   </Message>
 </template>

src/components/dialog/content/setting/ExtensionPanel.vue

@@ -22,16 +22,16 @@
         <div class="flex justify-end">
           <Button
             :label="$t('g.reloadToApplyChanges')"
-            @click="applyChanges"
             outlined
             severity="danger"
+            @click="applyChanges"
           />
         </div>
       </Message>
     </template>
     <DataTable
       :value="extensionStore.extensions"
-      stripedRows
+      striped-rows
       size="small"
       :filters="filters"
     >
@@ -61,8 +61,8 @@
         </template>
         <template #body="slotProps">
           <ToggleSwitch
-            :disabled="extensionStore.isExtensionReadOnly(slotProps.data.name)"
             v-model="editingEnabledExtensions[slotProps.data.name]"
+            :disabled="extensionStore.isExtensionReadOnly(slotProps.data.name)"
             @change="updateExtensionStatus"
           />
         </template>

src/components/dialog/content/setting/KeybindingPanel.vue

@@ -8,16 +8,16 @@
     </template>
 
     <DataTable
-      :value="commandsData"
       v-model:selection="selectedCommandData"
+      :value="commandsData"
       :global-filter-fields="['id', 'label']"
       :filters="filters"
-      selectionMode="single"
-      stripedRows
+      selection-mode="single"
+      striped-rows
       :pt="{
         header: 'px-0'
       }"
-      @rowDblclick="editKeybinding($event.data)"
+      @row-dblclick="editKeybinding($event.data)"
     >
       <Column field="actions" header="">
         <template #body="slotProps">
@@ -30,8 +30,8 @@
             <Button
               icon="pi pi-trash"
               class="p-button-text p-button-danger"
-              @click="removeKeybinding(slotProps.data)"
               :disabled="!slotProps.data.keybinding"
+              @click="removeKeybinding(slotProps.data)"
             />
           </div>
         </template>
@@ -55,8 +55,8 @@
         <template #body="slotProps">
           <KeyComboDisplay
             v-if="slotProps.data.keybinding"
-            :keyCombo="slotProps.data.keybinding.combo"
-            :isModified="
+            :key-combo="slotProps.data.keybinding.combo"
+            :is-modified="
               keybindingStore.isCommandKeybindingModified(slotProps.data.id)
             "
           />
@@ -66,22 +66,22 @@
     </DataTable>
 
     <Dialog
-      class="min-w-96"
       v-model:visible="editDialogVisible"
+      class="min-w-96"
       modal
       :header="currentEditingCommand?.label"
       @hide="cancelEdit"
     >
       <div>
         <InputText
-          class="mb-2 text-center"
           ref="keybindingInput"
-          :modelValue="newBindingKeyCombo?.toString() ?? ''"
+          class="mb-2 text-center"
+          :model-value="newBindingKeyCombo?.toString() ?? ''"
           placeholder="Press keys for new binding"
-          @keydown.stop.prevent="captureKeybinding"
           autocomplete="off"
           fluid
           :invalid="!!existingKeybindingOnCombo"
+          @keydown.stop.prevent="captureKeybinding"
         />
         <Message v-if="existingKeybindingOnCombo" severity="error">
           Keybinding already exists on
@@ -95,16 +95,16 @@
         <Button
           label="Save"
           icon="pi pi-check"
-          @click="saveKeybinding"
           :disabled="!!existingKeybindingOnCombo"
           autofocus
+          @click="saveKeybinding"
         />
       </template>
     </Dialog>
     <Button
+      v-tooltip="$t('g.resetKeybindingsTooltip')"
       class="mt-4"
       :label="$t('g.reset')"
-      v-tooltip="$t('g.resetKeybindingsTooltip')"
       icon="pi pi-trash"
       severity="danger"
       fluid

src/components/dialog/content/setting/ServerConfigPanel.vue

@@ -18,14 +18,14 @@
           <div class="flex justify-end gap-2">
             <Button
               :label="$t('serverConfig.revertChanges')"
-              @click="revertChanges"
               outlined
+              @click="revertChanges"
             />
             <Button
               :label="$t('serverConfig.restart')"
-              @click="restartApp"
               outlined
               severity="danger"
+              @click="restartApp"
             />
           </div>
         </Message>
@@ -37,9 +37,9 @@
             <p>{{ commandLineArgs }}</p>
             <Button
               icon="pi pi-clipboard"
-              @click="copyCommandLineArgs"
               severity="secondary"
               text
+              @click="copyCommandLineArgs"
             />
           </div>
         </Message>
@@ -53,10 +53,10 @@
       <h3>{{ $t(`serverConfigCategories.${label}`, label) }}</h3>
       <div v-for="item in items" :key="item.name" class="mb-4">
         <FormItem
-          :item="translateItem(item)"
-          v-model:formValue="item.value"
           :id="item.id"
-          :labelClass="{
+          v-model:formValue="item.value"
+          :item="translateItem(item)"
+          :label-class="{
             'text-highlight': item.initialValue !== item.value
           }"
         />

src/components/dialog/content/setting/SettingItem.vue

@@ -1,9 +1,9 @@
 <template>
   <FormItem
-    :item="formItem"
     :id="setting.id"
-    :formValue="settingValue"
-    @update:formValue="updateSettingValue"
+    :item="formItem"
+    :form-value="settingValue"
+    @update:form-value="updateSettingValue"
   >
     <template #name-prefix>
       <Tag v-if="setting.id === 'Comfy.Locale'" class="pi pi-language" />