@ditojs/admin 0.265.0 → 0.269.0

package/src/components/DitoSchema.vue

@@ -29,7 +29,7 @@
           :dataPath="dataPath"
           :data="data"
         )
-      dito-components.dito-components-tab(
+      dito-pane.dito-pane-tab(
         v-if="hasTabs"
         v-for="(schema, tab) in tabs"
         ref="tabs"
@@ -41,16 +41,15 @@
         :data="data"
         :meta="meta"
         :store="store"
-        :single="!inlined && !hasMainComponents"
+        :single="!inlined && !hasMainPane"
         :disabled="disabled"
         :generateLabels="generateLabels"
       )
       transition-height(
         :enabled="inlined"
       )
-        dito-components.dito-components-main(
-          v-if="hasMainComponents"
-          v-show="opened"
+        dito-pane.dito-pane-main(
+          v-if="hasMainPane && opened"
           ref="components"
           :schema="schema"
           :dataPath="dataPath"
@@ -70,9 +69,8 @@
         v-if="!hasLabel"
         name="edit-buttons"
       )
-    template(ve-else)
+    template(v-else-if="isPopulated")
       dito-panels(
-        v-if="isPopulated && panelSchemas.length > 0"
         :panels="panelSchemas"
         :data="data"
         :meta="meta"
@@ -104,7 +102,7 @@
     > .dito-panels
       padding: $content-padding $content-padding $content-padding 0
     // Display a ruler between tabbed components and towards the .dito-buttons
-    .dito-components-tab + .dito-components-main
+    .dito-pane-tab + .dito-pane-main
       &::before
         // Use a pseudo element to display a ruler with proper margins
         display: block
@@ -204,8 +202,8 @@ export default DitoComponent.component('dito-schema', {
           ? data.call(this, this.context)
           : data
       ),
-      containersRegistry: {},
       componentsRegistry: {},
+      panesRegistry: {},
       panelsRegistry: {}
     }
   },
@@ -225,8 +223,8 @@ export default DitoComponent.component('dito-schema', {
 
     panelSchemas() {
       const panels = getPanelSchemas(this.schema.panels, '')
-      for (const container of Object.values(this.containersRegistry)) {
-        panels.push(...container.panelSchemas)
+      for (const pane of this.panes) {
+        panels.push(...pane.panelSchemas)
       }
       return panels
     },
@@ -341,7 +339,7 @@ export default DitoComponent.component('dito-schema', {
       return !this.inlined && !!this.tabs
     },
 
-    hasMainComponents() {
+    hasMainPane() {
       const { components } = this.schema
       return !!components && Object.keys(components).length > 0
     },
@@ -352,14 +350,26 @@ export default DitoComponent.component('dito-schema', {
       }
     }),
 
-    containersByDataPath() {
-      return this._listEntriesByDataPath(this.containersRegistry)
+    components() {
+      return Object.values(this.componentsRegistry)
+    },
+
+    panes() {
+      return Object.values(this.panesRegistry)
+    },
+
+    panels() {
+      return Object.values(this.panelsRegistry)
     },
 
     componentsByDataPath() {
       return this._listEntriesByDataPath(this.componentsRegistry)
     },
 
+    panesByDataPath() {
+      return this._listEntriesByDataPath(this.panesRegistry)
+    },
+
     panelsByDataPath() {
       return this._listEntriesByDataPath(this.panelsRegistry)
     }
@@ -370,7 +380,7 @@ export default DitoComponent.component('dito-schema', {
     this.setupSchemaFields()
     // Delegate change events through to parent schema:
     this.delegate('change', this.parentSchemaComponent)
-    this.emitEvent('create')
+    this.emitEvent('initialize') // Not `'create'`, since that's for data.
   },
 
   beforeDestroy() {
@@ -422,17 +432,11 @@ export default DitoComponent.component('dito-schema', {
     },
 
     someComponent(callback) {
-      return (
-        this.isPopulated &&
-        Object.values(this.componentsRegistry).some(callback)
-      )
+      return this.isPopulated && this.components.some(callback)
     },
 
     everyComponent(callback) {
-      return (
-        this.isPopulated &&
-        Object.values(this.componentsRegistry).every(callback)
-      )
+      return this.isPopulated && this.components.every(callback)
     },
 
     onExpand(expand) {
@@ -440,11 +444,16 @@ export default DitoComponent.component('dito-schema', {
         // TODO: Actually expose this on DitoContext?
         context: { expand }
       })
-      this.opened = expand
-    },
-
-    onLoad() {
-      this.emitEvent('load')
+      // 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 || expand || this.validateAll()) {
+        this.opened = expand
+      }
     },
 
     onChange() {
@@ -452,13 +461,13 @@ export default DitoComponent.component('dito-schema', {
     },
 
     resetValidation() {
-      for (const component of Object.values(this.componentsRegistry)) {
+      for (const component of this.components) {
         component.resetValidation()
       }
     },
 
     clearErrors() {
-      for (const component of Object.values(this.componentsRegistry)) {
+      for (const component of this.components) {
         component.clearErrors()
       }
     },
@@ -512,7 +521,7 @@ export default DitoComponent.component('dito-schema', {
       return this.validateAll(match, false)
     },
 
-    showValidationErrors(errors, focus) {
+    async showValidationErrors(errors, focus) {
       this.clearErrors()
       let first = true
       const unmatched = []
@@ -531,7 +540,7 @@ export default DitoComponent.component('dito-schema', {
         for (const component of components) {
           if (component.showValidationErrors(errs, first && focus)) {
             found = true
-            break
+            first = false
           }
         }
         if (!found) {
@@ -542,22 +551,21 @@ export default DitoComponent.component('dito-schema', {
           while (dataPathParts.length > 0) {
             const components = this.getComponentsByDataPath(dataPathParts)
             for (const component of components) {
-              if (component.navigateToComponent?.(
+              if (await component.navigateToComponent?.(
                 fullDataPath,
-                subComponent => {
-                  // Filter the errors to only contain those that belong to the
-                  // matched dataPath:
-                  const parentPath = normalizeDataPath(dataPathParts)
-                  const filteredErrors = Object.entries(errors).reduce(
-                    (filtered, [dataPath, errs]) => {
-                      if (normalizeDataPath(dataPath).startsWith(parentPath)) {
-                        filtered[dataPath] = errs
-                      }
-                      return filtered
-                    },
-                    {}
-                  )
-                  subComponent.showValidationErrors(filteredErrors, true)
+                subComponents => {
+                  let found = false
+                  for (const component of subComponents) {
+                    const errs = errors[component.dataPath]
+                    if (
+                      errs &&
+                      component.showValidationErrors(errs, first && focus)
+                    ) {
+                      found = true
+                      first = false
+                    }
+                  }
+                  return found
                 }
               )) {
                 // Found a nested form to display at least parts fo the errors.
@@ -652,16 +660,16 @@ export default DitoComponent.component('dito-schema', {
       this.$schemaParentComponent()?._registerSchemaComponent(this, add)
     },
 
-    _registerContainer(container, add) {
-      this._registerEntry(this.containersRegistry, container, add)
-    },
-
     _registerComponent(component, add) {
       this._registerEntry(this.componentsRegistry, component, add)
       // Only register with the parent if schema shares data with it.
       this.parentSchemaComponent?._registerComponent(component, add)
     },
 
+    _registerPane(pane, add) {
+      this._registerEntry(this.panesRegistry, pane, add)
+    },
+
     _registerPanel(panel, add) {
       this._registerEntry(this.panelsRegistry, panel, add)
     },

package/src/components/DitoSchemaInlined.vue

@@ -45,7 +45,7 @@
           box-sizing: border-box
           // Because tables have a funny way of allowing too much width growth:
           max-width: $content-width
-        & +.dito-components
+        & +.dito-pane
           // Needed for transition-height in DitoSchema:
           min-height: $form-spacing
 </style>

package/src/components/index.js

@@ -12,15 +12,14 @@ import './DitoElement'
 import './DitoLabel'
 import './DitoSchema'
 import './DitoSchemaInlined'
-import './DitoComponents'
+import './DitoPane'
+import './DitoContainer'
+import './DitoTabs'
+import './DitoPanel'
+import './DitoPanels'
 import './DitoButtons'
 import './DitoEditButtons'
-import './DitoComponentContainer'
-import './DitoButtonContainer'
 import './DitoCreateButton'
-import './DitoPanel'
-import './DitoPanels'
-import './DitoTabs'
 import './DitoClipboard'
 import './DitoView'
 import './DitoForm'

package/src/mixins/DitoMixin.js

@@ -25,7 +25,8 @@ export default {
     '$sourceComponent',
     '$resourceComponent',
     '$dialogComponent',
-    '$panelComponent'
+    '$panelComponent',
+    '$tabComponent'
   ],
 
   provide() {
@@ -122,6 +123,10 @@ export default {
       return this.$panelComponent()
     },
 
+    tabComponent() {
+      return this.$tabComponent()
+    },
+
     parentSchemaComponent() {
       return this.schemaComponent?.$parent.schemaComponent
     },
@@ -153,7 +158,7 @@ export default {
     // We can't store this in `data`, as this is already the pure data from the
     // API server. That's what the `store` is for: Memory that's available as
     // long as the current editing path is still valid. For type components,
-    // this memory is provided by the parent, see RouteMixin and DitoComponents.
+    // this memory is provided by the parent, see RouteMixin and DitoPane.
     getStore(key) {
       return this.store[key]
     },
@@ -472,7 +477,7 @@ export default {
 
       const addEvent = (key, event, callback) => {
         if (isFunction(callback)) {
-          this.on(event, callback)
+          this.on(hyphenate(event), callback)
         } else {
           console.error(`Invalid event definition: ${key}: ${callback}`)
         }
@@ -488,7 +493,7 @@ export default {
       // doing things. Decide which one to remove.
       for (const [key, value] of Object.entries(this.schema)) {
         if (/^on[A-Z]/.test(key)) {
-          addEvent(key, hyphenate(key.slice(2)), value)
+          addEvent(key, key.slice(2), value)
         }
       }
     },
@@ -518,6 +523,10 @@ export default {
         }
         return res
       }
+    },
+
+    emitSchemaEvent(event, params) {
+      return this.schemaComponent.emitEvent(event, params)
     }
   }
 }

package/src/mixins/ResourceMixin.js

@@ -210,6 +210,7 @@ export default {
           }
         } else {
           this.setData(response.data)
+          this.emitSchemaEvent('load')
         }
       })
     },
@@ -288,6 +289,8 @@ export default {
 
     async submitResource(button, resource, method, data, {
       setData = false,
+      onSuccess,
+      onError,
       notifySuccess = () => this.notify({
         type: 'success',
         title: 'Request Successful',
@@ -311,9 +314,10 @@ export default {
               // See if we're dealing with a Dito validation error:
               const errors = this.isValidationError(response) && data.errors
               if (errors) {
-                this.showValidationErrors(errors, true)
+                await this.showValidationErrors(errors, true)
               } else {
                 const error = isObject(data) ? data : err
+                onError?.(error)
                 await this.emitButtonEvent(button, 'error', {
                   notify: notifyError,
                   error
@@ -326,6 +330,7 @@ export default {
               if (setData && data) {
                 this.setData(data)
               }
+              onSuccess?.()
               await this.emitButtonEvent(button, 'success', {
                 notify: notifySuccess
               })

package/src/mixins/RouteMixin.js

@@ -24,7 +24,7 @@ export default {
       reload: false,
       // Each route-component defines a store that gets passed on to its
       // child components, so they can store values in them that live beyond
-      // their life-cycle. See: DitoComponents, SourceMixin
+      // their life-cycle. See: DitoPane, SourceMixin
       store: {},
       loadCache: {} // See TypeMixin.load()
     }

package/src/mixins/SchemaParentMixin.js

@@ -12,6 +12,12 @@ export default {
     }
   },
 
+  computed: {
+    mainSchemaComponent() {
+      return this.schemaComponents[0]
+    }
+  },
+
   methods: {
     // This method is called by `DitoSchema.created()/destroyed()` on its
     // $parent, if the parent uses the `SchemaParentMixin`:

package/src/mixins/SourceMixin.js

@@ -362,7 +362,6 @@ export default {
         // including the nested list data.
         this.viewComponent.setData(data)
       }
-      this.schemaComponent.onLoad()
     },
 
     unwrapListData(data) {
@@ -445,54 +444,85 @@ export default {
       }
     },
 
-    openSchemaComponent(index) {
+    getSchemaComponent(index) {
       const { schemaComponents } = this
       const { length } = schemaComponents
-      const idx = ((index % length) + length) % length
-      const schemaComponent = schemaComponents[idx]
+      return schemaComponents[((index % length) + length) % length]
+    },
+
+    openSchemaComponent(index) {
+      const schemaComponent = this.getSchemaComponent(index)
       if (schemaComponent) {
         schemaComponent.opened = true
       }
     },
 
-    navigateToComponent(dataPath, onComplete) {
-      const callOnComplete = () => {
-        if (onComplete) {
+    async navigateToComponent(dataPath, onComplete) {
+      if (this.collapsible) {
+        const index = dataPath.startsWith(this.dataPath)
+          ? this.isListSource
+            ? parseDataPath(dataPath.slice(this.dataPath.length + 1))[0] ?? null
+            : 0
+          : null
+        if (index !== null && isNumber(+index)) {
+          const schemaComponent = this.getSchemaComponent(+index)
+          if (schemaComponent) {
+            const { opened } = schemaComponent
+            if (!opened) {
+              schemaComponent.opened = true
+              await this.$nextTick()
+            }
+            const components = schemaComponent.getComponentsByDataPath(dataPath)
+            if (components.length > 0 && (onComplete?.(components) ?? true)) {
+              return true
+            } else {
+              schemaComponent.opened = opened
+            }
+          }
+        }
+      }
+      return this.navigateToRouteComponent(dataPath, onComplete)
+    },
+
+    navigateToRouteComponent(dataPath, onComplete) {
+      return new Promise((resolve, reject) => {
+        const callOnComplete = () => {
           // Retrieve the last route component, which will be the component that
           // we just navigated to, and pass it on to `onComplete()`
           const { routeComponents } = this.appState
-          onComplete(routeComponents[routeComponents.length - 1])
+          const routeComponent = routeComponents[routeComponents.length - 1]
+          resolve(onComplete?.([routeComponent]) ?? true)
         }
-      }
 
-      const dataPathParts = parseDataPath(dataPath)
-      // See if we can find a route that can serve part of the given dataPath,
-      // and take it from there:
-      while (dataPathParts.length > 0) {
-        const path = this.routeComponent.getChildPath(
-          this.api.normalizePath(normalizeDataPath(dataPathParts))
-        )
-        // See if there actually is a route for this sub-component:
-        const { matched } = this.$router.match(path)
-        if (matched.length) {
-          if (this.$route.path === path) {
+        const dataPathParts = parseDataPath(dataPath)
+        // See if we can find a route that can serve part of the given dataPath,
+        // and take it from there:
+        while (dataPathParts.length > 0) {
+          const path = this.routeComponent.getChildPath(
+            this.api.normalizePath(normalizeDataPath(dataPathParts))
+          )
+          // See if there actually is a route for this sub-component:
+          const { matched } = this.$router.match(path)
+          if (matched.length) {
+            if (this.$route.path === path) {
             // We're already there, so just call `onComplete()`:
-            callOnComplete()
-          } else {
+              callOnComplete()
+            } else {
             // Navigate to the component's path, then call `onComplete()`_:
-            this.$router.push(
-              { path },
-              // Wait for the last route component to be mounted in the next
-              // tick before calling `onComplete()`
-              () => this.$nextTick(callOnComplete)
-            )
+              this.$router.push(
+                { path },
+                // Wait for the last route component to be mounted in the next
+                // tick before calling `onComplete()`
+                () => this.$nextTick(callOnComplete),
+                reject
+              )
+            }
           }
-          return true
+          // Keep removing the last part until we find a match.
+          dataPathParts.pop()
         }
-        // Keep removing the last part until we find a match.
-        dataPathParts.pop()
-      }
-      return false
+        resolve(false)
+      })
     }
   }, // end of `methods`
 

package/src/mixins/TypeMixin.js

@@ -9,10 +9,6 @@ import { isString, asArray } from '@ditojs/utils'
 export default {
   mixins: [ValidationMixin],
 
-  inject: [
-    'tabComponent'
-  ],
-
   props: {
     schema: { type: Object, required: true },
     // NOTE: While `dataPath` points to the actual `value`, `data` represents
@@ -186,12 +182,16 @@ export default {
     },
 
     listeners() {
-      return {
-        focus: this.onFocus,
-        blur: this.onBlur,
-        input: this.onInput,
-        change: this.onChange
+      const listeners = this.getListeners()
+      const { events = {} } = this.schema
+      if (events) {
+        // Register callbacks for all provides non-recognized events,
+        // assuming they are native events.
+        for (const event of Object.keys(events)) {
+          listeners[event] ||= () => this.emitEvent(event)
+        }
       }
+      return listeners
     },
 
     validations() {
@@ -240,28 +240,43 @@ export default {
       }
     },
 
+    // @overridable
+    getListeners() {
+      return {
+        focus: this.onFocus,
+        blur: this.onBlur,
+        input: this.onInput,
+        change: this.onChange
+      }
+    },
+
     // @overridable
     getValidations() {
       return null
     },
 
-    focus() {
-      // Also focus this component's schema and panel in case it's a tab.
-      this.schemaComponent.focus()
-      this.tabComponent?.focus()
-      const [focus] = asArray(this.$refs.element)
-      if (focus) {
+    // @overridable
+    focusElement() {
+      const [element] = asArray(this.$refs.element)
+      if (element) {
         this.$nextTick(() => {
-          focus.focus()
+          element.focus()
           // If the element is disabled, `focus()` will likely not have the
           // desired effect. Use `scrollIntoView()` if available:
           if (this.disabled) {
-            (focus.$el || focus).scrollIntoView?.()
+            (element.$el || element).scrollIntoView?.()
           }
         })
       }
     },
 
+    focus() {
+      // Also focus this component's schema and panel in case it's a tab.
+      this.schemaComponent.focus()
+      this.tabComponent?.focus()
+      this.focusElement()
+    },
+
     clear() {
       this.value = null
       this.onChange()

package/src/mixins/ValidatorMixin.js

@@ -5,10 +5,6 @@ export default {
   mixins: [SchemaParentMixin],
 
   computed: {
-    mainSchemaComponent() {
-      return this.schemaComponents[0]
-    },
-
     errors() {
       return this.schemaComponents.reduce(
         (result, { errors }) =>

package/src/styles/_button.sass

@@ -62,7 +62,7 @@
     font-size: $menu-font-size
     flex-flow: row wrap
     justify-content: center
-    .dito-button-container
+    .dito-container
       // Do not specify this on .dito-buttons directly as it would break borders
       margin-top: $content-padding
     .dito-button

package/src/types/TypeButton.vue

@@ -39,7 +39,15 @@ export default TypeComponent.register([
       }
     }),
 
-    listeners() {
+    closeForm: getSchemaAccessor('closeForm', {
+      type: Boolean,
+      default: false
+    })
+  },
+
+  methods: {
+    // @override
+    getListeners() {
       return {
         focus: this.onFocus,
         blur: this.onBlur,
@@ -47,13 +55,10 @@ export default TypeComponent.register([
       }
     },
 
-    closeForm: getSchemaAccessor('closeForm', {
-      type: Boolean,
-      default: false
-    })
-  },
+    async submit(options) {
+      return this.resourceComponent?.submit(this, options)
+    },
 
-  methods: {
     async onClick() {
       const res = await this.emitEvent('click', {
         parent: this.schemaComponent
@@ -65,10 +70,6 @@ export default TypeComponent.register([
       ) {
         await this.submit()
       }
-    },
-
-    async submit(options) {
-      return this.resourceComponent?.submit(this, options)
     }
   }
 })

package/src/types/TypeCode.vue

@@ -120,7 +120,7 @@ export default TypeComponent.register('code', {
   },
 
   methods: {
-    focus() {
+    focusElement() {
       this.$el.querySelector('textarea')?.focus()
     }
   }