@ditojs/admin 2.7.4 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "2.7.4",
+  "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": "6f35889443fbf18b1853dfaeb801766d197f0b87",
+  "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

@@ -5,8 +5,8 @@
   )
     button.dito-button(
       type="button"
-      :class="`dito-button-${verb}`"
-      :title="labelize(verb)"
+      :disabled="disabled"
+      v-bind="getButtonAttributes(verb)"
       @mousedown.stop="onPulldownMouseDown()"
     ) {{ text }}
     ul.dito-pulldown(:class="{ 'dito-open': pulldown.open }")
@@ -14,17 +14,17 @@
         v-for="(form, type) in forms"
       )
         a(
-          v-if="shouldRenderSchema(form)"
-          v-show="shouldShow(form)"
+          v-if="isFormCreatable(form)"
+          v-show="shouldShowSchema(form)"
           :class="getFormClass(form, type)"
           @mousedown.stop="onPulldownMouseDown(type)"
           @mouseup="onPulldownMouseUp(type)"
         ) {{ getLabel(form) }}
   button.dito-button(
-    v-else
+    v-else-if="isFormCreatable(forms.default)"
     :type="isInlined ? 'button' : 'submit'"
-    :class="`dito-button-${verb}`"
-    :title="labelize(verb)"
+    :disabled="disabled"
+    v-bind="getButtonAttributes(verb)"
     @click="createItem(forms.default)"
   ) {{ text }}
 </template>
@@ -40,9 +40,14 @@ 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 }
+    text: { type: String, default: null },
+    disabled: { type: Boolean, required: true }
   },
 
   computed: {
@@ -55,13 +60,23 @@ export default DitoComponent.component('DitoCreateButton', {
     },
 
     showPulldown() {
-      return Object.keys(this.forms).length > 1 || !this.forms.default
+      const forms = Object.values(this.forms)
+      return (
+        (forms.length > 1 || !this.forms.default) &&
+        forms.some(this.isFormCreatable)
+      )
     }
   },
 
   methods: {
+    isFormCreatable(form) {
+      // Forms can be excluded from the list by providing `if: false` or
+      // `creatable: false`.
+      return form.creatable !== false && this.shouldRenderSchema(form)
+    },
+
     createItem(form, type = null) {
-      if (this.shouldRenderSchema(form) && !this.shouldDisable(form)) {
+      if (this.isFormCreatable(form) && !this.shouldDisableSchema(form)) {
         if (this.isInlined) {
           this.sourceComponent.createItem(form, type)
         } else {
@@ -78,7 +93,7 @@ export default DitoComponent.component('DitoCreateButton', {
     getFormClass(form, type) {
       return {
         [`dito-type-${type}`]: true,
-        'dito-disabled': this.shouldDisable(form)
+        'dito-disabled': this.shouldDisableSchema(form)
       }
     },
 

package/src/components/DitoDialog.vue

@@ -7,12 +7,15 @@
   :style="{ '--width': `${settings.width}px` }"
   @mouseup="onMouseUp"
 )
-  UseFocusTrap.dito-dialog__focus-trap(
-    :options="{ immediate: true, fallbackFocus: () => $refs.dialog }"
-  )
+  UseFocusTrap.dito-dialog__focus-trap(:options="focusTrapOptions")
     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"
@@ -104,6 +107,14 @@ export default DitoComponent.component('DitoDialog', {
       )
     },
 
+    focusTrapOptions() {
+      return {
+        immediate: true,
+        fallbackFocus: () => this.$refs.dialog,
+        onDeactivate: this.cancel
+      }
+    },
+
     hasButtons() {
       return Object.keys(this.buttonSchemas).length > 0
     },

package/src/components/DitoEditButtons.vue

@@ -11,25 +11,31 @@ 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-bind="getButtonAttributes(verbs.drag)"
   )
   RouterLink.dito-button(
     v-if="hasEditable"
-    :class="{ 'dito-disabled': !editPath }"
+    :class="{ 'dito-disabled': disabled || !editPath }"
     :to="editPath ? { path: editPath } : {}"
     v-bind="getButtonAttributes(verbs.edit)"
   )
   DitoCreateButton(
     v-if="hasCreatable"
-    :class="{ 'dito-disabled': !createPath }"
     :schema="schema"
+    :dataPath="dataPath"
+    :data="data"
+    :meta="meta"
+    :store="store"
     :path="createPath"
     :verb="verbs.create"
     :text="createButtonText"
+    :disabled="disabled || !createPath"
   )
   button.dito-button(
     v-if="hasDeletable"
     type="button"
+    :disabled="disabled || !isFormDeletable"
     v-bind="getButtonAttributes(verbs.delete)"
     @click="$emit('delete')"
   )
@@ -44,18 +50,19 @@ export default DitoComponent.component('DitoEditButtons', {
   emits: ['delete'],
 
   props: {
-    draggable: { type: Boolean, default: false },
-    editable: { type: Boolean, default: false },
-    creatable: { type: Boolean, default: false },
-    deletable: { type: Boolean, default: false },
-    editPath: { type: String, default: null },
-    createPath: { type: String, default: null },
     buttons: { type: Object, default: null },
     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 }
+    store: { type: Object, required: true },
+    disabled: { type: Boolean, required: true },
+    draggable: { type: Boolean, default: false },
+    editable: { type: Boolean, default: false },
+    creatable: { type: Boolean, default: false },
+    deletable: { type: Boolean, default: false },
+    editPath: { type: String, default: null },
+    createPath: { type: String, default: null }
   },
 
   computed: {
@@ -79,6 +86,10 @@ export default DitoComponent.component('DitoEditButtons', {
       return this.hasOption('deletable')
     },
 
+    isFormDeletable() {
+      return this.schema.deletable !== false
+    },
+
     createButtonText() {
       return (
         // Allow schema to override create button through creatable object:

package/src/components/DitoForm.vue

@@ -12,11 +12,20 @@
     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
+    //- in an input field.
+    //- https://stackoverflow.com/a/51507806
+    button(
+      v-show="false"
+      type="submit"
+      disabled
+    )
     DitoSchema(
       :schema="schema"
       :dataPath="dataPath"
@@ -24,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"
@@ -37,14 +46,6 @@
           :store="store"
           :disabled="isLoading"
         )
-    //- Prevent implicit submission of the form, for example when typing enter
-    //- in an input field.
-    //- https://stackoverflow.com/a/51507806
-    button(
-      v-show="false"
-      type="submit"
-      disabled
-    )
 </template>
 
 <script>
@@ -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 {