fix: inital eslint errors

pages/admin/library/[id]/import.vue

@@ -2,8 +2,8 @@
   <div class="flex flex-col gap-y-4 max-w-lg">
     <Listbox
       as="div"
-      v-on:update:model-value="(value) => updateCurrentlySelectedVersion(value)"
       :model-value="currentlySelectedVersion"
+      @update:model-value="(value) => updateCurrentlySelectedVersion(value)"
     >
       <ListboxLabel class="block text-sm font-medium leading-6 text-zinc-100"
         >Select version to import</ListboxLabel
@@ -37,11 +37,11 @@
             class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg ring-1 ring-zinc-800 focus:outline-none sm:text-sm"
           >
             <ListboxOption
-              as="template"
               v-for="(version, versionIdx) in versions"
               :key="version"
-              :value="versionIdx"
               v-slot="{ active, selected }"
+              as="template"
+              :value="versionIdx"
             >
               <li
                 :class="[
@@ -73,7 +73,7 @@
       </div>
     </Listbox>
 
-    <div class="flex flex-col gap-8" v-if="versionGuesses">
+    <div v-if="versionGuesses" class="flex flex-col gap-8">
       <!-- setup executable -->
       <div>
         <label
@@ -93,15 +93,15 @@
             <Combobox
               as="div"
               :value="versionSettings.setup"
-              @update:model-value="(v) => updateSetupCommand(v)"
               nullable
+              @update:model-value="(v) => updateSetupCommand(v)"
             >
               <div class="relative">
                 <ComboboxInput
                   class="block flex-1 border-0 py-1.5 pl-1 bg-transparent text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
+                  :placeholder="'setup.exe'"
                   @change="setupProcessQuery = $event.target.value"
                   @blur="setupProcessQuery = ''"
-                  :placeholder="'setup.exe'"
                 />
                 <ComboboxButton
                   v-if="setupFilteredVersionGuesses?.length ?? 0 > 0"
@@ -119,9 +119,9 @@
                   <ComboboxOption
                     v-for="guess in setupFilteredVersionGuesses"
                     :key="guess.filename"
+                    v-slot="{ active, selected }"
                     :value="guess.filename"
                     as="template"
-                    v-slot="{ active, selected }"
                   >
                     <li
                       :class="[
@@ -156,9 +156,9 @@
                     </li>
                   </ComboboxOption>
                   <ComboboxOption
-                    :value="setupProcessQuery"
                     v-if="setupProcessQuery"
                     v-slot="{ active, selected }"
+                    :value="setupProcessQuery"
                   >
                     <li
                       :class="[
@@ -189,13 +189,13 @@
               </div>
             </Combobox>
             <input
-              type="text"
-              name="startup"
               id="startup"
               v-model="versionSettings.setupArgs"
+              type="text"
+              name="startup"
               class="border-l border-zinc-700 block flex-1 border-0 py-1.5 pl-2 bg-transparent text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
               placeholder="--setup"
-            />
+            >
           </div>
         </div>
       </div>
@@ -249,15 +249,15 @@
             <Combobox
               as="div"
               :value="versionSettings.launch"
-              @update:model-value="(v) => updateLaunchCommand(v)"
               nullable
+              @update:model-value="(v) => updateLaunchCommand(v)"
             >
               <div class="relative">
                 <ComboboxInput
                   class="block flex-1 border-0 py-1.5 pl-1 bg-transparent text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
+                  :placeholder="'game.exe'"
                   @change="launchProcessQuery = $event.target.value"
                   @blur="launchProcessQuery = ''"
-                  :placeholder="'game.exe'"
                 />
                 <ComboboxButton
                   v-if="launchFilteredVersionGuesses?.length ?? 0 > 0"
@@ -275,9 +275,9 @@
                   <ComboboxOption
                     v-for="guess in launchFilteredVersionGuesses"
                     :key="guess.filename"
+                    v-slot="{ active, selected }"
                     :value="guess.filename"
                     as="template"
-                    v-slot="{ active, selected }"
                   >
                     <li
                       :class="[
@@ -312,9 +312,9 @@
                     </li>
                   </ComboboxOption>
                   <ComboboxOption
-                    :value="launchProcessQuery"
                     v-if="launchProcessQuery"
                     v-slot="{ active, selected }"
+                    :value="launchProcessQuery"
                   >
                     <li
                       :class="[
@@ -345,18 +345,18 @@
               </div>
             </Combobox>
             <input
-              type="text"
-              name="startup"
               id="startup"
               v-model="versionSettings.launchArgs"
+              type="text"
+              name="startup"
               class="border-l border-zinc-700 block flex-1 border-0 py-1.5 pl-2 bg-transparent text-zinc-100 placeholder:text-zinc-400 focus:ring-0 sm:text-sm sm:leading-6"
               placeholder="--launch"
-            />
+            >
           </div>
         </div>
         <div
-          class="absolute inset-0 bg-zinc-900/50"
           v-if="versionSettings.onlySetup"
+          class="absolute inset-0 bg-zinc-900/50"
         />
       </div>
 
@@ -393,7 +393,7 @@
           />
         </Switch>
       </SwitchGroup>
-      <Disclosure as="div" class="py-2" v-slot="{ open }">
+      <Disclosure v-slot="{ open }" as="div" class="py-2">
         <dt>
           <DisclosureButton
             class="border-b border-zinc-600 pb-2 flex w-full items-start justify-between text-left text-zinc-100"
@@ -453,15 +453,15 @@
               <div class="mt-2">
                 <input
                   id="umu-id"
+                  v-model="umuId"
                   name="umu-id"
                   type="text"
                   autocomplete="umu-id"
                   required
                   :disabled="!umuIdEnabled"
-                  v-model="umuId"
                   placeholder="umu-starcitizen"
                   class="block w-full rounded-md border-0 py-1.5 px-3 bg-zinc-950 disabled:bg-zinc-900/80 text-zinc-100 disabled:text-zinc-400 shadow-sm ring-1 ring-inset ring-zinc-700 disabled:ring-zinc-800 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
-                />
+                >
               </div>
             </div>
           </div>
@@ -473,9 +473,9 @@
       </Disclosure>
 
       <LoadingButton
-        @click="startImport_wrapper"
         class="w-fit"
         :loading="importLoading"
+        @click="startImport_wrapper"
       >
         Import
       </LoadingButton>

pages/admin/library/[id]/index.vue

@@ -8,7 +8,7 @@
         class="flex flex-col lg:flex-row lg:justify-between items-start lg:items-center gap-2"
       >
         <div class="inline-flex items-center gap-4">
-          <img :src="useObject(game.mIconId)" class="size-20" />
+          <img :src="useObject(game.mIconId)" class="size-20" >
           <div>
             <h1 class="text-5xl font-bold font-display text-zinc-100">
               {{ game.mName }}
@@ -19,9 +19,9 @@
           </div>
         </div>
         <button
-          @click="() => (showEditCoreMetadata = true)"
           type="button"
           class="relative inline-flex gap-x-3 items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+          @click="() => (showEditCoreMetadata = true)"
         >
           Edit <PencilIcon class="size-4" />
         </button>
@@ -44,9 +44,9 @@
             </div>
             <div class="ml-4 mt-4 shrink-0">
               <button
-                @click="() => (showAddCarouselModal = true)"
                 type="button"
                 class="relative inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+                @click="() => (showAddCarouselModal = true)"
               >
                 Add from image library
               </button>
@@ -54,28 +54,28 @@
           </div>
         </div>
         <div
-          class="text-zinc-400 text-center py-8"
           v-if="game.mImageCarousel.length == 0"
+          class="text-zinc-400 text-center py-8"
         >
           No images added to the carousel yet.
         </div>
 
         <draggable
           v-else
-          @update="() => updateImageCarousel()"
           :list="game.mImageCarousel"
           class="w-full flex flex-row gap-x-4 overflow-x-auto my-2 py-4"
+          @update="() => updateImageCarousel()"
         >
           <template #item="{ element }: { element: string }">
             <div class="relative group min-w-fit">
-              <img :src="useObject(element)" class="h-48 w-auto" />
+              <img :src="useObject(element)" class="h-48 w-auto" >
               <div
                 class="transition-all lg:opacity-0 lg:group-hover:opacity-100 absolute inset-0 flex flex-col items-center justify-center gap-y-2 bg-zinc-950/50"
               >
                 <button
-                  @click="() => removeImageFromCarousel(element)"
                   type="button"
                   class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+                  @click="() => removeImageFromCarousel(element)"
                 >
                   Remove image
                 </button>
@@ -129,10 +129,10 @@
           </button>
 
           <button
+            class="block lg:hidden"
             @click="
               () => (mobileShowFinalDescription = !mobileShowFinalDescription)
             "
-            class="block lg:hidden"
           >
             <DocumentIcon
               v-if="!mobileShowFinalDescription"
@@ -166,7 +166,7 @@
               'lg:block prose prose-invert prose-blue bg-zinc-950/30 rounded px-4 py-3',
             ]"
             v-html="descriptionHTML"
-          ></div>
+          />
         </div>
       </div>
     </div>
@@ -229,9 +229,9 @@
             </div>
             <div class="flex-shrink-0">
               <button
-                @click="() => (showUploadModal = true)"
                 type="button"
                 class="relative inline-flex items-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+                @click="() => (showUploadModal = true)"
               >
                 Upload
               </button>
@@ -244,30 +244,30 @@
             :key="image"
             class="group relative flex items-center bg-zinc-950/30"
           >
-            <img :src="useObject(image)" class="w-full h-auto" />
+            <img :src="useObject(image)" class="w-full h-auto" >
             <div
               class="transition-all lg:opacity-0 lg:group-hover:opacity-100 absolute inset-0 flex flex-col items-center justify-center gap-y-2 bg-zinc-950/50"
             >
               <button
                 v-if="image !== game.mBannerId"
-                @click="() => updateBannerImage(image)"
                 type="button"
                 class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+                @click="() => updateBannerImage(image)"
               >
                 Set as banner
               </button>
               <button
                 v-if="image !== game.mCoverId"
-                @click="() => updateCoverImage(image)"
                 type="button"
                 class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+                @click="() => updateCoverImage(image)"
               >
                 Set as cover
               </button>
               <button
-                @click="() => deleteImage(image)"
                 type="button"
                 class="inline-flex items-center gap-x-1.5 rounded-md bg-red-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
+                @click="() => deleteImage(image)"
               >
                 Delete image
               </button>
@@ -305,10 +305,10 @@
 
         <div class="mt-4 text-center w-full text-sm text-zinc-600">lowest</div>
         <draggable
-          @update="() => updateVersionOrder()"
           :list="game.versions"
           handle=".handle"
           class="mt-2 space-y-4"
+          @update="() => updateVersionOrder()"
         >
           <template #item="{ element: item }: { element: GameVersion }">
             <div
@@ -334,8 +334,8 @@
           </template>
         </draggable>
         <div
-          class="text-center font-bold text-zinc-400 my-3"
           v-if="game.versions.length == 0"
+          class="text-center font-bold text-zinc-400 my-3"
         >
           no versions added
         </div>
@@ -358,14 +358,14 @@
           :key="image"
           class="group relative flex items-center bg-zinc-950/30"
         >
-          <img :src="useObject(image)" class="w-full h-auto" />
+          <img :src="useObject(image)" class="w-full h-auto" >
           <div
             class="transition-all lg:opacity-0 lg:group-hover:opacity-100 absolute inset-0 flex flex-col items-center justify-center gap-y-2 bg-zinc-950/50"
           >
             <button
-              @click="() => addImageToCarousel(image)"
               type="button"
               class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+              @click="() => addImageToCarousel(image)"
             >
               Add
             </button>
@@ -381,10 +381,10 @@
     </template>
     <template #buttons>
       <button
+        ref="cancelButtonRef"
         type="button"
         class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 sm:mt-0 sm:w-auto"
         @click="showAddCarouselModal = false"
-        ref="cancelButtonRef"
       >
         Cancel
       </button>
@@ -398,14 +398,14 @@
           :key="image"
           class="group relative flex items-center bg-zinc-950/30"
         >
-          <img :src="useObject(image)" class="w-full h-auto" />
+          <img :src="useObject(image)" class="w-full h-auto" >
           <div
             class="transition-all lg:opacity-0 lg:group-hover:opacity-100 absolute inset-0 flex flex-col items-center justify-center gap-y-2 bg-zinc-950/50"
           >
             <button
-              @click="() => insertImageAtCursor(image)"
               type="button"
               class="inline-flex items-center gap-x-1.5 rounded-md bg-blue-600 px-1.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+              @click="() => insertImageAtCursor(image)"
             >
               Insert
             </button>
@@ -421,10 +421,10 @@
     </template>
     <template #buttons>
       <button
+        ref="cancelButtonRef"
         type="button"
         class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 sm:mt-0 sm:w-auto"
         @click="showAddCarouselModal = false"
-        ref="cancelButtonRef"
       >
         Cancel
       </button>
@@ -435,7 +435,7 @@
       <div class="flex flex-col lg:flex-row gap-6">
         <!-- icon upload div -->
         <div class="flex flex-col items-center gap-4">
-          <img :src="coreMetadataIconUrl" class="size-24 aspect-square" />
+          <img :src="coreMetadataIconUrl" class="size-24 aspect-square" >
           <label for="file-upload">
             <span
               type="button"
@@ -444,12 +444,12 @@
               Upload
             </span>
             <input
+              id="file-upload"
               accept="image/*"
-              @change="(e) => coreMetadataUploadFiles(e as any)"
               class="hidden"
               type="file"
-              id="file-upload"
-            />
+              @change="(e) => coreMetadataUploadFiles(e as any)"
+            >
           </label>
         </div>
         <!-- edit title -->
@@ -460,12 +460,12 @@
             >
             <div class="mt-2">
               <input
+                id="name"
+                v-model="coreMetadataName"
                 type="text"
                 name="name"
-                id="name"
                 class="block w-full rounded-md bg-zinc-800 px-3 py-1.5 text-base text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-zinc-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6"
-                v-model="coreMetadataName"
-              />
+              >
             </div>
           </div>
           <div>
@@ -476,12 +476,12 @@
             >
             <div class="mt-2">
               <input
+                id="description"
+                v-model="coreMetadataDescription"
                 type="text"
                 name="description"
-                id="description"
                 class="block w-full rounded-md bg-zinc-800 px-3 py-1.5 text-base text-zinc-100 outline outline-1 -outline-offset-1 outline-zinc-700 placeholder:text-zinc-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6"
-                v-model="coreMetadataDescription"
-              />
+              >
             </div>
           </div>
         </div>
@@ -491,16 +491,16 @@
       <LoadingButton
         type="button"
         :loading="coreMetadataLoading"
-        @click="() => coreMetadataUpdate_wrapper()"
         :class="['inline-flex w-full shadow-sm sm:ml-3 sm:w-auto']"
+        @click="() => coreMetadataUpdate_wrapper()"
       >
         Save
       </LoadingButton>
       <button
+        ref="cancelButtonRef"
         type="button"
         class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-900 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 hover:bg-zinc-950 sm:mt-0 sm:w-auto"
         @click="showEditCoreMetadata = false"
-        ref="cancelButtonRef"
       >
         Cancel
       </button>