@ditojs/admin 3.2.1 → 3.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "3.2.1",
+  "version": "3.2.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",
@@ -131,5 +131,5 @@
     "vue-router": "^5.3.1",
     "vue-upload-component": "^3.2.2"
   },
-  "gitHead": "c81ea5a206255d00588ea8b23f9df34af52cae01"
+  "gitHead": "04e5e45534cf76e1472d62c5fb9203d37d0161f7"
 }

package/src/DitoAdmin.js

@@ -177,6 +177,7 @@ export default class DitoAdmin {
         $sourceComponent: () => null,
         $resourceComponent: () => null,
         $dialogComponent: () => null,
+        $dataModel: () => null,
         $panelComponent: () => null,
         $tabComponent: () => null
       },

package/src/components/DitoDialog.vue

@@ -36,7 +36,7 @@ import { clone } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
 import DomMixin from '../mixins/DomMixin.js'
 import { getButtonSchemas } from '../utils/schema/lookup.js'
-import { FormModel } from '../utils/FormModel.js'
+import { DataModel } from '../utils/DataModel.js'
 import { UseFocusTrap } from '@vueuse/integrations/useFocusTrap/component'
 
 // @vue/component
@@ -47,7 +47,8 @@ export default DitoComponent.component('DitoDialog', {
 
   provide() {
     return {
-      $dialogComponent: () => this
+      $dialogComponent: () => this,
+      $dataModel: () => this.ownDataModel
     }
   },
 
@@ -79,6 +80,11 @@ export default DitoComponent.component('DitoDialog', {
   },
 
   computed: {
+    // @override DitoMixin.dataModel
+    dataModel() {
+      return this.ownDataModel
+    },
+
     dialogComponent() {
       return this
     },
@@ -129,8 +135,8 @@ export default DitoComponent.component('DitoDialog', {
 
   created() {
     // Writes defaults and computed values into the dialog's data and resolves
-    // options, see `FormModel`:
-    this.formModel = new FormModel({
+    // options, see `DataModel`:
+    this.ownDataModel = new DataModel({
       component: this,
       getSchema: () => this.schema,
       getData: () => this.dialogData
@@ -149,8 +155,8 @@ export default DitoComponent.component('DitoDialog', {
 
   beforeUnmount() {
     // Stop the model before the component's own watchers are stopped, as the
-    // model's watchers aren't part of the component, see `FormModel`.
-    this.formModel.stop()
+    // model's watchers aren't part of the component, see `DataModel`.
+    this.ownDataModel.stop()
   },
 
   methods: {
@@ -179,7 +185,7 @@ export default DitoComponent.component('DitoDialog', {
 
     async submit() {
       // Wait for computed values that depend on pending loads, e.g. options.
-      await this.waitForPendingLoadsOf(this.formModel)
+      await this.waitForPendingLoadsOf(this.dataModel)
       this.resolve(this.dialogData)
     },
 

package/src/components/DitoForm.vue

@@ -60,12 +60,18 @@ import { isObjectSource } from '../utils/schema/structure.js'
 import { getButtonSchemas } from '../utils/schema/lookup.js'
 import { getComponentPathByDataPath } from '../utils/schema/data.js'
 import { resolvePath } from '../utils/path.js'
-import { FormModel } from '../utils/FormModel.js'
+import { DataModel } from '../utils/DataModel.js'
 
 // @vue/component
 export default DitoComponent.component('DitoForm', {
   mixins: [RouteMixin, ResourceMixin],
 
+  provide() {
+    return {
+      $dataModel: () => this.ownDataModel
+    }
+  },
+
   data() {
     return {
       createdData: null,
@@ -74,6 +80,11 @@ export default DitoComponent.component('DitoForm', {
   },
 
   computed: {
+    // @override DitoMixin.dataModel
+    dataModel() {
+      return this.ownDataModel
+    },
+
     isForm() {
       return true
     },
@@ -149,7 +160,7 @@ export default DitoComponent.component('DitoForm', {
     isDirty() {
       // Forms that mutate the inherited data directly aren't dirty themselves,
       // their changes make the form that owns the data dirty instead.
-      return !this.isMutating && this.formModel.isDirty
+      return !this.isMutating && this.dataModel.isDirty
     },
 
     isMutating() {
@@ -354,8 +365,8 @@ 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 `FormModel`:
-    this.formModel = new FormModel({
+    // options and tracks whether the data is dirty, see `DataModel`:
+    this.ownDataModel = new DataModel({
       component: this,
       getSchema: () => this.schema,
       getData: () => this.data,
@@ -365,8 +376,8 @@ export default DitoComponent.component('DitoForm', {
 
   beforeUnmount() {
     // Stop the model before the component's own watchers are stopped, as the
-    // model's watchers aren't part of the component, see `FormModel`.
-    this.formModel.stop()
+    // model's watchers aren't part of the component, see `DataModel`.
+    this.ownDataModel.stop()
   },
 
   methods: {
@@ -437,9 +448,9 @@ export default DitoComponent.component('DitoForm', {
 
     // Makes clean changes to the data, which don't make the form dirty, e.g. to
     // apply what an action on the server already saved, see
-    // `FormModel.applyCleanChanges()`.
+    // `DataModel.applyCleanChanges()`.
     applyCleanChanges(makeChanges) {
-      return this.formModel.applyCleanChanges(makeChanges)
+      return this.dataModel.applyCleanChanges(makeChanges)
     },
 
     async cancel() {
@@ -462,7 +473,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.formModel)
+      await this.waitForPendingLoadsOf(this.dataModel)
       if (validate && !this.validateAll()) {
         return false
       }
@@ -545,7 +556,7 @@ export default DitoComponent.component('DitoForm', {
         this.resetValidation()
         // The saved or applied data isn't dirty, also when it isn't replaced,
         // e.g. by a response without data, and before the closing below:
-        this.formModel
+        this.dataModel
           .takeProcessedDataSnapshot()
           .catch(console.error)
         if (closeForm || button.closeForm) {

package/src/components/DitoView.vue

@@ -35,7 +35,7 @@ import {
   someNestedSchemaComponent
 } from '../utils/schema/structure.js'
 import { hasResource } from '../utils/resource.js'
-import { FormModel } from '../utils/FormModel.js'
+import { DataModel } from '../utils/DataModel.js'
 
 // @vue/component
 export default DitoComponent.component('DitoView', {
@@ -45,7 +45,8 @@ export default DitoComponent.component('DitoView', {
     // Redirect $sourceComponent and $resourceComponent to the main component:
     return {
       $sourceComponent: () => this.mainComponent?.sourceComponent || null,
-      $resourceComponent: () => this.mainComponent?.resourceComponent || null
+      $resourceComponent: () => this.mainComponent?.resourceComponent || null,
+      $dataModel: () => this.ownDataModel
     }
   },
 
@@ -60,6 +61,11 @@ export default DitoComponent.component('DitoView', {
   },
 
   computed: {
+    // @override DitoMixin.dataModel
+    dataModel() {
+      return this.ownDataModel
+    },
+
     schema() {
       return this.meta.schema ?? {}
     },
@@ -119,8 +125,8 @@ export default DitoComponent.component('DitoView', {
 
   created() {
     // Writes defaults and computed values into the view's data and resolves
-    // options, see `FormModel`:
-    this.formModel = new FormModel({
+    // options, see `DataModel`:
+    this.ownDataModel = new DataModel({
       component: this,
       getSchema: () => this.viewSchema,
       getData: () => this.data
@@ -136,8 +142,8 @@ export default DitoComponent.component('DitoView', {
 
   beforeUnmount() {
     // Stop the model before the component's own watchers are stopped, as the
-    // model's watchers aren't part of the component, see `FormModel`.
-    this.formModel.stop()
+    // model's watchers aren't part of the component, see `DataModel`.
+    this.ownDataModel.stop()
   },
 
   methods: {

package/src/mixins/DitoMixin.js

@@ -32,6 +32,7 @@ export default {
     '$sourceComponent',
     '$resourceComponent',
     '$dialogComponent',
+    '$dataModel',
     '$panelComponent',
     '$tabComponent'
   ],
@@ -57,6 +58,12 @@ export default {
   },
 
   computed: {
+    // The data model, provided by the form, view or dialog that owns it, which
+    // override it with their own.
+    dataModel() {
+      return this.$dataModel()
+    },
+
     providesData() {
       // NOTE: This is overridden in ResourceMixin, used by lists.
       return false
@@ -491,12 +498,12 @@ export default {
         : parentComponentPath
     },
 
-    // Waits for the pending loads of the form model, e.g. before submitting,
+    // 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(formModel) {
+    async waitForPendingLoadsOf(dataModel) {
       this.rootComponent.registerLoading(true)
       try {
-        await formModel.waitForPendingLoads()
+        await dataModel.waitForPendingLoads()
       } finally {
         this.rootComponent.registerLoading(false)
       }
@@ -615,17 +622,23 @@ export default {
             : handleParentListeners(undefined)
 
         return ['load', 'change'].includes(event)
-          ? // The effects of some events need time to propagate through Vue.
-            // Use $nextTick() to make sure our handlers see these changes.
-            // For example, `processedItem` is only correct after components
-            // that are newly rendered due to data changes have registered.
-            // NOTE: The result of `handleListeners()` makes it through the
-            // `$nextTick()` call and will be returned as expected.
-            this.$nextTick(handleListeners)
+          ? // The effects of these events need time to propagate, so that the
+            // handlers see them: Components that are newly rendered due to
+            // 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)
           : handleListeners()
       }
     },
 
+    // Waits until the data model settled: its loads finished, and it wrote the
+    // values that it derives from the data.
+    async waitForDataModel() {
+      await this.$nextTick()
+      await this.dataModel?.waitForPendingLoads()
+    },
+
     emitSchemaEvent(event, params) {
       return this.schemaComponent.emitEvent(event, params)
     }

package/src/mixins/OptionsMixin.js

@@ -82,12 +82,12 @@ export default {
       return this.getOptionForValue(this.selectedValue)
     },
 
-    // The resolver of the options in the form model of the data, which loads
-    // them and shares them with the computes of the form. It is looked up with
-    // the entry of this component, in the shape of the entries of
-    // `processSchemaData()`, see `FormModel`.
+    // The resolver of the options in the data model, which loads them and
+    // shares them with the computes of the form. It is looked up with the entry
+    // of this component, in the shape of the entries of `processSchemaData()`,
+    // see `DataModel`.
     optionsResolver() {
-      return this.formModel.getOptionsResolver({
+      return this.dataModel.getOptionsResolver({
         schema: this.schema,
         data: this.data,
         name: this.name,
@@ -247,7 +247,7 @@ export default {
     // made as a clean change, which doesn't make the form dirty.
     replaceValueWithSelectedValue() {
       const { selectedValue } = this
-      this.formModel
+      this.dataModel
         .applyCleanChanges(() => {
           this.selectedValue = selectedValue
         })

package/src/mixins/RouteMixin.js

@@ -129,7 +129,7 @@ export default {
         // `DitoRouterView`. Records of other paths, or none, mean that
         // the component is being left, and it keeps its record until it's
         // unmounted, as its schema and meta are still read in the meantime,
-        // e.g. by the watchers of its form model. Records of the same path
+        // e.g. by the watchers of its data model. Records of the same path
         // replace it, e.g. when the routes are set up again.
         const isOwnRouteRecord = (
           !!routeRecord &&

package/src/mixins/SourceMixin.js

@@ -481,7 +481,7 @@ export default {
     // their order key with the offset of the loaded page, so that their order
     // can be stored even if it never changes, e.g. by a button that saves the
     // current order. Lists in the data of forms, views and dialogs are
-    // numbered by `FormModel`, see `initializeData()`.
+    // numbered by `DataModel`, see `initializeData()`.
     setLoadedListItems(items) {
       this.setLoadedValue(
         updateOrder(this.sourceSchema, items, this.paginationRange)
@@ -491,9 +491,9 @@ export default {
     // Writes the value loaded through the source's resource. Loading isn't an
     // edit of the data, so the value is written as a clean change, which
     // doesn't make the form dirty, e.g. for sources whose value is stored,
-    // like the order of their items, see `FormModel.applyCleanChanges()`.
+    // like the order of their items, see `DataModel.applyCleanChanges()`.
     setLoadedValue(value) {
-      this.formModel
+      this.dataModel
         .applyCleanChanges(() => {
           this.value = value
         })

package/src/mixins/TypeMixin.js

@@ -37,11 +37,6 @@ export default {
       return this.schema.name
     },
 
-    // The form model of the data, owned by the dialog or route component.
-    formModel() {
-      return (this.dialogComponent ?? this.routeComponent).formModel
-    },
-
     type() {
       return this.schema.type
     },
@@ -197,17 +192,17 @@ export default {
   },
 
   methods: {
-    // Only the form model calls `compute()`, see `computeValue()`. Components
+    // Only the data model calls `compute()`, see `computeValue()`. Components
     // that it doesn't visit, e.g. in panels with their own data, never get
     // their values computed.
     warnAboutUncomputedValue() {
       if (
         this.schema.compute &&
-        !this.formModel.hasComputedValueEntry(this.componentPath)
+        !this.dataModel.hasComputedValueEntry(this.componentPath)
       ) {
         console.warn(
           `The value of the component at '${this.componentPath}' isn't ` +
-          `computed, as its data isn't part of a form model.`
+          `computed, as its data isn't part of a data model.`
         )
       }
     },

package/src/mixins/ValueMixin.js

@@ -6,7 +6,7 @@ export default {
   computed: {
     value: {
       get() {
-        // `FormModel` writes computed values into the data, see
+        // `DataModel` writes computed values into the data, see
         // `computeValue()`.
         const value = getValueOrDefault(
           this.schema,

package/src/types/DitoTypeComputed.vue

@@ -20,7 +20,7 @@ export default DitoTypeComponent.register(
     defaultValue: () => undefined, // Callback to override `defaultValue: null`
     defaultVisible: false,
     // The value is resolved from `schema.data` or `schema.dataPath` by
-    // `FormModel`, see `hasValueFromDataSchema()`:
+    // `DataModel`, see `hasValueFromDataSchema()`:
     valueFromDataSchema: true
   }
 )

package/src/utils/{FormModel.js → DataModel.js}

@@ -22,7 +22,7 @@ import {
   processData
 } from './schema/data.js'
 
-// FormModel holds the state of the data edited by a form, view or dialog that
+// DataModel holds the state of the data edited by a form, view or dialog that
 // is derived from schema and data, independently of what is rendered:
 //
 // - Missing values are set to their defaults when the data is set up, and when
@@ -39,7 +39,7 @@ import {
 // - Options, `schema.options`, are resolved per component when they are first
 //   read, by `compute()` through `context.options` or by the component that
 //   displays them, see `getOptions()`. Both get the same option objects, and
-//   computes that read options run again when they are loaded.
+//   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()`.
 // - The data is dirty when its processed data differs from a snapshot taken
@@ -60,7 +60,7 @@ import {
 // `dataPath`, `componentPath`, `rootData` and `mainSchemaComponent` are used
 // when present. The model needs to be stopped before the component unmounts.
 
-export class FormModel {
+export class DataModel {
   // The entries of the components with computed values and the scopes of the
   // watchers that write these values into the data, by component path:
   computedValueRecords = new Map()
@@ -651,7 +651,7 @@ const notFound = Symbol('notFound')
 const modelWatchOptions = { immediate: true, flush: 'post' }
 
 // Aborts `compute()` when it reads options that aren't loaded, see
-// `FormModel.getComputedValueResult()`.
+// `DataModel.getComputedValueResult()`.
 const optionsNotLoaded = Symbol('optionsNotLoaded')
 
 // Returns whether the schema is a source of computed values, through

package/src/utils/schema/data.js

@@ -129,7 +129,7 @@ export function shouldIgnoreMissingValue(schema, context) {
 // the type treats that as missing, e.g. nested sections.
 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.
+  // walk of the data model's data, don't depend on all values.
   return (
     !(name in data) || (
       !!getTypeOptions(schema)?.treatNullAsMissing?.(getContext(context)) &&
@@ -142,7 +142,7 @@ export function isMissingValue(schema, data, name, context) {
  * Returns whether the value of the component described by `schema` is
  * resolved from its data schema, `schema.data` or `schema.dataPath`, as for
  * the types with the `valueFromDataSchema` option, e.g. `computed`. See
- * `FormModel`.
+ * `DataModel`.
  */
 export function hasValueFromDataSchema(schema) {
   return (
@@ -227,7 +227,7 @@ export function initializeData(schema, data = {}, component, {
  * Returns the value of the component described by `schema` and `name` in
  * `data`: the result of `schema.compute()` if it returns a value, else the
  * value in `data`, or its default if it's missing. Never writes into `data`:
- * `FormModel` is the only caller and writes the computed values, including the
+ * `DataModel` is the only caller and writes the computed values, including the
  * defaults of components with `compute()`. Other defaults are written when the
  * data is set up, see `initializeData()`, or when they go missing later. If
  * provided, `getOptions()` returns the options for `context.options`, called
@@ -265,7 +265,7 @@ export function computeValue(schema, data, name, dataPath, {
       return properties
     })
   const { compute } = schema
-  // Like the form model, only compute values of components that are shown
+  // Like the data model, only compute values of components that are shown
   // through their `if`, as `compute()` may rely on the same conditions, e.g.
   // `if: ({ item }) => item.preview` with `compute: ({ item }) =>
   // item.preview.name`.
@@ -288,7 +288,7 @@ export function computeValue(schema, data, name, dataPath, {
 
 // Returns the value in `data`, or its default if it's missing. `context` can be
 // a function that creates the context, called only when it's needed. Computed
-// values are in `data` already, as `FormModel` writes them, see
+// values are in `data` already, as `DataModel` writes them, see
 // `computeValue()`.
 export function getValueOrDefault(schema, data, name, context) {
   const shouldUseDefault = (
@@ -325,11 +325,11 @@ export function processData(schema, sourceSchema, data, dataPath, {
   schemaOnly, // whether to only include data covered by the schema, or all data
   target,
   // Whether to call the schema callbacks `process()`. Data that is compared
-  // while it's edited, e.g. by `FormModel.isDirty`, isn't validated yet, which
+  // while it's edited, e.g. by `DataModel.isDirty`, isn't validated yet, which
   // the callbacks may rely on. Without them, the types still process the values
   // through `processValue()`, and the excluded values of components with
   // `process()` are kept, as `process()` may store them elsewhere through
-  // `processedItem`. Computed values are in the data already, as `FormModel`
+  // `processedItem`. Computed values are in the data already, as `DataModel`
   // writes them, see `computeValue()`.
   shouldCallProcess = true
 } = {}) {
@@ -558,7 +558,7 @@ export function processSchemaData(schema, data, {
           before?.(entry)
 
           // Only read the values of sources with forms, so that callers that
-          // are tracked, e.g. the walk of the form model's data, don't depend
+          // are tracked, e.g. the walk of the data model's data, don't depend
           // on all values.
           if (hasFormSchema(componentSchema)) {
             let value = processedData ? processedData[name] : data[name]

package/src/utils/schema/lookup.js

@@ -112,7 +112,7 @@ export function getFormSchemas(schema, context, modifyForm) {
 // 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
+// so that rendering and the walks of the data model, see `DataModel`, 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) {

package/types/index.d.ts

@@ -1092,14 +1092,17 @@ export interface SchemaFields<$Item> {
   onDestroy?: ItemEventHandler<$Item>
   /**
    * Called after data has been fetched from the API.
-   * Fires after all reactive updates have propagated.
+   * Fires after all reactive updates have propagated,
+   * once the values derived from the data are written,
+   * including the ones that depend on options to load.
    */
   onLoad?: ItemEventHandler<$Item>
   /**
    * Called after a value change is committed. Fires
-   * after all reactive updates have propagated. Bubbles
-   * to parent schemas — return `false` to stop
-   * propagation.
+   * after all reactive updates have propagated, once the
+   * values derived from the change are written, including
+   * the ones that depend on options to load. Bubbles to
+   * parent schemas — return `false` to stop propagation.
    */
   onChange?: ItemEventHandler<$Item>
 }