settings and model dialogs

2026-01-01 04:10:06 -05:00 · 2024-09-21 12:46:54 +02:00
parent ed4592ae0c
commit 55bd417105
39 changed files with 531 additions and 199 deletions
--- a/vue3/package.json
+++ b/vue3/package.json
@@ -16,7 +16,7 @@
    "luxon": "^3.4.4",
    "mavon-editor": "^3.0.1",
    "pinia": "^2.1.7",
-    "vue": "^3.4.31",
+    "vue": "^3.5.7",
    "vue-i18n": "9",
    "vue-router": "4",
    "vue-simple-calendar": "^7.1.0",
--- a/vue3/src/components/buttons/BtnCopy.vue
+++ b/vue3/src/components/buttons/BtnCopy.vue
@@ -0,0 +1,44 @@
+<template>
+
+    <v-btn  ref="copyBtn" :color="color" :size="size" :density="density" @click="clickCopy()">
+        <v-icon icon="$copy"></v-icon>
+        <v-tooltip v-model="showToolip" :target="btn" location="top">
+            <v-icon icon="$copy"></v-icon>
+            Copied!
+        </v-tooltip>
+    </v-btn>
+
+</template>
+
+<script setup lang="ts">
+
+import {useClipboard} from "@vueuse/core";
+import {ref, useTemplateRef} from "vue";
+
+const {copy} = useClipboard()
+
+const props = defineProps({
+    copyValue: {type: String, default: ''},
+    color: {type: String, default: 'success'},
+    size: {type: String, default: 'default'},
+    density: {type: String, default: 'default'},
+
+})
+
+const btn = useTemplateRef('copyBtn')
+const showToolip = ref(false)
+
+function clickCopy() {
+    copy(props.copyValue)
+    showToolip.value = true
+    setTimeout(() => {
+        showToolip.value = false
+    }, 3000)
+}
+
+</script>
+
+
+<style scoped>
+
+</style>
--- a/vue3/src/components/dialogs/ModelEditorDialog.vue
+++ b/vue3/src/components/dialogs/ModelEditorDialog.vue
@@ -1,6 +1,8 @@
 <template>
    <v-dialog max-width="600" activator="parent" v-model="dialog">
        <access-token-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == SupportedModels.AccessToken"></access-token-editor>
+        <invite-link-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == SupportedModels.InviteLink"></invite-link-editor>
+        <user-space-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == SupportedModels.UserSpace"></user-space-editor>
    </v-dialog>
 </template>

@@ -10,9 +12,13 @@
 import {PropType, ref} from "vue";
 import AccessTokenEditor from "@/components/model_editors/AccessTokenEditor.vue";
 import {AccessToken, Food} from "@/openapi";
+import InviteLinkEditor from "@/components/model_editors/InviteLinkEditor.vue";
+import UserSpaceEditor from "@/components/model_editors/UserSpaceEditor.vue";

 enum SupportedModels {
-    AccessToken = 'AccessToken'
+    AccessToken = 'AccessToken',
+    InviteLink = 'InviteLink',
+    UserSpace = 'UserSpace',
 }

 const emit = defineEmits(['create', 'save', 'delete'])
@@ -21,7 +27,6 @@ const props = defineProps({
    model: {
        type: String,
        required: true,
-        validator: (val) => ['AccessToken'].includes(val)
    },
    item: {default: null},
    closeAfterCreate: {default: true},
--- a/vue3/src/components/model_editors/AccessTokenEditor.vue
+++ b/vue3/src/components/model_editors/AccessTokenEditor.vue
@@ -11,7 +11,7 @@
                        <v-text-field label="Token" v-model="editingObj.token" disabled></v-text-field>
                    </v-col>
                    <v-col cols="2" >
-                        <v-btn color="info" variant="tonal" icon="$copy" @click="copy(editingObj.token)"></v-btn>
+                        <btn-copy :copy-value="editingObj.token" class="me-1"></btn-copy>
                    </v-col>
                </v-row>

@@ -20,10 +20,10 @@
            </v-form>
        </v-card-text>
        <v-card-actions>
-            <v-btn color="save" prepend-icon="$save" @click="saveObject">{{ isUpdate ? $t('Save') : $t('Create') }}</v-btn>
            <v-btn color="delete" prepend-icon="$delete" v-if="isUpdate">{{ $t('Delete') }}
                <delete-confirm-dialog :object-name="objectName" @delete="deleteObject"></delete-confirm-dialog>
            </v-btn>
+            <v-btn color="save" prepend-icon="$save" @click="saveObject">{{ isUpdate ? $t('Save') : $t('Create') }}</v-btn>
        </v-card-actions>
    </v-card>
 </template>
@@ -38,6 +38,7 @@ import {useI18n} from "vue-i18n";
 import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
 import {DateTime} from "luxon";
 import {useClipboard} from "@vueuse/core";
+import BtnCopy from "@/components/buttons/BtnCopy.vue";

 const {t} = useI18n()
 const {copy} = useClipboard()
@@ -108,7 +109,7 @@ async function deleteObject() {
    let api = new ApiApi()
    api.apiAccessTokenDestroy({id: editingObj.value.id}).then(r => {
        editingObj.value = {} as AccessToken
-        emit('delete')
+        emit('delete', editingObj.value)
    }).catch(err => {
        useMessageStore().addError(ErrorMessageType.DELETE_ERROR, err)
    })
--- a/vue3/src/components/model_editors/InviteLinkEditor.vue
+++ b/vue3/src/components/model_editors/InviteLinkEditor.vue
@@ -0,0 +1,131 @@
+<template>
+    <v-card>
+        <v-card-title>
+            {{ $t(OBJ_LOCALIZATION_KEY) }}
+            <v-btn class="float-right" icon="$close" variant="plain" @click="emit('close')" v-if="dialog"></v-btn>
+        </v-card-title>
+        <v-card-text>
+            <v-form>
+
+                <v-text-field :label="$t('Email')" v-model="editingObj.email"></v-text-field>
+                <v-select :label="$t('Role')" :items="groups" item-value="id" item-title="name" return-object v-model="editingObj.group"></v-select>
+                <v-date-input :label="$t('Valid Until')" v-model="editingObj.validUntil"></v-date-input>
+                <v-textarea :label="$t('Note')" v-model="editingObj.internalNote"></v-textarea>
+                <v-checkbox :label="$t('Reusable')" v-model="editingObj.reusable"></v-checkbox>
+
+            </v-form>
+        </v-card-text>
+        <v-card-actions>
+            <v-btn color="delete" prepend-icon="$delete" v-if="isUpdate">{{ $t('Delete') }}
+                <delete-confirm-dialog :object-name="objectName" @delete="deleteObject"></delete-confirm-dialog>
+            </v-btn>
+            <v-btn color="save" prepend-icon="$save" @click="saveObject">{{ isUpdate ? $t('Save') : $t('Create') }}</v-btn>
+        </v-card-actions>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+
+import {VDateInput} from 'vuetify/labs/VDateInput' //TODO remove once component is out of labs
+import {computed, onMounted, ref} from "vue";
+import {AccessToken, ApiApi, Group, InviteLink} from "@/openapi";
+import DeleteConfirmDialog from "@/components/dialogs/DeleteConfirmDialog.vue";
+import {useI18n} from "vue-i18n";
+import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
+import {DateTime} from "luxon";
+import {useClipboard} from "@vueuse/core";
+
+const {t} = useI18n()
+const {copy} = useClipboard()
+
+const emit = defineEmits(['create', 'save', 'delete', 'close'])
+
+const props = defineProps({
+    item: {type: {} as InviteLink, required: false},
+    dialog: {type: Boolean, default: false}
+})
+
+const OBJ_LOCALIZATION_KEY = 'Invite_Link'
+const editingObj = ref({} as InviteLink)
+const loading = ref(false)
+
+// object specific data (for selects/display)
+const groups = ref([] as Group[])
+
+
+/**
+ * checks if given object has ID property to determine if it needs to be updated or created
+ */
+const isUpdate = computed(() => {
+    return editingObj.value.id !== undefined
+})
+
+/**
+ * display name for object in headers/delete dialog/...
+ */
+const objectName = computed(() => {
+    return isUpdate ? `${t(OBJ_LOCALIZATION_KEY)} ${editingObj.value.token}` : `${t(OBJ_LOCALIZATION_KEY)} (${t('New')})`
+})
+
+onMounted(() => {
+    const api = new ApiApi()
+
+    api.apiGroupList().then(r => {
+        groups.value = r
+
+
+        if (props.item != null) {
+            editingObj.value = props.item
+        } else {
+            // functions to populate defaults
+            editingObj.value.validUntil = DateTime.now().plus({month: 1}).toJSDate()
+            editingObj.value.group = groups.value[0]
+        }
+
+    }).catch(err => {
+        useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
+    })
+})
+
+/**
+ * saves the edited object in the database
+ */
+async function saveObject() {
+    let api = new ApiApi()
+    if (isUpdate.value) {
+        api.apiInviteLinkUpdate({id: editingObj.value.id, inviteLink: editingObj.value}).then(r => {
+            editingObj.value = r
+            emit('save', r)
+            useMessageStore().addPreparedMessage(PreparedMessage.UPDATE_SUCCESS)
+        }).catch(err => {
+            useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
+        })
+    } else {
+        api.apiInviteLinkCreate({inviteLink: editingObj.value}).then(r => {
+            editingObj.value = r
+            emit('create', r)
+            useMessageStore().addPreparedMessage(PreparedMessage.CREATE_SUCCESS)
+        }).catch(err => {
+            useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
+        })
+    }
+}
+
+/**
+ * deletes the editing object from the database
+ */
+async function deleteObject() {
+    let api = new ApiApi()
+    api.apiInviteLinkDestroy({id: editingObj.value.id}).then(r => {
+        editingObj.value = {} as InviteLink
+        emit('delete')
+    }).catch(err => {
+        useMessageStore().addError(ErrorMessageType.DELETE_ERROR, err)
+    })
+}
+
+</script>
+
+<style scoped>
+
+</style>
--- a/vue3/src/components/model_editors/UserSpaceEditor.vue
+++ b/vue3/src/components/model_editors/UserSpaceEditor.vue
@@ -0,0 +1,112 @@
+<template>
+    <v-card>
+        <v-card-title>
+            {{ $t(OBJ_LOCALIZATION_KEY) }}
+            <v-btn class="float-right" icon="$close" variant="plain" @click="emit('close')" v-if="dialog"></v-btn>
+        </v-card-title>
+        <v-card-text>
+            <v-form>
+                <v-select :label="$t('Role')" :items="groups" item-value="id" item-title="name" return-object multiple v-model="editingObj.groups"></v-select>
+            </v-form>
+        </v-card-text>
+        <v-card-actions>
+            <v-btn color="delete" prepend-icon="$delete" v-if="isUpdate">{{ $t('Delete') }}
+                <delete-confirm-dialog :object-name="objectName" @delete="deleteObject"></delete-confirm-dialog>
+            </v-btn>
+            <v-btn color="save" prepend-icon="$save" @click="saveObject">{{ isUpdate ? $t('Save') : $t('Create') }}</v-btn>
+        </v-card-actions>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+
+import {computed, onMounted, ref} from "vue";
+import {AccessToken, ApiApi, Group, InviteLink, UserSpace} from "@/openapi";
+import DeleteConfirmDialog from "@/components/dialogs/DeleteConfirmDialog.vue";
+import {useI18n} from "vue-i18n";
+import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
+import {DateTime} from "luxon";
+import {useClipboard} from "@vueuse/core";
+import {tr} from "vuetify/locale";
+
+const {t} = useI18n()
+const {copy} = useClipboard()
+
+const emit = defineEmits(['create', 'save', 'delete', 'close'])
+
+const props = defineProps({
+    item: {type: {} as UserSpace, required: true},
+    dialog: {type: Boolean, default: false}
+})
+
+const OBJ_LOCALIZATION_KEY = 'Invite_Link'
+const editingObj = ref({} as UserSpace)
+const loading = ref(false)
+
+// object specific data (for selects/display)
+const groups = ref([] as Group[])
+
+
+/**
+ * checks if given object has ID property to determine if it needs to be updated or created
+ */
+const isUpdate = computed(() => {
+    return editingObj.value.id !== undefined
+})
+
+/**
+ * display name for object in headers/delete dialog/...
+ */
+const objectName = computed(() => {
+    return isUpdate ? `${t(OBJ_LOCALIZATION_KEY)} ${editingObj.value.token}` : `${t(OBJ_LOCALIZATION_KEY)} (${t('New')})`
+})
+
+onMounted(() => {
+    const api = new ApiApi()
+    api.apiGroupList().then(r => {
+        groups.value = r
+    }).catch(err => {
+        useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
+    })
+
+    if (props.item != null) {
+        editingObj.value = props.item
+    } else {
+        console.error('UserSpaceEditor cannot create items')
+    }
+})
+
+/**
+ * saves the edited object in the database
+ */
+async function saveObject() {
+    let api = new ApiApi()
+    if (isUpdate.value) {
+        api.apiUserSpacePartialUpdate({id: editingObj.value.id, patchedUserSpace: editingObj.value}).then(r => {
+            editingObj.value = r
+            emit('save', r)
+            useMessageStore().addPreparedMessage(PreparedMessage.UPDATE_SUCCESS)
+        }).catch(err => {
+            useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
+        })
+    }
+}
+
+/**
+ * deletes the editing object from the database
+ */
+async function deleteObject() {
+    let api = new ApiApi()
+    api.apiUserSpaceDestroy({id: editingObj.value.id}).then(r => {
+        editingObj.value = {} as UserSpace
+        emit('delete', editingObj.value)
+    }).catch(err => {
+        useMessageStore().addError(ErrorMessageType.DELETE_ERROR, err)
+    })
+}
+
+</script>
+
+<style scoped>
+
+</style>
--- a/vue3/src/components/settings/SpaceMemberSettings.vue
+++ b/vue3/src/components/settings/SpaceMemberSettings.vue
@@ -1,75 +1,40 @@
 <template>
    <v-form>
        <p class="text-h6">{{ $t('SpaceMembers') }}</p>
-        <v-divider class="mb-3"></v-divider>
+        <v-divider></v-divider>
+        <p class="text-subtitle-2">{{$t('SpaceMemberHelp')}}</p>

-        <v-data-table :items="spaceUserSpaces" :headers="userTableHeaders" density="compact" :hide-default-footer="spaceUserSpaces.length < 10">
+        <v-data-table :items="spaceUserSpaces" :headers="userTableHeaders" density="compact" :hide-default-footer="spaceUserSpaces.length < 10" class="mt-3">
            <template #item.groups="{item}">
                <span v-for="g in item.groups">{{ g.name }}&nbsp;</span>
            </template>

            <template #item.edit="{item}">
-                <v-btn icon="$edit" color="edit" size="small" variant="tonal" @click="spaceUserEditDialogUserSpace = Object.assign({}, item); spaceUserEditDialogState = true"></v-btn>
+                <v-btn color="edit" size="small" v-if="item.user.id != useUserPreferenceStore().activeSpace.createdBy.id">
+                    <v-icon icon="$edit"></v-icon>
+                    <model-editor-dialog model="UserSpace" :item="item" @delete="deleteUserSpace(item)" class="mt-2"></model-editor-dialog>
+                </v-btn>
+                <v-chip color="edit" v-else>{{$t('Owner')}}</v-chip>
            </template>
        </v-data-table>

-        <v-dialog v-model="spaceUserEditDialogState" max-width="400px">
-            <v-card>
-                <v-card-title>{{ $t('User') }}: {{ spaceUserEditDialogUserSpace.user.displayName }}</v-card-title>
-                <v-card-subtitle>{{ $t('Created') }} {{ DateTime.fromJSDate(spaceUserEditDialogUserSpace.createdAt).toLocaleString(DateTime.DATETIME_MED) }}</v-card-subtitle>
-                <v-card-text>
-                    <v-form>
-                        <v-select :items="groups" item-value="id" item-title="name" v-model="spaceUserEditDialogUserSpace.groups" multiple return-object></v-select>
-                    </v-form>
-                    <div v-if="spaceUserEditDialogUserSpace.internalNote">
-                        <p>{{ $t('Note') }}</p>
-                        <span>{{ spaceUserEditDialogUserSpace.internalNote }}</span>
-                    </div>
-                </v-card-text>
-                <v-card-actions>
-                    <v-btn color="cancel" @click="spaceUserEditDialogState = false">{{ $t('Cancel') }}</v-btn>
-                    <v-btn color="save" prepend-icon="$save" @click="updateUserSpace(spaceUserEditDialogUserSpace)">{{ $t('Save') }}</v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
-
        <p class="text-h6 mt-3">{{ $t('Invites') }}
-            <v-btn size="small" class="float-right" prepend-icon="$create" color="create" @click="inviteLinkDialogObject = {} as InviteLink;inviteLinkDialogState = true">{{ $t('New') }}</v-btn>
+            <v-btn size="small" class="float-right" prepend-icon="$create" color="create">
+                {{ $t('New') }}
+                <model-editor-dialog model="InviteLink" @delete="deleteInviteLink" @create="item  => spaceInviteLinks.push(item)" class="mt-2"></model-editor-dialog>
+            </v-btn>
        </p>
        <v-divider class="mb-3"></v-divider>

        <v-data-table :items="spaceInviteLinks" :headers="inviteTableHeaders" density="compact" :hide-default-footer="spaceInviteLinks.length < 10">
            <template #item.edit="{item}">
-                <v-btn icon="$copy" color="success" size="small" variant="tonal" @click="copyInviteLink(item)"></v-btn>
-                <v-btn icon="$edit" color="edit" size="small" variant="tonal" @click="inviteLinkDialogObject = Object.assign({}, item); inviteLinkDialogState = true"></v-btn>
-            </template>
-
-        </v-data-table>
-
-        <v-dialog v-model="inviteLinkDialogState" max-width="400px">
-            <v-card>
-                <v-card-title>{{ $t('Invites') }}</v-card-title>
-                <v-card-text>
-                    <v-form>
-                        <v-text-field :label="$t('Email')" v-model="inviteLinkDialogObject.email"></v-text-field>
-                        <v-select :label="$t('Role')" :items="groups" item-value="id" item-title="name" return-object v-model="inviteLinkDialogObject.group"></v-select>
-                        <v-date-input :label="$t('Valid Until')" v-model="inviteLinkDialogObject.validUntil"></v-date-input>
-                        <v-textarea :label="$t('Note')" v-model="inviteLinkDialogObject.internalNote"></v-textarea>
-                        <v-checkbox :label="$t('Reusable')" v-model="inviteLinkDialogObject.reusable"></v-checkbox>
-                    </v-form>
-
-                </v-card-text>
-                <v-card-actions>
-                    <v-btn color="cancel" @click="inviteLinkDialogState = false">{{ $t('Cancel') }}</v-btn>
-                    <v-btn color="save" prepend-icon="$save" @click="saveInviteLink(inviteLinkDialogObject)" :loading="inviteLinkDialogLoading">
-                        <span v-if="inviteLinkDialogObject.id == undefined">{{ $t('Create') }}</span>
-                        <span v-if="inviteLinkDialogObject.id != undefined">{{ $t('Update') }}</span>
+                <btn-copy size="small" :copy-value="inviteLinkUrl(item)" class="me-1"></btn-copy>
+                <v-btn color="edit" size="small">
+                    <v-icon icon="$edit"></v-icon>
+                    <model-editor-dialog model="InviteLink" :item="item" @delete="deleteInviteLink(item)" class="mt-2"></model-editor-dialog>
                </v-btn>
-                    <v-btn color="delete" prepend-icon="$delete" @click="deleteInviteLink(inviteLinkDialogObject)" v-if="inviteLinkDialogObject.id != undefined">{{ $t('Delete') }}</v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
-
+            </template>
+        </v-data-table>
    </v-form>
 </template>

@@ -82,21 +47,15 @@ import {ApiApi, Group, InviteLink, UserSpace} from "@/openapi";
 import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
 import {useI18n} from "vue-i18n";
 import {DateTime} from "luxon";
-import {VDateInput} from 'vuetify/labs/VDateInput' //TODO remove once component is out of labs
-import {useClipboard} from "@vueuse/core"; //TODO remove once component is out of labs
+import {useClipboard} from "@vueuse/core";
+import ModelEditorDialog from "@/components/dialogs/ModelEditorDialog.vue";
+import BtnCopy from "@/components/buttons/BtnCopy.vue";
+import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";

 const {t} = useI18n()

 const spaceUserSpaces = ref([] as UserSpace[])
 const spaceInviteLinks = ref([] as InviteLink[])
-const groups = ref([] as Group[])
-
-const spaceUserEditDialogState = ref(false)
-const spaceUserEditDialogUserSpace = ref({} as UserSpace)
-
-const inviteLinkDialogState = ref(false)
-const inviteLinkDialogObject = ref({} as InviteLink)
-const inviteLinkDialogLoading = ref(false)

 const userTableHeaders = [
    {title: t('Username'), key: 'user.username'},
@@ -114,12 +73,6 @@ const inviteTableHeaders = [
 onMounted(() => {
    const api = new ApiApi()

-    api.apiGroupList().then(r => {
-        groups.value = r
-    }).catch(err => {
-        useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
-    })
-
    api.apiUserSpaceList().then(r => {
        spaceUserSpaces.value = r.results
    }).catch(err => {
@@ -134,75 +87,27 @@ onMounted(() => {
 })

 /**
- * update user space in DB and list on client
- * @param userSpace UserSpace object to update
+ * delete userspace from client list (database handled by editor)
+ * @param userSpace UserSpace object that was deleted
 */
-function updateUserSpace(userSpace: UserSpace) {
-    const api = new ApiApi()
-
-    api.apiUserSpacePartialUpdate({id: userSpace.id!, patchedUserSpace: userSpace}).then(r => {
-        spaceUserSpaces.value.splice(spaceUserSpaces.value.indexOf(userSpace), 1, r)
-        useMessageStore().addPreparedMessage(PreparedMessage.UPDATE_SUCCESS)
-    }).catch(err => {
-        useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
-    })
+function deleteUserSpace(userSpace: UserSpace) {
+    spaceUserSpaces.value.splice(spaceUserSpaces.value.indexOf(userSpace) - 1, 1)
 }

 /**
- * create or update the invite link, refresh invite link list on client
- * @param inviteLink InviteLink object to update
- */
-function saveInviteLink(inviteLink: InviteLink) {
-    const api = new ApiApi()
-
-    inviteLinkDialogLoading.value = true
-
-    if (inviteLink.id == undefined) {
-        api.apiInviteLinkCreate({inviteLink: inviteLink}).then(r => {
-            inviteLinkDialogState.value = false
-            spaceInviteLinks.value.push(r)
-            useMessageStore().addPreparedMessage(PreparedMessage.CREATE_SUCCESS)
-        }).catch(err => {
-            useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
-        }).finally(() => {
-            inviteLinkDialogLoading.value = false
-        })
-    } else {
-        api.apiInviteLinkUpdate({inviteLink: inviteLink, id: inviteLink.id}).then(r => {
-            inviteLinkDialogState.value = false
-            spaceInviteLinks.value.splice(spaceInviteLinks.value.indexOf(inviteLink), 1, r)
-            useMessageStore().addPreparedMessage(PreparedMessage.UPDATE_SUCCESS)
-        }).catch(err => {
-            useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
-        }).finally(() => {
-            inviteLinkDialogLoading.value = false
-        })
-    }
-
-}
-
-/**
- * delete invite link from database and client
- * @param inviteLink InviteLink object to delete
+ * delete invite link from client list (database handled by editor)
+ * @param inviteLink InviteLink object that was deleted
 */
 function deleteInviteLink(inviteLink: InviteLink) {
-    const api = new ApiApi()
-    api.apiInviteLinkDestroy({id: inviteLink.id}).then(r => {
-        inviteLinkDialogState.value = false
    spaceInviteLinks.value.splice(spaceInviteLinks.value.indexOf(inviteLink) - 1, 1)
-        useMessageStore().addPreparedMessage(PreparedMessage.DELETE_SUCCESS)
-    }).catch(err => {
-        useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
-    })
 }

 /**
- * copy invite link with url to clipboard
- * @param inviteLink InviteLink object to copy
+ * returns url for invite link
+ * @param inviteLink InviteLink object to create url for
 */
-function copyInviteLink(inviteLink: InviteLink) {
-    const {copy} = useClipboard()
-    copy(`${location.protocol}//${location.host}/invite/${inviteLink.uuid}`)
+function inviteLinkUrl(inviteLink: InviteLink) {
+    return `${location.protocol}//${location.host}/invite/${inviteLink.uuid}`
 }

 </script>
--- a/vue3/src/locales/ar.json
+++ b/vue3/src/locales/ar.json
@@ -175,6 +175,7 @@
  "OnHand_help": "",
  "Open": "",
  "Options": "",
+  "Owner": "",
  "Page": "",
  "Parameter": "",
  "Parent": "",
@@ -237,6 +238,7 @@
  "Single": "",
  "Size": "",
  "Sort_by_new": "",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Starting_Day": "",
--- a/vue3/src/locales/bg.json
+++ b/vue3/src/locales/bg.json
@@ -168,6 +168,7 @@
  "OnHand_help": "Храната е в инвентара и няма да бъде добавена автоматично към списък за пазаруване. Състоянието на ръка се споделя с пазаруващите потребители.",
  "Open": "Отвори",
  "Options": "Настроики",
+  "Owner": "",
  "Page": "Страница",
  "Parameter": "Параметър",
  "Parent": "Родител",
@@ -230,6 +231,7 @@
  "Single": "Единичен",
  "Size": "Размер",
  "Sort_by_new": "Сортиране по ново",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Starting_Day": "Начален ден от седмицата",
--- a/vue3/src/locales/ca.json
+++ b/vue3/src/locales/ca.json
@@ -237,6 +237,7 @@
  "Options": "",
  "OrderInformation": "",
  "Original_Text": "",
+  "Owner": "",
  "Page": "",
  "Parameter": "",
  "Parent": "",
@@ -315,6 +316,7 @@
  "Size": "",
  "Social_Authentication": "",
  "Sort_by_new": "Ordenar a partir del més nou",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Space_Cosmetic_Settings": "",
--- a/vue3/src/locales/cs.json
+++ b/vue3/src/locales/cs.json
@@ -235,6 +235,7 @@
  "Options": "Možnosti",
  "OrderInformation": "Položky jsou seřazeny podle čísel od malých po velké.",
  "Original_Text": "Původní text",
+  "Owner": "",
  "Page": "Stránka",
  "Parameter": "Parametr",
  "Parent": "Nadřazená",
@@ -311,6 +312,7 @@
  "Size": "Velikost",
  "Social_Authentication": "Přihlašování pomocí účtů sociálních sítí",
  "Sort_by_new": "Seřadit od nejnovějšího",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Space_Cosmetic_Settings": "Některá kosmetická nastavení mohou měnit správci prostoru a budou mít přednost před nastavením klienta pro daný prostor.",
--- a/vue3/src/locales/da.json
+++ b/vue3/src/locales/da.json
@@ -220,6 +220,7 @@
  "Options": "Indstillinger",
  "OrderInformation": "Objekter er rangeret fra små til store tal.",
  "Original_Text": "Original tekst",
+  "Owner": "",
  "Page": "Side",
  "Parameter": "Parameter",
  "Parent": "Forælder",
@@ -290,6 +291,7 @@
  "Size": "Størrelse",
  "Social_Authentication": "Social authenticering",
  "Sort_by_new": "Sorter efter nylige",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Split_All_Steps": "Opdel rækker i separate trin.",
--- a/vue3/src/locales/de.json
+++ b/vue3/src/locales/de.json
@@ -239,6 +239,7 @@
  "Options": "Optionen",
  "OrderInformation": "Die Objekte sind von kleinen zu großen Zahlen geordnet.",
  "Original_Text": "Originaler Text",
+  "Owner": "Besitzer",
  "Page": "Seite",
  "Parameter": "Parameter",
  "Parent": "Eltern",
@@ -317,6 +318,7 @@
  "Size": "Größe",
  "Social_Authentication": "Authentifizierung über ein soziales Netzwerk",
  "Sort_by_new": "Nach Neueste sortieren",
+  "SpaceMemberHelp": "Füge Benutzer hinzu indem du Einladungen erstellst und Sie an die gewünschte Person sendest.",
  "SpaceMembers": "Space Mitglieder",
  "SpaceSettings": "Space Einstellungen",
  "Space_Cosmetic_Settings": "Einige optische Einstellungen können von Administratoren des Bereichs geändert werden und setzen die Client-Einstellungen für diesen Bereich außer Kraft.",
--- a/vue3/src/locales/el.json
+++ b/vue3/src/locales/el.json
@@ -212,6 +212,7 @@
  "Open_Data_Slug": "Αναγνωριστικό (Slug) Open Data",
  "Options": "Επιλογές",
  "Original_Text": "Αρχικό κείμενο",
+  "Owner": "",
  "Page": "Σελίδα",
  "Parameter": "Παράμετρος",
  "Parent": "Γονέας",
@@ -282,6 +283,7 @@
  "Size": "Μέγεθος",
  "Social_Authentication": "Ταυτοποίηση μέσω κοινωνικών δικτύων",
  "Sort_by_new": "Ταξινόμηση κατά νέο",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Split_All_Steps": "Διαχωρισμός όλων των γραμμών σε χωριστά βήματα.",
--- a/vue3/src/locales/en.json
+++ b/vue3/src/locales/en.json
@@ -167,6 +167,7 @@
  "Instruction_Replace": "Instruction Replace",
  "Instructions": "Instructions",
  "Internal": "Internal",
+  "Invite_Link": "Invite Link",
  "Invites": "Invites",
  "Key_Ctrl": "Ctrl",
  "Key_Shift": "Shift",
@@ -238,6 +239,7 @@
  "Options": "Options",
  "OrderInformation": "Objects are ordered from small to large numbers.",
  "Original_Text": "Original Text",
+  "Owner": "Owner",
  "Page": "Page",
  "Parameter": "Parameter",
  "Parent": "Parent",
@@ -285,6 +287,7 @@
  "Remove_nutrition_recipe": "Delete nutrition from recipe",
  "Reset": "Reset",
  "Reset_Search": "Reset Search",
+  "Role": "Role",
  "Root": "Root",
  "Save": "Save",
  "Save_and_View": "Save & View",
@@ -317,6 +320,7 @@
  "Size": "Size",
  "Social_Authentication": "Social Authentication",
  "Sort_by_new": "Sort by new",
+  "SpaceMemberHelp": "Add users to your space by creating an Invite Link and sending it to the person you want to add.",
  "SpaceMembers": "Space Members",
  "SpaceSettings": "Space Settings",
  "Space_Cosmetic_Settings": "Some cosmetic settings can be changed by space administrators and will override client settings for that space.",
--- a/vue3/src/locales/es.json
+++ b/vue3/src/locales/es.json
@@ -238,6 +238,7 @@
  "Options": "Opciones",
  "OrderInformation": "Los objetos están ordenados en orden numérico creciente.",
  "Original_Text": "Texto original",
+  "Owner": "",
  "Page": "Página",
  "Parameter": "Parametro",
  "Parent": "Padre",
@@ -314,6 +315,7 @@
  "Size": "Tamaño",
  "Social_Authentication": "Autenticación Social",
  "Sort_by_new": "Ordenar por novedades",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Space_Cosmetic_Settings": "Algunos ajustes de apariencia pueden ser cambiados por los administradores del espacio y anularán los ajustes del cliente para ese espacio.",
--- a/vue3/src/locales/fi.json
+++ b/vue3/src/locales/fi.json
@@ -113,6 +113,7 @@
  "Nutrition": "Ravitsemus",
  "Ok": "Avaa",
  "Open": "Avaa",
+  "Owner": "",
  "Parameter": "Parametri",
  "Parent": "Yläluokka",
  "Period": "Jakso",
@@ -158,6 +159,7 @@
  "Show_as_header": "Näytä otsikkona",
  "Size": "Koko",
  "Sort_by_new": "Lajittele uusien mukaan",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Starting_Day": "Viikon aloituspäivä",
--- a/vue3/src/locales/fr.json
+++ b/vue3/src/locales/fr.json
@@ -237,6 +237,7 @@
  "Options": "Options",
  "OrderInformation": "Les objects sont classés du plus petit au plus grand.",
  "Original_Text": "Texte d’origine",
+  "Owner": "",
  "Page": "Page",
  "Parameter": "Paramètre",
  "Parent": "Parent",
@@ -315,6 +316,7 @@
  "Size": "Taille",
  "Social_Authentication": "Authentification Sociale",
  "Sort_by_new": "Trier par nouveautés",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Space_Cosmetic_Settings": "Certains paramètres cosmétiques peuvent être modifiés par un administrateur de l'espace et seront prioritaires sur les paramètres des utilisateurs pour cet espace.",
--- a/vue3/src/locales/he.json
+++ b/vue3/src/locales/he.json
@@ -238,6 +238,7 @@
  "Options": "אפשרויות",
  "OrderInformation": "המוצרים מוצגים מהמספר הקטן לגדול.",
  "Original_Text": "כיתוב מקורי",
+  "Owner": "",
  "Page": "עמוד",
  "Parameter": "פרמטר",
  "Parent": "הורה",
@@ -316,6 +317,7 @@
  "Size": "גודל",
  "Social_Authentication": "אימות חברתי",
  "Sort_by_new": "סדר ע\"י חדש",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Space_Cosmetic_Settings": "חלק מהגדרות הקוסמטיות יכולות להיות מעודכנות על ידי מנהל המרחב וידרסו את הגדרות הקליינט עבור מרחב זה.",
--- a/vue3/src/locales/hu.json
+++ b/vue3/src/locales/hu.json
@@ -214,6 +214,7 @@
  "Options": "Opciók",
  "OrderInformation": "Az objektumok a kis számoktól a nagy számok felé rendezettek.",
  "Original_Text": "Eredeti szöveg",
+  "Owner": "",
  "Page": "Oldal",
  "Parameter": "Paraméter",
  "Parent": "Szülő",
@@ -283,6 +284,7 @@
  "Single": "Egyetlen",
  "Size": "Méret",
  "Sort_by_new": "Rendezés legújabbak szerint",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Split_All_Steps": "Ossza fel az összes sort különálló lépésekbe.",
--- a/vue3/src/locales/hy.json
+++ b/vue3/src/locales/hy.json
@@ -68,6 +68,7 @@
  "Nutrition": "",
  "Ok": "",
  "Open": "",
+  "Owner": "",
  "Parent": "Ծնող",
  "Plural": "",
  "Preferences": "",
@@ -99,6 +100,7 @@
  "Show_as_header": "Ցույց տալ որպես խորագիր",
  "Size": "",
  "Sort_by_new": "Տեսակավորել ըստ նորերի",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Step": "",
--- a/vue3/src/locales/id.json
+++ b/vue3/src/locales/id.json
@@ -194,6 +194,7 @@
  "OnHand_help": "",
  "Open": "Membuka",
  "Options": "",
+  "Owner": "",
  "Page": "",
  "Parameter": "Parameter",
  "Parent": "Induk",
@@ -260,6 +261,7 @@
  "Size": "Ukuran",
  "Social_Authentication": "",
  "Sort_by_new": "Urutkan berdasarkan baru",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Starting_Day": "",
--- a/vue3/src/locales/is.json
+++ b/vue3/src/locales/is.json
@@ -237,6 +237,7 @@
  "Options": "",
  "OrderInformation": "",
  "Original_Text": "",
+  "Owner": "",
  "Page": "",
  "Parameter": "",
  "Parent": "",
@@ -314,6 +315,7 @@
  "Size": "",
  "Social_Authentication": "",
  "Sort_by_new": "",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Space_Cosmetic_Settings": "",
--- a/vue3/src/locales/it.json
+++ b/vue3/src/locales/it.json
@@ -200,6 +200,7 @@
  "Open": "Apri",
  "Options": "Opzioni",
  "Original_Text": "Testo originale",
+  "Owner": "",
  "Page": "Pagina",
  "Parameter": "Parametro",
  "Parent": "Primario",
@@ -268,6 +269,7 @@
  "Size": "Dimensione",
  "Social_Authentication": "Autenticazione social",
  "Sort_by_new": "Prima i nuovi",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Split_All_Steps": "Divide tutte le righe in step separati.",
--- a/vue3/src/locales/lt.json
+++ b/vue3/src/locales/lt.json
@@ -218,6 +218,7 @@
  "Options": "",
  "OrderInformation": "",
  "Original_Text": "",
+  "Owner": "",
  "Page": "",
  "Parameter": "",
  "Parent": "",
@@ -288,6 +289,7 @@
  "Size": "",
  "Social_Authentication": "",
  "Sort_by_new": "Rūšiuoti pagal naujumą",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Split_All_Steps": "",
--- a/vue3/src/locales/nb_NO.json
+++ b/vue3/src/locales/nb_NO.json
@@ -210,6 +210,7 @@
  "Open_Data_Slug": "Åpne data Slug",
  "Options": "",
  "Original_Text": "Orginal tekst",
+  "Owner": "",
  "Page": "",
  "Parameter": "Parameter",
  "Parent": "Forelder",
@@ -280,6 +281,7 @@
  "Size": "Størrelse",
  "Social_Authentication": "",
  "Sort_by_new": "Sorter etter nyest",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Split_All_Steps": "",
--- a/vue3/src/locales/nl.json
+++ b/vue3/src/locales/nl.json
@@ -214,6 +214,7 @@
  "Open_Data_Slug": "Open Data Slug",
  "Options": "Opties",
  "Original_Text": "Originele tekst",
+  "Owner": "",
  "Page": "Pagina",
  "Parameter": "Parameter",
  "Parent": "Ouder",
@@ -284,6 +285,7 @@
  "Size": "Grootte",
  "Social_Authentication": "Authenticeren met sociale media-account",
  "Sort_by_new": "Sorteer op nieuw",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Split_All_Steps": "Splits alle rijen in aparte stappen.",
--- a/vue3/src/locales/pl.json
+++ b/vue3/src/locales/pl.json
@@ -239,6 +239,7 @@
  "Options": "Opcje",
  "OrderInformation": "Obiekty są uporządkowane od małych do dużych liczb.",
  "Original_Text": "Tekst oryginalny",
+  "Owner": "",
  "Page": "Strona",
  "Parameter": "Parametr",
  "Parent": "Nadrzędny",
@@ -317,6 +318,7 @@
  "Size": "Rozmiar",
  "Social_Authentication": "Uwierzytelnianie społecznościowe",
  "Sort_by_new": "Sortuj według nowych",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Space_Cosmetic_Settings": "Administratorzy przestrzeni mogą zmienić niektóre ustawienia kosmetyczne, które zastąpią ustawienia klienta dla tej przestrzeni.",
--- a/vue3/src/locales/pt.json
+++ b/vue3/src/locales/pt.json
@@ -163,6 +163,7 @@
  "OnHand_help": "",
  "Open": "Abrir",
  "Original_Text": "Texto original",
+  "Owner": "",
  "Page": "Página",
  "Parameter": "Parâmetro",
  "Parent": "Parente",
@@ -224,6 +225,7 @@
  "Show_as_header": "Mostrar como cabeçalho",
  "Size": "Tamanho",
  "Sort_by_new": "Ordenar por mais recente",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Starting_Day": "Dia de início da semana",
--- a/vue3/src/locales/pt_BR.json
+++ b/vue3/src/locales/pt_BR.json
@@ -227,6 +227,7 @@
  "Open_Data_Slug": "Identificador de Dados Abertos",
  "Options": "Opções",
  "Original_Text": "Texto Original",
+  "Owner": "",
  "Page": "Página",
  "Parameter": "Parâmetro",
  "Parent": "Pai",
@@ -301,6 +302,7 @@
  "Single": "Simples",
  "Size": "Tamanho",
  "Sort_by_new": "Ordenar por novos",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "StartDate": "Data Início",
--- a/vue3/src/locales/ro.json
+++ b/vue3/src/locales/ro.json
@@ -204,6 +204,7 @@
  "Open": "Deschide",
  "Options": "Opțiuni",
  "Original_Text": "Text original",
+  "Owner": "",
  "Page": "Pagină",
  "Parameter": "Parametru",
  "Parent": "Părinte",
@@ -272,6 +273,7 @@
  "Size": "Marime",
  "Social_Authentication": "Autentificare socială",
  "Sort_by_new": "Sortare după nou",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Split_All_Steps": "Împărțiți toate rândurile în pași separați.",
--- a/vue3/src/locales/ru.json
+++ b/vue3/src/locales/ru.json
@@ -153,6 +153,7 @@
  "OnHand": "В Наличии",
  "Open": "Открыть",
  "Options": "Опции",
+  "Owner": "",
  "Page": "Страница",
  "Parameter": "Параметр",
  "Parent": "Родитель",
@@ -209,6 +210,7 @@
  "Show_as_header": "Показывать как заголовок",
  "Size": "Размер",
  "Sort_by_new": "Сортировка по новизне",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Starting_Day": "Начальный день недели",
--- a/vue3/src/locales/sl.json
+++ b/vue3/src/locales/sl.json
@@ -147,6 +147,7 @@
  "Open": "Odpri",
  "Open_Data_Import": "Open Data Uvoz",
  "Open_Data_Slug": "Open Data Identifikator",
+  "Owner": "",
  "Parameter": "Parameter",
  "Parent": "Starš",
  "Period": "Obdobje",
@@ -199,6 +200,7 @@
  "Show_as_header": "Prikaži kot glavo",
  "Size": "Velikost",
  "Sort_by_new": "Razvrsti po novih",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Starting_Day": "Začetni dan v tednu",
--- a/vue3/src/locales/sv.json
+++ b/vue3/src/locales/sv.json
@@ -239,6 +239,7 @@
  "Options": "Val",
  "OrderInformation": "Objekt är sorterade från små till stora siffror.",
  "Original_Text": "Original Text",
+  "Owner": "",
  "Page": "Sida",
  "Parameter": "Parameter",
  "Parent": "Förälder",
@@ -317,6 +318,7 @@
  "Size": "Storlek",
  "Social_Authentication": "Social autentisering",
  "Sort_by_new": "Sortera efter ny",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Space_Cosmetic_Settings": "Vissa kosmetiska inställningar kan ändras av hushålls-administratörer och skriver över klientinställningar för det hushållet.",
--- a/vue3/src/locales/tr.json
+++ b/vue3/src/locales/tr.json
@@ -238,6 +238,7 @@
  "Options": "Seçenekler",
  "OrderInformation": "Nesneler küçükten büyüğe doğru sıralanır.",
  "Original_Text": "Orijinal Metin",
+  "Owner": "",
  "Page": "Sayfa",
  "Parameter": "Parametre",
  "Parent": "Üst Öğe",
@@ -316,6 +317,7 @@
  "Size": "Boyut",
  "Social_Authentication": "Sosyal Kimlik Doğrulama",
  "Sort_by_new": "Yeniye göre sırala",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Space_Cosmetic_Settings": "Bazı kozmetik ayarlar alan yöneticileri tarafından değiştirilebilir ve o alanın istemci ayarlarını geçersiz kılar.",
--- a/vue3/src/locales/uk.json
+++ b/vue3/src/locales/uk.json
@@ -181,6 +181,7 @@
  "Open": "Відкрити",
  "Options": "",
  "Original_Text": "Оригінальний текст",
+  "Owner": "",
  "Page": "",
  "Parameter": "Параметр",
  "Parent": "Батько",
@@ -245,6 +246,7 @@
  "Single": "",
  "Size": "Розмір",
  "Sort_by_new": "",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Starting_Day": "Початковий день тижня",
--- a/vue3/src/locales/zh_Hans.json
+++ b/vue3/src/locales/zh_Hans.json
@@ -233,6 +233,7 @@
  "Options": "选项",
  "OrderInformation": "对象按照从小到大的顺序排列。",
  "Original_Text": "原文",
+  "Owner": "",
  "Page": "页",
  "Parameter": "范围",
  "Parent": "父级",
@@ -310,6 +311,7 @@
  "Size": "大小",
  "Social_Authentication": "社交认证",
  "Sort_by_new": "按新旧排序",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Space_Cosmetic_Settings": "空间管理员可以更改某些装饰设置，并将覆盖该空间的客户端设置。",
--- a/vue3/src/locales/zh_Hant.json
+++ b/vue3/src/locales/zh_Hant.json
@@ -44,6 +44,7 @@
  "Nutrition": "",
  "Ok": "",
  "Open": "",
+  "Owner": "",
  "Plural": "",
  "Preferences": "",
  "Preparation": "",
@@ -69,6 +70,7 @@
  "Show_as_header": "顯示為標題",
  "Size": "",
  "Sort_by_new": "按最新排序",
+  "SpaceMemberHelp": "",
  "SpaceMembers": "",
  "SpaceSettings": "",
  "Step": "",
--- a/vue3/yarn.lock
+++ b/vue3/yarn.lock
@@ -2,6 +2,16 @@
 # yarn lockfile v1


+"@babel/helper-string-parser@^7.24.8":
+  version "7.24.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz#5b3329c9a58803d5df425e5785865881a81ca48d"
+  integrity sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==
+
+"@babel/helper-validator-identifier@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db"
+  integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==
+
 "@babel/parser@^7.23.9":
  version "7.23.9"
  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.9.tgz#7b903b6149b0f8fa7ad564af646c4c38a77fc44b"
@@ -12,6 +22,22 @@
  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.7.tgz#9a5226f92f0c5c8ead550b750f5608e766c8ce85"
  integrity sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==

+"@babel/parser@^7.25.3":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.6.tgz#85660c5ef388cbbf6e3d2a694ee97a38f18afe2f"
+  integrity sha512-trGdfBdbD0l1ZPmcJ83eNxB9rbEax4ALFTF7fN386TMYbeCQbyme5cOEXQhbGXKebwGaB/J52w1mrklMcbgy6Q==
+  dependencies:
+    "@babel/types" "^7.25.6"
+
+"@babel/types@^7.25.6":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.6.tgz#893942ddb858f32ae7a004ec9d3a76b3463ef8e6"
+  integrity sha512-/l42B1qxpG6RdfYf343Uw1vmDjeNhneUXtzhojE7pDgfpEypmRhI6j1kr17XCVv4Cgl9HdAiQY2x0GwKm7rWCw==
+  dependencies:
+    "@babel/helper-string-parser" "^7.24.8"
+    "@babel/helper-validator-identifier" "^7.24.7"
+    to-fast-properties "^2.0.0"
+
 "@esbuild/aix-ppc64@0.21.5":
  version "0.21.5"
  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz#c7184a326533fcdf1b8ee0733e21c713b975575f"
@@ -158,6 +184,11 @@
  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==

+"@jridgewell/sourcemap-codec@^1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
+
 "@rollup/rollup-android-arm-eabi@4.18.1":
  version "4.18.1"
  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.1.tgz#f0da481244b7d9ea15296b35f7fe39cd81157396"
@@ -334,6 +365,17 @@
    estree-walker "^2.0.2"
    source-map-js "^1.2.0"

+"@vue/compiler-core@3.5.7":
+  version "3.5.7"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.5.7.tgz#04300bdc9fb52f89e6f250bbac16e03f0e0ed914"
+  integrity sha512-A0gay3lK71MddsSnGlBxRPOugIVdACze9L/rCo5X5srCyjQfZOfYtSFMJc3aOZCM+xN55EQpb4R97rYn/iEbSw==
+  dependencies:
+    "@babel/parser" "^7.25.3"
+    "@vue/shared" "3.5.7"
+    entities "^4.5.0"
+    estree-walker "^2.0.2"
+    source-map-js "^1.2.0"
+
 "@vue/compiler-dom@3.4.19":
  version "3.4.19"
  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.19.tgz#2457e57e978f431e3b5fd11fc50a3e92d5816f9a"
@@ -342,7 +384,15 @@
    "@vue/compiler-core" "3.4.19"
    "@vue/shared" "3.4.19"

-"@vue/compiler-dom@3.4.31", "@vue/compiler-dom@^3.4.0":
+"@vue/compiler-dom@3.5.7":
+  version "3.5.7"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.5.7.tgz#604ced082189b66cb811068332a45dcc11ae0af3"
+  integrity sha512-GYWl3+gO8/g0ZdYaJ18fYHdI/WVic2VuuUd1NsPp60DWXKy+XjdhFsDW7FbUto8siYYZcosBGn9yVBkjhq1M8Q==
+  dependencies:
+    "@vue/compiler-core" "3.5.7"
+    "@vue/shared" "3.5.7"
+
+"@vue/compiler-dom@^3.4.0":
  version "3.4.31"
  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.31.tgz#30961ca847f5d6ad18ffa26236c219f61b195f6b"
  integrity sha512-wK424WMXsG1IGMyDGyLqB+TbmEBFM78hIsOJ9QwUVLGrcSk0ak6zYty7Pj8ftm7nEtdU/DGQxAXp0/lM/2cEpQ==
@@ -365,19 +415,19 @@
    postcss "^8.4.33"
    source-map-js "^1.0.2"

-"@vue/compiler-sfc@3.4.31":
-  version "3.4.31"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.31.tgz#cc6bfccda17df8268cc5440842277f61623c591f"
-  integrity sha512-einJxqEw8IIJxzmnxmJBuK2usI+lJonl53foq+9etB2HAzlPjAS/wa7r0uUpXw5ByX3/0uswVSrjNb17vJm1kQ==
+"@vue/compiler-sfc@3.5.7":
+  version "3.5.7"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.5.7.tgz#1150c49c0e3b39d40b2cf0f7de9edfcba98fa3e9"
+  integrity sha512-EjOJtCWJrC7HqoCEzOwpIYHm+JH7YmkxC1hG6VkqIukYRqj8KFUlTLK6hcT4nGgtVov2+ZfrdrRlcaqS78HnBA==
  dependencies:
-    "@babel/parser" "^7.24.7"
-    "@vue/compiler-core" "3.4.31"
-    "@vue/compiler-dom" "3.4.31"
-    "@vue/compiler-ssr" "3.4.31"
-    "@vue/shared" "3.4.31"
+    "@babel/parser" "^7.25.3"
+    "@vue/compiler-core" "3.5.7"
+    "@vue/compiler-dom" "3.5.7"
+    "@vue/compiler-ssr" "3.5.7"
+    "@vue/shared" "3.5.7"
    estree-walker "^2.0.2"
-    magic-string "^0.30.10"
-    postcss "^8.4.38"
+    magic-string "^0.30.11"
+    postcss "^8.4.47"
    source-map-js "^1.2.0"

 "@vue/compiler-ssr@3.4.19":
@@ -388,13 +438,13 @@
    "@vue/compiler-dom" "3.4.19"
    "@vue/shared" "3.4.19"

-"@vue/compiler-ssr@3.4.31":
-  version "3.4.31"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.4.31.tgz#f62ffecdf15bacb883d0099780cf9a1e3654bfc4"
-  integrity sha512-RtefmITAje3fJ8FSg1gwgDhdKhZVntIVbwupdyZDSifZTRMiWxWehAOTCc8/KZDnBOcYQ4/9VWxsTbd3wT0hAA==
+"@vue/compiler-ssr@3.5.7":
+  version "3.5.7"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.5.7.tgz#042144dfd574a1f64b685e87730b0196dc1846d2"
+  integrity sha512-oZx+jXP2k5arV/8Ly3TpQbfFyimMw2ANrRqvHJoKjPqtEzazxQGZjCLOfq8TnZ3wy2TOXdqfmVp4q7FyYeHV4g==
  dependencies:
-    "@vue/compiler-dom" "3.4.31"
-    "@vue/shared" "3.4.31"
+    "@vue/compiler-dom" "3.5.7"
+    "@vue/shared" "3.5.7"

 "@vue/devtools-api@^6.5.0":
  version "6.6.1"
@@ -422,12 +472,12 @@
  dependencies:
    "@vue/shared" "3.4.19"

-"@vue/reactivity@3.4.31":
-  version "3.4.31"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.4.31.tgz#eda80e90c4f9d7659efe1f5ed99c2dfdc9e93d77"
-  integrity sha512-VGkTani8SOoVkZNds1PfJ/T1SlAIOf8E58PGAhIOUDYPC4GAmFA2u/E14TDAFcf3vVDKunc4QqCe/SHr8xC65Q==
+"@vue/reactivity@3.5.7":
+  version "3.5.7"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.5.7.tgz#a52237fce841d92fc861220a8f26b51f5c3245e2"
+  integrity sha512-yF0EpokpOHRNXyn/h6abXc9JFIzfdAf0MJHIi92xxCWS0mqrXH6+2aZ+A6EbSrspGzX5MHTd5N8iBA28HnXu9g==
  dependencies:
-    "@vue/shared" "3.4.31"
+    "@vue/shared" "3.5.7"

 "@vue/runtime-core@3.4.19":
  version "3.4.19"
@@ -437,13 +487,13 @@
    "@vue/reactivity" "3.4.19"
    "@vue/shared" "3.4.19"

-"@vue/runtime-core@3.4.31":
-  version "3.4.31"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.4.31.tgz#ad3a41ad76385c0429e3e4dbefb81918494e10cf"
-  integrity sha512-LDkztxeUPazxG/p8c5JDDKPfkCDBkkiNLVNf7XZIUnJ+66GVGkP+TIh34+8LtPisZ+HMWl2zqhIw0xN5MwU1cw==
+"@vue/runtime-core@3.5.7":
+  version "3.5.7"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.5.7.tgz#4181b0a921d331f2efd5eda9aa35549ac97e6530"
+  integrity sha512-OzLpBpKbZEaZVSNfd+hQbfBrDKux+b7Yl5hYhhWWWhHD7fEpF+CdI3Brm5k5GsufHEfvMcjruPxwQZuBN6nFYQ==
  dependencies:
-    "@vue/reactivity" "3.4.31"
-    "@vue/shared" "3.4.31"
+    "@vue/reactivity" "3.5.7"
+    "@vue/shared" "3.5.7"

 "@vue/runtime-dom@3.4.19":
  version "3.4.19"
@@ -454,14 +504,14 @@
    "@vue/shared" "3.4.19"
    csstype "^3.1.3"

-"@vue/runtime-dom@3.4.31":
-  version "3.4.31"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.4.31.tgz#bae7ad844f944af33699c73581bc36125bab96ce"
-  integrity sha512-2Auws3mB7+lHhTFCg8E9ZWopA6Q6L455EcU7bzcQ4x6Dn4cCPuqj6S2oBZgN2a8vJRS/LSYYxwFFq2Hlx3Fsaw==
+"@vue/runtime-dom@3.5.7":
+  version "3.5.7"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.5.7.tgz#646e006d403f2e6337f566fdf461fbe400e8487d"
+  integrity sha512-fL7cETfE27U2jyTgqzE382IGFY6a6uyznErn27KbbEzNctzxxUWYDbaN3B55l9nXh0xW2LRWPuWKOvjtO2UewQ==
  dependencies:
-    "@vue/reactivity" "3.4.31"
-    "@vue/runtime-core" "3.4.31"
-    "@vue/shared" "3.4.31"
+    "@vue/reactivity" "3.5.7"
+    "@vue/runtime-core" "3.5.7"
+    "@vue/shared" "3.5.7"
    csstype "^3.1.3"

 "@vue/server-renderer@3.4.19":
@@ -472,13 +522,13 @@
    "@vue/compiler-ssr" "3.4.19"
    "@vue/shared" "3.4.19"

-"@vue/server-renderer@3.4.31":
-  version "3.4.31"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.4.31.tgz#bbe990f793c36d62d05bdbbaf142511d53e159fd"
-  integrity sha512-D5BLbdvrlR9PE3by9GaUp1gQXlCNadIZytMIb8H2h3FMWJd4oUfkUTEH2wAr3qxoRz25uxbTcbqd3WKlm9EHQA==
+"@vue/server-renderer@3.5.7":
+  version "3.5.7"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.5.7.tgz#65ba8b60c0ee9e791619c0f8b2b6209a258484e5"
+  integrity sha512-peRypij815eIDjpPpPXvYQGYqPH6QXwLJGWraJYPPn8JqWGl29A8QXnS7/Mh3TkMiOcdsJNhbFCoW2Agc2NgAQ==
  dependencies:
-    "@vue/compiler-ssr" "3.4.31"
-    "@vue/shared" "3.4.31"
+    "@vue/compiler-ssr" "3.5.7"
+    "@vue/shared" "3.5.7"

 "@vue/shared@3.4.19":
  version "3.4.19"
@@ -490,6 +540,11 @@
  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.31.tgz#af9981f57def2c3f080c14bf219314fc0dc808a0"
  integrity sha512-Yp3wtJk//8cO4NItOPpi3QkLExAr/aLBGZMmTtW9WpdwBCJpRM6zj9WgWktXAl8IDIozwNMByT45JP3tO3ACWA==

+"@vue/shared@3.5.7":
+  version "3.5.7"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.5.7.tgz#1eedd1ffbf804c488fe806a17ff26c22e0ddb72f"
+  integrity sha512-NBE1PBIvzIedxIc2RZiKXvGbJkrZ2/hLf3h8GlS4/sP9xcXEZMFWOazFkNd6aGeUCMaproe5MHVYB3/4AW9q9g==
+
 "@vue/tsconfig@^0.5.1":
  version "0.5.1"
  resolved "https://registry.yarnpkg.com/@vue/tsconfig/-/tsconfig-0.5.1.tgz#3124ec16cc0c7e04165b88dc091e6b97782fffa9"
@@ -761,12 +816,12 @@ luxon@^3.4.4:
  resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.4.4.tgz#cf20dc27dc532ba41a169c43fdcc0063601577af"
  integrity sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==

-magic-string@^0.30.10:
-  version "0.30.10"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.10.tgz#123d9c41a0cb5640c892b041d4cfb3bd0aa4b39e"
-  integrity sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==
+magic-string@^0.30.11:
+  version "0.30.11"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.11.tgz#301a6f93b3e8c2cb13ac1a7a673492c0dfd12954"
+  integrity sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==
  dependencies:
-    "@jridgewell/sourcemap-codec" "^1.4.15"
+    "@jridgewell/sourcemap-codec" "^1.5.0"

 magic-string@^0.30.6:
  version "0.30.7"
@@ -843,6 +898,11 @@ picocolors@^1.0.1:
  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
  integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==

+picocolors@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.0.tgz#5358b76a78cde483ba5cef6a9dc9671440b27d59"
+  integrity sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==
+
 pinia@^2.1.7:
  version "2.1.7"
  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.1.7.tgz#4cf5420d9324ca00b7b4984d3fbf693222115bbc"
@@ -860,15 +920,6 @@ postcss@^8.4.33:
    picocolors "^1.0.0"
    source-map-js "^1.0.2"

-postcss@^8.4.38:
-  version "8.4.38"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.38.tgz#b387d533baf2054288e337066d81c6bee9db9e0e"
-  integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==
-  dependencies:
-    nanoid "^3.3.7"
-    picocolors "^1.0.0"
-    source-map-js "^1.2.0"
-
 postcss@^8.4.39:
  version "8.4.39"
  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.39.tgz#aa3c94998b61d3a9c259efa51db4b392e1bde0e3"
@@ -878,6 +929,15 @@ postcss@^8.4.39:
    picocolors "^1.0.1"
    source-map-js "^1.2.0"

+postcss@^8.4.47:
+  version "8.4.47"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.47.tgz#5bf6c9a010f3e724c503bf03ef7947dcb0fea365"
+  integrity sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.1.0"
+    source-map-js "^1.2.1"
+
 psl@^1.1.33:
  version "1.9.0"
  resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
@@ -967,11 +1027,21 @@ source-map-js@^1.2.0:
  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==

+source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
 symbol-tree@^3.2.4:
  version "3.2.4"
  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
  integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==

+to-fast-properties@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+  integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
+
 tough-cookie@^4.1.4:
  version "4.1.4"
  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.4.tgz#945f1461b45b5a8c76821c33ea49c3ac192c1b36"
@@ -1103,16 +1173,16 @@ vue@^3.4.15:
    "@vue/server-renderer" "3.4.19"
    "@vue/shared" "3.4.19"

-vue@^3.4.31:
-  version "3.4.31"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.31.tgz#83a3c4dab8302b0e974b0d4b92a2f6a6378ae797"
-  integrity sha512-njqRrOy7W3YLAlVqSKpBebtZpDVg21FPoaq1I7f/+qqBThK9ChAIjkRWgeP6Eat+8C+iia4P3OYqpATP21BCoQ==
+vue@^3.5.7:
+  version "3.5.7"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.5.7.tgz#511df1fab33a4c20cfe6b59659d6f601f0c26625"
+  integrity sha512-JcFm0f5j8DQO9E07pZRxqZ/ZsNopMVzHYXpKvnfqXFcA4JTi+4YcrikRn9wkzWsdj0YsLzlLIsR0zzGxA2P6Wg==
  dependencies:
-    "@vue/compiler-dom" "3.4.31"
-    "@vue/compiler-sfc" "3.4.31"
-    "@vue/runtime-dom" "3.4.31"
-    "@vue/server-renderer" "3.4.31"
-    "@vue/shared" "3.4.31"
+    "@vue/compiler-dom" "3.5.7"
+    "@vue/compiler-sfc" "3.5.7"
+    "@vue/runtime-dom" "3.5.7"
+    "@vue/server-renderer" "3.5.7"
+    "@vue/shared" "3.5.7"

 vuedraggable@^4.1.0:
  version "4.1.0"