@ditojs/admin 2.6.6 → 2.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.6.6",
+  "version": "2.6.8",
   "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": "cc88d57c87cb03764f8ea351a9447f5911e64a80",
+  "gitHead": "6c09a5f0fe96aeadf73ca07daa427e39a7f1462d",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/components/DitoContainer.vue

@@ -24,6 +24,7 @@
     :single="single"
     :nested="nested"
     :disabled="componentDisabled"
+    :accumulatedBasis="combinedBasis"
     @errors="onErrors"
   )
   DitoErrors(:errors="errors")
@@ -49,7 +50,8 @@ export default DitoComponent.component('DitoContainer', {
     nested: { type: Boolean, default: true },
     disabled: { type: Boolean, required: true },
     generateLabels: { type: Boolean, default: false },
-    verticalLabels: { type: Boolean, default: false }
+    verticalLabels: { type: Boolean, default: false },
+    accumulatedBasis: { type: Number, default: null }
   },
 
   data() {
@@ -140,14 +142,20 @@ export default DitoComponent.component('DitoContainer', {
     flexBasis() {
       const width = this.width
       // 'auto' = no fitting:
-      const basis = [null, 'auto', 'fill'].includes(width)
+      return [null, 'auto', 'fill'].includes(width)
         ? 'auto'
         : /%$/.test(width)
-          ? parseFloat(width) // percentage
+          ? parseFloat(width) / 100 // percentage -> fraction
           : /[a-z]/.test(width)
             ? width // native units
-            : parseFraction(width) * 100 // fraction
-      return isNumber(basis) ? `${basis}%` : basis
+            : parseFraction(width) // fraction
+    },
+
+    combinedBasis() {
+      const { accumulatedBasis, flexBasis } = this
+      return isNumber(accumulatedBasis) && isNumber(flexBasis)
+        ? accumulatedBasis * flexBasis
+        : null
     },
 
     containerClass() {
@@ -166,10 +174,15 @@ export default DitoComponent.component('DitoContainer', {
     },
 
     containerStyle() {
+      const { flexBasis, combinedBasis } = this
       return {
         '--grow': this.flexGrow ? 1 : 0,
         '--shrink': this.flexShrink ? 1 : 0,
-        '--basis': this.flexBasis
+        '--basis': isNumber(flexBasis) ? `${flexBasis * 100}%` : flexBasis,
+        '--basis-mobile':
+          isNumber(combinedBasis) && combinedBasis <= 0.25
+            ? `${flexBasis * 200}%`
+            : null
       }
     },
 
@@ -215,30 +228,27 @@ export default DitoComponent.component('DitoContainer', {
   padding: $form-spacing $form-spacing-half;
 
   .dito-page .dito-pane > & {
-    @container (width < #{$content-width}) {
-      flex-grow: 1;
-    }
-
     @container (width < #{calc($content-width * 0.8)}) {
-      &:not(:has(> .dito-list, > .dito-object)) {
-        flex-basis: calc(var(--basis) * 1.5);
-      }
+      flex-grow: 1;
+      flex-basis: var(--basis-mobile, var(--basis));
+      // DEBUG: background: yellow;
     }
 
     @container (width < #{calc($content-width * 0.6)}) {
-      &:not(:has(> .dito-list, > .dito-object)) {
-        flex-basis: calc(var(--basis) * 2);
-      }
+      flex-basis: calc(2 * var(--basis));
+      // DEBUG: background: orange;
     }
   }
 
   .dito-sidebar .dito-pane > & {
     @container (width < #{$sidebar-max-width}) {
       flex-grow: 1;
+      // DEBUG: background: yellow;
     }
 
     @container (width < #{calc($sidebar-max-width * 0.6)}) {
-      flex-basis: calc(var(--basis) * 2);
+      flex-basis: calc(2 * var(--basis));
+      // DEBUG: background: orange;
     }
   }
 

package/src/components/DitoHeader.vue

@@ -112,12 +112,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 +126,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/DitoMenu.vue

@@ -18,6 +18,7 @@ ul.dito-menu(
         v-if="item.items"
         :class="getItemClass(item, 'dito-sub-menu')"
         :items="item.items"
+        :path="getItemPath(item, false)"
       )
 </template>
 
@@ -30,6 +31,10 @@ export default DitoComponent.component('DitoMenu', {
     items: {
       type: [Object, Array],
       default: () => []
+    },
+    path: {
+      type: String,
+      default: ''
     }
   },
 
@@ -53,28 +58,27 @@ export default DitoComponent.component('DitoMenu', {
       }
     },
 
-    getItemPath(item) {
-      return item?.path
-        ? `/${item.path}`
-        : item.items
-          ? this.getItemPath(Object.values(item.items)[0])
-          : null
+    getItemPath(item, firstChild) {
+      const path = item.path ? `${this.path}/${item.path}` : null
+      return firstChild && path && item.items
+        ? `${path}${this.getItemPath(Object.values(item.items)[0], false)}`
+        : path
     },
 
     getItemHref(item) {
-      const path = this.getItemPath(item)
+      const path = this.getItemPath(item, true)
       return path ? this.$router.resolve(path).href : null
     },
 
     isActiveItem(item) {
       return (
-        this.$route.path.startsWith(this.getItemPath(item)) ||
+        this.$route.path.startsWith(this.getItemPath(item, false)) ||
         item.items && Object.values(item.items).some(this.isActiveItem)
       )
     },
 
     onClickItem(item) {
-      const path = this.getItemPath(item)
+      const path = this.getItemPath(item, true)
       if (path) {
         this.$router.push({ path, force: true })
       }

package/src/components/DitoPane.vue

@@ -33,6 +33,7 @@
       :disabled="disabled"
       :generateLabels="generateLabels"
       :verticalLabels="isInLabeledRow(index)"
+      :accumulatedBasis="accumulatedBasis"
     )
     .dito-break(
       v-if="schema.break === 'after'"
@@ -62,7 +63,8 @@ export default DitoComponent.component('DitoPane', {
     single: { type: Boolean, default: false },
     visible: { type: Boolean, default: true },
     disabled: { type: Boolean, default: false },
-    generateLabels: { type: Boolean, default: false }
+    generateLabels: { type: Boolean, default: false },
+    accumulatedBasis: { type: Number, default: null }
   },
 
   data() {

package/src/components/DitoPanel.vue

@@ -223,22 +223,27 @@ export default DitoComponent.component('DitoPanel', {
 
     > .dito-schema-content {
       > .dito-pane {
-        padding: $form-spacing-half $form-spacing;
+        padding: (2 * $form-spacing - $input-padding-ver)
+          (2 * $form-spacing - $input-padding-hor);
+      }
 
-        > .dito-container {
-          padding: $form-spacing-half;
-        }
+      .dito-label {
+        margin: $form-spacing 0;
+      }
+
+      .dito-container {
+        padding: $form-spacing-half;
       }
 
       .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 +256,6 @@ export default DitoComponent.component('DitoPanel', {
         font-weight: normal;
       }
     }
-
-    .dito-pane {
-      margin: 0 (-$form-spacing-half);
-    }
   }
 }
 </style>

package/src/components/DitoSchema.vue

@@ -56,6 +56,7 @@ slot(name="before")
         :single="!inlined && !hasMainPane"
         :disabled="disabled"
         :generateLabels="generateLabels"
+        :accumulatedBasis="accumulatedBasis"
       )
     TransitionHeight(:enabled="inlined")
       DitoPane.dito-pane-main(
@@ -69,6 +70,7 @@ slot(name="before")
         :single="!inlined && !hasTabs"
         :disabled="disabled"
         :generateLabels="generateLabels"
+        :accumulatedBasis="accumulatedBasis"
       )
     slot(
       v-if="!inlined && isPopulated"
@@ -149,7 +151,8 @@ export default DitoComponent.component('DitoSchema', {
     scrollable: { type: Boolean, default: false },
     hasOwnData: { type: Boolean, default: false },
     headerInMenu: { type: Boolean, default: false },
-    generateLabels: { type: Boolean, default: false }
+    generateLabels: { type: Boolean, default: false },
+    accumulatedBasis: { type: Number, default: 1 }
   },
 
   data() {

package/src/components/DitoSchemaInlined.vue

@@ -12,6 +12,7 @@ DitoSchema.dito-schema-inlined(
   :collapsed="collapsed"
   :collapsible="collapsible"
   :generateLabels="!isCompact"
+  :accumulatedBasis="accumulatedBasis"
 )
   //- Render dito-edit-buttons for inlined schemas separately from all
   //- others in `TypeList` as a scope, for better handling of layout.
@@ -51,7 +52,8 @@ export default DitoComponent.component('DitoSchemaInlined', {
     draggable: { type: Boolean, default: false },
     editable: { type: Boolean, default: false },
     deletable: { type: Boolean, default: false },
-    editPath: { type: String, default: null }
+    editPath: { type: String, default: null },
+    accumulatedBasis: { type: Number, default: null }
   },
 
   computed: {

package/src/mixins/RouteMixin.js

@@ -73,7 +73,7 @@ export default {
     },
 
     path() {
-      return this.getRoutePath(this.routeRecord.path)
+      return this.getRoutePath(this.routeRecord?.path)
     },
 
     label() {
@@ -168,10 +168,13 @@ export default {
       // Maps the route's actual path to the matched routes by counting its
       // parts separated by '/', splitting the path into the mapped parts
       // containing actual parameters.
-      return this.$route.path
-        .split('/')
-        .slice(0, templatePath.split('/').length)
-        .join('/')
+      const { path } = this.$route
+      return templatePath
+        ? path
+            .split('/')
+            .slice(0, templatePath.split('/').length)
+            .join('/')
+        : path
     },
 
     getChildPath(path) {

package/src/mixins/TypeMixin.js

@@ -21,7 +21,8 @@ export default {
     label: { type: String, default: null },
     single: { type: Boolean, default: false },
     nested: { type: Boolean, default: true },
-    disabled: { type: Boolean, default: false }
+    disabled: { type: Boolean, default: false },
+    accumulatedBasis: { type: Number, default: null }
   },
 
   data() {

package/src/styles/_layout.scss

@@ -3,7 +3,7 @@
   display: flex;
 
   > * {
-    flex: 1;
+    flex: 1 0 auto;
     display: flex;
   }
 }

package/src/types/DitoTypeButton.vue

@@ -28,8 +28,8 @@ export default DitoTypeComponent.register(
   {
     defaultValue: () => undefined, // Callback to override `defaultValue: null`
     excludeValue: true,
-    generateLabel: false,
     defaultWidth: 'auto',
+    generateLabel: false,
 
     computed: {
       verb() {

package/src/types/DitoTypeCheckboxes.vue

@@ -27,6 +27,7 @@ export default DitoTypeComponent.register('checkboxes', {
 
   nativeField: true,
   defaultValue: [],
+  defaultWidth: 'auto',
 
   computed: {
     selectedOptions: {

package/src/types/DitoTypeObject.vue

@@ -18,6 +18,7 @@
       :disabled="disabled || isLoading"
       :collapsed="collapsed"
       :collapsible="collapsible"
+      :accumulatedBasis="accumulatedBasis"
     )
     component(
       v-else-if="schema.component"

package/src/types/DitoTypeRadio.vue

@@ -25,7 +25,8 @@ import OptionsMixin from '../mixins/OptionsMixin.js'
 export default DitoTypeComponent.register('radio', {
   mixins: [OptionsMixin],
 
-  nativeField: true
+  nativeField: true,
+  defaultWidth: 'auto'
 })
 </script>
 

package/src/utils/schema.js

@@ -283,32 +283,32 @@ export async function processSchemaComponent(
   ])
 }
 
-export async function processView(component, api, schema, name) {
+export async function processView(component, api, schema, name, menuLevel = 0) {
   processSchemaDefaults(api, schema)
+  let children = []
   if (isView(schema)) {
     processRouteSchema(api, schema, name)
     await processNestedSchemas(api, schema)
-    const children = []
-    await processSchemaComponents(api, schema, children, 0)
-    return {
-      path: `/${schema.path}`,
-      children,
-      component,
-      meta: {
-        api,
-        schema
-      }
-    }
+    await processSchemaComponents(api, schema, children)
   } else if (isMenu(schema)) {
-    return Promise.all(
+    processRouteSchema(api, schema, name)
+    children = await Promise.all(
       Object.entries(schema.items).map(async ([name, item]) =>
-        processView(component, api, item, name)
+        processView(component, api, item, name, menuLevel + 1)
       )
     )
-    //
   } else {
     throw new Error(`Invalid view schema: '${getSchemaIdentifier(schema)}'`)
   }
+  return {
+    path: menuLevel === 0 ? `/${schema.path}` : schema.path,
+    children,
+    component,
+    meta: {
+      api,
+      schema
+    }
+  }
 }
 
 export function processSchemaDefaults(api, schema) {