@ditojs/admin 3.2.3 → 3.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "3.2.3",
+  "version": "3.2.5",
   "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",
@@ -131,5 +131,5 @@
     "vue-router": "^5.3.1",
     "vue-upload-component": "^3.2.2"
   },
-  "gitHead": "5fdd07d3192698bfab4a3bedc061a08341c67282"
+  "gitHead": "f149113bc95317c74b17f4af56ccfebed789c47b"
 }

package/src/DitoContext.js

@@ -149,17 +149,16 @@ export default class DitoContext {
   }
 
   get value() {
-    return get(
-      this,
-      'value',
-      () =>
-        // If the value is not defined on the underlying object, it's not a type
-        // component, or its value is missing. If it is nested, we can still get
-        // the value from the root, or `undefined` if it's missing there too.
-        this.nested
-          ? getValueAtDataPath(this.rootItem, this.dataPath, () => undefined)
-          : undefined
-    )
+    const object = toObject(this)
+    // Type components hold their value, also while it's `undefined`, e.g. a
+    // computed value that the data model hasn't written yet. Other components
+    // don't hold a value, but if they're nested, we can get it from the root,
+    // or `undefined` if it's missing there.
+    return 'value' in object
+      ? object.value
+      : this.nested
+        ? getValueAtDataPath(this.rootItem, this.dataPath, () => undefined)
+        : undefined
   }
 
   get dataPath() {

package/src/components/DitoDialog.vue

@@ -32,6 +32,7 @@
 </template>
 
 <script>
+import { markRaw } from 'vue'
 import { clone } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
 import DomMixin from '../mixins/DomMixin.js'
@@ -47,8 +48,7 @@ export default DitoComponent.component('DitoDialog', {
 
   provide() {
     return {
-      $dialogComponent: () => this,
-      $dataModel: () => this.ownDataModel
+      $dialogComponent: () => this
     }
   },
 
@@ -80,11 +80,6 @@ export default DitoComponent.component('DitoDialog', {
   },
 
   computed: {
-    // @override DitoMixin.dataModel
-    dataModel() {
-      return this.ownDataModel
-    },
-
     dialogComponent() {
       return this
     },
@@ -136,11 +131,13 @@ export default DitoComponent.component('DitoDialog', {
   created() {
     // Writes defaults and computed values into the dialog's data and resolves
     // options, see `DataModel`:
-    this.ownDataModel = new DataModel({
-      component: this,
-      getSchema: () => this.schema,
-      getData: () => this.dialogData
-    })
+    this.ownDataModel = markRaw(
+      new DataModel({
+        component: this,
+        getSchema: () => this.schema,
+        getData: () => this.dialogData
+      })
+    )
   },
 
   mounted() {
@@ -185,7 +182,7 @@ export default DitoComponent.component('DitoDialog', {
 
     async submit() {
       // Wait for computed values that depend on pending loads, e.g. options.
-      await this.waitForPendingLoadsOf(this.dataModel)
+      await this.waitUntilDataModelSettled()
       this.resolve(this.dialogData)
     },
 

package/src/components/DitoForm.vue

@@ -51,6 +51,7 @@
 </template>
 
 <script>
+import { markRaw } from 'vue'
 import { clone, capitalize, parseDataPath, assignDeeply } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
 import RouteMixin from '../mixins/RouteMixin.js'
@@ -66,12 +67,6 @@ import { DataModel } from '../utils/DataModel.js'
 export default DitoComponent.component('DitoForm', {
   mixins: [RouteMixin, ResourceMixin],
 
-  provide() {
-    return {
-      $dataModel: () => this.ownDataModel
-    }
-  },
-
   data() {
     return {
       createdData: null,
@@ -80,11 +75,6 @@ export default DitoComponent.component('DitoForm', {
   },
 
   computed: {
-    // @override DitoMixin.dataModel
-    dataModel() {
-      return this.ownDataModel
-    },
-
     isForm() {
       return true
     },
@@ -366,12 +356,14 @@ export default DitoComponent.component('DitoForm', {
   created() {
     // Writes defaults and computed values into the form's data, resolves
     // options and tracks whether the data is dirty, see `DataModel`:
-    this.ownDataModel = new DataModel({
-      component: this,
-      getSchema: () => this.schema,
-      getData: () => this.data,
-      getSourceSchema: () => this.sourceSchema
-    })
+    this.ownDataModel = markRaw(
+      new DataModel({
+        component: this,
+        getSchema: () => this.schema,
+        getData: () => this.data,
+        getSourceSchema: () => this.sourceSchema
+      })
+    )
   },
 
   beforeUnmount() {
@@ -473,7 +465,7 @@ export default DitoComponent.component('DitoForm', {
 
     async submit(button, { validate = true, closeForm = false } = {}) {
       // Wait for computed values that depend on pending loads, e.g. options.
-      await this.waitForPendingLoadsOf(this.dataModel)
+      await this.waitUntilDataModelSettled()
       if (validate && !this.validateAll()) {
         return false
       }

package/src/components/DitoView.vue

@@ -28,6 +28,7 @@ template(
 </template>
 
 <script>
+import { markRaw } from 'vue'
 import DitoComponent from '../DitoComponent.js'
 import RouteMixin from '../mixins/RouteMixin.js'
 import {
@@ -45,8 +46,7 @@ export default DitoComponent.component('DitoView', {
     // Redirect $sourceComponent and $resourceComponent to the main component:
     return {
       $sourceComponent: () => this.mainComponent?.sourceComponent || null,
-      $resourceComponent: () => this.mainComponent?.resourceComponent || null,
-      $dataModel: () => this.ownDataModel
+      $resourceComponent: () => this.mainComponent?.resourceComponent || null
     }
   },
 
@@ -61,11 +61,6 @@ export default DitoComponent.component('DitoView', {
   },
 
   computed: {
-    // @override DitoMixin.dataModel
-    dataModel() {
-      return this.ownDataModel
-    },
-
     schema() {
       return this.meta.schema ?? {}
     },
@@ -126,11 +121,13 @@ export default DitoComponent.component('DitoView', {
   created() {
     // Writes defaults and computed values into the view's data and resolves
     // options, see `DataModel`:
-    this.ownDataModel = new DataModel({
-      component: this,
-      getSchema: () => this.viewSchema,
-      getData: () => this.data
-    })
+    this.ownDataModel = markRaw(
+      new DataModel({
+        component: this,
+        getSchema: () => this.viewSchema,
+        getData: () => this.data
+      })
+    )
   },
 
   mounted() {

package/src/mixins/DitoMixin.js

@@ -39,29 +39,28 @@ export default {
 
   provide() {
     const self = () => this
-    return this.providesData
-      ? {
-          $parentComponent: self,
-          $dataComponent: self
-        }
-      : {
-          $parentComponent: self
-        }
+    return {
+      $parentComponent: self,
+      ...(this.providesData && { $dataComponent: self }),
+      $dataModel: () => this.dataModel
+    }
   },
 
   data() {
     return {
       appState,
       isMounted: false,
-      overrides: null // See accessor.js
+      overrides: null, // See accessor.js
+      // The data model that the component owns, see `dataModel`.
+      ownDataModel: null
     }
   },
 
   computed: {
-    // The data model, provided by the form, view or dialog that owns it, which
-    // override it with their own.
+    // The data model of the data: the component's own, e.g. of a form, view
+    // or dialog, or else the one of its closest ancestor that owns one.
     dataModel() {
-      return this.$dataModel()
+      return this.ownDataModel ?? this.$dataModel()
     },
 
     providesData() {
@@ -498,17 +497,6 @@ export default {
         : parentComponentPath
     },
 
-    // Waits for the pending loads of the data model, e.g. before submitting,
-    // showing the spinner in the header in the meantime, like requests do.
-    async waitForPendingLoadsOf(dataModel) {
-      this.rootComponent.registerLoading(true)
-      try {
-        await dataModel.waitForPendingLoads()
-      } finally {
-        this.rootComponent.registerLoading(false)
-      }
-    },
-
     notify(options) {
       this.rootComponent.notify(options)
     },
@@ -627,16 +615,25 @@ export default {
             // data changes register, e.g. for `processedItem`, and the form
             // model writes the values that it derives from the data.
             // NOTE: The result of `handleListeners()` is returned as expected.
-            this.waitForDataModel().then(handleListeners)
+            this.waitUntilDataModelSettled().then(handleListeners)
           : handleListeners()
       }
     },
 
     // Waits until the data model settled: its loads finished, and it wrote the
-    // values that it derives from the data.
-    async waitForDataModel() {
+    // values that it derives from the data, e.g. before submitting. Shows the
+    // spinner in the header while loads are pending, like requests do.
+    async waitUntilDataModelSettled() {
       await this.$nextTick()
-      await this.dataModel?.waitForPendingLoads()
+      const { dataModel } = this
+      if (dataModel?.hasPendingLoads) {
+        this.rootComponent.registerLoading(true)
+        try {
+          await dataModel.waitUntilSettled()
+        } finally {
+          this.rootComponent.registerLoading(false)
+        }
+      }
     },
 
     emitSchemaEvent(event, params) {

package/src/mixins/OptionsMixin.js

@@ -68,10 +68,12 @@ export default {
     // Whether the value needs to be replaced with the selected value, once the
     // options are available: if the value is forced to `null` because its
     // option disappeared, or if the value is a reference, so that it'll hold
-    // actual data, not just a reference id. See `watch`.
+    // actual data, not just a reference id. See `watch`. Filtered options, e.g.
+    // the results of a search, don't tell whether the value's option exists.
     shouldReplaceValueWithSelectedValue() {
       return (
-        this.hasOptions && (
+        this.hasOptions &&
+        !this.areOptionsFiltered && (
           this.selectedValue === null && this.value !== null ||
           isReference(this.value)
         )
@@ -114,6 +116,12 @@ export default {
       return this.options
     },
 
+    // Whether the active options are a filtered subset of the options, e.g.
+    // the results of a search, see `activeOptions`.
+    areOptionsFiltered() {
+      return this.activeOptions !== this.options
+    },
+
     hasOptions() {
       return this.activeOptions.length > 0
     },
@@ -304,8 +312,16 @@ export default {
         }
       }
 
-      return this.optionValue
-        ? findOption(this.activeOptions, value, this.groupBy)
+      const { optionValue, groupBy } = this
+      return optionValue
+        ? (findOption(this.activeOptions, value, groupBy) ??
+          // Options filtered out of the active options, e.g. by a search, are
+          // still options of the value.
+          (
+            this.areOptionsFiltered
+              ? findOption(this.options, value, groupBy)
+              : undefined
+          ))
         : value
     },
 

package/src/utils/DataModel.js

@@ -9,12 +9,13 @@ import {
 } from '@ditojs/utils'
 import DitoContext from '../DitoContext.js'
 import { DataSchemaResolver } from './DataSchemaResolver.js'
+import { getParentDataPath } from './data.js'
 import { isNested } from './schema/structure.js'
 import { isEmptySchema } from './schema/lookup.js'
 import {
   getSchemaValue,
   shouldSetDefaultValue,
-  getDefaultValue,
+  setDefaultValue,
   initializeData,
   computeValue,
   hasValueFromDataSchema,
@@ -41,7 +42,7 @@ import {
 //   displays them, see `getOptions()`. Both get the same option objects, and
 //   computes that read options only run once they are loaded.
 // - Submitting waits for the loads of data schemas and options that are still
-//   pending, see `waitForPendingLoads()`.
+//   pending, see `waitUntilSettled()`.
 // - The data is dirty when its processed data differs from a snapshot taken
 //   when the data was set up, saved or applied, see `isDirty`. The values that
 //   the model derives until it settled, e.g. from loaded options, don't count,
@@ -68,7 +69,7 @@ export class DataModel {
   // of their options, by component path, see `getOptionsResolver()`:
   optionsRecords = new Map()
   // The promises of the loads of data schemas and options that are pending,
-  // see `waitForPendingLoads()`:
+  // see `waitUntilSettled()`:
   pendingLoads = new Set()
   // The data that the snapshot was taken of, and its processed data to compare
   // with in `isDirty`, see `takeProcessedDataSnapshot()`:
@@ -77,6 +78,9 @@ export class DataModel {
   // the snapshot is taken, which `isDirty` takes from the current data, `null`
   // once it settled, see `takeProcessedDataSnapshot()`:
   derivedValueDataPaths = null
+  // The number of writes of computed values per data path in the current
+  // microtask, see `isWriteLoop()`:
+  computedValueWriteCounts = null
 
   // `getSchema()` and `getData()` return the schema and the data that the
   // model handles. `getSourceSchema()` returns the schema of the source that
@@ -92,7 +96,7 @@ export class DataModel {
       watch(
         [getSchema, getData],
         ([schema, data]) => this.initializeData(schema, data),
-        modelWatchOptions
+        modelSetupWatchOptions
       )
       // The entries are read through a computed property, so that the watchers
       // of the entries can check synchronously whether their entry is still
@@ -101,19 +105,18 @@ export class DataModel {
       watch(
         () => this.dataEntries.value.computedValueEntries,
         entries => this.updateComputedValueRecords(entries),
-        modelWatchOptions
+        modelSetupWatchOptions
       )
       // Values that go missing after the data was set up, e.g. in items that
       // code adds, get their defaults too:
       watch(
         () => this.dataEntries.value.entriesWithMissingValues,
         entries => this.setDefaultValues(entries),
-        modelWatchOptions
+        modelSetupWatchOptions
       )
       if (getSourceSchema) {
         // Data that is set up, e.g. loaded, saved or applied, isn't dirty:
-        // After the data is set up, as the watchers run in the order in which
-        // they're created, see `modelWatchOptions`.
+        // After the data is set up, see `modelSetupWatchOptions`.
         watch(
           getData,
           () => this.takeProcessedDataSnapshot().catch(console.error),
@@ -167,12 +170,18 @@ export class DataModel {
     this.pendingLoads.clear()
   }
 
+  // Whether loads of data schemas or options are pending, see
+  // `waitUntilSettled()`.
+  get hasPendingLoads() {
+    return this.pendingLoads.size > 0
+  }
+
   // Waits for the pending loads of data schemas and options, including the
   // ones that they cause, e.g. options that depend on computed values that
   // depend on loaded options, and for the watchers to write the resulting
   // computed values into the data.
-  async waitForPendingLoads() {
-    while (this.pendingLoads.size > 0) {
+  async waitUntilSettled() {
+    while (this.hasPendingLoads) {
       await Promise.all(this.pendingLoads)
       await nextTick()
     }
@@ -181,7 +190,7 @@ export class DataModel {
   // Takes the snapshot of the processed data that `isDirty` compares with,
   // when the data is set up, saved or applied. Until the model settled, i.e.
   // the pending loads finished and the computed values that depend on them are
-  // written into the data, see `waitForPendingLoads()`, the values that the
+  // written into the data, see `waitUntilSettled()`, the values that the
   // model writes are recorded in `derivedValueDataPaths` and don't count, as
   // they're derived from the data, e.g. from loaded options. Once settled, they
   // are taken over into the snapshot, so that changes made in the meantime,
@@ -201,7 +210,7 @@ export class DataModel {
     }
     // Let the watchers and the rendering start their loads first:
     await nextTick()
-    await this.waitForPendingLoads()
+    await this.waitUntilSettled()
     // Snapshots that were taken since settle by themselves.
     const isSnapshotReplaced = (
       this.derivedValueDataPaths !==
@@ -266,7 +275,7 @@ export class DataModel {
     if (hasSnapshotOfData) {
       // Let the watchers write the values derived from the changes first:
       await nextTick()
-      await this.waitForPendingLoads()
+      await this.waitUntilSettled()
       // Take the changes over into the current snapshot of the data, which may
       // have been replaced in the meantime, e.g. once the model settled.
       const processedDataSnapshot = this.processedDataSnapshot.value
@@ -284,7 +293,7 @@ export class DataModel {
   }
 
   // Tracks the promise of a pending load until it settles, so that
-  // `waitForPendingLoads()` waits for it.
+  // `waitUntilSettled()` waits for it.
   trackPendingLoad(promise) {
     this.pendingLoads.add(promise)
     promise.finally(() => this.pendingLoads.delete(promise))
@@ -340,16 +349,23 @@ export class DataModel {
   // `false`. Unlike `shouldRenderSchema()`, it doesn't evaluate the components
   // of sections and tabs, as the walk of the data visits them anyway, see
   // `getDataEntries()`, which leads to the same entries.
+  // An `if` that fails only affects its own component, which is treated as
+  // shown, not the walk of all others, which would stop computing them.
   isEntryShown(entry) {
-    return (
-      entry.schema.if === undefined ||
-      getSchemaValue('if', {
+    if (entry.schema.if === undefined) {
+      return true
+    }
+    try {
+      return getSchemaValue('if', {
         type: Boolean,
         schema: entry.schema,
         context: this.createEntryContext(entry),
         default: true
       })
-    )
+    } catch (error) {
+      console.error(error)
+      return true
+    }
   }
 
   // Returns whether the value of the entry is missing and needs its default.
@@ -372,7 +388,7 @@ export class DataModel {
     for (const entry of entries) {
       if (this.shouldSetDefaultValue(entry)) {
         const { schema, data, name } = entry
-        data[name] = getDefaultValue(schema, () =>
+        setDefaultValue(schema, data, name, () =>
           this.createEntryContext(entry)
         )
       }
@@ -533,18 +549,82 @@ export class DataModel {
     })
   }
 
+  // Writes the computed value into the data, with the defaults of its nested
+  // values, unless it equals the value in the data.
   writeComputedValue(entry, value) {
     const { data, name } = entry
+    this.setNestedDefaultValues(entry, value)
     if (!equals(value, data[name])) {
+      const dataPath = this.getRelativeDataPath(entry)
+      if (this.isWriteLoop(dataPath)) {
+        return
+      }
       // Values written while the model settles are derived, see
       // `takeProcessedDataSnapshot()`:
-      this.derivedValueDataPaths?.add(this.getRelativeDataPath(entry))
+      this.derivedValueDataPaths?.add(dataPath)
       // Access `data[name]` directly to update the value without calling
       // `parse()`, see `ValueMixin`:
       data[name] = value
     }
   }
 
+  // Sets the missing defaults of the values nested in the computed value of
+  // the entry, e.g. of the items that `compute()` returns, as
+  // `setDefaultValues()` would once the value is written. Otherwise, the two
+  // would disagree on the value and keep replacing each other's writes.
+  setNestedDefaultValues(entry, value) {
+    const { schema, data, name, dataPath } = entry
+    if (!isPlainObject(value) && !isArray(value)) {
+      return
+    }
+    // Walk the computed value in place of the current one, in a copy of the
+    // data that holds it.
+    const valueData = { ...data, [name]: value }
+    processSchemaData({ components: { [name]: schema } }, valueData, {
+      dataPath: isNested(schema) ? getParentDataPath(dataPath) : dataPath,
+      shouldProcess: nestedEntry => this.isEntryShown(nestedEntry),
+      shouldSkipSourcesWithResource: true,
+      before: nestedEntry => {
+        if (
+          nestedEntry.data !== valueData &&
+          this.shouldSetDefaultValue(nestedEntry)
+        ) {
+          setDefaultValue(
+            nestedEntry.schema,
+            nestedEntry.data,
+            nestedEntry.name,
+            () => this.createEntryContext(nestedEntry)
+          )
+        }
+      },
+      options: { component: this.component, rootData: this.rootData }
+    })
+  }
+
+  // Returns whether the computed value at the data path was written too often
+  // in the current microtask, which happens when the sources of the value keep
+  // disagreeing on it, e.g. two computes. Reports the data path once, instead
+  // of letting the writes loop endlessly.
+  isWriteLoop(dataPath) {
+    if (!this.computedValueWriteCounts) {
+      this.computedValueWriteCounts = new Map()
+      queueMicrotask(() => {
+        this.computedValueWriteCounts = null
+      })
+    }
+    const count = (this.computedValueWriteCounts.get(dataPath) ?? 0) + 1
+    this.computedValueWriteCounts.set(dataPath, count)
+    if (count === maxComputedValueWrites + 1) {
+      console.error(
+        new Error(
+          `The computed value at '${dataPath}' keeps changing, as its ` +
+          `sources disagree on it. It isn't written anymore in this update.`
+        )
+      )
+    }
+    return count > maxComputedValueWrites
+  }
+
   // Returns the data path of the value of the entry, relative to the model's
   // data, as in its processed data.
   getRelativeDataPath({ schema, name, dataPath }) {
@@ -641,19 +721,30 @@ function takeOverChangedValues(target, before, after) {
 
 const notFound = Symbol('notFound')
 
-// The watchers of the model run after the post-flush hooks, so that they write
-// the values that they derive from the data after the components that display
-// them are mounted. Otherwise, the `mounted` hooks of `v-model` directives
-// would restore the values that inputs had when they were mounted, see
-// https://github.com/vuejs/core/issues/15774. Vue processes the updates that
-// the written values cause in the same flush, before the browser renders them.
-// The watchers run in the order in which they're created.
+// The watchers of the model that set up the data and the scopes of its
+// components run before the components render, so that components of new
+// data, e.g. loaded data or added items, receive their defaults and computed
+// values from the start: The scopes compute their values right away, see
+// `createComputedValueScope()`.
+const modelSetupWatchOptions = { immediate: true, flush: 'pre' }
+
+// The other watchers of the model run after the post-flush hooks, so that they
+// write the values that they derive from the data after the components that
+// display them are mounted. Otherwise, the `mounted` hooks of `v-model`
+// directives would restore the values that inputs had when they were mounted,
+// see https://github.com/vuejs/core/issues/15774. Vue processes the updates
+// that the written values cause in the same flush, before the browser renders
+// them.
 const modelWatchOptions = { immediate: true, flush: 'post' }
 
 // Aborts `compute()` when it reads options that aren't loaded, see
 // `DataModel.getComputedValueResult()`.
 const optionsNotLoaded = Symbol('optionsNotLoaded')
 
+// The number of writes of a computed value in one microtask after which they
+// are considered a loop, see `DataModel.isWriteLoop()`.
+const maxComputedValueWrites = 10
+
 // Returns whether the schema is a source of computed values, through
 // `schema.compute()` or a data schema of the `computed` types.
 function hasComputedValueSource(schema) {

package/src/utils/schema/data.js

@@ -110,6 +110,17 @@ export function getDefaultValue(schema, context) {
     : clone(defaultValue)
 }
 
+// Sets the value of the component described by `schema` and `name` in `data`
+// to its default. Types without values, e.g. buttons, have no default, and
+// don't get a key in the data, which would make the data differ from data
+// without it, e.g. from items that `compute()` returns.
+export function setDefaultValue(schema, data, name, context) {
+  const value = getDefaultValue(schema, context)
+  if (value !== undefined) {
+    data[name] = value
+  }
+}
+
 export function shouldExcludeValue(schema, context) {
   const excludeValue =
     schema.exclude !== undefined
@@ -207,7 +218,7 @@ export function initializeData(schema, data = {}, component, {
       { shouldSetDefaultsOfComponentsWithCompute }
     )
     if (shouldSetDefault) {
-      data[name] = getDefaultValue(schema, context)
+      setDefaultValue(schema, data, name, context)
     }
     if (hasItemsNumberedByOrderKey(schema) && isArray(data[name])) {
       updateOrder(schema, data[name])