fix: misc ts errors

app/package.json

@@ -10,7 +10,8 @@
     "lint:js": "eslint --ext \".ts,.vue,.cjs,.js\" --ignore-path ../.gitignore .",
     "lint:prettier": "prettier --check .",
     "lint": "yarn lint:js && yarn lint:prettier",
-    "lintfix": "prettier --write --list-different . && yarn lint:js --fix"
+    "lintfix": "prettier --write --list-different . && yarn lint:js --fix",
+    "type-check": "vue-tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
     "@fontsource/fira-code": "^5.0.18",

app/src/components/LazyRenderer.vue

@@ -46,7 +46,7 @@ onMounted(() => {
       if (intersecting) {
         clearTimeout(unrenderTimer)
         // Show the component after a delay (to avoid rendering while scrolling fast)
-        renderTimer = setTimeout(
+        renderTimer = window.setTimeout(
           () => {
             render.value = true
           },
@@ -60,7 +60,7 @@ onMounted(() => {
       } else if (props.unrender) {
         clearTimeout(renderTimer)
         // Hide the component after a delay if it's no longer in the viewport
-        unrenderTimer = setTimeout(() => {
+        unrenderTimer = window.setTimeout(() => {
           fixedMinHeight.value = rootElem.value!.clientHeight
           render.value = false
         }, props.unrenderDelay)

app/src/components/globals/CardForm.vue

@@ -61,7 +61,7 @@ const slots = defineSlots<
   } & {
     [K in KeyOfStr<FFD> as `component:${K}`]?: (
       _: FFD[K]['component'] extends AnyWritableComponents
-        ? FFD[K]['cProps'] & BaseItemComputedProps<MV[K]>
+        ? FFD[K]['cProps'] & BaseItemComputedProps
         : FFD[K]['component'] extends AnyDisplayComponents
           ? FFD[K]['cProps']
           : never,
@@ -105,12 +105,16 @@ const Fields = createReusableTemplate<{
     string
   >][]
 }>()
+
+// presence of <!-- @vue-expect-error --> are for `yarn type-check`,
+// don't know why custom component slots name doesn't pass
 </script>
 
 <template>
   <Fields.define v-slot="{ fieldsProps }">
     <template v-for="[k, field] in fieldsProps" :key="k">
       <template v-if="toValue(field.visible) ?? true">
+        <!-- @vue-expect-error -->
         <slot
           v-if="isWritableComponent<MV[typeof k]>(field)"
           :name="`field:${k}`"
@@ -123,7 +127,9 @@ const Fields = createReusableTemplate<{
             :validation="props.validations?.form[k]"
             @update:model-value="onModelUpdate(k, $event)"
           >
+            <!-- @vue-expect-error -->
             <template v-if="slots[`component:${k}`]" #default="childProps">
+              <!-- @vue-expect-error -->
               <slot :name="`component:${k}`" v-bind="childProps" />
             </template>
           </FormField>
@@ -133,6 +139,7 @@ const Fields = createReusableTemplate<{
             :model-value="modelValue![k]"
           />
         </slot>
+        <!-- @vue-expect-error -->
         <slot
           v-else-if="isDisplayComponent(field)"
           :name="`component:${k}`"

app/src/components/globals/FormField.vue

@@ -12,7 +12,6 @@ import { omit } from '@/helpers/commons'
 import type {
   AnyWritableComponents,
   BaseItemComputedProps,
-  FormField,
   FormFieldProps,
   ItemComponentToItemProps,
 } from '@/types/form'
@@ -45,7 +44,7 @@ defineEmits<{
 
 const slots = defineSlots<{
   default?: (
-    componentProps: FormField<C, MV>['cProps'] & BaseItemComputedProps<MV>,
+    componentProps: ItemComponentToItemProps[C] & BaseItemComputedProps,
   ) => any
   description?: any
 }>()
@@ -137,13 +136,13 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate<{
         ...(props.cProps ?? ({} as ItemComponentToItemProps[C])),
         ariaDescribedby,
         state,
-        validation: validation,
+        validation,
       }"
     >
       <!-- if no component was passed as slot, render a component from the props -->
       <Component
         v-bind="props.cProps"
-        :is="component"
+        :is="props.component"
         v-model="modelValue"
         :aria-describedby="ariaDescribedby"
         :state="state"

app/src/components/globals/FormFieldMultiple.vue

@@ -54,8 +54,7 @@ const emit = defineEmits<{
 
 const slots = defineSlots<{
   default?: (_: {
-    componentProps: FormField<C, ArrInnerType<MV>>['cProps'] &
-      BaseItemComputedProps<ArrInnerType<MV>>
+    componentProps: ItemComponentToItemProps[C] & BaseItemComputedProps
     index: number
   }) => any
   description?: () => any
@@ -168,12 +167,14 @@ function updateElement(index: number, newValue: ArrInnerType<MV>) {
 <template>
   <BFormGroup v-bind="computedAttrs" :id="id" :label="label" :state="state">
     <div v-for="(fieldProps, index) in subProps" :key="index" class="item">
+      <!-- @vue-expect-error -->
       <FormField
         v-bind="fieldProps"
         class="w-100 mb-3"
-        @update:model-value="updateElement(index, $event)"
+        @update:model-value="updateElement(index, $event as ArrInnerType<MV>)"
       >
         <template v-if="slots.default" #default="componentProps">
+          <!-- @vue-expect-error -->
           <slot v-bind="{ componentProps, index }" />
         </template>
       </FormField>

app/src/components/globals/FormFieldReadonly.vue

@@ -17,7 +17,7 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(defineProps<FormFieldReadonlyProps<C, MV>>(), {
+const props = withDefaults(defineProps<FormFieldReadonlyProps<C>>(), {
   id: undefined,
   cols: () => ({ md: 4, lg: 3 }),
 })

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

@@ -5,20 +5,17 @@ import type {
   BaseItemComputedProps,
 } from '@/types/form'
 
-withDefaults(
-  defineProps<AdressItemProps & BaseItemComputedProps<AdressModelValue>>(),
-  {
-    id: undefined,
-    name: undefined,
-    placeholder: undefined,
-    touchKey: undefined,
-    type: 'email',
+withDefaults(defineProps<AdressItemProps & BaseItemComputedProps>(), {
+  id: undefined,
+  name: undefined,
+  placeholder: undefined,
+  touchKey: undefined,
+  type: 'email',
 
-    state: undefined,
-    validation: undefined,
-    ariaDescribedby: undefined,
-  },
-)
+  state: undefined,
+  validation: undefined,
+  ariaDescribedby: undefined,
+})
 
 const emit = defineEmits<{
   'update:modelValue': [value: AdressModelValue]

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

@@ -1,21 +1,18 @@
 <script setup lang="ts">
 import type { CheckboxItemProps, BaseItemComputedProps } from '@/types/form'
 
-withDefaults(
-  defineProps<CheckboxItemProps & BaseItemComputedProps<boolean>>(),
-  {
-    id: undefined,
-    name: undefined,
-    placeholder: undefined,
-    touchKey: undefined,
-    label: undefined,
-    labels: () => ({ true: 'yes', false: 'no' }),
+withDefaults(defineProps<CheckboxItemProps & BaseItemComputedProps>(), {
+  id: undefined,
+  name: undefined,
+  placeholder: undefined,
+  touchKey: undefined,
+  label: undefined,
+  labels: () => ({ true: 'yes', false: 'no' }),
 
-    ariaDescribedby: undefined,
-    state: undefined,
-    validation: undefined,
-  },
-)
+  ariaDescribedby: undefined,
+  state: undefined,
+  validation: undefined,
+})
 
 const modelValue = defineModel<boolean>()
 </script>

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

@@ -11,7 +11,7 @@ import type {
 } from '@/types/form'
 
 const props = withDefaults(
-  defineProps<FileItemProps & BaseItemComputedProps<FileModelValue>>(),
+  defineProps<FileItemProps & BaseItemComputedProps>(),
   {
     id: undefined,
     name: undefined,

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

@@ -7,7 +7,7 @@ import type { BaseItemComputedProps, InputItemProps } from '@/types/form'
 import { objectGet } from '@/helpers/commons'
 
 const props = withDefaults(
-  defineProps<InputItemProps & BaseItemComputedProps<string | number | null>>(),
+  defineProps<InputItemProps & BaseItemComputedProps>(),
   {
     id: undefined,
     name: undefined,

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

@@ -5,7 +5,7 @@ import { ValidationTouchSymbol } from '@/composables/form'
 import type { BaseItemComputedProps, SelectItemProps } from '@/types/form'
 
 const props = withDefaults(
-  defineProps<SelectItemProps & BaseItemComputedProps<string | null>>(),
+  defineProps<SelectItemProps & BaseItemComputedProps>(),
   {
     id: undefined,
     name: undefined,

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

@@ -5,7 +5,7 @@ import { ValidationTouchSymbol } from '@/composables/form'
 import type { BaseItemComputedProps, TagsItemProps } from '@/types/form'
 
 const props = withDefaults(
-  defineProps<TagsItemProps & BaseItemComputedProps<string[]>>(),
+  defineProps<TagsItemProps & BaseItemComputedProps>(),
   {
     id: undefined,
     name: undefined,

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

@@ -16,7 +16,7 @@ defineOptions({
 })
 
 const props = withDefaults(
-  defineProps<TagsSelectizeItemProps & BaseItemComputedProps<string[]>>(),
+  defineProps<TagsSelectizeItemProps & BaseItemComputedProps>(),
   {
     id: undefined,
     name: undefined,

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

@@ -5,7 +5,7 @@ import { ValidationTouchSymbol } from '@/composables/form'
 import type { BaseItemComputedProps, TextAreaItemProps } from '@/types/form'
 
 const props = withDefaults(
-  defineProps<TextAreaItemProps & BaseItemComputedProps<string | null>>(),
+  defineProps<TextAreaItemProps & BaseItemComputedProps>(),
   {
     id: undefined,
     name: undefined,

app/src/composables/configPanels.ts

@@ -357,7 +357,7 @@ function useEvaluation(expression: string, form: MaybeRefOrGetter<Obj>) {
         ctx[key] = ctx[key].content
       }
       if (isAdressModelValue(ctx[key])) {
-        ctx[key] = ctx[key].value().join('')
+        ctx[key] = Object.values(ctx[key]).join('')
       }
     }
 

app/src/composables/useInfos.ts

@@ -214,5 +214,6 @@ export const useInfos = createGlobalState(() => {
     logout,
     tryToReconnect,
     updateHtmlTitle,
+    updateRouterKey,
   }
 })

app/src/composables/useRequests.ts

@@ -108,7 +108,7 @@ export const useRequests = createGlobalState(() => {
     const r = requests.value[requests.value.length - 1]!
 
     if (showModal) {
-      request.showModalTimeout = setTimeout(() => {
+      request.showModalTimeout = window.setTimeout(() => {
         // Display the waiting modal only if the request takes some time.
         if (r.status === 'pending') {
           r.showModal = true

app/src/helpers/yunohostArguments.ts

@@ -182,7 +182,7 @@ export function formatForm<
   R extends { [k in keyof T]: Awaited<FormValueReturnType<T[k]>> },
 >(
   form: MaybeRef<T>,
-  { removeEmpty = false },
+  { removeEmpty }: { removeEmpty: boolean },
 ): Promise<
   Partial<{
     // TODO: using `Partial` for now since i'm not sure we can infer empty `'' | [] | {}`
@@ -194,7 +194,7 @@ export function formatForm<
   R extends { [k in keyof T]: Awaited<FormValueReturnType<T[k]>> },
 >(
   form: MaybeRef<T>,
-  { removeNullish = false },
+  { removeNullish }: { removeNullish: boolean },
 ): Promise<{
   [k in keyof R as R[k] extends undefined | null ? never : k]: R[k]
 }>

app/src/types/form.ts

@@ -294,7 +294,6 @@ export type FormFieldProps<
   MV extends any,
 > = Omit<FormField<C, MV>, 'hr' | 'visible' | 'readonly'> &
   BaseFormFieldComputedProps
-// BaseFormFieldComputedProps<MV>
 
 export type FormFieldReadonlyProps<C extends AnyWritableComponents> = Omit<
   FormFieldReadonly<C>,

app/src/views/_partials/HistoryConsole.vue

@@ -85,7 +85,7 @@ function onHistoryBarClick(e: MouseEvent) {
   }
 
   // Delay the mouse move listener to distinguish a click from a drag.
-  const listenToMouseMove = setTimeout(() => {
+  const listenToMouseMove = window.setTimeout(() => {
     hElem.style.height = hElem.offsetHeight + 'px'
     hElem.classList.add('no-max')
     window.addEventListener('mousemove', onMouseMove)

app/src/views/app/AppInfo.vue

@@ -224,7 +224,7 @@ async function dismissNotification(name: string) {
       humanKey: { key: 'apps.dismiss_notification', name: app.label },
     })
     // FIXME no need to refetch i guess, filter the reactive notifs?
-    .then(() => api.refetch)
+    .then(() => api.refetch())
 }
 
 async function uninstall() {

app/vite.config.ts

@@ -3,7 +3,7 @@ import { defineConfig, loadEnv } from 'vite'
 import fs from 'fs'
 import createVuePlugin from '@vitejs/plugin-vue'
 import Components from 'unplugin-vue-components/vite'
-import { BootstrapVueNextResolver } from 'unplugin-vue-components/resolvers'
+import { BootstrapVueNextResolver } from 'bootstrap-vue-next'
 
 import supportedLocales from './src/i18n/supportedLocales'
 
@@ -13,7 +13,7 @@ const supportedDatefnsLocales = Object.entries(supportedLocales).map(
   },
 )
 
-export default defineConfig(({ command, mode }) => {
+export default defineConfig(({ mode }) => {
   // Load env file based on `mode` in the current working directory.
   // Set the third parameter to '' to load all env regardless of the `VITE_` prefix.
   const env = loadEnv(mode, process.cwd())
@@ -57,7 +57,7 @@ export default defineConfig(({ command, mode }) => {
     build: {
       rollupOptions: {
         output: {
-          manualChunks: (id) => {
+          manualChunks: (id: string) => {
             // Circular import problems, this will merge core deps and api together
             if (!id.includes('node_modules') && id.includes('api/')) {
               return 'core'
@@ -65,7 +65,7 @@ export default defineConfig(({ command, mode }) => {
             // Translations
             if (id.includes('locales')) {
               const match = /.*\/i18n\/locales\/([\w-]+)\.json/.exec(id)
-              return `locales/${match[1]}/translations`
+              return `locales/${match![1]}/translations`
             }
             // Split date-fns locales
             if (id.includes('date-fns')) {
@@ -93,33 +93,33 @@ export default defineConfig(({ command, mode }) => {
       ...config,
       base: '/yunohost/admin',
     }
-  } else if (mode === 'development') {
-    return {
-      ...config,
-      server: {
-        port: 8080,
-        host: env.VITE_IP,
-        https: {
-          // Use already created cert from yunohost instance
-          key: fs.readFileSync('/etc/yunohost/certs/yunohost.org/key.pem'),
-          cert: fs.readFileSync('/etc/yunohost/certs/yunohost.org/crt.pem'),
-        },
-        fs: {
-          // Needed for special ynh-dev context where node_modules is symlinked
-          allow: [
-            '/ynh-dev/yunohost-admin/app',
-            '/var/cache/ynh-dev/yunohost-admin/node_modules',
-          ],
-        },
-        proxy: {
-          '/yunohost': {
-            target: `https://${env.VITE_IP}`,
-            ws: true,
-            logLevel: 'info',
-            secure: false,
-          },
+  }
+  // mode dev
+  return {
+    ...config,
+    server: {
+      port: 8080,
+      host: env.VITE_IP,
+      https: {
+        // Use already created cert from yunohost instance
+        key: fs.readFileSync('/etc/yunohost/certs/yunohost.org/key.pem'),
+        cert: fs.readFileSync('/etc/yunohost/certs/yunohost.org/crt.pem'),
+      },
+      fs: {
+        // Needed for special ynh-dev context where node_modules is symlinked
+        allow: [
+          '/ynh-dev/yunohost-admin/app',
+          '/var/cache/ynh-dev/yunohost-admin/node_modules',
+        ],
+      },
+      proxy: {
+        '/yunohost': {
+          target: `https://${env.VITE_IP}`,
+          ws: true,
+          logLevel: 'info',
+          secure: false,
         },
       },
-    }
+    },
   }
 })