@ditojs/admin 2.27.0 → 2.27.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.27.0",
+  "version": "2.27.1",
   "type": "module",
   "description": "Dito.js Admin is a schema based admin interface for Dito.js Server, featuring auto-generated views and forms and built with Vue.js",
   "repository": "https://github.com/ditojs/dito/tree/master/packages/admin",
@@ -83,7 +83,7 @@
     "vite": "^5.2.8"
   },
   "types": "types",
-  "gitHead": "e80d56a1887faa60f61f4c642502687d50ead333",
+  "gitHead": "f8e8c86149487d9a7b991c9c4b8d9165974fb0a2",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/DitoContext.js

@@ -140,6 +140,10 @@ export default class DitoContext {
     return get(this, 'processedData', null)
   }
 
+  get processedRootItem() {
+    return get(this, 'processedRootData', null)
+  }
+
   get clipboardItem() {
     return get(this, 'clipboardData', null)
   }

package/src/components/DitoContainer.vue

@@ -255,6 +255,12 @@ export default DitoComponent.component('DitoContainer', {
   // percentages in flex-basis to work.
   padding: $form-spacing-half;
 
+  > .dito-label:only-child {
+    // Used e.g. when sources hide themselves due to maxDepth, but the label
+    // is rendered above it.
+    display: none;
+  }
+
   .dito-pane > & {
     .dito-page--width-80 & {
       flex-grow: 1;

package/src/mixins/RouteMixin.js

@@ -31,7 +31,7 @@ export default {
     routeLevel() {
       let level = 0
       let routeComponent = this
-      while ((routeComponent = routeComponent.parentComponent.routeComponent)) {
+      while ((routeComponent = routeComponent.parentRouteComponent)) {
         level++
       }
       return level

package/src/mixins/SourceMixin.js

@@ -68,10 +68,17 @@ export default {
       return !!this.value
     },
 
+    shouldRender() {
+      return this.sourceDepth < this.maxDepth
+    },
+
     isReady() {
       // Lists that have no data and no associated resource should still render,
       // as they may be getting their data elsewhere, e.g. `compute()`.
-      return this.hasData || !this.providesData
+      return (
+        this.shouldRender &&
+        (this.hasData || !this.providesData)
+      )
     },
 
     isInView() {
@@ -147,6 +154,15 @@ export default {
       return this.schema
     },
 
+    sourceDepth() {
+      return this.$route.matched.reduce(
+        (depth, record) => (
+          depth + (record.meta.schema === this.sourceSchema ? 1 : 0)
+        ),
+        0
+      )
+    },
+
     path() {
       // This is used in TypeList for DitoFormChooser.
       return this.routeComponent.getChildPath(this.schema.path)
@@ -313,6 +329,11 @@ export default {
     collapsed: getSchemaAccessor('collapsed', {
       type: Boolean,
       default: null
+    }),
+
+    maxDepth: getSchemaAccessor('maxDepth', {
+      type: Number,
+      default: 1
     })
   },
 

package/src/mixins/TypeMixin.js

@@ -77,16 +77,11 @@ export default {
     },
 
     processedData() {
-      // We can only get the processed data through the schemaComponent, but
-      // that's not necessarily the item represented by this component.
-      // Solution: Find the relative path and the processed sub-item from there:
-      const { schemaComponent } = this
-      return getItem(
-        schemaComponent.processedData,
-        // Get the dataPath relative to the schemaComponent's data:
-        this.dataPath.slice(schemaComponent.dataPath.length),
-        this.nested
-      )
+      return getProcessedParentData(this, this.dataPath, this.nested)
+    },
+
+    processedRootData() {
+      return getProcessedParentData(this, '', false)
     },
 
     // The following computed properties are similar to `DitoContext`
@@ -107,6 +102,10 @@ export default {
       return this.processedData
     },
 
+    processedRootItem() {
+      return this.processedRootData
+    },
+
     labelNode() {
       const node = this.isMounted ? this.$el.previousElementSibling : null
       return node?.matches('.dito-label') ? node : null
@@ -327,3 +326,20 @@ export default {
     }
   }
 }
+
+function getProcessedParentData(component, dataPath, nested = false) {
+  // We can only get the processed data through the schemaComponent, but
+  // that's not necessarily the item represented by this component.
+  // Solution: Find the relative path and the processed sub-item from there:
+  let { schemaComponent } = component
+  // Find the schema component that contains the desired data-path:
+  while (schemaComponent.dataPath.length > dataPath.length) {
+    schemaComponent = schemaComponent.parentSchemaComponent
+  }
+  return getItem(
+    schemaComponent.processedData,
+    // Get the dataPath relative to the schemaComponent's data:
+    dataPath.slice(schemaComponent.dataPath.length),
+    nested
+  )
+}

package/src/utils/schema.js

@@ -242,33 +242,36 @@ export async function resolveSchemaComponents(schemas) {
   await mapConcurrently(Object.values(schemas || {}), resolveSchemaComponent)
 }
 
-const processedSchemas = new WeakSet()
+const processedSchemaDepths = new WeakMap()
 export async function processSchemaComponents(
   api,
   schema,
   routes = null,
-  level = 0
+  level = 0,
+  maxDepth = 1
 ) {
-  if (schema && !processedSchemas.has(schema)) {
-    processedSchemas.add(schema)
-
-    const promises = []
-    const process = (component, name, relativeLevel) => {
-      promises.push(
-        processSchemaComponent(
-          api,
-          component,
-          name,
-          routes,
-          level + relativeLevel
+  if (schema) {
+    const depth = processedSchemaDepths.get(schema) ?? 0
+    if (depth < maxDepth) {
+      processedSchemaDepths.set(schema, depth + 1)
+      const promises = []
+      const process = (component, name, relativeLevel) => {
+        promises.push(
+          processSchemaComponent(
+            api,
+            component,
+            name,
+            routes,
+            level + relativeLevel
+          )
         )
-      )
-    }
+      }
 
-    iterateNestedSchemaComponents(schema, process)
-    iterateSchemaComponents(getPanelSchemas(schema), process)
+      iterateNestedSchemaComponents(schema, process)
+      iterateSchemaComponents(getPanelSchemas(schema), process)
 
-    await Promise.all(promises)
+      await Promise.all(promises)
+    }
   }
 }
 
@@ -368,7 +371,7 @@ export function processRouteSchema(api, schema, name, fullPath = null) {
 
 export async function processForms(api, schema, level) {
   // First resolve the forms and store the results back on the schema.
-  let { form, forms, components } = schema
+  let { form, forms, components, maxDepth = 1 } = schema
   if (forms) {
     forms = schema.forms = await resolveSchemas(forms, form =>
       processForm(api, form)
@@ -387,7 +390,7 @@ export async function processForms(api, schema, level) {
   forms ||= { default: form } // Only used for process loop below.
   const children = []
   for (const form of Object.values(forms)) {
-    await processSchemaComponents(api, form, children, level)
+    await processSchemaComponents(api, form, children, level, maxDepth)
   }
   return children
 }