@ditojs/admin 2.5.2 → 2.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.5.2",
+  "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,8 +33,8 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^2.5.2",
-    "@ditojs/utils": "^2.5.0",
+    "@ditojs/ui": "^2.6.1",
+    "@ditojs/utils": "^2.6.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": "8c5737b77ba43617cd95ba65fbabcdc2941542a8",
+  "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/DitoTypeComponent.js

@@ -21,7 +21,6 @@ export default {
   generateLabel: true,
   excludeValue: false,
   ignoreMissingValue: null,
-  keepAligned: true,
   omitPadding: false,
 
   component: DitoComponent.component,

package/src/components/DitoAccount.vue

@@ -51,6 +51,7 @@ export default DitoComponent.component('DitoAccount', {
 
 .dito-account {
   position: relative;
+  display: inline-block;
 
   .dito-pulldown {
     top: $pulldown-padding-ver;

package/src/components/DitoContainer.vue

@@ -34,7 +34,7 @@ import { isString, isNumber } from '@ditojs/utils'
 import DitoComponent from '../DitoComponent.js'
 import DitoContext from '../DitoContext.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
-import { getTypeComponent, keepAligned, omitPadding } from '../utils/schema.js'
+import { getTypeComponent, hasLabel, omitPadding } from '../utils/schema.js'
 import { parseFraction } from '../utils/math.js'
 
 // @vue/component
@@ -49,8 +49,7 @@ export default DitoComponent.component('DitoContainer', {
     nested: { type: Boolean, default: true },
     disabled: { type: Boolean, required: true },
     generateLabels: { type: Boolean, default: false },
-    firstInRow: { type: Boolean, default: false },
-    lastInRow: { type: Boolean, default: false }
+    verticalLabels: { type: Boolean, default: false }
   },
 
   data() {
@@ -69,13 +68,7 @@ export default DitoComponent.component('DitoContainer', {
     },
 
     hasLabel() {
-      const { label } = this.schema
-      return (
-        label !== false && (
-          !!label ||
-          this.generateLabels && this.typeComponent?.generateLabel
-        )
-      )
+      return hasLabel(this.schema, this.generateLabels)
     },
 
     label() {
@@ -162,12 +155,8 @@ export default DitoComponent.component('DitoContainer', {
       const prefix = 'dito-container'
       return {
         [`${prefix}--single`]: this.single,
-        [`${prefix}--has-label`]: this.hasLabel,
-        [`${prefix}--aligned`]: keepAligned(this.schema),
+        [`${prefix}--label-vertical`]: this.verticalLabels,
         [`${prefix}--omit-padding`]: omitPadding(this.schema),
-        [`${prefix}--first-in-row`]: this.firstInRow,
-        [`${prefix}--last-in-row`]: this.lastInRow,
-        [`${prefix}--alone-in-row`]: this.firstInRow && this.lastInRow,
         ...(
           isString(containerClass)
             ? { [containerClass]: true }
@@ -189,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
@@ -214,8 +202,6 @@ export default DitoComponent.component('DitoContainer', {
 @import '../styles/_imports';
 
 .dito-container {
-  $self: &;
-
   position: relative;
   display: flex;
   flex-flow: column;
@@ -229,6 +215,12 @@ export default DitoComponent.component('DitoContainer', {
   // percentages in flex-basis to work.
   padding: $form-spacing $form-spacing-half;
 
+  .dito-sidebar & {
+    @container (width < #{$sidebar-max-width - 2 * $content-padding}) {
+      flex-grow: 1 !important;
+    }
+  }
+
   &:empty {
     padding: 0;
   }
@@ -239,25 +231,11 @@ export default DitoComponent.component('DitoContainer', {
     padding: 0;
   }
 
-  &--aligned {
-    // For components with labels, align the label at the top and the component
-    // at the bottom.
-    --justify: space-between;
-
-    &:has(> :only-child) {
-      // But if there is no label, still align the component to the bottom.
-      --justify: flex-end;
-    }
-
-    &:not(#{$self}--alone-in-row) {
-      // Now only apply alignment if there are neighbouring components no the
-      // same row that also align.
-      // Look ahead:
-      &:not(#{$self}--last-in-row) + #{&}:not(#{$self}--first-in-row),
-      // Look behind:
-      &:not(#{$self}--last-in-row):has(+ #{&}:not(#{$self}--first-in-row)) {
-        justify-content: var(--justify);
-      }
+  &--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 {
+      margin-top: $line-height * $font-size + $form-spacing-half;
     }
   }
 

package/src/components/DitoDialog.vue

@@ -147,7 +147,9 @@ export default DitoComponent.component('DitoDialog', {
     },
 
     cancel() {
-      this.resolve(null)
+      // When cancelling, resolve as `undefined` so we can have dialogs
+      // returning null as a defined value as well.
+      this.resolve(undefined)
     },
 
     close() {

package/src/components/DitoHeader.vue

@@ -20,7 +20,7 @@ nav.dito-header
       v-if="isLoading"
     )
   //- Teleport target for `.dito-schema-header`:
-  .dito-header__menu
+  .dito-title
   slot
 </template>
 
@@ -88,19 +88,27 @@ export default DitoComponent.component('DitoHeader', {
     display: inline-block;
     padding: $header-padding;
     color: $color-white;
+
+    &:empty {
+      &::after {
+        content: '\200b';
+      }
+    }
   }
 
   .dito-trail {
     display: flex;
     box-sizing: border-box;
     height: 3em;
-    width: 100%;
-    max-width: $content-width + $content-padding;
 
     ul {
       display: flex;
     }
 
+    li {
+      white-space: nowrap;
+    }
+
     a {
       position: relative;
       display: block;
@@ -152,16 +160,5 @@ export default DitoComponent.component('DitoHeader', {
       border-radius: 100%;
     }
   }
-
-  .dito-account,
-  .dito-login {
-    position: absolute;
-    top: 0;
-    cursor: pointer;
-  }
-
-  .dito-account {
-    left: $content-width + $content-padding * 2;
-  }
 }
 </style>

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

@@ -0,0 +1,40 @@
+<template lang="pug">
+nav.dito-navigation.dito-scroll-parent
+  h1
+    RouterLink.dito-link(to="/") {{ appState.title }}
+  DitoMenu.dito-scroll(:items="views")
+</template>
+
+<script>
+import DitoComponent from '../DitoComponent.js'
+
+// @vue/component
+export default DitoComponent.component('DitoNavigation', {})
+</script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-navigation {
+  @include user-select(none);
+
+  flex: 0 0 min-content;
+  font-size: $menu-font-size;
+  white-space: nowrap;
+  background: $color-lighter;
+
+  h1 {
+    display: block;
+    line-height: $header-line-height;
+    font-weight: bold;
+    background: $color-darker;
+    border-right: $border-width solid $color-darkest;
+    color: $color-white;
+
+    .dito-link {
+      display: block;
+      padding: $header-padding;
+    }
+  }
+}
+</style>

package/src/components/DitoPane.vue

@@ -22,7 +22,7 @@
     DitoContainer(
       v-if="shouldRenderSchema(schema)"
       :key="nestedDataPath"
-      v-resize="event => onResize(index, event)"
+      v-resize="event => onResizeContainer(index, event)"
       :schema="schema"
       :dataPath="dataPath"
       :data="data"
@@ -32,8 +32,7 @@
       :nested="nested"
       :disabled="disabled"
       :generateLabels="generateLabels"
-      :firstInRow="schema.break === 'before' || isFirstInRow(index)"
-      :lastInRow="schema.break === 'after' || isLastInRow(index)"
+      :verticalLabels="isInLabeledRow(index)"
     )
     .dito-break(
       v-if="schema.break === 'after'"
@@ -124,6 +123,66 @@ export default DitoComponent.component('DitoPane', {
 
     isSingleComponent() {
       return this.single && this.componentSchemas.length === 1
+    },
+
+    verticalLabelsByIndices() {
+      const { positions } = this
+
+      const isLastInRow = index => (
+        positions[index] && (
+          index === positions.length - 1 ||
+          findNextPosition(index).top > positions[index].top
+        )
+      )
+
+      const findNextPosition = index => {
+        for (let i = index + 1; i < positions.length; i++) {
+          if (positions[i]) return positions[i]
+        }
+        return 0
+      }
+
+      const rows = []
+      let row = []
+      for (let index = 0; index < positions.length; index++) {
+        row.push(index)
+        if (isLastInRow(index)) {
+          rows.push(row)
+          row = []
+        }
+      }
+      if (row.length > 0) {
+        rows.push(row)
+      }
+
+      const verticalLabelsByIndices = []
+
+      for (const row of rows) {
+        let hasLabelsInRow = false
+        for (const index of row) {
+          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) {
+          verticalLabelsByIndices[index] = hasLabelsInRow
+        }
+      }
+
+      return verticalLabelsByIndices
+    }
+  },
+
+  watch: {
+    'componentSchemas.length'(length) {
+      this.positions.length = length
     }
   },
 
@@ -146,66 +205,45 @@ export default DitoComponent.component('DitoPane', {
       }
     },
 
-    onResize(index, { target }) {
+    onResizeContainer(index, { target }) {
       const { y, width, height } = target.getBoundingClientRect()
-      this.positions[index] = width > 0 && height > 0 ? y : null
-    },
-
-    isFirstInRow(index) {
-      const { positions } = this
-      return (
-        positions[index] !== null && (
-          index === 0 ||
-          (findNextPosition(positions, index, -1, Infinity) < positions[index])
-        )
-      )
+      this.positions[index] =
+        width > 0 && height > 0
+          ? {
+              top: y,
+              height: height / parseFloat(getComputedStyle(target).fontSize),
+              node: target
+            }
+          : null
     },
 
-    isLastInRow(index) {
-      const { positions } = this
-      return (
-        positions[index] !== null && (
-          index === positions.length - 1 ||
-          findNextPosition(positions, index, +1, 0) > positions[index]
-        )
-      )
+    isInLabeledRow(index) {
+      return !!this.verticalLabelsByIndices[index]
     }
   }
 })
-
-function findNextPosition(positions, index, step, fallback) {
-  for (let i = index + step; i >= 0 && i < positions.length; i += step) {
-    const position = positions[i]
-    if (position) return position
-  }
-  return fallback
-}
 </script>
 
 <style lang="scss">
 @import '../styles/_imports';
 
 .dito-pane {
-  $max-width: $content-width + 2 * $content-padding;
-
   display: flex;
   position: relative;
   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);
-  // Add removed horizontal margin again to max-width:
-  max-width: $max-width + 2 * $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 settings from above.
-    margin: 0;
-    max-width: $max-width;
+    // Clear margin from above.
+    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

@@ -45,7 +45,9 @@ export default DitoComponent.component('DitoPanels', {
 @import '../styles/_imports';
 
 .dito-panels {
-  max-width: $content-sidebar-width;
-  min-width: calc($content-sidebar-width / 2);
+  padding: $content-padding;
+  padding-left: $form-spacing;
+  // For the `@container` rule in `.dito-container` to work:
+  container-type: inline-size;
 }
 </style>

package/src/components/DitoRoot.vue

@@ -20,21 +20,25 @@
       :settings="dialog.settings"
       @remove="removeDialog(key)"
     )
-  DitoSidebar
-  main.dito-page.dito-scroll-parent
+  DitoNavigation
+  main.dito-page.dito-scroll-parent(:class="appState.pageClass")
     DitoHeader(
       :spinner="options.spinner"
       :isLoading="isLoading"
     )
-      DitoAccount(
-        v-if="user"
-      )
-      a.dito-login(
-        v-else-if="allowLogin"
-        @click="rootComponent.login()"
-      )
-        span Login
     RouterView
+  DitoSidebar
+    DitoAccount(
+      v-if="user"
+    )
+    a.dito-login(
+      v-else-if="allowLogin"
+      @click="rootComponent.login()"
+    )
+      span Login
+  .dito-fill
+    .dito-header
+      span
 </template>
 
 <script>
@@ -467,12 +471,34 @@ function addRoutes(router, routes) {
   display: flex;
 }
 
-.dito-root {
-  .dito-page {
-    background: $content-color-background;
+.dito-page {
+  --max-content-width: #{$content-width};
+
+  flex: 1 1 var(--max-content-width);
+  background: $content-color-background;
+  max-width: calc(var(--max-content-width) + 2 * #{$content-padding});
+
+  &--wide {
+    --max-content-width: #{$content-width-wide};
+  }
+}
+
+.dito-fill {
+  flex: 1;
+
+  .dito-header {
+    span {
+      padding-left: 0;
+      padding-right: 0;
+    }
   }
 }
 
+.dito-account,
+.dito-login {
+  cursor: pointer;
+}
+
 .dito-drag-overlay {
   position: fixed;
   top: 0;

package/src/components/DitoSchema.vue

@@ -8,7 +8,7 @@ slot(name="before")
     :class="{ 'dito-scroll': scrollable }"
   )
     Teleport(
-      to=".dito-header__menu"
+      to=".dito-title"
       :disabled="!headerInMenu"
     )
       .dito-schema-header(
@@ -81,8 +81,9 @@ slot(name="before")
       v-if="!hasLabel"
       name="edit-buttons"
     )
-  template(
+  Teleport(
     v-else-if="isPopulated"
+    to=".dito-sidebar"
   )
     DitoPanels(
       :class="{ 'dito-scroll': scrollable }"
@@ -116,7 +117,7 @@ import {
   processData,
   isForm
 } from '../utils/schema.js'
-import { getStoreAccessor } from '../utils/accessor.js'
+import { getSchemaAccessor, getStoreAccessor } from '../utils/accessor.js'
 
 // @vue/component
 export default DitoComponent.component('DitoSchema', {
@@ -334,7 +335,12 @@ export default DitoComponent.component('DitoSchema', {
 
     panelsByDataPath() {
       return this._listEntriesByDataPath(this.panelsRegistry)
-    }
+    },
+
+    wide: getSchemaAccessor('wide', {
+      type: Boolean,
+      default: false
+    })
   },
 
   watch: {
@@ -385,11 +391,17 @@ export default DitoComponent.component('DitoSchema', {
     // Delegate change events through to parent schema:
     this.delegate('change', this.parentSchemaComponent)
     this.emitEvent('initialize') // Not `'create'`, since that's for data.
+    if (this.scrollable && this.wide) {
+      this.appState.pageClass = 'dito-page--wide'
+    }
   },
 
   unmounted() {
     this.emitEvent('destroy')
     this._register(false)
+    if (this.scrollable && this.wide) {
+      this.appState.pageClass = null
+    }
   },
 
   methods: {
@@ -745,15 +757,17 @@ 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 {
-    flex: 1 1 100%;
+    flex: 0 1 100%;
+    max-width: 100%;
     // So that schema buttons can be sticky to the bottom:
-    display: grid;
-    grid-template-rows: min-content;
+    display: flex;
+    flex-direction: column;
 
     > *:only-child {
       grid-row-end: none;
@@ -763,12 +777,9 @@ export default DitoComponent.component('DitoSchema', {
       // Eat up negative margin of the last child to prevent overscroll.
       content: '';
     }
-
-    max-width: $content-width + 2 * $content-padding;
   }
 
-  > .dito-buttons,
-  > .dito-panels {
+  > .dito-buttons {
     flex: 1 1 0%;
   }
 
@@ -776,10 +787,6 @@ export default DitoComponent.component('DitoSchema', {
     margin-left: $form-spacing;
   }
 
-  > .dito-panels {
-    padding: $content-padding $content-padding $content-padding 0;
-  }
-
   // Display a ruler between tabbed components and towards the .dito-buttons
   .dito-pane-tab + .dito-pane-main {
     &::before {
@@ -824,7 +831,6 @@ export default DitoComponent.component('DitoSchema', {
     position: absolute;
     height: $header-height;
     padding: 0 $header-padding-hor;
-    max-width: $content-width;
     top: 0;
     left: 0;
     right: 0;