@ditojs/admin 3.2.4 → 3.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditojs/admin",
-  "version": "3.2.4",
+  "version": "3.2.6",
   "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/main/packages/admin",
@@ -41,8 +41,8 @@
     "not ie_mob > 0"
   ],
   "dependencies": {
-    "@ditojs/ui": "^3.2.0",
-    "@ditojs/utils": "^3.2.0"
+    "@ditojs/ui": "^3.2.6",
+    "@ditojs/utils": "^3.2.6"
   },
   "peerDependencies": {
     "@kyvg/vue3-notification": "^3.4.2",
@@ -87,7 +87,7 @@
     "vue-upload-component": "^3.2.2"
   },
   "devDependencies": {
-    "@ditojs/build": "^3.2.0",
+    "@ditojs/build": "^3.2.6",
     "@kyvg/vue3-notification": "^3.4.2",
     "@tiptap/core": "^3.31.4",
     "@tiptap/extension-blockquote": "^3.31.4",
@@ -131,5 +131,5 @@
     "vue-router": "^5.3.1",
     "vue-upload-component": "^3.2.2"
   },
-  "gitHead": "32147a4ee71f5bca6c051af04be9c15a16f37567"
+  "gitHead": "d9868ae96d60a70b5e7ba89a5fc91e07b267a0d5"
 }

package/src/DitoAdmin.js

@@ -150,9 +150,10 @@ export default class DitoAdmin {
       components: {
         DitoRoot,
         VueNotifications,
-        // This may only be needed to avoid tree-shacking of these components,
-        // since they actually handle registry internally already.
-        // TODO: Remove this once we have a better solution.
+        // Registered globally too, so that the custom components of apps can
+        // use them in their templates: Unlike the admin's own components, they
+        // don't extend `DitoComponent`, which shares its registry. This also
+        // keeps the modules from being tree-shaken.
         ...components,
         ...types
       },

package/src/components/DitoButtons.vue

@@ -5,7 +5,7 @@
   template(
     v-for="(buttonSchema, buttonDataPath) in buttonSchemas"
   )
-    DitoContainer(
+    DitoContainer.dito-buttons__container(
       v-if="shouldRenderSchema(buttonSchema)"
       :key="buttonDataPath"
       :schema="buttonSchema"
@@ -21,7 +21,7 @@
   )
     //- Render each node in the default slot through `dito-vnode`,
     //- so it can be wrapped in a `.dito-container` class.
-    .dito-container(
+    .dito-container.dito-buttons__container(
       v-if="hasVNodeContent(vnode)"
     )
       DitoVnode(:vnode="vnode")
@@ -86,8 +86,7 @@ export default DitoComponent.component('DitoButtons', {
 
 <style lang="scss">
 .dito-buttons {
-  > .dito-container {
-    padding: 0;
-  }
+  // The containers of the buttons don't add padding around them.
+  --container-padding: 0px;
 }
 </style>

package/src/components/DitoCreateButton.vue

@@ -159,6 +159,7 @@ export default DitoComponent.component('DitoCreateButton', {
   .dito-pulldown {
     right: 0;
 
+    // TODO: BEM: Use a modifier of this block for sticky button groups.
     .dito-buttons--sticky & {
       top: unset;
       right: unset;

package/src/components/DitoDialog.vue

@@ -8,7 +8,7 @@
   @mouseup="onMouseUp"
 )
   UseFocusTrap.dito-dialog__focus-trap(:options="focusTrapOptions")
-    form.dito-scroll-parent(
+    form.dito-dialog__form.dito-scroll-parent(
       @submit.prevent="submit"
       @keydown.enter="onEnter"
     )
@@ -182,7 +182,7 @@ export default DitoComponent.component('DitoDialog', {
 
     async submit() {
       // Wait for computed values that depend on pending loads, e.g. options.
-      await this.waitForPendingLoadsOf(this.dataModel)
+      await this.waitUntilDataModelSettled()
       this.resolve(this.dialogData)
     },
 
@@ -209,6 +209,8 @@ export default DitoComponent.component('DitoDialog', {
 @import '../styles/_imports';
 
 .dito-dialog {
+  $self: &;
+
   position: fixed;
   display: flex;
   inset: 0;
@@ -231,8 +233,7 @@ export default DitoComponent.component('DitoDialog', {
     order: -1;
   }
 
-  // TODO: `&__inner`
-  form {
+  &__form {
     position: relative;
     display: flex;
     box-sizing: border-box;
@@ -242,23 +243,23 @@ export default DitoComponent.component('DitoDialog', {
     max-height: 100%;
     box-shadow: 0 20px 60px -2px rgb(27, 33, 58, 0.4);
   }
-}
 
-.dito-dialog-enter-active,
-.dito-dialog-leave-active {
-  transition: opacity 0.15s;
+  &-enter-active,
+  &-leave-active {
+    transition: opacity 0.15s;
 
-  form {
-    transition: transform 0.25s;
+    #{$self}__form {
+      transition: transform 0.25s;
+    }
   }
-}
 
-.dito-dialog-enter-from,
-.dito-dialog-leave-to {
-  opacity: 0;
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
 
-  form {
-    transform: translateY(-20px);
+    #{$self}__form {
+      transform: translateY(-20px);
+    }
   }
 }
 </style>

package/src/components/DitoForm.vue

@@ -311,8 +311,6 @@ export default DitoComponent.component('DitoForm', {
         if (
           param &&
           this.providesData &&
-          // TODO: See if we can remove this due to `flush: 'post'`.
-          from.matched[0].path === to.matched[0].path && // Staying on same form
           from.params[param] !== 'create' && // But haven't been creating
           to.params[param] !== from.params[param] // Going to a different entity
         ) {
@@ -465,7 +463,7 @@ export default DitoComponent.component('DitoForm', {
 
     async submit(button, { validate = true, closeForm = false } = {}) {
       // Wait for computed values that depend on pending loads, e.g. options.
-      await this.waitForPendingLoadsOf(this.dataModel)
+      await this.waitUntilDataModelSettled()
       if (validate && !this.validateAll()) {
         return false
       }

package/src/components/DitoLabel.vue

@@ -152,6 +152,7 @@ export default DitoComponent.component('DitoLabel', {
     transform: translateY(-4px);
   }
 
+  // TODO: BEM: Style an element class of this block, e.g. `&__buttons`.
   .dito-buttons {
     // Move the label padding inside .dito-buttons, so that it captures all
     // near mouse events:

package/src/components/DitoPane.vue

@@ -349,6 +349,7 @@ export default DitoComponent.component('DitoPane', {
       }
     }
 
+    // TODO: BEM: Style an element class of this block, e.g. `&__buttons`.
     &__main + .dito-buttons--main {
       // Needed forms with sticky main buttons.
       margin: $content-padding;

package/src/components/DitoPanel.vue

@@ -244,6 +244,7 @@ export default DitoComponent.component('DitoPanel', {
       }
     }
 
+    // TODO: BEM: Style an element class of this block, e.g. `&__buttons`.
     .dito-buttons {
       position: absolute;
       right: $input-padding-ver;
@@ -266,6 +267,7 @@ export default DitoComponent.component('DitoPanel', {
         padding: 0;
       }
 
+      // TODO: BEM: Style an element class of this block, e.g. `&__buttons`.
       > .dito-buttons {
         --button-margin: #{$form-spacing};
 

package/src/components/DitoSchema.vue

@@ -975,6 +975,7 @@ function compareByDocumentPosition(component1, component2) {
     margin-bottom: 0;
   }
 
+  // TODO: BEM: Style an element class of this block, e.g. `&__buttons`.
   > .dito-buttons {
     margin-left: var(--button-margin, 0);
   }

package/src/components/DitoTreeItem.vue

@@ -97,6 +97,7 @@
       :draggable="childrenDraggable"
       :label="getItemLabel(childrenSchema, item.data, { index })"
       :level="level + 1"
+      @delete="deleteChild(index)"
     )
     //- TODO: Convert dito-tree-item to use dito-label internally, and then
     //- pass `asObject: true` in the `getItemLabel()` call above.
@@ -115,7 +116,7 @@ import { stripHtml } from '@ditojs/utils'
 // @vue/component
 export default DitoComponent.component('DitoTreeItem', {
   mixins: [ItemMixin, SortableMixin],
-  emits: ['update:data'],
+  emits: ['update:data', 'delete'],
   inject: ['container'],
 
   props: {
@@ -302,8 +303,56 @@ export default DitoComponent.component('DitoTreeItem', {
       this.editPath(this.path)
     },
 
+    // Items are removed from the children of their parent, see
+    // `deleteChild()`.
     onDelete() {
-      // TODO: Implement!
+      this.$emit('delete')
+    },
+
+    // Removes the child after confirming it, like inlined lists do. Open forms
+    // of the child or of its later siblings are closed, as the removal shifts
+    // the indices in their paths. The removal is transient, as the tree is
+    // part of its form's data.
+    deleteChild(index) {
+      const { childrenSchema, container } = this
+      const item = this.childrenList[index]
+      const label = this.getItemLabel(childrenSchema, item, {
+        index,
+        extended: true
+      })
+      if (
+        window.confirm(`Do you really want to ${this.verbs.delete} ${label}?`)
+      ) {
+        if (this.isEditingChildFrom(index)) {
+          this.$router.push({
+            path: container.path,
+            query: this.$route.query
+          })
+        }
+        this.childrenList = this.childrenList.toSpliced(index, 1)
+        this.onChange()
+        this.notify({
+          type: 'info',
+          title: 'Successfully Removed',
+          text: [`${label} was ${this.verbs.deleted}.`, container.transientNote]
+        })
+      }
+    },
+
+    // Returns whether the form of a child at the index or after it is open,
+    // or the form of one of their own children.
+    isEditingChildFrom(index) {
+      const childrenPath = this.childrenSchema.path
+      if (!childrenPath) {
+        return false
+      }
+      const prefix = `${this.path}/${childrenPath}/`
+      const { editPath } = this.container
+      if (!editPath.startsWith(prefix)) {
+        return false
+      }
+      const [childIndex] = editPath.slice(prefix.length).split('/')
+      return Number(childIndex) >= index
     },
 
     onChange() {
@@ -391,6 +440,7 @@ export default DitoComponent.component('DitoTreeItem', {
     color: rgba($color-black, 0.2);
   }
 
+  // TODO: BEM: Style an element class of this block, e.g. `&__buttons`.
   .dito-buttons {
     flex: auto;
     display: flex;

package/src/mixins/DitoMixin.js

@@ -497,17 +497,6 @@ export default {
         : parentComponentPath
     },
 
-    // Waits for the pending loads of the data model, e.g. before submitting,
-    // showing the spinner in the header in the meantime, like requests do.
-    async waitForPendingLoadsOf(dataModel) {
-      this.rootComponent.registerLoading(true)
-      try {
-        await dataModel.waitForPendingLoads()
-      } finally {
-        this.rootComponent.registerLoading(false)
-      }
-    },
-
     notify(options) {
       this.rootComponent.notify(options)
     },
@@ -626,16 +615,25 @@ export default {
             // data changes register, e.g. for `processedItem`, and the form
             // model writes the values that it derives from the data.
             // NOTE: The result of `handleListeners()` is returned as expected.
-            this.waitForDataModel().then(handleListeners)
+            this.waitUntilDataModelSettled().then(handleListeners)
           : handleListeners()
       }
     },
 
     // Waits until the data model settled: its loads finished, and it wrote the
-    // values that it derives from the data.
-    async waitForDataModel() {
+    // values that it derives from the data, e.g. before submitting. Shows the
+    // spinner in the header while loads are pending, like requests do.
+    async waitUntilDataModelSettled() {
       await this.$nextTick()
-      await this.dataModel?.waitForPendingLoads()
+      const { dataModel } = this
+      if (dataModel?.hasPendingLoads) {
+        this.rootComponent.registerLoading(true)
+        try {
+          await dataModel.waitUntilSettled()
+        } finally {
+          this.rootComponent.registerLoading(false)
+        }
+      }
     },
 
     emitSchemaEvent(event, params) {

package/src/mixins/OptionsMixin.js

@@ -5,6 +5,7 @@ import { getMultipleValue } from '../utils/schema/data.js'
 import { getSchemaAccessor } from '../utils/accessor.js'
 import { setTemporaryId, isReference } from '../utils/data.js'
 import {
+  asArray,
   isObject,
   isArray,
   isString,
@@ -46,7 +47,12 @@ export default {
           if (!this.relate) {
             return value
           }
-          const option = this.getOptionForValue(value)
+          // Keep related objects without options, see
+          // `DitoTypeMultiselect.getFallbackOption()`.
+          const option = (
+            this.getOptionForValue(value) ??
+            this.getRelatedObject(value)
+          )
           if (this.shouldSetTemporaryId(option)) {
             // Options without ids, e.g. new items of the edited data, get
             // temporary ids when selected, so that the relation can reference
@@ -325,6 +331,14 @@ export default {
         : value
     },
 
+    // Returns the related object in the value with the given value of its
+    // option, e.g. its id.
+    getRelatedObject(value) {
+      return asArray(this.value).find(
+        object => this.getValueForOption(object) === value
+      )
+    },
+
     getValueForOption(option) {
       if (this.shouldSetTemporaryId(option)) {
         // Until they're selected and get temporary ids, options without ids

package/src/mixins/ResourceMixin.js

@@ -26,6 +26,12 @@ export default {
   },
 
   computed: {
+    // Whether the component is part of a form, e.g. a list that loads its own
+    // data, unlike forms and the lists of views.
+    isInsideForm() {
+      return !this.isForm && !!this.formComponent
+    },
+
     resourceComponent() {
       return this
     },
@@ -215,9 +221,15 @@ export default {
               this.onFilterErrors?.(data.errors)
             ) {
               return true
-            } else if (this.isUnauthorizedError(response)) {
-              // TODO: Can we really swallow these errors?
-              // Is calling `ensureUser()` in `onBeforeRequest()` enough?
+            } else if (
+              this.isUnauthorizedError(response) &&
+              this.isInsideForm
+            ) {
+              // The user is logged in, see `sendRequest()`, but may not access
+              // the resource of a component in a form, e.g. a list that loads
+              // its own data. Show it on the component, as several components
+              // of the form may be affected. Others notify like for errors.
+              this.addUnauthorizedError()
               return true
             }
           }
@@ -242,6 +254,13 @@ export default {
       return response?.status === 401
     },
 
+    addUnauthorizedError() {
+      const error = `You don't have permission to load this data.`
+      if (!this.errors?.includes(error)) {
+        this.addError(error)
+      }
+    },
+
     async handleRequest(
       {
         method,

package/src/styles/_button.scss

@@ -109,10 +109,53 @@
       cursor: grabbing;
     }
   }
+
+  .dito-buttons--large & {
+    border-radius: 2em;
+    padding: $button-round-padding;
+  }
+
+  // Buttons in round and small button groups show icons instead of text.
+  // For now, nothing for create: &--create:empty::before
+  .dito-buttons--round &,
+  .dito-buttons--small & {
+    &--add:empty::before {
+      @extend %icon-add;
+    }
+
+    &--upload:empty::before {
+      @extend %icon-upload;
+    }
+
+    &--delete:empty::before,
+    &--remove:empty::before {
+      @extend %icon-remove;
+    }
+
+    &--edit:empty::before {
+      @extend %icon-edit;
+    }
+
+    &--clear:empty::before {
+      @extend %icon-clear;
+    }
+
+    &--drag:empty::before {
+      @extend %icon-drag;
+    }
+
+    &--copy:empty::before {
+      @extend %icon-copy;
+    }
+
+    &--paste:empty::before {
+      @extend %icon-paste;
+    }
+  }
 }
 
 .dito-buttons {
-  // TODO: BEM
+  $self: &;
 
   &--large {
     --button-margin: 3px;
@@ -122,15 +165,10 @@
     justify-content: center;
     padding-bottom: $content-padding;
 
-    .dito-container {
+    #{$self}__container {
       // Do not specify this on .dito-buttons directly as it would break borders
       margin-top: $content-padding;
     }
-
-    .dito-button {
-      border-radius: 2em;
-      padding: $button-round-padding;
-    }
   }
 
   &--main {
@@ -152,43 +190,4 @@
       display: none;
     }
   }
-
-  &--round,
-  &--small {
-    // For now, nothing for create:
-    // .dito-button--create:empty::before
-
-    .dito-button--add:empty::before {
-      @extend %icon-add;
-    }
-
-    .dito-button--upload:empty::before {
-      @extend %icon-upload;
-    }
-
-    .dito-button--delete:empty::before,
-    .dito-button--remove:empty::before {
-      @extend %icon-remove;
-    }
-
-    .dito-button--edit:empty::before {
-      @extend %icon-edit;
-    }
-
-    .dito-button--clear:empty::before {
-      @extend %icon-clear;
-    }
-
-    .dito-button--drag:empty::before {
-      @extend %icon-drag;
-    }
-
-    .dito-button--copy:empty::before {
-      @extend %icon-copy;
-    }
-
-    .dito-button--paste:empty::before {
-      @extend %icon-paste;
-    }
-  }
 }

package/src/types/DitoTypeCode.vue

@@ -47,10 +47,10 @@ export default DitoTypeComponent.register('code', {
       default: false
     }),
 
+    // The height of the lines is set through `--lines` and the styles, which
+    // add the padding, unless the editor was resized to a height of its own.
     style() {
-      return {
-        height: this.height || `calc(${this.lines}em * var(--line-height))`
-      }
+      return this.height ? { height: this.height } : { '--lines': this.lines }
     }
   },
 
@@ -175,6 +175,9 @@ export default DitoTypeComponent.register('code', {
   // For proper sizing of content along with :style="style" setting above,
   // for proper line-height calculation.
   padding: $input-padding;
+  height: calc(
+    var(--lines) * 1em * var(--line-height) + 2 * #{$input-padding-ver}
+  );
   min-height: calc(1em * var(--line-height) + 2 * $input-padding-ver);
 
   .codeflask {

package/src/types/DitoTypeMarkup.vue

@@ -613,6 +613,7 @@ const LinkWithTitle = Link.extend({
     padding-right: $input-padding-hor;
   }
 
+  // TODO: BEM: Style an element class of this block, e.g. `&__buttons`.
   .dito-buttons--toolbar {
     margin: 0;
   }