diff --git a/frontend/src/composables/useAutoHeightTextarea.ts b/frontend/src/composables/useAutoHeightTextarea.ts index 6527ae2bd..2742f0160 100644 --- a/frontend/src/composables/useAutoHeightTextarea.ts +++ b/frontend/src/composables/useAutoHeightTextarea.ts @@ -1,9 +1,9 @@ -import {ref, unref, watch} from 'vue' -import {debouncedWatch, tryOnMounted, useWindowSize, type MaybeRef} from '@vueuse/core' +import {ref, toValue, watch, type MaybeRefOrGetter} from 'vue' +import {debouncedWatch, tryOnMounted, useWindowSize} from '@vueuse/core' // TODO: also add related styles // OR: replace with vueuse function -export function useAutoHeightTextarea(value: MaybeRef) { +export function useAutoHeightTextarea(value: MaybeRefOrGetter) { const textarea = ref(null) const minHeight = ref(0) const height = ref('') @@ -60,7 +60,7 @@ export function useAutoHeightTextarea(value: MaybeRef) { // 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 diff --git a/frontend/src/helpers/time/formatDate.ts b/frontend/src/helpers/time/formatDate.ts index 3d546ee32..69408caf4 100644 --- a/frontend/src/helpers/time/formatDate.ts +++ b/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 {computed, unref} from 'vue' +import {createSharedComposable} from '@vueuse/core' +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) => { - return computed(() => new Intl.DateTimeFormat(i18n.global.locale.value, unref(options))) +export const useDateTimeFormatter = createSharedComposable((options?: MaybeRefOrGetter) => { + return computed(() => new Intl.DateTimeFormat(i18n.global.locale.value, toValue(options))) }) export function useWeekDayFromDate() { diff --git a/frontend/src/services/savedFilter.ts b/frontend/src/services/savedFilter.ts index 6214028b7..bf766f5e6 100644 --- a/frontend/src/services/savedFilter.ts +++ b/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 { } } -export function useSavedFilter(projectId?: MaybeRef) { +export function useSavedFilter(projectId?: MaybeRefOrGetter) { const router = useRouter() const {t} = useI18n({useScope:'global'}) const projectStore = useProjectStore() @@ -91,7 +90,7 @@ export function useSavedFilter(projectId?: MaybeRef) { }) // load SavedFilter - watch(() => unref(projectId), async (watchedProjectId) => { + watch(() => toValue(projectId), async (watchedProjectId) => { if (watchedProjectId === undefined) { return } diff --git a/frontend/src/stores/projects.ts b/frontend/src/stores/projects.ts index 34a580a16..2fd76e6bb 100644 --- a/frontend/src/stores/projects.ts +++ b/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) { +export function useProject(projectId: MaybeRefOrGetter) { const projectService = shallowReactive(new ProjectService()) const projectDuplicateService = shallowReactive(new ProjectDuplicateService()) @@ -283,7 +281,7 @@ export function useProject(projectId: MaybeRef) { 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) { async function duplicateProject(parentProjectId: IProject['id']) { const projectDuplicate = new ProjectDuplicateModel({ - projectId: Number(unref(projectId)), + projectId: Number(toValue(projectId)), parentProjectId, })