@ditojs/admin 3.0.0 → 3.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "3.0.0",
+  "version": "3.1.1",
   "type": "module",
   "description": "Dito.js Admin is a schema based admin interface for Dito.js Server, featuring auto-generated views and forms and built with Vue.js",
   "repository": "https://github.com/ditojs/dito/tree/main/packages/admin",
@@ -22,7 +22,9 @@
   "files": [
     "src/",
     "dist/",
-    "types/"
+    "types/",
+    "!src/**/*.test.js",
+    "!src/**/__snapshots__/"
   ],
   "scripts": {
     "build": "vite build",
@@ -39,8 +41,8 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^3.0.0",
-    "@ditojs/utils": "^3.0.0"
+    "@ditojs/ui": "^3.1.1",
+    "@ditojs/utils": "^3.1.1"
   },
   "peerDependencies": {
     "@kyvg/vue3-notification": "^3.4.2",
@@ -85,7 +87,7 @@
     "vue-upload-component": "^3.2.2"
   },
   "devDependencies": {
-    "@ditojs/build": "^3.0.0",
+    "@ditojs/build": "^3.1.1",
     "@kyvg/vue3-notification": "^3.4.2",
     "@tiptap/core": "^3.31.4",
     "@tiptap/extension-blockquote": "^3.31.4",
@@ -129,5 +131,5 @@
     "vue-router": "^5.3.1",
     "vue-upload-component": "^3.2.2"
   },
-  "gitHead": "399f683a6ca227a03cfc0978fee9055383e6b3d8"
+  "gitHead": "acce85bb38d817aab18f9d5d03b3aa9dff00c3f9"
 }

package/src/DitoAdmin.js

@@ -3,7 +3,6 @@ import { createRouter, createWebHistory } from 'vue-router'
 import VueNotifications from '@kyvg/vue3-notification'
 import {
   isString,
-  isAbsoluteUrl,
   assignDeeply,
   hyphenate,
   camelize,
@@ -15,7 +14,7 @@ import DitoRoot from './components/DitoRoot.vue'
 import DitoTypeComponent from './DitoTypeComponent.js'
 import ResizeDirective from './directives/resize.js'
 import { getResource } from './utils/resource.js'
-import { formatQuery } from './utils/route.js'
+import { request, getApiUrl, isApiUrl } from './utils/request.js'
 import verbs from './verbs.js'
 
 export default class DitoAdmin {
@@ -228,66 +227,3 @@ export default class DitoAdmin {
     return DitoTypeComponent.register(type, options)
   }
 }
-
-class RequestError extends Error {
-  constructor(response) {
-    super(
-      `Request failed with status code: ${response.status} (${
-        response.statusText
-      })`
-    )
-    this.response = response
-  }
-}
-
-async function request(api, {
-  url,
-  method = 'get',
-  query = null,
-  headers = null,
-  data = null,
-  signal = null
-}) {
-  const isApiUrl = api.isApiUrl(url)
-
-  const response = await fetch(api.getApiUrl({ url, query }), {
-    method: method.toUpperCase(),
-    ...(data && { body: JSON.stringify(data) }),
-    headers: {
-      ...(isApiUrl && api.headers),
-      ...headers
-    },
-    credentials:
-      isApiUrl && api.cors?.credentials
-        ? 'include'
-        : 'same-origin',
-    signal
-  })
-
-  if (response.headers.get('Content-Type')?.includes('application/json')) {
-    response.data = await response.json()
-  }
-
-  if (!response.ok) {
-    throw new RequestError(response)
-  }
-  return response
-}
-
-function isApiUrl(api, url) {
-  return !isAbsoluteUrl(url) || url.startsWith(api.url)
-}
-
-function getApiUrl(api, { url, query }) {
-  if (!url.startsWith(api.url) && !isAbsoluteUrl(url)) {
-    url = combineUrls(api.url, url)
-  }
-  // Support optional query parameters, to be are added to the URL.
-  const search = formatQuery(query)
-  return search ? `${url}${url.includes('?') ? '&' : '?'}${search}` : url
-}
-
-function combineUrls(baseUrl, relativeUrl) {
-  // Use same approach as axios `combineURLs()` to join baseUrl & relativeUrl:
-  return `${baseUrl.replace(/\/+$/, '')}/${relativeUrl.replace(/^\/+/, '')}`
-}

package/src/DitoTypeComponent.js

@@ -35,6 +35,15 @@ export default {
 
   register(types, definition = {}) {
     types = asArray(types)
+    if (hasValidationsMethod(definition)) {
+      // Validation doesn't depend on components anymore, so that it also
+      // covers fields that aren't rendered, see `utils/schema/validation.js`.
+      console.warn(
+        `Type '${types[0]}': The \`getValidations()\` method isn't supported ` +
+        `anymore, use the static \`getTypeValidations(schema, context)\` ` +
+        `option instead.`
+      )
+    }
     const component = this.component(
       `DitoType${camelize(types[0], true)}`,
       definition
@@ -45,3 +54,11 @@ export default {
     return component
   }
 }
+
+// Returns whether the component definition or one of its mixins defines the
+// `getValidations()` method that types used to override.
+function hasValidationsMethod(definition) {
+  return [definition, ...(definition.mixins ?? [])].some(
+    ({ methods }) => !!methods?.getValidations
+  )
+}

package/src/components/DitoButtons.vue

@@ -48,10 +48,23 @@ export default DitoComponent.component('DitoButtons', {
     meta: { type: Object, default: () => ({}) },
     store: { type: Object, default: () => ({}) },
     nested: { type: Boolean, default: true },
-    disabled: { type: Boolean, default: false }
+    disabled: { type: Boolean, default: false },
+    // The name of the group of buttons, e.g. `panelButtons`, see
+    // `componentPath`.
+    buttonsName: { type: String, default: 'buttons' }
   },
 
   computed: {
+    componentPath() {
+      // Add the name of the group, so that buttons don't share their component
+      // paths with components of the same name, e.g. a `publish` button with a
+      // `publish` field, as component paths are used for registries.
+      return appendDataPath(
+        this.continueParentComponentPath(),
+        `$${this.buttonsName}`
+      )
+    },
+
     buttonSchemas() {
       // Compute a buttons list which has the dataPath baked into its keys.
       const { dataPath, buttons } = this

package/src/components/DitoDialog.vue

@@ -179,7 +179,7 @@ export default DitoComponent.component('DitoDialog', {
 
     async submit() {
       // Wait for computed values that depend on pending loads, e.g. options.
-      await this.formModel.waitForPendingLoads()
+      await this.waitForPendingLoadsOf(this.formModel)
       this.resolve(this.dialogData)
     },
 

package/src/components/DitoForm.vue

@@ -5,16 +5,11 @@
 )
   //- Only render a router-view here if this isn't the last data route and not a
   //- nested form route, which will appear elsewhere in its own view.
-  RouterView(
+  DitoRouterView(
     v-if="!isLastUnnestedRoute && !isNestedRoute"
     v-show="!isActiveRoute"
-    v-slot="{ Component, route }"
+    :routeLevel="routeLevel + 1"
   )
-    component(
-      v-if="Component"
-      :is="Component"
-      :key="getRouteComponentKey(route, routeLevel + 1)"
-    )
   //- NOTE: Nested form components are kept alive by using `v-show` instead of
   //- `v-if` here, so event handling and other things still work with nested
   //- editing.
@@ -467,7 +462,7 @@ export default DitoComponent.component('DitoForm', {
 
     async submit(button, { validate = true, closeForm = false } = {}) {
       // Wait for computed values that depend on pending loads, e.g. options.
-      await this.formModel.waitForPendingLoads()
+      await this.waitForPendingLoadsOf(this.formModel)
       if (validate && !this.validateAll()) {
         return false
       }

package/src/components/DitoPanel.vue

@@ -25,6 +25,7 @@ component.dito-panel(
         span {{ getLabel(schema) }}
         DitoButtons.dito-buttons--small(
           :buttons="panelButtonSchemas"
+          buttonsName="panelButtons"
           :dataPath="panelDataPath"
           :data="panelData"
           :meta="meta"
@@ -70,7 +71,7 @@ export default DitoComponent.component('DitoPanel', {
     store: { type: Object, required: true },
     disabled: { type: Boolean, required: true },
     panelTabComponent: { type: Object, default: null },
-    // The component path of the panel's entry, see `getPanelEntry()`:
+    // The component path of the panel's entry, see `getAllPanelEntries()`:
     panelComponentPath: { type: String, required: true }
   },
 
@@ -83,7 +84,7 @@ export default DitoComponent.component('DitoPanel', {
   computed: {
     nested() {
       // For `ContextMixin`: The panel's address, `dataPath`, points into the
-      // item that it displays, see `getPanelEntry()`.
+      // item that it displays, see `getAllPanelEntries()`.
       return true
     },
 

package/src/components/DitoRoot.vue

@@ -28,14 +28,7 @@
       :spinner="options.spinner"
       :isLoading="isLoading"
     )
-    RouterView(
-      v-slot="{ Component, route }"
-    )
-      component(
-        v-if="Component"
-        :is="Component"
-        :key="getRouteComponentKey(route, 0)"
-      )
+    DitoRouterView(:routeLevel="0")
   DitoSidebar
     DitoAccount(
       v-if="user"

package/src/components/DitoRouterView.vue

@@ -0,0 +1,27 @@
+<script>
+import { h } from 'vue'
+import { RouterView } from 'vue-router'
+import DitoComponent from '../DitoComponent.js'
+
+// Renders the route components of `routeLevel` through `RouterView`, keyed by
+// their route record, so that each record gets its own component instance, as
+// their schema and data belong to it, while the component is reused when only
+// the parameters change, e.g. to edit another item.
+// NOTE: This is a functional component, so that it doesn't become the parent
+// component of the route components, see `DitoMixin.provide()`.
+// @vue/component
+function DitoRouterView({ routeLevel }) {
+  return h(RouterView, null, {
+    default: ({ Component, route }) =>
+      Component
+        ? h(Component, { key: route.matched[routeLevel]?.path })
+        : null
+  })
+}
+
+DitoRouterView.props = {
+  routeLevel: { type: Number, required: true }
+}
+
+export default DitoComponent.component('DitoRouterView', DitoRouterView)
+</script>

package/src/components/DitoView.vue

@@ -6,15 +6,10 @@ 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"
-    v-slot="{ Component, route }"
+    :routeLevel="routeLevel + 1"
   )
-    component(
-      v-if="Component"
-      :is="Component"
-      :key="getRouteComponentKey(route, routeLevel + 1)"
-    )
   .dito-view.dito-scroll-parent(
     v-else
     :data-resource="sourceSchema.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

@@ -107,18 +107,11 @@ export default {
     // 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, `DitoForm`
-    // and `DitoTreeItem` continue the path of the source of their item.
+    // `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() {
-      const { parentComponent } = this
-      const parentComponentPath = parentComponent?.componentPath ?? ''
-      const relativeDataPath = getRelativeDataPath(
-        this.dataPath,
-        parentComponent?.dataPathForComponentPath
-      )
-      return relativeDataPath
-        ? appendDataPath(parentComponentPath, relativeDataPath)
-        : parentComponentPath
+      return this.continueParentComponentPath()
     },
 
     // The data path that `componentPath` corresponds to, which children
@@ -478,12 +471,30 @@ export default {
       body.removeChild(a)
     },
 
-    // Returns the key of the route component that `RouterView` renders at
-    // `routeLevel`, so that each route record gets its own component instance,
-    // as their schema and data belong to it, while the component is reused
-    // when only the parameters change, e.g. to edit another item.
-    getRouteComponentKey(route, routeLevel) {
-      return route.matched[routeLevel]?.path
+    // 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) {

package/src/mixins/OptionsMixin.js

@@ -82,13 +82,17 @@ export default {
       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() {
-      const formModel = (this.dialogComponent ?? this.routeComponent).formModel
-      return formModel.getOptionsResolver({
+      return this.formModel.getOptionsResolver({
         schema: this.schema,
         data: this.data,
         name: this.name,
@@ -243,10 +247,16 @@ export default {
 
     // 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`.
+    // 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.selectedValue = selectedValue
+      this.formModel
+        .applyCleanChanges(() => {
+          this.selectedValue = selectedValue
+        })
+        .catch(console.error)
     },
 
     // Groups the options by the `groupBy` key, see `groupByLabel` and

package/src/mixins/ResourceMixin.js

@@ -54,8 +54,10 @@ export default {
       // `isTransient()` to only return `!this.providesData`.
       const form = this.formComponent
       return (
-        !this.providesData &&
-        !this.linksToView ||
+        (
+          !this.providesData &&
+          !this.linksToView
+        ) ||
         form && (
           form.isTransient ||
           form.isCreating

package/src/mixins/RouteMixin.js

@@ -126,7 +126,7 @@ export default {
       flush: 'sync',
       handler(routeRecord) {
         // Components belong to the record that they're rendered for, see
-        // `getRouteComponentKey()`. Records of other paths, or none, mean that
+        // `DitoRouterView`. 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

package/src/mixins/SourceMixin.js

@@ -781,10 +781,22 @@ export default {
 
   processValue({ schema, value, dataPath }, graph) {
     graph.addSource(dataPath, schema)
-    return value
+    // `SchemaGraph.process()` changes the ids of the items in the processed
+    // data. The items of sources with forms are processed into copies, but the
+    // ones of sources without forms are still the items of the data.
+    return hasFormSchema(schema) ? value : copyItems(value)
   }
 }
 
+// Returns shallow copies of the items of a list, or of an object.
+function copyItems(value) {
+  return isArray(value)
+    ? value.map(item => (isObject(item) ? { ...item } : item))
+    : isObject(value)
+      ? { ...value }
+      : value
+}
+
 function getPathWithParam(path, param) {
   return param
     ? path

package/src/types/DitoTypeMultiselect.vue

@@ -81,6 +81,8 @@ export default DitoTypeComponent.register('multiselect', {
     return {
       searchedOptions: null,
       isLoadingSearchedOptions: false,
+      // The term of the current search, see `onSearchChange()`:
+      currentSearchTerm: null,
       populate: false
     }
   },
@@ -229,34 +231,43 @@ export default DitoTypeComponent.register('multiselect', {
     },
 
     // Returns the options that `searchFilter()` returns for the search term,
-    // showing the loading state while it's pending, and `null` if it fails.
+    // or `null` if it fails. Waits for the options, as the filter receives
+    // them, e.g. to search them when the search term is entered while they are
+    // still loading.
     async loadSearchedOptions(searchTerm) {
-      // Use a timeout to allow already resolved promises to return options
-      // without showing a loading indicator.
-      const timer = setTimeout(() => {
-        this.isLoadingSearchedOptions = true
-      }, 0)
-      let options = null
       try {
-        options = await this.searchFilter(new DitoContext(this, { searchTerm }))
+        await this.optionsResolver.waitForValue()
+        return await this.searchFilter(new DitoContext(this, { searchTerm }))
       } catch (error) {
         this.addError(error.message || error)
+        return null
       }
-      clearTimeout(timer)
-      this.isLoadingSearchedOptions = false
-      return options
     },
 
     async onSearchChange(searchTerm) {
       if (this.searchFilter) {
+        this.currentSearchTerm = searchTerm
         if (searchTerm) {
           // Set `searchedOptions` to an empty array, before it will be
           // populated asynchronously with the actual results.
           this.searchedOptions = []
-          this.searchedOptions = await this.loadSearchedOptions(searchTerm)
+          // Use a timeout to allow already resolved promises to return options
+          // without showing a loading indicator.
+          const timer = setTimeout(() => {
+            this.isLoadingSearchedOptions = true
+          }, 0)
+          const options = await this.loadSearchedOptions(searchTerm)
+          clearTimeout(timer)
+          // Searches that were replaced by newer ones in the meantime neither
+          // show their options nor end the loading state.
+          if (searchTerm === this.currentSearchTerm) {
+            this.searchedOptions = options
+            this.isLoadingSearchedOptions = false
+          }
         } else {
           // Clear `searchedOptions` when the query is cleared.
           this.searchedOptions = null
+          this.isLoadingSearchedOptions = false
         }
       }
     }

package/src/types/DitoTypePanel.vue

@@ -13,7 +13,8 @@ export default DitoTypeComponent.register('panel', {
   getPanelSchema(api, schema) {
     // For a TypePanel, the component schema is also the panel schema. Its name
     // is added to the panel's data path and component path, see
-    // `getPanelEntry()`, as unnested components don't add it to data paths.
+    // `getAllPanelEntries()`, as unnested components don't add it to data
+    // paths.
     return schema
   },
 

package/src/types/DitoTypeTreeList.vue

@@ -18,14 +18,7 @@
       v-if="editPath && hasEditableForms"
     )
       //- Include a router-view for the optional DitoFormInlined
-      RouterView(
-        v-slot="{ Component, route }"
-      )
-        component(
-          v-if="Component"
-          :is="Component"
-          :key="getRouteComponentKey(route, routeComponent.routeLevel + 1)"
-        )
+      DitoRouterView(:routeLevel="routeComponent.routeLevel + 1")
 </template>
 
 <script>
@@ -94,9 +87,10 @@ export default DitoTypeComponent.register(
                 type: Boolean,
                 default: false,
                 schema
-              }) ||
-              schema.children &&
-              hasEditableForms(schema.children)
+              }) || (
+                schema.children &&
+                hasEditableForms(schema.children)
+              )
             )
           )
         }

package/src/utils/DataSchemaResolver.js

@@ -32,6 +32,8 @@ import {
 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({
@@ -68,6 +70,16 @@ export class DataSchemaResolver {
     )
   }
 
+  // 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
@@ -132,6 +144,7 @@ export class DataSchemaResolver {
         console.error(error)
         finishLoad(undefined, error)
       })
+    this.currentLoadPromise = promise
     this.onLoadStart?.(promise)
   }
 }