@ditojs/admin 2.6.7 → 2.6.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.6.7",
+  "version": "2.6.9",
   "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",
@@ -83,7 +83,7 @@
     "vite": "^4.3.4"
   },
   "types": "types",
-  "gitHead": "b192b2ffad1ff1c9e2e228a7b4a0ca86c8184028",
+  "gitHead": "40ee20c006b240c735252fb8fcebd538ace2f508",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoHeader.vue

@@ -84,6 +84,19 @@ export default DitoComponent.component('DitoHeader', {
   z-index: $header-z-index;
   @include user-select(none);
 
+  &::after {
+    // Cover the gaps between the different headers that might appear due to
+    // layout rounding imprecisions.
+    content: '';
+    top: 0;
+    bottom: 0;
+    left: calc(100% - 1px);
+    width: 2px;
+    position: absolute;
+    background: inherit;
+    z-index: -1;
+  }
+
   span {
     display: inline-block;
     padding: $header-padding;
@@ -112,12 +125,13 @@ export default DitoComponent.component('DitoHeader', {
     a {
       position: relative;
       display: block;
-      padding-right: 0.4em;
 
       $angle: 33deg;
 
       &:hover {
-        color: #999999;
+        span {
+          color: $color-light;
+        }
       }
 
       &::before,
@@ -125,9 +139,10 @@ export default DitoComponent.component('DitoHeader', {
         position: absolute;
         content: '';
         width: 1px;
-        height: 1.2em;
-        right: -1px;
-        background: $color-dark;
+        height: 0.75em;
+        right: -0.25em;
+        background: $color-white;
+        opacity: 0.5;
       }
 
       &::before {

package/src/components/DitoPanel.vue

@@ -222,23 +222,31 @@ export default DitoComponent.component('DitoPanel', {
     border-bottom-right-radius: $border-radius;
 
     > .dito-schema-content {
-      > .dito-pane {
-        padding: $form-spacing-half $form-spacing;
+      .dito-pane {
+        margin: -$form-spacing-half;
 
-        > .dito-container {
+        > .dito-container:not(.dito-container--single) {
           padding: $form-spacing-half;
         }
       }
 
+      > .dito-pane {
+        padding: $form-spacing;
+
+        &.dito-pane--single {
+          margin: 0;
+        }
+      }
+
       .dito-object {
-        border: 0;
+        border: none;
         padding: 0;
       }
 
       > .dito-buttons {
         --button-margin: #{$form-spacing};
 
-        padding: 0 $form-spacing $form-spacing;
+        padding: $form-spacing;
 
         .dito-container {
           padding: 0;
@@ -251,10 +259,6 @@ export default DitoComponent.component('DitoPanel', {
         font-weight: normal;
       }
     }
-
-    .dito-pane {
-      margin: 0 (-$form-spacing-half);
-    }
   }
 }
 </style>

package/src/utils/schema.js

@@ -283,25 +283,24 @@ export async function processSchemaComponent(
   ])
 }
 
-export async function processView(component, api, schema, name, menuLevel = 0) {
+export async function processView(component, api, schema, name, fullPath = '') {
   processSchemaDefaults(api, schema)
+  processRouteSchema(api, schema, name, fullPath)
   let children = []
   if (isView(schema)) {
-    processRouteSchema(api, schema, name)
     await processNestedSchemas(api, schema)
     await processSchemaComponents(api, schema, children)
   } else if (isMenu(schema)) {
-    processRouteSchema(api, schema, name)
     children = await Promise.all(
       Object.entries(schema.items).map(async ([name, item]) =>
-        processView(component, api, item, name, menuLevel + 1)
+        processView(component, api, item, name, schema.fullPath)
       )
     )
   } else {
     throw new Error(`Invalid view schema: '${getSchemaIdentifier(schema)}'`)
   }
   return {
-    path: menuLevel === 0 ? `/${schema.path}` : schema.path,
+    path: schema.fullPath,
     children,
     component,
     meta: {
@@ -343,10 +342,13 @@ export function processNestedSchemaDefaults(api, schema) {
   })
 }
 
-export function processRouteSchema(api, schema, name) {
+export function processRouteSchema(api, schema, name, fullPath = null) {
   // Used for view and source schemas, see SourceMixin.
   schema.name ??= name
   schema.path ??= api.normalizePath(name)
+  if (fullPath !== null) {
+    schema.fullPath = `${fullPath}/${schema.path}`
+  }
 }
 
 export async function processForms(api, schema, level) {
@@ -466,8 +468,8 @@ export function getViewEditPath(schema, id, context) {
   const view = getViewSchema(schema, context)
   if (view) {
     const path = isSingleComponentView(view)
-      ? `/${view.path}`
-      : `/${view.path}/${view.path}`
+      ? view.fullPath
+      : `${view.fullPath}/${view.path}`
     return `${path}/${id}`
   }
   return null