@ditojs/admin 2.7.5 → 2.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.7.5",
+  "version": "2.8.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.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": "26db3d0a7ebbed92b052bd7cffa078e9cdae7497",
   "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,19 @@ export default DitoComponent.component('DitoCreateButton', {
 
   props: {
     schema: { type: Object, required: true },
+    // The next four props are there for `DitoContext` and the `context()`
+    // getter in `DitoMixin`.
+    // TODO: Should they be moved to shared mixin that defines them as required
+    // and also provides the `context()` getter, perhaps `ContextMixin`?
+    // `schema` could be included as well, and `ContextMixin` could be used in
+    // `DitoForm`, `DitoView`, `DitoPanel`, `DitoSchema`, `DitoEditButtons`,
+    // etc? But the problem with the root components is that they don't have
+    // these props. We could add a `contextAttributes()` getter for easy passing
+    // on as `v-bind="contextAttributes"`.
+    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 },
@@ -68,7 +81,14 @@ export default DitoComponent.component('DitoCreateButton', {
     isFormCreatable(form) {
       // Forms can be excluded from the list by providing `if: false` or
       // `creatable: false`.
-      return form.creatable !== false && this.shouldRenderSchema(form)
+      return (
+        this.shouldRenderSchema(form) &&
+        this.getSchemaValue('creatable', {
+          type: Boolean,
+          default: true,
+          schema: form
+        })
+      )
     },
 
     createItem(form, type = 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

@@ -10,28 +10,32 @@ DitoButtons.dito-edit-buttons.dito-buttons-round(
 )
   //- Firefox doesn't like <button> here, so use <a> instead:
   a.dito-button(
-    v-if="hasDraggable"
-    :class="{ 'dito-disabled': disabled }"
+    v-if="draggable"
+    :class="{ 'dito-disabled': isDraggableDisabled }"
     v-bind="getButtonAttributes(verbs.drag)"
   )
   RouterLink.dito-button(
-    v-if="hasEditable"
-    :class="{ 'dito-disabled': disabled || !editPath }"
+    v-if="editable"
+    :class="{ 'dito-disabled': isEditableDisabled }"
     :to="editPath ? { path: editPath } : {}"
     v-bind="getButtonAttributes(verbs.edit)"
   )
   DitoCreateButton(
-    v-if="hasCreatable"
+    v-if="creatable"
     :schema="schema"
+    :dataPath="dataPath"
+    :data="data"
+    :meta="meta"
+    :store="store"
     :path="createPath"
     :verb="verbs.create"
     :text="createButtonText"
-    :disabled="disabled || !createPath"
+    :disabled="isCreatableDisabled"
   )
   button.dito-button(
-    v-if="hasDeletable"
+    v-if="deletable"
     type="button"
-    :disabled="disabled || !isFormDeletable"
+    :disabled="isDeletableDisabled"
     v-bind="getButtonAttributes(verbs.delete)"
     @click="$emit('delete')"
   )
@@ -66,24 +70,28 @@ export default DitoComponent.component('DitoEditButtons', {
       return this.getLabel(this.schema.form)
     },
 
-    hasDraggable() {
-      return this.hasOption('draggable')
+    isDraggableDisabled() {
+      return this.disabled || !this.hasSchemaOption('draggable')
     },
 
-    hasEditable() {
-      return this.hasOption('editable')
+    isDeletableDisabled() {
+      return this.disabled || !this.hasSchemaOption('deletable')
     },
 
-    hasCreatable() {
-      return this.hasOption('creatable')
-    },
-
-    hasDeletable() {
-      return this.hasOption('deletable')
+    isCreatableDisabled() {
+      return (
+        this.disabled ||
+        !this.createPath ||
+        !this.hasSchemaOption('creatable')
+      )
     },
 
-    isFormDeletable() {
-      return this.schema.deletable !== false
+    isEditableDisabled() {
+      return (
+        this.disabled ||
+        !this.editPath ||
+        !this.hasSchemaOption('editable')
+      )
     },
 
     createButtonText() {
@@ -101,11 +109,13 @@ export default DitoComponent.component('DitoEditButtons', {
   },
 
   methods: {
-    hasOption(name) {
-      // The options of the outer component are passed to the buttons component
-      // through properties `this[name]`, but can be disabled on a per-form
-      // basis by setting `schema[name]` to `false`.
-      return !!(this[name] && this.schema[name] !== false)
+    hasSchemaOption(name) {
+      // All options can be disabled on a per-form basis by setting
+      // `schema[name]` to `false` or a callback returning `false`.
+      return this.getSchemaValue(name, {
+        type: Boolean,
+        default: true
+      })
     }
   }
 })

package/src/components/DitoElement.vue

@@ -26,14 +26,14 @@ export default DitoComponent.component('DitoElement', {
 
     classes() {
       return {
-        ...this.$attrs.class,
+        ...asObject(this.$attrs.class),
         ...asObject(this.options.class)
       }
     },
 
     styles() {
       return {
-        ...this.$attrs.style,
+        ...asObject(this.$attrs.style),
         ...asObject(this.options.style)
       }
     }

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,45 @@ 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;
   }
 
   label,
-  .dito-label-prefix,
-  .dito-label-suffix {
+  &__prefix,
+  &__suffix {
     @include user-select(none);
     @include ellipsis;
+
+    white-space: nowrap;
+    line-height: $input-height;
   }
 
-  .dito-label-prefix + label,
-  label + .dito-label-suffix {
+  &__prefix + label,
+  label + &__suffix {
     &::before {
       content: '\a0'; // &nbsp;
     }
@@ -140,11 +152,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 {