@ditojs/admin 2.100.0 → 3.1.0

package/src/components/DitoSchema.vue

@@ -28,7 +28,6 @@ slot(name="prepend")
         v-if="hasLabel"
         :label="label"
         :info="info"
-        :dataPath="dataPath"
         :collapsible="collapsible"
         :collapsed="!opened"
         @open="onOpen"
@@ -40,8 +39,7 @@ slot(name="prepend")
         DitoTabs(
           v-if="opened"
           v-model="selectedTab"
-          :tabs="tabs"
-          :dataPath="dataPath"
+          :tabs="renderedTabs"
         )
       DitoClipboard(
         v-if="clipboard"
@@ -62,8 +60,10 @@ slot(name="prepend")
           v-for="(tabSchema, tab) in tabs"
           :key="tab"
         )
-          //- TODO: Switch to v-if instead of v-show, once validation is
-          //- decoupled from components.
+          //- TODO: Switch to v-if instead of v-show, now that the dirty state
+          //- of forms is based on their data (views still use the dirty flags
+          //- of their components). `navigateToComponent()` then needs to
+          //- select the tab that displays the component.
           DitoPane.dito-pane__tab(
             v-show="selectedTab === tab"
             ref="tabs"
@@ -111,7 +111,6 @@ import {
   isObject,
   isArray,
   isFunction,
-  isRegExp,
   equals,
   parseDataPath,
   normalizeDataPath,
@@ -122,14 +121,17 @@ import DitoComponent from '../DitoComponent.js'
 import ContextMixin from '../mixins/ContextMixin.js'
 import ItemMixin from '../mixins/ItemMixin.js'
 import { appendDataPath } from '../utils/data.js'
+import { isPanel } from '../utils/schema/structure.js'
 import {
   getNamedSchemas,
   getPanelEntries,
-  setDefaultValues,
-  processData,
-  isEmptySchema,
-  isNested
-} from '../utils/schema.js'
+  isEmptySchema
+} from '../utils/schema/lookup.js'
+import { initializeData, processData } from '../utils/schema/data.js'
+import {
+  getDataValidationErrors,
+  getMatchingValidationErrors
+} from '../utils/schema/validation.js'
 import { getSchemaAccessor, getStoreAccessor } from '../utils/accessor.js'
 
 // @vue/component
@@ -185,6 +187,7 @@ export default DitoComponent.component('DitoSchema', {
       ),
       selectedTab: null,
       componentsRegistry: {},
+      unnestedComponentsRegistry: {},
       panesRegistry: {},
       panelsRegistry: {},
       scrollPositions: {}
@@ -210,17 +213,33 @@ export default DitoComponent.component('DitoSchema', {
     },
 
     panelEntries() {
-      return getPanelEntries(this.schema.panels, this.dataPath)
+      return getPanelEntries(
+        this.schema.panels,
+        this.dataPath,
+        this.componentPath
+      )
     },
 
     tabs() {
       return getNamedSchemas(this.schema.tabs)
     },
 
+    renderedTabs() {
+      // Evaluate the tabs' `if` with the schema's context, and only once there
+      // is data to evaluate it with, as their components do too.
+      return this.tabs && this.data
+        ? Object.fromEntries(
+            Object.entries(this.tabs).filter(([, tab]) =>
+              this.shouldRenderSchema(tab)
+            )
+          )
+        : this.tabs
+    },
+
     defaultTab() {
       let first = null
-      if (this.tabs) {
-        const tabs = Object.values(this.tabs).filter(this.shouldRenderSchema)
+      if (this.renderedTabs) {
+        const tabs = Object.values(this.renderedTabs)
         for (const { name, defaultTab } of tabs) {
           if (isFunction(defaultTab) ? defaultTab(this.context) : defaultTab) {
             return name
@@ -251,13 +270,11 @@ export default DitoComponent.component('DitoSchema', {
 
     // @override
     processedData() {
-      // TODO: Fix side-effects
       return this.processData({ target: 'server', schemaOnly: true })
     },
 
     clipboardData: {
       get() {
-        // TODO: Fix side-effects
         return this.processData({ target: 'clipboard', schemaOnly: true })
       },
 
@@ -276,10 +293,6 @@ export default DitoComponent.component('DitoSchema', {
       )
     },
 
-    isNested() {
-      return isNested(this.schema)
-    },
-
     isDirty() {
       return this.someComponent(it => it.isDirty)
     },
@@ -313,7 +326,8 @@ export default DitoComponent.component('DitoSchema', {
     },
 
     isTopLevelSchema() {
-      return !this.isNested && !this.inlined
+      // Panels are displayed in the sidebar, inlined schemas in their parents.
+      return !isPanel(this.schema) && !this.inlined
     },
 
     hasTopLevelTabs() {
@@ -335,6 +349,10 @@ export default DitoComponent.component('DitoSchema', {
       return Object.values(this.componentsRegistry)
     },
 
+    unnestedComponents() {
+      return Object.values(this.unnestedComponentsRegistry)
+    },
+
     panes() {
       return Object.values(this.panesRegistry)
     },
@@ -396,9 +414,11 @@ export default DitoComponent.component('DitoSchema', {
         })
       }
       if (this.hasTopLevelTabs) {
-        const tab = this.shouldRenderSchema(this.tabs[newTab])
-          ? newTab
-          : this.defaultTab
+        // Without a selected tab, e.g. while a nested form is open, keep the
+        // route without hash. Fall back to the default tab only for tabs that
+        // aren't rendered.
+        const tab =
+          !newTab || newTab in this.renderedTabs ? newTab : this.defaultTab
         this.$router.replace({
           query: this.$route.query,
           hash: tab ? `#${tab}` : null
@@ -487,16 +507,7 @@ export default DitoComponent.component('DitoSchema', {
 
     onOpen(open) {
       this.emitEvent('open', { context: { open } })
-      // Prevent closing the schema with invalid data, since the in-component
-      // validation will not be executed once it's closed.
-
-      // TODO: Move validation out of components, to schema, just like
-      // processing, and use `showValidationErrors()` for the resulting errors,
-      // then remove this requirement, since we can validate closed forms and
-      // schemas then.
-      if (!this.opened || open || this.validateAll()) {
-        this.opened = open
-      }
+      this.opened = open
     },
 
     onChange() {
@@ -532,43 +543,30 @@ export default DitoComponent.component('DitoSchema', {
     },
 
     validateAll(match, notify = true) {
-      const { componentsByDataPath } = this
-      let dataPaths
-      if (match) {
-        const check = isFunction(match)
-          ? match
-          : isRegExp(match)
-            ? field => match.test(field)
-            : null
-        dataPaths = check
-          ? Object.keys(componentsByDataPath).filter(check)
-          : isArray(match)
-            ? match
-            : [match]
-      }
+      // Validate the data, not the mounted components, so that fields in
+      // collapsed schemas and closed nested forms are validated too.
+      const dataValidationErrors = this.hasData
+        ? getDataValidationErrors(this.schema, this.data, {
+            dataPath: this.dataPath,
+            component: this,
+            rootData: this.rootData
+          })
+        : null
+      const matchingValidationErrors = match
+        ? getMatchingValidationErrors(dataValidationErrors, match)
+        : dataValidationErrors
       if (notify) {
-        this.clearErrors()
-      }
-      let isValid = true
-      let first = true
-      dataPaths ||= Object.keys(componentsByDataPath)
-      for (const dataPath of dataPaths) {
-        const components = this.getComponentsByDataPath(dataPath)
-        for (const component of components) {
-          if (!component.validate(notify)) {
-            // Focus first error field
-            if (notify && first) {
-              component.scrollIntoView()
-            }
-            first = false
-            isValid = false
-          }
+        if (matchingValidationErrors) {
+          this._showValidationErrorsByFullDataPath(
+            matchingValidationErrors,
+            true,
+            true
+          ).catch(console.error)
+        } else {
+          this.clearErrors()
         }
       }
-      if (notify && !isValid) {
-        this.notifyErrors()
-      }
-      return isValid
+      return !matchingValidationErrors
     },
 
     verifyAll(match) {
@@ -576,75 +574,162 @@ export default DitoComponent.component('DitoSchema', {
     },
 
     async showValidationErrors(errors, focus, first = true) {
+      // Convert the data paths from JavaScript property access notation to
+      // our own form of relative JSON pointers. If the schema is a data-root,
+      // prefix its own dataPath to all errors, since the data that it sends
+      // and validates will be unprefixed.
+      const errorsByFullDataPath = Object.fromEntries(
+        Object.entries(errors).map(([dataPath, errs]) => [
+          normalizeDataPath(
+            this.hasOwnData
+              ? appendDataPath(this.dataPath, dataPath)
+              : dataPath
+          ),
+          errs
+        ])
+      )
+      return this._showValidationErrorsByFullDataPath(
+        errorsByFullDataPath,
+        focus,
+        first
+      )
+    },
+
+    // Finds all components that display the value at `dataPath` and passes
+    // them to `onComplete()`, revealing them first if needed: Collapsed
+    // schemas open, and the nearest components that display a part of the
+    // data path are asked to navigate to the rest, e.g. sections open and
+    // sources open their inlined items or navigate to nested forms, see
+    // `SourceMixin.navigateToComponent()`. Once components are found, the
+    // other ones are only revealed in inlined schemas
+    // (`shouldRevealInlinedOnly`), so that there's only one navigation to a
+    // nested form. Returns `true` if components were found and `onComplete()`
+    // accepted them.
+    async navigateToComponent(
+      dataPath,
+      onComplete,
+      { shouldRevealInlinedOnly = false } = {}
+    ) {
+      const { opened } = this
+      if (!opened) {
+        this.opened = true
+        await this.$nextTick()
+      }
+      const acceptedComponents = []
+      const completeWithComponents = components => {
+        const isAccepted = onComplete?.(components) ?? true
+        if (isAccepted) {
+          acceptedComponents.push(...components)
+        }
+        return isAccepted
+      }
+
+      const navigateViaNestedComponents = async nestedComponents => {
+        for (const nestedComponent of nestedComponents) {
+          // Skip components that contain accepted components already.
+          const componentPathPrefix = `${nestedComponent.componentPath}/`
+          const hasAcceptedComponents = acceptedComponents.some(
+            acceptedComponent =>
+              acceptedComponent.componentPath.startsWith(componentPathPrefix)
+          )
+          if (!hasAcceptedComponents) {
+            await nestedComponent.navigateToComponent?.(
+              dataPath,
+              completeWithComponents,
+              {
+                shouldRevealInlinedOnly: (
+                  shouldRevealInlinedOnly || acceptedComponents.length > 0
+                )
+              }
+            )
+          }
+        }
+      }
+
+      const displayingComponents = this.getComponentsByDataPath(dataPath)
+      if (displayingComponents.length > 0) {
+        completeWithComponents(displayingComponents)
+      }
+      // Walk up the data path and ask the nested components that display a
+      // part of it to navigate to the rest of it:
+      const dataPathParts = parseDataPath(dataPath)
+      const schemaDataPathLength = parseDataPath(this.dataPath).length
+      while (dataPathParts.length > schemaDataPathLength + 1) {
+        dataPathParts.pop()
+        await navigateViaNestedComponents(
+          this.getComponentsByDataPath(dataPathParts)
+        )
+      }
+      // Unnested components share the data path of the schema, so they
+      // decide by schema whether they can navigate to the data path:
+      await navigateViaNestedComponents(this.unnestedComponents)
+      const hasFoundComponents = acceptedComponents.length > 0
+      if (!hasFoundComponents) {
+        this.opened = opened
+      }
+      return hasFoundComponents
+    },
+
+    // Shows `errorsByFullDataPath`, keyed by normalized data paths including
+    // the schema's own data path, see `showValidationErrors()`. Errors are
+    // shown on all components that display their data path, and the first one
+    // in document order is focused.
+    async _showValidationErrorsByFullDataPath(
+      errorsByFullDataPath,
+      focus,
+      first
+    ) {
       this.clearErrors()
       const unmatched = []
       const wasFirst = first
-      for (const [dataPath, errs] of Object.entries(errors)) {
-        // If the schema is a data-root, prefix its own dataPath to all errors,
-        // since the data that it sends and validates will be unprefixed.
-        const fullDataPath = this.hasOwnData
-          ? appendDataPath(this.dataPath, dataPath)
-          : dataPath
-        // console.log(this, this.dataPath, this.hasOwnData, fullDataPath)
-        // Convert from JavaScript property access notation, to our own form
-        // of relative JSON pointers as data-paths:
-        const dataPathParts = parseDataPath(fullDataPath)
-        let found = false
-        const components = this.getComponentsByDataPath(dataPathParts)
-        for (const component of components) {
-          if (component.showValidationErrors(errs, first && focus)) {
-            found = true
-            first = false
-            break
-          }
-        }
-        if (!found) {
-          // Couldn't find a component in an active form for the given dataPath.
-          // See if we can find a component serving a part of the dataPath,
-          // and take it from there:
-          const property = dataPathParts.pop()
-          while (dataPathParts.length > 0) {
-            const components = this.getComponentsByDataPath(dataPathParts)
-            for (const component of components) {
-              const navigated = await component.navigateToComponent?.(
-                fullDataPath,
-                subComponents => {
-                  let found = false
-                  for (const component of subComponents) {
-                    const matched = Object.fromEntries(
-                      Object.entries(errors).filter(
-                        ([dataPath]) =>
-                          normalizeDataPath(dataPath).startsWith(
-                            component.dataPath
-                          )
-                      )
-                    )
-                    if (
-                      Object.keys(matched).length > 0 &&
-                      component.showValidationErrors(matched, first && focus)
-                    ) {
-                      found = true
-                      first = false
-                      break
-                    }
-                  }
-                  return found
-                }
-              )
-              if (navigated) {
-                // Found a nested form to display at least parts fo the errors.
-                // We can't show all errors at once, so we're done. Don't call
-                // `notifyErrors()` yet, as we can only display it once
-                // `showValidationErrors()` was called from `DitoForm.mounted()`
-                return
+      for (const [dataPath, errs] of Object.entries(errorsByFullDataPath)) {
+        let nestedForm = null
+        const displayingComponents = []
+        const hasFoundComponents = await this.navigateToComponent(
+          dataPath,
+          foundComponents => {
+            for (const component of foundComponents) {
+              if (component.isForm) {
+                // A nested form was navigated to, display the errors that are
+                // part of its data there.
+                nestedForm = component
+              } else {
+                displayingComponents.push(component)
               }
             }
-            // Still here, so keep removing the last part until we find a match.
-            dataPathParts.pop()
+            return true
+          }
+        )
+        // Focus the first component in document order, unless a nested form
+        // displays the errors:
+        sortInDocumentOrder(displayingComponents).forEach(
+          (component, index) => {
+            component.showValidationErrors(
+              errs,
+              first && focus && !nestedForm && index === 0
+            )
           }
+        )
+        if (nestedForm) {
+          const nestedFormErrors = Object.fromEntries(
+            Object.entries(errorsByFullDataPath).filter(
+              ([errorDataPath]) => (
+                errorDataPath === nestedForm.dataPath ||
+                errorDataPath.startsWith(`${nestedForm.dataPath}/`)
+              )
+            )
+          )
+          // The nested form notifies the errors itself, as it can't display
+          // the remaining errors of this schema, so we're done here.
+          return nestedForm.showValidationErrors(
+            nestedFormErrors,
+            first && focus
+          )
+        }
+        if (!hasFoundComponents) {
           // When the error can't be matched, add it to a list of unmatched
           // errors with decent message, to report at the end.
-          const field = labelize(property)
+          const field = labelize(parseDataPath(dataPath).pop())
           for (const err of errs) {
             const prefix = field
               ? `The field ${field}`
@@ -671,12 +756,13 @@ export default DitoComponent.component('DitoSchema', {
     resetData() {
       // We can't set `this.data = ...` because it's a property, but we can set
       // all known properties on it to the values returned by
-      // `setDefaultValues()`, as they are all reactive already from the starts:
+      // `initializeData()`, as they are all reactive already from the starts:
       // eslint-disable-next-line vue/no-mutating-props
-      Object.assign(this.data, setDefaultValues(this.dataSchema, {}, this))
+      Object.assign(this.data, initializeData(this.dataSchema, {}, this))
       this.clearErrors()
     },
 
+    // Merges the values of `data` into the schema's data, and returns it.
     setData(data) {
       for (const name in data) {
         if (name in this.data) {
@@ -689,6 +775,7 @@ export default DitoComponent.component('DitoSchema', {
           }
         }
       }
+      return this.data
     },
 
     filterData(data) {
@@ -733,26 +820,50 @@ export default DitoComponent.component('DitoSchema', {
       this.$schemaParentComponent()?._registerSchemaComponent(this, add)
     },
 
-    _registerComponent(component, add) {
-      this._registerEntry(this.componentsRegistry, component, add)
+    _registerComponent(component, add, componentPath) {
+      this._registerEntry(
+        this.componentsRegistry,
+        component,
+        add,
+        componentPath
+      )
       // Only register with the parent if schema shares data with it.
-      this.parentSchemaComponent?._registerComponent(component, add)
+      this.parentSchemaComponent?._registerComponent(
+        component,
+        add,
+        componentPath
+      )
+    },
+
+    _registerUnnestedComponent(component, add, componentPath) {
+      // Unnested components are only registered with their own schema, as
+      // they share its data path, see `navigateToComponent()`.
+      this._registerEntry(
+        this.unnestedComponentsRegistry,
+        component,
+        add,
+        componentPath
+      )
     },
 
-    _registerPane(pane, add) {
-      this._registerEntry(this.panesRegistry, pane, add)
+    _registerPane(pane, add, componentPath) {
+      this._registerEntry(this.panesRegistry, pane, add, componentPath)
     },
 
-    _registerPanel(panel, add) {
-      this._registerEntry(this.panelsRegistry, panel, add)
+    _registerPanel(panel, add, componentPath) {
+      this._registerEntry(this.panelsRegistry, panel, add, componentPath)
     },
 
-    _registerEntry(registry, entry, add) {
-      const uid = entry.$uid
+    // Registries are keyed by component path. Component paths change when list
+    // items move, and the entries then register again under their new path,
+    // see `TypeMixin`, `DitoPane` and `DitoPanel`.
+    _registerEntry(registry, entry, add, componentPath = entry.componentPath) {
       if (add) {
-        registry[uid] = entry
-      } else {
-        delete registry[uid]
+        registry[componentPath] = entry
+      } else if (registry[componentPath] === entry) {
+        // Unless another entry registered under the path already, e.g. when
+        // list items swap places.
+        delete registry[componentPath]
       }
     },
 
@@ -774,14 +885,36 @@ export default DitoComponent.component('DitoSchema', {
     },
 
     _getEntriesByDataPath(entriesByDataPath, dataPath) {
-      return entriesByDataPath[normalizeDataPath(dataPath)] || []
+      return sortInDocumentOrder(
+        entriesByDataPath[normalizeDataPath(dataPath)] || []
+      )
     },
 
     _getEntriesByName(entriesByDataPath, name) {
-      return entriesByDataPath[appendDataPath(this.dataPath, name)] || []
+      return sortInDocumentOrder(
+        entriesByDataPath[appendDataPath(this.dataPath, name)] || []
+      )
     }
   }
 })
+
+// Sorts components that display the same data, e.g. in different tabs, in the
+// document order of their elements, which is the order of their schemas.
+function sortInDocumentOrder(components) {
+  return components.length > 1
+    ? [...components].sort(compareByDocumentPosition)
+    : components
+}
+
+function compareByDocumentPosition(component1, component2) {
+  const node1 = component1.$el
+  const node2 = component2.$el
+  if (!node1 || !node2 || node1 === node2) {
+    return 0
+  }
+  const position = node1.compareDocumentPosition(node2)
+  return position & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+}
 </script>
 
 <style lang="scss">

package/src/components/DitoSchemaInlined.vue

@@ -41,7 +41,7 @@ DitoSchema.dito-schema-inlined(
 
 <script>
 import DitoComponent from '../DitoComponent.js'
-import { isCompact } from '../utils/schema.js'
+import { isCompact } from '../utils/schema/structure.js'
 // @vue/component
 export default DitoComponent.component('DitoSchemaInlined', {
   emits: ['delete'],

package/src/components/DitoTabs.vue

@@ -1,19 +1,16 @@
 <template lang="pug">
 .dito-tabs(role="tablist")
-  template(
+  a.dito-tabs__link(
     v-for="(tabSchema, key) in tabs"
-  )
-    a.dito-tabs__link(
-      v-if="shouldRenderSchema(tabSchema)"
-      :id="getTabId(key)"
-      :key="key"
-      role="tab"
-      :aria-selected="modelValue === key"
-      :aria-controls="getPanelId(key)"
-      :tabindex="modelValue === key ? 0 : -1"
-      :class="{ 'dito-tabs__link--active': modelValue === key }"
-      @click="$emit('update:modelValue', key)"
-    ) {{ getLabel(tabSchema, key) }}
+    :id="getTabId(key)"
+    :key="key"
+    role="tab"
+    :aria-selected="modelValue === key"
+    :aria-controls="getTabPanelId(key)"
+    :tabindex="modelValue === key ? 0 : -1"
+    :class="{ 'dito-tabs__link--active': modelValue === key }"
+    @click="$emit('update:modelValue', key)"
+  ) {{ getLabel(tabSchema, key) }}
 </template>
 
 <script>
@@ -24,17 +21,18 @@ export default DitoComponent.component('DitoTabs', {
   emits: ['update:modelValue'],
   props: {
     tabs: { type: Object, default: null },
-    modelValue: { type: String, default: null },
-    dataPath: { type: String, default: '' }
+    modelValue: { type: String, default: null }
   },
 
   methods: {
+    // Tabs are identified through the component path of their schema, like in
+    // `DitoPane.tabId` and `tabPanelId`.
     getTabId(key) {
-      return `${this.dataPath}-tab-${key}`
+      return `${this.schemaComponent.componentPath}-tab-${key}`
     },
 
-    getPanelId(key) {
-      return `${this.dataPath}-tabpanel-${key}`
+    getTabPanelId(key) {
+      return `${this.schemaComponent.componentPath}-tabpanel-${key}`
     }
   }
 })