@ditojs/admin 3.2.4 → 3.2.6

package/src/types/DitoTypeMultiselect.vue

@@ -37,6 +37,21 @@
       @tag="onAddTag"
       @search-change="onSearchChange"
     )
+      //- The default tag, which marks values without options.
+      template(#tag="{ option, remove }")
+        span.multiselect__tag.dito-multiselect__tag(
+          :class=`{
+            'dito-multiselect__tag--unavailable': isUnavailableOption(option)
+          }`
+          :title="isUnavailableOption(option) ? 'Not among the options' : null"
+          @mousedown.prevent
+        )
+          span {{ getLabelForOption(option) }}
+          i.multiselect__tag-icon(
+            tabindex="1"
+            @keydown.enter.prevent="remove(option)"
+            @mousedown.prevent="remove(option)"
+          )
     DitoAffixes(
       :items="schema.suffix"
       position="suffix"
@@ -70,7 +85,7 @@ import OptionsMixin from '../mixins/OptionsMixin.js'
 import DitoAffixes from '../components/DitoAffixes.vue'
 import VueMultiselect from 'vue-multiselect'
 import { getSchemaAccessor } from '../utils/accessor.js'
-import { isBoolean } from '@ditojs/utils'
+import { isArray, isBoolean, isObject, isString } from '@ditojs/utils'
 
 // @vue/component
 export default DitoTypeComponent.register('multiselect', {
@@ -90,18 +105,22 @@ export default DitoTypeComponent.register('multiselect', {
   computed: {
     selectedOptions: {
       get() {
+        // Values without options stay visible once the options are loaded,
+        // and are kept when the selection changes, see `getFallbackOption()`,
+        // unless the multiselect is taggable and can add them as options.
         return this.multiple
-          ? (this.selectedValue || [])
-              .map(
-                // If an option cannot be found, we may be in taggable mode and
-                // can add it.
-                value => (
-                  this.getOptionForValue(value) || this.addTagOption(value)
+          ? this.hasOptions && isArray(this.value)
+            ? this.value.map(value => {
+                const selectedValue = this.relate
+                  ? this.getValueForOption(value)
+                  : value
+                return (
+                  this.getOptionForValue(selectedValue) ||
+                  this.addTagOption(selectedValue) ||
+                  this.getFallbackOption(value)
                 )
-              )
-              // Filter out options that we couldn't match.
-              // TODO: Should we display an error instead?
-              .filter(Boolean)
+              })
+            : []
           : this.selectedOption
       },
 
@@ -196,6 +215,27 @@ export default DitoTypeComponent.register('multiselect', {
       }
     },
 
+    // Returns whether the option is a fallback option for a value without
+    // one, see `getFallbackOption()`. Plain options are their own values.
+    isUnavailableOption(option) {
+      return this.optionValue
+        ? !this.getOptionForValue(this.getValueForOption(option))
+        : !this.options.includes(option)
+    },
+
+    // Returns an option for a value without one, e.g. of options that only
+    // hold the results of searches: Related objects are their own options,
+    // other values get an option that holds them as value and label.
+    getFallbackOption(value) {
+      const { optionValue, optionLabel } = this
+      return isObject(value) || !isString(optionValue)
+        ? value
+        : {
+            [optionValue]: value,
+            ...(isString(optionLabel) && { [optionLabel]: `${value}` })
+          }
+    },
+
     focusElement() {
       this.$refs.element.activate()
     },
@@ -289,6 +329,16 @@ $tag-line-height: 1em;
   display: inline-flex;
   position: relative;
 
+  &__tag {
+    color: $color-text-inverted;
+    background: $color-active;
+
+    // Values without options, see `getFallbackOption()`.
+    &--unavailable {
+      background: $color-grey;
+    }
+  }
+
   &__inner {
     flex: 1;
     position: relative;
@@ -463,11 +513,6 @@ $tag-line-height: 1em;
       }
     }
 
-    &__tag {
-      color: $color-text-inverted;
-      background: $color-active;
-    }
-
     &__tag-icon {
       background: none;
       border-radius: 1em;

package/src/types/DitoTypeTreeList.vue

@@ -6,7 +6,9 @@
     :scopes="scopes"
   )
   .dito-tree-panel
+    //- Objects that are `null` have no tree, as tree items can't create them.
     DitoTreeItem(
+      v-if="treeData"
       :schema="treeSchema"
       :dataPath="treeDataPath"
       :data="treeData"

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
@@ -166,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()
     }
@@ -180,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,
@@ -200,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 !==
@@ -265,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
@@ -283,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))
@@ -339,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.
@@ -371,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)
         )
       }
@@ -532,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 }) {
@@ -660,6 +741,10 @@ const modelWatchOptions = { immediate: true, flush: 'post' }
 // `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/DataSchemaResolver.js

@@ -17,7 +17,7 @@ import {
 //   e.g. `data: ({ item: { id } }) => async () => load(id)`, so that loading
 //   only starts again when these dependencies change.
 // - `dataPath` is resolved relative to the data path of the context, in its
-//   root data, e.g. `'../fontFamily/fontShopSets'`.
+//   root data, e.g. `'../author/books'`.
 // - Data schemas that aren't objects are values, e.g. `options: ['A', 'B']`.
 //
 // While a value is loading, `value` is `undefined` and `isLoading` is `true`.

package/src/utils/options.js

@@ -44,8 +44,8 @@ const ditoOptionKeys = [
   'processSchema',
   'getPanelSchema',
   'getFormSchemasForProcessing',
-  // Vue 3 / Vue-router 4 forgets these.
-  // TODO: Create bug-report?
+  // vue-router reads route guards from the raw component options, without
+  // their mixins, see `extractComponentsGuards()` in its `navigationGuards.ts`.
   'beforeRouteUpdate',
   'beforeRouteLeave'
 ]

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])

package/types/index.d.ts

@@ -3043,9 +3043,10 @@ interface TreeSchema<$Item, $Type extends 'tree-list' | 'tree-object'>
     name: string
   }
   /**
-   * Properties schema for tree nodes.
+   * The properties shown for tree nodes, displayed like the columns of
+   * lists.
    */
-  properties?: Record<string, Component<$Item>>
+  properties?: Columns<$Item>
   /**
    * Whether child nodes are expanded by default.
    */