chore: lint

app/overrides.d.ts

@@ -15,4 +15,8 @@ declare module 'bootstrap-vue-next' {
   interface BaseColorVariant {
     best: unknown
   }
+  interface BaseSize {
+    // `xs` size is available only for BButton
+    xs: unknown
+  }
 }

app/src/App.vue

@@ -91,12 +91,12 @@ onMounted(() => {
             </BButton>
           </li>
 
-          <li class="nav-item" v-show="connected">
+          <li v-show="connected" class="nav-item">
             <BButton
-              @click.prevent="logout"
               variant="outline-dark"
               block
               size="sm"
+              @click.prevent="logout"
             >
               {{ $t('logout') }} <YIcon iname="sign-out" />
             </BButton>

app/src/components/CardDeckFeed.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { BCardGroup } from 'bootstrap-vue-next'
 import {
-  getCurrentInstance,
   h,
   nextTick,
   onBeforeUnmount,
@@ -29,7 +28,6 @@ function getTopParent(prev: HTMLElement): HTMLElement {
     : getTopParent(prev.parentElement!)
 }
 
-const i = getCurrentInstance()
 function onScroll() {
   const elem = feedElem.value?.$el
   if (

app/src/components/LazyRenderer.vue

@@ -28,8 +28,8 @@ const fixedMinHeight = ref(props.minHeight)
 const rootElem = ref<HTMLDivElement | null>(null)
 
 onMounted(() => {
-  let unrenderTimer: NodeJS.Timeout
+  let unrenderTimer: number
-  let renderTimer: NodeJS.Timeout
+  let renderTimer: number
 
   observer.value = new IntersectionObserver(
     (entries) => {
@@ -55,7 +55,7 @@ onMounted(() => {
 
         if (!props.unrender) {
           // Stop listening to intersections after first appearance if unrendering is not activated
-          this.observer.disconnect()
+          observer.value!.disconnect()
         }
       } else if (props.unrender) {
         clearTimeout(renderTimer)

app/src/components/RecursiveListGroup.vue

@@ -15,12 +15,14 @@ const props = withDefaults(
   },
 )
 
+type NodeSlot = {
+  [K in keyof TreeChildNode as TreeChildNode[K] extends Function
+    ? never
+    : K]: TreeChildNode[K]
+}
+
 defineSlots<{
-  default: (props: {
+  default: (props: NodeSlot) => any
-    [K in keyof TreeChildNode as TreeChildNode[K] extends Function
-      ? never
-      : K]: TreeChildNode[K]
-  }) => any
 }>()
 
 function getClasses(node: AnyTreeNode, i: number) {
@@ -42,7 +44,7 @@ function getClasses(node: AnyTreeNode, i: number) {
         :class="getClasses(node, i)"
         @click="$router.push(node.data.to)"
       >
-        <slot name="default" v-bind="node" />
+        <slot name="default" v-bind="node as NodeSlot" />
 
         <BButton
           v-if="node.height > 0"
@@ -61,8 +63,8 @@ function getClasses(node: AnyTreeNode, i: number) {
 
       <BCollapse
         v-if="node.height > 0"
-        v-model="node.data.opened"
         :id="'collapse-' + node.id"
+        v-model="node.data.opened"
       >
         <RecursiveListGroup
           :tree="node"

app/src/components/globals/TopBar.vue

@@ -13,8 +13,8 @@ const slots = defineSlots<{
 </script>
 
 <template>
-  <BButtonToolbar :aria-label="label" id="top-bar">
+  <BButtonToolbar id="top-bar" :aria-label="label">
-    <div id="top-bar-left" class="top-bar-group" v-if="slots['group-left']">
+    <div v-if="slots['group-left']" id="top-bar-left" class="top-bar-group">
       <slot name="group-left" />
     </div>
 

app/src/components/globals/YCard.vue

@@ -63,7 +63,6 @@ const visible = ref(!props.collapsed)
 
       <BButton
         v-if="collapsable"
-        @click="visible = !visible"
         size="sm"
         variant="outline-secondary"
         class="align-self-center ms-auto"
@@ -72,6 +71,7 @@ const visible = ref(!props.collapsed)
           collapsed: !visible,
           [`ms-${buttonUnbreak}-2`]: buttonUnbreak,
         }"
+        @click="visible = !visible"
       >
         <YIcon iname="chevron-right" />
         <span class="visually-hidden">{{ $t('words.collapse') }}</span>
@@ -88,7 +88,7 @@ const visible = ref(!props.collapsed)
       <slot name="default" />
     </template>
 
-    <template #footer v-if="slots['buttons']">
+    <template v-if="slots['buttons']" #footer>
       <slot name="buttons" />
     </template>
   </BCard>

app/src/components/globals/YListGroupItem.vue

@@ -103,9 +103,9 @@ const class_ = computed(() => {
       }
     }
 
-    .yuno-list-group-item-content {
+    // .yuno-list-group-item-content {
-      // color: $black;
+    //   color: $black;
-    }
+    // }
   }
 
   &-faded > * {

app/src/components/globals/formItems/InputItem.vue

@@ -37,7 +37,7 @@ const model = defineModel<string | number | null>({
       return parseInt(value)
     }
     return value
-  }
+  },
 })
 
 const autocomplete = computed(() => {

app/src/components/globals/skeletons/CardFormSkeleton.vue

@@ -34,8 +34,8 @@ withDefaults(
 
         <BCol>
           <div
-            class="w100 d-flex justify-content-between"
             v-if="count % 2 === 0"
+            class="w100 d-flex justify-content-between"
           >
             <BSkeleton width="100%" height="38px" />
 

app/src/main.ts

@@ -58,6 +58,7 @@ Object.values(globalComponentsModules).forEach(
     // defineOptions({
     //   name: 'FormField',
     // })
+    // @ts-expect-error
     app.component(component.__name || component.name, component)
   },
 )

app/src/views/app/AppInfo.vue

@@ -318,8 +318,8 @@ async function uninstall() {
         </BButton>
 
         <BButton
-          v-b-modal.uninstall-modal
           id="uninstall"
+          v-b-modal.uninstall-modal
           variant="danger"
           :class="{ 'ms-auto': !app.url }"
         >
@@ -451,7 +451,7 @@ async function uninstall() {
 
             <BFormInput v-model="form.url.path" class="flex-grow-3" />
 
-            <BButton @click="changeUrl" variant="info" v-t="'save'" />
+            <BButton v-t="'save'" variant="info" @click="changeUrl" />
           </BInputGroup>
 
           <div v-else class="alert alert-warning">
@@ -470,9 +470,9 @@ async function uninstall() {
         >
           <template v-if="!app.isDefault.value">
             <BButton
-              @click="setAsDefaultDomain(false)"
               id="main-domain"
               variant="success"
+              @click="setAsDefaultDomain(false)"
             >
               <YIcon iname="star" /> {{ $t('app_make_default') }}
             </BButton>
@@ -480,9 +480,9 @@ async function uninstall() {
 
           <template v-else>
             <BButton
-              @click="setAsDefaultDomain(true)"
               id="main-domain"
               variant="warning"
+              @click="setAsDefaultDomain(true)"
             >
               <YIcon iname="star" /> {{ $t('app_make_not_default') }}
             </BButton>

app/src/views/app/AppInstall.vue

@@ -244,8 +244,8 @@ const performInstall = onSubmit(async (onError) => {
         </p>
 
         <CheckboxItem
-          v-model="force"
           id="force-install"
+          v-model="force"
           :label="$t('app.install.problems.ignore')"
         />
       </YAlert>

app/src/views/backup/BackupCreate.vue

@@ -121,10 +121,10 @@ const CheckboxList = createReusableTemplate<{
       <!-- SUBMIT -->
       <template #buttons>
         <BButton
-          @click="createBackup"
           v-t="'backup_action'"
           variant="success"
           :disabled="selected.length === 0"
+          @click="createBackup"
         />
       </template>
     </YCard>

app/src/views/backup/BackupInfo.vue

@@ -105,12 +105,12 @@ function downloadBackup() {
     <YCard :title="$t('infos')" icon="info-circle" button-unbreak="sm">
       <template #header-buttons>
         <!-- DOWNLOAD ARCHIVE -->
-        <BButton @click="downloadBackup" size="sm" variant="success">
+        <BButton size="sm" variant="success" @click="downloadBackup">
           <YIcon iname="download" /> {{ $t('download') }}
         </BButton>
 
         <!-- DELETE ARCHIVE -->
-        <BButton @click="deleteBackup" size="sm" variant="danger">
+        <BButton size="sm" variant="danger" @click="deleteBackup">
           <YIcon iname="trash-o" /> {{ $t('delete') }}
         </BButton>
       </template>
@@ -138,24 +138,24 @@ function downloadBackup() {
     >
       <template #header-buttons>
         <BButton
+          v-t="'select_all'"
           size="sm"
           variant="outline-secondary"
           @click="toggleSelected()"
-          v-t="'select_all'"
         />
 
         <BButton
+          v-t="'select_none'"
           size="sm"
           variant="outline-secondary"
           @click="toggleSelected(false)"
-          v-t="'select_none'"
         />
       </template>
 
       <BFormCheckboxGroup
         v-if="hasBackupData"
-        v-model="selected"
         id="backup-select"
+        v-model="selected"
         name="backup-select"
         size="lg"
         aria-describedby="backup-restore-feedback"
@@ -170,7 +170,7 @@ function downloadBackup() {
             <div class="me-2">
               <h5 class="fw-bold">
                 {{ item.name }}
-                <small class="text-secondary" v-if="item.size">
+                <small v-if="item.size" class="text-secondary">
                   ({{ humanSize(item.size) }})
                 </small>
               </h5>
@@ -216,11 +216,11 @@ function downloadBackup() {
       <!-- SUBMIT -->
       <template v-if="hasBackupData" #buttons>
         <BButton
-          @click="restoreBackup"
+          v-t="'restore'"
           form="backup-restore"
           variant="success"
-          v-t="'restore'"
           :disabled="selected.length === 0"
+          @click="restoreBackup"
         />
       </template>
     </YCard>

app/src/views/diagnosis/DiagnosisView.vue

@@ -95,7 +95,7 @@ function shareLogs() {
   <div>
     <TopBar>
       <template #group-right>
-        <BButton @click="shareLogs" variant="success">
+        <BButton variant="success" @click="shareLogs">
           <YIcon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
         </BButton>
       </template>
@@ -129,18 +129,18 @@ function shareLogs() {
         <div class="">
           <BBadge
             v-if="report.noIssues"
-            variant="success"
             v-t="'everything_good'"
+            variant="success"
           />
           <BBadge
             v-if="report.errors"
-            variant="danger"
             v-t="{ path: 'issues', args: { count: report.errors } }"
+            variant="danger"
           />
           <BBadge
             v-if="report.warnings"
-            variant="warning"
             v-t="{ path: 'warnings', args: { count: report.warnings } }"
+            variant="warning"
           />
           <BBadge
             v-if="report.ignoreds"
@@ -194,10 +194,10 @@ function shareLogs() {
 
               <BButton
                 v-if="item.details"
+                v-b-toggle="`collapse-${report.id}-item-${i}`"
                 size="sm"
                 variant="outline-dark"
                 class="ms-lg-2 mt-2 mt-lg-0"
-                v-b-toggle="`collapse-${report.id}-item-${i}`"
               >
                 <YIcon iname="level-down" /> {{ $t('details') }}
               </BButton>

app/src/views/domain/DomainDns.vue

@@ -143,9 +143,9 @@ async function pushDnsChanges() {
       <!-- AUTO CONFIG CHANGES -->
       <template v-if="dnsChanges">
         <div
-          class="mb-3"
           v-for="{ action, records, icon, variant } in dnsChanges"
           :key="icon"
+          class="mb-3"
         >
           <h4 class="mt-4 mb-2">
             {{ action }}

app/src/views/domain/DomainInfo.vue

@@ -224,10 +224,10 @@ async function setAsDefaultDomain() {
     <BModal
       id="delete-modal"
       :title="$t('confirm_delete', { name: props.name })"
-      @ok="deleteDomain"
       header-bg-variant="warning"
       header-class="text-black"
       :body-class="{ 'd-none': !isMainDynDomain }"
+      @ok="deleteDomain"
     >
       <BFormGroup v-if="isMainDynDomain">
         <BFormCheckbox v-model="unsubscribeDomainFromDyndns">

app/src/views/group/GroupList.vue

@@ -180,9 +180,9 @@ async function deleteGroup(name: string) {
         <!-- DELETE GROUP -->
         <BButton
           v-if="!group.isSpecial"
-          @click="deleteGroup(group.name)"
           size="sm"
           variant="danger"
+          @click="deleteGroup(group.name)"
         >
           <YIcon iname="trash-o" /> {{ $t('delete') }}
         </BButton>
@@ -198,7 +198,7 @@ async function deleteGroup(name: string) {
               <YIcon iname="info-circle" />
               {{ $t('group_explain_' + group.name) }}
             </p>
-            <p class="text-primary-emphasis" v-if="group.name === 'visitors'">
+            <p v-if="group.name === 'visitors'" class="text-primary-emphasis">
               <em>{{
                 $t('group_explain_visitors_needed_for_external_client')
               }}</em>
@@ -206,9 +206,9 @@ async function deleteGroup(name: string) {
           </template>
           <template v-if="group.name == 'admins' || !group.isSpecial">
             <TagsSelectizeItem
+              :id="group.name + '-users'"
               v-model="group.members"
               :options="userOptions"
-              :id="group.name + '-users'"
               :label="$t('group_add_member')"
               tag-icon="user"
               items-name="users"
@@ -225,9 +225,9 @@ async function deleteGroup(name: string) {
         </BCol>
         <BCol>
           <TagsSelectizeItem
+            :id="group.name + '-perms'"
             v-model="group.permissions"
             :options="permissionOptions"
-            :id="group.name + '-perms'"
             :label="$t('group_add_permission')"
             tag-icon="key-modern"
             items-name="permissions"
@@ -248,9 +248,9 @@ async function deleteGroup(name: string) {
 
           <BCol>
             <TagsSelectizeItem
+              :id="userName + '-perms'"
               v-model="userGroups[userName].permissions"
               :options="permissionOptions"
-              :id="userName + '-perms'"
               :label="$t('group_add_permission')"
               tag-icon="key-modern"
               items-name="permissions"
@@ -262,10 +262,10 @@ async function deleteGroup(name: string) {
       </template>
 
       <TagsSelectizeItem
+        id="user-groups"
         v-model="activeUserGroups"
         auto
         :options="userOptions"
-        id="user-groups"
         :label="$t('group_add_member')"
         no-tags
         items-name="users"

app/src/views/service/ServiceInfo.vue

@@ -83,22 +83,22 @@ function shareLogs() {
       <template #header-buttons>
         <template v-if="infos.status === 'running'">
           <!-- RESTART SERVICE -->
-          <BButton @click="updateService('restart')" variant="warning">
+          <BButton variant="warning" @click="updateService('restart')">
             <YIcon iname="refresh" /> {{ $t('restart') }}
           </BButton>
 
           <!-- STOP SERVICE -->
           <BButton
             v-if="!isCritical"
-            @click="updateService('stop')"
             variant="danger"
+            @click="updateService('stop')"
           >
             <YIcon iname="warning" /> {{ $t('stop') }}
           </BButton>
         </template>
 
         <!-- START SERVICE -->
-        <BButton v-else @click="updateService('start')" variant="success">
+        <BButton v-else variant="success" @click="updateService('start')">
           <YIcon iname="play" /> {{ $t('start') }}
         </BButton>
       </template>

app/src/views/tool/ToolFirewall.vue

@@ -280,8 +280,8 @@ function onFormPortToggling() {
 
       <template #buttons>
         <BButton
-          @click="toggleUpnp"
           :variant="!upnpEnabled ? 'success' : 'danger'"
+          @click="toggleUpnp"
         >
           {{ $t(!upnpEnabled ? 'enable' : 'disable') }}
         </BButton>

app/src/views/tool/ToolLog.vue

@@ -113,7 +113,7 @@ function shareLogs() {
     <!-- LOGS CARD -->
     <YCard :title="$t('logs')" icon="file-text" no-body>
       <template #header-buttons>
-        <BButton @click="shareLogs" variant="success">
+        <BButton variant="success" @click="shareLogs">
           <YIcon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
         </BButton>
       </template>
@@ -127,7 +127,7 @@ function shareLogs() {
       </BButton>
 
       <pre class="log unselectable"><code v-html="logs" /></pre>
-      <BButton @click="shareLogs" variant="success" class="w-100 rounded-0">
+      <BButton variant="success" class="w-100 rounded-0" @click="shareLogs">
         <YIcon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
       </BButton>
     </YCard>

app/src/views/tool/ToolMigrations.vue

@@ -63,7 +63,7 @@ async function skipMigration(id: string) {
   <div>
     <!-- PENDING MIGRATIONS -->
     <YCard :title="$t('migrations_pending')" icon="cogs" no-body>
-      <template #header-buttons v-if="pending">
+      <template v-if="pending" #header-buttons>
         <BButton size="sm" variant="success" @click="runMigrations">
           <YIcon iname="play" /> {{ $t('run') }}
         </BButton>
@@ -109,8 +109,8 @@ async function skipMigration(id: string) {
             </BFormCheckbox>
             <BFormInvalidFeedback
               v-if="checked[id] === false"
-              :state="false"
               :id="'checkbox-feedback-' + number"
+              :state="false"
             >
               {{ $t('migrations_disclaimer_not_checked') }}
             </BFormInvalidFeedback>
@@ -133,7 +133,7 @@ async function skipMigration(id: string) {
         </span>
       </BCardBody>
 
-      <BListGroup flush v-else-if="done">
+      <BListGroup v-else-if="done" flush>
         <BListGroupItem v-for="{ number, description } in done" :key="number">
           {{ number }}. {{ description }}
         </BListGroupItem>

app/src/views/tool/ToolPower.vue

@@ -30,7 +30,7 @@ async function triggerAction(action: 'reboot' | 'shutdown') {
       :label="$t('tools_reboot')"
       label-for="reboot"
     >
-      <BButton @click="triggerAction('reboot')" variant="danger" id="reboot">
+      <BButton id="reboot" variant="danger" @click="triggerAction('reboot')">
         <YIcon iname="refresh" /> {{ $t('tools_reboot_btn') }}
       </BButton>
     </BFormGroup>
@@ -45,9 +45,9 @@ async function triggerAction(action: 'reboot' | 'shutdown') {
       label-for="shutdown"
     >
       <BButton
-        @click="triggerAction('shutdown')"
-        variant="danger"
         id="shutdown"
+        variant="danger"
+        @click="triggerAction('shutdown')"
       >
         <YIcon iname="power-off" /> {{ $t('tools_shutdown_btn') }}
       </BButton>

app/src/views/update/SystemUpdate.vue

@@ -129,8 +129,8 @@ async function performSystemUpgrade() {
 
       <template v-if="system.length" #buttons>
         <BButton
-          variant="success"
           v-t="'system_upgrade_all_packages_btn'"
+          variant="success"
           @click="performSystemUpgrade()"
         />
       </template>
@@ -153,9 +153,9 @@ async function performSystemUpgrade() {
           </h5>
 
           <BButton
+            v-t="'system_upgrade_btn'"
             variant="success"
             size="sm"
-            v-t="'system_upgrade_btn'"
             @click="confirmAppsUpgrade(id)"
           />
         </BListGroupItem>
@@ -169,8 +169,8 @@ async function performSystemUpgrade() {
 
       <template v-if="apps.length" #buttons>
         <BButton
-          variant="success"
           v-t="'system_upgrade_all_applications_btn'"
+          variant="success"
           @click="confirmAppsUpgrade()"
         />
       </template>
@@ -210,9 +210,9 @@ async function performSystemUpgrade() {
         <div class="card-collapse-wrapper">
           <CardCollapse
             v-for="{ id, name, notif } in preUpgrade.apps"
+            :id="`${id}-notifs`"
             :key="`${id}-notifs`"
             :title="name"
-            :id="`${id}-notifs`"
             visible
             flush
           >

app/src/views/user/UserInfo.vue

@@ -115,9 +115,9 @@ function deleteUser() {
       v-if="user"
       id="delete-modal"
       :title="$t('confirm_delete', { name })"
-      @ok="deleteUser"
       header-bg-variant="warning"
       header-class="text-black"
+      @ok="deleteUser"
     >
       <BFormGroup>
         <BFormCheckbox v-model="purge">