@ditojs/admin 3.1.2 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "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.2",
-    "@ditojs/utils": "^3.1.2"
+    "@ditojs/ui": "^3.2.0",
+    "@ditojs/utils": "^3.2.0"
   },
   "peerDependencies": {
     "@kyvg/vue3-notification": "^3.4.2",
@@ -87,7 +87,7 @@
     "vue-upload-component": "^3.2.2"
   },
   "devDependencies": {
-    "@ditojs/build": "^3.1.2",
+    "@ditojs/build": "^3.2.0",
     "@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": "a87ccff01f65386d9363366fb19bb993d38e8fbc"
+  "gitHead": "de9b23e9ff13e463947028566c5c0c50ded4e151"
 }

package/src/components/DitoCreateButton.vue

@@ -4,7 +4,7 @@
     v-if="creatableForm"
     :type="isInlined ? 'button' : 'submit'"
     :disabled="disabled"
-    v-bind="getButtonAttributes(verb, formLabel)"
+    v-bind="getButtonAttributes(verb, formLabel, text)"
     @click="createItem(creatableForm)"
   ) {{ text }}
   template(
@@ -13,7 +13,10 @@
     button.dito-button(
       type="button"
       :disabled="disabled"
-      v-bind="{ ...pulldownTriggerAttributes, ...getButtonAttributes(verb) }"
+      v-bind=`{
+        ...pulldownTriggerAttributes,
+        ...getButtonAttributes(verb, null, text)
+      }`
       @mousedown.stop="onPulldownMouseDown()"
     ) {{ text }}
     ul.dito-pulldown(

package/src/mixins/DitoMixin.js

@@ -295,13 +295,18 @@ export default {
         : labelize(name) || ''
     },
 
-    getButtonAttributes(verb, subject = null) {
-      // Name buttons by what they act on if known, e.g. 'Add Section'.
-      const label = subject ? `${labelize(verb)} ${subject}` : labelize(verb)
+    getButtonAttributes(verb, subject = null, text = null) {
+      // Buttons that display text are named by it, others by what they act on
+      // if known, e.g. 'Add Section'.
+      const label = text
+        ? null
+        : `${labelize(verb)}${subject ? ` ${subject}` : ''}`
       return {
-        'class': `dito-button--${verb}`,
-        'title': label,
-        'aria-label': label
+        class: `dito-button--${verb}`,
+        ...(label && {
+          'title': label,
+          'aria-label': label
+        })
       }
     },
 

package/src/mixins/OptionsMixin.js

@@ -82,11 +82,6 @@ export default {
       return this.getOptionForValue(this.selectedValue)
     },
 
-    // The form model of the data, owned by the dialog or route component.
-    formModel() {
-      return (this.dialogComponent ?? this.routeComponent).formModel
-    },
-
     // 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

package/src/mixins/SourceMixin.js

@@ -424,7 +424,7 @@ export default {
     // @override ResourceMixin.clearData()
     clearData() {
       this.total = 0
-      this.value = null
+      this.setLoadedValue(null)
     },
 
     // @override ResourceMixin.setData()
@@ -437,7 +437,7 @@ export default {
       if (this.isListSource && isArray(data)) {
         this.setLoadedListItems(data)
       } else if (!data || this.isObjectSource && isObject(data)) {
-        this.value = data
+        this.setLoadedValue(data)
       } else if (this.unwrapListData(data)) {
         // The format didn't match, see if we received a `{ results, total }`
         // object, in which case `this.value` was already set by
@@ -483,7 +483,21 @@ export default {
     // current order. Lists in the data of forms, views and dialogs are
     // numbered by `FormModel`, see `initializeData()`.
     setLoadedListItems(items) {
-      this.value = updateOrder(this.sourceSchema, items, this.paginationRange)
+      this.setLoadedValue(
+        updateOrder(this.sourceSchema, items, this.paginationRange)
+      )
+    },
+
+    // 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()`.
+    setLoadedValue(value) {
+      this.formModel
+        .applyCleanChanges(() => {
+          this.value = value
+        })
+        .catch(console.error)
     },
 
     createItem(schema, type, index = null) {

package/src/mixins/TypeMixin.js

@@ -37,6 +37,11 @@ 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
     },
@@ -184,6 +189,7 @@ export default {
   created() {
     this._register(true)
     this.setupSchemaFields()
+    this.warnAboutUncomputedValue()
   },
 
   unmounted() {
@@ -191,6 +197,21 @@ export default {
   },
 
   methods: {
+    // Only the form 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)
+      ) {
+        console.warn(
+          `The value of the component at '${this.componentPath}' isn't ` +
+          `computed, as its data isn't part of a form model.`
+        )
+      }
+    },
+
     _register(add) {
       // Provide component to container for schema accessor evaluation.
       this.$emit('update:component', add ? this : null)

package/src/mixins/ValueMixin.js

@@ -1,17 +1,25 @@
 import { isFunction } from '@ditojs/utils'
 import DitoContext from '../DitoContext.js'
-import { computeValue } from '../utils/schema/data.js'
+import { getValueOrDefault } from '../utils/schema/data.js'
 
 export default {
   computed: {
     value: {
       get() {
-        const value = computeValue(
+        // `FormModel` writes computed values into the data, see
+        // `computeValue()`.
+        const value = getValueOrDefault(
           this.schema,
           this.data,
           this.name,
-          this.dataPath,
-          { component: this }
+          () =>
+            DitoContext.createForSchema(this, {
+              schema: this.schema,
+              name: this.name,
+              data: this.data,
+              dataPath: this.dataPath,
+              rootData: this.rootData
+            })
         )
         // Only call `format()` if it's a function, as some types use `format`
         // for other purposes, e.g. `DitoTypeColor` for the color format.

package/src/types/DitoTypeMarkup.vue

@@ -251,9 +251,11 @@ export default DitoTypeComponent.register('markup', {
     const onFocus = () => this.onFocus()
 
     const onBlur = () => {
-      // Write the value first, so that validating on blur validates it.
+      // Write the value first, so that validating on blur validates it, and
+      // emit the change once the editor isn't focused anymore.
       updateValue()
       this.onBlur()
+      emitChange()
     }
 
     const onUpdate = () => {
@@ -275,9 +277,16 @@ export default DitoTypeComponent.register('markup', {
         ignoreWatch = true
         this.value = value
       }
-      if (!this.focused && changed) {
-        this.onChange()
+      if (!this.focused) {
+        emitChange()
+      }
+    }
+
+    // Emits the change of the value, once the editing is done.
+    const emitChange = () => {
+      if (changed) {
         changed = false
+        this.onChange()
       }
     }
 

package/src/utils/FormModel.js

@@ -92,7 +92,7 @@ export class FormModel {
       watch(
         [getSchema, getData],
         ([schema, data]) => this.initializeData(schema, data),
-        { immediate: true }
+        modelWatchOptions
       )
       // The entries are read through a computed property, so that the watchers
       // of the entries can check synchronously whether their entry is still
@@ -101,21 +101,23 @@ export class FormModel {
       watch(
         () => this.dataEntries.value.computedValueEntries,
         entries => this.updateComputedValueRecords(entries),
-        { immediate: true }
+        modelWatchOptions
       )
       // 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),
-        { immediate: true }
+        modelWatchOptions
       )
       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`.
         watch(
           getData,
           () => this.takeProcessedDataSnapshot().catch(console.error),
-          { immediate: true }
+          modelWatchOptions
         )
       }
     })
@@ -234,14 +236,14 @@ export class FormModel {
     const data = this.getData()
     return data && !isEmptySchema(schema)
       ? processData(schema, this.getSourceSchema(), data, this.dataPath, {
-          // Like `getComputedValue()`:
+          // Like `getComputedValueResult()`:
           component: this.component.mainSchemaComponent ?? this.component,
           rootData: this.rootData,
           schemaOnly: true,
           target: 'clipboard',
-          // Reading the dirty state doesn't call `compute()` and `process()`,
-          // see `processData()`:
-          shouldCallComputeAndProcess: false
+          // Reading the dirty state doesn't call `process()`, see
+          // `processData()`:
+          shouldCallProcess: false
         })
       : null
   }
@@ -417,15 +419,13 @@ export class FormModel {
           // Return a new object each time, so that the value is also written
           // when only the value in the data changed, e.g. through user input.
           () =>
-            isEntryCurrent.value
-              ? { value: this.getComputedValue(entry) }
-              : null,
+            isEntryCurrent.value ? this.getComputedValueResult(entry) : null,
           computedResult => {
             if (computedResult) {
               this.writeComputedValue(entry, computedResult.value)
             }
           },
-          { immediate: true }
+          modelWatchOptions
         )
       }
       if (hasValueFromDataSchema(entry.schema)) {
@@ -443,13 +443,19 @@ export class FormModel {
               this.writeComputedValue(entry, resolved.value)
             }
           },
-          { immediate: true }
+          modelWatchOptions
         )
       }
     })
     return scope
   }
 
+  // Returns whether the model computes the value of the component at the
+  // component path, i.e. whether its walk of the data visits the component.
+  hasComputedValueEntry(componentPath) {
+    return this.dataEntries.value.computedValueEntries.has(componentPath)
+  }
+
   // Returns whether the entry is still one of the current entries, with the
   // same schema and data, see `getDataEntries()`.
   isEntryCurrent({ componentPath, schema, data }) {
@@ -460,14 +466,37 @@ export class FormModel {
 
   // Calls `schema.compute()` with the main schema component of the data, like
   // `processData()`, and with the options resolved by the model, so that the
-  // result doesn't depend on whether the component is rendered.
-  getComputedValue(entry) {
+  // result doesn't depend on whether the component is rendered. Returns the
+  // value as `{ value }`, or `null` if `compute()` reads options that aren't
+  // loaded, which aborts it, so that the current value is kept until they are
+  // and `compute()` can rely on them. The watcher that calls it depends on the
+  // options through reading them, and calls it again once they're loaded.
+  getComputedValueResult(entry) {
     const { schema, data, name, dataPath } = entry
-    return computeValue(schema, data, name, dataPath, {
-      component: this.component.mainSchemaComponent ?? this.component,
-      rootData: this.rootData,
-      getOptions: schema.options ? () => this.getOptions(entry) : null
-    })
+    try {
+      const value = computeValue(schema, data, name, dataPath, {
+        component: this.component.mainSchemaComponent ?? this.component,
+        rootData: this.rootData,
+        getOptions: schema.options ? () => this.getLoadedOptions(entry) : null
+      })
+      return { value }
+    } catch (error) {
+      if (error === optionsNotLoaded) {
+        return null
+      }
+      throw error
+    }
+  }
+
+  // Returns the options of the component of the entry, or aborts the
+  // `compute()` that reads them, while they aren't loaded, see
+  // `getComputedValueResult()`.
+  getLoadedOptions(entry) {
+    const options = this.getOptions(entry)
+    if (options === undefined) {
+      throw optionsNotLoaded
+    }
+    return options
   }
 
   // Returns the options of the component of the entry, resolved from
@@ -612,6 +641,19 @@ 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.
+const modelWatchOptions = { immediate: true, flush: 'post' }
+
+// Aborts `compute()` when it reads options that aren't loaded, see
+// `FormModel.getComputedValueResult()`.
+const optionsNotLoaded = Symbol('optionsNotLoaded')
+
 // 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

@@ -227,9 +227,9 @@ 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`:
- * Computed values, including the defaults of components with `compute()`, are
- * written by `FormModel`, and other defaults when the data is set up, see
- * `initializeData()`, or when they go missing later, see `FormModel`. If
+ * `FormModel` 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
  * only when they're read.
  */
@@ -287,8 +287,10 @@ 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.
-function getValueOrDefault(schema, data, name, context) {
+// a function that creates the context, called only when it's needed. Computed
+// values are in `data` already, as `FormModel` writes them, see
+// `computeValue()`.
+export function getValueOrDefault(schema, data, name, context) {
   const shouldUseDefault = (
     isMissingValue(schema, data, name, context) &&
     !shouldIgnoreMissingValue(schema, context)
@@ -322,35 +324,33 @@ export function processData(schema, sourceSchema, data, dataPath, {
   rootData,
   schemaOnly, // whether to only include data covered by the schema, or all data
   target,
-  // Whether to call the schema callbacks `compute()` and `process()`. Data that
-  // is compared while it's edited, e.g. by `FormModel.isDirty`, isn't validated
-  // yet, which the callbacks may rely on, and `FormModel` writes the computed
-  // values into the data. Without them, the values in the data are used, or
-  // their defaults if they're missing, the types still process them through
-  // `processValue()`, and the excluded values of components with `process()`
-  // are kept, as `process()` may store them elsewhere through `processedItem`.
-  shouldCallComputeAndProcess = true
+  // 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
+  // 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`
+  // writes them, see `computeValue()`.
+  shouldCallProcess = true
 } = {}) {
   const options = { component, rootData, schemaOnly, target }
   const processedData = cloneItem(sourceSchema, data, options)
   const graph = new SchemaGraph()
 
   const before = ({ schema, data, name, dataPath, processedData }) => {
-    let value = shouldCallComputeAndProcess
-      ? computeValue(schema, data, name, dataPath, options)
-      : getValueOrDefault(
+    let value = getValueOrDefault(
+      schema,
+      data,
+      name,
+      () =>
+        new DitoContext(component, {
           schema,
-          data,
           name,
-          () =>
-            new DitoContext(component, {
-              schema,
-              name,
-              data,
-              dataPath,
-              rootData: options.rootData
-            })
-        )
+          data,
+          dataPath,
+          rootData: options.rootData
+        })
+    )
     // The schema expects the `wrapPrimitives` transformations to be present on
     // the data that it is applied on, so warp before and unwrap after.
     if (isArray(value)) {
@@ -400,13 +400,13 @@ export function processData(schema, sourceSchema, data, dataPath, {
 
     // Handle the user's `process()` callback next, if one is provided, so that
     // it can modify data in `processedData` even if it provides `exclude: true`
-    if (process && shouldCallComputeAndProcess) {
+    if (process && shouldCallProcess) {
       value = process(getContext(context))
     }
 
     // Without calling `process()`, keep the excluded values that it may store
-    // elsewhere, see `shouldCallComputeAndProcess`:
-    const shouldKeepExcludedValue = !!process && !shouldCallComputeAndProcess
+    // elsewhere, see `shouldCallProcess`:
+    const shouldKeepExcludedValue = !!process && !shouldCallProcess
     if (!shouldKeepExcludedValue && shouldExcludeValue(schema, context)) {
       delete processedData[name]
     } else {

package/types/index.d.ts

@@ -343,7 +343,11 @@ export interface BaseSchema<$Item>
    * Computes and sets the field value reactively, also
    * when the field isn't rendered, unless its `if`
    * evaluates to `false`. If the callback returns
-   * `undefined`, the current value is preserved.
+   * `undefined`, the current value is preserved. The
+   * value is computed into the data, which is what is
+   * displayed and saved. As the callback runs whenever
+   * the data it reads changes, it should only return a
+   * value and not change data.
    *
    * As it doesn't depend on the field's component, the
    * context's component properties, e.g. `component`
@@ -1995,9 +1999,10 @@ export type DitoContext<$Item = any> = {
   option: any
   /**
    * All available options in a select. In `compute()`, they are
-   * loaded when first read, also when the field isn't rendered,
-   * and are `undefined` while loading; the callback runs again
-   * once they are loaded.
+   * loaded when first read, also when the field isn't rendered.
+   * Reading them while they load ends the callback, which keeps
+   * the current value and runs again once they are loaded, so
+   * they are always available in it.
    */
   options: any
   /**