@ditojs/admin 3.1.1 → 3.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "3.1.1",
+  "version": "3.1.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/main/packages/admin",
@@ -41,8 +41,8 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^3.1.1",
-    "@ditojs/utils": "^3.1.1"
+    "@ditojs/ui": "^3.1.2",
+    "@ditojs/utils": "^3.1.2"
   },
   "peerDependencies": {
     "@kyvg/vue3-notification": "^3.4.2",
@@ -87,7 +87,7 @@
     "vue-upload-component": "^3.2.2"
   },
   "devDependencies": {
-    "@ditojs/build": "^3.1.1",
+    "@ditojs/build": "^3.1.2",
     "@kyvg/vue3-notification": "^3.4.2",
     "@tiptap/core": "^3.31.4",
     "@tiptap/extension-blockquote": "^3.31.4",
@@ -131,5 +131,5 @@
     "vue-router": "^5.3.1",
     "vue-upload-component": "^3.2.2"
   },
-  "gitHead": "acce85bb38d817aab18f9d5d03b3aa9dff00c3f9"
+  "gitHead": "a87ccff01f65386d9363366fb19bb993d38e8fbc"
 }

package/src/utils/FormModel.js

@@ -584,7 +584,11 @@ function takeOverChangedValues(target, before, after) {
     return target
   }
   const isSameShape = (
-    isPlainObject(before) && isPlainObject(after) && isPlainObject(target) || (
+    (
+      isPlainObject(before) &&
+      isPlainObject(after) &&
+      isPlainObject(target)
+    ) || (
       isArray(before) &&
       isArray(after) &&
       isArray(target) &&

package/src/utils/schema/data.js

@@ -23,6 +23,7 @@ import {
   hasFormSchema,
   hasMultipleFormSchemas,
   getFormSchemas,
+  getItemFormSchema,
   getItemFormSchemaFromForms
 } from './lookup.js'
 
@@ -605,7 +606,20 @@ export function processSchemaData(schema, data, {
     }
   }
 
-  processComponents(schema.components, componentPath)
+  const components = isFunction(schema.components)
+    ? // Unnested components with `components()` callbacks, e.g. sections:
+      getItemFormSchema(
+        schema,
+        data,
+        new DitoContext(options.component, {
+          schema,
+          data,
+          dataPath,
+          rootData: options.rootData
+        })
+      ).components
+    : schema.components
+  processComponents(components, componentPath)
   processTabOrPanelSchemas(schema.tabs, componentPath)
   processTabOrPanelSchemas(schema.panels, componentPath)
 

package/src/utils/schema/lookup.js

@@ -6,26 +6,32 @@ import {
   isFunction,
   camelize
 } from '@ditojs/utils'
-import { reactive } from 'vue'
+import { reactive, computed } from 'vue'
 import { getTypeOptions } from './types.js'
 import {
   findNestedSchemaComponent,
   isSchema,
   isSingleComponentView
 } from './structure.js'
-// TODO: `getFormSchemas()` processes forms with `components()` callbacks on
-// every call, which also causes the only circular import between these
-// modules. Move this out of the lookup, see the form model.
+// TODO: Setting up the forms of `components()` callbacks causes the only
+// circular import between these modules.
 import { setupForm } from './setup.js'
 
 const emptySchema = {}
 
+// The forms with the components that `components()` callbacks create, by
+// callback and by the data that they create them for, see
+// `getFormWithCreatedComponents()`.
+const formsByComponentsCallback = new WeakMap()
+
 export function hasFormSchema(schema) {
   // Support both single form and multiple forms notation, as well as inlined
-  // components.
+  // components, also created by `components()` callbacks.
   return (
-    isSchema(schema) &&
-    isObject(schema.form || schema.forms || schema.components)
+    isSchema(schema) && (
+      isObject(schema.form || schema.forms || schema.components) ||
+      isFunction(schema.components)
+    )
   )
 }
 
@@ -96,20 +102,51 @@ 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)) {
-        // Make the form schema reactive since `setupForm()` 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.
-        setupForm(context.api, form).catch(console.error)
+        form = getFormWithCreatedComponents(form, context)
       }
       return [type, modifyForm?.(form) ?? form]
     })
   )
 }
 
+// Returns the form with the components that its `components()` callback
+// creates for the data of `context`. The forms are cached per data, and the
+// callback only creates new components when the data that it reads changes,
+// so that rendering and the walks of the form model, see `FormModel`, share
+// the same component schemas. `components()` callbacks therefore derive the
+// components from the data of their context, not from its components.
+function getFormWithCreatedComponents(form, context) {
+  const { item } = context
+  if (!isObject(item)) {
+    return createFormWithComponents(form, context)
+  }
+  let formsByItem = formsByComponentsCallback.get(form.components)
+  if (!formsByItem) {
+    formsByItem = new WeakMap()
+    formsByComponentsCallback.set(form.components, formsByItem)
+  }
+  let formWithCreatedComponents = formsByItem.get(item)
+  if (!formWithCreatedComponents) {
+    formWithCreatedComponents = computed(() =>
+      createFormWithComponents(form, context)
+    )
+    formsByItem.set(item, formWithCreatedComponents)
+  }
+  return formWithCreatedComponents.value
+}
+
+function createFormWithComponents(form, context) {
+  // Make the form schema reactive since `setupForm()` is async, so that the
+  // setting of defaults will be picked up by downstream code.
+  const formWithComponents = reactive({
+    ...form,
+    components: form.components(context)
+  })
+  // Process the form again, now that it has its components.
+  setupForm(context.api, formWithComponents).catch(console.error)
+  return formWithComponents
+}
+
 export function getItemFormSchemaFromForms(forms, item) {
   return forms[item?.type] || forms.default || null
 }

package/types/index.d.ts

@@ -1548,9 +1548,18 @@ export interface RadioSchema<$Item = any>
   layout?: 'horizontal' | 'vertical'
 }
 
-type SectionContent<$Data> = {
-  /** The section's field components. */
-  components?: Components<$Data>
+type SectionContent<$Data, $Item = $Data> = {
+  /**
+   * The section's field components, or a callback that
+   * creates them from the data, e.g. fields that depend on
+   * a selected template. The callback runs again when the
+   * data that it reads changes, and receives the context of
+   * the section, so that `item` is the item that contains
+   * it, also for nested sections.
+   */
+  components?:
+    | Components<$Data>
+    | ItemAccessor<$Item, {}, Components<$Data>>
   /**
    * A form schema for the section's content. Use this
    * instead of `components` to get form-level options
@@ -1690,7 +1699,7 @@ export type SectionSchema<$Item = any, $Nested = $Item> = BaseSchema<$Item> &
          * @defaultValue `false`
          */
         nested: true
-      } & SectionContent<$Nested>)
+      } & SectionContent<$Nested, $Item>)
   )
 
 export interface CheckboxSchema<$Item = any> extends BaseSchema<$Item> {