@live-change/frontend-auto-form 0.9.16 → 0.9.18

package/front/src/components/crud/ModelEditor.vue

@@ -1,11 +1,10 @@
 <template>
   <div>
-    <!--
-      <h4>identifiers as object</h4>
-      <pre>{{ identifiersObject }}</pre>
+<!--
 
       <h4>definition</h4>
-      <pre>{{ modelDefinition }}</pre>-->
+      <pre>{{ modelDefinition }}</pre>
+-->
 
     <div class="">
       Service <strong>{{ service }}</strong>

package/front/src/components/crud/ModelList.vue

@@ -3,6 +3,9 @@
 <!--    <h4>definition</h4>
     <pre>{{ modelDefinition }}</pre>-->
 
+    <pre>{{ modelsPathRangeConfig.view }}</pre>
+    <pre>{{ identifiers }}</pre>
+
     <div class="surface-card w-full p-3 shadow-1 border-round mb-2">
       <slot name="header">
         <div class="">
@@ -15,8 +18,9 @@
       </slot>
     </div>
 
-    <div class="surface-card p-3 shadow-1 border-round" v-if="modelsPathRangeFunction">
-      <range-viewer :key="JSON.stringify(modelsPathRangeConfig)"
+    <div class="surface-card p-3 shadow-1 border-round" v-if="modelsPathRangeFunctions">
+      <range-viewer v-for="(modelsPathRangeFunction, index) in modelsPathRangeFunctions"
+                    :key="JSON.stringify(modelsPathRangeConfig)+index"
                     :pathFunction="modelsPathRangeFunction"
                     :canLoadTop="false" canDropBottom
                     loadBottomSensorSize="4000px" dropBottomSensorSize="3000px">
@@ -83,7 +87,6 @@
         </div>
       </template>
     </ConfirmPopup>
-
   </div>
 </template>
 
@@ -114,8 +117,12 @@
       type: Object,
       default: () => ({})
     },
+    view: {
+      type: String,
+      default: undefined
+    }
   })
-  const { service, model, identifiers } = toRefs(props)
+  const { service, model, identifiers, view } = toRefs(props)
 
   import AutoObjectIdentification from './AutoObjectIdentification.vue'
 
@@ -141,18 +148,21 @@
       service: service.value,
       model: model.value,
       definition: modelDefinition.value,
-      reverse: true
+      reverse: true,
+      view: modelDefinition.value?.crud?.[view.value ?? 'range']
     }
   })
-  const modelsPathRangeFunction = computed(() => {
+  const modelsPathRangeFunctions = computed(() => {
     const config = modelsPathRangeConfig.value
-    const rangeView = config.definition?.crud?.range
+    const rangeView = config.view
     if(!path[config.service]) return null
     if(!path[config.service][rangeView]) return null
-    return (range) =>  path[config.service][rangeView]({
-      ...identifiers.value,
+    let idents = identifiers.value
+    if(!Array.isArray(idents)) idents = [idents]
+    return idents.map(ident => (range) =>  path[config.service][rangeView]({
+      ...ident,
       ...(config.reverse ? reverseRange(range) : range),
-    })
+    }))
   })
 
   function objectIdentifiers(object) {
@@ -198,7 +208,7 @@
     params: {
       serviceName: service.value,
       modelName: model.value,
-      identifiers: Object.values(identifiers.value)
+      identifiers: Object.values(identifiers.value[0])
     }
   }))
 

package/front/src/components/crud/ModelSingle.vue

@@ -0,0 +1,226 @@
+<template>
+  <div>
+<!--    <h4>definition</h4>
+    <pre>{{ modelDefinition }}</pre>-->
+
+
+    <div class="surface-card w-full p-3 shadow-1 border-round mb-2">
+      <slot name="header">
+        <div class="">
+          Service <strong>{{ service }}</strong>
+        </div>
+        <div class="text-2xl">
+          <strong>{{ model }}</strong>
+        </div>
+      </slot>
+    </div>
+
+    <div class="surface-card p-3 shadow-1 border-round" v-if="modelsPaths">
+      <div v-for="({ value: object }, index) in (modelsData ?? [])">
+        <div v-if="!object" class="text-xl text-800 my-1 mx-3">
+          <strong>{{ model }}</strong> not found.
+        </div>
+        <div v-else
+             :key="JSON.stringify(modelsPaths[index])+index"
+             class="flex flex-row align-items-center justify-content-between my-3">
+          <router-link :to="viewRoute(object)" class="no-underline text-color">
+            <ObjectIdentification
+              :objectType="service + '_' + model"
+              :object="object.to ?? object.id"
+              :data="object"
+              class="text-xl"
+            />
+          </router-link>
+          <div class="flex flex-row">
+            <router-link :to="viewRoute(object)" class="no-underline">
+              <Button icon="pi pi-eye" severity="primary" label="View" class="mr-2" />
+            </router-link>
+
+            <router-link :to="editRoute(object)" class="no-underline">
+              <Button icon="pi pi-pencil" severity="primary" label="Edit" class="mr-2" />
+            </router-link>
+
+            <Button v-if="modelDefinition.crud?.delete" @click="ev => deleteObject(ev, object)"
+                    icon="pi pi-eraser" severity="primary" label="Delete" class="mr-2" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else class="flex align-items-start p-4 bg-pink-100 border-round border-1 border-pink-300 mb-4">
+      <i class="pi pi-times-circle text-pink-900 text-2xl mr-3" />
+      <div class="mr-3">
+        <div class="text-pink-900 font-medium text-xl mb-3 line-height-1">Not authorized</div>
+        <p class="m-0 p-0 text-pink-700">
+          You do not have sufficient privileges to use this feature of this object.
+        </p>
+      </div>
+    </div>
+
+    <div v-if="modelDefinition.crud?.create && !modelsData.find(x => x?.value)"
+         class="mt-2 flex flex-row justify-content-end mr-2">
+      <router-link :to="createRoute" class="no-underline2">
+        <Button icon="pi pi-plus" :label="'Set '+model" />
+      </router-link>
+    </div>
+
+    <ConfirmPopup group="delete">
+      <template #message="slotProps">
+        <div class="flex flex-row align-items-center w-full gap-3 border-bottom-1 surface-border px-3 pt-1 pb-1">
+          <i class="pi pi-trash text-3xl text-primary-500"></i>
+          <p>
+            Do you want to delete {{ model[0].toLowerCase() + model.slice(1) }}
+            <ObjectIdentification
+              :objectType="service + '_' + model"
+              :object="slotProps.message.object.to ?? slotProps.message.object.id"
+              :data="slotProps.message.object"
+            />
+            ?
+          </p>
+        </div>
+      </template>
+    </ConfirmPopup>
+
+  </div>
+</template>
+
+<script setup>
+
+  import ConfirmPopup from "primevue/confirmpopup"
+  import Button from "primevue/button"
+
+  import { useToast } from 'primevue/usetoast'
+  const toast = useToast()
+  import { useConfirm } from 'primevue/useconfirm'
+  const confirm = useConfirm()
+
+  import { ref, computed, onMounted, defineProps, toRefs } from 'vue'
+  import { RangeViewer, injectComponent } from "@live-change/vue3-components"
+
+  const props = defineProps({
+    service: {
+      type: String,
+      required: true,
+    },
+    model: {
+      type: String,
+      required: true,
+    },
+    identifiers: {
+      type: Object,
+      default: () => ({})
+    },
+  })
+  const { service, model, identifiers } = toRefs(props)
+
+  import AutoObjectIdentification from './AutoObjectIdentification.vue'
+
+  const ObjectIdentification = computed(() =>
+    injectComponent({
+      name: 'ObjectIdentification',
+      type: service.value + '_' + model.value,
+      service: service.value,
+      model: model.value
+    }, AutoObjectIdentification)
+  )
+
+  import { useApi, usePath, live } from '@live-change/vue3-ssr'
+  const api = useApi()
+  const path = usePath()
+
+  const modelDefinition = computed(() => {
+    return api.services?.[service.value]?.models?.[model.value]
+  })
+
+  const modelsPathConfig = computed(() => {
+    return {
+      service: service.value,
+      model: model.value,
+      definition: modelDefinition.value,
+    }
+  })
+  const modelsPaths = computed(() => {
+    const config = modelsPathConfig.value
+    const readView = config.definition?.crud?.read
+    if(!path[config.service]) return null
+    if(!path[config.service][readView]) return null
+    let idents = identifiers.value
+    if(!Array.isArray(idents)) idents = [idents]
+    return idents.map(ident => path[config.service][readView]({
+      ...ident
+    }))
+  })
+
+  const modelsData = await Promise.all(
+    modelsPaths.value.map(path => live(path))
+  )
+
+  function objectIdentifiers(object) {
+    const identifiers = {}
+    for(const identifierDefinition of modelDefinition.value.identifiers) {
+      if(typeof identifierDefinition === 'string') {
+        identifiers[identifierDefinition] = object[identifierDefinition]
+      } else {
+        if(identifierDefinition.field === 'id') {
+          identifiers[identifierDefinition.name] = object?.to ?? object.id
+        } else {
+          identifiers[identifierDefinition.name] = object[identifierDefinition.field]
+        }
+      }
+    }
+    return identifiers
+  }
+
+  function editRoute(object) {
+    return {
+      name: 'auto-form:editor',
+      params: {
+        serviceName: service.value,
+        modelName: model.value,
+        identifiers: Object.values(objectIdentifiers(object))
+      }
+    }
+  }
+
+  function viewRoute(object) {
+    return {
+      name: 'auto-form:view',
+      params: {
+        serviceName: service.value,
+        modelName: model.value,
+        identifiers: Object.values(objectIdentifiers(object))
+      }
+    }
+  }
+
+  const createRoute = computed(() => ({
+    name: 'auto-form:editor',
+    params: {
+      serviceName: service.value,
+      modelName: model.value,
+      identifiers: Object.values(objectIdentifiers(identifiers.value[0]))
+    }
+  }))
+
+  function deleteObject(event, object) {
+    confirm.require({
+      group: 'delete',
+      target: event.currentTarget,
+      object,
+      acceptClass: "p-button-danger",
+      accept: async () => {
+        await api.actions[service.value][modelDefinition.value.crud.delete]({
+          ...objectIdentifiers(object)
+        });
+        toast.add({ severity: "info", summary: model.value + " deleted", life: 1500 });
+      },
+      reject: () => {
+        toast.add({ severity: "error", summary: "Rejected", detail: "You have rejected", life: 3e3 });
+      }
+    });
+  }
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/components/crud/ModelView.vue

@@ -30,9 +30,9 @@
 
     </div>
 
-    <div v-for="itemRelation of itemRelations">
-      <ModelList :service="itemRelation.from.serviceName" :model="itemRelation.from.name"
-                 :identifiers="relatedIdentifiers">
+    <div v-for="preparedRelation of visibleObjectRelations" class="mb-4">
+      <ModelSingle :service="preparedRelation.service" :model="preparedRelation.model"
+                 :identifiers="preparedRelation.identifiers">
         <template #header>
           <div class="text-xl">
             <ObjectIdentification
@@ -42,24 +42,42 @@
               class="mr-2"
             />
             <span class="mr-2 font-medium">{{ model }}'s</span>
-            <span class="font-bold">{{ pluralize(itemRelation.from.name) }}</span>:
+            <span class="font-bold">{{ preparedRelation.model }}</span>:
           </div>
         </template>
+      </ModelSingle>
+    </div>
 
+    <div v-for="preparedRelation of visibleRangeRelations" class="mb-4">
+      <ModelList :service="preparedRelation.service" :model="preparedRelation.model"
+                 :identifiers="preparedRelation.identifiers" :view="preparedRelation.view">
+        <template #header>
+          <div class="text-xl">
+            <ObjectIdentification
+              :objectType="service + '_' + model"
+              :object="object.to ?? object.id"
+              :data="object"
+              class="mr-2"
+            />
+            <span class="mr-2 font-medium">{{ model }}'s</span>
+            <span class="font-bold">{{ pluralize(preparedRelation.model) }}</span>:
+          </div>
+        </template>
       </ModelList>
-
-      <pre>{{ relatedIdentifiers }}</pre>
-
-      <pre>{{ itemRelation }}</pre>
-
     </div>
 
-<!--    <div class="surface-card p-3 shadow-1 border-round">
+    <div class="surface-card p-3 shadow-1 border-round">
+
+      <pre>{{ preparedRelations }}</pre>
 
       <h4>Backward relations</h4>
-      <pre>{{ backwardRelations }}</pre>
+      <pre>{{
+          backwardRelations.map(
+            ({ from, relation, what }) => ({ from: from.serviceName + '_' + from.name, relation, what })
+          )
+      }}</pre>
 
-    </div>-->
+    </div>
 
   </div>
 </template>
@@ -68,10 +86,11 @@
 
   import AutoView from '../view/AutoView.vue'
   import ModelList from './ModelList.vue'
+  import ModelSingle from './ModelSingle.vue'
 
   import pluralize from 'pluralize'
   import { ref, computed, onMounted, defineProps, defineEmits, toRefs } from 'vue'
-  import { RangeViewer, injectComponent } from "@live-change/vue3-components"
+  import { RangeViewer, injectComponent, InjectComponent } from "@live-change/vue3-components"
 
   const props = defineProps({
     service: {
@@ -118,9 +137,9 @@
     return api.services?.[service.value]?.models?.[model.value]
   })
 
-  import { getForwardRelations, getBackwardRelations } from '../../logic/relations.js'
+  import { getForwardRelations, getBackwardRelations, anyRelationsTypes, prepareObjectRelations } from '../../logic/relations.js'
   const forwardRelations = computed(() => getForwardRelations(modelDefinition.value, () => true, api))
-  const backwardRelations = computed(() => getBackwardRelations(modelDefinition.value, api))
+  const backwardRelations = computed(() => getBackwardRelations(modelDefinition.value,  api))
 
   const itemRelations = computed(
     () => backwardRelations.value.filter(relation => relation.relation === 'itemOf')
@@ -143,6 +162,25 @@
     [model.value[0].toLowerCase() + model.value.slice(1)]: object.value.to ?? object.value.id
   }))
 
+
+  const preparedRelations = computed(() => {
+    const objectType = service.value + '_' + model.value
+    return prepareObjectRelations(objectType, object.value.to ?? object.value.id, api)
+  })
+
+  const visibleRangeRelations = computed(() => preparedRelations.value.filter(preparedRelation => {
+    if(preparedRelation.view && preparedRelation.access.value[preparedRelation.view]) return true
+    if(preparedRelation.access.value.range) return true
+    return false
+  }))
+
+  const visibleObjectRelations = computed(() => preparedRelations.value.filter(preparedRelation => {
+    if(!preparedRelation.singular) return false
+    if(!preparedRelation.access.value.read) return false
+    return true
+  }))
+
+
 </script>
 
 <style scoped>

package/front/src/logic/editorData.js

@@ -65,7 +65,7 @@ export default function editorData(options) {
       draftIdParts.push(identifier)
     }
   }
-  const isNew = (idKey ? (!identifiers[idKey]) : (!draftIdParts.some(key => !identifiers[key])))
+  const isNew = (idKey ? (!identifiers[idKey]) : (!draftIdParts.some(key => identifiers[key])))
   const draftId = (idKey ? identifiers[idKey]
     : draftIdParts.map(key => JSON.stringify(identifiers[key])).join('_')) ?? 'new'
   const draftIdentifiers = {
@@ -202,6 +202,7 @@ export default function editorData(options) {
         saveDraft: synchronizedData.save,
         savingDraft: synchronizedData.saving,
         saved: savedData,
+        savedPath: savedDataPath,
         draft: draftData,
         sourceChanged /// needed for draft discard on concurrent save
       }
@@ -239,6 +240,7 @@ export default function editorData(options) {
         save: synchronizedData.save,
         saving: synchronizedData.saving,
         saved: savedData,
+        savedPath: savedDataPath,
         reset,
         model,
       }

package/front/src/logic/relations.js

@@ -1,4 +1,10 @@
 import { useApi } from '@live-change/vue3-ssr'
+import { computed } from 'vue'
+
+function ensureArray(value) {
+  if(!Array.isArray(value)) return [value]
+  return value
+}
 
 function getWhat(relation) {
   if(typeof relation === 'string') return relation
@@ -6,11 +12,26 @@ function getWhat(relation) {
 }
 function getWhats(relations) {
   if(!Array.isArray(relations)) relations = [relations]
-  return relations.map(getWhat)
+  return relations.map(x => ensureArray(getWhat(x)))
+}
+
+export const relationTypes = {
+  propertyOf: { singular: true, typed: true, owned: true },
+  boundTo: { singular: true, typed: true, owned: false },
+  itemOf: { singular: false, typed: true, owned: true },
+  relatedTo: { singular: false, typed: true, owned: false },
+  propertyOfAny: { singular: true, typed: false, owned: true },
+  boundToAny: { singular: true, typed: false, owned: false },
+  itemOfAny: { singular: false, typed: false, owned: true },
+  relatedToAny: { singular: false, typed: false, owned: false }
 }
 
-export const typedRelationsTypes = ['propertyOf', 'itemOf', 'boundTo', 'relatedTo']
-export const anyRelationsTypes = typedRelationsTypes.map(relation => relation + 'Any')
+export const typedRelationsTypes = Object.entries(relationTypes)
+  .filter(([key, value]) => value.typed)
+  .map(([key, value]) => key)
+export const anyRelationsTypes = Object.entries(relationTypes)
+  .filter(([key, value]) => !value.typed)
+  .map(([key, value]) => key)
 
 export function getModelByTypeName(model, api = useApi()) {
   if(typeof model === 'string') {
@@ -27,20 +48,51 @@ export function getServiceByName(service, api = useApi()) {
   return service
 }
 
-export function getForwardRelations(model, filter = () => true, api = useApi()) {
+export function getForwardRelations(model, api = useApi()) {
   model = getModelByTypeName(model, api)
   const results = []
   for(const type of typedRelationsTypes) {
+    const relationType = relationTypes[type]
+    let relations = model[type]
+    if(!relations) continue
+    if(!Array.isArray(relations)) relations = [relations]
+    for(const relation of relations) {
+      const what = ensureArray(getWhat(relation))
+      const result = {
+        from: model,
+        relation: type,
+        what
+      }
+      results.push(result)
+    }
+  }
+  for(const type of anyRelationsTypes) {
+    const relationType = relationTypes[type]
     let relations = model[type]
     if(!relations) continue
     if(!Array.isArray(relations)) relations = [relations]
     for(const relation of relations) {
+      const fields = (Array.isArray(relation.to) ? relation.to : [relation.to ?? 'owner'])
+      const possibleTypes = fields.map(other => {
+        const name = other.name ? other.name : other
+        const typesConfig = relation[name + 'Types'] || []
+        const otherTypes = other.types || []
+        return Array.from(new Set(
+          typesConfig.concat(otherTypes)
+        ))
+      })
+      const allTypes = Array.from(new Set(
+        (relation.parentsTypes || [])
+          .concat(possibleTypes.filter(x => !!x).flat()
+      )))
       const result = {
         from: model,
+        fields,
         relation: type,
-        what: getWhat(relation),
+        what: allTypes,
+        any: allTypes.length === 0
       }
-      if(filter(result)) results.push(result)
+      results.push(result)
     }
   }
   return results
@@ -49,10 +101,10 @@ export function getForwardRelations(model, filter = () => true, api = useApi())
 export function getBackwardRelations(model, api = useApi()) {
   model = getModelByTypeName(model, api)
   const key = `${model.serviceName}_${model.name}`
-  console.log("KEY", key)
+  //console.log("KEY", key)
   return Object.values(api.services).map(
     service => Object.values(service.models).map(
-      model => getForwardRelations(model, ({ what }) => what === key, api)
+      model => getForwardRelations(model, api).filter(({ what, any }) => what.includes(key))
     ).flat()
   ).flat()
 }
@@ -74,3 +126,82 @@ export function getModelsWithRelation(relationName, api = useApi()) {
     service => getServiceModelsWithRelation(service, relationName, api)
   ).flat()))
 }
+
+export function prepareObjectRelations(objectType, object, api = useApi()) {
+  const [service, model] = objectType.split('_')
+  const backwardRelations = getBackwardRelations(objectType, api)
+  const preparedBackwardRelations = backwardRelations.map(({ relation, from, what, fields }) => {
+    const relationConfig = from[relation]
+
+    const access = computed(() => {
+      const serviceMetadata = api.metadata.api.value.services.find(s => s.name === from.serviceName)
+      return Object.fromEntries(
+        Object.entries(from.crud).map(([key, value]) =>
+          [key, !!serviceMetadata.actions[value] || !!serviceMetadata.views[value]]
+        )
+      )
+    })
+
+    if(anyRelationsTypes.includes(relation)) {
+      const identifiers = []
+      for(const field of fields) {
+        const possibleFieldTypes = (relationConfig[field+'Types'] ?? [])
+          .concat(relationConfig.parentsTypes ?? [])
+        if(possibleFieldTypes.length === 0 || possibleFieldTypes.includes(objectType)) {
+          identifiers.push({
+            [field+'Type']: objectType,
+            [field]: object
+          })
+        }
+      }
+      return {
+        model: from.name,
+        service: from.serviceName,
+        fields,
+        relation,
+        what,
+        identifiers,
+        access,
+        singular: relationTypes[relation].singular && what.length < 2
+      }
+    } else {
+      const singular = relationTypes[relation].singular && what.length < 2
+      const typeView = from.crud?.['rangeBy_'+objectType]
+        ? 'rangeBy_'+objectType
+        : undefined
+      const view = relationConfig?.view ?? (singular
+          ? undefined
+          : typeView
+      ) ?? undefined
+      const identifiers = []
+      if(typeView) {
+        identifiers.push({
+          [model[0].toLowerCase() + model.slice(1)]: object
+        })
+      } else {
+        for(let i = 0; i < what.length; i++) {
+          if(what[i] !== objectType) continue
+          const propertyName = relationConfig.propertyNames?.[i]
+            ?? model[0].toLowerCase() + model.slice(1)
+          identifiers.push({
+            [propertyName]: object
+          })
+        }
+      }
+      console.log(objectType, "VIEW", view, from, singular)
+      return {
+        model: from.name,
+        service: from.serviceName,
+        fields,
+        relation,
+        what,
+        identifiers,
+        access,
+        view,
+        singular
+      }
+    }
+  })
+
+  return preparedBackwardRelations
+}

package/front/src/pages/Editor.vue

@@ -1,5 +1,10 @@
 <template>
   <div class="w-full lg:w-8 md:w-11">
+
+<!--    <pre>{{ identifiers }}</pre>
+    <pre>{{ modelDefinition.identifiers }}</pre>
+    <pre>{{identifiersObject}}</pre>-->
+
     <div class="surface-card p-3 shadow-1 border-round">
 
       <ModelEditor :service="serviceName" :model="modelName" :identifiers="identifiersObject" draft
@@ -26,7 +31,15 @@
     },
     identifiers: {
       type: Array,
-      default: []
+      default: () => []
+    },
+    identifiersTypes: {
+      type: Array,
+      default: () => undefined
+    },
+    identifiersProperties: {
+      type: Array,
+      default: () => undefined
     }
   })
   const { serviceName, modelName, identifiers } = toRefs(props)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/frontend-auto-form",
-  "version": "0.9.16",
+  "version": "0.9.18",
   "scripts": {
     "memDev": "node server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -21,20 +21,20 @@
   },
   "type": "module",
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.5.2",
-    "@live-change/cli": "^0.9.16",
-    "@live-change/dao": "^0.9.16",
-    "@live-change/dao-vue3": "^0.9.16",
-    "@live-change/dao-websocket": "^0.9.16",
-    "@live-change/framework": "^0.9.16",
-    "@live-change/image-frontend": "^0.9.16",
-    "@live-change/image-service": "^0.9.16",
-    "@live-change/session-service": "^0.9.16",
-    "@live-change/vue3-components": "^0.9.16",
-    "@live-change/vue3-ssr": "^0.9.16",
-    "@vueuse/core": "^10.11.0",
+    "@fortawesome/fontawesome-free": "^6.7.2",
+    "@live-change/cli": "^0.9.18",
+    "@live-change/dao": "^0.9.18",
+    "@live-change/dao-vue3": "^0.9.18",
+    "@live-change/dao-websocket": "^0.9.18",
+    "@live-change/framework": "^0.9.18",
+    "@live-change/image-frontend": "^0.9.18",
+    "@live-change/image-service": "^0.9.18",
+    "@live-change/session-service": "^0.9.18",
+    "@live-change/vue3-components": "^0.9.18",
+    "@live-change/vue3-ssr": "^0.9.18",
+    "@vueuse/core": "^12.3.0",
     "codeceptjs-assert": "^0.0.5",
-    "compression": "^1.7.4",
+    "compression": "^1.7.5",
     "cross-env": "^7.0.3",
     "get-port-sync": "1.0.1",
     "pica": "^9.0.1",
@@ -43,25 +43,25 @@
     "primeicons": "^7.0.0",
     "primevue": "^3.52.0",
     "rollup-plugin-node-builtins": "^2.1.2",
-    "rollup-plugin-visualizer": "5.12.0",
+    "rollup-plugin-visualizer": "5.14.0",
     "serialize-javascript": "^6.0.2",
-    "serve-static": "^1.15.0",
+    "serve-static": "^1.16.2",
     "v-shared-element": "3.1.1",
     "vue-meta": "^3.0.0-alpha.9",
-    "vue-router": "^4.3.3",
+    "vue-router": "^4.5.0",
     "vue3-scroll-border": "0.1.6"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "^0.9.16",
-    "codeceptjs": "^3.6.5",
+    "@live-change/codeceptjs-helper": "^0.9.18",
+    "codeceptjs": "^3.6.10",
     "generate-password": "1.7.1",
-    "playwright": "1.48.1",
+    "playwright": "1.49.1",
     "random-profile-generator": "^2.3.0",
-    "txtgen": "^3.0.6",
-    "webdriverio": "^8.40.2"
+    "txtgen": "^3.0.7",
+    "webdriverio": "^9.5.1"
   },
   "author": "Michał Łaszczewski <michal@laszczewski.pl>",
   "license": "ISC",
   "description": "",
-  "gitHead": "226df9fa7eb682f6d7da5e4541eb320e8309facf"
+  "gitHead": "d7fd7ad0a0ea331caea9dc8385439b9c637525ed"
 }