@ditojs/admin 0.268.0 → 0.269.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "0.268.0",
+  "version": "0.269.0",
   "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",
   "main": "dist/dito-admin.umd.min.js",
   "repository": "https://github.com/ditojs/dito/tree/master/packages/admin",
@@ -34,11 +34,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.15.4",
-    "@ditojs/ui": "^0.268.0",
-    "@ditojs/utils": "^0.268.0",
+    "@ditojs/ui": "^0.269.0",
+    "@ditojs/utils": "^0.269.0",
     "axios": "^0.21.4",
     "codeflask": "^1.4.1",
-    "core-js": "^3.17.3",
+    "core-js": "^3.18.0",
     "filesize": "^8.0.3",
     "filesize-parser": "^1.5.0",
     "hint.css": "^2.6.0",
@@ -63,14 +63,14 @@
   "devDependencies": {
     "@babel/core": "^7.15.5",
     "@babel/preset-env": "^7.15.6",
-    "@ditojs/babel-preset": "^0.268.0",
-    "@ditojs/build": "^0.268.0",
+    "@ditojs/babel-preset": "^0.269.0",
+    "@ditojs/build": "^0.269.0",
     "@vue/cli-plugin-babel": "^4.5.13",
     "@vue/cli-service": "^4.5.13",
     "autoprefixer": "^9.8.6",
     "babel-loader": "^8.2.2",
     "fibers": "^5.0.0",
-    "postcss": "^8.3.6",
+    "postcss": "^8.3.8",
     "postcss-loader": "^4.3.0",
     "pug": "^3.0.2",
     "pug-plain-loader": "^1.1.0",
@@ -78,5 +78,5 @@
     "sass-loader": "^10.2.0",
     "webpack": "^4.46.0"
   },
-  "gitHead": "39f53071730b5e9bc6445560024b89af989be360"
+  "gitHead": "74b214afd5691f27312afbfd034c72de8871eac5"
 }

package/src/DitoAdmin.js

@@ -182,7 +182,8 @@ export default class DitoAdmin {
         $sourceComponent: () => null,
         $resourceComponent: () => null,
         $dialogComponent: () => null,
-        $panelComponent: () => null
+        $panelComponent: () => null,
+        $tabComponent: () => null
       },
 
       render: createElement => createElement(DitoRoot, {

package/src/components/DitoButtons.vue

@@ -1,12 +1,10 @@
 <template lang="pug">
-  // NOTE: This is similar to DitoComponents, but uses the DitoButtonContainer
-  // sub-class as the component container for different layout:
   .dito-buttons(
     v-if="buttonSchemas || $slots.default"
     /* Pass on $listeners so that dito-edit-buttons can pass events. */
     v-on="$listeners"
   )
-    dito-button-container(
+    dito-container(
       v-for="(buttonSchema, buttonDataPath) in buttonSchemas"
       v-if="shouldRender(buttonSchema)"
       :key="buttonDataPath"
@@ -19,8 +17,8 @@
       :generateLabels="false"
     )
     // Render each node in the default slot through `dito-vnode`, so it can be
-    // wrapped in a `.dito-button-container` class.
-    .dito-button-container(
+    // wrapped in a `.dito-container` class.
+    .dito-container(
       v-for="node in $slots.default"
       v-if="node.tag"
     )
@@ -34,7 +32,7 @@ import { appendDataPath } from '@/utils/data'
 // @vue/component
 export default DitoComponent.component('dito-buttons', {
   provide: {
-    tabComponent: null
+    $tabComponent: () => null
   },
 
   props: {

package/src/components/{DitoComponentContainer.vue → DitoContainer.vue}

@@ -1,6 +1,5 @@
 <template lang="pug">
-  // See `containerClass` for the assignment of the class-names to this div:
-  div(
+  .dito-container(
     v-show="componentVisible"
     :class="containerClass"
     :style="containerStyle"
@@ -30,7 +29,7 @@
 </template>
 
 <style lang="sass">
-  .dito-component-container
+  .dito-container
     // Needed for better vertical alignment:
     align-self: stretch
     box-sizing: border-box
@@ -47,7 +46,7 @@
         margin: $form-spacing $form-spacing-half 0
     &.dito-single
       height: 100% // So that list buttons can be sticky at the bottom
-  // NOTE: This is not nested inside .dito-component-container so that other
+  // NOTE: This is not nested inside `.dito-container` so that other
   // type components can override `.dito-width-fill` class (filter precedence).
   .dito-component
     &.dito-width-fill
@@ -68,7 +67,7 @@ import { parseFraction } from '@/utils/math'
 import { isString, isNumber } from '@ditojs/utils'
 
 // @vue/component
-export default DitoComponent.component('dito-component-container', {
+export default DitoComponent.component('dito-container', {
   props: {
     schema: { type: Object, required: true },
     dataPath: { type: String, default: '' },
@@ -156,9 +155,6 @@ export default DitoComponent.component('dito-component-container', {
     containerClass() {
       const { class: containerClass } = this.schema
       return {
-        // Use the component name as its class, so the extended
-        // dito-button-container automatically works too.
-        [this.$options.name]: true,
         'dito-single': this.single,
         'dito-omit-padding': shouldOmitPadding(this.schema),
         ...(

package/src/components/DitoForm.vue

@@ -23,7 +23,6 @@
       :meta="meta"
       :store="store"
       :disabled="isLoading"
-      :selectedTab="selectedTab"
       :menuHeader="true"
     )
       dito-buttons.dito-buttons-round.dito-buttons-main.dito-buttons-large(

package/src/components/DitoLabel.vue

@@ -90,8 +90,8 @@
   // TODO: Find a better way to control this behavior.
   .dito-schema-compact
     > .dito-schema-content
-      > .dito-components
-        > .dito-component-container
+      > .dito-pane
+        > .dito-container
           > .dito-label:not(.dito-label-component)
             display: inline-block
 </style>

package/src/components/{DitoComponents.vue → DitoPane.vue}

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .dito-components(
+  .dito-pane(
     v-if="isPopulated && componentSchemas.length > 0"
     v-show="visible"
   )
@@ -15,7 +15,7 @@
       .dito-break(
         v-if="schema.break === 'before'"
       )
-      dito-component-container(
+      dito-container(
         v-if="shouldRender(schema)"
         :key="nestedDataPath"
         :schema="schema"
@@ -34,30 +34,28 @@
 </template>
 
 <style lang="sass">
-  // TODO: Consider renaming to `DitoContainer`? That's how it's called in
-  // `DitoSchema`
-  .dito-components
+  .dito-pane
     display: flex
     position: relative
     flex-flow: row wrap
     align-content: flex-start
     align-items: baseline
-    // Remove padding added by .dito-component-container
+    // Remove padding added by `.dito-container`
     margin: (-$form-spacing) (-$form-spacing-half)
     // Add removed horizontal margin again to max-width:
     max-width: $content-width + 2 * $form-spacing-half
-    // Use `flex: 0%` for all `.dito-components` except `.dito-components-main`,
+    // Use `flex: 0%` for all `.dito-pane` except `.dito-pane-main`,
     // so that the `.dito-buttons-main` can be moved all the way to the bottom.
     flex: 0%
 
-    &.dito-components-main
+    &.dito-pane-main
       flex: 100%
 
     .dito-schema-header:not(.dito-schema-menu-header) + &
       // Clear top-margin if the components are preceded by a schema header.
       margin-top: 0
 
-    .dito-component-container.dito-omit-padding > &
+    .dito-container.dito-omit-padding > &
       // Clear margins set above again if parent is omitting padding.
       margin: 0
       max-width: unset
@@ -73,10 +71,10 @@ import { appendDataPath } from '@/utils/data'
 import { getAllPanelSchemas, isNested } from '@/utils/schema'
 
 // @vue/component
-export default DitoComponent.component('dito-components', {
+export default DitoComponent.component('dito-pane', {
   provide() {
     return {
-      tabComponent: this.tabComponent
+      $tabComponent: () => this.tabComponent
     }
   },
 
@@ -95,7 +93,7 @@ export default DitoComponent.component('dito-components', {
 
   computed: {
     tabComponent() {
-      return this.tab ? this : null
+      return this.tab ? this : this.$tabComponent()
     },
 
     componentSchemas() {
@@ -130,21 +128,13 @@ export default DitoComponent.component('dito-components', {
     panelSchemas() {
       // Gather all panel schemas from all component schemas, by finding those
       // that want to provide a panel. See `getAllPanelSchemas()` for details.
-      return this.componentSchemas.reduce(
-        (schemas, { schema, nestedDataPath: dataPath }) => {
-          for (const panel of getAllPanelSchemas(
-            schema,
-            dataPath,
-            this.schemaComponent
-          )) {
-            schemas.push({
-              ...panel,
-              tabComponent: this.tabComponent
-            })
-          }
-          return schemas
-        },
-        []
+      return this.componentSchemas.flatMap(
+        ({ schema, nestedDataPath: dataPath }) => getAllPanelSchemas(
+          schema,
+          dataPath,
+          this.schemaComponent,
+          this.tabComponent
+        )
       )
     },
 
@@ -163,7 +153,7 @@ export default DitoComponent.component('dito-components', {
 
   methods: {
     _register(add) {
-      this.schemaComponent._registerContainer(this, add)
+      this.schemaComponent._registerPane(this, add)
     },
 
     focus() {

package/src/components/DitoPanel.vue

@@ -2,7 +2,7 @@
   // Only show panels in tabs when the tabs are also visible.
   component.dito-panel(
     :is="panelTag"
-    v-show="visible && (!tabComponent || tabComponent.visible)"
+    v-show="visible && (!panelTabComponent || panelTabComponent.visible)"
     @submit.prevent
   )
     label.dito-panel-title {{ getLabel(schema) }}
@@ -56,9 +56,9 @@
         margin: 0
         label
           font-weight: normal
-      .dito-components
+      .dito-pane
         margin: 0 (-$form-spacing-half)
-      .dito-component-container
+      .dito-container
         padding: $form-spacing-half
 </style>
 
@@ -75,7 +75,8 @@ export default DitoComponent.component('dito-panel', {
 
   provide() {
     return {
-      $panelComponent: () => this
+      $panelComponent: () => this,
+      $tabComponent: () => this.panelTabComponent
     }
   },
 
@@ -86,7 +87,7 @@ export default DitoComponent.component('dito-panel', {
     meta: { type: Object, required: true },
     store: { type: Object, required: true },
     disabled: { type: Boolean, required: true },
-    tabComponent: { type: DitoComponent, default: null }
+    panelTabComponent: { type: DitoComponent, default: null }
   },
 
   data() {
@@ -100,6 +101,10 @@ export default DitoComponent.component('dito-panel', {
       return this
     },
 
+    tabComponent() {
+      return this.panelTabComponent
+    },
+
     buttonSchemas() {
       return getButtonSchemas(this.schema.buttons)
     },

package/src/components/DitoPanels.vue

@@ -1,5 +1,7 @@
 <template lang="pug">
-  .dito-panels
+  .dito-panels(
+    v-if="panels.length > 0"
+  )
     dito-panel(
       v-for="{ schema, dataPath, tabComponent } in panels"
       v-if="shouldRender(schema)"
@@ -10,7 +12,7 @@
       :meta="meta"
       :store="getChildStore(schema.name)"
       :disabled="schema.disabled != null ? schema.disabled : disabled"
-      :tabComponent="tabComponent"
+      :panelTabComponent="tabComponent"
     )
 </template>
 

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,15 +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 && opened"
+        dito-pane.dito-pane-main(
+          v-if="hasMainPane && opened"
           ref="components"
           :schema="schema"
           :dataPath="dataPath"
@@ -69,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"
@@ -103,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
@@ -203,8 +202,8 @@ export default DitoComponent.component('dito-schema', {
           ? data.call(this, this.context)
           : data
       ),
-      containersRegistry: {},
       componentsRegistry: {},
+      panesRegistry: {},
       panelsRegistry: {}
     }
   },
@@ -224,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
     },
@@ -340,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
     },
@@ -351,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)
     }
@@ -421,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) {
@@ -456,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()
       }
     },
@@ -655,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]
     },

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/SourceMixin.js

@@ -460,14 +460,18 @@ export default {
     async navigateToComponent(dataPath, onComplete) {
       if (this.collapsible) {
         const index = dataPath.startsWith(this.dataPath)
-          ? parseDataPath(dataPath.slice(this.dataPath.length + 1))[0] ?? null
+          ? 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
-            schemaComponent.opened = true
-            await this.$nextTick()
+            if (!opened) {
+              schemaComponent.opened = true
+              await this.$nextTick()
+            }
             const components = schemaComponent.getComponentsByDataPath(dataPath)
             if (components.length > 0 && (onComplete?.(components) ?? true)) {
               return true

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
@@ -259,23 +255,28 @@ export default {
       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/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/TypeCode.vue

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

package/src/types/TypeMarkup.vue

@@ -491,7 +491,7 @@ export default TypeComponent.register('markup', {
       return list
     },
 
-    focus() {
+    focusElement() {
       this.$el.scrollIntoView?.()
       this.editor.focus()
     }