@ditojs/admin 2.6.5 → 2.6.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.6.5",
+  "version": "2.6.7",
   "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": "01511e6f5082c5f63c6fb17959559b3e28a111b2",
+  "gitHead": "b192b2ffad1ff1c9e2e228a7b4a0ca86c8184028",
   "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
       }
     },
 
@@ -207,8 +220,6 @@ export default DitoComponent.component('DitoContainer', {
   flex: var(--grow) var(--shrink) var(--basis);
   flex-flow: column;
   align-items: flex-start;
-  // Needed for better vertical alignment:
-  align-self: stretch;
   box-sizing: border-box;
   // To prevent list tables from blowing out of their flex box containers.
   max-width: 100%;
@@ -216,31 +227,28 @@ export default DitoComponent.component('DitoContainer', {
   // percentages in flex-basis to work.
   padding: $form-spacing $form-spacing-half;
 
-  .dito-page & {
-    @container (width < #{$content-width}) {
-      flex-grow: 1;
-    }
-
+  .dito-page .dito-pane > & {
     @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-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/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() {
@@ -162,7 +164,7 @@ export default DitoComponent.component('DitoPane', {
         for (const index of row) {
           const position = this.positions[index]
           if (
-            position?.height > 4 &&
+            position?.height > 3 &&
             position.node.querySelector(':scope > .dito-label')
           ) {
             // TODO: Handle nested schemas, e.g. 'section' or 'object' and
@@ -205,12 +207,11 @@ export default DitoComponent.component('DitoPane', {
       }
     },
 
-    onResizeContainer(index, { target }) {
-      const { y, width, height } = target.getBoundingClientRect()
+    onResizeContainer(index, { target, contentRect: { width, height } }) {
       this.positions[index] =
         width > 0 && height > 0
           ? {
-              top: y,
+              top: target.getBoundingClientRect().y,
               height: height / parseFloat(getComputedStyle(target).fontSize),
               node: target
             }
@@ -233,8 +234,8 @@ export default DitoComponent.component('DitoPane', {
   display: flex;
   position: relative;
   flex-flow: row wrap;
+  align-items: flex-start;
   align-content: flex-start;
-  align-items: baseline;
   padding: $content-padding;
   // Remove the padding added by `.dito-container` inside `.dito-pane`:
   margin: (-$form-spacing) (-$form-spacing-half);

package/src/components/DitoRoot.vue

@@ -473,10 +473,11 @@ function addRoutes(router, routes) {
 
 .dito-page {
   --max-content-width: #{$content-width};
+  --max-page-width: calc(var(--max-content-width) + 2 * #{$content-padding});
 
-  flex: 1 1 var(--max-content-width);
+  flex: 0 1 var(--max-page-width);
   background: $content-color-background;
-  max-width: calc(var(--max-content-width) + 2 * #{$content-padding});
+  max-width: var(--max-page-width);
   // For the `@container` rule in `.dito-container` to work:
   container-type: inline-size;
 

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/components/DitoSidebar.vue

@@ -15,7 +15,7 @@ export default DitoComponent.component('DitoSidebar', {})
 @import '../styles/_imports';
 
 .dito-sidebar {
-  flex: 0 4 $sidebar-max-width;
+  flex: 0 1 $sidebar-max-width;
   max-width: $sidebar-max-width;
   min-width: $sidebar-min-width;
   // For the `@container` rule in `.dito-container` to work:

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/DitoTypeMultiselect.vue

@@ -316,9 +316,10 @@ $tag-line-height: 1em;
     }
 
     &__tags {
+      display: flex;
       font-size: inherit;
-      overflow: auto;
       min-height: inherit;
+      overflow: auto;
       padding: 0 $spinner-width 0 0;
       // So tags can float on multiple lines and have proper margins:
       padding-bottom: $tag-margin;
@@ -341,11 +342,14 @@ $tag-line-height: 1em;
     &__single,
     &__placeholder,
     &__input {
-      font-size: inherit;
-      line-height: inherit;
-      white-space: nowrap;
+      @include ellipsis;
+
+      flex: 1 0 0%;
+      width: 0;
       min-height: 0;
       margin: 0 0 1px 0;
+      font-size: inherit;
+      line-height: inherit;
       // Sadly, vue-select sets style="padding: ...;" in addition to using
       // classes, so `!important` is necessary:
       padding: $input-padding !important;

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) {