@ditojs/admin 2.100.0 → 3.1.0

package/src/components/DitoForm.vue

@@ -5,9 +5,10 @@
 )
   //- 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"
+    :routeLevel="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
@@ -55,8 +56,11 @@ import DitoComponent from '../DitoComponent.js'
 import RouteMixin from '../mixins/RouteMixin.js'
 import ResourceMixin from '../mixins/ResourceMixin.js'
 import { getResource, getMemberResource } from '../utils/resource.js'
-import { getButtonSchemas, isObjectSource } from '../utils/schema.js'
+import { isObjectSource } from '../utils/schema/structure.js'
+import { getButtonSchemas } from '../utils/schema/lookup.js'
+import { getComponentPathByDataPath } from '../utils/schema/data.js'
 import { resolvePath } from '../utils/path.js'
+import { FormModel } from '../utils/FormModel.js'
 
 // @vue/component
 export default DitoComponent.component('DitoForm', {
@@ -65,8 +69,7 @@ export default DitoComponent.component('DitoForm', {
   data() {
     return {
       createdData: null,
-      clonedData: undefined,
-      sourceKey: null
+      clonedData: undefined
     }
   },
 
@@ -144,7 +147,9 @@ export default DitoComponent.component('DitoForm', {
     },
 
     isDirty() {
-      return !this.isMutating && !!this.mainSchemaComponent?.isDirty
+      // Forms that mutate the inherited data directly aren't dirty themselves,
+      // their changes make the form that owns the data dirty instead.
+      return !this.isMutating && this.formModel.isDirty
     },
 
     isMutating() {
@@ -193,87 +198,96 @@ export default DitoComponent.component('DitoForm', {
       return this.getDataPathFrom(this.dataComponent)
     },
 
-    sourceData() {
+    componentPath() {
+      // Nested forms continue the component path of the source that displays
+      // their item in the parent route component, e.g. `main/chapters/1`.
+      // Forms that load their own data start a new one, like their data path.
+      const { parentRouteComponent } = this
+      return this.isTransient && parentRouteComponent
+        ? getComponentPathByDataPath(
+            parentRouteComponent.isView
+              ? parentRouteComponent.viewSchema
+              : parentRouteComponent.schema,
+            parentRouteComponent.data,
+            this.getDataPathFrom(parentRouteComponent),
+            {
+              componentPath: parentRouteComponent.componentPath,
+              component: this,
+              rootData: this.rootData
+            }
+          )
+        : ''
+    },
+
+    sourceLocation() {
       // Possible parents are DitoForm for forms, or DitoView for root lists.
       // Both have a data property which abstracts away loading and inheriting
       // of data.
-      // Forms that are about to be destroyed due to navigation loose their
-      // route-record, but might still trigger this getter. Filter those out.
-      let data = this.routeRecord ? this.parentRouteComponent.data : null
-      if (data) {
-        // Handle nested data by splitting the dataPath, iterate through the
-        // actual data and look nest child-data up.
-        const dataParts = parseDataPath(
-          this.getDataPathFrom(this.parentRouteComponent)
-        )
-        // Compare dataParts against matched routePath parts, to identify those
-        // parts that need to be treated like ids and mapped to indices in data.
-        const pathParts = this.routeRecord.path.split('/')
-        const routeParts = pathParts.slice(pathParts.length - dataParts.length)
-        // TODO: Fix side-effects
-        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-        this.sourceKey = null
-        const lastDataPart = dataParts[dataParts.length - 1]
-        if (isObjectSource(this.sourceSchema) && lastDataPart === 'create') {
-          // If we have an object source and are creating, the dataPath needs to
-          // be shortened by the 'create' entry. This isn't needed for list
-          // sources, as there the parameter is actually mapped to the item id.
-          dataParts.length--
-        }
-        for (let i = 0, l = dataParts.length; i < l && data; i++) {
-          const dataPart = dataParts[i]
-          // If this is an :id part, find the index of the item with given id.
-          const key = /^:id/.test(routeParts[i])
-            ? dataPart === 'create'
-              ? null // There's no index for entries about to be created
-              : this.findItemIdIndex(this.sourceSchema, data, dataPart)
-            : dataPart
-          // Skip the final lookup but remember `sourceKey`, as we want the
-          // parent data so we can replace the entry at `sourceKey` on it.
-          if (i === l - 1) {
-            // TODO: Fix side-effects
-            // eslint-disable-next-line max-len
-            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-            this.sourceKey = key
-          } else {
-            data = data[key]
-          }
+      // Forms that are being left don't match the current route anymore, and
+      // mustn't resolve their source against it until they're unmounted.
+      let data = this.isLeavingRoute ? null : this.parentRouteComponent.data
+      if (!data) {
+        return null
+      }
+      // Handle nested data by splitting the dataPath, iterate through the
+      // actual data and look nest child-data up.
+      const dataParts = parseDataPath(
+        this.getDataPathFrom(this.parentRouteComponent)
+      )
+      // Compare dataParts against matched routePath parts, to identify those
+      // parts that need to be treated like ids and mapped to indices in data.
+      const pathParts = this.routeRecord.path.split('/')
+      const routeParts = pathParts.slice(pathParts.length - dataParts.length)
+      const lastDataPart = dataParts[dataParts.length - 1]
+      if (isObjectSource(this.sourceSchema) && lastDataPart === 'create') {
+        // If we have an object source and are creating, the dataPath needs to
+        // be shortened by the 'create' entry. This isn't needed for list
+        // sources, as there the parameter is actually mapped to the item id.
+        dataParts.length--
+      }
+      let key = null
+      for (let i = 0, l = dataParts.length; i < l && data; i++) {
+        const dataPart = dataParts[i]
+        // If this is an :id part, find the index of the item with given id.
+        key = /^:id/.test(routeParts[i])
+          ? dataPart === 'create'
+            ? null // There's no index for entries about to be created
+            : this.findItemIdIndex(this.sourceSchema, data, dataPart)
+          : dataPart
+        // Skip the final lookup, as we want the parent data so we can replace
+        // the entry at `key` on it.
+        if (i < l - 1) {
+          data = data[key]
         }
       }
-      return data
+      return data ? { data, key } : null
+    },
+
+    sourceData() {
+      // The parent data that holds the form's item, at `sourceKey`.
+      return this.sourceLocation?.data ?? null
+    },
+
+    sourceKey() {
+      return this.sourceLocation?.key ?? null
+    },
+
+    sourceItem() {
+      return this.sourceData && this.sourceKey !== null
+        ? this.sourceData[this.sourceKey]
+        : undefined
     },
 
     inheritedData() {
       // Data inherited from parent, and cloned to protect against reactive
       // changes until changes are applied through setSourceData(), unless
       // `sourceSchema.mutate` is true, in which case data is mutated directly.
-      if (
-        this.isTransient &&
-        this.clonedData === undefined &&
-        this.sourceData &&
-        this.sourceKey !== null
-      ) {
-        let data = this.sourceData[this.sourceKey]
-        if (!this.isMutating) {
-          // Use a trick to store cloned inherited data in clonedData, to make
-          // it reactive and prevent it from being cloned multiple times.
-          // TODO: Fix side-effects
-          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-          this.clonedData = data = clone(data)
-        }
-        if (
-          data === null &&
-          !this.isCreating &&
-          isObjectSource(this.sourceSchema)
-        ) {
-          // If data of an object source is null, redirect to its create route.
-          // TODO: Fix side-effects
-          // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-          this.$router.push({ path: `${this.path}/create` })
-        }
-        return data
-      }
-      return this.clonedData
+      // See the `sourceItem` watcher.
+      return this.isTransient
+        ? this.isMutating
+          ? this.sourceItem
+          : this.clonedData
+        : undefined
     },
 
     // @override ResourceMixin.hasData()
@@ -306,9 +320,53 @@ export default DitoComponent.component('DitoForm', {
       }
     },
 
-    sourceData: 'clearClonedData',
-    // Needed for the 'create' redirect in `inheritedData()` to work:
-    create: 'setupData'
+    sourceItem: {
+      immediate: true,
+      handler(item) {
+        if (this.isTransient) {
+          if (!this.isMutating) {
+            // Edit a copy of the inherited item, so that changes are only
+            // applied through setSourceData(). Copy it again whenever the item
+            // itself is replaced, e.g. after applying the changes.
+            this.clonedData = clone(item)
+          }
+          if (
+            item === null &&
+            !this.isCreating &&
+            isObjectSource(this.sourceSchema)
+          ) {
+            // If data of an object source is null, redirect to its create
+            // route.
+            this.$router.push({ path: `${this.path}/create` })
+          }
+        }
+      }
+    },
+
+    isCreating(isCreating) {
+      // Set up the data to create when redirected to the create route, e.g.
+      // by the `sourceItem` watcher.
+      if (isCreating) {
+        this.setupData()
+      }
+    }
+  },
+
+  created() {
+    // Writes defaults and computed values into the form's data, resolves
+    // options and tracks whether the data is dirty, see `FormModel`:
+    this.formModel = new FormModel({
+      component: this,
+      getSchema: () => this.schema,
+      getData: () => this.data,
+      getSourceSchema: () => this.sourceSchema
+    })
+  },
+
+  beforeUnmount() {
+    // Stop the model before the component's own watchers are stopped, as the
+    // model's watchers aren't part of the component, see `FormModel`.
+    this.formModel.stop()
   },
 
   methods: {
@@ -366,19 +424,22 @@ export default DitoComponent.component('DitoForm', {
     setData(data) {
       // setData() is called after submit when data has changed.
       if (this.isTransient) {
-        // For components with transient data, modify this.sourceData.
+        // For components with transient data, modify this.sourceData, and
+        // return the item stored there, as the form's own data is a copy.
         this.setSourceData(data)
+        return this.sourceItem
       } else {
         this.createdData = null
         this.loadedData = data
+        return this.data
       }
     },
 
-    clearClonedData(to, from) {
-      // Only clear if the watched sourceData itself changes in the form.
-      if (to !== from) {
-        this.clonedData = undefined
-      }
+    // Makes clean changes to the data, which don't make the form dirty, e.g. to
+    // apply what an action on the server already saved, see
+    // `FormModel.applyCleanChanges()`.
+    applyCleanChanges(makeChanges) {
+      return this.formModel.applyCleanChanges(makeChanges)
     },
 
     async cancel() {
@@ -400,6 +461,8 @@ 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.waitForPendingLoadsOf(this.formModel)
       if (validate && !this.validateAll()) {
         return false
       }
@@ -480,6 +543,11 @@ export default DitoComponent.component('DitoForm', {
       }
       if (success) {
         this.resetValidation()
+        // The saved or applied data isn't dirty, also when it isn't replaced,
+        // e.g. by a response without data, and before the closing below:
+        this.formModel
+          .takeProcessedDataSnapshot()
+          .catch(console.error)
         if (closeForm || button.closeForm) {
           this.close()
         } else if (this.isCreating) {

package/src/components/DitoLabel.vue

@@ -20,7 +20,7 @@ component.dito-label(
     )
     label(
       v-if="text"
-      :for="dataPath"
+      :for="htmlFor"
       v-html="text"
     )
     DitoAffixes(
@@ -48,7 +48,8 @@ export default DitoComponent.component('DitoLabel', {
 
   props: {
     label: { type: [String, Object], default: null },
-    dataPath: { type: String, default: null },
+    // The DOM id of the labelled element, see `DitoContainer.labelHtmlFor`.
+    htmlFor: { type: String, default: null },
     collapsed: { type: Boolean, default: false },
     collapsible: { type: Boolean, default: false },
     info: { type: String, default: null }

package/src/components/DitoPane.vue

@@ -2,10 +2,10 @@
 <template lang="pug">
 .dito-pane(
   v-if="isPopulated && componentSchemas.length > 0"
-  :id="tab ? `${dataPath}-tabpanel-${tab}` : null"
+  :id="tabPanelId"
   v-resize="onResizePane"
   :role="tab ? 'tabpanel' : null"
-  :aria-labelledby="tab ? `${dataPath}-tab-${tab}` : null"
+  :aria-labelledby="tabId"
   :class="classes"
 )
   template(
@@ -23,7 +23,7 @@
       v-if="['before', 'both'].includes(schema.break)"
     )
     DitoContainer(
-      v-if="shouldRenderSchema(schema)"
+      v-if="shouldRenderComponent(schema, nested, dataPath)"
       ref="containers"
       :key="nestedDataPath"
       :data-index="index"
@@ -47,9 +47,11 @@
 
 <script>
 import DitoComponent from '../DitoComponent.js'
+import DitoContext from '../DitoContext.js'
 import ContextMixin from '../mixins/ContextMixin.js'
 import { appendDataPath } from '../utils/data.js'
-import { isNested } from '../utils/schema.js'
+import { isNested } from '../utils/schema/structure.js'
+import { shouldRenderSchema } from '../utils/schema/data.js'
 
 // @vue/component
 export default DitoComponent.component('DitoPane', {
@@ -100,6 +102,23 @@ export default DitoComponent.component('DitoPane', {
       return this.tab ? this : this.$tabComponent()
     },
 
+    componentPath() {
+      // Tabs add their name, as they don't appear in data paths.
+      const { componentPath } = this.parentComponent
+      return this.tab ? appendDataPath(componentPath, this.tab) : componentPath
+    },
+
+    // See `DitoTabs.getTabId()` and `getTabPanelId()`:
+    tabId() {
+      const { componentPath } = this.schemaComponent
+      return this.tab ? `${componentPath}-tab-${this.tab}` : null
+    },
+
+    tabPanelId() {
+      const { componentPath } = this.schemaComponent
+      return this.tab ? `${componentPath}-tabpanel-${this.tab}` : null
+    },
+
     componentSchemas() {
       // Compute a components list which has the dataPath baked into its keys
       // and adds the key as the name to each component, used for labels, etc.
@@ -117,12 +136,13 @@ export default DitoComponent.component('DitoPane', {
           // Share dataPath and store with parent if not nested:
           const nested = isNested(schema)
           const nestedDataPath = appendDataPath(this.dataPath, name)
+          const dataPath =
+            nested && !wrapPrimitives
+              ? nestedDataPath
+              : this.dataPath
           return {
             schema,
-            dataPath:
-              nested && !wrapPrimitives
-                ? nestedDataPath
-                : this.dataPath,
+            dataPath,
             nestedDataPath,
             nested,
             store: this.getChildStore(name)
@@ -197,6 +217,12 @@ export default DitoComponent.component('DitoPane', {
   watch: {
     'componentSchemas.length'(length) {
       this.positions.length = length
+    },
+
+    'componentPath'(componentPath, oldComponentPath) {
+      // Component paths change when list items move, see `_registerEntry()`.
+      this._register(false, oldComponentPath)
+      this._register(true, componentPath)
     }
   },
 
@@ -209,8 +235,24 @@ export default DitoComponent.component('DitoPane', {
   },
 
   methods: {
-    _register(add) {
-      this.schemaComponent._registerPane(this, add)
+    shouldRenderComponent(schema, nested, dataPath) {
+      // Evaluate the component's `if` before it is rendered, with its own
+      // context, the same as once it is rendered, not with the pane's.
+      return shouldRenderSchema(
+        schema,
+        DitoContext.createForSchema(this, {
+          schema,
+          name: schema.name,
+          nested,
+          data: this.data,
+          dataPath,
+          rootData: this.rootData
+        })
+      )
+    },
+
+    _register(add, componentPath = this.componentPath) {
+      this.schemaComponent._registerPane(this, add, componentPath)
     },
 
     focus() {
@@ -221,7 +263,9 @@ export default DitoComponent.component('DitoPane', {
 
     onResizePane() {
       this.$nextTick(() => {
-        for (const container of this.$refs.containers) {
+        // The containers aren't rendered anymore if the pane was emptied or
+        // unmounted in the meantime.
+        for (const container of this.$refs.containers ?? []) {
           const node = container.$el
           const index = +node.dataset.index
           const bounds = node.getBoundingClientRect()

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"
@@ -45,9 +46,10 @@ component.dito-panel(
 <script>
 import { isFunction } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
+import DitoContext from '../DitoContext.js'
 import ContextMixin from '../mixins/ContextMixin.js'
 import ValidatorMixin from '../mixins/ValidatorMixin.js'
-import { getButtonSchemas } from '../utils/schema.js'
+import { getButtonSchemas } from '../utils/schema/lookup.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 
 // @vue/component
@@ -68,7 +70,9 @@ export default DitoComponent.component('DitoPanel', {
     meta: { type: Object, required: true },
     store: { type: Object, required: true },
     disabled: { type: Boolean, required: true },
-    panelTabComponent: { type: Object, default: null }
+    panelTabComponent: { type: Object, default: null },
+    // The component path of the panel's entry, see `getAllPanelEntries()`:
+    panelComponentPath: { type: String, required: true }
   },
 
   data() {
@@ -79,14 +83,31 @@ export default DitoComponent.component('DitoPanel', {
 
   computed: {
     nested() {
-      // For `ContextMixin`:
+      // For `ContextMixin`: The panel's address, `dataPath`, points into the
+      // item that it displays, see `getAllPanelEntries()`.
       return true
     },
 
+    // @override ContextMixin.context
+    context() {
+      // Evaluate the callbacks of the panel and of its components with the
+      // data that the panel displays: its own data, e.g. of `$filters`, or the
+      // data of its schema component, at that component's data path.
+      return new DitoContext(this, {
+        nested: false,
+        data: this.panelData,
+        dataPath: this.panelDataPath
+      })
+    },
+
     panelComponent() {
       return this
     },
 
+    componentPath() {
+      return this.panelComponentPath
+    },
+
     tabComponent() {
       return this.panelTabComponent
     },
@@ -145,6 +166,14 @@ export default DitoComponent.component('DitoPanel', {
     })
   },
 
+  watch: {
+    componentPath(componentPath, oldComponentPath) {
+      // Component paths change when list items move, see `_registerEntry()`.
+      this._register(false, oldComponentPath)
+      this._register(true, componentPath)
+    }
+  },
+
   created() {
     this._register(true)
     // NOTE: This is not the same as `schema.data` handling in DitoSchema,
@@ -162,10 +191,10 @@ export default DitoComponent.component('DitoPanel', {
   },
 
   methods: {
-    _register(add) {
+    _register(add, componentPath = this.componentPath) {
       // Register the panels so that other components can find them by their
       // data-path, e.g. in TypeList.onFilterErrors()
-      this.schemaComponent._registerPanel(this, add)
+      this.schemaComponent._registerPanel(this, add, componentPath)
     }
   }
 })

package/src/components/DitoPanels.vue

@@ -3,13 +3,14 @@
   v-if="panels.length > 0"
 )
   template(
-    v-for="{ schema, dataPath, tabComponent } in panels"
+    v-for="{ schema, dataPath, componentPath, tabComponent } in panels"
   )
     DitoPanel(
       v-if="shouldRenderSchema(schema)"
       :key="getPanelKey(dataPath, tabComponent)"
       :schema="schema"
       :dataPath="dataPath"
+      :panelComponentPath="componentPath"
       :data="data"
       :meta="meta"
       :store="getChildStore(schema.name)"

package/src/components/DitoRoot.vue

@@ -28,7 +28,7 @@
       :spinner="options.spinner"
       :isLoading="isLoading"
     )
-    RouterView
+    DitoRouterView(:routeLevel="0")
   DitoSidebar
     DitoAccount(
       v-if="user"
@@ -50,10 +50,10 @@ import DitoUser from '../DitoUser.js'
 import DitoView from '../components/DitoView.vue'
 import DitoDialog from './DitoDialog.vue'
 import {
-  processView,
+  setupView,
   resolveViews,
-  processSchemaComponents
-} from '../utils/schema.js'
+  setupSchemaComponents
+} from '../utils/schema/setup.js'
 
 // @vue/component
 export default DitoComponent.component('DitoRoot', {
@@ -251,7 +251,7 @@ export default DitoComponent.component('DitoRoot', {
         async (resolve, reject) => {
           // Process components to resolve async schemas.
           const routes = []
-          await processSchemaComponents(
+          await setupSchemaComponents(
             this.api,
             { type: 'dialog', components },
             routes,
@@ -407,7 +407,7 @@ export default DitoComponent.component('DitoRoot', {
       // Collect all routes from the root schema components
       const routes = await mapConcurrently(
         Object.entries(this.resolvedViews),
-        ([name, schema]) => processView(DitoView, this.api, schema, name)
+        ([name, schema]) => setupView(DitoView, this.api, schema, name)
       )
       // Now that the routes are loaded, replace all existing routes with the
       // new routes, and restore the current path.

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>