fix linter issues

src/components/AppSearch.vue

@@ -17,13 +17,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div class="side-menu-search">
     <input
+      v-model="model"
       type="text"
       :placeholder="t('side_menu', 'Search')"
-      v-model="model"
     />
   </div>
 </template>
 
 <script setup>
-const model = defineModel()
+const model = defineModel({ type: String })
 </script>

src/components/settings/SectionTitle.vue

@@ -2,13 +2,6 @@
   <h2>{{ t('side_menu', label) }}</h2>
 </template>
 
-<style scoped>
-h2 {
-  font-size: 1.3em;
-  margin: 0 0 12px 0;
-}
-</style>
-
 <script setup>
 const { label } = defineProps({
   label: {
@@ -17,3 +10,10 @@ const { label } = defineProps({
   },
 })
 </script>
+
+<style scoped>
+h2 {
+  font-size: 1.3em;
+  margin: 0 0 12px 0;
+}
+</style>

src/components/settings/TableLabel.vue

@@ -40,7 +40,7 @@ const { short, label } = defineProps({
   help: {
     type: [String, null],
     required: false,
-    default: false,
+    default: null,
   },
 })
 </script>

src/components/settings/form/FormAppPicker.vue

@@ -1,8 +1,8 @@
 <template>
   <NcButton
     aria-label="t('side_menu', 'Select apps')"
-    @click="openModal"
     variant="primary"
+    @click="openModal"
   >
     {{ t('side_menu', 'Select apps') }} ({{ model.length }})
   </NcButton>
@@ -14,10 +14,10 @@
     <div class="modal__content">
       <NcCheckboxRadioSwitch
         v-for="(item, key) in apps"
+        :key="key"
         v-model="model"
         name="value"
         :value="item.id"
-        :key="key"
       >
         <img
           :src="item.icon"
@@ -28,8 +28,8 @@
 
       <div class="modal__footer">
         <NcButton
-          @click="closeModal"
           variant="primary"
+          @click="closeModal"
         >
           {{ t('side_menu', 'Close') }}
         </NcButton>
@@ -38,6 +38,29 @@
   </NcModal>
 </template>
 
+<script setup>
+import { NcButton, NcModal, NcCheckboxRadioSwitch } from '@nextcloud/vue'
+import { useNavStore } from '../../../store/nav.js'
+import { ref, onMounted } from 'vue'
+
+const model = defineModel({ type: Array })
+const navStore = useNavStore()
+const modal = ref(false)
+const apps = ref([])
+
+const openModal = () => {
+  modal.value = true
+}
+
+const closeModal = () => {
+  modal.value = false
+}
+
+onMounted(async () => {
+  apps.value = await navStore.getApps()
+})
+</script>
+
 <style scoped>
 .modal__content {
   padding: 20px;
@@ -57,26 +80,3 @@ img {
   height: 15px;
 }
 </style>
-
-<script setup>
-import { NcButton, NcModal, NcCheckboxRadioSwitch } from '@nextcloud/vue'
-import { useNavStore } from '../../../store/nav.js'
-import { ref, onMounted } from 'vue'
-
-const model = defineModel()
-const navStore = useNavStore()
-const modal = ref(false)
-const apps = ref([])
-
-const openModal = () => {
-  modal.value = true
-}
-
-const closeModal = () => {
-  modal.value = false
-}
-
-onMounted(async () => {
-  apps.value = await navStore.getApps()
-})
-</script>

src/components/settings/form/FormColorPicker.vue

@@ -13,5 +13,5 @@
 <script setup>
 import { NcColorPicker } from '@nextcloud/vue'
 
-const model = defineModel()
+const model = defineModel({ type: String })
 </script>

src/components/settings/form/FormOpener.vue

@@ -8,7 +8,7 @@
 <script setup>
 import FormSelect from './FormSelect'
 
-const model = defineModel()
+const model = defineModel({ type: String })
 const options = [
   { id: 'side-menu-opener', label: 'Default' },
   { id: 'side-menu-opener-dark', label: 'Default (dark)' },

src/components/settings/form/FormRange.vue

@@ -3,35 +3,20 @@
     <em v-if="prepend">{{ t('side_menu', prepend) }}</em>
 
     <input
+      v-model="model"
       type="range"
       :min="min"
       :max="max"
-      v-model="model"
     />
 
     <em v-if="append">{{ t('side_menu', append) }}</em>
   </div>
 </template>
 
-<style scoped>
-input {
-  min-height: auto;
-}
-
-div * {
-  vertical-align: middle;
-}
-
-em + input,
-input + em {
-  margin-left: 10px;
-}
-</style>
-
 <script setup>
-const model = defineModel()
+const model = defineModel({ type: Number })
 
-const { prefix, suffix } = defineProps({
+defineProps({
   prepend: {
     type: [String, null],
     required: false,
@@ -54,3 +39,18 @@ const { prefix, suffix } = defineProps({
   },
 })
 </script>
+
+<style scoped>
+input {
+  min-height: auto;
+}
+
+div * {
+  vertical-align: middle;
+}
+
+em + input,
+input + em {
+  margin-left: 10px;
+}
+</style>

src/components/settings/form/FormSelect.vue

@@ -1,9 +1,14 @@
 <template>
   <div>
     <template v-if="!expanded">
-      <select v-model="model" v-if="!expanded" :multiple="multiple">
+      <select
+        v-if="!expanded"
+        v-model="model"
+        :multiple="multiple"
+      >
         <option
           v-for="option in options"
+          :key="option.id"
           :value="option.id"
         >
           {{ t('side_menu', option.label) }}
@@ -13,9 +18,9 @@
     <template v-else>
       <NcCheckboxRadioSwitch
         v-for="option in options"
+        :key="option.id"
         v-model="model"
         :value="option.id"
-        :key="option.id"
         :type="multiple ? 'checkbox' : 'radio'"
         name="value"
       >
@@ -28,7 +33,7 @@
 <script setup>
 import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 
-const model = defineModel()
+const model = defineModel({ type: [Number, String, Array] })
 const { options, expanded } = defineProps({
   options: {
     type: Array,

src/components/settings/form/FormSize.vue

@@ -8,7 +8,7 @@
 <script setup>
 import FormSelect from './FormSelect'
 
-const model = defineModel()
+const model = defineModel({ type: String })
 const options = [
   { id: 'hidden', label: 'Hidden' },
   { id: 'small', label: 'Small' },

src/components/settings/form/FormYesNo.vue

@@ -8,5 +8,5 @@
 <script setup>
 import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 
-const model = defineModel()
+const model = defineModel({ type: Boolean })
 </script>

src/menus/MenuContainer.vue

@@ -85,23 +85,6 @@ const createOpener = () => {
   }
 }
 
-const createLoader = () => {
-  const loader = createElement('div', { id: 'side-menu-loader' })
-  const bar = createElement('div', { id: 'side-menu-loader-bar' })
-
-  loader.appendChild(bar)
-  document.querySelector('body').appendChild(loader)
-
-  let pageLoaderValue = 0
-
-  window.addEventListener('beforeunload', () => {
-    setInterval(() => {
-      pageLoaderBar.style.width = pageLoaderValue.toString() + '%'
-      pageLoaderValue = Math.min(pageLoaderValue + 0.2, 100)
-    }, 25)
-  })
-}
-
 onMounted(async () => {
   hasApps.value = (await navStore.getApps()).length > 0
 

src/menus/SideMenuWithCategories.vue

@@ -17,9 +17,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div
     id="side-menu"
+    ref="menu"
     class="side-menu-with-categories"
     :class="{ open: open }"
-    ref="menu"
   >
     <div class="side-menu-header">
       <SettingsButton

src/menus/SimpleSideMenu.vue

@@ -17,12 +17,12 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div
     id="side-menu"
-    :class="{ open: open }"
     ref="menu"
+    :class="{ open: open }"
   >
     <div
-      class="side-menu-header"
       v-if="settings || displayLogo || open || !openerHover"
+      class="side-menu-header"
     >
       <SettingsButton
         v-if="settings && open"
@@ -31,8 +31,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         :avatar="settings.avatar"
       />
       <AppSearch
-        v-model="search"
         v-if="open"
+        v-model="search"
       />
       <OpenerButton
         v-if="!openerHover || isTouchDevice"

src/menus/TopWideMenu.vue

@@ -17,9 +17,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <template>
   <div
     id="side-menu"
+    ref="menu"
     class="side-menu-big"
     :class="{ open: open }"
-    ref="menu"
   >
     <div class="side-menu-header">
       <CloserButton

src/pages/AdminSettings.vue

@@ -1,14 +1,15 @@
 <template>
   <NcContent
-    app-name="side_menu"
     v-if="config"
+    app-name="side_menu"
   >
     <NcAppContent>
       <div class="side-menu-setting">
         <NcButton
           v-for="item in menu"
-          @click="setSection(item.section)"
+          :key="item.label"
           :variant="item.section === section ? 'primary' : 'secondary'"
+          @click="setSection(item.section)"
           >{{ trans(item.label) }}</NcButton
         >
       </div>
@@ -107,14 +108,15 @@
             :top="true"
           />
           <TableValue>
-            <FormSelect 
+            <FormSelect
               v-model="config['top-menu-mouse-over-hidden-label']"
               :expanded="true"
               :options="[
-              {id: 1, label: 'Yes'},
-              {id: 0, label: 'No'},
-              {id: 2, label: 'Except the hovered app'},
-            ]" />
+                { id: 1, label: 'Yes' },
+                { id: 0, label: 'No' },
+                { id: 2, label: 'Except the hovered app' },
+              ]"
+            />
           </TableValue>
         </TableRow>
       </TableContainer>
@@ -361,21 +363,31 @@
             :middle="true"
           />
           <TableValue>
-            <a target="_blank" href="https://www.buymeacoffee.com/deblan" rel="noopener">
+            <a
+              target="_blank"
+              href="https://www.buymeacoffee.com/deblan"
+              rel="noopener"
+            >
               <NcButton variant="secondary">{{ trans('Buy me a coffee ☕') }}</NcButton>
             </a>
           </TableValue>
         </TableRow>
 
         <TableRow>
-          <TableLabel
-            label="Need help"
-          />
+          <TableLabel label="Need help" />
           <TableValue class="button-inline">
-            <a target="_blank" href="https://deblan.gitnet.page/side_menu_doc/" rel="noopener">
+            <a
+              target="_blank"
+              href="https://deblan.gitnet.page/side_menu_doc/"
+              rel="noopener"
+            >
               <NcButton variant="secondary">{{ trans('Open the documentation') }}</NcButton>
             </a>
-            <a target="_blank" href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fQUESTION_TEMPLATE.yml" rel="noopener">
+            <a
+              target="_blank"
+              href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fQUESTION_TEMPLATE.yml"
+              rel="noopener"
+            >
               <NcButton variant="secondary">{{ trans('Ask the developer') }}</NcButton>
             </a>
           </TableValue>
@@ -387,7 +399,11 @@
             :middle="true"
           />
           <TableValue>
-            <a target="_blank" href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fFEATURE_TEMPLATE.yml" rel="noopener">
+            <a
+              target="_blank"
+              href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fFEATURE_TEMPLATE.yml"
+              rel="noopener"
+            >
               <NcButton variant="secondary">{{ trans('New request') }}</NcButton>
             </a>
           </TableValue>
@@ -399,10 +415,18 @@
             :top="true"
           />
           <TableValue class="button-inline">
-            <a target="_blank" href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fISSUE_TEMPLATE.yml" rel="noopener">
+            <a
+              target="_blank"
+              href="https://gitnet.fr/deblan/side_menu/issues/new?template=.gitea%2fissue_template%2fISSUE_TEMPLATE.yml"
+              rel="noopener"
+            >
               <NcButton variant="secondary">{{ trans('Report a bug') }}</NcButton>
             </a>
-            <NcButton variant="secondary" @click="showConfig = true">{{ trans('Show the configuration') }}</NcButton>
+            <NcButton
+              variant="secondary"
+              @click="showConfig = true"
+              >{{ trans('Show the configuration') }}</NcButton
+            >
 
             <NcModal
               v-if="showConfig"
@@ -410,19 +434,23 @@
             >
               <div class="modal__content">
                 <p style="margin-bottom: 5px">{{ trans('Configuration:') }}</p>
-                <textarea class="config" readonly>{{ filterConfig(config) }}</textarea>
+                <textarea
+                  class="config"
+                  readonly
+                  >{{ filterConfig(config) }}</textarea
+                >
 
                 <div class="modal__footer">
                   <NcButton
-                    @click="copyConfig"
                     variant="secondary"
+                    @click="copyConfig"
                   >
                     <span v-if="configCopied">{{ trans('Done!') }}</span>
                     <span v-else>{{ trans('Copy') }}</span>
                   </NcButton>
                   <NcButton
-                    @click="showConfig = false"
                     variant="primary"
+                    @click="showConfig = false"
                   >
                     {{ t('side_menu', 'Close') }}
                   </NcButton>
@@ -436,36 +464,6 @@
   </NcContent>
 </template>
 
-<style scoped>
-.hidden {
-  display: none;
-}
-
-.button-inline button {
-  display: inline-block;
-  margin-right: 5px;
-}
-
-.config {
-  width: 100%;
-  height: 30vh;
-}
-
-.modal__content {
-  padding: 20px;
-}
-
-.modal__footer {
-  margin-top: 20px;
-  text-align: right;
-}
-
-.modal__footer button {
-  display: inline-block;
-  margin-right: 5px;
-}
-</style>
-
 <script setup>
 import { NcContent, NcAppContent, NcButton, NcModal } from '@nextcloud/vue'
 import { ref, onMounted } from 'vue'
@@ -541,3 +539,33 @@ onMounted(async () => {
   config.value = await configStore.getAppConfig()
 })
 </script>
+
+<style scoped>
+.hidden {
+  display: none;
+}
+
+.button-inline button {
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.config {
+  width: 100%;
+  height: 30vh;
+}
+
+.modal__content {
+  padding: 20px;
+}
+
+.modal__footer {
+  margin-top: 20px;
+  text-align: right;
+}
+
+.modal__footer button {
+  display: inline-block;
+  margin-right: 5px;
+}
+</style>