@ditojs/admin 3.1.0 → 3.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "3.1.0",
+  "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.0",
-    "@ditojs/utils": "^3.1.0"
+    "@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.0",
+    "@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": "97314265c5cbac6a248d7350f43fea8ea92b995f"
+  "gitHead": "a87ccff01f65386d9363366fb19bb993d38e8fbc"
 }

package/src/mixins/ResourceMixin.js

@@ -54,8 +54,10 @@ export default {
       // `isTransient()` to only return `!this.providesData`.
       const form = this.formComponent
       return (
-        !this.providesData &&
-        !this.linksToView ||
+        (
+          !this.providesData &&
+          !this.linksToView
+        ) ||
         form && (
           form.isTransient ||
           form.isCreating

package/src/types/DitoTypeTreeList.vue

@@ -87,9 +87,10 @@ export default DitoTypeComponent.register(
                 type: Boolean,
                 default: false,
                 schema
-              }) ||
-              schema.children &&
-              hasEditableForms(schema.children)
+              }) || (
+                schema.children &&
+                hasEditableForms(schema.children)
+              )
             )
           )
         }

package/src/utils/FormModel.js

@@ -9,7 +9,7 @@ import {
 } from '@ditojs/utils'
 import DitoContext from '../DitoContext.js'
 import { DataSchemaResolver } from './DataSchemaResolver.js'
-import { isNested, isSourceWithResource } from './schema/structure.js'
+import { isNested } from './schema/structure.js'
 import { isEmptySchema } from './schema/lookup.js'
 import {
   getSchemaValue,
@@ -295,7 +295,7 @@ export class FormModel {
       initializeData(schema, data, this.component, {
         dataPath: this.dataPath,
         rootData: this.rootData,
-        shouldProcess: entry => !isSourceWithResource(entry.schema),
+        shouldSkipSourcesWithResource: true,
         // The model writes the values of components with `compute()`,
         // including their defaults:
         shouldSetDefaultsOfComponentsWithCompute: false
@@ -318,9 +318,8 @@ export class FormModel {
       processSchemaData(schema, data, {
         dataPath: this.dataPath,
         componentPath: this.componentPath,
-        shouldProcess: entry => (
-          !isSourceWithResource(entry.schema) && this.isEntryShown(entry)
-        ),
+        shouldProcess: entry => this.isEntryShown(entry),
+        shouldSkipSourcesWithResource: true,
         before: entry => {
           if (hasComputedValueSource(entry.schema)) {
             computedValueEntries.set(entry.componentPath, entry)
@@ -585,12 +584,17 @@ function takeOverChangedValues(target, before, after) {
     return target
   }
   const isSameShape = (
-    isPlainObject(before) && isPlainObject(after) && isPlainObject(target) ||
-    isArray(before) &&
-    isArray(after) &&
-    isArray(target) &&
-    before.length === after.length &&
-    after.length === target.length
+    (
+      isPlainObject(before) &&
+      isPlainObject(after) &&
+      isPlainObject(target)
+    ) || (
+      isArray(before) &&
+      isArray(after) &&
+      isArray(target) &&
+      before.length === after.length &&
+      after.length === target.length
+    )
   )
   if (!isSameShape) {
     return clone(after)

package/src/utils/schema/data.js

@@ -16,12 +16,14 @@ import {
   someNestedSchemaComponent,
   hasNestedSchemaComponents,
   isPanelWithOwnData,
+  isSourceWithResource,
   isNested
 } from './structure.js'
 import {
   hasFormSchema,
   hasMultipleFormSchemas,
   getFormSchemas,
+  getItemFormSchema,
   getItemFormSchemaFromForms
 } from './lookup.js'
 
@@ -129,9 +131,10 @@ export function isMissingValue(schema, data, name, context) {
   // Only read the value if needed, so that callers that are tracked, e.g. the
   // walk of the form model's data, don't depend on all values.
   return (
-    !(name in data) ||
-    !!getTypeOptions(schema)?.treatNullAsMissing?.(getContext(context)) &&
-    data[name] === null
+    !(name in data) || (
+      !!getTypeOptions(schema)?.treatNullAsMissing?.(getContext(context)) &&
+      data[name] === null
+    )
   )
 }
 
@@ -178,6 +181,7 @@ export function initializeData(schema, data = {}, component, {
   dataPath = null,
   rootData = data,
   shouldProcess,
+  shouldSkipSourcesWithResource = false,
   // Whether to also set the defaults of components with `compute()`. New data
   // starts with all defaults, which `compute()` can rely on. In data that was
   // loaded, `compute()` may derive missing values instead, and they fall back
@@ -214,6 +218,7 @@ export function initializeData(schema, data = {}, component, {
     dataPath,
     before,
     shouldProcess,
+    shouldSkipSourcesWithResource,
     options
   })
 }
@@ -429,6 +434,11 @@ export function processData(schema, sourceSchema, data, dataPath, {
  * them contain the `componentPath` of the component, tab or panel, continuing
  * `componentPath` like `DitoMixin.componentPath` does.
  *
+ * With `shouldSkipSourcesWithResource`, sources with their own resource are
+ * skipped along with their items, which they load and save through their
+ * resource, but not their panels, which display the data that contains them,
+ * see `DitoContainer.panelEntries`.
+ *
  * The primitive values of lists with `wrapPrimitives` are walked wrapped in
  * objects under the `wrapPrimitives` key, like the admin edits them, see
  * `SourceMixin`. `wrappedPrimitiveName` is that key while walking such an
@@ -444,9 +454,16 @@ export function processSchemaData(schema, data, {
   before = null,
   after = null,
   shouldProcess = () => true,
+  shouldSkipSourcesWithResource = false,
   options
 }) {
-  const walkOptions = { before, after, shouldProcess, options }
+  const walkOptions = {
+    before,
+    after,
+    shouldProcess,
+    shouldSkipSourcesWithResource,
+    options
+  }
   const getDataPath = (dataPath, token) =>
     dataPath != null
       ? appendDataPath(dataPath, token)
@@ -472,6 +489,13 @@ export function processSchemaData(schema, data, {
         if (!shouldProcess(entry)) {
           continue
         }
+        if (
+          shouldSkipSourcesWithResource &&
+          isSourceWithResource(componentSchema)
+        ) {
+          processTabOrPanelSchemas(componentSchema.panels, entry.componentPath)
+          continue
+        }
         if (isPanelWithOwnData(componentSchema)) {
           // The components of panels with their own data don't edit `data`.
           continue
@@ -582,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/src/utils/schema/validation.js

@@ -2,7 +2,6 @@ import DitoContext from '../../DitoContext.js'
 import * as validators from '../../validators/index.js'
 import { isFunction, isRegExp, asArray, normalizeDataPath } from '@ditojs/utils'
 import { getTypeOptions } from './types.js'
-import { isSourceWithResource } from './structure.js'
 import {
   getSchemaValue,
   shouldRenderSchema,
@@ -86,10 +85,8 @@ export function getDataValidationErrors(schema, data, {
       rootData
     })
 
-  const shouldProcess = entry => (
-    !isSourceWithResource(entry.schema) &&
+  const shouldProcess = entry =>
     shouldRenderSchema(entry.schema, createContext(entry))
-  )
 
   const before = entry => {
     const { schema, data, name, dataPath } = entry
@@ -112,6 +109,7 @@ export function getDataValidationErrors(schema, data, {
   processSchemaData(schema, data, {
     dataPath,
     shouldProcess,
+    shouldSkipSourcesWithResource: true,
     before,
     options: { component, rootData }
   })

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> {