fix(vue): toValue instead of unref

frontend/src/composables/useAutoHeightTextarea.ts

@@ -1,9 +1,9 @@
-import {ref, unref, watch} from 'vue'
+import {ref, toValue, watch, type MaybeRefOrGetter} from 'vue'
-import {debouncedWatch, tryOnMounted, useWindowSize, type MaybeRef} from '@vueuse/core'
+import {debouncedWatch, tryOnMounted, useWindowSize} from '@vueuse/core'
 
 // TODO: also add related styles
 // OR: replace with vueuse function
-export function useAutoHeightTextarea(value: MaybeRef<string>) {
+export function useAutoHeightTextarea(value: MaybeRefOrGetter<string>) {
 	const textarea = ref<HTMLTextAreaElement | null>(null)
 	const minHeight = ref(0)
 	const height = ref('')
@@ -60,7 +60,7 @@ export function useAutoHeightTextarea(value: MaybeRef<string>) {
 	// It is not possible to get notified of a change of the value attribute of a textarea without workarounds (setTimeout) 
 	// So instead we watch the value that we bound to it.
 	watch(
-		() => [textarea.value, unref(value)],
+		() => [textarea.value, toValue(value)],
 		() => resize(textarea.value),
 		{
 			immediate: true, // calculate initial size

frontend/src/helpers/time/formatDate.ts

@@ -5,8 +5,8 @@ import {format, formatDistanceToNow} from 'date-fns'
 import {enGB, de, fr, ru} from 'date-fns/locale'
 
 import {i18n} from '@/i18n'
-import {createSharedComposable, type MaybeRef} from '@vueuse/core'
+import {createSharedComposable} from '@vueuse/core'
-import {computed, unref} from 'vue'
+import {computed, toValue, type MaybeRefOrGetter} from 'vue'
 
 const locales = {en: enGB, de, ch: de, fr, ru}
 
@@ -57,8 +57,8 @@ export function formatISO(date) {
  * Because `Intl.DateTimeFormat` is expensive to instatiate we try to reuse it as often as possible,
  * by creating a shared composable.
  */
-export const useDateTimeFormatter = createSharedComposable((options?: MaybeRef<Intl.DateTimeFormatOptions>) => {
+export const useDateTimeFormatter = createSharedComposable((options?: MaybeRefOrGetter<Intl.DateTimeFormatOptions>) => {
-	return computed(() => new Intl.DateTimeFormat(i18n.global.locale.value, unref(options)))
+	return computed(() => new Intl.DateTimeFormat(i18n.global.locale.value, toValue(options)))
 })
 
 export function useWeekDayFromDate() {

frontend/src/services/savedFilter.ts

@@ -1,7 +1,6 @@
-import {computed, ref, shallowReactive, unref, watch} from 'vue'
+import {computed, ref, shallowReactive, toValue, watch, type MaybeRefOrGetter} from 'vue'
 import {useRouter} from 'vue-router'
 import {useI18n} from 'vue-i18n'
-import type {MaybeRef} from '@vueuse/core'
 import {useDebounceFn} from '@vueuse/core'
 
 import type {IProject} from '@/modelTypes/IProject'
@@ -75,7 +74,7 @@ export default class SavedFilterService extends AbstractService<ISavedFilter> {
 	}
 }
 
-export function useSavedFilter(projectId?: MaybeRef<IProject['id']>) {
+export function useSavedFilter(projectId?: MaybeRefOrGetter<IProject['id']>) {
 	const router = useRouter()
 	const {t} = useI18n({useScope:'global'})
 	const projectStore = useProjectStore()
@@ -91,7 +90,7 @@ export function useSavedFilter(projectId?: MaybeRef<IProject['id']>) {
 	})
 
 	// load SavedFilter
-	watch(() => unref(projectId), async (watchedProjectId) => {
+	watch(() => toValue(projectId), async (watchedProjectId) => {
 		if (watchedProjectId === undefined) {
 			return
 		}

frontend/src/stores/projects.ts

@@ -1,4 +1,4 @@
-import {watch, reactive, shallowReactive, unref, readonly, ref, computed} from 'vue'
+import {watch, reactive, shallowReactive, toValue, readonly, ref, computed, type MaybeRefOrGetter} from 'vue'
 import {acceptHMRUpdate, defineStore} from 'pinia'
 import {useI18n} from 'vue-i18n'
 import {useRouter} from 'vue-router'
@@ -12,8 +12,6 @@ import {createNewIndexer} from '@/indexes'
 
 import type {IProject} from '@/modelTypes/IProject'
 
-import type {MaybeRef} from '@vueuse/core'
-
 import ProjectModel from '@/models/project'
 import {success} from '@/message'
 import {useBaseStore} from '@/stores/base'
@@ -271,7 +269,7 @@ export const useProjectStore = defineStore('project', () => {
 	}
 })
 
-export function useProject(projectId: MaybeRef<IProject['id']>) {
+export function useProject(projectId: MaybeRefOrGetter<IProject['id']>) {
 	const projectService = shallowReactive(new ProjectService())
 	const projectDuplicateService = shallowReactive(new ProjectDuplicateService())
 	
@@ -283,7 +281,7 @@ export function useProject(projectId: MaybeRef<IProject['id']>) {
 	const projectStore = useProjectStore()
 
 	watch(
-		() => unref(projectId),
+		() => toValue(projectId),
 		async (projectId) => {
 			const loadedProject = await projectService.get(new ProjectModel({id: projectId}))
 			Object.assign(project, loadedProject)
@@ -299,7 +297,7 @@ export function useProject(projectId: MaybeRef<IProject['id']>) {
 	
 	async function duplicateProject(parentProjectId: IProject['id']) {
 		const projectDuplicate = new ProjectDuplicateModel({
-			projectId: Number(unref(projectId)),
+			projectId: Number(toValue(projectId)),
 			parentProjectId,
 		})