@ditojs/admin 2.5.2 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.5.2",
+  "version": "2.6.0",
   "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.0",
+    "@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": "ce98ce03662c08e040ad7f9cb93cc0f48e11edb9",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

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 }
+    inLabeledRow: { 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}--labeled-row`]: this.inLabeledRow,
         [`${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 }
@@ -214,8 +203,6 @@ export default DitoComponent.component('DitoContainer', {
 @import '../styles/_imports';
 
 .dito-container {
-  $self: &;
-
   position: relative;
   display: flex;
   flex-flow: column;
@@ -229,6 +216,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 +232,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);
-      }
+  &--labeled-row {
+    // 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/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)"
+      :inLabeledRow="isInLabeledRow(index)"
     )
     .dito-break(
       v-if="schema.break === 'after'"
@@ -43,7 +42,7 @@
 <script>
 import DitoComponent from '../DitoComponent.js'
 import { appendDataPath } from '../utils/data.js'
-import { getAllPanelEntries, isNested } from '../utils/schema.js'
+import { getAllPanelEntries, hasLabel, isNested } from '../utils/schema.js'
 
 // @vue/component
 export default DitoComponent.component('DitoPane', {
@@ -124,6 +123,63 @@ export default DitoComponent.component('DitoPane', {
 
     isSingleComponent() {
       return this.single && this.componentSchemas.length === 1
+    },
+
+    labeledRowsByIndices() {
+      const { positions } = this
+
+      const isLastInRow = index => (
+        positions[index] !== null && (
+          index === positions.length - 1 ||
+          findNextPosition(index) > positions[index]
+        )
+      )
+
+      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 labeledRowsByIndices = []
+
+      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)) {
+            hasLabelsInRow = true
+            break
+          }
+        }
+        for (const index of row) {
+          labeledRowsByIndices[index] = hasLabelsInRow
+        }
+      }
+
+      return labeledRowsByIndices
+    }
+  },
+
+  watch: {
+    'componentSchemas.length'(length) {
+      this.positions.length = length
     }
   },
 
@@ -146,48 +202,22 @@ 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])
-        )
-      )
-    },
-
-    isLastInRow(index) {
-      const { positions } = this
-      return (
-        positions[index] !== null && (
-          index === positions.length - 1 ||
-          findNextPosition(positions, index, +1, 0) > positions[index]
-        )
-      )
+    isInLabeledRow(index) {
+      return this.labeledRowsByIndices[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;
@@ -196,16 +226,13 @@ function findNextPosition(positions, index, step, fallback) {
   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;
   // 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.
+    // Clear margin from above.
     margin: 0;
-    max-width: $max-width;
   }
 
   &.dito-pane-main {

package/src/components/DitoPanels.vue

@@ -45,7 +45,8 @@ 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;
+  // 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,32 @@ function addRoutes(router, routes) {
   display: flex;
 }
 
-.dito-root {
-  .dito-page {
-    background: $content-color-background;
+.dito-page {
+  flex: 1 1 $content-width;
+  background: $content-color-background;
+  max-width: $content-width;
+
+  &--wide {
+    max-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: {
@@ -750,10 +762,11 @@ export default DitoComponent.component('DitoSchema', {
   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 +776,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 +786,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 +830,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;

package/src/components/DitoSchemaInlined.vue

@@ -82,11 +82,9 @@ export default DitoComponent.component('DitoSchemaInlined', {
         margin: 0;
         width: 100%;
         box-sizing: content-box;
-        // Because tables have a funny way of allowing too much width growth:
-        max-width: $content-width;
         // Prevent collapsing to min-height when alone in
         // .dito-schema-content, due to grid-template-rows: min-content
-        min-height: 2em;
+        min-height: $input-height;
       }
     }
 

package/src/components/DitoSidebar.vue

@@ -1,8 +1,7 @@
 <template lang="pug">
-nav.dito-sidebar.dito-scroll-parent
-  h1
-    RouterLink.dito-link(to="/") {{ appState.title }}
-  DitoMenu.dito-scroll(:items="views")
+aside.dito-sidebar.dito-scroll-parent
+  nav.dito-header
+    slot
 </template>
 
 <script>
@@ -16,25 +15,8 @@ export default DitoComponent.component('DitoSidebar', {})
 @import '../styles/_imports';
 
 .dito-sidebar {
-  @include user-select(none);
-
-  flex: initial;
-  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;
-    }
-  }
+  flex: 0 4 $sidebar-max-width;
+  max-width: $sidebar-max-width;
+  min-width: $sidebar-min-width;
 }
 </style>

package/src/components/DitoView.vue

@@ -15,6 +15,7 @@ template(
     :data-resource="sourceSchema.path"
   )
     DitoSchema(
+      :key="name"
       :schema="viewSchema"
       :data="data"
       :meta="meta"

package/src/components/index.js

@@ -5,8 +5,9 @@
 
 export { default as DitoRoot } from './DitoRoot.vue'
 export { default as DitoMenu } from './DitoMenu.vue'
-export { default as DitoSidebar } from './DitoSidebar.vue'
 export { default as DitoHeader } from './DitoHeader.vue'
+export { default as DitoNavigation } from './DitoNavigation.vue'
+export { default as DitoSidebar } from './DitoSidebar.vue'
 export { default as DitoAccount } from './DitoAccount.vue'
 export { default as DitoDialog } from './DitoDialog.vue'
 export { default as DitoElement } from './DitoElement.vue'

package/src/mixins/TextMixin.js

@@ -10,6 +10,6 @@ export default {
   },
 
   processValue(schema, value) {
-    return schema.trim ? value?.trim() : value
+    return schema.trim && value != null ? value.trim() : value
   }
 }