@ditojs/admin 2.100.0 → 3.1.0

package/src/types/DitoTypeSection.vue

@@ -17,14 +17,26 @@
 </template>
 
 <script>
+import { normalizeDataPath, parseDataPath } from '@ditojs/utils'
 import DitoTypeComponent from '../DitoTypeComponent.js'
+import SchemaParentMixin from '../mixins/SchemaParentMixin.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
-import { getItemFormSchema, processSchemaComponents } from '../utils/schema.js'
+import { setupSchemaComponents } from '../utils/schema/setup.js'
+import { getItemFormSchema } from '../utils/schema/lookup.js'
+import { hasComponentNamed } from '../utils/schema/structure.js'
 
 // @vue/component
 export default DitoTypeComponent.register('section', {
-  defaultValue: () => undefined, // Callback to override `defaultValue: null`
+  // Register the section's schema with the section rather than the form, so
+  // that the section can reveal its components, see `navigateToComponent()`.
+  mixins: [SchemaParentMixin],
+  // Nested sections hold their data in an object, other sections don't have
+  // their own value. Use a callback to override `defaultValue: null`.
+  defaultValue: ({ schema }) => (schema.nested ? {} : undefined),
   ignoreMissingValue: ({ schema }) => !schema.nested && !('default' in schema),
+  // The object of nested sections can't be `null`, unlike the value of the
+  // `object` type, where `null` means that there's no object.
+  treatNullAsMissing: ({ schema }) => !!schema.nested,
   defaultNested: false,
   generateLabel: false,
 
@@ -52,12 +64,28 @@ export default DitoTypeComponent.register('section', {
   },
 
   methods: {
-    getItemFormSchema
+    getItemFormSchema,
+
+    async navigateToComponent(dataPath, onComplete, options) {
+      // Unnested sections share the data path of their parent schema, so
+      // decide by schema whether the section displays the value at `dataPath`:
+      const { mainSchemaComponent } = this
+      const dataPathPrefix = this.dataPath ? `${this.dataPath}/` : ''
+      const normalizedDataPath = normalizeDataPath(dataPath)
+      const componentName = normalizedDataPath.startsWith(dataPathPrefix)
+        ? parseDataPath(normalizedDataPath.slice(dataPathPrefix.length))[0]
+        : null
+      return (
+        !!mainSchemaComponent &&
+        hasComponentNamed(mainSchemaComponent.schema, componentName) &&
+        mainSchemaComponent.navigateToComponent(dataPath, onComplete, options)
+      )
+    }
   },
 
   async processSchema(api, schema, name, routes, level) {
     // Process section components so their forms get resolved too.
-    await processSchemaComponents(api, schema, routes, level)
+    await setupSchemaComponents(api, schema, routes, level)
   }
 })
 </script>

package/src/types/DitoTypeSelect.vue

@@ -11,7 +11,7 @@
       :parentContext="context"
     )
     select(
-      :id="dataPath"
+      :id="componentPath"
       ref="element"
       v-model="selectedValue"
       v-bind="attributes"

package/src/types/DitoTypeSlider.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 .dito-slider
   input.dito-range(
-    :id="dataPath"
+    :id="componentPath"
     ref="element"
     v-model="inputValue"
     type="range"

package/src/types/DitoTypeSwitch.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 DitoSwitch.dito-switch(
-  :id="dataPath"
+  :id="componentPath"
   ref="element"
   v-model="value"
   :labels="labels"

package/src/types/DitoTypeText.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 DitoInput.dito-text(
-  :id="dataPath"
+  :id="componentPath"
   ref="element"
   v-model="inputValue"
   :type="inputType"
@@ -54,6 +54,18 @@ export default DitoTypeComponent.register(
     textField: true,
     ignoreMissingValue: ({ schema }) => schema.type === 'password',
 
+    getTypeValidations(schema) {
+      const validationName = {
+        email: 'email',
+        url: 'url',
+        hostname: 'hostname',
+        domain: 'domain',
+        password: 'password',
+        creditcard: 'creditcard'
+      }[schema.type]
+      return validationName ? { [validationName]: true } : {}
+    },
+
     computed: {
       inputType() {
         return (
@@ -81,20 +93,6 @@ export default DitoTypeComponent.register(
           this.value = value
         }
       }
-    },
-
-    methods: {
-      getValidations() {
-        const rule = {
-          email: 'email',
-          url: 'url',
-          hostname: 'hostname',
-          domain: 'domain',
-          password: 'password',
-          creditcard: 'creditcard'
-        }[this.type]
-        return rule ? { [rule]: true } : {}
-      }
     }
   }
 )

package/src/types/DitoTypeTextarea.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 textarea.dito-textarea.dito-input(
-  :id="dataPath"
+  :id="componentPath"
   ref="element"
   v-model="value"
   v-bind="attributes"

package/src/types/DitoTypeTreeList.vue

@@ -18,17 +18,15 @@
       v-if="editPath && hasEditableForms"
     )
       //- Include a router-view for the optional DitoFormInlined
-      RouterView
+      DitoRouterView(:routeLevel="routeComponent.routeLevel + 1")
 </template>
 
 <script>
 import DitoTypeComponent from '../DitoTypeComponent.js'
 import SourceMixin from '../mixins/SourceMixin.js'
-import {
-  hasFormSchema,
-  getFormSchemas,
-  resolveSchemaComponents
-} from '../utils/schema.js'
+import { resolveSchemaComponents } from '../utils/schema/setup.js'
+import { hasFormSchema, getFormSchemas } from '../utils/schema/lookup.js'
+import { getParentDataPath } from '../utils/data.js'
 
 export default DitoTypeComponent.register(
   ['tree-list', 'tree-object'],
@@ -66,7 +64,7 @@ export default DitoTypeComponent.register(
         // Remove `name` from `dataPath`, as it is added
         // to `treeData` and `treeSchema`
         return this.isListSource
-          ? this.dataPath.slice(0, this.dataPath.length - this.name.length)
+          ? getParentDataPath(this.dataPath)
           : this.dataPath
       },
 

package/src/types/DitoTypeUpload.vue

@@ -138,9 +138,8 @@
 import DitoTypeComponent from '../DitoTypeComponent.js'
 import DitoContext from '../DitoContext.js'
 import SortableMixin from '../mixins/SortableMixin.js'
-import parseFileSize from 'filesize-parser'
 import { getSchemaAccessor } from '../utils/accessor.js'
-import { formatFileSize } from '../utils/units.js'
+import { formatFileSize, parseFileSize } from '../utils/units.js'
 import { appendDataPath } from '../utils/data.js'
 import { isArray, asArray } from '@ditojs/utils'
 import VueUpload from 'vue-upload-component'

package/src/utils/DataSchemaResolver.js

@@ -0,0 +1,154 @@
+import { computed, shallowRef } from 'vue'
+import {
+  isObject,
+  isFunction,
+  isPromise,
+  normalizeDataPath,
+  getValueAtDataPath
+} from '@ditojs/utils'
+
+// DataSchemaResolver resolves a data schema, `{ data, dataPath }` as used by
+// `schema.options` and by the `computed` types, to its value, lazily: Nothing
+// is evaluated or loaded before `value` or `isLoading` is read.
+//
+// - `data` is the value itself, or a function that returns the value, a
+//   promise of it, or a function that loads it. In the last case, `data()`
+//   only tracks the dependencies and the returned function loads the value,
+//   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'`.
+// - 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`.
+// If loading fails, the error is logged and kept in `lastLoadError`. Results
+// of outdated loads are discarded. Resolved values are returned as they are, so
+// that their object identity is kept.
+//
+// `createContext()` returns the `DitoContext` that `data()` and the loading
+// functions are called with. `onLoadStart(promise)` is called with the promise
+// of each load, which resolves once the load finished, see `finishLoad()`.
+
+export class DataSchemaResolver {
+  // The promise or loading function of the current load, see `startLoad()`:
+  currentPromiseOrLoader = null
+  // The promise of the current load, which resolves once it finished:
+  currentLoadPromise = null
+  // The promise or loading function of the last finished load, with its value
+  // or error, see `finishLoad()`:
+  lastFinishedLoad = shallowRef({
+    promiseOrLoader: null,
+    value: undefined,
+    error: null
+  })
+
+  constructor(dataSchema, { createContext, onLoadStart = null }) {
+    this.dataSchema = isObject(dataSchema) ? dataSchema : { data: dataSchema }
+    this.createContext = createContext
+    this.onLoadStart = onLoadStart
+    this.valueOrPromiseOrLoader = computed(() =>
+      this.getValueOrPromiseOrLoader()
+    )
+    this.valueOrUndefinedWhileLoading = computed(() =>
+      this.getValueOrStartLoad()
+    )
+  }
+
+  get value() {
+    return this.valueOrUndefinedWhileLoading.value
+  }
+
+  get isLoading() {
+    // Read `value` first, so that its loading starts:
+    if (this.value !== undefined) {
+      return false
+    }
+    const valueOrPromiseOrLoader = this.valueOrPromiseOrLoader.value
+    return (
+      isPromiseOrLoader(valueOrPromiseOrLoader) &&
+      this.lastFinishedLoad.value.promiseOrLoader !== valueOrPromiseOrLoader
+    )
+  }
+
+  // Returns the value, once the load of it finished if it is pending, also
+  // after loads that replace outdated ones, e.g. when the dependencies of the
+  // data schema change in the meantime. Returns `undefined` if loading fails.
+  async waitForValue() {
+    while (this.isLoading) {
+      await this.currentLoadPromise
+    }
+    return this.value
+  }
+
+  // The error of the last load, if it failed and isn't outdated:
+  get lastLoadError() {
+    const { promiseOrLoader, error } = this.lastFinishedLoad.value
+    return promiseOrLoader === this.valueOrPromiseOrLoader.value ? error : null
+  }
+
+  // Returns the value of the data schema, a promise of it, or a function that
+  // loads it. Called by a computed property, so that it only runs again when
+  // its dependencies change.
+  getValueOrPromiseOrLoader() {
+    const { data, dataPath } = this.dataSchema
+    if (data !== undefined) {
+      return isFunction(data) ? data(this.createContext()) : data
+    } else if (dataPath) {
+      const context = this.createContext()
+      // Data that isn't there, e.g. after it was reset by code, has no value,
+      // the same as a missing value at an existing data path.
+      return getValueAtDataPath(
+        context.rootItem,
+        normalizeDataPath(`${context.dataPath}/${dataPath}`),
+        () => undefined
+      )
+    }
+  }
+
+  // Returns the value of the data schema, or its loaded value once the load
+  // of its promise or loading function finished. Until then, it starts the
+  // load if it isn't started yet, and returns `undefined`. Called by a
+  // computed property, see `value`.
+  getValueOrStartLoad() {
+    const valueOrPromiseOrLoader = this.valueOrPromiseOrLoader.value
+    if (!isPromiseOrLoader(valueOrPromiseOrLoader)) {
+      return valueOrPromiseOrLoader
+    }
+    const { promiseOrLoader, value } = this.lastFinishedLoad.value
+    if (promiseOrLoader === valueOrPromiseOrLoader) {
+      return value
+    }
+    if (this.currentPromiseOrLoader !== valueOrPromiseOrLoader) {
+      this.startLoad(valueOrPromiseOrLoader)
+    }
+    return undefined
+  }
+
+  startLoad(promiseOrLoader) {
+    this.currentPromiseOrLoader = promiseOrLoader
+    const context = this.createContext()
+    // Keeps the result in `lastFinishedLoad`, unless the load is outdated:
+    const finishLoad = (value, error = null) => {
+      if (this.currentPromiseOrLoader === promiseOrLoader) {
+        this.lastFinishedLoad.value = { promiseOrLoader, value, error }
+      }
+    }
+    // Call loading functions in a microtask, outside of the computed property
+    // that started the load, so that they don't add to its dependencies.
+    const promise = Promise.resolve()
+      .then(() =>
+        isFunction(promiseOrLoader) ? promiseOrLoader(context) : promiseOrLoader
+      )
+      .then(value => finishLoad(value))
+      .catch(error => {
+        console.error(error)
+        finishLoad(undefined, error)
+      })
+    this.currentLoadPromise = promise
+    this.onLoadStart?.(promise)
+  }
+}
+
+function isPromiseOrLoader(valueOrPromiseOrLoader) {
+  return isFunction(valueOrPromiseOrLoader) || isPromise(valueOrPromiseOrLoader)
+}