fix linter issues

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>