@ditojs/admin 2.6.9 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.6.9",
+  "version": "2.7.0",
   "type": "module",
   "description": "Dito.js Admin is a schema based admin interface for Dito.js Server, featuring auto-generated views and forms and built with Vue.js",
   "repository": "https://github.com/ditojs/dito/tree/master/packages/admin",
@@ -33,8 +33,8 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.6.3",
-    "@ditojs/utils": "^2.6.0",
+    "@ditojs/ui": "^2.7.0",
+    "@ditojs/utils": "^2.7.0",
     "@kyvg/vue3-notification": "^2.9.0",
     "@lk77/vue3-color": "^3.0.6",
     "@tiptap/core": "^2.0.3",
@@ -83,7 +83,7 @@
     "vite": "^4.3.4"
   },
   "types": "types",
-  "gitHead": "40ee20c006b240c735252fb8fcebd538ace2f508",
+  "gitHead": "874c68d5807ba97b67867f6b8d13f8fcb4990533",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/DitoAdmin.js

@@ -7,7 +7,8 @@ import {
   merge,
   hyphenate,
   camelize,
-  defaultFormats
+  defaultFormats,
+  deprecate
 } from '@ditojs/utils'
 import * as components from './components/index.js'
 import * as types from './types/index.js'
@@ -15,7 +16,6 @@ import DitoRoot from './components/DitoRoot.vue'
 import DitoTypeComponent from './DitoTypeComponent.js'
 import ResizeDirective from './directives/resize.js'
 import { getResource } from './utils/resource.js'
-import { deprecate } from './utils/deprecate.js'
 import { formatQuery } from './utils/route.js'
 import verbs from './verbs.js'
 
@@ -194,6 +194,10 @@ export default class DitoAdmin {
         })
     }))
 
+    // Prevent endless loops of error messages during render functions by
+    // setting a custom error handler.
+    app.config.errorHandler = console.error
+
     app.use(VueNotifications, {
       name: 'notify',
       componentName: 'VueNotifications'

package/src/components/DitoContainer.vue

@@ -4,6 +4,17 @@
   :class="containerClass"
   :style="containerStyle"
 )
+  Teleport(
+    v-if="isMounted && panelEntries.length > 0"
+    to=".dito-sidebar__teleport"
+  )
+    DitoPanels(
+      :panels="panelEntries"
+      :data="data"
+      :meta="meta"
+      :store="store"
+      :disabled="disabled"
+    )
   DitoLabel(
     v-if="hasLabel"
     :class="componentClass"
@@ -13,6 +24,7 @@
   )
   component.dito-component(
     :is="typeComponent"
+    ref="component"
     :class="componentClass"
     :schema="schema"
     :dataPath="dataPath"
@@ -35,7 +47,12 @@ import { isString, isNumber } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
 import DitoContext from '../DitoContext.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
-import { getTypeComponent, hasLabel, omitPadding } from '../utils/schema.js'
+import {
+  getAllPanelEntries,
+  getTypeComponent,
+  hasLabel,
+  omitPadding
+} from '../utils/schema.js'
 import { parseFraction } from '../utils/math.js'
 
 // @vue/component
@@ -56,7 +73,8 @@ export default DitoComponent.component('DitoContainer', {
 
   data() {
     return {
-      errors: null
+      errors: null,
+      isMounted: false
     }
   },
 
@@ -196,9 +214,23 @@ export default DitoComponent.component('DitoContainer', {
         'dito-width-shrink': this.flexShrink,
         'dito-has-errors': !!this.errors
       }
+    },
+
+    panelEntries() {
+      return getAllPanelEntries(
+        this.api,
+        this.schema,
+        this.dataPath,
+        this.$refs.component,
+        this.tabComponent
+      )
     }
   },
 
+  mounted() {
+    this.isMounted = true
+  },
+
   methods: {
     onErrors(errors) {
       this.errors = errors
@@ -263,9 +295,10 @@ export default DitoComponent.component('DitoContainer', {
   }
 
   &--label-vertical {
-    // For components without labels in rows with other components that have
-    // labels, add some spacing to the top to align with the other components:
-    > .dito-component:first-child {
+    // For plain components without labels in rows with other components that
+    // have labels, add some spacing to the top to align with the other
+    // components (e.g.  buttons):
+    > .dito-component:first-child:not(.dito-section, .dito-list, .dito-object) {
       margin-top: $line-height * $font-size + $form-spacing-half;
     }
   }

package/src/components/DitoForm.vue

@@ -283,17 +283,22 @@ export default DitoComponent.component('DitoForm', {
   },
 
   watch: {
-    $route(to, from) {
-      // Reload form data when navigating to a different entity in same form.
-      const param = this.meta?.param
-      if (
-        param &&
-        this.providesData &&
-        from.matched[0].path === to.matched[0].path && // Staying on same form?
-        from.params[param] !== 'create' && // But haven't been creating?
-        to.params[param] !== from.params[param] // Going to a different entity?
-      ) {
-        this.loadData(true)
+    $route: {
+      // https://github.com/vuejs/vue-router/issues/3393#issuecomment-1158470149
+      flush: 'post',
+      handler(to, from) {
+        // Reload form data when navigating to a different entity in same form.
+        const param = this.meta?.param
+        if (
+          param &&
+          this.providesData &&
+          // TODO: See if we can remove this due to `flush: 'post'`.
+          from.matched[0].path === to.matched[0].path && // Staying on same form
+          from.params[param] !== 'create' && // But haven't been creating
+          to.params[param] !== from.params[param] // Going to a different entity
+        ) {
+          this.loadData(true)
+        }
       }
     },
 

package/src/components/DitoHeader.vue

@@ -20,7 +20,7 @@ nav.dito-header
       v-if="isLoading"
     )
   //- Teleport target for `.dito-schema-header`:
-  .dito-title
+  .dito-header__teleport
   slot
 </template>
 

package/src/components/DitoLabel.vue

@@ -91,16 +91,16 @@ export default DitoComponent.component('DitoLabel', {
 .dito-label {
   $self: &;
 
-  --label-padding: 0;
   // For buttons and chevron to align right:
   display: flex;
   position: relative;
   // Vertically center all items in the label, e.g. chevron, edit-buttons.
   align-items: center;
-  padding: var(--label-padding);
   margin: 0 $form-spacing-half $form-spacing-half 0;
 
   .dito-container:not(.dito-container--label-vertical) > & {
+    // When labels are not vertical (e.g. compact layout, next to component),
+    // clear bottom padding for better vertical alignment.
     margin-bottom: 0;
   }
 

package/src/components/DitoPane.vue

@@ -43,7 +43,7 @@
 <script>
 import DitoComponent from '../DitoComponent.js'
 import { appendDataPath } from '../utils/data.js'
-import { getAllPanelEntries, isNested } from '../utils/schema.js'
+import { isNested } from '../utils/schema.js'
 
 // @vue/component
 export default DitoComponent.component('DitoPane', {
@@ -108,21 +108,6 @@ export default DitoComponent.component('DitoPane', {
       )
     },
 
-    panelEntries() {
-      // Gather all panel schemas from all component schemas, by finding those
-      // that want to provide a panel. See `getAllPanelEntries()` for details.
-      return this.componentSchemas.flatMap(
-        ({ schema, nestedDataPath: dataPath }) =>
-          getAllPanelEntries(
-            this.api,
-            schema,
-            dataPath,
-            this.schemaComponent,
-            this.tabComponent
-          )
-      )
-    },
-
     isSingleComponent() {
       return this.single && this.componentSchemas.length === 1
     },

package/src/components/DitoPanel.vue

@@ -184,7 +184,7 @@ export default DitoComponent.component('DitoPanel', {
         $form-spacing;
 
       position: sticky;
-      top: 0;
+      top: $content-padding;
       margin-bottom: $margin;
       z-index: 1;
 
@@ -222,20 +222,20 @@ export default DitoComponent.component('DitoPanel', {
     border-bottom-right-radius: $border-radius;
 
     > .dito-schema-content {
-      .dito-pane {
-        margin: -$form-spacing-half;
-
-        > .dito-container:not(.dito-container--single) {
-          padding: $form-spacing-half;
-        }
-      }
-
       > .dito-pane {
         padding: $form-spacing;
+      }
+
+      .dito-pane {
+        margin: -$form-spacing-half;
 
         &.dito-pane--single {
           margin: 0;
         }
+
+        > .dito-container:not(.dito-container--single) {
+          padding: $form-spacing-half;
+        }
       }
 
       .dito-object {

package/src/components/DitoPanels.vue

@@ -45,7 +45,7 @@ export default DitoComponent.component('DitoPanels', {
 @import '../styles/_imports';
 
 .dito-panels {
-  padding: $content-padding;
-  padding-left: $form-spacing;
+  margin: $content-padding;
+  margin-left: $form-spacing;
 }
 </style>

package/src/components/DitoRoot.vue

@@ -449,8 +449,8 @@ let dialogId = 0
 function addRoutes(router, routes) {
   const removers = []
   for (const route of routes) {
-    const removeRoute = router.addRoute(route)
-    removers.push(removeRoute)
+    const remove = router.addRoute(route)
+    removers.push(remove)
   }
 
   return () => {

package/src/components/DitoSchema.vue

@@ -3,16 +3,27 @@ slot(name="before")
 .dito-schema(
   v-bind="$attrs"
 )
+  Teleport(
+    v-if="isPopulated && panelEntries.length > 0"
+    to=".dito-sidebar__teleport"
+  )
+    DitoPanels(
+      :panels="panelEntries"
+      :data="data"
+      :meta="meta"
+      :store="store"
+      :disabled="disabled"
+    )
   .dito-schema-content(
     ref="content"
     :class="{ 'dito-scroll': scrollable }"
   )
     Teleport(
-      to=".dito-title"
+      v-if="hasLabel || hasTabs || clipboard"
+      to=".dito-header__teleport"
       :disabled="!headerInMenu"
     )
       .dito-schema-header(
-        v-if="hasLabel || hasTabs || clipboard"
         :class="{ 'dito-schema-header--menu': headerInMenu }"
       )
         DitoLabel(
@@ -83,18 +94,6 @@ slot(name="before")
       v-if="!hasLabel"
       name="edit-buttons"
     )
-  Teleport(
-    v-else-if="isPopulated"
-    to=".dito-sidebar"
-  )
-    DitoPanels(
-      :class="{ 'dito-scroll': scrollable }"
-      :panels="panelEntries"
-      :data="data"
-      :meta="meta"
-      :store="store"
-      :disabled="disabled"
-    )
 slot(name="after")
 </template>
 
@@ -116,8 +115,7 @@ import {
   getNamedSchemas,
   getPanelEntries,
   setDefaultValues,
-  processData,
-  isForm
+  processData
 } from '../utils/schema.js'
 import { getSchemaAccessor, getStoreAccessor } from '../utils/accessor.js'
 
@@ -164,7 +162,6 @@ export default DitoComponent.component('DitoSchema', {
           ? data(this.context)
           : data
       ),
-      currentPath: null,
       currentTab: null,
       componentsRegistry: {},
       panesRegistry: {},
@@ -186,11 +183,7 @@ export default DitoComponent.component('DitoSchema', {
     },
 
     panelEntries() {
-      const panelEntries = getPanelEntries(this.schema.panels, '')
-      for (const pane of this.panes) {
-        panelEntries.push(...pane.panelEntries)
-      }
-      return panelEntries
+      return getPanelEntries(this.schema.panels, '')
     },
 
     tabs() {
@@ -349,21 +342,13 @@ export default DitoComponent.component('DitoSchema', {
   watch: {
     '$route.hash': {
       immediate: true,
+      // https://github.com/vuejs/vue-router/issues/3393#issuecomment-1158470149
+      flush: 'post',
       handler(hash) {
         // Remember the current path to know if tab changes should still be
         // handled, but remove the trailing `/create` or `/:id` from it so that
         // tabs informs that stay open after creation still work.
-        const getPath = () =>
-          isForm(this.schema)
-            ? this.$route.path.replace(/\/.\w*$/, '')
-            : this.$route.path
-        if (
-          this.hasTabs && (
-            !this.currentPath ||
-            this.currentPath === getPath()
-          )
-        ) {
-          this.currentPath = getPath()
+        if (this.hasTabs) {
           this.currentTab = hash?.slice(1) || null
           if (this.hasErrors) {
             this.repositionErrors()
@@ -408,48 +393,44 @@ export default DitoComponent.component('DitoSchema', {
   },
 
   methods: {
-    getComponentsByDataPath(dataPath, match) {
-      return this._getEntriesByDataPath(
-        this.componentsByDataPath,
-        dataPath,
-        match
-      )
+    getComponentsByDataPath(dataPath) {
+      return this._getEntriesByDataPath(this.componentsByDataPath, dataPath)
     },
 
-    getComponentByDataPath(dataPath, match) {
-      return this.getComponentsByDataPath(dataPath, match)[0] || null
+    getComponentByDataPath(dataPath) {
+      return this.getComponentsByDataPath(dataPath)[0] || null
     },
 
-    getComponentsByName(dataPath, match) {
-      return this._getEntriesByName(this.componentsByDataPath, dataPath, match)
+    getComponentsByName(dataPath) {
+      return this._getEntriesByName(this.componentsByDataPath, dataPath)
     },
 
-    getComponentByName(name, match) {
-      return this.getComponentsByName(name, match)[0] || null
+    getComponentByName(name) {
+      return this.getComponentsByName(name)[0] || null
     },
 
-    getComponents(dataPathOrName, match) {
-      return this._getEntries(this.componentsByDataPath, dataPathOrName, match)
+    getComponents(dataPathOrName) {
+      return this._getEntries(this.componentsByDataPath, dataPathOrName)
     },
 
-    getComponent(dataPathOrName, match) {
-      return this.getComponents(dataPathOrName, match)[0] || null
+    getComponent(dataPathOrName) {
+      return this.getComponents(dataPathOrName)[0] || null
     },
 
-    getPanelsByDataPath(dataPath, match) {
-      return this._getEntriesByDataPath(this.panelsByDataPath, dataPath, match)
+    getPanelsByDataPath(dataPath) {
+      return this._getEntriesByDataPath(this.panelsByDataPath, dataPath)
     },
 
-    getPanelByDataPath(dataPath, match) {
-      return this.getPanelsByDataPath(dataPath, match)[0] || null
+    getPanelByDataPath(dataPath) {
+      return this.getPanelsByDataPath(dataPath)[0] || null
     },
 
-    getPanels(dataPathOrName, match) {
-      return this._getEntries(this.panelsByDataPath, dataPathOrName, match)
+    getPanels(dataPathOrName) {
+      return this._getEntries(this.panelsByDataPath, dataPathOrName)
     },
 
-    getPanel(dataPathOrName, match) {
-      return this.getPanels(dataPathOrName, match)[0] || null
+    getPanel(dataPathOrName) {
+      return this.getPanels(dataPathOrName)[0] || null
     },
 
     someComponent(callback) {
@@ -728,28 +709,18 @@ export default DitoComponent.component('DitoSchema', {
       }, {})
     },
 
-    _getEntries(entriesByDataPath, dataPath, match) {
+    _getEntries(entriesByDataPath, dataPath) {
       return normalizeDataPath(dataPath).startsWith(this.dataPath)
-        ? this._getEntriesByDataPath(entriesByDataPath, dataPath, match)
-        : this._getEntriesByName(entriesByDataPath, dataPath, match)
-    },
-
-    _getEntriesByDataPath(entriesByDataPath, dataPath, match) {
-      return this._filterEntries(
-        entriesByDataPath[normalizeDataPath(dataPath)] || [],
-        match
-      )
+        ? this._getEntriesByDataPath(entriesByDataPath, dataPath)
+        : this._getEntriesByName(entriesByDataPath, dataPath)
     },
 
-    _getEntriesByName(entriesByDataPath, name, match) {
-      return this._filterEntries(
-        entriesByDataPath[appendDataPath(this.dataPath, name)] || [],
-        match
-      )
+    _getEntriesByDataPath(entriesByDataPath, dataPath) {
+      return entriesByDataPath[normalizeDataPath(dataPath)] || []
     },
 
-    _filterEntries(entries, match) {
-      return match ? entries.filter(match) : entries
+    _getEntriesByName(entriesByDataPath, name) {
+      return entriesByDataPath[appendDataPath(this.dataPath, name)] || []
     }
   }
 })

package/src/components/DitoSchemaInlined.vue

@@ -78,10 +78,8 @@ export default DitoComponent.component('DitoSchemaInlined', {
       margin: -$form-spacing;
 
       .dito-label {
-        // Add removed $form-spacing again
-        --label-padding: #{$form-spacing};
-
-        margin: 0;
+        // Add removed $form-spacing again.
+        margin: $form-spacing;
         width: 100%;
         box-sizing: content-box;
         // Prevent collapsing to min-height when alone in

package/src/components/DitoSidebar.vue

@@ -2,6 +2,7 @@
 aside.dito-sidebar.dito-scroll-parent
   nav.dito-header
     slot
+  .dito-sidebar__teleport.dito-scroll
 </template>
 
 <script>

package/src/components/DitoTreeItem.vue

@@ -99,6 +99,7 @@
 
 <script>
 import DitoComponent from '../DitoComponent.js'
+import ItemMixin from '../mixins/ItemMixin'
 import SortableMixin from '../mixins/SortableMixin.js'
 import { appendDataPath } from '../utils/data.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
@@ -106,7 +107,7 @@ import { getNamedSchemas, hasFormSchema } from '../utils/schema.js'
 
 // @vue/component
 export default DitoComponent.component('DitoTreeItem', {
-  mixins: [SortableMixin],
+  mixins: [ItemMixin, SortableMixin],
   inject: ['container'],
 
   props: {

package/src/mixins/DitoMixin.js

@@ -235,6 +235,13 @@ export default {
       return store
     },
 
+    removeChildStore(key, index) {
+      // GEt the child-store first, so that indices can be transferred over
+      // temporary id changes during persistence.
+      this.getChildStore(key, index)
+      this.removeStore(key)
+    },
+
     getSchemaValue(
       keyOrDataPath,
       {

package/src/mixins/ItemMixin.js

@@ -32,6 +32,14 @@ export default {
       return dataPath
     },
 
+    getItemStore(sourceSchema, item, index) {
+      return this.getChildStore(this.getItemUid(sourceSchema, item), index)
+    },
+
+    removeItemStore(sourceSchema, item, index) {
+      this.removeChildStore(this.getItemUid(sourceSchema, item), index)
+    },
+
     findItemIdIndex(sourceSchema, data, itemId) {
       const index = this.isTransient
         ? // For transient data, the index is used as the id

package/src/mixins/SortableMixin.js

@@ -1,9 +1,5 @@
-import ItemMixin from './ItemMixin.js'
-
 // @vue/component
 export default {
-  mixins: [ItemMixin],
-
   data() {
     return {
       dragging: false

package/src/mixins/SourceMixin.js

@@ -1,4 +1,5 @@
 import DitoComponent from '../DitoComponent.js'
+import ItemMixin from './ItemMixin.js'
 import ResourceMixin from './ResourceMixin.js'
 import SchemaParentMixin from '../mixins/SchemaParentMixin.js'
 import { getSchemaAccessor, getStoreAccessor } from '../utils/accessor.js'
@@ -29,7 +30,7 @@ import {
 
 // @vue/component
 export default {
-  mixins: [ResourceMixin, SchemaParentMixin],
+  mixins: [ItemMixin, ResourceMixin, SchemaParentMixin],
 
   defaultValue(schema) {
     return isListSource(schema) ? [] : null
@@ -404,18 +405,22 @@ export default {
       return item
     },
 
-    removeItem(item) {
+    removeItem(item, index) {
+      let removed = false
       if (this.isObjectSource) {
         this.objectData = null
-        this.onChange()
+        removed = true
       } else {
         const { listData } = this
-        const index = listData && listData.indexOf(item)
         if (index >= 0) {
           listData.splice(index, 1)
-          this.onChange()
+          removed = true
         }
       }
+      if (removed) {
+        this.removeItemStore(this.schema, item, index)
+        this.onChange()
+      }
     },
 
     deleteItem(item, index) {
@@ -444,15 +449,15 @@ export default {
         )
       ) {
         if (this.isTransient) {
-          this.removeItem(item)
+          this.removeItem(item, index)
           notify()
         } else {
-          const itemId = this.getItemId(this.schema, item)
+          const itemId = this.getItemId(this.schema, item, index)
           const resource = getMemberResource(itemId, this.resource)
           if (resource) {
             this.handleRequest({ method: 'delete', resource }, err => {
               if (!err) {
-                this.removeItem(item)
+                this.removeItem(item, index)
                 notify()
               }
               this.reloadData()
@@ -520,8 +525,8 @@ export default {
             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) {
+          const { matched } = this.$router.resolve(path)
+          if (matched.length && matched[0].name !== 'catch-all') {
             if (this.$route.path === path) {
               // We're already there, so just call `onComplete()`:
               callOnComplete()