@ditojs/admin 2.7.5 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.7.5",
+  "version": "2.8.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.7.3",
-    "@ditojs/utils": "^2.7.1",
+    "@ditojs/ui": "^2.8.0",
+    "@ditojs/utils": "^2.8.0",
     "@kyvg/vue3-notification": "^2.9.0",
     "@lk77/vue3-color": "^3.0.6",
     "@tiptap/core": "^2.0.3",
@@ -74,7 +74,7 @@
     "vue-upload-component": "^3.1.8"
   },
   "devDependencies": {
-    "@ditojs/build": "^2.5.0",
+    "@ditojs/build": "^2.8.0",
     "@vitejs/plugin-vue": "^4.2.1",
     "@vue/compiler-sfc": "^3.2.47",
     "pug": "^3.0.2",
@@ -83,7 +83,7 @@
     "vite": "^4.3.5"
   },
   "types": "types",
-  "gitHead": "d88c47b18f85103460099db95afb067c8c244253",
+  "gitHead": "6f589b645e8841b1875330d9918a7d952af49b31",
   "scripts": {
     "build": "vite build",
     "watch": "yarn build --mode 'development' --watch",

package/src/DitoContext.js

@@ -216,6 +216,10 @@ export default class DitoContext {
     return get(this, 'options', undefined)
   }
 
+  get open() {
+    return get(this, 'open', undefined)
+  }
+
   // TODO: Rename this to `searchTerm` or `searchQuery`, to perhaps free `query`
   // for the actual `resourceComponent.query` object?
   get query() {

package/src/DitoTypeComponent.js

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

package/src/components/DitoClipboard.vue

@@ -165,3 +165,25 @@ export default DitoComponent.component('DitoClipboard', {
   }
 })
 </script>
+
+<style lang="scss">
+@import '../styles/_imports';
+
+.dito-clipboard {
+  display: flex;
+
+  .dito-schema & {
+    // Push clipboard to the right in the flex layout, see:
+    // https://codepen.io/tholex/pen/hveBx/
+    margin-left: auto;
+  }
+
+  .dito-header & {
+    margin-left: 0;
+
+    .dito-button {
+      margin: 0 0 $tab-margin $tab-margin;
+    }
+  }
+}
+</style>

package/src/components/DitoContainer.vue

@@ -51,7 +51,7 @@ import {
   getAllPanelEntries,
   getTypeComponent,
   hasLabel,
-  omitPadding
+  omitSpacing
 } from '../utils/schema.js'
 import { parseFraction } from '../utils/math.js'
 
@@ -73,8 +73,7 @@ export default DitoComponent.component('DitoContainer', {
 
   data() {
     return {
-      errors: null,
-      isMounted: false
+      errors: null
     }
   },
 
@@ -184,7 +183,7 @@ export default DitoComponent.component('DitoContainer', {
         'dito-disabled': this.componentDisabled,
         'dito-has-errors': !!this.errors,
         [`${prefix}--label-vertical`]: this.verticalLabels,
-        [`${prefix}--omit-padding`]: omitPadding(this.schema),
+        [`${prefix}--omit-spacing`]: omitSpacing(this.schema),
         ...(isString(classes) ? { [classes]: true } : classes)
       }
     },
@@ -228,10 +227,6 @@ export default DitoComponent.component('DitoContainer', {
     }
   },
 
-  mounted() {
-    this.isMounted = true
-  },
-
   methods: {
     onErrors(errors) {
       this.errors = errors
@@ -258,7 +253,7 @@ export default DitoComponent.component('DitoContainer', {
   max-width: 100%;
   // Cannot use margin here as it needs to be part of box-sizing for
   // percentages in flex-basis to work.
-  padding: $form-spacing $form-spacing-half;
+  padding: $form-spacing-half;
 
   .dito-page .dito-pane > & {
     @container (width < #{calc($content-width * 0.8)}) {
@@ -300,15 +295,15 @@ export default DitoComponent.component('DitoContainer', {
     // have labels, add some spacing to the top to align with the other
     // components (e.g.  buttons):
     > .dito-component:first-child:not(.dito-section, .dito-list, .dito-object) {
-      margin-top: $line-height * $font-size + $form-spacing-half;
+      margin-top: $input-height;
     }
   }
 
-  &--omit-padding {
+  &--omit-spacing {
     padding: 0;
 
     > .dito-label {
-      margin: $form-spacing $form-spacing-half 0;
+      margin: $form-spacing-half $form-spacing-half 0;
     }
   }
 }

package/src/components/DitoCreateButton.vue

@@ -40,6 +40,10 @@ export default DitoComponent.component('DitoCreateButton', {
 
   props: {
     schema: { type: Object, required: true },
+    dataPath: { type: String, required: true },
+    data: { type: [Object, Array], default: null },
+    meta: { type: Object, required: true },
+    store: { type: Object, required: true },
     path: { type: String, required: true },
     verb: { type: String, required: true },
     text: { type: String, default: null },

package/src/components/DitoDialog.vue

@@ -11,6 +11,11 @@
     form.dito-scroll-parent(
       @submit.prevent="submit"
     )
+      // Add an invisible button that prevents the clearable buttons from being
+      // pressed when the user presses the Enter key:
+      button(
+        v-show="false"
+      )
       DitoSchema(
         :schema="schema"
         :data="dialogData"

package/src/components/DitoEditButtons.vue

@@ -23,6 +23,10 @@ DitoButtons.dito-edit-buttons.dito-buttons-round(
   DitoCreateButton(
     v-if="hasCreatable"
     :schema="schema"
+    :dataPath="dataPath"
+    :data="data"
+    :meta="meta"
+    :store="store"
     :path="createPath"
     :verb="verbs.create"
     :text="createButtonText"

package/src/components/DitoForm.vue

@@ -12,9 +12,10 @@
     v-show="!isActive"
   )
   //- Use a <div> for inlined forms, as we shouldn't nest actual <form> tags.
-  component.dito-scroll-parent(
+  component(
     v-show="isActive"
     :is="isNestedRoute ? 'div' : 'form'"
+    :class="{ 'dito-scroll-parent': isRootForm }"
     @submit.prevent
   )
     //- Prevent implicit submission of the form, for example when typing enter
@@ -32,12 +33,12 @@
       :meta="meta"
       :store="store"
       :disabled="isLoading"
-      :scrollable="!isNestedRoute"
-      headerInMenu
+      :scrollable="isRootForm"
       generateLabels
     )
       template(#buttons)
-        DitoButtons.dito-buttons-round.dito-buttons-main.dito-buttons-large(
+        DitoButtons.dito-buttons-round.dito-buttons-large.dito-buttons-main(
+          :class="{ 'dito-buttons-sticky': isRootForm }"
           :buttons="buttonSchemas"
           :dataPath="dataPath"
           :data="data"
@@ -122,6 +123,10 @@ export default DitoComponent.component('DitoForm', {
       )
     },
 
+    isRootForm() {
+      return this.dataPath === '' && !this.isNestedRoute
+    },
+
     isActive() {
       return this.isLastRoute || this.isLastUnnestedRoute
     },

package/src/components/DitoHeader.vue

@@ -85,13 +85,10 @@ export default DitoComponent.component('DitoHeader', {
   @include user-select(none);
 
   &::after {
-    // Cover the gaps between the different headers that might appear due to
-    // layout rounding imprecisions.
+    // Set the full-width header background to the header color.
     content: '';
-    top: 0;
-    bottom: 0;
-    left: calc(100% - 1px);
-    width: 2px;
+    inset: 0;
+    width: 100vw;
     position: absolute;
     background: inherit;
     z-index: -1;
@@ -175,5 +172,24 @@ export default DitoComponent.component('DitoHeader', {
       border-radius: 100%;
     }
   }
+
+  &__teleport {
+    // Align the teleported schema headers on top of to the header menu.
+    position: absolute;
+    inset: 0;
+    display: flex;
+    justify-content: flex-end;
+    padding: 0 $header-padding-hor;
+    // Turn off pointer events so that DitoTrail keeps receiving events...
+    pointer-events: none;
+    // ...but move them to the children.
+    > * {
+      pointer-events: auto;
+    }
+
+    .dito-button {
+      margin: 0 0 $tab-margin $tab-margin;
+    }
+  }
 }
 </style>

package/src/components/DitoLabel.vue

@@ -7,20 +7,23 @@ component.dito-label(
 )
   .dito-chevron(
     v-if="collapsible"
-    :class="{ 'dito-opened': !collapsed }"
+    :class="{ 'dito-open': !collapsed }"
   )
-  .dito-label__inner
-    DitoElement.dito-label-prefix(
+  .dito-label__inner(
+    v-if="text || prefixes.length > 0 || suffixes.length > 0"
+  )
+    DitoElement.dito-label__prefix(
       v-for="(prefix, index) of prefixes"
       :key="`prefix-${index}`"
       tag="span"
       :content="prefix"
     )
     label(
+      v-if="text"
       :for="dataPath"
       v-html="text"
     )
-    DitoElement.dito-label-suffix(
+    DitoElement.dito-label__suffix(
       v-for="(suffix, index) of suffixes"
       :key="`suffix-${index}`"
       tag="span"
@@ -30,7 +33,6 @@ component.dito-label(
       v-if="info"
       :data-info="info"
     )
-  slot(name="edit-buttons")
 </template>
 
 <script>
@@ -39,7 +41,7 @@ import { isObject, asArray } from '@ditojs/utils'
 
 // @vue/component
 export default DitoComponent.component('DitoLabel', {
-  emits: ['expand'],
+  emits: ['open'],
 
   props: {
     label: { type: [String, Object], default: null },
@@ -79,7 +81,7 @@ export default DitoComponent.component('DitoLabel', {
   methods: {
     onClick() {
       this.appState.activeLabel = this
-      this.$emit('expand', this.collapsed)
+      this.$emit('open', this.collapsed)
     }
   }
 })
@@ -96,35 +98,44 @@ export default DitoComponent.component('DitoLabel', {
   position: relative;
   // Vertically center all items in the label, e.g. chevron, edit-buttons.
   align-items: center;
-  margin: 0 $form-spacing-half $form-spacing-half 0;
+  min-height: $input-height;
+  margin-right: $form-spacing-half; // When inlined.
+
+  &:has(.dito-schema-header) {
+    // The container's label is used as teleport for a nested section or object
+    // label. Hide `&__inner`, as it is be duplicated inside the nested label.
+    > #{$self}__inner {
+      display: none;
+    }
+  }
 
-  .dito-container:not(.dito-container--label-vertical) > & {
-    // When labels are not vertical (e.g. compact layout, next to component),
-    // clear bottom padding for better vertical alignment.
-    margin-bottom: 0;
+  &:not(:has(+ .dito-tabs)) {
+    // Take full width but only if there aren't also tabs to be centered.
+    flex: 1;
   }
 
   &__inner {
     display: flex;
-    // Stretch to full available width so that buttons appear right-aligned:
-    flex: 1 1 auto;
+    flex: 1 0 0%;
+    overflow: hidden;
   }
 
   label {
     cursor: inherit;
     font-weight: bold;
     white-space: nowrap;
+    line-height: $input-height;
   }
 
   label,
-  .dito-label-prefix,
-  .dito-label-suffix {
+  &__prefix,
+  &__suffix {
     @include user-select(none);
     @include ellipsis;
   }
 
-  .dito-label-prefix + label,
-  label + .dito-label-suffix {
+  &__prefix + label,
+  label + &__suffix {
     &::before {
       content: '\a0'; // &nbsp;
     }
@@ -140,11 +151,17 @@ export default DitoComponent.component('DitoLabel', {
 
   &.dito-width-fill {
     width: 100%;
+
     // In order for ellipsis to work on labels without affecting other layout,
-    // we need to position it absolutely inside its container.
-    #{$self}__inner {
-      position: absolute;
-      inset: 0;
+    // we need to position it absolutely inside its container. But we can only
+    // do so if there is't also a chevron or other UX elements besides it.
+    &:has(> #{$self}__inner:only-child) {
+      flex: 1; // When in `.dito-schema-header`.
+
+      > #{$self}__inner {
+        position: absolute;
+        inset: 0;
+      }
     }
 
     &::after {

package/src/components/DitoPane.vue

@@ -2,7 +2,6 @@
 <template lang="pug">
 .dito-pane(
   v-if="isPopulated && componentSchemas.length > 0"
-  v-show="visible"
   :class=`{
     'dito-pane--single': isSingleComponent
   }`
@@ -16,7 +15,9 @@
       store
     }, index in componentSchemas`
   )
-    .dito-break(
+    // -Use <span> for .dito-break so we can use `.dito-container:first-of-type`
+    // selector.
+    span.dito-break(
       v-if="schema.break === 'before'"
     )
     DitoContainer(
@@ -35,7 +36,7 @@
       :verticalLabels="isInLabeledRow(index)"
       :accumulatedBasis="accumulatedBasis"
     )
-    .dito-break(
+    span.dito-break(
       v-if="schema.break === 'after'"
     )
 </template>
@@ -61,7 +62,6 @@ export default DitoComponent.component('DitoPane', {
     store: { type: Object, required: true },
     tab: { type: String, default: null },
     single: { type: Boolean, default: false },
-    visible: { type: Boolean, default: true },
     disabled: { type: Boolean, default: false },
     generateLabels: { type: Boolean, default: false },
     accumulatedBasis: { type: Number, default: null }
@@ -102,7 +102,7 @@ export default DitoComponent.component('DitoPane', {
                 : this.dataPath,
             nestedDataPath,
             nested,
-            store: nested ? this.getChildStore(name) : this.store
+            store: this.getChildStore(name)
           }
         }
       )
@@ -149,8 +149,12 @@ export default DitoComponent.component('DitoPane', {
         for (const index of row) {
           const position = this.positions[index]
           if (
-            position?.height > 3 &&
-            position.node.querySelector(':scope > .dito-label')
+            position?.height > 2 && (
+              position.node.matches(':has(> .dito-label)') ||
+              position.node
+                .closest('.dito-container')
+                .matches('.dito-container--label-vertical')
+            )
           ) {
             // TODO: Handle nested schemas, e.g. 'section' or 'object' and
             // detect labels there too.
@@ -221,51 +225,55 @@ export default DitoComponent.component('DitoPane', {
   flex-flow: row wrap;
   align-items: flex-start;
   align-content: flex-start;
-  padding: $content-padding;
   // Remove the padding added by `.dito-container` inside `.dito-pane`:
-  margin: (-$form-spacing) (-$form-spacing-half);
-  max-width: calc(var(--max-content-width) + $form-spacing);
-  // Use `flex: 0%` for all `.dito-pane` except `.dito-pane-main`,
+  margin: -$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 negative margin from above.
-    margin: 0;
+  &__main {
+    flex: 100%;
   }
 
   .dito-scroll > & {
-    &,
-    .dito-container {
-      min-width: min-content;
-    }
+    // A root-level pane inside a scroll view. Clear negative margin from above.
+    margin: 0;
+    // Move the negative margin used to remove the padding added by
+    // `.dito-container` inside `.dito-pane` to the padding:
+    padding: $content-padding - $form-spacing-half;
 
-    &:not(#{$self}--single) {
-      // Root-level panes inside scroll views need to move the negative margin
-      // used to remove the padding added by `.dito-container` inside
-      // `.dito-pane` to the padding:
-      padding: ($content-padding - $form-spacing)
-        ($content-padding - $form-spacing-half);
-      margin: 0;
+    &#{$self}--single {
+      padding: $content-padding;
     }
-  }
 
-  &.dito-pane-main {
-    flex: 100%;
+    &:has(> .dito-container--label-vertical:first-of-type) {
+      // Reduce top spacing when the first row has labels.
+      margin-top: -$form-spacing-half;
+    }
   }
 
-  .dito-schema-header + & {
-    // Clear top-margin if the components are preceded by a schema header.
-    margin-top: 0;
+  // Display a ruler between tabbed components and towards the .dito-buttons
+  &__tab + &__main {
+    &::before {
+      // Use a pseudo element to display a ruler with proper margins
+      display: block;
+      content: '';
+      width: 100%;
+      border-bottom: $border-style;
+      // Add removed $form-spacing-half again to the ruler
+      margin: (-$content-padding + $form-spacing-half) $form-spacing-half
+        $form-spacing-half;
+    }
   }
 
-  .dito-container--omit-padding > & {
-    // Clear margins set above again if parent is omitting padding.
-    margin: 0;
-    max-width: unset;
+  &__main + .dito-buttons-main {
+    // Needed forms with sticky main buttons.
+    margin: $content-padding;
+    margin-bottom: 0;
   }
 
   .dito-break {
+    display: block;
     flex: 100%;
     height: 0;
   }

package/src/components/DitoRoot.vue

@@ -37,8 +37,6 @@
     )
       span Login
   .dito-fill
-    .dito-header
-      span
 </template>
 
 <script>
@@ -478,6 +476,7 @@ function addRoutes(router, routes) {
   flex: 0 1 var(--max-page-width);
   background: $content-color-background;
   max-width: var(--max-page-width);
+  overflow: visible; // For .dito-header full-width background.
   // For the `@container` rule in `.dito-container` to work:
   container-type: inline-size;