fix(lint): fix lint after upgrades

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Activity/DiscussionActivityItem.vue

@@ -62,34 +62,40 @@ const props = defineProps<{
   activity: IActivity;
 }>();
 
-const isAuthorCurrentActor = useIsActivityAuthorCurrentActor()(props.activity);
+const useIsActivityAuthorCurrentActorFct = useIsActivityAuthorCurrentActor();
+const useActivitySubjectParamsFct = useActivitySubjectParams();
 
-const subjectParams = useActivitySubjectParams()(props.activity);
+const isAuthorCurrentActor = computed(() =>
+  useIsActivityAuthorCurrentActorFct(props.activity)
+);
+const subjectParams = computed(() =>
+  useActivitySubjectParamsFct(props.activity)
+);
 
 const translation = computed((): string | undefined => {
   switch (props.activity.subject) {
     case ActivityDiscussionSubject.DISCUSSION_CREATED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You created the discussion {discussion}.";
       }
       return "{profile} created the discussion {discussion}.";
     case ActivityDiscussionSubject.DISCUSSION_REPLIED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You replied to the discussion {discussion}.";
       }
       return "{profile} replied to the discussion {discussion}.";
     case ActivityDiscussionSubject.DISCUSSION_RENAMED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You renamed the discussion from {old_discussion} to {discussion}.";
       }
       return "{profile} renamed the discussion from {old_discussion} to {discussion}.";
     case ActivityDiscussionSubject.DISCUSSION_ARCHIVED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You archived the discussion {discussion}.";
       }
       return "{profile} archived the discussion {discussion}.";
     case ActivityDiscussionSubject.DISCUSSION_DELETED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You deleted the discussion {discussion}.";
       }
       return "{profile} deleted the discussion {discussion}.";

js/src/components/Activity/EventActivityItem.vue

@@ -52,35 +52,41 @@ const props = defineProps<{
   activity: IActivity;
 }>();
 
-const isAuthorCurrentActor = useIsActivityAuthorCurrentActor()(props.activity);
+const useIsActivityAuthorCurrentActorFct = useIsActivityAuthorCurrentActor();
+const useActivitySubjectParamsFct = useActivitySubjectParams();
 
-const subjectParams = useActivitySubjectParams()(props.activity);
+const isAuthorCurrentActor = computed(() =>
+  useIsActivityAuthorCurrentActorFct(props.activity)
+);
+const subjectParams = computed(() =>
+  useActivitySubjectParamsFct(props.activity)
+);
 
 const translation = computed((): string | undefined => {
   switch (props.activity.subject) {
     case ActivityEventSubject.EVENT_CREATED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You created the event {event}.";
       }
       return "The event {event} was created by {profile}.";
     case ActivityEventSubject.EVENT_UPDATED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You updated the event {event}.";
       }
       return "The event {event} was updated by {profile}.";
     case ActivityEventSubject.EVENT_DELETED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You deleted the event {event}.";
       }
       return "The event {event} was deleted by {profile}.";
     case ActivityEventCommentSubject.COMMENT_POSTED:
-      if (subjectParams.comment_reply_to) {
-        if (isAuthorCurrentActor) {
+      if (subjectParams.value.comment_reply_to) {
+        if (isAuthorCurrentActor.value) {
           return "You replied to a comment on the event {event}.";
         }
         return "{profile} replied to a comment on the event {event}.";
       }
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You posted a comment on the event {event}.";
       }
       return "{profile} posted a comment on the event {event}.";

js/src/components/Activity/GroupActivityItem.vue

@@ -44,9 +44,13 @@
           <router-link
             v-if="activity.object"
             :to="{
-            name: RouteName.GROUP,
-            params: { preferredUsername: usernameWithDomain(activity.object as IActor) },
-          }"
+              name: RouteName.GROUP,
+              params: {
+                preferredUsername: usernameWithDomain(
+                  activity.object as IActor
+                ),
+              },
+            }"
             >{{ subjectParams.group_name }}</router-link
           >
           <b v-else>{{ subjectParams.group_name }}</b>
@@ -78,19 +82,25 @@ const props = defineProps<{
   activity: IActivity;
 }>();
 
-const isAuthorCurrentActor = useIsActivityAuthorCurrentActor()(props.activity);
+const useIsActivityAuthorCurrentActorFct = useIsActivityAuthorCurrentActor();
+const useActivitySubjectParamsFct = useActivitySubjectParams();
 
-const subjectParams = useActivitySubjectParams()(props.activity);
+const isAuthorCurrentActor = computed(() =>
+  useIsActivityAuthorCurrentActorFct(props.activity)
+);
+const subjectParams = computed(() =>
+  useActivitySubjectParamsFct(props.activity)
+);
 
 const translation = computed((): string | undefined => {
   switch (props.activity.subject) {
     case ActivityGroupSubject.GROUP_CREATED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You created the group {group}.";
       }
       return "{profile} created the group {group}.";
     case ActivityGroupSubject.GROUP_UPDATED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You updated the group {group}.";
       }
       return "{profile} updated the group {group}.";
@@ -114,8 +124,8 @@ const group = computed(() => props.activity.object as IGroup);
 
 const details = computed((): string[] => {
   const localDetails = [];
-  const changes = subjectParams.group_changes.split(",");
-  if (changes.includes("name") && subjectParams.old_group_name) {
+  const changes = subjectParams.value.group_changes.split(",");
+  if (changes.includes("name") && subjectParams.value.old_group_name) {
     localDetails.push("{old_group_name} was renamed to {group}.");
   }
   if (changes.includes("visibility") && group.value.visibility) {

js/src/components/Activity/MemberActivityItem.vue

@@ -51,58 +51,63 @@ const props = defineProps<{
   activity: IActivity;
 }>();
 
-const isAuthorCurrentActor = useIsActivityAuthorCurrentActor()(props.activity);
+const isActivityAuthorCurrentActorFct = useIsActivityAuthorCurrentActor();
+const activitySubjectParamsFct = useActivitySubjectParams();
+const isActivityObjectCurrentActor = useIsActivityObjectCurrentActor();
 
-const subjectParams = useActivitySubjectParams()(props.activity);
+const isAuthorCurrentActor = computed(() =>
+  isActivityAuthorCurrentActorFct(props.activity)
+);
+const subjectParams = computed(() => activitySubjectParamsFct(props.activity));
 const member = computed(() => props.activity.object as IMember);
 
-const isObjectMemberCurrentActor = useIsActivityObjectCurrentActor()(
-  props.activity
+const isObjectMemberCurrentActor = computed(() =>
+  isActivityObjectCurrentActor(props.activity)
 );
 
 const translation = computed((): string | undefined => {
   switch (props.activity.subject) {
     case ActivityMemberSubject.MEMBER_REQUEST:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You requested to join the group.";
       }
       return "{member} requested to join the group.";
     case ActivityMemberSubject.MEMBER_INVITED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You invited {member}.";
       }
       return "{member} was invited by {profile}.";
     case ActivityMemberSubject.MEMBER_ADDED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You added the member {member}.";
       }
       return "{profile} added the member {member}.";
     case ActivityMemberSubject.MEMBER_APPROVED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You approved {member}'s membership.";
       }
-      if (isObjectMemberCurrentActor) {
+      if (isObjectMemberCurrentActor.value) {
         return "Your membership was approved by {profile}.";
       }
       return "{profile} approved {member}'s membership.";
     case ActivityMemberSubject.MEMBER_JOINED:
       return "{member} joined the group.";
     case ActivityMemberSubject.MEMBER_UPDATED:
-      if (subjectParams.member_role && subjectParams.old_role) {
+      if (subjectParams.value.member_role && subjectParams.value.old_role) {
         return roleUpdate.value;
       }
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You updated the member {member}.";
       }
       return "{profile} updated the member {member}.";
     case ActivityMemberSubject.MEMBER_REMOVED:
-      if (subjectParams.member_role === MemberRole.NOT_APPROVED) {
-        if (isAuthorCurrentActor) {
+      if (subjectParams.value.member_role === MemberRole.NOT_APPROVED) {
+        if (isAuthorCurrentActor.value) {
           return "You rejected {member}'s membership request.";
         }
         return "{profile} rejected {member}'s membership request.";
       }
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You excluded member {member}.";
       }
       return "{profile} excluded member {member}.";
@@ -111,7 +116,7 @@ const translation = computed((): string | undefined => {
     case ActivityMemberSubject.MEMBER_REJECTED_INVITATION:
       return "{member} rejected the invitation to join the group.";
     case ActivityMemberSubject.MEMBER_ACCEPTED_INVITATION:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You accepted the invitation to join the group.";
       }
       return "{member} accepted the invitation to join the group.";
@@ -159,69 +164,69 @@ const iconColor = computed((): string | undefined => {
 
 const roleUpdate = computed((): string | undefined => {
   if (
-    Object.keys(MEMBER_ROLE_VALUE).includes(subjectParams.member_role) &&
-    Object.keys(MEMBER_ROLE_VALUE).includes(subjectParams.old_role)
+    Object.keys(MEMBER_ROLE_VALUE).includes(subjectParams.value.member_role) &&
+    Object.keys(MEMBER_ROLE_VALUE).includes(subjectParams.value.old_role)
   ) {
     if (
-      MEMBER_ROLE_VALUE[subjectParams.member_role] >
-      MEMBER_ROLE_VALUE[subjectParams.old_role]
+      MEMBER_ROLE_VALUE[subjectParams.value.member_role] >
+      MEMBER_ROLE_VALUE[subjectParams.value.old_role]
     ) {
-      switch (subjectParams.member_role) {
+      switch (subjectParams.value.member_role) {
         case MemberRole.MODERATOR:
-          if (isAuthorCurrentActor) {
+          if (isAuthorCurrentActor.value) {
             return "You promoted {member} to moderator.";
           }
-          if (isObjectMemberCurrentActor) {
+          if (isObjectMemberCurrentActor.value) {
             return "You were promoted to moderator by {profile}.";
           }
           return "{profile} promoted {member} to moderator.";
         case MemberRole.ADMINISTRATOR:
-          if (isAuthorCurrentActor) {
+          if (isAuthorCurrentActor.value) {
             return "You promoted {member} to administrator.";
           }
-          if (isObjectMemberCurrentActor) {
+          if (isObjectMemberCurrentActor.value) {
             return "You were promoted to administrator by {profile}.";
           }
           return "{profile} promoted {member} to administrator.";
         default:
-          if (isAuthorCurrentActor) {
+          if (isAuthorCurrentActor.value) {
             return "You promoted the member {member} to an unknown role.";
           }
-          if (isObjectMemberCurrentActor) {
+          if (isObjectMemberCurrentActor.value) {
             return "You were promoted to an unknown role by {profile}.";
           }
           return "{profile} promoted {member} to an unknown role.";
       }
     } else {
-      switch (subjectParams.member_role) {
+      switch (subjectParams.value.member_role) {
         case MemberRole.MODERATOR:
-          if (isAuthorCurrentActor) {
+          if (isAuthorCurrentActor.value) {
             return "You demoted {member} to moderator.";
           }
-          if (isObjectMemberCurrentActor) {
+          if (isObjectMemberCurrentActor.value) {
             return "You were demoted to moderator by {profile}.";
           }
           return "{profile} demoted {member} to moderator.";
         case MemberRole.MEMBER:
-          if (isAuthorCurrentActor) {
+          if (isAuthorCurrentActor.value) {
             return "You demoted {member} to simple member.";
           }
-          if (isObjectMemberCurrentActor) {
+          if (isObjectMemberCurrentActor.value) {
             return "You were demoted to simple member by {profile}.";
           }
           return "{profile} demoted {member} to simple member.";
         default:
-          if (isAuthorCurrentActor) {
+          if (isAuthorCurrentActor.value) {
             return "You demoted the member {member} to an unknown role.";
           }
-          if (isObjectMemberCurrentActor) {
+          if (isObjectMemberCurrentActor.value) {
             return "You were demoted to an unknown role by {profile}.";
           }
           return "{profile} demoted {member} to an unknown role.";
       }
     }
   } else {
-    if (isAuthorCurrentActor) {
+    if (isAuthorCurrentActor.value) {
       return "You updated the member {member}.";
     }
     return "{profile} updated the member {member}";

js/src/components/Activity/PostActivityItem.vue

@@ -49,24 +49,30 @@ const props = defineProps<{
   activity: IActivity;
 }>();
 
-const isAuthorCurrentActor = useIsActivityAuthorCurrentActor()(props.activity);
+const useIsActivityAuthorCurrentActorFct = useIsActivityAuthorCurrentActor();
+const useActivitySubjectParamsFct = useActivitySubjectParams();
 
-const subjectParams = useActivitySubjectParams()(props.activity);
+const isAuthorCurrentActor = computed(() =>
+  useIsActivityAuthorCurrentActorFct(props.activity)
+);
+const subjectParams = computed(() =>
+  useActivitySubjectParamsFct(props.activity)
+);
 
 const translation = computed((): string | undefined => {
   switch (props.activity.subject) {
     case ActivityPostSubject.POST_CREATED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You created the post {post}.";
       }
       return "The post {post} was created by {profile}.";
     case ActivityPostSubject.POST_UPDATED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You updated the post {post}.";
       }
       return "The post {post} was updated by {profile}.";
     case ActivityPostSubject.POST_DELETED:
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You deleted the post {post}.";
       }
       return "The post {post} was deleted by {profile}.";

js/src/components/Activity/ResourceActivityItem.vue

@@ -61,10 +61,15 @@ import { IResource } from "@/types/resource";
 const props = defineProps<{
   activity: IActivity;
 }>();
+const useIsActivityAuthorCurrentActorFct = useIsActivityAuthorCurrentActor();
+const useActivitySubjectParamsFct = useActivitySubjectParams();
 
-const isAuthorCurrentActor = useIsActivityAuthorCurrentActor()(props.activity);
-
-const subjectParams = useActivitySubjectParams()(props.activity);
+const isAuthorCurrentActor = computed(() =>
+  useIsActivityAuthorCurrentActorFct(props.activity)
+);
+const subjectParams = computed(() =>
+  useActivitySubjectParamsFct(props.activity)
+);
 
 const resource = computed(() => props.activity.object as IResource);
 
@@ -74,12 +79,12 @@ const translation = computed((): string | undefined => {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       if (props.activity?.object?.type === "folder") {
-        if (isAuthorCurrentActor) {
+        if (isAuthorCurrentActor.value) {
           return "You created the folder {resource}.";
         }
         return "{profile} created the folder {resource}.";
       }
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You created the resource {resource}.";
       }
       return "{profile} created the resource {resource}.";
@@ -88,23 +93,23 @@ const translation = computed((): string | undefined => {
       // @ts-ignore
       if (props.activity?.object?.type === "folder") {
         if (parentDirectory.value === null) {
-          if (isAuthorCurrentActor) {
+          if (isAuthorCurrentActor.value) {
             return "You moved the folder {resource} to the root folder.";
           }
           return "{profile} moved the folder {resource} to the root folder.";
         }
-        if (isAuthorCurrentActor) {
+        if (isAuthorCurrentActor.value) {
           return "You moved the folder {resource} into {new_path}.";
         }
         return "{profile} moved the folder {resource} into {new_path}.";
       }
       if (parentDirectory.value === null) {
-        if (isAuthorCurrentActor) {
+        if (isAuthorCurrentActor.value) {
           return "You moved the resource {resource} to the root folder.";
         }
         return "{profile} moved the resource {resource} to the root folder.";
       }
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You moved the resource {resource} into {new_path}.";
       }
       return "{profile} moved the resource {resource} into {new_path}.";
@@ -112,12 +117,12 @@ const translation = computed((): string | undefined => {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       if (props.activity?.object?.type === "folder") {
-        if (isAuthorCurrentActor) {
+        if (isAuthorCurrentActor.value) {
           return "You renamed the folder from {old_resource_title} to {resource}.";
         }
         return "{profile} renamed the folder from {old_resource_title} to {resource}.";
       }
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You renamed the resource from {old_resource_title} to {resource}.";
       }
       return "{profile} renamed the resource from {old_resource_title} to {resource}.";
@@ -125,12 +130,12 @@ const translation = computed((): string | undefined => {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       if (props.activity?.object?.type === "folder") {
-        if (isAuthorCurrentActor) {
+        if (isAuthorCurrentActor.value) {
           return "You deleted the folder {resource}.";
         }
         return "{profile} deleted the folder {resource}.";
       }
-      if (isAuthorCurrentActor) {
+      if (isAuthorCurrentActor.value) {
         return "You deleted the resource {resource}.";
       }
       return "{profile} deleted the resource {resource}.";
@@ -180,8 +185,8 @@ const parentPath = (parent: string | undefined): string | undefined => {
 };
 
 const parentDirectory = computed((): string | undefined | null => {
-  if (subjectParams.resource_path) {
-    const parentPathResult = parentPath(subjectParams.resource_path);
+  if (subjectParams.value.resource_path) {
+    const parentPathResult = parentPath(subjectParams.value.resource_path);
     const directory = parentPathResult?.split("/");
     const res = directory?.pop();
     res === "" ? null : res;

js/src/components/Comment/CommentTree.vue

@@ -2,7 +2,7 @@
   <div>
     <form
       v-if="isAbleToComment"
-      @submit.prevent="createCommentForEvent(newComment)"
+      @submit.prevent="createCommentForEvent(newCommentValue)"
       class="mt-2"
     >
       <o-notification
@@ -12,8 +12,11 @@
         >{{ t("Comments are closed for everybody else.") }}</o-notification
       >
       <article class="flex flex-wrap items-start gap-2">
-        <figure class="" v-if="newComment.actor">
-          <identity-picker-wrapper :inline="false" v-model="newComment.actor" />
+        <figure class="" v-if="newCommentValue.actor">
+          <identity-picker-wrapper
+            :inline="false"
+            v-model="newCommentValue.actor"
+          />
         </figure>
         <div class="flex-1">
           <div class="flex flex-col gap-2">
@@ -23,9 +26,9 @@
                 v-if="currentActor"
                 :currentActor="currentActor"
                 mode="comment"
-                v-model="newComment.text"
+                v-model="newCommentValue.text"
                 :aria-label="t('Comment body')"
-                @submit="createCommentForEvent(newComment)"
+                @submit="createCommentForEvent(newCommentValue)"
                 :placeholder="t('Write a new comment')"
               />
               <p class="" v-if="emptyCommentError">
@@ -35,7 +38,7 @@
             <div class="" v-if="isEventOrganiser">
               <o-switch
                 aria-labelledby="notify-participants-toggle"
-                v-model="newComment.isAnnouncement"
+                v-model="newCommentValue.isAnnouncement"
                 >{{ t("Notify participants") }}</o-switch
               >
             </div>
@@ -70,10 +73,12 @@
           v-for="comment in filteredOrderedComments"
           :key="comment.id"
           @create-comment="createCommentForEvent"
-          @delete-comment="commentToDelete => deleteComment({
-              commentId: commentToDelete.id as string,
-              originCommentId: commentToDelete.originComment?.id,
-            })
+          @delete-comment="
+            (commentToDelete) =>
+              deleteComment({
+                commentId: commentToDelete.id as string,
+                originCommentId: commentToDelete.originComment?.id,
+              })
           "
         />
       </transition-group>
@@ -126,17 +131,19 @@ const Editor = defineAsyncComponent(
   () => import("@/components/TextEditor.vue")
 );
 
-const newComment = ref<IComment>(props.newComment ?? new CommentModel());
+const newCommentProps = computed(() => props.newComment);
+
+const newCommentValue = ref<IComment>(new CommentModel(newCommentProps.value));
 
 const emptyCommentError = ref(false);
 
 const { t } = useI18n({ useScope: "global" });
 
 watch(currentActor, () => {
-  newComment.value.actor = currentActor.value as IPerson;
+  newCommentValue.value.actor = currentActor.value as IPerson;
 });
 
-watch(newComment, (newCommentUpdated: IComment) => {
+watch(newCommentValue, (newCommentUpdated: IComment) => {
   if (emptyCommentError.value) {
     emptyCommentError.value = ["", "<p></p>"].includes(newCommentUpdated.text);
   }
@@ -212,7 +219,7 @@ const {
 
 createCommentForEventMutationDone(() => {
   // and reset the new comment field
-  newComment.value = new CommentModel();
+  newCommentValue.value = new CommentModel();
 });
 
 const notifier = inject<Notifier>("notifier");

js/src/components/Editor/MentionList.vue

@@ -27,9 +27,12 @@ const props = defineProps<{
 
 const selectedIndex = ref(0);
 
-watch(props.items, () => {
-  selectedIndex.value = 0;
-});
+watch(
+  () => props.items,
+  () => {
+    selectedIndex.value = 0;
+  }
+);
 
 // const onKeyDown = ({ event }: { event: KeyboardEvent }): boolean => {
 //   if (event.key === "ArrowUp") {
@@ -80,7 +83,9 @@ const selectItem = (index: number): void => {
   color: rgba(black, 0.8);
   overflow: hidden;
   font-size: 0.9rem;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.1);
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.1),
+    0px 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 .item {

js/src/components/Event/GroupedMultiEventMinimalistCard.vue

@@ -41,12 +41,12 @@ const keys = computed((): string[] => {
   return Array.from(monthlyGroupedEvents.value.keys()).sort((a, b) => {
     const aParams = a.split("-").map((x) => parseInt(x, 10)) as [
       number,
-      number
+      number,
     ];
     const aDate = new Date(...aParams);
     const bParams = b.split("-").map((x) => parseInt(x, 10)) as [
       number,
-      number
+      number,
     ];
     const bDate = new Date(...bParams);
     return props.order === "DESC"

js/src/components/Group/JoinGroupWithAccount.vue

@@ -22,7 +22,7 @@ const props = defineProps<{
   preferredUsername: string;
 }>();
 
-const { group } = useGroup(props.preferredUsername);
+const { group } = useGroup(computed(() => props.preferredUsername));
 
 const { t } = useI18n({ useScope: "global" });
 

js/src/components/Local/MoreContent.vue

@@ -86,6 +86,8 @@ const imageSource = computed(
     rgba(2, 0, 36, 0.75) 90%,
     rgba(2, 0, 36, 0.85) 100%
   );
-  transition: opacity 0.1s ease-in-out, visibility 0.1s ease-in-out;
+  transition:
+    opacity 0.1s ease-in-out,
+    visibility 0.1s ease-in-out;
 }
 </style>

js/src/components/Participation/ConfirmParticipation.vue

@@ -90,9 +90,9 @@ const { onDone, onError, mutate } = useMutation<{
   confirmParticipation: IParticipant;
 }>(CONFIRM_PARTICIPATION);
 
-mutate({
+mutate(() => ({
   token: props.token,
-});
+}));
 
 onDone(async ({ data }) => {
   participation.value = data?.confirmParticipation;

js/src/components/Participation/ParticipationWithAccount.vue

@@ -17,7 +17,7 @@ const props = defineProps<{
   uuid: string;
 }>();
 
-const { event } = useFetchEvent(props.uuid);
+const { event } = useFetchEvent(computed(() => props.uuid));
 
 const { t } = useI18n({ useScope: "global" });
 

js/src/components/Participation/ParticipationWithoutAccount.vue

@@ -156,7 +156,7 @@ const { anonymousActorId } = useAnonymousActorId();
 const props = defineProps<{
   uuid: string;
 }>();
-const { event, loading } = useFetchEventBasic(props.uuid);
+const { event, loading } = useFetchEventBasic(computed(() => props.uuid));
 
 const { t, locale } = useI18n({ useScope: "global" });
 

js/src/components/Participation/UnloggedParticipation.vue

@@ -104,7 +104,7 @@ import { useI18n } from "vue-i18n";
 
 const props = defineProps<{ uuid: string }>();
 
-const { event } = useFetchEvent(props.uuid);
+const { event } = useFetchEvent(computed(() => props.uuid));
 
 const { anonymousParticipationConfig } = useAnonymousParticipationConfig();
 

js/src/components/Resource/FolderItem.vue

@@ -49,7 +49,7 @@ import RouteName from "@/router/name";
 import { IMinimalActor, usernameWithDomain } from "@/types/actor";
 import ResourceDropdown from "./ResourceDropdown.vue";
 import { UPDATE_RESOURCE } from "@/graphql/resources";
-import { inject, ref } from "vue";
+import { ComputedRef, computed, inject, ref } from "vue";
 import { formatDateTimeString } from "@/filters/datetime";
 import { useMutation } from "@vue/apollo-composable";
 import { resourcePathArray } from "@/components/Resource/utils";
@@ -73,11 +73,11 @@ const emit = defineEmits<{
 
 const list = ref([]);
 
-const groupObject: Record<string, unknown> = {
+const groupObject: ComputedRef<Record<string, unknown>> = computed(() => ({
   name: `folder-${props.resource?.title}`,
   pull: false,
   put: ["resources"],
-};
+}));
 
 const onChange = async (evt: any) => {
   if (evt.added && evt.added.element) {

js/src/components/Resource/ResourceSelector.vue

@@ -92,14 +92,17 @@ const emit = defineEmits(["update-resource", "close-move-modal"]);
 
 const { t } = useI18n({ useScope: "global" });
 
+const initialResourceProp = computed(() => props.initialResource);
+const usernameProp = computed(() => props.username);
+
 const resourcePath = reactive<{
   path: string | undefined;
   username: string;
   id: string | undefined;
 }>({
-  id: props.initialResource.parent?.id,
-  path: props.initialResource.parent?.path,
-  username: props.username,
+  id: initialResourceProp.value.parent?.id,
+  path: initialResourceProp.value.parent?.path,
+  username: usernameProp.value,
 });
 
 const RESOURCES_PER_PAGE = 10;
@@ -111,27 +114,30 @@ const { result: resourceResult, refetch } = useQuery<{ resource: IResource }>(
     if (resourcePath?.path) {
       return {
         path: resourcePath?.path,
-        username: props.username,
+        username: usernameProp.value,
         page: page.value,
         limit: RESOURCES_PER_PAGE,
       };
     }
-    return { path: "/", username: props.username };
+    return { path: "/", username: usernameProp.value };
   }
 );
 
 const resource = computed(() => resourceResult.value?.resource);
 
 const goDown = (element: IResource): void => {
-  if (element.type === "folder" && element.id !== props.initialResource.id) {
+  if (
+    element.type === "folder" &&
+    element.id !== initialResourceProp.value.id
+  ) {
     resourcePath.id = element.id;
     resourcePath.path = element.path;
     console.debug("Gone into folder", resourcePath);
   }
 };
 
-watch(props.initialResource, () => {
-  if (props.initialResource) {
+watch(initialResourceProp, () => {
+  if (initialResourceProp.value) {
     resourcePath.id = props.initialResource?.parent?.id;
     resourcePath.path = props.initialResource?.parent?.path;
     refetch();
@@ -144,21 +150,21 @@ const updateResource = (): void => {
   emit(
     "update-resource",
     {
-      id: props.initialResource.id,
-      title: props.initialResource.title,
+      id: initialResourceProp.value.id,
+      title: initialResourceProp.value.title,
       parent: parent,
       path: parent?.path ?? "/",
     },
-    props.initialResource.parent
+    initialResourceProp.value.parent
   );
 };
 
 const moveDisabled = computed((): boolean | undefined => {
   return (
-    (props.initialResource.parent &&
+    (initialResourceProp.value.parent &&
       resourcePath &&
-      props.initialResource.parent.path === resourcePath.path) ||
-    (props.initialResource.parent === undefined &&
+      initialResourceProp.value.parent.path === resourcePath.path) ||
+    (initialResourceProp.value.parent === undefined &&
       resourcePath &&
       resourcePath.path === "/")
   );

js/src/components/Search/EventMarkerMap.vue

@@ -10,7 +10,7 @@
     >
       <event-card
         v-if="instanceOfIEvent(activeElement)"
-        :event="(activeElement as IEvent)"
+        :event="activeElement as IEvent"
         mode="column"
         :options="{
           isRemoteEvent: activeElement.__typename === 'EventResult',
@@ -19,7 +19,7 @@
       />
       <group-card
         v-else
-        :group="(activeElement as IGroup)"
+        :group="activeElement as IGroup"
         mode="column"
         :isRemoteGroup="activeElement.__typename === 'GroupResult'"
         :isLoggedIn="isLoggedIn"
@@ -31,7 +31,7 @@
     >
       <event-card
         v-if="instanceOfIEvent(activeElement)"
-        :event="(activeElement as IEvent)"
+        :event="activeElement as IEvent"
         mode="column"
         :options="{
           isRemoteEvent: activeElement.__typename === 'EventResult',
@@ -40,7 +40,7 @@
       />
       <group-card
         v-else
-        :group="(activeElement as IGroup)"
+        :group="activeElement as IGroup"
         mode="column"
         :isRemoteGroup="activeElement.__typename === 'GroupResult'"
         :isLoggedIn="isLoggedIn"
@@ -330,7 +330,11 @@ watch([markers, eventMarkers, groupMarkers], () => {
 
   text-align: center;
   border-radius: 15px;
-  font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
+  font:
+    12px "Helvetica Neue",
+    Arial,
+    Helvetica,
+    sans-serif;
 }
 
 .marker-cluster span {

js/src/components/TextEditor.vue

@@ -325,13 +325,18 @@ const transformPastedHTML = (html: string): string => {
   return html;
 };
 
+const ariaLabel = computed(() => props.ariaLabel);
+const headingLevel = computed(() => props.headingLevel);
+const placeholder = computed(() => props.placeholder);
+const value = computed(() => props.modelValue);
+
 const { t } = useI18n({ useScope: "global" });
 
 const editor = useEditor({
   editorProps: {
     attributes: {
       "aria-multiline": isShortMode.value.toString(),
-      "aria-label": props.ariaLabel ?? "",
+      "aria-label": ariaLabel.value ?? "",
       role: "textbox",
       class:
         "prose dark:prose-invert prose-sm lg:prose-lg xl:prose-xl bg-zinc-50 dark:bg-zinc-700 focus:outline-none !max-w-full",
@@ -342,7 +347,7 @@ const editor = useEditor({
     Blockquote,
     BulletList,
     Heading.configure({
-      levels: props.headingLevel,
+      levels: headingLevel.value,
     }),
     Document,
     Paragraph,
@@ -366,18 +371,16 @@ const editor = useEditor({
       submit: () => emit("submit"),
     }),
     Placeholder.configure({
-      placeholder: props.placeholder ?? t("Write something"),
+      placeholder: placeholder.value ?? t("Write something"),
     }),
   ],
   injectCSS: false,
-  content: props.modelValue,
+  content: value.value,
   onUpdate: () => {
     emit("update:modelValue", editor.value?.getHTML());
   },
 });
 
-const value = computed(() => props.modelValue);
-
 watch(value, (val: string) => {
   if (!editor.value) return;
   if (val !== editor.value.getHTML()) {
@@ -479,7 +482,9 @@ onBeforeUnmount(() => {
 @import "./Editor/style.scss";
 
 .menubar {
-  transition: visibility 0.2s 0.4s, opacity 0.2s 0.4s;
+  transition:
+    visibility 0.2s 0.4s,
+    opacity 0.2s 0.4s;
 
   &__button {
     font-weight: bold;

js/src/components/core/CustomDialog.vue

@@ -84,14 +84,19 @@ const emit = defineEmits(["confirm", "cancel", "close"]);
 
 const { t } = useI18n({ useScope: "global" });
 
+const hasInput = computed(() => props.hasInput);
+const onConfirm = computed(() => props.onConfirm);
+const onCancel = computed(() => props.onCancel);
+const inputAttrs = computed(() => props.inputAttrs);
+
 // const modalOpened = ref(false);
 
-const prompt = ref<string>(props.hasInput ? props.inputAttrs?.value ?? "" : "");
+const prompt = ref<string>(hasInput.value ? inputAttrs.value.value ?? "" : "");
 const input = ref();
 
 // https://github.com/oruga-ui/oruga/issues/339
 const promptInputComp = computed(() => input.value?.$refs.input);
-if (props.hasInput) {
+if (hasInput.value) {
   useFocus(promptInputComp, { initialValue: true });
 }
 
@@ -128,7 +133,7 @@ const confirm = () => {
       return;
     }
   }
-  props.onConfirm(prompt.value);
+  onConfirm.value(prompt.value);
   close();
 };
 
@@ -144,8 +149,8 @@ const close = () => {
  */
 const cancel = (source: string) => {
   emit("cancel", source);
-  if (props?.onCancel) {
-    props?.onCancel(source);
+  if (onCancel.value) {
+    onCancel.value(source);
   }
   close();
 };