@ditojs/admin 2.6.0 → 2.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "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,7 +33,7 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.6.0",
+    "@ditojs/ui": "^2.6.1",
     "@ditojs/utils": "^2.6.0",
     "@kyvg/vue3-notification": "^2.9.0",
     "@lk77/vue3-color": "^3.0.6",
@@ -83,7 +83,7 @@
     "vite": "^4.3.4"
   },
   "types": "types",
-  "gitHead": "ce98ce03662c08e040ad7f9cb93cc0f48e11edb9",
+  "gitHead": "a95912074661c314de4a56debf68950e12590dbd",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/DitoContext.js

@@ -150,6 +150,10 @@ export default class DitoContext {
     return get(this, 'views', null)
   }
 
+  get flattenedViews() {
+    return get(this, 'flattenedViews', null)
+  }
+
   get itemLabel() {
     return get(this, 'itemLabel', null)
   }

package/src/components/DitoContainer.vue

@@ -49,7 +49,7 @@ export default DitoComponent.component('DitoContainer', {
     nested: { type: Boolean, default: true },
     disabled: { type: Boolean, required: true },
     generateLabels: { type: Boolean, default: false },
-    inLabeledRow: { type: Boolean, default: false }
+    verticalLabels: { type: Boolean, default: false }
   },
 
   data() {
@@ -155,7 +155,7 @@ export default DitoComponent.component('DitoContainer', {
       const prefix = 'dito-container'
       return {
         [`${prefix}--single`]: this.single,
-        [`${prefix}--labeled-row`]: this.inLabeledRow,
+        [`${prefix}--label-vertical`]: this.verticalLabels,
         [`${prefix}--omit-padding`]: omitPadding(this.schema),
         ...(
           isString(containerClass)
@@ -178,12 +178,11 @@ export default DitoComponent.component('DitoContainer', {
     },
 
     componentClass() {
-      const basisIsAuto = this.flexBasis === 'auto'
       return {
         // TODO: BEM?
         'dito-single': this.single,
         'dito-disabled': this.componentDisabled,
-        'dito-width-fill': !basisIsAuto || this.width === 'fill',
+        'dito-width-fill': this.width === 'fill' || this.flexBasis !== 'auto',
         'dito-width-grow': this.flexGrow,
         'dito-width-shrink': this.flexShrink,
         'dito-has-errors': !!this.errors
@@ -232,7 +231,7 @@ export default DitoComponent.component('DitoContainer', {
     padding: 0;
   }
 
-  &--labeled-row {
+  &--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 {

package/src/components/DitoLabel.vue

@@ -98,7 +98,11 @@ export default DitoComponent.component('DitoLabel', {
   // Vertically center all items in the label, e.g. chevron, edit-buttons.
   align-items: center;
   padding: var(--label-padding);
-  margin: 0 0 $form-spacing-half 0;
+  margin: 0 $form-spacing-half $form-spacing-half 0;
+
+  .dito-container:not(.dito-container--label-vertical) > & {
+    margin-bottom: 0;
+  }
 
   &__inner {
     display: flex;
@@ -175,10 +179,10 @@ a.dito-label {
 .dito-schema-compact {
   > .dito-schema-content {
     > .dito-pane {
-      > .dito-container {
+      > .dito-container:not(.dito-container--label-vertical) {
         display: flex;
         flex-flow: row wrap;
-        align-items: baseline;
+        align-items: center;
       }
     }
   }

package/src/components/DitoPane.vue

@@ -32,7 +32,7 @@
       :nested="nested"
       :disabled="disabled"
       :generateLabels="generateLabels"
-      :inLabeledRow="isInLabeledRow(index)"
+      :verticalLabels="isInLabeledRow(index)"
     )
     .dito-break(
       v-if="schema.break === 'after'"
@@ -42,7 +42,7 @@
 <script>
 import DitoComponent from '../DitoComponent.js'
 import { appendDataPath } from '../utils/data.js'
-import { getAllPanelEntries, hasLabel, isNested } from '../utils/schema.js'
+import { getAllPanelEntries, isNested } from '../utils/schema.js'
 
 // @vue/component
 export default DitoComponent.component('DitoPane', {
@@ -125,13 +125,13 @@ export default DitoComponent.component('DitoPane', {
       return this.single && this.componentSchemas.length === 1
     },
 
-    labeledRowsByIndices() {
+    verticalLabelsByIndices() {
       const { positions } = this
 
       const isLastInRow = index => (
-        positions[index] !== null && (
+        positions[index] && (
           index === positions.length - 1 ||
-          findNextPosition(index) > positions[index]
+          findNextPosition(index).top > positions[index].top
         )
       )
 
@@ -155,25 +155,28 @@ export default DitoComponent.component('DitoPane', {
         rows.push(row)
       }
 
-      const labeledRowsByIndices = []
+      const verticalLabelsByIndices = []
 
       for (const row of rows) {
         let hasLabelsInRow = false
         for (const index of row) {
-          const { schema } = this.componentSchemas[index]
-          // TODO: Handle nested schemas, e.g. 'section' or 'object' and detect
-          // labels there too.
-          if (hasLabel(schema, this.generateLabels)) {
+          const position = this.positions[index]
+          if (
+            position?.height > 4 &&
+            position.node.querySelector(':scope > .dito-label')
+          ) {
+            // TODO: Handle nested schemas, e.g. 'section' or 'object' and
+            // detect labels there too.
             hasLabelsInRow = true
             break
           }
         }
         for (const index of row) {
-          labeledRowsByIndices[index] = hasLabelsInRow
+          verticalLabelsByIndices[index] = hasLabelsInRow
         }
       }
 
-      return labeledRowsByIndices
+      return verticalLabelsByIndices
     }
   },
 
@@ -204,11 +207,18 @@ export default DitoComponent.component('DitoPane', {
 
     onResizeContainer(index, { target }) {
       const { y, width, height } = target.getBoundingClientRect()
-      this.positions[index] = width > 0 && height > 0 ? y : null
+      this.positions[index] =
+        width > 0 && height > 0
+          ? {
+              top: y,
+              height: height / parseFloat(getComputedStyle(target).fontSize),
+              node: target
+            }
+          : null
     },
 
     isInLabeledRow(index) {
-      return this.labeledRowsByIndices[index]
+      return !!this.verticalLabelsByIndices[index]
     }
   }
 })
@@ -223,16 +233,17 @@ export default DitoComponent.component('DitoPane', {
   flex-flow: row wrap;
   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);
+  padding: ($content-padding - $form-spacing)
+    ($content-padding - $form-spacing-half);
+  max-width: calc(var(--max-content-width) + $form-spacing);
   // 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%;
 
   &--single {
     // Clear margin from above.
-    margin: 0;
+    padding: $content-padding;
   }
 
   &.dito-pane-main {

package/src/components/DitoPanel.vue

@@ -247,8 +247,6 @@ export default DitoComponent.component('DitoPanel', {
     }
 
     .dito-label {
-      margin: 0;
-
       label {
         font-weight: normal;
       }

package/src/components/DitoPanels.vue

@@ -46,6 +46,7 @@ export default DitoComponent.component('DitoPanels', {
 
 .dito-panels {
   padding: $content-padding;
+  padding-left: $form-spacing;
   // For the `@container` rule in `.dito-container` to work:
   container-type: inline-size;
 }

package/src/components/DitoRoot.vue

@@ -472,12 +472,14 @@ function addRoutes(router, routes) {
 }
 
 .dito-page {
-  flex: 1 1 $content-width;
+  --max-content-width: #{$content-width};
+
+  flex: 1 1 var(--max-content-width);
   background: $content-color-background;
-  max-width: $content-width;
+  max-width: calc(var(--max-content-width) + 2 * #{$content-padding});
 
   &--wide {
-    max-width: $content-width-wide;
+    --max-content-width: #{$content-width-wide};
   }
 }
 

package/src/components/DitoSchema.vue

@@ -757,8 +757,9 @@ export default DitoComponent.component('DitoSchema', {
 
 .dito-schema {
   box-sizing: border-box;
-  // To display schema next to panels:
+  // To display schema next to buttons:
   display: flex;
+  align-items: flex-start;
   min-height: 100%;
 
   > .dito-schema-content {

package/src/mixins/DitoMixin.js

@@ -10,7 +10,11 @@ import {
 import appState from '../appState.js'
 import DitoContext from '../DitoContext.js'
 import EmitterMixin from './EmitterMixin.js'
-import { getSchemaValue, shouldRenderSchema } from '../utils/schema.js'
+import {
+  flattenViews,
+  getSchemaValue,
+  shouldRenderSchema
+} from '../utils/schema.js'
 import { getResource, getMemberResource } from '../utils/resource.js'
 import { computed, reactive } from 'vue'
 
@@ -77,6 +81,10 @@ export default {
       return this.$views()
     },
 
+    flattenedViews() {
+      return flattenViews(this.views)
+    },
+
     isPopulated() {
       return this.$isPopulated()
     },

package/src/types/DitoTypeList.vue

@@ -2,10 +2,8 @@
 .dito-list(
   v-if="isReady"
   :id="dataPath"
-  :class="schema.class"
-  :style="schema.style"
 )
-  .dito-navigation(
+  .dito-list__header(
     v-if="scopes || hasPagination"
   )
     DitoScopes(
@@ -314,9 +312,11 @@ export default DitoTypeComponent.register('list', {
 @import '../styles/_imports';
 
 .dito-list {
+  $self: &;
+
   position: relative;
 
-  .dito-navigation {
+  &__header {
     display: flex;
     justify-content: space-between;
     padding-bottom: $content-padding-half;
@@ -342,7 +342,7 @@ export default DitoTypeComponent.register('list', {
 
     // Make single list header, navigation and buttons sticky to the top and
     // bottom:
-    .dito-navigation {
+    #{$self}__header {
       position: sticky;
       top: 0;
       margin-top: -$content-padding;

package/src/types/DitoTypeObject.vue

@@ -2,8 +2,6 @@
 .dito-object(
   v-if="isReady"
   :id="dataPath"
-  :class="schema.class"
-  :style="schema.style"
 )
   .dito-object-content(
     v-if="objectData"
@@ -118,16 +116,18 @@ export default DitoTypeComponent.register('object', {
   border: $border-style;
   border-radius: $border-radius;
   margin: 0;
-  padding: $form-spacing;
+  // Only add what's not already added by the nested '.dito-pane' as padding,
+  // in order to have `$form-spacing` all around.
+  padding: 0 $form-spacing-half;
   box-sizing: border-box;
 
   .dito-object-content {
     flex: 0 1 100%;
   }
 
-  > .dito-buttons {
+  > .dito-edit-buttons {
     flex: 1 0 0%;
-    margin-left: $form-spacing;
+    padding: $form-spacing;
   }
 }
 </style>

package/src/utils/schema.js

@@ -188,11 +188,28 @@ export async function resolveViews(unresolvedViews) {
       // NOTE: This is never actually referenced from anywhere, but they need
       // a name by which they're stored in the parent object.
       schema.name = camelize(schema.label)
+      schema.items = await resolveSchemas(schema.items)
     }
     return schema
   })
 }
 
+export function flattenViews(views) {
+  return Object.fromEntries(
+    Object.entries(views).reduce(
+      (entries, [key, schema]) => {
+        if (isMenu(schema)) {
+          entries.push(...Object.entries(schema.items))
+        } else {
+          entries.push([key, schema])
+        }
+        return entries
+      },
+      []
+    )
+  )
+}
+
 export async function resolveSchemaComponent(schema) {
   // Resolves async schema components and adds DitoMixin and TypeMixin to them.
   let { component } = schema
@@ -283,7 +300,6 @@ export async function processView(component, api, schema, name) {
       }
     }
   } else if (isMenu(schema)) {
-    schema.items = await resolveSchemas(schema.items)
     return Promise.all(
       Object.entries(schema.items).map(async ([name, item]) =>
         processView(component, api, item, name)
@@ -428,7 +444,7 @@ export function isSingleComponentView(schema) {
 
 export function getViewFormSchema(schema, context) {
   const { view } = schema
-  const viewSchema = view && context.views[view]
+  const viewSchema = view && context.flattenedViews[view]
   return viewSchema
     ? // NOTE: Views can have tabs, in which case the view component is nested
       // in one of the tabs, go find it.
@@ -438,7 +454,7 @@ export function getViewFormSchema(schema, context) {
 
 export function getViewSchema(schema, context) {
   return getViewFormSchema(schema, context)
-    ? context.views[schema.view]
+    ? context.flattenedViews[schema.view]
     : null
 }