@ditojs/admin 2.99.1 → 3.0.0

package/src/mixins/RouteMixin.js

@@ -1,4 +1,5 @@
 import ValidatorMixin from '../mixins/ValidatorMixin.js'
+import { markRaw } from 'vue'
 import { getCommonPrefix } from '@ditojs/utils'
 
 // @vue/component
@@ -14,6 +15,9 @@ export default {
   data() {
     return {
       reload: false,
+      // The record of the route that this component renders, see the
+      // `matchedRouteRecord` watcher:
+      routeRecord: null,
       // Each route-component defines a store that gets passed on to its
       // child components, so they can store values in them that live beyond
       // their life-cycle. See: DitoPane, SourceMixin
@@ -37,10 +41,19 @@ export default {
       return level
     },
 
-    routeRecord() {
+    // The record that the current route matches at this component's level,
+    // which is another record or `undefined` while the component is being left,
+    // until it's unmounted, see `routeRecord`.
+    matchedRouteRecord() {
       return this.$route.matched[this.routeLevel]
     },
 
+    // Whether the current route doesn't match the component's record anymore,
+    // so that the component is about to be unmounted.
+    isLeavingRoute() {
+      return this.matchedRouteRecord?.path !== this.routeRecord?.path
+    },
+
     isLastRoute() {
       // Returns true when this router component is the last one in the route.
       const { matched } = this.$route
@@ -106,6 +119,31 @@ export default {
     }
   },
 
+  watch: {
+    matchedRouteRecord: {
+      immediate: true,
+      // Update synchronously, so that the record changes with the route.
+      flush: 'sync',
+      handler(routeRecord) {
+        // Components belong to the record that they're rendered for, see
+        // `getRouteComponentKey()`. 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
+        // replace it, e.g. when the routes are set up again.
+        const isOwnRouteRecord = (
+          !!routeRecord &&
+          (!this.routeRecord || routeRecord.path === this.routeRecord.path)
+        )
+        if (isOwnRouteRecord) {
+          // Keep the record raw, as it's compared with the records in
+          // `$route.matched`, which aren't reactive.
+          this.routeRecord = markRaw(routeRecord)
+        }
+      }
+    }
+  },
+
   beforeRouteUpdate(to, from) {
     return this?.beforeRouteChange(to, from)
   },

package/src/mixins/SortableMixin.js

@@ -33,19 +33,6 @@ export default {
       if (oldIndex !== newIndex) {
         this.onChange()
       }
-    },
-
-    updateOrder(sourceSchema, list, paginationRange) {
-      const { orderKey } = sourceSchema
-      if (orderKey) {
-        // Reorder the changed entries by their order key, taking pagination
-        // offsets into account:
-        const offset = paginationRange?.[0] || 0
-        for (let i = 0; i < list.length; i++) {
-          list[i][orderKey] = i + offset
-        }
-      }
-      return list
     }
   }
 }

package/src/mixins/SourceMixin.js

@@ -6,19 +6,21 @@ import { getSchemaAccessor, getStoreAccessor } from '../utils/accessor.js'
 import { getMemberResource } from '../utils/resource.js'
 import { replaceRoute } from '../utils/route.js'
 import {
-  processRouteSchema,
-  processForms,
+  isCompact,
+  isInlined,
+  isObjectSource,
+  isListSource
+} from '../utils/schema/structure.js'
+import { setupRouteSchema, setupForms } from '../utils/schema/setup.js'
+import {
   getNamedSchemas,
   getButtonSchemas,
   hasFormSchema,
   getFormSchemas,
   getViewSchema,
-  getViewPath,
-  isCompact,
-  isInlined,
-  isObjectSource,
-  isListSource
-} from '../utils/schema.js'
+  getViewPath
+} from '../utils/schema/lookup.js'
+import { updateOrder } from '../utils/schema/data.js'
 import {
   isObject,
   isString,
@@ -28,7 +30,6 @@ import {
   parseDataPath,
   normalizeDataPath
 } from '@ditojs/utils'
-import { raw } from '@ditojs/ui'
 
 // @vue/component
 export default {
@@ -46,8 +47,7 @@ export default {
 
   data() {
     return {
-      wrappedPrimitives: null,
-      unwrappingPrimitives: raw(false)
+      wrappedPrimitives: null
     }
   },
 
@@ -90,39 +90,27 @@ export default {
       return this.schema.wrapPrimitives
     },
 
+    valueListData() {
+      // The list of items held by `value`, before wrapping primitives.
+      const { value } = this
+      return this.isObjectSource
+        ? value != null
+          ? [value]
+          : []
+        : (this.isListResults(value) ? value.results : value) || []
+    },
+
+    primitiveValues() {
+      // The values of `wrapPrimitives` lists, copied so that changes of their
+      // entries are tracked too, see the `primitiveValues` watcher.
+      return this.wrapPrimitives ? [...this.valueListData] : null
+    },
+
     listData: {
       get() {
-        let data = this.value
-        if (this.isObjectSource) {
-          // Convert to list array.
-          data = data != null ? [data] : []
-        } else {
-          // If data gets inherited from parent, unwrapping is not happening
-          // at the root in `setData()`, but here instead.
-          data = this.unwrapListData(data) || data
-        }
-        data ||= []
-        const { wrapPrimitives } = this
-        if (wrapPrimitives) {
-          if (this.unwrappingPrimitives.value) {
-            // We're done unwrapping once `listData` is reevaluated, so set
-            // this to `false` again. See `wrappedPrimitives` watcher above.
-            // TODO: Fix side-effects
-            // eslint-disable-next-line max-len
-            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-            this.unwrappingPrimitives.value = false
-          } else {
-            // Convert data to a list of wrapped primitives, and return it.
-            // TODO: Fix side-effects
-            // eslint-disable-next-line max-len
-            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-            this.wrappedPrimitives = data.map(value => ({
-              [wrapPrimitives]: value
-            }))
-          }
-          return this.wrappedPrimitives
-        }
-        return data
+        return this.wrapPrimitives
+          ? this.wrappedPrimitives || []
+          : this.valueListData
       },
 
       set(data) {
@@ -133,7 +121,7 @@ export default {
             ? data?.length > 0
               ? data[0]
               : null
-            : data
+            : updateOrder(this.sourceSchema, data, this.paginationRange)
         }
       }
     },
@@ -289,6 +277,11 @@ export default {
       default: null
     }),
 
+    hasItems() {
+      // Object sources only have an item to edit or delete once they're set.
+      return this.isListSource || !!this.value
+    },
+
     creatable: getSchemaAccessor('creatable', {
       type: Boolean,
       default: false,
@@ -305,13 +298,16 @@ export default {
       type: Boolean,
       default: false,
       get(editable) {
-        return editable && !this.isInlined
+        return editable && !this.isInlined && this.hasItems
       }
     }),
 
     deletable: getSchemaAccessor('deletable', {
       type: Boolean,
-      default: false
+      default: false,
+      get(deletable) {
+        return deletable && this.hasItems
+      }
     }),
 
     draggable: getSchemaAccessor('draggable', {
@@ -382,18 +378,38 @@ export default {
       }
     },
 
+    value: {
+      immediate: true,
+      handler(value) {
+        // If data gets inherited from parent, unwrapping `{ results, total }`
+        // isn't happening at the root in `setData()`, but here instead.
+        if (this.isListResults(value)) {
+          this.unwrapListData(value)
+        }
+      }
+    },
+
+    primitiveValues: {
+      immediate: true,
+      handler(values) {
+        // Wrap the primitive values in objects for the list's forms to edit,
+        // unless they're the values that were just unwrapped from them.
+        if (values && !equals(values, this.unwrapPrimitives())) {
+          const { wrapPrimitives } = this
+          this.wrappedPrimitives = values.map(value => ({
+            [wrapPrimitives]: value
+          }))
+        }
+      }
+    },
+
     wrappedPrimitives: {
       deep: true,
-      handler(to, from) {
-        const { wrapPrimitives } = this
-        // Skip the initial setting of wrappedPrimitives array
-        if (wrapPrimitives && from !== null) {
-          // Whenever the wrappedPrimitives change, map their values back to the
-          // array of primitives, in a primitive way :)
-          // But set `unwrappingPrimitives` to true, so the `listData` computed
-          // property knows about it, which sets it to `false` again.
-          this.unwrappingPrimitives.value = true
-          this.value = to.map(object => object[wrapPrimitives])
+      handler() {
+        // Map edits of the wrapped primitives back to the primitive values.
+        const values = this.unwrapPrimitives()
+        if (values && !equals(values, this.primitiveValues)) {
+          this.value = values
         }
       }
     }
@@ -418,11 +434,9 @@ export default {
       // Support two formats for list data:
       // - Array: `[...]`
       // - Object: `{ results: [...], total }`, see `unwrapListData()`
-      if (
-        !data ||
-        this.isListSource && isArray(data) ||
-        this.isObjectSource && isObject(data)
-      ) {
+      if (this.isListSource && isArray(data)) {
+        this.setLoadedListItems(data)
+      } else if (!data || this.isObjectSource && isObject(data)) {
         this.value = data
       } else if (this.unwrapListData(data)) {
         // The format didn't match, see if we received a `{ results, total }`
@@ -431,33 +445,60 @@ export default {
       } else if (isObject(data) && this.isInView) {
         // The controller is sending data for a full multi-component view,
         // including the nested list data.
-        this.viewComponent.setData(data)
+        return this.viewComponent.setData(data)
       }
+      return this.value
     },
 
-    unwrapListData(data) {
-      if (
+    isListResults(data) {
+      // Lists can also be loaded as `{ results, total }`, see `setData()`.
+      return (
         this.isListSource &&
         isObject(data) &&
         isNumber(data.total) &&
         isArray(data.results)
-      ) {
+      )
+    },
+
+    unwrapPrimitives() {
+      const { wrapPrimitives, wrappedPrimitives } = this
+      return wrapPrimitives && wrappedPrimitives
+        ? wrappedPrimitives.map(object => object[wrapPrimitives])
+        : null
+    },
+
+    unwrapListData(data) {
+      if (this.isListResults(data)) {
         // If @ditojs/server sends data in the form of `{ results, total }`
         // replace the value with result, but remember the total in the store.
         this.total = data.total
-        this.value = data.results
+        this.setLoadedListItems(data.results)
         return this.value
       }
     },
 
+    // Sets the list items loaded through the source's resource, numbered by
+    // 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()`.
+    setLoadedListItems(items) {
+      this.value = updateOrder(this.sourceSchema, items, this.paginationRange)
+    },
+
     createItem(schema, type, index = null) {
       const item = this.createData(schema, type)
       if (this.isObjectSource) {
         this.objectData = item
-      } else if (index != null) {
-        this.listData.splice(index, 0, item)
       } else {
-        this.listData.push(item)
+        const { listData } = this
+        if (index != null) {
+          listData.splice(index, 0, item)
+        } else {
+          listData.push(item)
+        }
+        // Set the list back, as `listData` is a new array for `null` values.
+        this.listData = listData
       }
       if (this.collapsible) {
         this.$nextTick(() => this.openSchemaComponent(index ?? -1))
@@ -475,6 +516,8 @@ export default {
         const { listData } = this
         if (index >= 0) {
           listData.splice(index, 1)
+          // Set the list back, to update the order of the remaining items.
+          this.listData = listData
           removed = true
         }
       }
@@ -556,31 +599,34 @@ export default {
       }
     },
 
-    async navigateToComponent(dataPath, onComplete) {
-      if (this.collapsible) {
-        const index = dataPath.startsWith(this.dataPath)
-          ? this.isListSource
-            ? parseDataPath(dataPath.slice(this.dataPath.length + 1))[0] ?? null
-            : 0
-          : null
-        if (index !== null && isNumber(+index)) {
-          const schemaComponent = this.getSchemaComponent(+index)
-          if (schemaComponent) {
-            const { opened } = schemaComponent
-            if (!opened) {
-              schemaComponent.opened = true
-              await this.$nextTick()
-            }
-            const components = schemaComponent.getComponentsByDataPath(dataPath)
-            if (components.length > 0 && (onComplete?.(components) ?? true)) {
-              return true
-            } else {
-              schemaComponent.opened = opened
-            }
-          }
+    // See `DitoSchema.navigateToComponent()`, and `shouldRevealInlinedOnly`
+    // there.
+    async navigateToComponent(
+      dataPath,
+      onComplete,
+      { shouldRevealInlinedOnly = false } = {}
+    ) {
+      const index = dataPath.startsWith(this.dataPath)
+        ? this.isListSource
+          ? parseDataPath(dataPath.slice(this.dataPath.length + 1))[0] ?? null
+          : 0
+        : null
+      if (index !== null && isNumber(+index)) {
+        // Inlined items reveal the component themselves, opening collapsed
+        // items and sections, see `DitoSchema.navigateToComponent()`.
+        const schemaComponent = this.getSchemaComponent(+index)
+        if (
+          await schemaComponent?.navigateToComponent(dataPath, onComplete, {
+            shouldRevealInlinedOnly
+          })
+        ) {
+          return true
         }
       }
-      return this.navigateToRouteComponent(dataPath, onComplete)
+      return (
+        !shouldRevealInlinedOnly &&
+        this.navigateToRouteComponent(dataPath, onComplete)
+      )
     },
 
     navigateToRouteComponent(dataPath, onComplete) {
@@ -637,7 +683,7 @@ export default {
     flatten = false,
     process = null
   ) {
-    processRouteSchema(api, schema, name)
+    setupRouteSchema(api, schema, name)
     const inlined = isInlined(schema)
     if (inlined && schema.resource) {
       throw new Error(
@@ -666,7 +712,7 @@ export default {
       nested,
       param
     }
-    const childRoutes = await processForms(api, schema, level)
+    const childRoutes = await setupForms(api, schema, level)
     if (process) {
       await process(childRoutes, level + 1)
     }
@@ -695,8 +741,9 @@ export default {
           path: getPathWithParam(sourcePath, param)
         })
       }
-      if (sourcePath) {
-        // Just redirect back to the parent when a nested source route is hit.
+      if (sourcePath && isListSource(schema)) {
+        // Just redirect back to the parent when a nested list route is hit.
+        // Object sources use this path for their form route instead.
         routes.push({
           path: sourcePath,
           redirect: '.',

package/src/mixins/TextMixin.js

@@ -1,5 +1,5 @@
 import { isString } from '@ditojs/utils'
-import { getDefaultValue } from '../utils/schema.js'
+import { getDefaultValue } from '../utils/schema/data.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 
 // @vue/component

package/src/mixins/TypeMixin.js

@@ -2,7 +2,8 @@ import ValueMixin from './ValueMixin.js'
 import ContextMixin from './ContextMixin.js'
 import ValidationMixin from './ValidationMixin.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
-import { asArray, camelize } from '@ditojs/utils'
+import { getValidations } from '../utils/schema/validation.js'
+import { asArray, camelize, equals } from '@ditojs/utils'
 
 // @vue/component
 export default {
@@ -131,7 +132,8 @@ export default {
 
       const attributes = {
         ...this.events,
-        disabled: this.disabled
+        // Only text fields support `readonly`, disable all other components.
+        disabled: this.disabled || (this.readonly && !textField)
       }
 
       if (nativeField) {
@@ -152,19 +154,7 @@ export default {
     },
 
     validations() {
-      const validations = { ...this.getValidations() }
-      if (this.required) {
-        validations.required = true
-      }
-      // Allow schema to override default rules and add any new ones:
-      for (const [key, value] of Object.entries(this.schema.rules || {})) {
-        if (value === undefined) {
-          delete validations[key]
-        } else {
-          validations[key] = value
-        }
-      }
-      return validations
+      return getValidations(this.schema, this.context)
     },
 
     showClearButton() {
@@ -172,6 +162,25 @@ export default {
     }
   },
 
+  watch: {
+    value(value) {
+      // Displayed errors refer to the value that they were added for, see
+      // `addError()`, so they're cleared when the value changes, whether
+      // through input or by code, e.g. by a button that generates a value.
+      // Errors that were added for the new value already, e.g. by `validate()`
+      // on blur right after the change, are kept.
+      if (this.hasErrors && !equals(value, this.valueWithErrors)) {
+        this.clearErrors()
+      }
+    },
+
+    componentPath(componentPath, oldComponentPath) {
+      // Component paths change when list items move, see `_registerEntry()`.
+      this._registerWithSchemaComponent(false, oldComponentPath)
+      this._registerWithSchemaComponent(true, componentPath)
+    }
+  },
+
   created() {
     this._register(true)
     this.setupSchemaFields()
@@ -185,9 +194,20 @@ export default {
     _register(add) {
       // Provide component to container for schema accessor evaluation.
       this.$emit('update:component', add ? this : null)
-      // Prevent unnested type components from overriding parent data paths
+      this._registerWithSchemaComponent(add, this.componentPath)
+    },
+
+    _registerWithSchemaComponent(add, componentPath) {
+      // Register unnested type components separately, to prevent them from
+      // overriding parent data paths.
       if (this.nested) {
-        this.schemaComponent._registerComponent(this, add)
+        this.schemaComponent._registerComponent(this, add, componentPath)
+      } else {
+        this.schemaComponent?._registerUnnestedComponent(
+          this,
+          add,
+          componentPath
+        )
       }
     },
 
@@ -197,11 +217,6 @@ export default {
       return { onFocus, onBlur, onInput, onChange }
     },
 
-    // @overridable
-    getValidations() {
-      return null
-    },
-
     // @overridable
     async scrollIntoView() {
       await this.focusSchema()

package/src/mixins/ValidationMixin.js

@@ -1,5 +1,4 @@
-import { isFunction } from '@ditojs/utils'
-import * as validators from '../validators/index.js'
+import { getValueValidationErrors } from '../utils/schema/validation.js'
 
 // @vue/component
 export default {
@@ -11,7 +10,9 @@ export default {
       isDirty: false,
       isValidated: false,
       isValid: false,
-      errors: null
+      errors: null,
+      // The value that the displayed errors were added for, see `addError()`.
+      valueWithErrors: undefined
     }
   },
 
@@ -31,33 +32,13 @@ export default {
     },
 
     validate(notify = true) {
-      let isValid = true
+      const errors = getValueValidationErrors(this.value, this.validations)
+      const isValid = errors.length === 0
       if (notify) {
         this.clearErrors()
-      }
-      const { value } = this
-      for (const [rule, setting] of Object.entries(this.validations)) {
-        // eslint-disable-next-line import/namespace
-        const validator = validators[rule]
-        if (
-          validator &&
-          // Only apply 'required' validator to empty values.
-          // Apply all other validators only to non-empty values.
-          (rule === 'required' || value != null && value !== '')
-        ) {
-          const { validate, message } = validator
-          if (!validate(value, setting, this.validations)) {
-            isValid = false
-            if (notify) {
-              const error = isFunction(message)
-                ? message(value, setting, this)
-                : message
-              this.addError(error, true)
-            }
-          }
+        for (const { message } of errors) {
+          this.addError(message, true)
         }
-      }
-      if (notify) {
         this.isValidated = true
         this.isValid = isValid
       }
@@ -84,6 +65,7 @@ export default {
 
     addError(error, addLabel = false) {
       this.errors ||= []
+      this.valueWithErrors = this.value
       if (addLabel) {
         const label = this.label || this.placeholder || this.name
         error = `The ${label} field ${error}.`

package/src/mixins/ValidatorMixin.js

@@ -43,14 +43,12 @@ export default {
       this.schemaComponents.forEach(it => it.clearErrors())
     },
 
-    showValidationErrors(errors, focus, first = true) {
-      this.schemaComponents.forEach(
-        schemaComponent => {
-          if (schemaComponent.showValidationErrors(errors, focus, first)) {
-            first = false
-          }
+    async showValidationErrors(errors, focus, first = true) {
+      for (const schemaComponent of this.schemaComponents) {
+        if (await schemaComponent.showValidationErrors(errors, focus, first)) {
+          first = false
         }
-      )
+      }
       return !first
     }
   }

package/src/mixins/ValueMixin.js

@@ -1,5 +1,6 @@
+import { isFunction } from '@ditojs/utils'
 import DitoContext from '../DitoContext.js'
-import { computeValue } from '../utils/schema.js'
+import { computeValue } from '../utils/schema/data.js'
 
 export default {
   computed: {
@@ -12,8 +13,10 @@ export default {
           this.dataPath,
           { component: this }
         )
+        // Only call `format()` if it's a function, as some types use `format`
+        // for other purposes, e.g. `DitoTypeColor` for the color format.
         const { format } = this.schema
-        return format
+        return isFunction(format)
           ? format(new DitoContext(this, { value }))
           : value
       },

package/src/types/DitoTypeButton.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 DitoButton.dito-button(
-  :id="dataPath"
+  :id="componentPath"
   ref="element"
   :type="type"
   :text="text"