@ditojs/admin 2.100.0 → 3.0.0

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,22 @@
       v-if="editPath && hasEditableForms"
     )
       //- Include a router-view for the optional DitoFormInlined
-      RouterView
+      RouterView(
+        v-slot="{ Component, route }"
+      )
+        component(
+          v-if="Component"
+          :is="Component"
+          :key="getRouteComponentKey(route, 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 +71,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,141 @@
+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 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
+    )
+  }
+
+  // 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.onLoadStart?.(promise)
+  }
+}
+
+function isPromiseOrLoader(valueOrPromiseOrLoader) {
+  return isFunction(valueOrPromiseOrLoader) || isPromise(valueOrPromiseOrLoader)
+}

package/src/utils/DataSchemaResolver.test.js

@@ -0,0 +1,132 @@
+import { vi } from 'vitest'
+import { reactive, nextTick } from 'vue'
+import { DataSchemaResolver } from './DataSchemaResolver.js'
+
+function createResolver(dataSchema, context = {}) {
+  const pendingLoads = []
+  const resolver = new DataSchemaResolver(dataSchema, {
+    createContext: () => context,
+    onLoadStart: promise => pendingLoads.push(promise)
+  })
+  const waitForPendingLoads = () => Promise.all(pendingLoads)
+  return { resolver, pendingLoads, waitForPendingLoads }
+}
+
+describe('DataSchemaResolver', () => {
+  it('resolves data schemas that are values', () => {
+    const options = ['Small', 'Large']
+    const { resolver } = createResolver(options)
+    expect(resolver.value).toBe(options)
+    expect(resolver.isLoading).toBe(false)
+  })
+
+  it('resolves `data` values and functions', () => {
+    const item = reactive({ title: 'Hello' })
+    const { resolver } = createResolver(
+      { data: ({ item }) => item.title.toUpperCase() },
+      { item }
+    )
+    expect(resolver.value).toBe('HELLO')
+    item.title = 'Bye'
+    expect(resolver.value).toBe('BYE')
+    expect(createResolver({ data: 'Static' }).resolver.value).toBe('Static')
+  })
+
+  it('resolves `dataPath` relative to the data path of the context', () => {
+    const rootItem = reactive({ sizes: ['S', 'M'], item: {} })
+    const { resolver } = createResolver(
+      { dataPath: '../../sizes' },
+      { rootItem, dataPath: 'item/size' }
+    )
+    expect(resolver.value).toBe(rootItem.sizes)
+  })
+
+  it('evaluates and loads nothing before it is read', async () => {
+    const data = vi.fn(() => async () => ['A'])
+    const { resolver, pendingLoads } = createResolver({ data })
+    await nextTick()
+    expect(data).not.toHaveBeenCalled()
+    expect(pendingLoads).toHaveLength(0)
+    expect(resolver.value).toBe(undefined)
+    expect(data).toHaveBeenCalledTimes(1)
+    expect(pendingLoads).toHaveLength(1)
+  })
+
+  it('loads values asynchronously, keeping their object identity', async () => {
+    const options = [{ id: 1 }]
+    const { resolver, waitForPendingLoads } = createResolver({
+      data: async () => options
+    })
+    expect(resolver.value).toBe(undefined)
+    expect(resolver.isLoading).toBe(true)
+    await waitForPendingLoads()
+    expect(resolver.value).toBe(options)
+    expect(resolver.isLoading).toBe(false)
+  })
+
+  it('loads again only when the dependencies of `data()` change', async () => {
+    const item = reactive({ category: 'news', title: 'Hello' })
+    const load = vi.fn(async category => [`${category}-1`])
+    const { resolver, waitForPendingLoads } = createResolver(
+      {
+        data: ({ item }) => {
+          const { category } = item
+          return async () => load(category)
+        }
+      },
+      { item }
+    )
+    resolver.value
+    await waitForPendingLoads()
+    expect(resolver.value).toEqual(['news-1'])
+    item.title = 'Changed'
+    expect(resolver.value).toEqual(['news-1'])
+    item.category = 'sports'
+    expect(resolver.value).toBe(undefined)
+    await waitForPendingLoads()
+    expect(resolver.value).toEqual(['sports-1'])
+    expect(load).toHaveBeenCalledTimes(2)
+  })
+
+  it('discards the values of outdated loads', async () => {
+    const item = reactive({ category: 'news' })
+    const resolvers = {}
+    const { resolver, waitForPendingLoads } = createResolver(
+      {
+        data: ({ item }) => {
+          const { category } = item
+          return () =>
+            new Promise(resolve => {
+              resolvers[category] = () => resolve(category)
+            })
+        }
+      },
+      { item }
+    )
+    resolver.value
+    item.category = 'sports'
+    resolver.value
+    await nextTick()
+    resolvers.sports()
+    resolvers.news()
+    await waitForPendingLoads()
+    expect(resolver.value).toBe('sports')
+  })
+
+  it('keeps the error of the last load in `lastLoadError`', async () => {
+    vi.spyOn(console, 'error').mockImplementation(() => {})
+    const error = new Error('Failed')
+    const { resolver, waitForPendingLoads } = createResolver({
+      data: async () => {
+        throw error
+      }
+    })
+    resolver.value
+    await waitForPendingLoads()
+    expect(resolver.value).toBe(undefined)
+    expect(resolver.isLoading).toBe(false)
+    expect(resolver.lastLoadError).toBe(error)
+    expect(console.error).toHaveBeenCalledWith(error)
+    vi.restoreAllMocks()
+  })
+})