@ditojs/admin 2.26.2 → 2.27.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.26.2",
+  "version": "2.27.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/master/packages/admin",
@@ -33,8 +33,8 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.26.1",
-    "@ditojs/utils": "^2.26.1",
+    "@ditojs/ui": "^2.27.0",
+    "@ditojs/utils": "^2.27.0",
     "@kyvg/vue3-notification": "^3.2.1",
     "@lk77/vue3-color": "^3.0.6",
     "@tiptap/core": "^2.3.0",
@@ -74,7 +74,7 @@
     "vue-upload-component": "^3.1.15"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.26.1",
+    "@ditojs/build": "^2.27.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/compiler-sfc": "3.4.21",
     "pug": "^3.0.2",
@@ -83,7 +83,7 @@
     "vite": "^5.2.8"
   },
   "types": "types",
-  "gitHead": "7fd7a0b9a8727e1a27a8e78e7381f58c95017499",
+  "gitHead": "f8e8c86149487d9a7b991c9c4b8d9165974fb0a2",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/DitoAdmin.js

@@ -124,9 +124,7 @@ export default class DitoAdmin {
       },
 
       member(resource) {
-        // NOTE: We assume that all members have root-level collection routes,
-        // to avoid excessive nesting of (sub-)collection routes.
-        return `${resource.path}/${resource.id}`
+        return `${this.default(resource)}/${resource.id}`
       },
 
       upload(resource) {

package/src/DitoContext.js

@@ -140,6 +140,10 @@ export default class DitoContext {
     return get(this, 'processedData', null)
   }
 
+  get processedRootItem() {
+    return get(this, 'processedRootData', null)
+  }
+
   get clipboardItem() {
     return get(this, 'clipboardData', null)
   }

package/src/components/DitoContainer.vue

@@ -255,6 +255,12 @@ export default DitoComponent.component('DitoContainer', {
   // percentages in flex-basis to work.
   padding: $form-spacing-half;
 
+  > .dito-label:only-child {
+    // Used e.g. when sources hide themselves due to maxDepth, but the label
+    // is rendered above it.
+    display: none;
+  }
+
   .dito-pane > & {
     .dito-page--width-80 & {
       flex-grow: 1;

package/src/components/DitoForm.vue

@@ -7,13 +7,13 @@
   //- nested form route, which will appear elsewhere in its own view.
   RouterView(
     v-if="!isLastUnnestedRoute && !isNestedRoute"
-    v-show="!isActive"
+    v-show="!isActiveRoute"
   )
   //- 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.
   DitoFormInner(
-    v-show="isActive"
+    v-show="isActiveRoute"
     :nested="isNestedRoute"
   )
     //- Prevent implicit submission of the form, for example when typing enter
@@ -31,6 +31,7 @@
       :meta="meta"
       :store="store"
       :padding="isNestedRoute ? 'nested' : 'root'"
+      :active="isActiveRoute"
       :disabled="isLoading"
       :scrollable="!isNestedRoute"
       generateLabels
@@ -125,7 +126,7 @@ export default DitoComponent.component('DitoForm', {
       )
     },
 
-    isActive() {
+    isActiveRoute() {
       return this.isLastRoute || this.isLastUnnestedRoute
     },
 
@@ -168,11 +169,6 @@ export default DitoComponent.component('DitoForm', {
       return this.isCreating ? 'post' : 'patch'
     },
 
-    resource() {
-      const resource = this.getResource()
-      return getMemberResource(this.itemId, resource) || resource
-    },
-
     breadcrumbPrefix() {
       return capitalize(this.isCreating ? this.verbs.create : this.verbs.edit)
     },
@@ -325,6 +321,12 @@ export default DitoComponent.component('DitoForm', {
       )
     },
 
+    // @override ResourceMixin.getResource()
+    getResource(defaults) {
+      const resource = ResourceMixin.methods.getResource.call(this, defaults)
+      return getMemberResource(this.itemId, resource) || resource
+    },
+
     // @override ResourceMixin.setupData()
     setupData() {
       if (this.isCreating) {
@@ -337,7 +339,8 @@ export default DitoComponent.component('DitoForm', {
     setSourceData(data) {
       if (this.sourceData && this.sourceKey !== null) {
         const { mainSchemaComponent } = this
-        this.sourceData[this.sourceKey] = mainSchemaComponent.filterData(data)
+        this.sourceData[this.sourceKey] =
+          mainSchemaComponent.filterData(data).localData
         mainSchemaComponent.onChange()
         return true
       }
@@ -400,11 +403,13 @@ export default DitoComponent.component('DitoForm', {
       const getVerb = present => this.verbs[this.getSubmitVerb(present)]
 
       // Allow buttons to override both method and resource path to submit to:
+      let { method } = this
+      let resource = this.getResource({ method })
       const buttonResource = getResource(button.schema.resource, {
-        parent: this.resource
+        parent: resource
       })
-      const resource = buttonResource || this.resource
-      const method = resource?.method || this.method
+      resource = buttonResource || resource
+      method = resource?.method || method
       const data = this.getPayloadData(button, method)
       let success
       if (!buttonResource && this.isTransient) {

package/src/components/DitoSchema.vue

@@ -9,6 +9,7 @@ slot(name="before")
     to=".dito-sidebar__teleport"
   )
     DitoPanels(
+      v-if="active"
       :panels="panelEntries"
       :data="data"
       :meta="meta"
@@ -20,7 +21,9 @@ slot(name="before")
     :to="headerTeleport"
     :disabled="!headerTeleport"
   )
-    .dito-schema-header
+    .dito-schema-header(
+      v-if="active"
+    )
       DitoLabel(
         v-if="hasLabel"
         :label="label"
@@ -119,7 +122,8 @@ import {
   getPanelEntries,
   setDefaultValues,
   processData,
-  isEmptySchema
+  isEmptySchema,
+  isNested
 } from '../utils/schema.js'
 import { getSchemaAccessor, getStoreAccessor } from '../utils/accessor.js'
 
@@ -147,6 +151,7 @@ export default DitoComponent.component('DitoSchema', {
     store: { type: Object, default: () => ({}) },
     label: { type: [String, Object], default: null },
     padding: { type: String, default: null },
+    active: { type: Boolean, default: true },
     inlined: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
     collapsed: { type: Boolean, default: false },
@@ -223,7 +228,7 @@ export default DitoComponent.component('DitoSchema', {
     },
 
     headerTeleport() {
-      return this.isRootSchema
+      return this.isTopLevelSchema
         ? '.dito-header__teleport'
         : this.labelNode
     },
@@ -283,9 +288,8 @@ export default DitoComponent.component('DitoSchema', {
       )
     },
 
-    isRootSchema() {
-      // Section schemas can share the root dataPath but they are inlined.
-      return this.dataPath === '' && !this.inlined
+    isNested() {
+      return isNested(this.schema)
     },
 
     isDirty() {
@@ -320,8 +324,12 @@ export default DitoComponent.component('DitoSchema', {
       return !!this.tabs
     },
 
-    hasRootTabs() {
-      return this.hasTabs && this.isRootSchema
+    isTopLevelSchema() {
+      return !this.isNested && !this.inlined
+    },
+
+    hasTopLevelTabs() {
+      return this.hasTabs && this.isTopLevelSchema
     },
 
     hasMainPane() {
@@ -385,7 +393,7 @@ export default DitoComponent.component('DitoSchema', {
         // Remember the current path to know if tab changes should still be
         // handled, but remove the trailing `/create` or `/:id` from it so that
         // tabs informs that stay open after creation still work.
-        if (this.hasRootTabs) {
+        if (this.hasTopLevelTabs) {
           this.selectedTab = routeTab
         }
       }
@@ -399,7 +407,7 @@ export default DitoComponent.component('DitoSchema', {
           content.scrollTop = this.scrollPositions[newTab] ?? 0
         })
       }
-      if (this.hasRootTabs) {
+      if (this.hasTopLevelTabs) {
         const tab = this.shouldRenderSchema(this.tabs[newTab])
           ? newTab
           : this.defaultTab
@@ -687,20 +695,22 @@ export default DitoComponent.component('DitoSchema', {
     },
 
     filterData(data) {
-      // Filters out arrays and objects that are back by data resources
-      // themselves, as those are already taking care of through their own API
+      // Filters out arrays and objects that are backed by data resources
+      // themselves, as those are already taken care of through their own API
       // resource end-points and shouldn't be set.
-      const copy = {}
+      const localData = {}
+      const foreignData = {}
       for (const [name, value] of Object.entries(data)) {
         if (isArray(value) || isObject(value)) {
           const components = this.getComponentsByName(name)
           if (components.some(component => component.providesData)) {
+            foreignData[name] = value
             continue
           }
         }
-        copy[name] = value
+        localData[name] = value
       }
-      return copy
+      return { localData, foreignData }
     },
 
     processData({ target = 'clipboard', schemaOnly = true } = {}) {

package/src/components/DitoView.vue

@@ -75,7 +75,7 @@ export default DitoComponent.component('DitoView', {
     },
 
     mainComponent() {
-      return this.mainSchemaComponent.getComponentByDataPath(this.name)
+      return this.mainSchemaComponent?.getComponentByDataPath(this.name)
     },
 
     viewSchema() {

package/src/mixins/DataMixin.js

@@ -109,15 +109,22 @@ export default {
     async resolveData(load, loadingOptions = {}) {
       // Use a timeout to allow already resolved promises to return data without
       // showing a loading indicator.
-      const timer = setTimeout(() => this.setLoading(true, loadingOptions), 0)
+      let clearLoading = false
+      const timer = setTimeout(() => {
+        this.setLoading(true, loadingOptions)
+        clearLoading = true
+      }, 0)
       let data = null
       try {
         data = await (isFunction(load) ? load() : load)
       } catch (error) {
         this.addError(error.message || error)
       }
-      clearTimeout(timer)
-      this.setLoading(false, loadingOptions)
+      if (clearLoading) {
+        this.setLoading(false, loadingOptions)
+      } else {
+        clearTimeout(timer)
+      }
       return data
     }
   }

package/src/mixins/DitoMixin.js

@@ -155,15 +155,19 @@ export default {
     },
 
     parentSchemaComponent() {
-      return this.schemaComponent?.parentComponent.schemaComponent
+      return getParentComponent(this, 'schemaComponent')
     },
 
     parentRouteComponent() {
-      return this.routeComponent?.parentComponent.routeComponent
+      return getParentComponent(this, 'routeComponent')
     },
 
     parentFormComponent() {
-      return this.formComponent?.parentComponent.formComponent
+      return getParentComponent(this, 'formComponent')
+    },
+
+    parentResourceComponent() {
+      return getParentComponent(this, 'resourceComponent')
     },
 
     // Returns the data of the first route component in the chain of parents
@@ -307,13 +311,12 @@ export default {
     },
 
     getResourcePath(resource) {
-      resource = getResource(resource)
-      // Resources without a parent inherit the one from `dataComponent`
-      // automatically.
-      if (resource.parent === undefined) {
-        resource.parent = this.dataComponent?.resource
-      }
-      return this.api.resources.any(getResource(resource))
+      resource = getResource(resource, {
+        // Resources without a parent inherit the one from `dataComponent`
+        // automatically.
+        parent: this.dataComponent?.resource ?? null
+      })
+      return this.api.resources.any(resource)
     },
 
     getResourceUrl(resource) {
@@ -574,3 +577,12 @@ export default {
 }
 
 let nextUid = 0
+
+function getParentComponent(component, key) {
+  const current = component[key]
+  let parent = component.parentComponent
+  while (parent && parent[key] === current) {
+    parent = parent.parentComponent
+  }
+  return parent?.[key] ?? null
+}

package/src/mixins/OptionsMixin.js

@@ -260,7 +260,7 @@ export default {
     }
   },
 
-  processValue(schema, value, dataPath, graph) {
+  processValue({ schema, value, dataPath }, graph) {
     if (schema.relate) {
       // For internally relating data (`schema.options.dataPath`), we need to
       // process both the options (for '#ref') and the value ('#id').

package/src/mixins/ResourceMixin.js

@@ -1,7 +1,7 @@
 import ItemMixin from './ItemMixin.js'
 import LoadingMixin from './LoadingMixin.js'
 import { setDefaultValues } from '../utils/schema.js'
-import { isObject, isString, labelize } from '@ditojs/utils'
+import { assignDeeply, isObject, isString, labelize } from '@ditojs/utils'
 import { getResource } from '../utils/resource.js'
 import DitoContext from '../DitoContext.js'
 
@@ -31,8 +31,6 @@ export default {
     },
 
     resource() {
-      // Returns the resource object representing the resource for the
-      // associated source schema.
       return this.getResource()
     },
 
@@ -126,12 +124,13 @@ export default {
   },
 
   methods: {
-    getResource() {
-      // This is defined as a method so the computed `resource` getter can
-      // be overridden and `super` functionality can still be accessed.
+    getResource(defaults = { method: 'get' }) {
+      // Returns the resource object representing the resource for the
+      // associated source schema.
       return getResource(this.sourceSchema?.resource, {
         type: 'collection',
-        parent: this.parentFormComponent?.resource ?? null
+        parent: this.parentResourceComponent?.resource ?? null,
+        ...defaults
       })
     },
 
@@ -230,7 +229,7 @@ export default {
     async handleRequest(
       {
         method,
-        resource = this.resource,
+        resource = this.getResource({ method }),
         query,
         data
       },
@@ -244,6 +243,7 @@ export default {
       const controller = new AbortController()
       this.abortController = controller
       const { signal } = controller
+      method = resource.method || method
       const request = { method, resource, query, data, signal }
       this.setLoading(true, loadingOptions)
       try {
@@ -340,7 +340,17 @@ export default {
               // Update the underlying data before calling `notify()` or
               // `this.itemLabel`, so id is set after creating new items.
               if (setData && data) {
-                this.setData(data)
+                // Preserve the foreign data entries when updating the data.
+                const { foreignData } = this.mainSchemaComponent.filterData(
+                  this.data
+                )
+                // Tell the parent route to reload its data, so that it can
+                // update its foreign data entries.
+                const parentMeta = this.parentRouteComponent?.routeRecord?.meta
+                if (parentMeta) {
+                  parentMeta.reload = true
+                }
+                this.setData(assignDeeply({}, foreignData, data))
               }
               onSuccess?.()
               await this.emitButtonEvent(button, 'success', {

package/src/mixins/RouteMixin.js

@@ -31,7 +31,7 @@ export default {
     routeLevel() {
       let level = 0
       let routeComponent = this
-      while ((routeComponent = routeComponent.parentComponent.routeComponent)) {
+      while ((routeComponent = routeComponent.parentRouteComponent)) {
         level++
       }
       return level

package/src/mixins/SourceMixin.js

@@ -33,9 +33,9 @@ import { raw } from '@ditojs/ui'
 export default {
   mixins: [ItemMixin, ResourceMixin, SchemaParentMixin],
 
-  defaultValue(schema) {
-    return isListSource(schema) ? [] : null
-  },
+  defaultValue: context => (isListSource(context.schema) ? [] : null),
+  // Exclude all sources that have their own resource handling the data.
+  excludeValue: context => !!context.schema.resource,
 
   provide() {
     return {
@@ -68,10 +68,17 @@ export default {
       return !!this.value
     },
 
+    shouldRender() {
+      return this.sourceDepth < this.maxDepth
+    },
+
     isReady() {
       // Lists that have no data and no associated resource should still render,
       // as they may be getting their data elsewhere, e.g. `compute()`.
-      return this.hasData || !this.providesData
+      return (
+        this.shouldRender &&
+        (this.hasData || !this.providesData)
+      )
     },
 
     isInView() {
@@ -147,6 +154,15 @@ export default {
       return this.schema
     },
 
+    sourceDepth() {
+      return this.$route.matched.reduce(
+        (depth, record) => (
+          depth + (record.meta.schema === this.sourceSchema ? 1 : 0)
+        ),
+        0
+      )
+    },
+
     path() {
       // This is used in TypeList for DitoFormChooser.
       return this.routeComponent.getChildPath(this.schema.path)
@@ -313,6 +329,11 @@ export default {
     collapsed: getSchemaAccessor('collapsed', {
       type: Boolean,
       default: null
+    }),
+
+    maxDepth: getSchemaAccessor('maxDepth', {
+      type: Number,
+      default: 1
     })
   },
 
@@ -321,15 +342,25 @@ export default {
       // https://github.com/vuejs/vue-router/issues/3393#issuecomment-1158470149
       flush: 'post',
       handler(to, from) {
-        if (
-          this.providesData &&
-          from.path === to.path &&
-          from.hash === to.hash
-        ) {
-          // Paths and hashes remain the same, so only queries have changed.
-          // Update filter and reload data without clearing.
-          this.query = to.query
-          this.loadData(false)
+        if (this.providesData) {
+          if (
+            from.path === to.path &&
+            from.hash === to.hash
+          ) {
+            // Paths and hashes remain the same, so only queries have changed.
+            // Update filter and reload data without clearing.
+            this.query = to.query
+            this.loadData(false)
+          } else if (
+            this.meta.reload &&
+            from.path !== to.path &&
+            from.path.startsWith(to.path)
+          ) {
+            // Reload the source when navigating back to a parent-route after
+            // changing data in a child-route.
+            this.meta.reload = false
+            this.loadData(false)
+          }
         }
       }
     },
@@ -464,9 +495,13 @@ export default {
           notify()
         } else {
           const itemId = this.getItemId(this.schema, item, index)
-          const resource = getMemberResource(itemId, this.resource)
+          const method = 'delete'
+          const resource = getMemberResource(
+            itemId,
+            this.getResource({ method })
+          )
           if (resource) {
-            this.handleRequest({ method: 'delete', resource }, err => {
+            this.handleRequest({ method, resource }, err => {
               if (!err) {
                 this.removeItem(item, index)
                 notify()
@@ -666,7 +701,7 @@ export default {
     }
   },
 
-  processValue(schema, value, dataPath, graph) {
+  processValue({ schema, value, dataPath }, graph) {
     graph.addSource(dataPath, schema)
     return value
   }

package/src/mixins/TextMixin.js

@@ -11,14 +11,15 @@ export default {
     })
   },
 
-  processValue(schema, value) {
+  processValue(context) {
+    let { schema, value } = context
     if (schema.trim && value != null && isString(value)) {
       // Text fields don't necessarily have a `String` value when `format()`
       // without `parse()` is used.
       value = value.trim()
     }
     if (value === '') {
-      value = getDefaultValue(schema)
+      value = getDefaultValue(schema, context)
     }
     return value
   }

package/src/mixins/TypeMixin.js

@@ -77,16 +77,11 @@ export default {
     },
 
     processedData() {
-      // We can only get the processed data through the schemaComponent, but
-      // that's not necessarily the item represented by this component.
-      // Solution: Find the relative path and the processed sub-item from there:
-      const { schemaComponent } = this
-      return getItem(
-        schemaComponent.processedData,
-        // Get the dataPath relative to the schemaComponent's data:
-        this.dataPath.slice(schemaComponent.dataPath.length),
-        this.nested
-      )
+      return getProcessedParentData(this, this.dataPath, this.nested)
+    },
+
+    processedRootData() {
+      return getProcessedParentData(this, '', false)
     },
 
     // The following computed properties are similar to `DitoContext`
@@ -107,6 +102,10 @@ export default {
       return this.processedData
     },
 
+    processedRootItem() {
+      return this.processedRootData
+    },
+
     labelNode() {
       const node = this.isMounted ? this.$el.previousElementSibling : null
       return node?.matches('.dito-label') ? node : null
@@ -327,3 +326,20 @@ export default {
     }
   }
 }
+
+function getProcessedParentData(component, dataPath, nested = false) {
+  // We can only get the processed data through the schemaComponent, but
+  // that's not necessarily the item represented by this component.
+  // Solution: Find the relative path and the processed sub-item from there:
+  let { schemaComponent } = component
+  // Find the schema component that contains the desired data-path:
+  while (schemaComponent.dataPath.length > dataPath.length) {
+    schemaComponent = schemaComponent.parentSchemaComponent
+  }
+  return getItem(
+    schemaComponent.processedData,
+    // Get the dataPath relative to the schemaComponent's data:
+    dataPath.slice(schemaComponent.dataPath.length),
+    nested
+  )
+}

package/src/types/DitoTypeComponent.vue

@@ -22,7 +22,7 @@ export default DitoTypeComponent.register('component', {
   // Override the standard `defaultValue: null` to not set any data for custom
   // components, unless they provide a default value.
   defaultValue: () => undefined, // Callback to override `defaultValue: null`
-  ignoreMissingValue: schema => !('default' in schema),
+  ignoreMissingValue: ({ schema }) => !('default' in schema),
 
   async processSchema(api, schema) {
     await resolveSchemaComponent(schema)

package/src/types/DitoTypeDate.vue

@@ -72,7 +72,7 @@ export default DitoTypeComponent.register(
       }
     },
 
-    processValue(schema, value) {
+    processValue({ value }) {
       return isDate(value) ? value.toISOString() : value
     }
   }