@ditojs/admin 2.100.0 → 3.1.0

package/src/components/DitoTrail.vue

@@ -24,14 +24,15 @@ import DitoComponent from '../DitoComponent.js'
 export default DitoComponent.component('DitoTrail', {
   computed: {
     trail() {
+      // Leave out the components that are being left, until they're unmounted.
       return this.appState.routeComponents.filter(
-        component => !!component.routeRecord
+        component => !component.isLeavingRoute
       )
     }
   },
 
   methods: {
-    getComponentPath(component) {
+    getComponentRoutePath(component) {
       // Do the same as in `DitoMenu`: Link menu items to the first children.
       const { schema } = component
       return schema.type === 'menu'
@@ -40,12 +41,12 @@ export default DitoComponent.component('DitoTrail', {
     },
 
     getComponentHref(component) {
-      return this.$router.resolve(this.getComponentPath(component)).href
+      return this.$router.resolve(this.getComponentRoutePath(component)).href
     },
 
     onClickComponent(component) {
       this.$router.push({
-        path: this.getComponentPath(component),
+        path: this.getComponentRoutePath(component),
         force: true
       })
     }

package/src/components/DitoTreeItem.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 .dito-tree-item(
-  :id="dataPath"
+  :id="componentPath"
   :class=`{
     'dito-tree-item--dragging': isDragging,
     'dito-tree-item--active': active
@@ -66,7 +66,6 @@
       td
         DitoLabel(
           v-if="property.label !== false"
-          :dataPath="getPropertyDataPath(property)"
           :label="getLabel(property)"
         )
       DitoTableCell(
@@ -83,7 +82,7 @@
     v-show="opened"
     :options="getDraggableOptions(true)"
     :draggable="childrenDraggable"
-    :modelValue="updateOrder(childrenSchema, childrenList)"
+    :modelValue="childrenList"
     @update:modelValue="value => (childrenList = value)"
   )
     DitoTreeItem(
@@ -107,9 +106,10 @@
 import DitoComponent from '../DitoComponent.js'
 import ItemMixin from '../mixins/ItemMixin'
 import SortableMixin from '../mixins/SortableMixin.js'
-import { appendDataPath } from '../utils/data.js'
+import { appendDataPath, getRelativeDataPath } from '../utils/data.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
-import { getNamedSchemas, hasFormSchema } from '../utils/schema.js'
+import { getNamedSchemas, hasFormSchema } from '../utils/schema/lookup.js'
+import { updateOrder } from '../utils/schema/data.js'
 import { stripHtml } from '@ditojs/utils'
 
 // @vue/component
@@ -137,6 +137,17 @@ export default DitoComponent.component('DitoTreeItem', {
   },
 
   computed: {
+    componentPath() {
+      // Continue the path of the tree list with the item indices and children
+      // names of the data path. The root item's data path doesn't contain the
+      // list's name, see `DitoTypeTreeList.treeDataPath`.
+      const { componentPath, dataPath } = this.container
+      const relativeDataPath = getRelativeDataPath(this.dataPath, dataPath)
+      return relativeDataPath
+        ? appendDataPath(componentPath, relativeDataPath)
+        : componentPath
+    },
+
     meta() {
       return this.container.meta
     },
@@ -174,7 +185,7 @@ export default DitoComponent.component('DitoTreeItem', {
       set(value) {
         const name = this.childrenSchema?.name
         if (name) {
-          this.updateOrder(this.childrenSchema, value)
+          updateOrder(this.childrenSchema, value)
           // eslint-disable-next-line vue/no-mutating-props
           this.data[name] = value
           this.$emit('update:data', value)

package/src/components/DitoView.vue

@@ -6,9 +6,9 @@ template(
   //- instead, to nest further route components.
   //- NOTE: This is different from the handling in DitoForm, where `v-show` is
   //- used to always render forms even when other nested forms are present.
-  RouterView(
+  DitoRouterView(
     v-if="!isLastRoute"
-    :key="name"
+    :routeLevel="routeLevel + 1"
   )
   .dito-view.dito-scroll-parent(
     v-else
@@ -33,8 +33,9 @@ import RouteMixin from '../mixins/RouteMixin.js'
 import {
   isSingleComponentView,
   someNestedSchemaComponent
-} from '../utils/schema.js'
+} from '../utils/schema/structure.js'
 import { hasResource } from '../utils/resource.js'
+import { FormModel } from '../utils/FormModel.js'
 
 // @vue/component
 export default DitoComponent.component('DitoView', {
@@ -116,6 +117,16 @@ 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({
+      component: this,
+      getSchema: () => this.viewSchema,
+      getData: () => this.data
+    })
+  },
+
   mounted() {
     // Prevent bypassing of if-condition by direct URL access.
     if (!this.shouldRenderSchema(this.viewSchema)) {
@@ -123,9 +134,16 @@ 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()
+  },
+
   methods: {
     setData(data) {
       this.data = data
+      return this.data
     },
 
     getChildPath(path) {

package/src/components/index.js

@@ -24,6 +24,7 @@ export { default as DitoButtons } from './DitoButtons.vue'
 export { default as DitoEditButtons } from './DitoEditButtons.vue'
 export { default as DitoCreateButton } from './DitoCreateButton.vue'
 export { default as DitoClipboard } from './DitoClipboard.vue'
+export { default as DitoRouterView } from './DitoRouterView.vue'
 export { default as DitoView } from './DitoView.vue'
 export { default as DitoForm } from './DitoForm.vue'
 export { default as DitoFormInner } from './DitoFormInner.vue'

package/src/mixins/DitoMixin.js

@@ -10,12 +10,10 @@ import {
 import appState from '../appState.js'
 import DitoContext from '../DitoContext.js'
 import EmitterMixin from './EmitterMixin.js'
-import {
-  flattenViews,
-  getSchemaValue,
-  shouldRenderSchema
-} from '../utils/schema.js'
+import { flattenViews } from '../utils/schema/setup.js'
+import { getSchemaValue, shouldRenderSchema } from '../utils/schema/data.js'
 import { getResource, getMemberResource } from '../utils/resource.js'
+import { appendDataPath, getRelativeDataPath } from '../utils/data.js'
 import { computed, reactive } from 'vue'
 
 // @vue/component
@@ -103,6 +101,27 @@ export default {
       return this.$root.$refs.root
     },
 
+    // The path of component names through views, tabs, panels and forms, with
+    // item indices from the data path, e.g. `main/chapters/0/title`. Unlike
+    // `dataPath`, it tells apart components that display the same data, and
+    // is used for registries and DOM ids. Components continue the path of
+    // their parent with the item indices that their data path adds to the
+    // parent's, e.g. inlined list items. `DitoContainer`, `DitoPane` and
+    // `DitoPanel` add the names of components, tabs and panels, `DitoButtons`
+    // the names of button groups, `DitoForm` and `DitoTreeItem` continue the
+    // path of the source of their item.
+    componentPath() {
+      return this.continueParentComponentPath()
+    },
+
+    // The data path that `componentPath` corresponds to, which children
+    // compare their data path with: the component's own, or for components
+    // without data path, e.g. `DitoDraggable` between lists and their items,
+    // the one of their parent.
+    dataPathForComponentPath() {
+      return this.dataPath ?? this.parentComponent?.dataPathForComponentPath
+    },
+
     // Use computed properties as links to injects, so DitoSchema can
     // override the property and return `this` instead of the parent.
     parentComponent() {
@@ -276,8 +295,9 @@ export default {
         : labelize(name) || ''
     },
 
-    getButtonAttributes(verb) {
-      const label = labelize(verb)
+    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)
       return {
         'class': `dito-button--${verb}`,
         'title': label,
@@ -451,6 +471,32 @@ export default {
       body.removeChild(a)
     },
 
+    // Returns the component path of the parent, continued with the item
+    // indices that the data path of this component adds to the parent's, see
+    // `componentPath`.
+    continueParentComponentPath() {
+      const { parentComponent } = this
+      const parentComponentPath = parentComponent?.componentPath ?? ''
+      const relativeDataPath = getRelativeDataPath(
+        this.dataPath,
+        parentComponent?.dataPathForComponentPath
+      )
+      return relativeDataPath
+        ? appendDataPath(parentComponentPath, relativeDataPath)
+        : parentComponentPath
+    },
+
+    // Waits for the pending loads of the form model, e.g. before submitting,
+    // showing the spinner in the header in the meantime, like requests do.
+    async waitForPendingLoadsOf(formModel) {
+      this.rootComponent.registerLoading(true)
+      try {
+        await formModel.waitForPendingLoads()
+      } finally {
+        this.rootComponent.registerLoading(false)
+      }
+    },
+
     notify(options) {
       this.rootComponent.notify(options)
     },

package/src/mixins/ItemMixin.js

@@ -1,10 +1,7 @@
 import DitoContext from '../DitoContext.js'
-import {
-  getItemFormSchema,
-  getItemId,
-  getItemUid,
-  isListSource
-} from '../utils/schema.js'
+import { isListSource } from '../utils/schema/structure.js'
+import { getItemFormSchema } from '../utils/schema/lookup.js'
+import { getItemId, getItemUid } from '../utils/schema/data.js'
 import { appendDataPath } from '../utils/data.js'
 import { isObject, isString, isNumber, isFunction } from '@ditojs/utils'
 

package/src/mixins/NumberMixin.js

@@ -1,8 +1,55 @@
 import { getSchemaAccessor } from '../utils/accessor.js'
+import { getSchemaValue } from '../utils/schema/data.js'
 import { isArray } from '@ditojs/utils'
 
 // @vue/component
 export default {
+  getTypeValidations(schema, context) {
+    // Mirrors the `min`, `max`, `range`, `step` and `decimals` accessors below,
+    // but based on the schema alone, so they can be used without a component.
+    const isInteger = schema.type === 'integer'
+    const getNumberSchemaValue = key =>
+      getSchemaValue(key, { type: Number, schema, context })
+    const roundIfInteger = (value, roundFunction) =>
+      isInteger && value != null ? roundFunction(value) : value
+    const range = getSchemaValue('range', { type: Array, schema, context })
+    const min = roundIfInteger(
+      getNumberSchemaValue('min') ?? range?.[0],
+      Math.floor
+    )
+    const max = roundIfInteger(
+      getNumberSchemaValue('max') ?? range?.[1],
+      Math.ceil
+    )
+    const step = roundIfInteger(getNumberSchemaValue('step'), Math.ceil)
+    const decimals = getNumberSchemaValue('decimals')
+    const validations = {}
+    if (min != null && max != null) {
+      validations.range = [min, max]
+    } else {
+      if (min != null) {
+        validations.min = min
+      }
+      if (max != null) {
+        validations.max = max
+      }
+    }
+    if (decimals != null) {
+      validations.decimals = decimals
+    } else if (step) {
+      const stepDecimals = (`${step}`.split('.')[1] || '').length
+      if (stepDecimals > 0) {
+        validations.decimals = stepDecimals
+      } else {
+        validations.integer = true
+      }
+    }
+    if (isInteger) {
+      validations.integer = true
+    }
+    return validations
+  },
+
   computed: {
     inputValue: {
       get() {
@@ -83,36 +130,5 @@ export default {
         }
       }
     })
-  },
-
-  methods: {
-    getValidations() {
-      const validations = {}
-      const { range, min, max, decimals, step } = this
-      if (range) {
-        validations.range = range
-      } else {
-        if (min != null) {
-          validations.min = min
-        }
-        if (max != null) {
-          validations.max = max
-        }
-      }
-      if (decimals != null) {
-        validations.decimals = decimals
-      } else if (step) {
-        const decimals = (`${step}`.split('.')[1] || '').length
-        if (decimals > 0) {
-          validations.decimals = decimals
-        } else {
-          validations.integer = true
-        }
-      }
-      if (this.isInteger) {
-        validations.integer = true
-      }
-      return validations
-    }
   }
 }

package/src/mixins/OptionsMixin.js

@@ -1,10 +1,7 @@
+import { toRaw } from 'vue'
 import DitoContext from '../DitoContext.js'
-import DataMixin from './DataMixin.js'
-import {
-  hasViewSchema,
-  getViewEditPath,
-  getMultipleValue
-} from '../utils/schema.js'
+import { hasViewSchema, getViewEditPath } from '../utils/schema/lookup.js'
+import { getMultipleValue } from '../utils/schema/data.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { setTemporaryId, isReference } from '../utils/data.js'
 import {
@@ -19,8 +16,6 @@ import {
 
 // @vue/component
 export default {
-  mixins: [DataMixin],
-
   computed: {
     // @overridable
     multiple() {
@@ -41,33 +36,27 @@ export default {
             : value
         }
 
-        const value =
-          this.multiple && isArray(this.value)
-            ? this.value.map(convertValue).filter(value => value !== null)
-            : convertValue(this.value)
-
-        if (
-          // As soon as the options are available, and...
-          this.hasOptions && (
-            // ...if the value is forced to null because a disappeared option...
-            value === null && this.value !== null ||
-            // ...or if the value is a reference, replace it with its option
-            // value, so that it'll hold actual data, not just a reference id.
-            isReference(this.value)
-          )
-        ) {
-          // TODO: Fix side-effects
-          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-          this.selectedValue = value
-        }
-        return value
+        return this.multiple && isArray(this.value)
+          ? this.value.map(convertValue).filter(value => value !== null)
+          : convertValue(this.value)
       },
 
       set(value) {
-        const convertValue = value =>
-          this.relate
-            ? this.getOptionForValue(value)
-            : value
+        const convertValue = value => {
+          if (!this.relate) {
+            return value
+          }
+          const option = this.getOptionForValue(value)
+          if (this.shouldSetTemporaryId(option)) {
+            // Options without ids, e.g. new items of the edited data, get
+            // temporary ids when selected, so that the relation can reference
+            // them when saving, see `SchemaGraph`.
+            // NOTE: We need to modify the actual data, making a copy won't
+            // work as it won't propagate.
+            setTemporaryId(option, 'id')
+          }
+          return option
+        }
 
         this.value =
           this.multiple && isArray(value)
@@ -76,16 +65,52 @@ 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`.
+    shouldReplaceValueWithSelectedValue() {
+      return (
+        this.hasOptions && (
+          this.selectedValue === null && this.value !== null ||
+          isReference(this.value)
+        )
+      )
+    },
+
     selectedOption() {
       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
+    // `processSchemaData()`, see `FormModel`.
+    optionsResolver() {
+      return this.formModel.getOptionsResolver({
+        schema: this.schema,
+        data: this.data,
+        name: this.name,
+        dataPath: this.dataPath,
+        componentPath: this.componentPath
+      })
+    },
+
+    isLoadingOptions() {
+      return this.optionsResolver.isLoading
+    },
+
     options() {
-      const data = this.handleDataSchema(this.schema.options, 'options') ?? []
-      if (!isArray(data)) {
-        throw new Error(`Invalid options data, should be array: ${data}`)
+      const options = this.optionsResolver.value ?? []
+      if (!isArray(options)) {
+        throw new Error(`Invalid options data, should be array: ${options}`)
       }
-      return this.processOptions(data)
+      return this.groupBy ? this.groupOptions(options) : options
     },
 
     activeOptions() {
@@ -188,48 +213,79 @@ export default {
     }
   },
 
+  watch: {
+    // Replace the value with the selected value as soon as the options are
+    // available, and also when the value changes while it still needs to be
+    // replaced, e.g. a relation without value that is set to a reference.
+    'shouldReplaceValueWithSelectedValue': {
+      handler(shouldReplace) {
+        if (shouldReplace) {
+          this.replaceValueWithSelectedValue()
+        }
+      },
+      immediate: true
+    },
+
+    'value'() {
+      if (this.shouldReplaceValueWithSelectedValue) {
+        this.replaceValueWithSelectedValue()
+      }
+    },
+
+    'optionsResolver.lastLoadError'(error) {
+      if (error) {
+        this.addError(error.message || error)
+      }
+    }
+  },
+
   methods: {
     getOptionKey(key) {
       const [option] = this.activeOptions
       return isObject(option) && key in option ? key : null
     },
 
-    processOptions(options) {
-      if (options.length) {
-        if (this.relate) {
-          // If ids are missing and we want to relate, set temporary ids.
-          // NOTE: We need to modify the actual data, making a copy won't work
-          // as it won't propagate.
-          // NOTE: This only makes sense if the data is from the graph that
-          // we're currently editing.
-          for (const option of options) {
-            if (!('id' in option)) {
-              // TODO: Fix side-effects
-              setTemporaryId(option, 'id')
+    // Writes the selected value back into the data, through the setter of
+    // `selectedValue`, which converts it to the value, e.g. a reference id to
+    // its option with `relate`, or a value whose option disappeared to `null`.
+    // This is derived from the options, not a change by the user, so it is
+    // made as a clean change, which doesn't make the form dirty.
+    replaceValueWithSelectedValue() {
+      const { selectedValue } = this
+      this.formModel
+        .applyCleanChanges(() => {
+          this.selectedValue = selectedValue
+        })
+        .catch(console.error)
+    },
+
+    // Groups the options by the `groupBy` key, see `groupByLabel` and
+    // `groupByOptions`.
+    groupOptions(options) {
+      const groups = {}
+      return options.reduce(
+        (results, option) => {
+          const groupName = option[this.groupBy]
+          let group = groups[groupName]
+          if (!group) {
+            group = groups[groupName] = {
+              [this.groupByLabel]: groupName,
+              [this.groupByOptions]: []
             }
+            results.push(group)
           }
-        }
-        if (this.groupBy) {
-          const grouped = {}
-          options = options.reduce(
-            (results, option) => {
-              const group = option[this.groupBy]
-              let entry = grouped[group]
-              if (!entry) {
-                entry = grouped[group] = {
-                  [this.groupByLabel]: group,
-                  [this.groupByOptions]: []
-                }
-                results.push(entry)
-              }
-              entry[this.groupByOptions].push(option)
-              return results
-            },
-            []
-          )
-        }
-      }
-      return options
+          group[this.groupByOptions].push(option)
+          return results
+        },
+        []
+      )
+    },
+
+    // Whether the option needs a temporary id to be related to, as it has no
+    // id yet, e.g. a new item of the edited data. It gets one when selected,
+    // see `selectedValue`.
+    shouldSetTemporaryId(option) {
+      return this.relate && isObject(option) && option.id == null
     },
 
     getOptionForValue(value) {
@@ -259,6 +315,11 @@ export default {
     },
 
     getValueForOption(option) {
+      if (this.shouldSetTemporaryId(option)) {
+        // Until they're selected and get temporary ids, options without ids
+        // are their own values, compared by identity, see `selectedValue`.
+        return toRaw(option)
+      }
       const { optionValue } = this
       return isString(optionValue)
         ? option?.[optionValue] ?? null
@@ -281,7 +342,7 @@ export default {
     if (schema.relate) {
       // For internally relating data (`schema.options.dataPath`), we need to
       // process both the options (for '#ref') and the value ('#id').
-      // See `DataMixin.handleDataSchema()`:
+      // See `DataSchemaResolver`:
       const path = schema.options?.dataPath
       const relatedDataPath = path
         ? normalizeDataPath(`${dataPath}/${path}`)

package/src/mixins/ResourceMixin.js

@@ -1,6 +1,6 @@
 import ItemMixin from './ItemMixin.js'
 import LoadingMixin from './LoadingMixin.js'
-import { setDefaultValues } from '../utils/schema.js'
+import { initializeData } from '../utils/schema/data.js'
 import { assignDeeply, isObject, isString, labelize } from '@ditojs/utils'
 import { getResource } from '../utils/resource.js'
 import DitoContext from '../DitoContext.js'
@@ -160,9 +160,12 @@ export default {
       this.loadedData = null
     },
 
+    // Sets the loaded data and returns it as the reactive data of the
+    // component, which can be modified to update it.
     // @overridable
     setData(data) {
       this.loadedData = data
+      return this.loadedData
     },
 
     setupData() {
@@ -196,7 +199,7 @@ export default {
     },
 
     createData(schema, type) {
-      return setDefaultValues(schema, type ? { type } : {}, this)
+      return initializeData(schema, type ? { type } : {}, this)
     },
 
     requestData() {