@ditojs/admin 2.27.0 → 2.27.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.27.0",
+  "version": "2.27.2",
   "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": "d15a80e1ecdf916fd087ad7c5b21eee0b2ee9daf",
   "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/mixins/ValidationMixin.js

@@ -1,5 +1,5 @@
 import { isFunction } from '@ditojs/utils'
-import * as validations from '../validations/index.js'
+import * as validators from '../validators/index.js'
 
 // @vue/component
 export default {
@@ -36,11 +36,15 @@ export default {
         this.clearErrors()
       }
       const { value } = this
-      // console.log('validate', this.dataPath, value, this.validations)
       for (const [rule, setting] of Object.entries(this.validations)) {
         // eslint-disable-next-line import/namespace
-        const validator = validations[rule]
-        if (validator && (validator.nullish || value != null)) {
+        const validator = validators[rule]
+        if (
+          validator &&
+          // Only apply 'required' validator to empty values.
+          // Apply all other validators only to non-empty values.
+          (rule === 'required' || value != null && value !== '')
+        ) {
           const { validate, message } = validator
           if (!validate(value, setting, this.validations)) {
             isValid = false

package/src/utils/schema.js

@@ -19,7 +19,7 @@ import {
   mapConcurrently,
   getValueAtDataPath
 } from '@ditojs/utils'
-import { markRaw } from 'vue'
+import { markRaw, reactive } from 'vue'
 
 const typeComponents = {}
 const unknownTypeReported = {}
@@ -242,37 +242,40 @@ export async function resolveSchemaComponents(schemas) {
   await mapConcurrently(Object.values(schemas || {}), resolveSchemaComponent)
 }
 
-const processedSchemas = new WeakSet()
-export async function processSchemaComponents(
+const processedSchemaDepths = new WeakMap()
+export 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)
+      return Promise.all(promises)
+    }
   }
 }
 
-export async function processSchemaComponent(
+export function processSchemaComponent(
   api,
   schema,
   name,
@@ -281,7 +284,7 @@ export async function processSchemaComponent(
 ) {
   processSchemaDefaults(api, schema)
 
-  await Promise.all([
+  return Promise.all([
     // Also process nested panel schemas.
     mapConcurrently(
       getPanelSchemas(schema),
@@ -367,38 +370,41 @@ export function processRouteSchema(api, schema, name, fullPath = null) {
 }
 
 export async function processForms(api, schema, level) {
+  const routes = []
   // First resolve the forms and store the results back on the schema.
-  let { form, forms, components } = schema
+  const { form, forms, components, maxDepth = 1 } = schema
   if (forms) {
-    forms = schema.forms = await resolveSchemas(forms, form =>
-      processForm(api, form)
+    schema.forms = await resolveSchemas(forms, form =>
+      processForm(api, form, routes, level, maxDepth)
     )
   } else if (form) {
-    form = schema.form = await processForm(api, form)
+    schema.form = await processForm(api, form, routes, level, maxDepth)
   } else if (isObject(components)) {
     // NOTE: Processing forms in computed components is not supported, since it
     // only can be computed in conjunction with actual data.
-    form = {
+    const form = {
       type: 'form',
       components
     }
+    await processForm(api, form, routes, level, maxDepth)
   }
-
-  forms ||= { default: form } // Only used for process loop below.
-  const children = []
-  for (const form of Object.values(forms)) {
-    await processSchemaComponents(api, form, children, level)
-  }
-  return children
+  return routes
 }
 
-export async function processForm(api, schema) {
+export async function processForm(
+  api,
+  schema,
+  routes = null,
+  level = 0,
+  maxDepth = 1
+) {
   schema = await resolveSchema(schema, true)
   if (!isForm(schema)) {
     throw new Error(`Invalid form schema: '${getSchemaIdentifier(schema)}'`)
   }
   processSchemaDefaults(api, schema)
   await processNestedSchemas(api, schema)
+  await processSchemaComponents(api, schema, routes, level, maxDepth)
   return schema
 }
 
@@ -515,10 +521,14 @@ export function getFormSchemas(schema, context, modifyForm) {
     Object.entries(forms).map(([type, form]) => {
       // Support `schema.components` callbacks to create components on the fly.
       if (context && isFunction(form.components)) {
-        form = {
+        // Make the form schema reactive since `processForm()` is async, so that
+        // the setting of defaults will be picked up by downstream code.
+        form = reactive({
           ...form,
           components: form.components(context)
-        }
+        })
+        // Process the form again, now that we have the components.
+        processForm(context.api, form).catch(console.error)
       }
       return [type, modifyForm?.(form) ?? form]
     })

package/src/{validations → validators}/_required.js

@@ -5,6 +5,5 @@ export const required = {
     // but unchanged, allow this to pass through:
     (password && value === undefined)
   ),
-  message: 'is required',
-  nullish: true
+  message: 'is required'
 }