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

src/components/load3d/controls/CameraControls.vue

@@ -2,19 +2,19 @@
   <div class="flex flex-col">
     <Button class="p-button-rounded p-button-text" @click="switchCamera">
       <i
-        :class="['pi', getCameraIcon, 'text-white text-lg']"
         v-tooltip.right="{
           value: t('load3d.switchCamera'),
           showDelay: 300
         }"
-      ></i>
+        :class="['pi', getCameraIcon, 'text-white text-lg']"
+      />
     </Button>
-    <div class="relative show-fov" v-if="showFOVButton">
+    <div v-if="showFOVButton" class="relative show-fov">
       <Button class="p-button-rounded p-button-text" @click="toggleFOV">
         <i
-          class="pi pi-expand text-white text-lg"
           v-tooltip.right="{ value: t('load3d.fov'), showDelay: 300 }"
-        ></i>
+          class="pi pi-expand text-white text-lg"
+        />
       </Button>
       <div
         v-show="showFOV"
@@ -24,10 +24,10 @@
         <Slider
           v-model="fov"
           class="w-full"
-          @change="updateFOV"
           :min="10"
           :max="150"
           :step="1"
+          @change="updateFOV"
         />
       </div>
     </div>

src/components/load3d/controls/ExportControls.vue

@@ -6,12 +6,12 @@
         @click="toggleExportFormats"
       >
         <i
-          class="pi pi-download text-white text-lg"
           v-tooltip.right="{
             value: t('load3d.exportModel'),
             showDelay: 300
           }"
-        ></i>
+          class="pi pi-download text-white text-lg"
+        />
       </Button>
       <div
         v-show="showExportFormats"

src/components/load3d/controls/LightControls.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="flex flex-col">
-    <div class="relative show-light-intensity" v-if="showLightIntensityButton">
+    <div v-if="showLightIntensityButton" class="relative show-light-intensity">
       <Button
         class="p-button-rounded p-button-text"
         @click="toggleLightIntensity"
       >
         <i
-          class="pi pi-sun text-white text-lg"
           v-tooltip.right="{
             value: t('load3d.lightIntensity'),
             showDelay: 300
           }"
-        ></i>
+          class="pi pi-sun text-white text-lg"
+        />
       </Button>
       <div
         v-show="showLightIntensity"
@@ -21,10 +21,10 @@
         <Slider
           v-model="lightIntensity"
           class="w-full"
-          @change="updateLightIntensity"
           :min="1"
           :max="20"
           :step="1"
+          @change="updateLightIntensity"
         />
       </div>
     </div>

src/components/load3d/controls/ModelControls.vue

@@ -3,12 +3,12 @@
     <div class="relative show-up-direction">
       <Button class="p-button-rounded p-button-text" @click="toggleUpDirection">
         <i
-          class="pi pi-arrow-up text-white text-lg"
           v-tooltip.right="{
             value: t('load3d.upDirection'),
             showDelay: 300
           }"
-        ></i>
+          class="pi pi-arrow-up text-white text-lg"
+        />
       </Button>
       <div
         v-show="showUpDirection"
@@ -34,12 +34,12 @@
         @click="toggleMaterialMode"
       >
         <i
-          class="pi pi-box text-white text-lg"
           v-tooltip.right="{
             value: t('load3d.materialMode'),
             showDelay: 300
           }"
-        ></i>
+          class="pi pi-box text-white text-lg"
+        />
       </Button>
       <div
         v-show="showMaterialMode"
@@ -69,18 +69,18 @@
     >
       <Button class="p-button-rounded p-button-text" @click="openTextureUpload">
         <i
-          class="pi pi-image text-white text-lg"
           v-tooltip.right="{
             value: t('load3d.uploadTexture'),
             showDelay: 300
           }"
-        ></i>
+          class="pi pi-image text-white text-lg"
+        />
         <input
-          type="file"
           ref="texturePickerRef"
+          type="file"
           accept="image/*"
-          @change="uploadTexture"
           class="absolute opacity-0 w-0 h-0 p-0 m-0 pointer-events-none"
+          @change="uploadTexture"
         />
       </Button>
     </div>
@@ -91,12 +91,12 @@
         @click="toggleEdgeThreshold"
       >
         <i
-          class="pi pi-sliders-h text-white text-lg"
           v-tooltip.right="{
             value: t('load3d.edgeThreshold'),
             showDelay: 300
           }"
-        ></i>
+          class="pi pi-sliders-h text-white text-lg"
+        />
       </Button>
       <div
         v-show="showEdgeThreshold"
@@ -109,10 +109,10 @@
         <Slider
           v-model="edgeThreshold"
           class="w-full"
-          @change="updateEdgeThreshold"
           :min="0"
           :max="120"
           :step="1"
+          @change="updateEdgeThreshold"
         />
       </div>
     </div>

src/components/load3d/controls/SceneControls.vue

@@ -6,28 +6,28 @@
       @click="toggleGrid"
     >
       <i
-        class="pi pi-table text-white text-lg"
         v-tooltip.right="{ value: t('load3d.showGrid'), showDelay: 300 }"
-      ></i>
+        class="pi pi-table text-white text-lg"
+      />
     </Button>
 
     <div v-if="!hasBackgroundImage">
       <Button class="p-button-rounded p-button-text" @click="openColorPicker">
         <i
-          class="pi pi-palette text-white text-lg"
           v-tooltip.right="{
             value: t('load3d.backgroundColor'),
             showDelay: 300
           }"
-        ></i>
+          class="pi pi-palette text-white text-lg"
+        />
         <input
-          type="color"
           ref="colorPickerRef"
+          type="color"
           :value="backgroundColor"
+          class="absolute opacity-0 w-0 h-0 p-0 m-0 pointer-events-none"
           @input="
             updateBackgroundColor(($event.target as HTMLInputElement).value)
           "
-          class="absolute opacity-0 w-0 h-0 p-0 m-0 pointer-events-none"
         />
       </Button>
     </div>
@@ -35,18 +35,18 @@
     <div v-if="!hasBackgroundImage">
       <Button class="p-button-rounded p-button-text" @click="openImagePicker">
         <i
-          class="pi pi-image text-white text-lg"
           v-tooltip.right="{
             value: t('load3d.uploadBackgroundImage'),
             showDelay: 300
           }"
-        ></i>
+          class="pi pi-image text-white text-lg"
+        />
         <input
-          type="file"
           ref="imagePickerRef"
+          type="file"
           accept="image/*"
-          @change="uploadBackgroundImage"
           class="absolute opacity-0 w-0 h-0 p-0 m-0 pointer-events-none"
+          @change="uploadBackgroundImage"
         />
       </Button>
     </div>
@@ -57,12 +57,12 @@
         @click="removeBackgroundImage"
       >
         <i
-          class="pi pi-times text-white text-lg"
           v-tooltip.right="{
             value: t('load3d.removeBackgroundImage'),
             showDelay: 300
           }"
-        ></i>
+          class="pi pi-times text-white text-lg"
+        />
       </Button>
     </div>
   </div>